Merge branch 'main' of github.com:otisdog8/rooty.dev

.eslintrc.cjs

@@ -1,43 +1,68 @@
 /** @type {import("@types/eslint").Linter.Config} */
 module.exports = {
-	ignorePatterns: ["node_modules", "dist"],
-	root: true,
 	env: {
 		node: true,
 	},
-	parser: "@typescript-eslint/parser",
-	plugins: ["@typescript-eslint", "prettier"],
 	extends: [
 		"eslint:recommended",
 		"plugin:@typescript-eslint/recommended",
-		"plugin:prettier/recommended",
-		"prettier",
 		"plugin:astro/recommended",
 		"plugin:astro/jsx-a11y-recommended",
+		"plugin:perfectionist/recommended-natural",
+		"plugin:regexp/recommended",
+		"plugin:typescript-sort-keys/recommended",
 	],
-	rules: {
-		"@typescript-eslint/no-var-requires": "warn",
-		"@typescript-eslint/no-unused-vars": [
-			"warn",
-			{ varsIgnorePattern: "Props", ignoreRestSiblings: true },
-		],
-	},
+	ignorePatterns: ["node_modules", "dist"],
 	overrides: [
 		{
+			extends: ["plugin:@typescript-eslint/strict", "plugin:@typescript-eslint/stylistic"],
 			files: ["*.astro"],
 			parser: "astro-eslint-parser",
 			parserOptions: {
-				parser: "@typescript-eslint/parser",
 				extraFileExtensions: [".astro"],
+				parser: "@typescript-eslint/parser",
 			},
 			rules: {
 				"astro/jsx-a11y/no-redundant-roles": [
 					"error",
 					{
+						ol: ["list"],
 						ul: ["list"],
 					},
 				],
 			},
 		},
+		{
+			extends: [
+				"plugin:@typescript-eslint/strict-type-checked",
+				"plugin:@typescript-eslint/stylistic-type-checked",
+			],
+			files: ["*.ts", "*.tsx"],
+			rules: {
+				"deprecation/deprecation": "error",
+			},
+		},
+		{
+			extends: ["plugin:markdown/recommended"],
+			files: ["**/*.md"],
+			processor: "markdown/markdown",
+		},
 	],
+	parser: "@typescript-eslint/parser",
+	plugins: [
+		"@typescript-eslint",
+		"astro",
+		"deprecation",
+		"perfectionist",
+		"regexp",
+		"typescript-sort-keys",
+	],
+	root: true,
+	rules: {
+		"@typescript-eslint/no-unused-vars": [
+			"warn",
+			{ ignoreRestSiblings: true, varsIgnorePattern: "Props" },
+		],
+		"@typescript-eslint/no-var-requires": "warn",
+	},
 };

.vscode/post.code-snippets

@@ -0,0 +1,33 @@
+{
+	// Place your astro-cactus workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+	// Placeholders with the same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"scope": "javascript,typescript",
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// }
+	"Add frontmatter to an Astro Cactus Post": {
+		"scope": "markdown,mdx",
+		"prefix": "frontmatter",
+		"body": [
+			"---",
+			"title: ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}",
+			"description: 'Please enter a description of your post here, between 50-160 chars!'",
+			"publishDate: $CURRENT_DATE $CURRENT_MONTH_NAME $CURRENT_YEAR",
+			"tags: []",
+			"draft: false",
+			"---",
+			"$2",
+		],
+		"description": "Add frontmatter for new Markdown post",
+	},
+}

.vscode/settings.json

@@ -1,17 +1,22 @@
 {
 	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit"
+	},
 	"[markdown]": {
-		"editor.wordWrap": "on",
-		"editor.codeActionsOnSave": {
-			"source.fixAll.markdownlint": "explicit"
-		}
+		"editor.wordWrap": "on"
 	},
 	"prettier.documentSelectors": ["**/*.astro"],
-	"eslint.validate": [
+	"eslint.probe": [
+		"astro",
 		"javascript",
 		"javascriptreact",
-		"astro", // Enable .astro
-		"typescript", // Enable .ts
+		"markdown",
+		"typescript",
 		"typescriptreact"
-	]
+	],
+	"[astro]": {
+		"editor.defaultFormatter": "astro-build.astro-vscode"
+	}
 }

