design tweaks

.astro/icon.d.ts

@@ -0,0 +1,10 @@
+// Automatically generated by astro-icon
+// 001a1ccebb4bfa874cce071296b7167baf197ac1b43baf1f725af5a705835151
+
+declare module 'virtual:astro-icon' {
+	export type Icon = 
+		| "calendar"
+		| "clock"
+		| "pen"
+		| "person";
+}

.eslintrc.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'prettier',
+		'plugin:prettier/recommended',
+		'plugin:astro/recommended',
+	],
+	plugins: ['prettier'],
+	overrides: [],
+};

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-	"plugins": ["./node_modules/prettier-plugin-astro"],
+	"plugins": ["prettier-plugin-astro"],
 	"trailingComma": "es5",
 	"tabWidth": 2,
 	"useTabs": true,

astro.config.mjs

@@ -1,5 +1,6 @@
 import { defineConfig } from 'astro/config';
 import netlify from '@astrojs/netlify';
+import icon from 'astro-icon';
 
 // https://astro.build/config
 import mdx from '@astrojs/mdx';
@@ -8,5 +9,10 @@ import mdx from '@astrojs/mdx';
 export default defineConfig({
 	output: 'server',
 	adapter: netlify(),
-	integrations: [mdx()],
+	integrations: [
+		mdx(),
+		icon({
+			iconDir: 'src/styles/svg/icons',
+		}),
+	],
 });

newPost.ts

@@ -1,24 +0,0 @@
-import { Tag } from 'src/types';
-
-const renderFile = (
-	title: string,
-	date: string,
-	tags: string[],
-	md: string
-) => `
----
-title: ${title}
-pubDate: ${date}
-tags: ['${tags.join("', '")}']
----
-
-${md}
-`;
-
-const newPost = () => {
-	const tagArr = Object.values(Tag);
-
-	console.log(tagArr);
-};
-
-newPost();

package.json

@@ -9,13 +9,14 @@
 		"build": "astro build",
 		"preview": "astro preview",
 		"astro": "astro",
-		"new-post": "bun ./newPost.ts"
+		"lint": "eslint --ext .js --ext .ts --ext .astro"
 	},
 	"dependencies": {
 		"@astrojs/mdx": "2.1.0",
 		"@astrojs/netlify": "5.0.0",
 		"@astrojs/rss": "4.0.4",
 		"astro": "4.2.6",
+		"astro-icon": "^1.1.0",
 		"date-fns": "^3.3.1",
 		"date-fns-tz": "^1.3.7",
 		"markdown-it": "^13.0.1",
@@ -23,8 +24,16 @@
 		"sharp": "^0.33.2"
 	},
 	"devDependencies": {
+		"bun-types": "latest",
+		"eslint": "^8.57.0",
+		"eslint-plugin-astro": "^0.31.4",
+		"eslint-plugin-prettier": "^5.1.3",
 		"inquirer": "^9.2.15",
 		"prettier": "^2.8.1",
 		"prettier-plugin-astro": "^0.7.0"
+	},
+	"module": "index.ts",
+	"peerDependencies": {
+		"typescript": "^5.0.0"
 	}
 }

src/components/BlogHeader.astro

@@ -1,5 +1,6 @@
 ---
