summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorseth <[email protected]>2024-04-08 22:58:22 -0400
committerseth <[email protected]>2024-04-08 22:58:22 -0400
commitd8a20e3032a0ce97b6ddc29840e135eda9b3f43c (patch)
tree40a4059020ff4c9d500d4022f5b84e7bf2c46fd4 /src
parent33a4eb02a8307be1bcfaaabbe3adaf25d0088d3b (diff)
refactor; use plain css
Diffstat (limited to 'src')
-rw-r--r--src/assets/gifs/index.ts20
-rw-r--r--src/components/Footer.astro30
-rw-r--r--src/components/Gifs.astro20
-rw-r--r--src/components/Head.astro31
-rw-r--r--src/components/Nav.astro30
-rw-r--r--src/components/NavBar.astro20
-rw-r--r--src/layouts/Base.astro37
-rw-r--r--src/layouts/Index.astro11
-rw-r--r--src/layouts/Page.astro22
-rw-r--r--src/pages/404.md9
-rw-r--r--src/pages/404.mdx18
-rw-r--r--src/pages/index.md (renamed from src/pages/index.mdx)7
-rw-r--r--src/pages/lul.md (renamed from src/pages/lul.mdx)2
-rw-r--r--src/styles/main.css75
14 files changed, 190 insertions, 142 deletions
diff --git a/src/assets/gifs/index.ts b/src/assets/gifs/index.ts
index 970985f..58fa23d 100644
--- a/src/assets/gifs/index.ts
+++ b/src/assets/gifs/index.ts
@@ -8,19 +8,19 @@ import steam from "./steam.gif";
import weezer from "./weezer.gif";
interface Gif {
- gif: ImageMetadata;
- alt: string;
+ image: ImageMetadata;
+ alt: string;
}
const gifs: Gif[] = [
- { gif: acab, alt: "ACAB!" },
- { gif: arnold, alt: "Hey Arnold!" },
- { gif: capitalism, alt: "Let's crush capitalism!" },
- { gif: legalize, alt: "Legalize marijuana now!" },
- { gif: poweredByNix, alt: "Powered by NixOS" },
- { gif: pride, alt: "LGBTQ Pride now!" },
- { gif: steam, alt: "Play on Steam!" },
- { gif: weezer, alt: "Weezer fan" },
+ { image: acab, alt: "ACAB!" },
+ { image: arnold, alt: "Hey Arnold!" },
+ { image: capitalism, alt: "Let's crush capitalism!" },
+ { image: legalize, alt: "Legalize marijuana now!" },
+ { image: poweredByNix, alt: "Powered by NixOS" },
+ { image: pride, alt: "LGBTQ Pride now!" },
+ { image: steam, alt: "Play on Steam!" },
+ { image: weezer, alt: "Weezer fan" }
];
export default gifs;
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
deleted file mode 100644
index 7897b8d..0000000
--- a/src/components/Footer.astro
+++ /dev/null
@@ -1,30 +0,0 @@
----
-import { execa } from "execa";
-import Picture from "astro/components/Picture.astro";
-import gifs from "@assets/gifs";
-
-const { stdout: gitCommit } = await execa("git", ["rev-parse", "HEAD"]);
----
-
-<footer class="text-xs text-subtext1 my-10 text-right space-y-2">
- <div class="hidden md:flex flex-wrap justify-around">
- {
- gifs.map(({ gif, alt }) => {
- const img = <Picture src={gif} alt={alt} formats={["gif"]} />;
-
- if (gif.src.includes("steam")) {
- return <a href="https://dnsense.pub/">{img}</a>;
- } else if (gif.src.includes("poweredbynix")) {
- return <a href="https://github.com/sakecode">{img}</a>;
- } else {
- return img;
- }
- })
- }
- </div>
- <p>
- Served from commit {gitCommit.substring(0, 8)} (<a
- href="https://github.com/getchoo/website">source</a
- >)
- </p>
-</footer>
diff --git a/src/components/Gifs.astro b/src/components/Gifs.astro
new file mode 100644
index 0000000..b82230e
--- /dev/null
+++ b/src/components/Gifs.astro
@@ -0,0 +1,20 @@
+---
+import Picture from "astro/components/Picture.astro";
+import gifs from "@assets/gifs";
+---
+
+<div id="gifs">
+ {
+ gifs.map(({ image, alt }) => {
+ const img = <Picture src={image} alt={alt} formats={["gif"]} />;
+
+ if (image.src.includes("steam")) {
+ return <a href="https://dnsense.pub/">{img}</a>;
+ } else if (image.src.includes("poweredbynix")) {
+ return <a href="https://github.com/sakecode">{img}</a>;
+ } else {
+ return img;
+ }
+ })
+ }
+</div>
diff --git a/src/components/Head.astro b/src/components/Head.astro
deleted file mode 100644
index f05e862..0000000
--- a/src/components/Head.astro
+++ /dev/null
@@ -1,31 +0,0 @@
----
-import "@fontsource-variable/noto-sans";
-import "@fontsource/noto-sans-mono";
-const { title, description } = Astro.props;
----
-
-<head>
- <meta charset="UTF-8" />
- <title>{title}</title>
- <meta name="viewport" content="width=device-width,initial-scale=1" />
- <meta name="description" content={description} />
- <link rel="sitemap" href="/sitemap-index.xm" />
-</head>
-<style is:global>
- a {
- text-decoration: underline;
- @apply text-blue;
- }
-
- h1 {
- @apply text-3xl md:text-4xl;
- }
-
- h2 {
- @apply text-2xl md:text-3xl;
- }
-
- h3 {
- @apply text-xl md:text-2xl;
- }
-</style>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
deleted file mode 100644
index f427548..0000000
--- a/src/components/Nav.astro
+++ /dev/null
@@ -1,30 +0,0 @@
----
-import config from "@root/astro.config.ts";
-
-interface NavLink {
- name: string;
- url: string;
-}
-
-const minifluxUrl = process.env.MINIFLUX_URL || `https://miniflux.${Astro.url.hostname || config.site}`;
-
-const links: NavLink[] = [
- { name: "home", url: "/" },
- {
- name: "miniflux",
- url: minifluxUrl,
- },
- {
- name: "github",
- url: "https://github.com/getchoo",
- },
-];
----
-
-<nav class="space-y-5 text-xl my-5">
- <p class="space-x-2">
- {links.map(({ name, url }) => <a href={url}>{name}</a>)}
- </p>
-
- <hr />
-</nav>
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
new file mode 100644
index 0000000..b7c0216
--- /dev/null
+++ b/src/components/NavBar.astro
@@ -0,0 +1,20 @@
+---
+interface NavLink {
+ name: string;
+ url: string;
+}
+
+const links: NavLink[] = [
+ { name: "home", url: "/" },
+ {
+ name: "github",
+ url: "https://github.com/getchoo",
+ },
+];
+---
+
+<div id="nav_links">
+ {links.map(({ name, url }) => <a href={url}>{name}</a>)}
+</div>
+
+<hr />
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
new file mode 100644
index 0000000..6ec66c5
--- /dev/null
+++ b/src/layouts/Base.astro
@@ -0,0 +1,37 @@
+---
+import "@fontsource-variable/noto-sans";
+import "@fontsource/noto-sans-mono";
+
+import NavBar from "@components/NavBar.astro";
+import "@styles/main.css";
+
+const { title, description } = Astro.props.frontmatter || Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <title>{title}</title>
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="description" content={description} />
+ <link rel="sitemap" href="/sitemap-index.xml" />
+ </head>
+
+ <body>
+ <h1><b>getchoo's website 🚀</b></h1>
+ <slot name="nav">
+ <nav>
+ <slot name="extra_nav" />
+ <NavBar />
+ </nav>
+ </slot>
+ <slot />
+ <slot name="footer">
+ <footer>
+ <slot name="extra_footer" />
+ <a href="https://github.com/getchoo/website">source code</a>
+ </footer>
+ </slot>
+ </body>
+</html>
diff --git a/src/layouts/Index.astro b/src/layouts/Index.astro
new file mode 100644
index 0000000..b8e1945
--- /dev/null
+++ b/src/layouts/Index.astro
@@ -0,0 +1,11 @@
+---
+import Base from "@layouts/Base.astro";
+import Gifs from "@components/Gifs.astro";
+
+const { title, description } = Astro.props.frontmatter;
+---
+
+<Base title={title} description={description}>
+ <slot />
+ <Gifs slot="extra_footer" />
+</Base>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index d8e216b..72512e2 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -1,20 +1,8 @@
---
-import Footer from "@components/Footer.astro";
-import Head from "@components/Head.astro";
-import Nav from "@components/Nav.astro";
-
-const { frontmatter } = Astro.props;
+import Base from "@layouts/Base.astro";
+const { title, description } = Astro.props.frontmatter || Astro.props;
---
-<!doctype html>
-<html lang="en">
- <Head title={frontmatter.title} description={frontmatter.description} />
- <body
- class="bg-base text-text p-5 lg:p-0 text-md md:text-lg antialiased max-w-screen-md mx-auto my-10"
- >
- <h1><b>getchoo's website 🚀</b></h1>
- <Nav />
- <slot />
- <Footer />
- </body>
-</html>
+<Base title={title} description={description}>
+ <slot />
+</Base>
diff --git a/src/pages/404.md b/src/pages/404.md
new file mode 100644
index 0000000..2b214f9
--- /dev/null
+++ b/src/pages/404.md
@@ -0,0 +1,9 @@
+---
+layout: ../layouts/Page.astro
+title: 404
+description: Page not found!
+---
+
+# 404! :(
+
+![Can i get you some tapwater?](../assets/imgs/tapwater.png)
diff --git a/src/pages/404.mdx b/src/pages/404.mdx
deleted file mode 100644
index 4cf7cf6..0000000
--- a/src/pages/404.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: ../layouts/Page.astro
-title: 404
-description: Page not found!
----
-
-import Picture from "astro/components/Picture.astro";
-import tapwater from "@assets/imgs/tapwater.png";
-
-<div class="space-y-5">
- # 404! :(
- <Picture
- src={tapwater}
- formats={["avif", "webp"]}
- alt="Can i get you some tapwater?"
- class="p-5"
- />
-</div>
diff --git a/src/pages/index.mdx b/src/pages/index.md
index e8aae92..1543b37 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.md
@@ -1,18 +1,15 @@
---
-layout: ../layouts/Page.astro
+layout: ../layouts/Index.astro
title: guzzle guzzle
description: guzzle guzzle
---
-import Picture from "astro/components/Picture.astro";
-import obras from "@assets/gifs/obras.gif";
-
<a hidden rel="me" href="https://wetdry.world/@getchoo">
my mastodon account
</a>
this is under construction. i'm experimenting with astro
-<Picture src={obras} alt="Under construction" formats={["gif"]} class="m-10" />
+![Under construction](../assets/gifs/obras.gif)
[hehe funny click me](/lul)
diff --git a/src/pages/lul.mdx b/src/pages/lul.md
index bc142f9..408d50c 100644
--- a/src/pages/lul.mdx
+++ b/src/pages/lul.md
@@ -4,6 +4,6 @@ title: fard
description: xd
---
-<video width="1280" height="720" controls autoplay muted>
+<video controls autoplay muted>
<source src="/files/rickroll.mp4" type="video/mp4" />
</video>
diff --git a/src/styles/main.css b/src/styles/main.css
new file mode 100644
index 0000000..974dd5c
--- /dev/null
+++ b/src/styles/main.css
@@ -0,0 +1,75 @@
+:root {
+ --background-color: #1e1e2e;
+ --primary-font: "Noto Sans";
+ --regular-text: #cdd6f4;
+ --blue-text: #89b4fa;
+ --subtext: #bac2de;
+ --medium-screen: 768px;
+}
+
+body {
+ background-color: var(--background-color);
+ font-family: var(--primary-font), system-ui;
+;
+ line-height: 1.5rem;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+ max-width: var(--medium-screen);
+ padding: 0.75rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+b,
+p {
+ color: var(--regular-text);
+}
+
+a {
+ text-decoration: underline;
+ color: var(--blue-text);
+}
+
+video {
+ width: 100%;
+ height: auto;
+ max-width: var(--medium-screen);
+}
+
+footer {
+ color: var(--subtext);
+ font-size: 0.75rem;
+
+ text-align: right;
+}
+
+#nav_links {
+ display: flex;
+ gap: 0.25rem;
+}
+
+#gifs {
+ display: none;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ justify-content: space-evenly;
+}
+
+.blogpost {
+ font-size: 0.85rem;
+}
+
+@media screen and (min-width: 768px) {
+ #gifs {
+ display: flex;
+ }
+}
+
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 15:39:21 +0000