luaneko/lua.re
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sticker
All checks were successful
Deploy website / deploy (push) Successful in 20s
Details

Browse Source
This commit is contained in:
lumi 2025-08-11 17:30:49 +10:00
parent b3966fbb37
commit 5fc6dafbbb
Signed by: luaneko
GPG Key ID: 406809B8763FF07A
6 changed files with 48 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/sticker.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 KiB

16
src/components/card.astro Normal file
View File

@ -0,0 +1,16 @@
---
import type { HTMLAttributes, HTMLTag } from "astro/types";
type Props = HTMLAttributes<"section"> & { tag?: HTMLTag };
const { tag: Tag = "section", class: className, ...props } = Astro.props;
---
<Tag
class:list={[
"relative px-5 py-4 min-w-0 min-h-0 overflow-scroll",
"bg-white shadow-xs rounded-xl",
className,
]}
{...props}
>
<slot />
</Tag>

11
src/components/image.astro
View File

@ -1,13 +1,15 @@
--- ---
import { type UnresolvedImageTransform } from "astro"; import { type UnresolvedImageTransform } from "astro";
import type { HTMLTag } from "astro/types";
import { getImage } from "astro:assets"; import { getImage } from "astro:assets";
type Props = UnresolvedImageTransform & { type Props = UnresolvedImageTransform & {
tag?: HTMLTag;
id?: string; id?: string;
class?: string; class?: string;
}; };
const { id, class: className, ...transform } = Astro.props; const { tag: Tag = "span", id, class: className, ...transform } = Astro.props;
const { const {
src, src,
options: { width, height }, options: { width, height },
@ -16,17 +18,16 @@ const {
<style> <style>
.image { .image {
display: inline-block;
width: 100%;
background-size: contain; background-size: contain;
background-position: center; background-position: center;
} }
</style> </style>
<span <Tag
id={id} id={id}
class:list={["image", className]} class:list={["image", className]}
style={{ style={{
aspectRatio: width && height ? width / height : undefined, aspectRatio: width && height ? width / height : undefined,
backgroundImage: `url(${JSON.stringify(src)})`, backgroundImage: `url(${JSON.stringify(src)})`,
}}></span> }}
/>

11
src/components/sticker.astro Normal file
View File

@ -0,0 +1,11 @@
---
import Image from "@components/image.astro";
import sticker from "@assets/sticker.gif";
---
<Image
tag="aside"
class="fixed -bottom-14 right-0 -rotate-10 opacity-10 -z-10 w-48 pointer-events-none"
format="webp"
src={sticker}
/>

16
src/layouts/index.astro
View File

@ -1,13 +1,11 @@
--- ---
import "./index.css"; import "./index.css";
import icon from "@assets/icon.png"; import icon from "@assets/icon.png";
import Sticker from "@components/sticker.astro";
import type { HTMLAttributes } from "astro/types";
type Props = { type Props = HTMLAttributes<"body"> & { title?: string };
title?: string; const { title, class: className, ...props } = Astro.props;
class?: string;
};
const { title, class: className } = Astro.props;
--- ---
<html lang="en"> <html lang="en">
@ -37,7 +35,11 @@ const { title, class: className } = Astro.props;
data-domain="lua.re" data-domain="lua.re"
src="https://track.lua.re/js/script.js"></script> src="https://track.lua.re/js/script.js"></script>
</head> </head>
<body class:list={["max-w-screen-sm mx-auto p-4 flex flex-col", className]}> <body
class:list={["max-w-screen-sm mx-auto p-4 flex flex-col", className]}
{...props}
>
<slot /> <slot />
<Sticker />
</body> </body>
</html> </html>

13
src/pages/index.astro
View File

@ -1,5 +1,6 @@
--- ---
import Layout from "@layouts/index.astro"; import Layout from "@layouts/index.astro";
import Card from "@components/card.astro";
import Image from "@components/image.astro"; import Image from "@components/image.astro";
import miku from "@assets/miku.jpg"; import miku from "@assets/miku.jpg";
import gato from "@assets/gato.jpg"; import gato from "@assets/gato.jpg";
@ -9,7 +10,7 @@ const links = {
twt: { alt: "Twitter", href: "https://twitter.com/luanekos" }, twt: { alt: "Twitter", href: "https://twitter.com/luanekos" },
mail: { alt: "Email", href: "mailto:lumi(at)lua.re" }, mail: { alt: "Email", href: "mailto:lumi(at)lua.re" },
pgp: { pgp: {
alt: "PGP", alt: "PGP Key",
href: "https://git.lua.re/luaneko/.profile/raw/branch/master/luaneko.pgp.pub", href: "https://git.lua.re/luaneko/.profile/raw/branch/master/luaneko.pgp.pub",
}, },
// bsky: { alt: "Bluesky", href: "https://bsky.app/profile/lua.re" }, // bsky: { alt: "Bluesky", href: "https://bsky.app/profile/lua.re" },
@ -17,9 +18,7 @@ const links = {
--- ---
<Layout class="max-h-screen"> <Layout class="max-h-screen">
<main <Card tag="main" class="flex flex-col space-y-2">
class="px-5 py-4 space-y-2 bg-white rounded-lg shadow-xs min-h-0 overflow-scroll"
>
<pre>{ <pre>{
` ∧...∧ 𝜗𝜚 ` ∧...∧ 𝜗𝜚
( ̳• · • ̳) ᭢ ( ̳• · • ̳) ᭢
@ -27,7 +26,7 @@ const links = {
}</pre> }</pre>
<p>hi i'm luaneko ^^</p> <p>hi i'm luaneko ^^</p>
<p>this is my site where i put a bunch of random stuff !</p> <p>this is my site where i put a bunch of random stuff !</p>
<p><Image src={miku} class="rounded-lg max-w-80" /></p> <p><Image src={miku} class="block rounded-lg max-w-80" /></p>
<pre>{ <pre>{
` へ ╱ 、 ` へ ╱ 、
૮ - ՛ ) (˚ˎ 。7 ૮ - ՛ ) (˚ˎ 。7
@ -35,9 +34,9 @@ const links = {
乀(ˍ, ل ل じしˍ,)ノ` 乀(ˍ, ل ل じしˍ,)ノ`
}</pre> }</pre>
<p>i love cats they miau miau</p> <p>i love cats they miau miau</p>
<p><Image src={gato} class="rounded-lg max-w-60" /></p> <p><Image src={gato} class="block rounded-lg max-w-60" /></p>
<p>best way to contact me is by twt or mail {`<3`}</p> <p>best way to contact me is by twt or mail {`<3`}</p>
</main> </Card>
<footer class="flex flex-row space-x-1 my-2 text-sm"> <footer class="flex flex-row space-x-1 my-2 text-sm">
{ {