|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 719 B After Width: | Height: | Size: 627 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.5 KiB |
BIN
public/icon.png
|
Before Width: | Height: | Size: 24 KiB |
BIN
src/assets/gato.jpg
Normal file
|
After Width: | Height: | Size: 82 KiB |
BIN
src/assets/icon.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
src/assets/luaneko.jpg
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/peace.jpg
Normal file
|
After Width: | Height: | Size: 72 KiB |
32
src/components/image.astro
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
---
|
||||||
|
import { type UnresolvedImageTransform } from "astro";
|
||||||
|
import { getImage } from "astro:assets";
|
||||||
|
|
||||||
|
type Props = UnresolvedImageTransform & {
|
||||||
|
id?: string;
|
||||||
|
class?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { id, class: className, ...transform } = Astro.props;
|
||||||
|
const {
|
||||||
|
src,
|
||||||
|
options: { width, height },
|
||||||
|
} = await getImage({ format: "jpeg", ...transform });
|
||||||
|
---
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.image {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<span
|
||||||
|
id={id}
|
||||||
|
class:list={["image", className]}
|
||||||
|
style={{
|
||||||
|
aspectRatio: width && height ? width / height : undefined,
|
||||||
|
backgroundImage: `url(${JSON.stringify(src)})`,
|
||||||
|
}}></span>
|
||||||
@ -1,8 +1,6 @@
|
|||||||
---
|
---
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import icon from "@assets/icon.png";
|
import icon from "@assets/icon.png";
|
||||||
import favicon16x16 from "@assets/favicon-16x16.png";
|
|
||||||
import favicon32x32 from "@assets/favicon-32x32.png";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
title?: string;
|
title?: string;
|
||||||
@ -17,20 +15,29 @@ const { title, class: className } = Astro.props;
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<title>{title ?? "lua.re"}</title>
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href={favicon16x16.src} />
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href={favicon32x32.src} />
|
<link
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href={icon.src} />
|
rel="icon"
|
||||||
|
type={`image/${icon.format}`}
|
||||||
|
sizes={`${icon.width}x${icon.height}`}
|
||||||
|
href={icon.src}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
type={`image/${icon.format}`}
|
||||||
|
sizes={`${icon.width}x${icon.height}`}
|
||||||
|
href={icon.src}
|
||||||
|
/>
|
||||||
|
|
||||||
<script
|
<script
|
||||||
is:inline
|
is:inline
|
||||||
defer
|
defer
|
||||||
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>
|
||||||
|
|
||||||
<title>{title ?? "lua.re"}</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body class={className}>
|
<body class:list={["max-w-screen-sm mx-auto p-4 flex flex-col", className]}>
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,5 +1,8 @@
|
|||||||
---
|
---
|
||||||
import Layout from "@layouts/index.astro";
|
import Layout from "@layouts/index.astro";
|
||||||
|
import Image from "@components/image.astro";
|
||||||
|
import peace from "@assets/peace.jpg";
|
||||||
|
import gato from "@assets/gato.jpg";
|
||||||
|
|
||||||
const links = {
|
const links = {
|
||||||
git: { alt: "Git", href: "https://git.lua.re/" },
|
git: { alt: "Git", href: "https://git.lua.re/" },
|
||||||
@ -9,15 +12,29 @@ const links = {
|
|||||||
};
|
};
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout class="max-w-screen-sm mx-auto p-8">
|
<Layout class="max-h-screen">
|
||||||
<main class="px-4 py-3 bg-white rounded shadow-xs leading-tight">
|
<main
|
||||||
|
class="px-5 py-3 space-y-2 bg-white rounded-lg shadow-xs leading-tight min-h-0 overflow-scroll"
|
||||||
|
>
|
||||||
<pre>{
|
<pre>{
|
||||||
` ∧...∧ 𝜗𝜚
|
` ∧...∧ 𝜗𝜚
|
||||||
( ̳• · • ̳) ᭢
|
( ̳• · • ̳) ᭢
|
||||||
/ づ `}<a href={links.twt.href} title={links.twt.alt}>awa {`⋆.⁺₊`}</a>{
|
/ づ /// ⋆.⁺₊`
|
||||||
}</pre>
|
}</pre>
|
||||||
|
|
||||||
|
<p>mew mew</p>
|
||||||
|
<p><Image src={peace} class="rounded max-w-60" /></p>
|
||||||
|
<pre>{
|
||||||
|
` へ ╱ 、
|
||||||
|
૮ - ՛ ) (˚ˎ 。7
|
||||||
|
/ ⁻ ៸| |、˜〵 ♡
|
||||||
|
乀(ˍ, ل ل じしˍ,)ノ`
|
||||||
|
}</pre>
|
||||||
|
<p><Image src={gato} class="rounded max-w-60" /></p>
|
||||||
|
<p>el gato 🤯</p>
|
||||||
</main>
|
</main>
|
||||||
<footer class="my-3 text-sm">
|
|
||||||
|
<footer class="text-sm my-2">
|
||||||
{
|
{
|
||||||
Object.entries(links).map(([name, { alt, href }], i) => [
|
Object.entries(links).map(([name, { alt, href }], i) => [
|
||||||
i ? " · " : "",
|
i ? " · " : "",
|
||||||
|
|||||||
@ -5,8 +5,8 @@
|
|||||||
"paths": {
|
"paths": {
|
||||||
"@assets/*": ["src/assets/*", "public/*"],
|
"@assets/*": ["src/assets/*", "public/*"],
|
||||||
"@layouts/*": ["src/layouts/*"],
|
"@layouts/*": ["src/layouts/*"],
|
||||||
"@components": ["src/components/*"],
|
"@components/*": ["src/components/*"],
|
||||||
"@pages": ["src/pages/*"]
|
"@pages/*": ["src/pages/*"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||