Update: Tailwind v4

README.md

@@ -5,7 +5,7 @@
   Astro Cactus
 </h1>
 
-Astro Cactus is a simple opinionated starter built with the Astro framework. Use it to create an easy-to-use blog or website.
+Astro Cactus is a simple opinionated starter built with [Astro](https://astro.build). Use it to create an easy-to-use blog or website.
 
 ## Table Of Contents
 
@@ -27,14 +27,14 @@ Astro Cactus is a simple opinionated starter built with the Astro framework. Use
 ## Key Features
 
 - Astro v5 Fast 🚀
-- TailwindCSS Utility classes
+- Tailwind v4
 - Accessible, semantic HTML markup
 - Responsive & SEO-friendly
-- Dark / Light mode, using Tailwind and CSS variables
+- Dark & Light mode
 - 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
-- [Automatic RSS feed](https://docs.astro.build/en/guides/rss)
+- [Automatic RSS feeds](https://docs.astro.build/en/guides/rss)
 - [Webmentions](https://webmention.io/)
 - Auto-generated:
   - [sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)
@@ -83,23 +83,23 @@ Replace pnpm with your choice of npm / yarn
 
 ## Configure
 
-- Edit the config file `src/site.config.ts` for basic site meta data
+- Edit the template's config file `src/site.config.ts`
+  - **Important**: set the url property with your own domain.
+  - Modify the settings for markdown code blocks, generated by [Expressive Code](https://expressive-code.com). Astro Cactus has both a dark (dracula) and light (github-light) theme. You can find more options [here](https://expressive-code.com/guides/themes/#available-themes).
 - 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)
 - Replace & update files within the `/public` folder:
   - icon.svg - used as the source to create favicons & manifest icons
   - social-card.png - used as the default og:image
-- 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).
+- Modify file `src/styles/global.css` with your own light and dark styles, and customise [Tailwind's theme settings](https://tailwindcss.com/docs/theme#customizing-your-theme).
 - 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 & 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 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).
+  - Fonts: This theme sets the body element to the font family `font-mono`, in `src/layouts/Base.astro` on the `<body>`. 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
 
@@ -109,7 +109,7 @@ If you have a template repository, you can add this template as a remote, as dis
 
 ## Adding posts and notes
 
-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`.
+This theme uses [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/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.
 

astro.config.ts

@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
-import tailwind from "@astrojs/tailwind";
+import tailwind from "@tailwindcss/vite";
 import expressiveCode from "astro-expressive-code";
 import icon from "astro-icon";
 import robotsTxt from "astro-robots-txt";
@@ -16,34 +16,27 @@ import { remarkAdmonitions } from "./src/plugins/remark-admonitions"; /* Add adm
 import { remarkReadingTime } from "./src/plugins/remark-reading-time";
 
 // Rehype plugins
+import { rehypeHeadingIds } from "@astrojs/markdown-remark";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeExternalLinks from "rehype-external-links";
 import rehypeUnwrapImages from "rehype-unwrap-images";
 
 // https://astro.build/config
 export default defineConfig({
+	site: siteConfig.url,
 	image: {
 		domains: ["webmention.io"],
 	},
 	integrations: [
 		expressiveCode(expressiveCodeOptions),
 		icon(),
-		tailwind({
-			applyBaseStyles: false,
-			nesting: true,
-		}),
 		sitemap(),
 		mdx(),
 		robotsTxt(),
 		webmanifest({
 			// See: https://github.com/alextim/astro-lib/blob/main/packages/astro-webmanifest/README.md
-			/**
-			 * required
-			 **/
 			name: siteConfig.title,
-			/**
-			 * optional
-			 **/
-			// short_name: "Astro_Cactus",
+			short_name: "Astro_Cactus", // optional
 			description: siteConfig.description,
 			lang: siteConfig.lang,
 			icon: "public/icon.svg", // the source for generating favicon & icons
@@ -77,6 +70,8 @@ export default defineConfig({
 	],
 	markdown: {
 		rehypePlugins: [
+			rehypeHeadingIds,
+			[rehypeAutolinkHeadings, { behavior: "wrap", properties: { className: ["not-prose"] } }],
 			[
 				rehypeExternalLinks,
 				{
@@ -95,13 +90,11 @@ export default defineConfig({
 	},
 	// https://docs.astro.build/en/guides/prefetch/
 	prefetch: true,
-	// ! Please remember to replace the following site property with your own domain
-	site: "https://astro-cactus.chriswilliams.dev/",
 	vite: {
 		optimizeDeps: {
 			exclude: ["@resvg/resvg-js"],
 		},
-		plugins: [rawFonts([".ttf", ".woff"])],
+		plugins: [tailwind(), rawFonts([".ttf", ".woff"])],
 	},
 	env: {
 		schema: {

package.json

@@ -15,24 +15,26 @@
 		"check": "astro check"
 	},
 	"dependencies": {
-		"@astrojs/mdx": "4.0.1",
-		"@astrojs/rss": "4.0.10",
+		"@astrojs/markdown-remark": "^6.0.2",
+		"@astrojs/mdx": "4.0.5",
+		"@astrojs/rss": "4.0.11",
 		"@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",
+		"@tailwindcss/vite": "4.0.0-beta.8",
+		"astro": "5.1.5",
+		"astro-expressive-code": "^0.39.0",
+		"astro-icon": "^1.1.5",
 		"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.2",
 		"mdast-util-to-string": "^4.0.0",
+		"rehype-autolink-headings": "^7.1.0",
 		"rehype-external-links": "^3.0.0",
 		"rehype-unwrap-images": "^1.0.0",
 		"remark-directive": "^3.0.0",
-		"satori": "0.12.0",
+		"satori": "0.12.1",
 		"satori-html": "^0.3.2",
 		"sharp": "^0.33.5",
 		"unified": "^11.0.5",
@@ -41,19 +43,19 @@
 	"devDependencies": {
 		"@astrojs/check": "^0.9.4",
 		"@biomejs/biome": "^1.9.4",
-		"@iconify-json/mdi": "^1.2.1",
-		"@pagefind/default-ui": "^1.2.0",
+		"@iconify-json/mdi": "^1.2.2",
+		"@pagefind/default-ui": "^1.3.0",
 		"@resvg/resvg-js": "^2.6.2",
-		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/typography": "^0.5.16",
 		"@types/hast": "^3.0.4",
 		"@types/mdast": "^4.0.4",
 		"autoprefixer": "^10.4.20",
-		"pagefind": "^1.2.0",
+		"pagefind": "^1.3.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-astro": "0.14.1",
-		"prettier-plugin-tailwindcss": "^0.6.9",
+		"prettier-plugin-tailwindcss": "^0.6.11",
 		"reading-time": "^1.5.0",
-		"tailwindcss": "^3.4.16",
-		"typescript": "^5.7.2"
+		"tailwindcss": "4.0.0",
+		"typescript": "^5.7.3"
 	}
 }