Fluffy/WebsiteFluffy
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-06-12 21:53:12 +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
src/assets/banner-alt.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 MiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
src/assets/leg.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

12
src/components/Certificate.astro
View file

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

2
src/components/Music.astro
View file

@ -1,7 +1,7 @@
---
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">

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

@ -1,12 +1,12 @@
---
title: Code Examples
description: Aurghhhhhh
title: "Code Examples"
description: "Aurghhhhhh"
pubDate: 2022-07-08
image:
url: https://docs.astro.build/assets/arc.webp
alt: Tennis balls
url: "https://docs.astro.build/assets/arc.webp"
alt: "Tennis balls"
tags:
- Gaybo
- "Gaybo"
---
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 {
title: string;
src?: string,
image: 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>
@ -20,7 +27,7 @@ const { title, src, alt } = Astro.props;
<meta name="viewport" content="width=device-width" />
<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.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">
@ -29,19 +36,26 @@ const { title, src, alt } = Astro.props;
</head>
<body>
<div class="banner">
{src && (
<Image src={src} width="1080" height="700" loading="eager" alt={alt} />
<script>
const img = document.querySelector(".banner > img");
document.addEventListener("scroll", () => {
img.style.top = `${window.scrollY}px`;
img.style.filter = `blur(${window.scrollY / 100}px)`;
})
</script>
)}
<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']}
loading="eager"
/>
</div>
<main>
<slot />
</main>
</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>

13
src/layouts/Markdown.astro
View file

@ -3,6 +3,9 @@ import HomeButton from "../components/HomeButton.astro";
interface Props {
post: any,
prev?: any,
next?: any,
base: string,
}
const { post, prev, next, base } = Astro.props;
@ -36,18 +39,20 @@ const { Content } = await post.render();
<li>
{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
<!--{ prev.data.title }-->
</a>
)}
</li>
<li>
{next && (
<a class="button" href=`${base}/${next.slug}` id="next">
<!--{ next?.data.title }-->
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>
)}
</li>

7
src/pages/index.astro
View file

@ -1,12 +1,13 @@
---
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 "../../public/banner-alt.webp";
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"];
@ -14,9 +15,11 @@ 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" src={BannerImg} alt="Temporary Banner">
<Layout title="Leggy Land" image={image.src} alt="alt">
<div class="header">
<h1>Leggy Land</h1>
<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 BannerImg from "../../../public/banner-alt.webp";
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 />
<div class="header">
@ -14,5 +19,14 @@ import HomeButton from "../components/HomeButton.astro";
<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>

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

@ -11,7 +11,7 @@ export async function getStaticPaths() {
props: {
post: post,
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;
---
<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" />
</Layout>

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

@ -1,14 +1,17 @@
---
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 "../../../public/banner-alt.webp";
import BannerImg from "../../assets/banner-alt.webp";
const image = await getImage({src: BannerImg});
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 />
<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;
---
<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" />
</Layout>

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

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

2
src/styles/_banner.scss
View file

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