seed thoughts section for micro-blogging

activatedgeek · Dec 8, 2024 · 1e9f9c1 · 1e9f9c1
1 parent be62085
commit 1e9f9c1
Show file tree

Hide file tree

Showing 10 changed files with 317 additions and 0 deletions.
diff --git a/src/components/THtml.astro b/src/components/THtml.astro
@@ -0,0 +1,136 @@
+---
+import { getEntry } from "astro:content";
+import { PiTreeBold } from "react-icons/pi";
+import { TfiThought } from "react-icons/tfi";
+import { IoSearch } from "react-icons/io5";
+
+import Goatcounter from "./Goatcounter.astro";
+
+import "@styles/main.css";
+
+const {
+  frontmatter: { title, description, area, date, updated, keywords, authors },
+} = Astro.props;
+
+const canonicalURL = new URL(Astro.url.pathname, import.meta.env.SITE);
+
+const {
+  data: { name: siteAuthorName },
+} = await getEntry("authors", "sk");
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content={Astro.generator} />
+    <link rel="icon" href="/favicon.png" />
+
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <link rel="canonical" href={canonicalURL.href} />
+    <meta name="giscus:backlink" content={canonicalURL.href} />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Assistant:[email protected]&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>{title} | {siteAuthorName}</title>
+    <meta name="description" content={description} />
+
+    <meta name="keywords" content={(keywords || []).join(",")} />
+    <meta name="publisher" content={canonicalURL.hostname} />
+
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="article" />
+    {
+      date ? (
+        <meta property="article:published_time" content={date.toISOString()} />
+      ) : null
+    }
+
+    {
+      updated ? (
+        <meta
+          property="article:modified_time"
+          content={updated.toISOString()}
+        />
+      ) : null
+    }
+
+    <Goatcounter />
+
+    <slot name="head" />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <ul>
+          <li>
+            <a title="Home" href="/">
+              <img style="width: 1.3em; height: auto;" src="/favicon.svg" />
+            </a>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <a title="Knowledge Base" href="/kb">
+              <PiTreeBold />
+              <span>Knowledge Base</span>
+            </a>
+          </li>
+          <li>
+            <a title="Thoughts" href="/thoughts">
+              <TfiThought />
+              <span>Thoughts</span>
+            </a>
+          </li>
+          <li>
+            <a title="Search" href="/search">
+              <IoSearch />
+              <span>Search</span>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <slot />
+  </body>
+</html>
+
+<style>
+  header {
+    text-align: center;
+    position: sticky;
+    top: 0;
+    > nav {
+      display: inline-flex;
+      align-items: center;
+      padding: calc(0.2 * var(--pico-spacing)) var(--pico-spacing);
+      backdrop-filter: blur(4px) saturate(50%);
+      background-color: rgba(255, 255, 255, 0.75);
+      border-radius: calc(4 * var(--pico-border-radius));
+      border: 2px solid rgba(209, 213, 219, 0.3);
+
+      > ul {
+        > li {
+          display: inline-flex;
+          align-items: center;
+          padding: 0 var(--pico-nav-element-spacing-horizontal);
+          > a {
+            display: inline-flex;
+            align-items: center;
+            padding: 0 var(--pico-nav-element-spacing-horizontal);
+
+            > span {
+              margin: 0 calc(0.2 * var(--pico-spacing));
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -35,6 +35,14 @@ const kb = defineCollection({
   }),
 });
 
+const thoughts = defineCollection({
+  type: "content",
+  schema: z.object({
+    date: z.coerce.date(),
+    authors: z.array(reference("authors")).optional().default(["sk"]),
+  }),
+});
+
 const social = defineCollection({
   type: "data",
   schema: z.object({
@@ -48,4 +56,5 @@ export const collections = {
   kb,
   overview: kb,
   social,
+  thoughts,
 };
diff --git a/src/content/thoughts/202411220003.md b/src/content/thoughts/202411220003.md
@@ -0,0 +1,5 @@
+---
+date: Nov 22 2024, 00:03 -0500
+---
+
+[Cricket](https://en.wikipedia.org/wiki/Cricket) is probably the only sport which has a formalized lunch break.
diff --git a/src/content/thoughts/202411241132.md b/src/content/thoughts/202411241132.md
@@ -0,0 +1,5 @@
+---
+date: Nov 24 2024, 11:32 -0500
+---
+
+Indian pedagogy is culturally submissive. The _Guru-Shishya_ dynamic has such a strong grip on headspace. In the West, I've always sensed that students operate with a far more sense of agency whereas I have operated with a sense of submissive confidence.
diff --git a/src/content/thoughts/202411241143.md b/src/content/thoughts/202411241143.md
@@ -0,0 +1,7 @@
+---
+date: Nov 24 2024, 11:43 -0500
+---
+
+What is the phenomenon of people wanting something but then not showing up called?
+
+For instance, movie studios after all the cry of dying theaters just eventually end up releasing movies on streaming platforms instead. We are stuck in a vicious cycle - studios don't release in theaters because people don't go; people don't go to theaters because studios release on streaming.
diff --git a/src/content/thoughts/202411241331.md b/src/content/thoughts/202411241331.md
@@ -0,0 +1,9 @@
+---
+date: Nov 24 2024, 13:31 -0500
+---
+
+The boring movie disclaimer,
+
+> This is a work of fiction. Any similarity to actual persons, living or dead, or actual events, is purely coincidental.
+
+can be traced back to [Rasputin](https://slate.com/culture/2016/08/the-bizarre-true-story-behind-the-this-is-a-work-of-fiction-disclaimer.html).
diff --git a/src/content/thoughts/202411241510.md b/src/content/thoughts/202411241510.md
@@ -0,0 +1,10 @@
+---
+date: Nov 24 2024, 15:10 -0500
+---
+
+There is only one kind of mindset that moves society forward - the one of an artist.
+
+Actors, musicians, writers, and all the like, quite obviously qualify.
+But good scientists play the same way. Good businessmen have all at one point been artful.
+
+What entails this mindset is the drive to follow through on their ideas with bravado.
diff --git a/src/content/thoughts/202411241629.md b/src/content/thoughts/202411241629.md
@@ -0,0 +1,5 @@
+---
+date: Nov 24 2024, 16:29 -0500
+---
+
+Asking for advice from an artist is as good as asking a writer what dictionary they refer to.
diff --git a/src/pages/thoughts/[page].astro b/src/pages/thoughts/[page].astro
@@ -0,0 +1,128 @@
+---
+import { getCollection } from "astro:content";
+
+import THtml from "@components/THtml.astro";
+import Date from "@components/Date.astro";
+
+export async function getStaticPaths({ paginate }) {
+  const thoughts = await getCollection("thoughts");
+  return paginate(thoughts.reverse(), { pageSize: 20 });
+}
+
+export const prerender = true;
+
+const frontmatter = {
+  title: "Muddle of Thoughts",
+  description: "Random, incoherent ramblings.",
+};
+
+const {
+  page: { currentPage, data, url },
+} = Astro.props;
+---
+
+<THtml frontmatter={frontmatter}>
+  <main>
+    <section class="hero">
+      <h1 style="--pico-font-size: 2.5rem;">{frontmatter.title}</h1>
+      <p style="--pico-font-size: 1.5rem; color: var(--pico-muted-color);">
+        {frontmatter.description}
+      </p>
+    </section>
+    <section>
+      <hr />
+      {
+        data.map(async (page) => {
+          const { Content } = await page.render();
+          const {
+            data: { date },
+          } = page;
+          return (
+            <article>
+              <Content />
+              <footer>
+                <Date date={date} format="bdY" />
+                <Date date={date} format="HM" />
+              </footer>
+            </article>
+          );
+        })
+      }
+      <hr />
+    </section>
+    <nav>
+      <ul>
+        <li>
+          <a
+            href={url.prev ? url.prev : null}
+            style={url.prev ? "" : "opacity: 0; cursor: default;"}
+          >
+            {"< "}Previous
+          </a>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <span style="color: var(--pico-muted-color);">{currentPage}</span>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <a
+            href={url.next ? url.next : null}
+            style={url.next ? "" : "opacity: 0; cursor: default;"}
+          >
+            Next{" >"}
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </main>
+</THtml>
+
+<style>
+  section.hero {
+    text-align: center;
+  }
+
+  section {
+    > article {
+      box-shadow: 0 0 0.5rem var(--pico-muted-border-color);
+
+      > footer {
+        color: var(--pico-muted-color);
+        font-size: small;
+      }
+    }
+
+    > hr {
+      margin: var(--pico-spacing) 0;
+      width: 100vw;
+      position: relative;
+      left: calc(-50vw + 50%);
+    }
+  }
+
+  section:last-of-type {
+    padding: 0 var(--pico-spacing);
+  }
+
+  nav {
+    font-size: medium;
+    > ul > li {
+      padding: 0 var(--pico-spacing);
+
+      > a {
+        cursor: pointer;
+        padding: 0 var(--pico-spacing);
+      }
+
+      > button {
+        cursor: default;
+        font-size: medium;
+        background-color: white;
+        color: var(--pico-primary);
+      }
+    }
+  }
+</style>
diff --git a/src/pages/thoughts/index.astro b/src/pages/thoughts/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.redirect("/thoughts/1", 307);
+---