Merge pull request #1 from rix1/maintenance/lume-tailwind-refresh

maintenance/lume tailwind refresh

Author: rix1

README.md

@@ -1,10 +1,14 @@
 # rix1.dev · my personal website
 
-Welcome to the source repository of my personal website, [rix1.dev](https://rix1.dev)! I'm a product developer and engineering manager based in Oslo, Norway. My website showcases previous and ongoing projects as well as my professional journey.
+Welcome to the source repository of my personal website,
+[rix1.dev](https://rix1.dev)! I'm a product developer and engineering manager
+based in Oslo, Norway. My website showcases previous and ongoing projects as
+well as my professional journey.
 
 ## About the Site
 
-Built with Lume — a static site generator for Deno, the site reflects my interest in products, technology, and design.
+Built with Lume — a static site generator for Deno, the site reflects my
+interest in products, technology, and design.
 
 ### Features
 
@@ -17,15 +21,17 @@ Built with Lume — a static site generator for Deno, the site reflects my inter
 
 - [Lume](https://lume.land) - A static site generator built with Deno.
 - [Deno](https://deno.land) - A secure runtime for JavaScript and TypeScript.
-- [Deno Deploy](https://deno.com/deploy) - A hassle-free platform for serverless JavaScript applications
+- [Deno Deploy](https://deno.com/deploy) - A hassle-free platform for serverless
+  JavaScript applications
 
 ## Local Development
 
 To get a local copy up and running, follow these simple steps.
 
 ### Prerequisites
 
-Ensure you have [Deno](https://deno.land/#installation) installed on your machine. To install Deno, run:
+Ensure you have [Deno](https://deno.land/#installation) installed on your
+machine. To install Deno, run:
 
 ```bash
 curl -fsSL https://deno.land/install.sh | sh
@@ -43,11 +49,41 @@ curl -fsSL https://deno.land/install.sh | sh
    deno task dev
    ```
 
-The site should now be running on `http://localhost:3000`. Open your browser to this address to view the site.
+The site should now be running on `http://localhost:3000`. Open your browser to
+this address to view the site.
+
+## Writing Posts
+
+Posts live in `posts/*.md`. To publish a new one, add a Markdown file with this
+front matter:
+
+```yaml
+---
+title: My post title
+description: A short summary used for the overview, RSS, and social previews.
+date: 2026-05-18
+topic: Build
+---
+```
+
+The shared defaults in `posts/_data.yml` add the post layout, author data, and
+the `post` tag automatically. For interactive posts, prefer a small browser
+script or web component in `assets/` and opt into it from the post:
+
+```yaml
+scripts:
+  - /assets/my-post-widget.js
+```
+
+Drafts live in `drafts/*.md` with `draft: true`. Lume renders drafts while
+serving locally, but `deno task build` ignores the whole `drafts/` folder so
+they do not deploy.
 
 ## Contributing
 
-I would be surprised if anyone would like to contribute to this site, but if you find any typos feel or want to change my opinion about something, feel free to open a PR:
+I would be surprised if anyone would like to contribute to this site, but if you
+find any typos feel or want to change my opinion about something, feel free to
+open a PR:
 
 1. Fork the Project
 2. Create your Feature Branch (`git checkout -b fix/your-opinion`)
@@ -62,5 +98,6 @@ Distributed under the MIT License. See `LICENSE` for more information.
 ## Contact
 
 - @rix1 - [Twitter](https://twitter.com/rix1)
-- Project Link: [https://github.com/rix1/rix1.dev](https://github.com/rix1/rix1.dev)
+- Project Link:
+  [https://github.com/rix1/rix1.dev](https://github.com/rix1/rix1.dev)
 - Website: [rix1.dev](https://rix1.dev)

_components/MetaTags.tsx

@@ -2,41 +2,14 @@ const MetaTags = () => {
   return (
     <>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-      <meta
-        property="og:title"
-        content="rix1.dev: Product developer from Norway 🇳🇴"
-      />
-      <meta
-        property="og:description"
-        content="Dev, design, product and hooman. Currently having fun chasing the sun together with @OtovoSolar"
-      />
       <meta property="og:image:height" content="600" />
       <meta property="og:image:width" content="1200" />
       <meta
         property="og:image:alt"
         content="On the internet, I'm usually referred to as @rix1. I'm a product developer at Otovo, living in Oslo, Norway."
       />
-      <meta
-        property="og:image"
-        content="https://s3.eu-north-1.amazonaws.com/rix1.dev/social-image.png"
-      />
-      <meta
-        name="twitter:title"
-        content="rix1.dev: Product developer from Norway"
-      />
-      <meta
-        name="twitter:description"
-        content="Dev, design, product and hooman. Currently having fun chasing the sun together with @OtovoSolar"
-      />
-      <meta
-        name="twitter:image:src"
-        content="https://s3.eu-north-1.amazonaws.com/rix1.dev/social-image.png"
-      />
-
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:site" content="@rix1" />
       <link rel="stylesheet" href="/globals.css" />
+      <script type="module" src="/assets/command-palette.js"></script>
     </>
   );
 };

_components/ShareIcons.tsx

@@ -1,7 +1,24 @@
-const ShareIcons = ({ withBlob = false }) => {
+type ShareIconsProps = {
+  withBlob?: boolean;
+  showDivider?: boolean;
+  class?: string;
+};
+
+const ShareIcons = ({
+  withBlob = false,
+  showDivider = true,
+  class: className = "",
+}: ShareIconsProps) => {
+  const rootClass =
+    showDivider || withBlob
+      ? "mb-[1.2em] relative flex flex-col"
+      : "relative flex flex-col";
+
   return (
-    <div class="mb-[1.2em] relative flex flex-col">
-      <hr class="w-1/2 mx-auto mt-0 mb-7 not-prose border-primary/10" />
+    <div class={[rootClass, className].join(" ")}>
+      {showDivider && (
+        <hr class="w-1/2 mx-auto mt-0 mb-7 not-prose border-primary/10" />
+      )}
       <div
         className="mx-auto inline-flex items-center share-icons"
         style={{
@@ -28,6 +45,26 @@ const ShareIcons = ({ withBlob = false }) => {
           </svg>
           <small>Twitter</small>
         </a>
+        <a
+          href="https://bsky.app/profile/rix1.bsky.social"
+          target="_blank"
+          class="p-3 flex flex-col items-center"
+          rel="noreferrer"
+        >
+          <svg
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+            shape-rendering="geometricPrecision"
+            viewBox="0 0 24 24"
+            height="32"
+            width="32"
+            stroke="#000"
+          >
+            <path d="M12 11.5c-1.6-3.3-4.4-6-6.8-6-1.6 0-2.2 1.1-2.2 2.5 0 2.5 2.9 5.1 6 6.4-2.9.3-5.2 1.7-5.2 3.7 0 1.2 1 2.2 2.5 2.2 2.1 0 4.4-2.1 5.7-4.8 1.3 2.7 3.6 4.8 5.7 4.8 1.5 0 2.5-1 2.5-2.2 0-2-2.3-3.4-5.2-3.7 3.1-1.3 6-3.9 6-6.4 0-1.4-.6-2.5-2.2-2.5-2.4 0-5.2 2.7-6.8 6Z"></path>
+          </svg>
+          <small>Bluesky</small>
+        </a>
         <a
           href="https://github.com/rix1"
           target="_blank"

_components/SiteFooter.tsx

@@ -0,0 +1,15 @@
+export default ({ comp }: Lume.Data) => {
+  return (
+    <footer class="not-prose mx-auto mt-20 max-w-5xl px-4 pb-12 pt-8 sm:px-6 lg:px-8">
+      <div class="border-t border-primary/10 pt-8">
+        <div class="flex items-start gap-4">
+          <p class="m-0 max-w-2xl text-sm leading-6 text-gray-600">
+            This is Rix1's personal site for notes on products, technology,
+            design, building things, and life.
+          </p>
+          <comp.ShareIcons showDivider={false} class="w-full self-center" />
+        </div>
+      </div>
+    </footer>
+  );
+};

_components/SiteNav.tsx

@@ -0,0 +1,30 @@
+type Props = {
+  backHref?: string;
+  backLabel?: string;
+};
+
+const SiteNav = ({ backHref = "/", backLabel = "Back home" }: Props) => {
+  return (
+    <nav class="not-prose mb-12 flex items-center justify-between gap-4">
+      <a href="/" class="clear group inline-flex items-center gap-3">
+        <span class="mini-avatar" aria-hidden="true"></span>
+        <span>
+          <span class="block bricolage-grotesque-heavy text-lg leading-none text-gray-950 group-hover:text-primary">
+            rix1
+          </span>
+          <span class="block text-xs font-semibold text-gray-500">
+            Product, code, notes
+          </span>
+        </span>
+      </a>
+      <a
+        href={backHref}
+        class="clear rounded-full border border-primary/10 bg-white/70 px-3 py-1.5 text-sm font-semibold text-primary shadow-sm hover:bg-white"
+      >
+        {backLabel}
+      </a>
+    </nav>
+  );
+};
+
+export default SiteNav;

_config.ts

@@ -5,11 +5,22 @@ import favicon from "lume/plugins/favicon.ts";
 import feed from "lume/plugins/feed.ts";
 import reading_info from "lume/plugins/reading_info.ts";
 import sitemap from "lume/plugins/sitemap.ts";
+import pagefind from "lume/plugins/pagefind.ts";
 import tailwindcss from "lume/plugins/tailwindcss.ts";
 import jsx from "lume/plugins/jsx.ts";
 import googleFonts from "lume/plugins/google_fonts.ts";
+import metas from "lume/plugins/metas.ts";
+import footnote from "npm:markdown-it-footnote@4.0.0";
 
-const site = lume();
+const site = lume({
+  location: new URL("https://rix1.dev"),
+});
+
+site.hooks.addMarkdownItPlugin(footnote);
+
+if (Deno.env.get("LUME_DRAFTS") !== "true") {
+  site.ignore("/drafts");
+}
 
 // Add assets
 site.add("assets");
@@ -29,8 +40,37 @@ site.use(
   }),
 );
 site.use(tailwindcss());
-site.use(feed());
+site.use(metas());
+site.use(
+  feed({
+    output: ["/posts.rss"],
+    query: "type=post",
+    sort: "date=desc",
+    info: {
+      title: "rix1.dev: Thoughts & experiments",
+      description:
+        "Notes on products, technology, design, building things, and life.",
+    },
+    items: {
+      title: "=title",
+      description: "=description",
+      published: "=date",
+      content: "=description",
+    },
+  }),
+);
 site.use(sitemap());
+site.use(
+  pagefind({
+    ui: {
+      containerId: "search",
+      showImages: false,
+      excerptLength: 18,
+      showSubResults: false,
+      resetStyles: false,
+    },
+  }),
+);
 
 // Add CSS files explicitly for processing
 site.add([".css"]);

_data/metas.yml

@@ -0,0 +1,7 @@
+site: rix1.dev
+title: "=title || rix1.dev"
+description: "=description || Dev, design, product and hooman. Currently having fun chasing the sun together with @OtovoSolar"
+image: https://s3.eu-north-1.amazonaws.com/rix1.dev/social-image.png
+lang: en
+twitter: "@rix1"
+generator: true

_includes/layouts/center-content.tsx

@@ -19,6 +19,7 @@ export default ({ comp, title, alignment, children }: Lume.Data) => {
           <comp.ShareIcons withBlob />
         </main>
 
+        <comp.SiteFooter />
         <div id="blur"></div>
       </body>
     </html>

_includes/layouts/command-palette-data.tsx

@@ -0,0 +1,52 @@
+type Project = {
+  title: string;
+  when: string;
+  description: string;
+  link: string;
+};
+
+type Post = {
+  title: string;
+  description?: string;
+  topic?: string;
+  date?: Date | string;
+  url: string;
+};
+
+const dateFormatter = new Intl.DateTimeFormat("en", {
+  month: "short",
+  day: "2-digit",
+  year: "numeric",
+});
+
+function stripMarkdownLinks(value: string) {
+  return value.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
+}
+
+function formatDate(date: Date | string | undefined) {
+  return date ? dateFormatter.format(new Date(date)) : undefined;
+}
+
+export default ({ search, index }: Lume.Data) => {
+  const posts = (search.pages("type=post", "date=desc") as Post[]).map((
+    post,
+  ) => ({
+    category: "Posts",
+    title: post.title,
+    description: post.description,
+    url: post.url,
+    meta: [post.topic, formatDate(post.date)].filter(Boolean).join(" · "),
+  }));
+
+  const projects = [...(index.repos as Project[])].sort((a, b) =>
+    Number(b.when) - Number(a.when)
+  ).map((project) => ({
+    category: "Projects",
+    title: project.title,
+    description: stripMarkdownLinks(project.description),
+    url: project.link,
+    meta: project.when,
+  }));
+
+  return JSON.stringify({ posts, projects });
+};

_includes/layouts/landing.tsx

@@ -84,6 +84,7 @@ export default ({ comp, title, heading, children, index }: Lume.Data) => {
             ))}
           </div>
         </section>
+        <comp.SiteFooter />
         <div id="blur"></div>
       </body>
     </html>