|
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 icon from "@assets/icon.png";
|
||||
import favicon16x16 from "@assets/favicon-16x16.png";
|
||||
import favicon32x32 from "@assets/favicon-32x32.png";
|
||||
|
||||
type Props = {
|
||||
title?: string;
|
||||
@ -17,20 +15,29 @@ const { title, class: className } = Astro.props;
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href={favicon16x16.src} />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href={favicon32x32.src} />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href={icon.src} />
|
||||
<title>{title ?? "lua.re"}</title>
|
||||
|
||||
<link
|
||||
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
|
||||
is:inline
|
||||
defer
|
||||
data-domain="lua.re"
|
||||
src="https://track.lua.re/js/script.js"></script>
|
||||
|
||||
<title>{title ?? "lua.re"}</title>
|
||||
</head>
|
||||
<body class={className}>
|
||||
<body class:list={["max-w-screen-sm mx-auto p-4 flex flex-col", className]}>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
---
|
||||
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 = {
|
||||
git: { alt: "Git", href: "https://git.lua.re/" },
|
||||
@ -9,15 +12,29 @@ const links = {
|
||||
};
|
||||
---
|
||||
|
||||
<Layout class="max-w-screen-sm mx-auto p-8">
|
||||
<main class="px-4 py-3 bg-white rounded shadow-xs leading-tight">
|
||||
<Layout class="max-h-screen">
|
||||
<main
|
||||
class="px-5 py-3 space-y-2 bg-white rounded-lg shadow-xs leading-tight min-h-0 overflow-scroll"
|
||||
>
|
||||
<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>
|
||||
<footer class="my-3 text-sm">
|
||||
|
||||
<footer class="text-sm my-2">
|
||||
{
|
||||
Object.entries(links).map(([name, { alt, href }], i) => [
|
||||
i ? " · " : "",
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
"paths": {
|
||||
"@assets/*": ["src/assets/*", "public/*"],
|
||||
"@layouts/*": ["src/layouts/*"],
|
||||
"@components": ["src/components/*"],
|
||||
"@pages": ["src/pages/*"]
|
||||
"@components/*": ["src/components/*"],
|
||||
"@pages/*": ["src/pages/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||