Merge pull request #334 from chrismwilliams/astro-v5

Update to Astro v5

.example.env

@@ -1 +1,3 @@
-WEBMENTION_API_KEY=
+WEBMENTION_API_KEY=
+WEBMENTION_URL=
+WEBMENTION_PINGBACK=#optional

.vscode/post.code-snippets

@@ -17,7 +17,7 @@
 	// }
 	"Add frontmatter to an Astro Cactus Post": {
 		"scope": "markdown,mdx",
-		"prefix": "frontmatter",
+		"prefix": "frontmatter-post",
 		"body": [
 			"---",
 			"title: ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}",
@@ -30,4 +30,17 @@
 		],
 		"description": "Add frontmatter for new Markdown post",
 	},
+	"Add frontmatter to an Astro Cactus Note": {
+		"scope": "markdown,mdx",
+		"prefix": "frontmatter-note",
+		"body": [
+			"---",
+			"title: ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}",
+			"description: 'Enter a description here (optional)'",
+			"publishDate: \"${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:00Z\"",
+			"---",
+			"$2",
+		],
+		"description": "Add frontmatter for a new Markdown note",
+	},
 }

.vscode/settings.json

@@ -5,12 +5,11 @@
 	"[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" },
 	"[json]": { "editor.defaultFormatter": "biomejs.biome" },
 	"[jsonc]": { "editor.defaultFormatter": "biomejs.biome" },
-	"[astro]": { "editor.defaultFormatter": "astro-build.astro-vscode" },
 	"editor.formatOnSave": true,
