Fluffy/website
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2024-12-28 02:16:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Yeet custom images for blogs and posts and stuff, because I dont wanna loose all my hair FUCK

Browse source 
Clean up examples that I need to work with
Remove un-needed code bluh
Leg
This commit is contained in:
Michał 2024-05-26 18:29:33 +01:00
parent 457591297a
commit 09c53ed7ac
21 changed files with 56 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/banner-alt.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 MiB

BIN
src/assets/banner.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 415 KiB

BIN
src/assets/cupcake.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 322 KiB

0
src/assets/leg.jpg → src/assets/fumble.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 111 KiB

2
src/content/content.ts
View file

@ -7,7 +7,6 @@ const postsCollection = defineCollection({
title: z.string(),
description: z.string(),
pubDate: z.date(),
image: z.string().optional(),
tags: z.array(z.string()),
}),
});
@ -18,7 +17,6 @@ const projectsCollection = defineCollection({
draft: z.boolean().optional(),
title: z.string(),
description: z.string(),
image: z.string().optional(),
tags: z.array(z.string()),
}),
});

5
src/content/posts/code-examples.md
View file

@ -2,15 +2,10 @@
title: "Code Examples"
description: "Aurghhhhhh"
pubDate: 2022-07-08
image:
url: "https://docs.astro.build/assets/arc.webp"
alt: "Tennis balls"
tags:
- "Gaybo"
---
Penitc
```astro
---
import { getPosts } from "../../utils";

15
src/content/posts/example.md
View file

@ -1,15 +0,0 @@
---
title: This is an example Post
description: "Blamby ford"
pubDate: 2022-07-08
image:
url: "https://docs.astro.build/assets/arc.webp"
alt: "Thumbnail of Astro arcs."
tags:
- "GwaGwa"
- "Gaming"
- "Urchin"
- "Fortnite"
---
aurgh

11
src/content/posts/image-examples.md Normal file
View file

@ -0,0 +1,11 @@
---
title: "Image Examples"
description: "fug"
pubDate: 2024-07-08
tags:
- "Faggo"
---
![Image](../../assets/cupcake.jpg)
critter time!!!!

5
src/content/posts/markdown-cheat-sheet.md
View file

@ -1,12 +1,7 @@
---
#draft: true
title: This is an example Post
description: "Cheat Sheet for Markdown"
pubDate: 2022-07-08
image:
url: "https://docs.astro.build/assets/arc.webp"
alt: "Thumbnail of Astro arcs."
tags:
- "Faggor"
---

14
src/content/projects/example-2.md
View file

@ -1,14 +0,0 @@
---
title: Project 2
description: Another one
image:
url: "https://docs.astro.build/assets/arc.webp"
alt: "Thumbnail of Astro arcs."
tags:
- "GwaGwa"
- "Gaming"
- "Urchin"
- "Fortnite"
---
AURGH

14
src/content/projects/example.md
View file

@ -1,14 +0,0 @@
---
title: Project 1
description: Example Project Im working on
image:
url: "https://docs.astro.build/assets/arc.webp"
alt: "Thumbnail of Astro arcs."
tags:
- "GwaGwa"
- "Gaming"
- "Urchin"
- "Fortnite"
---
Gay Balls even

11
src/content/projects/gwagwa.md
View file

@ -1,9 +1,6 @@
---
title: GwaGwa
description: :3
image:
url: "https://docs.astro.build/assets/arc.webp"
alt: "Thumbnail of Astro arcs."
description: This astro page
tags:
- "GwaGwa"
- "Gaming"
@ -11,4 +8,8 @@ tags:
- "Fortnite"
---
gwagwa
Im actually going to blow up
I FUCKING HATE JAVASCRIPT

29
src/layouts/Layout.astro
View file

@ -1,7 +1,6 @@
---
import { Picture, getImage } from 'astro:assets';
import "../styles/styles.scss";
import Banner from "../assets/banner.png";
interface Props {
title: string;
@ -9,14 +8,7 @@ interface Props {
alt: string,
}
const { title, image, alt } = Astro.props;
let imageData = await getImage({
src: image,
format: "jpeg",
width: 1080,
height: 700,
});
const { title} = Astro.props;
---
<!doctype html>
@ -36,15 +28,13 @@ let imageData = await getImage({
</head>
<body>
<div class="banner">
<Picture
src={imageData.src}
alt={alt}
width={1080}
height={700}
widths={[240, 540, 720, 1080]}
sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1080px`}
formats={['jpeg', 'webp']}
<img
src={Banner.src}
alt="Stretch of road leading to cloudy hills with houses in the horizon"
width="1080"
height="700"
loading="eager"
decoding="async"
/>
</div>
<main>
@ -52,9 +42,10 @@ let imageData = await getImage({
</main>
</body>
<script>
const img = document.querySelector(".banner > picture > img") as HTMLImageElement;
const img = document.querySelector(".banner > img") as HTMLImageElement;
document.addEventListener("scroll", () => {
img.style.top = `${window.scrollY}px`;
img.style.transform = `scale(${(window.scrollY / 10000) + 1})`;
img.style.filter = `blur(${window.scrollY / 100}px)`;
})
</script>

31
src/layouts/Markdown.astro
View file

@ -9,8 +9,6 @@ interface Props {
}
const { post, prev, next, base } = Astro.props;
const { Content } = await post.render();
---
<HomeButton />
@ -29,7 +27,7 @@ const { Content } = await post.render();
<div id="markdown">
<div style="margin-bottom: 32px" />
<Content />
<slot></slot>
<div style="margin-top: 32px" />
</div>
@ -68,9 +66,6 @@ const { Content } = await post.render();
align-content: center;
> li > .button {
// background-color: transparent;
// padding: 0 16px;
min-width: 35px;
height: 35px;
@ -181,22 +176,12 @@ const { Content } = await post.render();
}
}
// pre {
// padding: 8px;
//
// white-space: pre-wrap;
// word-wrap: break-word;
//
// border-radius: $radius;
// background-color: $gray !important;
// color: $light;
//
// overflow-x: scroll;
//
// > code {
// padding: 0;
// }
// }
img {
max-width: 100%;
height: auto;
border-radius: $radius;
}
.astro-code {
margin: 16px 0;
@ -241,7 +226,7 @@ const { Content } = await post.render();
background-color: $gray;
> h2 {
padding-top: 0;
margin-top: 0;
}
}
}