-import FormattedDate from '@components/FormattedDate.astro';
+import { format, add } from 'date-fns';
+import { Icon } from 'astro-icon/components';
 
 interface Props {
 	title: String;
@@ -15,18 +16,12 @@ const { title, date, slug } = Astro.props;
 		{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
 	</h2>
 	<h3>
-		🗓️ <FormattedDate date={date} />
+		<Icon size={24} class="calendar-icon" name="calendar" />
+		<span>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</span>
 	</h3>
 </div>
 
 <style>
-	a {
-		text-decoration: none;
-	}
-	a:hover {
-		text-decoration: none;
-	}
-
 	h2,
 	h2 a {
 		font-size: 1.4rem;
@@ -36,6 +31,7 @@ const { title, date, slug } = Astro.props;
 		display: flex;
 		align-items: center;
 		gap: 6px;
-		font-size: 0.9rem;
+		font-weight: lighter;
+		font-size: 0.3em;
 	}
 </style>

src/components/Footer.astro

@@ -1,5 +1,7 @@
 ---
 const year = new Date().getFullYear();
+
+interface Props {}
 ---
 
 <footer>

src/components/FormattedDate.astro

@@ -1,11 +0,0 @@
----
-import { format, add } from 'date-fns';
-
-interface Props {
-	date: Date;
-}
-
-const { date } = Astro.props;
----
-
-<span>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</span>

src/components/Header.astro

@@ -1,12 +1,15 @@
 ---
+import { Icon } from 'astro-icon/components';
 import type { NavLink } from 'src/types';
 
 const { pathname } = Astro.url;
 
+interface Props {}
+
 const navLinks: NavLink[] = [
-	{ label: '📝 Blog', path: '/' },
+	{ label: 'Blog', icon: 'pen', path: '/' },
-	{ label: '👤 About', path: '/about/' },
+	{ label: 'About', icon: 'person', path: '/about/' },
-	{ label: '🕐 Now', path: '/now/' },
+	{ label: 'Now', icon: 'clock', path: '/now/' },
 ];
 ---
 
@@ -21,6 +24,7 @@ const navLinks: NavLink[] = [
 							class={pathname === link.path ? 'active-nav' : null}
 							href={link.path}
 						>
+							<Icon size={26} name={link.icon} />
 							<span>{link.label}</span>
 						</a>
 					</li>
@@ -76,7 +80,7 @@ const navLinks: NavLink[] = [
 	}
 
 	nav ul li a::before {
-		content: '❯';
+		content: '•';
 		position: absolute;
 		left: -12px;
 		color: var(--blue);

src/components/PostPreview.astro

@@ -1,5 +1,5 @@
 ---
-import { Tag } from 'src/content/config';
+import { Tag } from 'src/types';
 
 import BlogHeader from '@components/BlogHeader.astro';
 import Tags from '@components/Tags.astro';

src/components/Tags.astro

@@ -1,5 +1,5 @@
 ---
-import { Tag } from 'src/content/config';
+import { Tag } from 'src/types';
 
 interface Props {
 	tags: Tag[];

src/content/blog/2024/ramblings-on-the-macintosh.md

@@ -1,7 +1,7 @@
 ---
 title: 'Ramblings On The Macintosh'
 pubDate: '2/18/24'
-tags: ['Life', 'MacOS', 'Tech']
+tags: [Life, MacOS, Tech]
 ---
 
 2024 marks the 40th anniversary of the Macintosh. You've probably heard this a million times already this year, I'm pretty late to the party for writing a Macintosh retrospective, but I wanted to write this post anyway because of how important the Mac is to me. I might not be where I am today, especially not career-wise, if it weren't for the Macintosh.

src/layouts/Layout.astro

@@ -6,11 +6,12 @@ import Footer from '@components/Footer.astro';
 
 export interface Props {
 	title: string;
+	frontmatter?: {
+		title: string;
+	};
 }
 
-const title = Astro.props.title || Astro.props.frontmatter.title;
+const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
-
-console.log(Astro.props);
 ---
 
 <!DOCTYPE html>

src/pages/now.md

@@ -5,7 +5,7 @@ title: Now
 
 Hey there, this is my [/now page](https://nownownow.com/about)!
 
-_Last updated: February 25, 2024_
+_Last updated: February 28, 2024_
 
 ## 🔨 Making
 
@@ -28,3 +28,13 @@ _Last updated: February 25, 2024_
 ## 📺 Watching
 
 - Nothing at the moment...
+
+## 💻 Using
+
+- MacBook Air M2 - Midnight
+  - 24GB RAM
+  - 512GB SSD
+- LG UltraFine 27"
+- Nuphy Air75 v2
+  - With retro Mac-style keycaps
+- Apple Magic Trackpad/Logitech A72 (depending on my mood)

src/styles/global.css

@@ -1,8 +1,7 @@
 @font-face {
 	font-family: CrimsonText;
-	src: url(./fonts/CrimsonText-Regular.ttf) format('truetype');
+	src: url(./fonts/Poppins-Regular.ttf) format('truetype');
 	font-style: normal;
-	font-display: block;
 }
 
 @font-face {
@@ -37,11 +36,15 @@
 * {
 	/* font-family: 'CrimsonText', serif; */
 	font-family: 'CrimsonText', serif;
-	font-size: 1.2rem;
+	font-size: 1.1rem;
 	color: var(--text);
 	letter-spacing: 0.03rem;
 }
 
+html {
+	color-scheme: dark light;
+}
+
 body {
 	background-color: var(--background);
 	margin: 0;
@@ -79,7 +82,7 @@ blockquote {
 }
 
 hr {
-	border-top: 1px solid var(--text);
+	border-top: 1px solid var(--border);
 	margin: 2rem 0;
 }
 
@@ -102,8 +105,7 @@ sup > a {
 
 a {
 	color: var(--blue);
-	text-decoration: underline;
+	text-decoration: none;
-	text-decoration-style: dotted;
 }
 
 a:hover {
@@ -263,11 +265,6 @@ dialog {
 	margin: 0 0 1.5rem 0;
 }
 
-.post-preview:not(:last-of-type) {
-	border-bottom: var(--border);
-	margin: 0;
-}
-
 svg {
 	color: var(--text);
 }
@@ -278,7 +275,7 @@ svg {
 	display: block;
 	width: 134px;
 	height: 45px;
-	background-image: url(Written-By-Human-Not-By-AI-Badge-white.svg);
+	background-image: url(svg/Written-By-Human-Not-By-AI-Badge-white.svg);
 	background-repeat: no-repeat;
 	background-position: center;
 	/* border: 1px solid red; */
@@ -286,6 +283,6 @@ svg {
 
 @media (prefers-color-scheme: dark) {
 	.not-by-ai {
-		background-image: url(Written-By-Human-Not-By-AI-Badge-black.svg);
+		background-image: url(svg/Written-By-Human-Not-By-AI-Badge-black.svg);
 	}
 }

src/styles/svg/icons/calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4h-.8c-1.12 0-1.68 0-2.108.218a1.999 1.999 0 0 0-.874.874C4 5.52 4 6.08 4 7.2V8m4-4h8M8 4V2m8 2h.8c1.12 0 1.68 0 2.107.218c.377.192.683.497.875.874c.218.427.218.987.218 2.105V8m-4-4V2M4 8v8.8c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.427.218.987.218 2.105.218h9.606c1.118 0 1.677 0 2.104-.218c.377-.192.683-.498.875-.874c.218-.428.218-.986.218-2.104V8M4 8h16m-4 8h.002v.002H16zm-4 0h.002v.002H12zm-4 0h.002v.002H8zm8.002-4v.002H16V12zM12 12h.002v.002H12zm-4 0h.002v.002H8z"/></svg>

src/styles/svg/icons/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v5h5m-5 9a9 9 0 1 1 0-18a9 9 0 0 1 0 18"/></svg>

src/styles/svg/icons/pen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20h16M4 20v-4l8-8M4 20h4l8-8m-4-4l2.869-2.869l.001-.001c.395-.395.593-.593.821-.667a1 1 0 0 1 .618 0c.228.074.425.272.82.666l1.74 1.74c.396.396.594.594.668.822a1 1 0 0 1 0 .618c-.074.228-.272.426-.668.822h0L16 12.001m-4-4l4 4"/></svg>

src/styles/svg/icons/person.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21a7 7 0 1 0-14 0m7-10a4 4 0 1 1 0-8a4 4 0 0 1 0 8"/></svg>

src/types.ts

@@ -1,6 +1,7 @@
 // navigation links
 export type NavLink = {
 	label: string;
+	icon: string;
 	path: string;
 };
 

tsconfig.json

@@ -3,7 +3,6 @@
 	"compilerOptions": {
 		"baseUrl": ".",
 		"strictNullChecks": true,
-		"strict": true,
 		"paths": {
 			"@components/*": ["src/components/*"],
 			"@layouts/*": ["src/layouts/*"],