+	"prettier.documentSelectors": ["**/*.astro"],
 	"editor.codeActionsOnSave": {
 		"source.organizeImports": "never",
 		"source.organizeImports.biome": "explicit",
-		"source.fixAll": "never",
 		"quickfix.biome": "explicit"
 	},
 	"[markdown]": {

README.md

@@ -26,16 +26,14 @@ Astro Cactus is a simple opinionated starter built with the Astro framework. Use
 
 ## Key Features
 
-- Astro v4 Fast 🚀
+- Astro v5 Fast 🚀
 - TailwindCSS Utility classes
 - Accessible, semantic HTML markup
 - Responsive & SEO-friendly
 - Dark / Light mode, using Tailwind and CSS variables
-- [Astro Assets Integration](https://docs.astro.build/en/guides/assets/) for optimised images
-- MD & [MDX](https://docs.astro.build/en/guides/markdown-content/#mdx-only-features) posts
+- MD & [MDX](https://docs.astro.build/en/guides/markdown-content/#mdx-only-features) posts & notes
   - Includes [Admonitions](https://astro-cactus.chriswilliams.dev/posts/markdown-elements/admonistions/)
 - [Satori](https://github.com/vercel/satori) for creating open graph png images
-- Pagination
 - [Automatic RSS feed](https://docs.astro.build/en/guides/rss)
 - [Webmentions](https://webmention.io/)
 - Auto-generated:
@@ -44,7 +42,7 @@ Astro Cactus is a simple opinionated starter built with the Astro framework. Use
   - [web app manifest](https://github.com/alextim/astro-lib/blob/main/packages/astro-webmanifest/README.md)
 - [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
+- [Expressive Code](https://expressive-code.com/) code blocks and syntax highlighter
 
 ## Demo 💻
 
@@ -86,7 +84,6 @@ 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 an empty value.
 - Update file `astro.config.ts`
   - **Important**: the site property with your own domain.
   - [astro-webmanifest options](https://github.com/alextim/astro-lib/blob/main/packages/astro-webmanifest/README.md)
@@ -96,48 +93,56 @@ Replace pnpm with your choice of npm / yarn
 - 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.
+- Create/edit posts & notes for your blog within `src/content/post/` & `src/content/note/` with .md/mdx file(s). See [below](#adding-posts-and-notes) for more details.
+  - Read [this post](http://astro-cactus.chriswilliams.dev/posts/webmentions/) for adding webmentions to your site.
 - 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`.
+  - 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 use this [playground](https://og-playground.vercel.app/) to aid your design.
   - 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).
 
 ## Updating
 
-If you've forked the template, you can [sync the fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) with your own project, remembering to not click Discard Changes as you will lose your own.
+If you've forked the template, you can [sync the fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) with your own project, remembering to **not** click Discard Changes as you will lose your own.
 
 If you have a template repository, you can add this template as a remote, as discussed [here](https://stackoverflow.com/questions/56577184/github-pull-changes-from-a-template-repository).
 
-## Adding posts
+## Adding posts and notes
 
-This theme utilises [Content Collections](https://docs.astro.build/en/guides/content-collections/) to organise Markdown and/or MDX files, as well as type-checking frontmatter with a schema -> `src/content/config.ts`.
+This theme utilises [Content Collections](https://docs.astro.build/en/guides/content-collections/) to organise local Markdown and MDX files, as well as type-checking frontmatter with a schema -> `src/content/config.ts`.
 
-Adding a post is as simple as adding your .md(x) files to the `src/content/post` folder, the filename of which will be used as the slug/url. The posts included with this template are there as an example of how to structure your frontmatter. Additionally, the [Astro docs](https://docs.astro.build/en/guides/markdown-content/) has a detailed section on markdown pages.
+Adding a post/note is as simple as adding your .md(x) files to the `src/content/post` and/or `src/content/note` folder, the filename of which will be used as the slug/url. The posts included with this template are there as an example of how to structure your frontmatter. Additionally, the [Astro docs](https://docs.astro.build/en/guides/markdown-content/) has a detailed section on markdown pages.
 
-### Frontmatter
+### Post Frontmatter
 
 | Property (\* required) | Description                                                                                                                                                                                                                                                                                                  |
 | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | title \*               | Self explanatory. Used as the text link to the post, the h1 on the posts' page, and the pages title property. Has a max length of 60 chars, set in `src/content/config.ts`                                                                                                                                   |
 | description \*         | Similar to above, used as the seo description property. Has a min length of 50 and a max length of 160 chars, set in the post schema.                                                                                                                                                                        |
 | publishDate \*         | Again pretty simple. To change the date format/locale, currently **en-GB**, update the date option in `src/site.config.ts`. Note you can also pass additional options to the component `<FormattedDate>` if required.                                                                                        |
-| updatedDate            | This is an optional date representing when a post has been updated, in the same format as the publishDate. Note that by providing this field, the sorting function, found in `src/utils/post.ts`, `sortMDByDate` will order by this field rather than its published date.                                    |
+| updatedDate            | This is an optional date representing when a post has been updated, in the same format as the publishDate.                                                                                                                                                                                                   |
 | tags                   | Tags are optional with any created post. Any new tag(s) will be shown in `yourdomain.com/posts` & `yourdomain.com/tags`, and generate the page(s) `yourdomain.com/tags/[yourTag]`                                                                                                                            |
 | coverImage             | This is an optional object that will add a cover image to the top of a post. Include both a `src`: "_path-to-image_" and `alt`: "_image alt_". You can view an example in `src/content/post/cover-image.md`.                                                                                                 |
 | 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
+### Note Frontmatter
 
-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.
+| Property (\* required) | Description                                        |
+| ---------------------- | -------------------------------------------------- |
+| title \*               | string, max length 60 chars.                       |
+| description            | to be used for the head meta description property. |
+| publishDate \*         | ISO 8601 format with offsets allowed.              |
+
+### Frontmatter snippets
+
+Astro Cactus includes a helpful VSCode snippet which creates a frontmatter 'stub' for posts and note's, 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.
+This integration brings a static search feature for searching blog posts and notes. 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.
 
-Search results only includes blog posts. If you would like to include other/all your pages, remove/re-locate the attribute `data-pagefind-body` to the article tag found in `src/layouts/BlogPost.astro`.
+Search results only includes pages from posts and notes. If you would like to include other/all your pages, remove/re-locate the attribute `data-pagefind-body` to the article tag found in `src/layouts/BlogPost.astro` and `src/components/note/Note.astro`.
 
 It also allows you to filter posts by tags added in the frontmatter of blog posts. If you would rather remove this, remove the data attribute `data-pagefind-filter="tag"` from the link in `src/components/blog/Masthead.astro`.
 

astro.config.ts

@@ -6,18 +6,18 @@ import expressiveCode from "astro-expressive-code";
 import icon from "astro-icon";
 import robotsTxt from "astro-robots-txt";
 import webmanifest from "astro-webmanifest";
-import { defineConfig } from "astro/config";
+import { defineConfig, envField } from "astro/config";
 import { expressiveCodeOptions } from "./src/site.config";
 import { siteConfig } from "./src/site.config";
 
 // Remark plugins
 import remarkDirective from "remark-directive"; /* Handle ::: directives as nodes */
-import remarkUnwrapImages from "remark-unwrap-images";
 import { remarkAdmonitions } from "./src/plugins/remark-admonitions"; /* Add admonitions */
 import { remarkReadingTime } from "./src/plugins/remark-reading-time";
 
 // Rehype plugins
 import rehypeExternalLinks from "rehype-external-links";
+import rehypeUnwrapImages from "rehype-unwrap-images";
 
 // https://astro.build/config
 export default defineConfig({
@@ -84,8 +84,9 @@ export default defineConfig({
 					target: "_blank",
 				},
 			],
+			rehypeUnwrapImages,
 		],
-		remarkPlugins: [remarkUnwrapImages, remarkReadingTime, remarkDirective, remarkAdmonitions],
+		remarkPlugins: [remarkReadingTime, remarkDirective, remarkAdmonitions],
 		remarkRehype: {
 			footnoteLabelProperties: {
 				className: [""],
@@ -102,6 +103,13 @@ export default defineConfig({
 		},
 		plugins: [rawFonts([".ttf", ".woff"])],
 	},
+	env: {
+		schema: {
+			WEBMENTION_API_KEY: envField.string({ context: "server", access: "secret", optional: true }),
+			WEBMENTION_URL: envField.string({ context: "client", access: "public", optional: true }),
+			WEBMENTION_PINGBACK: envField.string({ context: "client", access: "public", optional: true }),
+		},
+	},
 });
 
 function rawFonts(ext: string[]) {

package.json

@@ -15,45 +15,45 @@
 		"check": "astro check"
 	},
 	"dependencies": {
-		"@astrojs/mdx": "3.1.7",
-		"@astrojs/rss": "4.0.7",
-		"@astrojs/sitemap": "3.2.0",
-		"@astrojs/tailwind": "5.1.1",
-		"astro": "4.15.12",
-		"astro-expressive-code": "^0.37.0",
-		"astro-icon": "^1.1.1",
+		"@astrojs/mdx": "4.0.1",
+		"@astrojs/rss": "4.0.10",
+		"@astrojs/sitemap": "3.2.1",
+		"@astrojs/tailwind": "5.1.3",
+		"astro": "5.0.3",
+		"astro-expressive-code": "^0.38.3",
+		"astro-icon": "^1.1.4",
 		"astro-robots-txt": "^1.0.0",
 		"astro-webmanifest": "^1.0.0",
 		"cssnano": "^7.0.6",
 		"hastscript": "^9.0.0",
 		"mdast-util-directive": "^3.0.0",
-		"mdast-util-to-markdown": "^2.1.0",
+		"mdast-util-to-markdown": "^2.1.2",
 		"mdast-util-to-string": "^4.0.0",
 		"rehype-external-links": "^3.0.0",
+		"rehype-unwrap-images": "^1.0.0",
 		"remark-directive": "^3.0.0",
-		"satori": "0.11.2",
+		"satori": "0.12.0",
 		"satori-html": "^0.3.2",
 		"sharp": "^0.33.5",
 		"unified": "^11.0.5",
 		"unist-util-visit": "^5.0.0"
 	},
 	"devDependencies": {
 		"@astrojs/check": "^0.9.4",
-		"@biomejs/biome": "^1.9.3",
-		"@iconify-json/mdi": "^1.2.0",
-		"@pagefind/default-ui": "^1.1.1",
+		"@biomejs/biome": "^1.9.4",
+		"@iconify-json/mdi": "^1.2.1",
+		"@pagefind/default-ui": "^1.2.0",
 		"@resvg/resvg-js": "^2.6.2",
 		"@tailwindcss/typography": "^0.5.15",
 		"@types/hast": "^3.0.4",
 		"@types/mdast": "^4.0.4",
 		"autoprefixer": "^10.4.20",
-		"pagefind": "^1.1.1",
-		"prettier": "^3.3.3",
+		"pagefind": "^1.2.0",
+		"prettier": "^3.4.2",
 		"prettier-plugin-astro": "0.14.1",
-		"prettier-plugin-tailwindcss": "^0.6.8",
+		"prettier-plugin-tailwindcss": "^0.6.9",
 		"reading-time": "^1.5.0",
-		"remark-unwrap-images": "^4.0.0",
-		"tailwindcss": "^3.4.13",
-		"typescript": "^5.6.2"
+		"tailwindcss": "^3.4.16",
+		"typescript": "^5.7.2"
 	}
 }