refactor: migrate to 11ty for blog platform (#1201)

* refactor(11ty): switch to using 11ty for personal blog

* refactor(rss): add 11ty rss plugin

Author: ADobin

.eleventy.js

@@ -0,0 +1,65 @@
+import pluginWebc from "@11ty/eleventy-plugin-webc";
+import { EleventyRenderPlugin, InputPathToUrlTransformPlugin } from "@11ty/eleventy";
+import { VentoPlugin } from 'eleventy-plugin-vento';
+import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
+import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import { feedPlugin } from "@11ty/eleventy-plugin-rss";
+
+export default function (eleventyConfig) {
+	eleventyConfig.addPlugin(EleventyRenderPlugin);
+	eleventyConfig.addPlugin(pluginWebc, {
+		// Glob to find no-import global components
+		// This path is relative to the project-root!
+		components: "src/_components/**/*.webc",
+	});
+	eleventyConfig.addPlugin(VentoPlugin);
+	eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
+	eleventyConfig.addPlugin(eleventyNavigationPlugin);
+	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+		// which file extensions to process
+		extensions: "html",
+
+		// Add any other Image utility options here:
+
+		// optional, output image formats
+		formats: ["webp", "jpeg"],
+		// formats: ["auto"],
+
+		// optional, output image widths
+		// widths: ["auto"],
+
+		// optional, attributes assigned on <img> override these values.
+		defaultAttributes: {
+			loading: "lazy",
+			decoding: "async",
+		},
+	});
+	eleventyConfig.addPlugin(syntaxHighlight);
+	eleventyConfig.addPlugin(feedPlugin, {
+		type: "atom", // or "rss", "json"
+		outputPath: "/feed.xml",
+		collection: {
+			name: "posts", // iterate over `collections.posts`
+			limit: 10,     // 0 means no limit
+		},
+		metadata: {
+			language: "en",
+			title: "Alex Dobin's Blog",
+			subtitle: "A blog about technology and homelabbing",
+			base: "https://alexdobin.com/",
+			author: {
+				name: "Alex Dobin",
+				email: "[email protected]", // Optional
+			}
+		}
+	});
+
+	eleventyConfig.addPassthroughCopy({ static: "/" });
+}
+
+export const config = {
+	dir: {
+		input: "src"
+	},
+};

.eslintrc.cjs

@@ -6,9 +6,9 @@ name: Build and deploy GitHub pages
 on:
   # Triggers the workflow on push or pull request events but only for the "source" branch
   push:
-    branches: ['source']
+    branches: ["source"]
   pull_request:
-    branches: ['source']
+    branches: ["source"]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -22,7 +22,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: 'pages'
+  group: "pages"
   cancel-in-progress: false
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
@@ -42,7 +42,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: '20.11.x'
+          node-version: "20.11.x"
 
       - name: Install and Build 🔧
         run: |
@@ -56,7 +56,7 @@ jobs:
           # Artifact name
           # name: # optional, default is github-pages
           # Path of the directory containing the static assets.
-          path: build/
+          path: _site/
           # Duration after which artifact will expire in days.
           # retention-days: # optional, default is 1
 

.github/workflows/build_deploy_gh_pages.yml

@@ -3,3 +3,4 @@ node_modules
 /build
 /.svelte-kit
 /package
+/_site

.gitignore

@@ -1 +1 @@
-v20.11.1
+v20.13.1

.node-version

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Gatsbyjs
+Copyright (c) 2024 Alex Dobin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

.prettierrc

@@ -1,38 +1,15 @@
-# create-svelte
+# alexdobin.com - personal blog
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+Welcome to my personal blog! I'm Alex Dobin, a software engineer and homelab enthusiast. I write about my experiences with technology, homelabbing, and other things that interest me. I hope you find something useful here!
 
-## Creating a project
+## Tech stack
+- [Eleventy](https://www.11ty.dev/)
+- [GitHub pages]](https://pages.github.com/)
+- [GitHub Actions](https://docs.github.com/actions)
 
-If you're seeing this, you've probably already done this step. Congrats!
+## Development
+To run the site locally, you will need to have Node.js installed. You can then run the following commands to get started:
 
 ```bash
-# create a new project in the current directory
-npm init svelte@next
-
-# create a new project in my-app
-npm init svelte@next my-app
-```
-
-> Note: the `@next` is temporary
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+npm run serve
 ```
-
-## Building
-
-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
-
-```bash
-npm run build
-```
-
-> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.