site-update

WillPower3309 · Jun 5, 2024 · 0031855 · 0031855
1 parent 7017770
commit 0031855
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 38 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -3,25 +3,19 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --foreground-rgb: 68, 68, 68;
+  --background-rgb: 255, 255, 255;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --foreground-rgb: 187, 187, 187;
+    --background-rgb: 0, 0, 0;
   }
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: rgb(var(--background-rgb));
 }
+
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -14,12 +14,13 @@ export const metadata: Metadata = {
 export default function RootLayout({children}: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className="flex flex-row">
+      <body className="flex flex-row h-screen bg-gray-900">
         <Navbar/>
-        <main className="flex-grow">
+        <main className="flex-grow bg-white m-2 rounded-3xl">
           {children}
         </main>
       </body>
     </html>
   )
 }
+
diff --git a/app/navbar.tsx b/app/navbar.tsx
@@ -5,8 +5,8 @@ import { allPosts, Post } from 'contentlayer/generated'
 function PostCard(post: Post) {
   return (
     <div className="mb-8">
-      <h3 className="mb-1 text-l">
-        <Link href={post.url} className="text-blue-700 hover:text-blue-800 dark:text-blue-400">
+      <h3 className="mb-1 text-l text-white">
+        <Link href={post.url} className="">
           {post.title}
         </Link>
       </h3>
@@ -18,9 +18,12 @@ export default function Navbar() {
   const posts = allPosts.sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)))
 
   return (
-    <div className="p-4 bg-white bg-opacity-10">
-      <h1 className="mb-8 text-center text-xl font-black">Will McKinnon's Blog</h1>
-      <h2 className="mb-8 text-l font-black">Posts</h2>
+    <div className="p-4">
+      <Link href="/" className="flex text-center text-2xl text-white m-2">
+        <h1>Will</h1><h1 className="font-black">McKinnon</h1>
+      </Link>
+      <hr className="h-1 bg-gray-700 border-0 rounded md:my-4" />
+      <h2 className="mt-16 mb-8 text-l font-black text-gray-400">POSTS</h2>
       {posts.map((post, idx) => (
         <PostCard key={idx} {...post} />
       ))}

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
@@ -11,15 +11,18 @@ export const generateMetadata = ({ params }: { params: { slug: string } }) => {
 
 const PostLayout = ({ params }: { params: { slug: string } }) => {
   const post = allPosts.find((post) => post._raw.flattenedPath === params.slug)
-  if (!post) throw new Error(`Post not found for slug: ${params.slug}`)
+  if (!post) {
+    // TODO: 404 page
+    throw new Error(`Post not found for slug: ${params.slug}`)
+  }
 
   return (
-    <article className="mx-auto max-w-xl py-8">
+    <article className="w-fit p-8">
       <div className="mb-8 text-center">
+        <h1 className="text-3xl font-bold">{post.title}</h1>
         <time dateTime={post.date} className="mb-1 text-xs text-gray-600">
           {format(parseISO(post.date), 'LLLL d, yyyy')}
         </time>
-        <h1 className="text-3xl font-bold">{post.title}</h1>
       </div>
       <div className="[&>*]:mb-3 [&>*:last-child]:mb-0" dangerouslySetInnerHTML={{ __html: post.body.html }} />
     </article>

diff --git a/contentlayer.config.js b/contentlayer.config.js
@@ -13,3 +13,4 @@ export const Post = defineDocumentType(() => ({
 }))
 
 export default makeSource({ contentDirPath: 'posts', documentTypes: [Post] })
+
diff --git a/posts/nixos-anywhere.md b/posts/nixos-anywhere.md
@@ -0,0 +1,23 @@
+---
+title: Easily Install NixOS with nixos-anywhere
+date: 2024-06-24
+---
+
+If you enjoy NixOS as much as I do, you're probably starting to amass quite a large and complex config. Perhaps you have started to use secret management tools like [agenix](https://github.com/ryantm/agenix) or [sops-nix](https://github.com/Mic92/sops-nix), and maybe you even have your [root directory living in a tmpfs](https://grahamc.com/blog/erase-your-darlings/).
+
+If you fall under this category, you've surely came to a realisation: *adding a new machine to your config is a pain in the ass*.
+
+Fortunately for you, I've been there - and boy, do I have a great solution. Want to install your complex config, or onboard a new host, in as little as two steps, all remotely (or as remotely as you can get)? Read on.
+
+## Setup
+
+The nixos installation media is awesome! It provides a simple nixos instance from which you can install the operating system, but what if I told you it could be better? We can make our own version of the nixos-installation image, which includes the public keys of the machines in our config - allowing you to boot up the installation media, and then `ssh` into the host and perform the rest of the installation remotely.
+
+The config for the image is a simple 5 lines:
+```nix
+{
+  system.activatable = false;
+  networking.hostName = "nixos-install";
+  users.users.root.openssh.authorizedKeys.keys = [ <PUBLIC KEYS OF THE REMOTE HOST GO HERE> ];
+}
+```
diff --git a/posts/test.md b/posts/test.md
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -5,14 +5,9 @@ const config: Config = {
     './app/**/*.tsx',
   ],
   theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-    },
+    extend: {},
   },
   plugins: [],
 }
 export default config
+