From d8a20e3032a0ce97b6ddc29840e135eda9b3f43c Mon Sep 17 00:00:00 2001
From: seth
Date: Mon, 8 Apr 2024 22:58:22 -0400
Subject: refactor; use plain css
---
src/assets/gifs/index.ts | 20 ++++++------
src/components/Footer.astro | 30 ------------------
src/components/Gifs.astro | 20 ++++++++++++
src/components/Head.astro | 31 -------------------
src/components/Nav.astro | 30 ------------------
src/components/NavBar.astro | 20 ++++++++++++
src/layouts/Base.astro | 37 ++++++++++++++++++++++
src/layouts/Index.astro | 11 +++++++
src/layouts/Page.astro | 22 +++----------
src/pages/404.md | 9 ++++++
src/pages/404.mdx | 18 -----------
src/pages/index.md | 15 +++++++++
src/pages/index.mdx | 18 -----------
src/pages/lul.md | 9 ++++++
src/pages/lul.mdx | 9 ------
src/styles/main.css | 75 +++++++++++++++++++++++++++++++++++++++++++++
16 files changed, 211 insertions(+), 163 deletions(-)
delete mode 100644 src/components/Footer.astro
create mode 100644 src/components/Gifs.astro
delete mode 100644 src/components/Head.astro
delete mode 100644 src/components/Nav.astro
create mode 100644 src/components/NavBar.astro
create mode 100644 src/layouts/Base.astro
create mode 100644 src/layouts/Index.astro
create mode 100644 src/pages/404.md
delete mode 100644 src/pages/404.mdx
create mode 100644 src/pages/index.md
delete mode 100644 src/pages/index.mdx
create mode 100644 src/pages/lul.md
delete mode 100644 src/pages/lul.mdx
create mode 100644 src/styles/main.css
(limited to 'src')
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"]);
----
-
-
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";
+---
+
+
+ {
+ gifs.map(({ image, alt }) => {
+ const img =
;
+
+ if (image.src.includes("steam")) {
+ return
{img};
+ } else if (image.src.includes("poweredbynix")) {
+ return
{img};
+ } else {
+ return img;
+ }
+ })
+ }
+
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;
----
-
-
-
- {title}
-
-
-
-
-
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",
- },
-];
----
-
-
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",
+ },
+];
+---
+
+
+ {links.map(({ name, url }) =>
{name})}
+
+
+
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;
+---
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+ getchoo's website 🚀
+
+
+
+
+
+
+
+
+
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;
+---
+
+
+
+
+
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;
---
-
-
-
-
- getchoo's website 🚀
-
-
-
-
-
+
+
+
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! :(
+
+
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";
-
-
diff --git a/src/pages/index.md b/src/pages/index.md
new file mode 100644
index 0000000..1543b37
--- /dev/null
+++ b/src/pages/index.md
@@ -0,0 +1,15 @@
+---
+layout: ../layouts/Index.astro
+title: guzzle guzzle
+description: guzzle guzzle
+---
+
+
+ my mastodon account
+
+
+this is under construction. i'm experimenting with astro
+
+
+
+[hehe funny click me](/lul)
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
deleted file mode 100644
index e8aae92..0000000
--- a/src/pages/index.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: ../layouts/Page.astro
-title: guzzle guzzle
-description: guzzle guzzle
----
-
-import Picture from "astro/components/Picture.astro";
-import obras from "@assets/gifs/obras.gif";
-
-
- my mastodon account
-
-
-this is under construction. i'm experimenting with astro
-
-
-
-[hehe funny click me](/lul)
diff --git a/src/pages/lul.md b/src/pages/lul.md
new file mode 100644
index 0000000..408d50c
--- /dev/null
+++ b/src/pages/lul.md
@@ -0,0 +1,9 @@
+---
+layout: ../layouts/Page.astro
+title: fard
+description: xd
+---
+
+
diff --git a/src/pages/lul.mdx b/src/pages/lul.mdx
deleted file mode 100644
index bc142f9..0000000
--- a/src/pages/lul.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: ../layouts/Page.astro
-title: fard
-description: xd
----
-
-
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;
+ }
+}
+
--
cgit v1.2.3