README.md

@@ -17,6 +17,7 @@ Astro Cactus is a simple opinionated starter built with the Astro framework. Use
 6. [Configure](#configure)
 7. [Adding Posts](#adding-posts)
    - [Frontmatter](#frontmatter)
+   - [Frontmatter Snippet](#frontmatter-snippet)
 8. [Pagefind search](#pagefind-search)
 9. [Analytics](#analytics)
 10. [Deploy](#deploy)
@@ -35,10 +36,10 @@ Astro Cactus is a simple opinionated starter built with the Astro framework. Use
 - Pagination
 - [Automatic RSS feed](https://docs.astro.build/en/guides/rss)
 - [Webmentions](https://webmention.io/)
-- Shiki code syntax styling
 - Auto-generated [sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)
 - [Pagefind](https://pagefind.app/) static search library integration
 - [Astro Icon](https://github.com/natemoo-re/astro-icon) svg icon component
+- [Expressive Code](https://expressive-code.com/) source code and syntax highlighter
 
 ## Demo 💻
 
@@ -80,19 +81,20 @@ Replace pnpm with your choice of npm / yarn
 ## Configure
 
 - Edit the config file `src/site.config.ts` for basic site meta data
-  - Read [this post](http://astro-cactus.chriswilliams.dev/posts/webmentions/) for adding webmentions to your site, otherwise set `siteConfig.webmentions.link` to empty value.
-- Update file `astro.config.ts` site property with your own domain
+  - Read [this post](http://astro-cactus.chriswilliams.dev/posts/webmentions/) for adding webmentions to your site, otherwise set `siteConfig.webmentions.link` to an empty value.
+- Update file `astro.config.ts` site property with your own domain.
 - Replace & update files within the `/public` folder:
   - favicon.ico & other social icons
   - robots.txt - update the Sitemap url to your own domain
   - manifest.webmanifest
-- Modify file `src/styles/global.css` with your own light and dark styles
-- Edit social links in `src/components/SocialList.astro` to add/replace your media profile. Icons can be found @ [icones.js.org](https://icones.js.org/)
+- Modify file `src/styles/global.css` with your own light and dark styles.
+  - You can also modify the theme(s) for markdown code blocks generated by [Expressive Code](https://expressive-code.com). Astro Cactus has both a dark (dracula) and light (github-light) theme, which can be found in `src/site.config.ts`. You can find more theme(s) and options [here](https://expressive-code.com/guides/themes/#available-themes).
+- Edit social links in `src/components/SocialList.astro` to add/replace your media profile. Icons can be found @ [icones.js.org](https://icones.js.org/), per [Astro Icon's instructions](https://www.astroicon.dev/guides/customization/#find-an-icon-set).
 - Create / edit posts for your blog within `src/content/post/` with .md/mdx file(s). See [below](#adding-posts) for more details.
 - OG Image:
   - If you would like to change the style of the generated image the Satori library creates, open up `src/pages/og-image/[slug].png.ts` to the markup function where you can edit the html/tailwind-classes as necessary. You can also use this [satori playground](https://og-playground.vercel.app/) to aid your design.
   - If you would like to generate svg og images rather than the default .png ones, you will need to remove the @resvg/resvg-js library, and return the svg within the body of the get function from the file `src/pages/og-image/[slug].png.ts`.
-  - You can also create your own og images and skip satori generating if for you by adding an ogImage property in the frontmatter with a link to the asset, an example can be found in `src/content/post/social-image.md`. More info on frontmatter can be found [here](#frontmatter)
+  - You can also create your own og images and skip satori generating it for you by adding an ogImage property in the frontmatter with a link to the asset, an example can be found in `src/content/post/social-image.md`. More info on frontmatter can be found [here](#frontmatter)
 - Optional:
   - Fonts: This theme sets the body element to the font family `font-mono`, located in the global css file `src/styles/global.css`. You can change fonts by removing the variant `font-mono`, after which TailwindCSS will default to the `font-sans` [font family stack](https://tailwindcss.com/docs/font-family).
 
@@ -115,6 +117,10 @@ Adding a post is as simple as adding your .md(x) files to the `src/content/post`
 | ogImage                | This is an optional property. An OG Image will be generated automatically for every post where this property **isn't** provided. If you would like to create your own for a specific post, include this property and a link to your image, the theme will then skip automatically generating one.            |
 | draft                  | This is an optional property as it is set to false by default in the schema. By adding true, the post will be filtered out of the production build in a number of places, inc. getAllPosts() calls, og-images, rss feeds, and generated page[s]. You can view an example in `src/content/post/draft-post.md` |
 
+### Frontmatter snippet
+
+Astro Cactus includes a helpful VSCode snippet which creates a frontmatter 'stub' for a blog post, found here -> `.vscode/post.code-snippets`. Start typing the word `frontmatter` on your newly created .md(x) file to trigger it. Visual Studio Code snippets appear in IntelliSense via (⌃Space) on mac, (Ctrl+Space) on windows.
+
 ## Pagefind search
 
 This integration brings a static search feature for searching blog posts. In its current form, pagefind only works once the site has been built. This theme adds a postbuild script that should be run after Astro has built the site. You can preview locally by running both build && postbuild.
@@ -135,26 +141,6 @@ This theme/template doesn't include a specific solution due to there being a num
 
 You may be asked to included a snippet inside the **HEAD** tag of your website when setting it up, which can be found in `src/layouts/Base.astro`. Alternatively, you could add the snippet in `src/components/BaseHead.astro`.
 
-Another popular provider is google analytics which you could integrate via the above method, or, for example adding [astro-google-analytics](https://www.npmjs.com/package/astro-google-analytics)
-
-```bash
-pnpm install astro-google-analytics
-```
-
-Edit `src/layouts/Base.astro`, and add:
-
-```astro
----
-import { GoogleAnalytics } from "astro-google-analytics";
-// ...other imports
----
-
-<head>
-	<!-- Replace id with your own Google Analytics ID -->
-	<GoogleAnalytics id="G-XXXXXXXXXX" />
-</head>
-```
-
 ## Deploy
 
 [Astro docs](https://docs.astro.build/en/guides/deploy/) has a great section and breakdown of how to deploy your own Astro site on various platforms and their idiosyncrasies.

astro.config.ts

@@ -6,6 +6,9 @@ import sitemap from "@astrojs/sitemap";
 import remarkUnwrapImages from "remark-unwrap-images";
 import rehypeExternalLinks from "rehype-external-links";
 import { remarkReadingTime } from "./src/utils/remark-reading-time";
+import icon from "astro-icon";
+import expressiveCode from "astro-expressive-code";
+import { expressiveCodeOptions } from "./src/site.config";
 
 // https://astro.build/config
 export default defineConfig({
@@ -14,28 +17,36 @@ export default defineConfig({
 	markdown: {
 		remarkPlugins: [remarkUnwrapImages, remarkReadingTime],
 		rehypePlugins: [
-			[rehypeExternalLinks, { target: "_blank", rel: ["nofollow, noopener, noreferrer"] }],
+			[
+				rehypeExternalLinks,
+				{
+					target: "_blank",
+					rel: ["nofollow, noopener, noreferrer"],
+				},
+			],
 		],
-		remarkRehype: { footnoteLabelProperties: { className: [""] } },
-		shikiConfig: {
-			theme: "dracula",
-			wrap: true,
+		remarkRehype: {
+			footnoteLabelProperties: {
+				className: [""],
+			},
 		},
 	},
 	integrations: [
-		mdx({}),
+		expressiveCode(expressiveCodeOptions),
+		icon(),
 		tailwind({
 			applyBaseStyles: false,
 		}),
 		sitemap(),
+		mdx(),
 	],
 	image: {
 		domains: ["webmention.io"],
 	},
 	// https://docs.astro.build/en/guides/prefetch/
 	prefetch: true,
 	vite: {
-		plugins: [rawFonts([".ttf"])],
+		plugins: [rawFonts([".ttf", ".woff"])],
 		optimizeDeps: {
 			exclude: ["@resvg/resvg-js"],
 		},

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "astro-cactus",
-	"version": "3.6.1",
+	"version": "4.3.0",
 	"private": false,
 	"scripts": {
 		"dev": "astro dev",
@@ -12,47 +12,52 @@
 		"check": "astro check"
 	},
 	"dependencies": {
-		"@astrojs/mdx": "2.0.0",
-		"@astrojs/rss": "4.0.1",
-		"@astrojs/sitemap": "3.0.3",
-		"@astrojs/tailwind": "5.0.3",
-		"astro": "4.0.3",
-		"astro-icon": "^0.8.2",
+		"@astrojs/mdx": "2.2.0",
+		"@astrojs/rss": "4.0.5",
+		"@astrojs/sitemap": "3.1.1",
+		"@astrojs/tailwind": "5.1.0",
+		"astro": "4.5.5",
+		"astro-expressive-code": "^0.33.5",
+		"astro-icon": "^1.1.0",
 		"rehype-external-links": "^3.0.0",
-		"satori": "0.10.11",
+		"satori": "0.10.13",
 		"satori-html": "^0.3.2",
-		"sharp": "^0.33.0"
+		"sharp": "^0.33.2"
 	},
 	"devDependencies": {
-		"@astrojs/check": "^0.3.1",
+		"@astrojs/check": "^0.5.9",
+		"@iconify-json/mdi": "^1.1.64",
 		"@pagefind/default-ui": "^1.0.4",
 		"@resvg/resvg-js": "^2.6.0",
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.10",
-		"@types/eslint": "^8.44.8",
-		"@typescript-eslint/eslint-plugin": "^6.13.2",
-		"@typescript-eslint/parser": "^6.13.2",
-		"astro-eslint-parser": "^0.16.0",
-		"autoprefixer": "^10.4.16",
-		"eslint": "^8.55.0",
-		"eslint-config-prettier": "^9.1.0",
+		"@types/eslint": "^8.56.5",
+		"@typescript-eslint/eslint-plugin": "^7.2.0",
+		"@typescript-eslint/parser": "^7.2.0",
+		"astro-eslint-parser": "^0.16.3",
+		"autoprefixer": "^10.4.18",
+		"eslint": "^8.57.0",
 		"eslint-import-resolver-typescript": "^3.6.1",
-		"eslint-plugin-astro": "^0.30.0",
-		"eslint-plugin-import": "^2.29.0",
+		"eslint-plugin-astro": "^0.31.4",
+		"eslint-plugin-deprecation": "^2.0.0",
+		"eslint-plugin-import": "^2.29.1",
 		"eslint-plugin-jsx-a11y": "^6.8.0",
-		"eslint-plugin-prettier": "^5.0.1",
+		"eslint-plugin-markdown": "^4.0.1",
+		"eslint-plugin-perfectionist": "^2.7.0",
+		"eslint-plugin-regexp": "^2.3.0",
+		"eslint-plugin-typescript-sort-keys": "^3.2.0",
 		"mdast-util-to-string": "^4.0.0",
 		"pagefind": "^1.0.4",
-		"postcss": "^8.4.32",
-		"postcss-html": "^1.5.0",
-		"postcss-import": "^15.1.0",
-		"prettier": "^3.1.0",
-		"prettier-plugin-astro": "0.12.2",
-		"prettier-plugin-tailwindcss": "^0.5.9",
+		"postcss": "^8.4.35",
+		"postcss-html": "^1.6.0",
+		"postcss-import": "^16.0.1",
+		"prettier": "^3.2.5",
+		"prettier-plugin-astro": "0.13.0",
+		"prettier-plugin-tailwindcss": "^0.5.12",
 		"reading-time": "^1.5.0",
 		"remark-unwrap-images": "^4.0.0",
-		"tailwindcss": "^3.3.6",
-		"typescript": "^5.3.3"
+		"tailwindcss": "^3.4.1",
+		"typescript": "^5.4.2"
 	},
 	"packageManager": "[email protected]"
 }