Fluffy/WebsiteFluffy
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-05-30 07:13:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix issues brought up by astro build

Browse source 
Use Astro image and picture elements
Move images to assets folder
This commit is contained in:
Michał Gdula 2024-05-25 17:30:17 +01:00
parent 3acfb73ce8
commit 457591297a
17 changed files with 86 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/banner.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1,022 KiB

9
public/favicon.svg
View file

@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 749 B

0
public/banner-alt.webp → src/assets/banner-alt.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 MiB

After

Width:  |  Height:  |  Size: 12 MiB

Before After
Before After

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

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 111 KiB

Before After
Before After

0
public/leg.webp → src/assets/leg.webp
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Before After
Before After

12
src/components/Certificate.astro
View file

@ -10,15 +10,15 @@ const { certificate } = Astro.props;
<p>By: {certificate.data.provider}</p> <p>By: {certificate.data.provider}</p>
{certificate.data.skills && ( {certificate.data.skills && (
<ul class="pill-list"> <ul class="pill-list">
{certificate.data.skills.map(skill => ( {certificate.data.skills.map((skill: string) => (
<li class="pill">{skill}</li> <li class="pill">{skill}</li>
))} ))}
</ul> </ul>
)} )}
{certificate.data.link && ( {certificate.data.link && (
<a href={certificate.data.link} class="button">View</a> <a href={certificate.data.link} class="button">View</a>
)} )}
</div> </div>
</div> </div>

2
src/components/Music.astro
View file

@ -1,7 +1,7 @@
--- ---
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import leg from "../../public/leg.webp"; import leg from "../assets/leg.webp";
--- ---
<a class="button" id="music" href="https://www.last.fm/user/Fluffy_Bean_" target="_blank"> <a class="button" id="music" href="https://www.last.fm/user/Fluffy_Bean_" target="_blank">

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

@ -1,12 +1,12 @@
--- ---
title: Code Examples title: "Code Examples"
description: Aurghhhhhh description: "Aurghhhhhh"
pubDate: 2022-07-08 pubDate: 2022-07-08
image: image:
url: https://docs.astro.build/assets/arc.webp url: "https://docs.astro.build/assets/arc.webp"
alt: Tennis balls alt: "Tennis balls"
tags: tags:
- Gaybo - "Gaybo"
--- ---
Penitc Penitc

44
src/layouts/Layout.astro
View file

@ -1,15 +1,22 @@
--- ---
import "../styles/styles.scss"; import { Picture, getImage } from 'astro:assets';
import { Image } from "astro:assets"; import "../styles/styles.scss";
interface Props { interface Props {
title: string; title: string;
src?: string, image: string,
alt: string, alt: string,
} }
const { title, src, alt } = Astro.props; const { title, image, alt } = Astro.props;
let imageData = await getImage({
src: image,
format: "jpeg",
width: 1080,
height: 700,
});
--- ---
<!doctype html> <!doctype html>
@ -20,7 +27,7 @@ const { title, src, alt } = Astro.props;
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/webp" href="/src/assets/leg.webp" />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
@ -29,19 +36,26 @@ const { title, src, alt } = Astro.props;
</head> </head>
<body> <body>
<div class="banner"> <div class="banner">
{src && ( <Picture
<Image src={src} width="1080" height="700" loading="eager" alt={alt} /> src={imageData.src}
<script> alt={alt}
const img = document.querySelector(".banner > img"); width={1080}
document.addEventListener("scroll", () => { height={700}
img.style.top = `${window.scrollY}px`; widths={[240, 540, 720, 1080]}
img.style.filter = `blur(${window.scrollY / 100}px)`; sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1080px`}
}) formats={['jpeg', 'webp']}
</script> loading="eager"
)} />
</div> </div>
<main> <main>
<slot /> <slot />
</main> </main>
</body> </body>
<script>
const img = document.querySelector(".banner > picture > img") as HTMLImageElement;
document.addEventListener("scroll", () => {
img.style.top = `${window.scrollY}px`;
img.style.filter = `blur(${window.scrollY / 100}px)`;
})
</script>
</html> </html>

13
src/layouts/Markdown.astro
View file

@ -3,6 +3,9 @@ import HomeButton from "../components/HomeButton.astro";
interface Props { interface Props {
post: any, post: any,
prev?: any,
next?: any,
base: string,
} }
const { post, prev, next, base } = Astro.props; const { post, prev, next, base } = Astro.props;
@ -36,18 +39,20 @@ const { Content } = await post.render();
<li> <li>
{prev && ( {prev && (
<a class="button" href=`${base}/${prev.slug}` id="prev"> <a class="button" href=`${base}/${prev.slug}` id="prev">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
<path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
</svg>
Last Last
<!--{ prev.data.title }-->
</a> </a>
)} )}
</li> </li>
<li> <li>
{next && ( {next && (
<a class="button" href=`${base}/${next.slug}` id="next"> <a class="button" href=`${base}/${next.slug}` id="next">
<!--{ next?.data.title }-->
Next Next
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
<path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
</svg>
</a> </a>
)} )}
</li> </li>

7
src/pages/index.astro
View file

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

20
src/pages/leg.astro
View file

@ -1,10 +1,15 @@
--- ---
import { Picture, getImage } from "astro:assets";
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import BannerImg from "../../../public/banner-alt.webp";
import HomeButton from "../components/HomeButton.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});
--- ---
<Layout title="LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG" src={BannerImg} alt="Temporary Banner"> <Layout title="LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG LEG" image={image.src} alt="alt">
<HomeButton /> <HomeButton />
<div class="header"> <div class="header">
@ -14,5 +19,14 @@ import HomeButton from "../components/HomeButton.astro";
<hr> <hr>
<img src="/leg.jpg" alt="Two Maned wolfs having a disagreement" /> <Picture
src={GwaGwa}
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> </Layout>

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

@ -11,7 +11,7 @@ export async function getStaticPaths() {
props: { props: {
post: post, post: post,
prev: i > 0 ? collection[i - 1] : undefined, prev: i > 0 ? collection[i - 1] : undefined,
next: i < collection.length - 1 ? collection[i + 1] : undefined next: i < collection.length - 1 ? collection[i + 1] : undefined,
} }
})); }));
} }
@ -19,6 +19,6 @@ export async function getStaticPaths() {
const { post, prev, next } = Astro.props; const { post, prev, next } = Astro.props;
--- ---
<Layout title=`Leggy Land - ${post.data.title}` src={post.data.image.url} alt={post.data.image.alt}> <Layout title=`Leggy Land - ${post.data.title}` image={post.data.image.url} alt={post.data.image.alt}>
<Markdown {post} {prev} {next} base="/posts" /> <Markdown {post} {prev} {next} base="/posts" />
</Layout> </Layout>

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

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

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

@ -19,6 +19,6 @@ export async function getStaticPaths() {
const { post, prev, next } = Astro.props; const { post, prev, next } = Astro.props;
--- ---
<Layout title=`Leggy Land - ${post.data.title}` src={post.data.image.url} alt={post.data.image.alt}> <Layout title=`Leggy Land - ${post.data.title}` image={post.data.image.url} alt={post.data.image.alt}>
<Markdown {post} {prev} {next} base="/projects" /> <Markdown {post} {prev} {next} base="/projects" />
</Layout> </Layout>

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

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

2
src/styles/_banner.scss
View file

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