mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-01-29 17:28:28 +00:00
Fix issues brought up by astro build
Use Astro image and picture elements Move images to assets folder
This commit is contained in:
parent
3acfb73ce8
commit
457591297a
Binary file not shown.
|
Before Width: | Height: | Size: 1,022 KiB |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 749 B |
|
Before Width: | Height: | Size: 12 MiB After Width: | Height: | Size: 12 MiB |
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
overflow: hidden;
|
||||
|
||||
> img {
|
||||
> picture > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue