Header: add unix

src/components/Header.astro

@@ -27,6 +27,7 @@ import { SITE_TITLE } from '../consts';
         </a>
             <HeaderLink href="/">Home</HeaderLink>
             <HeaderLink href="/blog">Blog</HeaderLink>
+            <HeaderLink href="/unix">Unix</HeaderLink>
             <HeaderLink href="/about">About</HeaderLink>
         </div>
         <div class="fun-quote" style="margin: 0">

src/content/config.ts

@@ -13,4 +13,16 @@ const blog = defineCollection({
 	}),
 });
 
-export const collections = { blog };
+const unix = defineCollection({
+	type: 'content',
+	// Type-check frontmatter using a schema
+	schema: z.object({
+		title: z.string(),
+		description: z.string(),
+		// Transform string to Date object
+		updateDate: z.coerce.date(),
+		heroImage: z.string().optional(),
+	}),
+});
+
+export const collections = { blog, unix };

src/content/unix/email-with-curl.md

@@ -0,0 +1,116 @@
+---
+title: 'Send emails using Curl'
+description: 'Examples on how to automate emails with Curl'
+updateDate: 'Jul 08 2022'
+heroImage: '/curl-logo.webp'
+---
+
+# Emailing with Curl
+
+`curl` is an amazing networking tool. It can even automate sending emails!
+
+## Email just a file
+
+For most basic emails, we can stuff the headers into the email content file
+itself. Here's a basic example:
+
+```bash
+# This line writes the content to a file called email.txt.
+# Usually you should use a text editor to write to a file yourself.
+cat <<EMAIL > email.txt
+From: Emiliko Mirror <emiliko@cs.ox.ac.uk>
+To: Emiliko Mirror <emiliko@gmail.com>
+Subject: Sleep triggered on $(hostname)
+Date: $(date)
+
+Dear me,
+
+The system went to sleep! I thought I should notify my gmail account when it
+happened.
+
+cheers,
+Emiliko
+EMAIL
+
+# Sends the file called `email.txt` as an email, not an email attachment.
+# Note that you need to replace <my-password-here> with your gmail password.
+curl --silent --ssl-reqd \
+  --url 'smtps://smtp.gmail.com:465' \
+  --user 'emiliko@cs.ox.ac.uk:<my-password-here>' \
+  --mail-from 'emiliko@cs.ox.ac.uk' \
+  --mail-rcpt 'emiliko@gmail.com' \
+  --upload-file email.txt
+```
+
+The `From:` - `Date:` headers at the top are very important. Gmail seems to
+insert them automatically if they're missing, though other mail providers might
+not, so make sure to leave them in.
+
+If you use 2fa, you won't be able to use your account password to authenticate.
+Instead, you'll need to [obtain an app
+password](https://support.google.com/accounts/answer/185833?hl=en) for your
+account.
+
+## Email with attachments
+
+We can also `CC`, `BCC` and attach files with our curl emails.
+
+Attachments need a MIME type for the file, which is easiest obtained with the
+`file` command. In this example, we also remove the headers from the email file,
+opting to use the more explicit `-H` curl option.
+
+```bash
+# Setup variables for attachment file. Not necessary but much cleaner
+declare -r attach_file=mirrors_house.png
+declare -r mime_type="$(file --mime-type "$attach_file" | sed 's/.*: //')"
+
+# Fill a file called `email.txt` with the email content
+cat <<EMAIL > email.txt
+Dear classmates,
+
+I just bought a new house! Check out the picture I attached below
+
+OMGOMGOMG, I'm so excited!
+
+cheers,
+Kate Mirror
+EMAIL
+
+# Sends email.txt as the email content and attaches mirrors_house.png
+curl --silent --ssl-reqd \
+  --url 'smtps://smtp.fastmail.com:465' \
+  --user 'kate%40mirror.house:<my-password>' \
+  --mail-from "kate@mirror.house" \
+  --mail-rcpt 'emiliko@cs.ox.ac.uk' \
+  --mail-rcpt 'lou@lou.me' \
+  --mail-rcpt 'louis@louis.me' \
+  -F '=(;type=multipart/mixed' \
+  -F "=$(cat email.txt);type=text/plain" \
+  -F "file=@${attach_file};filename=home.png;type=${mime_type};encoder=base64" \
+  -F '=)' \
+  -H "From: Kate Mirror <kate@mirror.house>" \
+  -H "Subject: Check out my new place!" \
+  -H "To: Emiliko Mirror <emiliko@cs.ox.ac.uk>" \
+  -H "CC: Lou Mirror <lou@lou.me>" \
+  -H "Date: $(date)"
+```
+
+Notice that for `BCC` the user isn't mentioned in `-H` at all, though you'll
+still need a `--mail-rcpt` line for them.
+
+Oddly, some mail servers seem sensitive to the filename field. My university
+server would consistently bounce emails when I tried to have a filename field.
+Consider removing it to use the file's actual name. In the example above, we'd
+use `mirrors_house.png` instead of `home.png`.
+
+### Further reading
+
+ - [A basic official guide](https://everything.curl.dev/usingcurl/smtp)
+ - [Sending a simple email with
+   curl](https://stackoverflow.com/questions/14722556/using-curl-to-send-email)
+ - [An example on using the -F option with
+   curl](https://blog.ambor.com/2021/08/using-curl-to-send-e-mail-with.html)
+ - [Backup of the above on
+   github](https://github.com/ambanmba/send-ses/blob/main/send-ses.sh)
+ - [A hint at using the filename field in
+   forums](https://stackoverflow.com/questions/15127732/change-name-of-upload-file-in-curl)

src/content/unix/ssh.md

@@ -1,8 +1,7 @@
 ---
 title: 'SSH Quick Start Guide'
 description: 'The fastest way to get all the SSH essentials out of the way'
-pubDate: 'December 26 2023'
-heroImage: '/blog-placeholder-3.jpg'
+updateDate: 'December 26 2023'
 ---
 
 # SSH

src/layouts/UnixPost.astro

@@ -0,0 +1,245 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import BaseHead from '../components/BaseHead.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import FormattedDate from '../components/FormattedDate.astro';
+import { Code } from 'astro:components';
+
+type Props = CollectionEntry<'unix'>['data'];
+
+const { title, description, updateDate, updatedDate, heroImage } = Astro.props;
+---
+
+<html lang="en">
+    <head>
+        <BaseHead title={title} description={description} />
+        <style is:inline>
+            /**** Outer body (not part of the markdown) ****/
+            main {
+                max-width: 900px;
+                margin: auto;
+            }
+            div.markdown-title {
+                text-align: center;
+                margin-bottom: 20px;
+            }
+            h1.markdown-title {
+                font-family: var(--font-title);
+                font-size: 40px;
+            }
+            .hero-image {
+                width: 100%;
+            }
+            .hero-image img {
+                display: block;
+                margin: 30px auto;
+                border-radius: 22px;
+                filter: drop-shadow(0 4px 6px #000);
+            }
+
+            /**** Headings ****/
+            .prose h1,
+            .prose h2,
+            .prose h3,
+            .prose h4,
+            .prose h5,
+            .prose h6 {
+                margin: calc(var(--font-size) / 3) 0;
+                font-family: var(--font-title);
+                text-align: left;
+                padding-left: 20px;
+                margin-left: -20px;
+            }
+            .prose h1 a,
+            .prose h2 a,
+            .prose h3 a,
+            .prose h4 a,
+            .prose h5 a,
+            .prose h6 a {
+                width: 16px;
+                height: 64px;
+                position: absolute;
+                float: left;
+                margin-top: -2px;
+                margin-left: -20px;
+                visibility: hidden;
+            }
+            .prose h1:hover a svg.icon-link,
+            .prose h2:hover a svg.icon-link,
+            .prose h3:hover a svg.icon-link,
+            .prose h4:hover a svg.icon-link,
+            .prose h5:hover a svg.icon-link,
+            .prose h6:hover a svg.icon-link {
+                visibility: visible;
+            }
+            .prose h1 a svg.icon-link,
+            .prose h2 a svg.icon-link,
+            .prose h3 a svg.icon-link,
+            .prose h4 a svg.icon-link,
+            .prose h5 a svg.icon-link,
+            .prose h6 a svg.icon-link {
+                display: inline-block;
+            }
+            .prose h1 {
+                font-size: 40px;
+                margin-bottom: calc(var(--font-size) / 3);
+            }
+            .prose h1:after { /* Psuedo-element prevents extending to padding */
+                content: "";
+                display: block;
+                border-bottom: 2px solid #000;
+            }
+            .prose h2 {
+                font-size: 30px;
+            }
+            .prose h2:after { /* Psuedo-element prevents extending to padding */
+                content: "";
+                display: block;
+                border-bottom: 1px solid #aaa;
+            }
+            .prose h3 {
+                font-size: 26px;
+            }
+            .prose h4 {
+                font-size: 22px;
+            }
+            .prose h5 {
+                font-size: 20px;
+            }
+            .prose h6 {
+                color: #888;
+                font-size: 18px;
+            }
+
+            /**** Paragraphs ****/
+            .prose p {
+                line-height: 1.5;
+                font-family: var(--font-sans);
+                margin: 16px 0;
+            }
+
+            /**** URLs ****/
+            .prose a {
+                text-decoration: none;
+                color: var(--accent-color);
+            }
+            .prose a:hover {
+                text-decoration: underline;
+            }
+
+            /**** Lists ****/
+            .prose ul {
+                padding-left: 30px;
+            }
+            .prose ul li {
+                list-style-type: disc;
+            }
+            .prose ol {
+                padding-left: 30px;
+            }
+            .prose ol li {
+                list-style-type: decimal;
+            }
+
+            /**** Images ****/
+            .prose img {
+                display: block;
+                margin: 30px auto;
+                border-radius: 22px;
+                filter: drop-shadow(0 4px 6px #444);
+            }
+
+            /**** Tables ****/
+            .prose table {
+                border-radius: 20px;
+                margin: calc(var(--font-size) / 3) 0;
+            }
+            .prose table th {
+                text-align: center;
+            }
+            .prose table thead {
+                border-bottom: 2px solid black;
+            }
+            .prose table th, .prose table td {
+                padding: 6px 14px;
+                margin: 1px;
+                border: 1px solid black;
+            }
+
+            /**** Block quotes ****/
+            .prose blockquote {
+                margin-left: 3px; /* Needs to be equal to border-left width */
+                padding-left: 15px;
+                border-left: 3px solid black;
+            }
+
+            /**** Code block ****/
+            .prose code:not(pre > code) {
+                background-color: #f6f6f6;
+                /*border-radius: 6px;*/
+                border-radius: 6px;
+                /*padding: 16px;*/
+                padding: 2px 4px;
+                margin: 16px 0;
+                font-family: var(--font-mono);
+                /*filter: drop-shadow(0 2px 6px #ddd);*/
+            }
+            .prose pre {
+                background-color: #f6f6f6;
+                border-radius: 6px;
+                padding: 16px;
+                margin: 16px 0;
+                font-family: var(--font-mono);
+                filter: drop-shadow(0 2px 6px #ddd);
+            }
+            .prose pre > code[data-line-numbers] {
+                counter-reset: line;
+            }
+            .prose pre > code[data-line-numbers] > .line::before {
+                counter-increment: line;
+                content: counter(line);
+                display: inline-block;
+                margin-right: 2rem
+                width: 1rem;
+                text-align: left;
+                color: #7ca2dfad;
+            }
+            .prose pre > code > .line::before {
+                content: "";
+                display: inline-block;
+                width: 1rem;
+                text-align: right;
+            }
+
+            /**** Other elements ****/
+            .prose mark {
+                background-color: white;
+                font-style: italic;
+                color: var(--accent-color);
+            }
+        </style>
+    </head>
+
+    <body>
+        <Header />
+        <main>
+            <article>
+                <div class="markdown-title">
+                    <h1 class="markdown-title">{title}</h1>
+                    <div class="date">
+                        Updated on <FormattedDate date={updateDate} />
+                    </div>
+                </div>
+
+                <div class="prose">
+                    <div class="hero-image">
+                        {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
+                    </div>
+                    <slot />
+                </div>
+            </article>
+        </main>
+        <Footer />
+    </body>
+</html>

src/pages/unix/[...slug].astro

@@ -0,0 +1,20 @@
+---
+import { type CollectionEntry, getCollection } from 'astro:content';
+import UnixPost from '../../layouts/UnixPost.astro';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('unix');
+	return posts.map((post) => ({
+		params: { slug: post.slug },
+		props: post,
+	}));
+}
+type Props = CollectionEntry<'unix'>;
+
+const post = Astro.props;
+const { Content } = await post.render();
+---
+
+<UnixPost {...post.data}>
+	<Content />
+</UnixPost>

src/pages/unix/index.astro

@@ -0,0 +1,106 @@
+---
+import BaseHead from '../../components/BaseHead.astro';
+import Header from '../../components/Header.astro';
+import Footer from '../../components/Footer.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
+import { getCollection } from 'astro:content';
+import FormattedDate from '../../components/FormattedDate.astro';
+
+const posts = (await getCollection('unix')).sort(
+    (a, b) => b.data.updateDate.valueOf() - a.data.updateDate.valueOf()
+);
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+        <style>
+            main {
+                width: 960px;
+                margin: auto;
+            }
+
+            ul {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 2rem;
+                list-style-type: none;
+                margin: 0;
+                padding: 0;
+            }
+            ul li {
+                width: calc(50% - 1rem);
+            }
+            img {
+                height: 232px;
+                width: 464px;
+                object-fit: contain;
+            }
+            @media (max-width: 720px) {
+                ul {
+                    gap: 0.5em;
+                }
+                ul li {
+                    width: 100%;
+                    text-align: center;
+                }
+                ul li:first-child {
+                    margin-bottom: 0;
+                }
+                ul li:first-child .title {
+                    font-size: 1.563em;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <Header />
+        <main>
+            <section>
+                <h1
+                    class="text-center mt-8 mb-4 text-6xl"
+                    style="font-family: var(--font-title);">
+                    Unix Guides!
+                </h1>
+                <p
+                    class="text-center mb-4 text-xl">
+                    Over the past few years, I've extenstively configured at
+                    learnt about using MacOS, Linux, and even some BSD systems.
+                    Along the way I documented some of the trickier aspects of
+                    learning Unix.
+                </p>
+                <p
+                    class="text-center mb-4 text-xl">
+                    These guides are mostly relevant to Linux, especially new
+                    enthusiasts.
+                </p>
+                <hr class="m-4" style="border: 1px solid black;" />
+                <ul>
+                    {
+                        posts.map((post) => (
+                            <li>
+                                <a href={`/unix/${post.slug}/`}>
+                                    <img
+                                        width={720}
+                                        height={360}
+                                        class="rounded-2xl grayscale"
+                                        src={ post.data.heroImage ? post.data.heroImage : "/terminal.webp" }
+                                        alt="" />
+                                    <h4
+                                        class="title text-xl">
+                                        {post.data.title}
+                                    </h4>
+                                    <p class="date">
+                                       Updated on <FormattedDate date={post.data.updateDate} />
+                                    </p>
+                                </a>
+                            </li>
+                        ))
+                    }
+                </ul>
+            </section>
+        </main>
+        <Footer />
+    </body>
+</html>