6
src/pages/index.astro
View file

@ -1,13 +1,11 @@
---
import { getCollection } from "astro:content";
import { getImage } from "astro:assets";
import { getPosts } from "../utils";
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import Certificate from "../components/Certificate.astro";
import Music from "../components/Music.astro";
import BannerImg from "../assets/banner-alt.webp";
const tools = ["Proxmox", "JetBrain IDEs", "Docker", "Linux", "SQLite", "Postgres", "MySQL"];
const languages = ["Go", "Python", "HTML", "CSS", "Sass", "TypeScript", "JavaScript", "Scratch", "PHP", "SQL", "Bash"];
@ -15,11 +13,9 @@ const frameworks = ["Gin", "Echo", "Flask", "Svelte", "Astro", "raylib"];
const certificates = await getCollection("certificates");
const projects = await getPosts("projects");
const posts = await getPosts("posts");
const image = await getImage({src: BannerImg});
---
<Layout title="Leggy Land" image={image.src} alt="alt">
<Layout title="Leggy Land">
<div class="header">
<h1>Leggy Land</h1>
<p>Made with Coffee, lots of it.</p>

16
src/pages/leg.astro
View file

@ -1,15 +1,10 @@
---
import { Picture, getImage } from "astro:assets";
import Layout from "../layouts/Layout.astro";
import HomeButton from "../components/HomeButton.astro";
import GwaGwa from "../assets/leg.jpg";
import BannerImg from "../assets/banner-alt.webp";
const image = await getImage({src: BannerImg});
import GwaGwa from "../assets/fumble.jpg";
---
<Layout title="LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG" image={image.src} alt="alt">
<Layout title="LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG">
<HomeButton />
<div class="header">
@ -19,14 +14,11 @@ const image = await getImage({src: BannerImg});
<hr>
<Picture
src={GwaGwa}
<img
src={GwaGwa.src}
alt="Two Maned wolfs having a disagreement"
width="851"
height="575"
widths={[240, 540, 720, 851]}
sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 851px`}
formats={["jpeg", "webp"]}
style="height: auto"
/>
</Layout>

8
src/pages/posts/[...slug].astro
View file

@ -17,8 +17,12 @@ export async function getStaticPaths() {
}
const { post, prev, next } = Astro.props;
const { Content } = await post.render();
---
<Layout title=`Leggy Land - ${post.data.title}` image={post.data.image.url} alt={post.data.image.alt}>
<Markdown {post} {prev} {next} base="/posts" />
<Layout title=`Leggy Land - ${post.data.title}`>
<Markdown post={post} prev={prev} next={next} base="/posts">
<Content />
</Markdown>
</Layout>

6
src/pages/posts/index.astro
View file

@ -1,17 +1,13 @@
---
import { getImage } from "astro:assets";
import { getPosts } from "../../utils";
import Layout from "../../layouts/Layout.astro";
import HomeButton from "../../components/HomeButton.astro";
import Card from "../../components/Card.astro";
import BannerImg from "../../assets/banner-alt.webp";
const image = await getImage({src: BannerImg});
const posts = await getPosts("posts");
---
<Layout title="Leggy Land - All Posts" image={image.src} alt="alt">
<Layout title="Leggy Land - All Posts">
<HomeButton />
<div class="header">

8
src/pages/projects/[...slug].astro
View file

@ -17,8 +17,12 @@ export async function getStaticPaths() {
}
const { post, prev, next } = Astro.props;
const { Content } = await post.render();
---
<Layout title=`Leggy Land - ${post.data.title}` image={post.data.image.url} alt={post.data.image.alt}>
<Markdown {post} {prev} {next} base="/projects" />
<Layout title=`Leggy Land - ${post.data.title}`>
<Markdown post={post} prev={prev} next={next} base="/posts">
<Content />
</Markdown>
</Layout>

6
src/pages/projects/index.astro
View file

@ -1,17 +1,13 @@
---
import { getImage } from "astro:assets";
import { getPosts } from "../../utils";
import Layout from "../../layouts/Layout.astro";
import Card from "../../components/Card.astro";
import HomeButton from "../../components/HomeButton.astro";
import BannerImg from "../../assets/banner-alt.webp";
const image = await getImage({src: BannerImg});
const projects = await getPosts("projects");
---
<Layout title="Leggy Land - All Projects" image={image.src} alt="alt">
<Layout title="Leggy Land - All Projects">
<HomeButton />
<div class="header">

2
src/styles/_banner.scss
View file

@ -9,7 +9,7 @@
overflow: hidden;
> picture > img {
> img {
width: 100%;
height: 100%;