add rehype plugin for external links

.gitignore

@@ -1,7 +1,6 @@
 # build output
 dist/
 .output/
-.data
 
 # dependencies
 node_modules/

README.md

@@ -25,7 +25,7 @@ Astro Cactus is a simple opinionated starter built with the Astro framework. Use
 
 ## Key Features
 
-- Astro v3.0 Fast 🚀
+- Astro v3 Fast 🚀
 - TailwindCSS Utility classes
 - Accessible, semantic HTML markup
 - Responsive & SEO-friendly
@@ -49,6 +49,14 @@ Check out the [Demo](https://astro-cactus.chriswilliams.dev/), hosted on Netlify
 
 [Create a new repo](https://github.com/chrismwilliams/astro-theme-cactus/generate) from this template.
 
+```bash
+# npm 7+
+npx create astro@latest -- --template chrismwilliams/astro-theme-cactus
+
+# pnpm
+pnpm dlx create-astro --template chrismwilliams/astro-theme-cactus
+```
+
 [![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/chrismwilliams/astro-theme-cactus) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fchrismwilliams%2Fastro-theme-cactus&project-name=astro-theme-cactus)
 
 ## Preview
@@ -150,9 +158,7 @@ import { GoogleAnalytics } from "astro-google-analytics";
 
 ## View Transitions
 
-This theme implements optional support for view transitions. Visit `src/site.config.ts` and set `includeViewTransitions` to `true` to include it. By setting it to true, a fallback of [none](https://docs.astro.build/en/guides/view-transitions/#fallback-control) is set for unsupported browsers, visit Astro's [docs](https://docs.astro.build/en/guides/view-transitions/) to learn more, view the implementation in `src/layouts/Base.astro`.
-
-Note: If you set a [named](https://docs.astro.build/en/guides/view-transitions/#naming-a-transition) transition, you may notice an issue with the theme switching button icon disappearing, this is due to an Astro bug with maintaining persistence. For a temporary solution this please see [this](https://github.com/chrismwilliams/astro-theme-cactus/pull/139/files) request.
+This theme implements optional support for view transitions. Visit `src/site.config.ts` and set `includeViewTransitions` to `true` to include it. View the implementation in `src/layouts/Base.astro`.
 
 ## Deploy
 

astro.config.ts

@@ -5,6 +5,7 @@ import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
 import prefetch from "@astrojs/prefetch";
 import remarkUnwrapImages from "remark-unwrap-images";
+import rehypeExternalLinks from "rehype-external-links";
 import { remarkReadingTime } from "./src/utils/remark-reading-time";
 
 // https://astro.build/config
@@ -13,6 +14,9 @@ export default defineConfig({
 	site: "https://astro-cactus.chriswilliams.dev/",
 	markdown: {
 		remarkPlugins: [remarkUnwrapImages, remarkReadingTime],
+		rehypePlugins: [
+			[rehypeExternalLinks, { target: "_blank", rel: ["nofollow, noopener, noreferrer"] }],
+		],
 		remarkRehype: { footnoteLabelProperties: { className: [""] } },
 		shikiConfig: {
 			theme: "dracula",

package.json

@@ -19,6 +19,7 @@
 		"@astrojs/tailwind": "^5.0.1",
 		"astro": "3.2.3",
 		"astro-icon": "^0.8.1",
+		"rehype-external-links": "^3.0.0",
 		"satori": "0.10.8",
 		"satori-html": "^0.3.2",
 		"sharp": "^0.32.6"

src/components/layout/Header.astro

@@ -33,11 +33,7 @@ const url = new URL(Astro.request.url);
 	customElements.define("mobile-button", MobileNavBtn);
 </script>
 
-<header
-	id="main-header"
-	class="group relative mb-28 flex items-center sm:ps-[4.5rem]"
-	transition:animate="none"
->
+<header id="main-header" class="group relative mb-28 flex items-center sm:ps-[4.5rem]">
 	<div class="flex sm:flex-col">
 		<a
 			href="/"

src/content/post/markdown-elements/index.md

@@ -99,7 +99,7 @@ Syntax highlighting
 
 ```js
 var foo = function (bar) {
- return bar++;
+	return bar++;
 };
 
 console.log(foo(5));

src/content/post/webmentions/index.md

@@ -13,7 +13,7 @@ tags: ["webmentions", "astro", "social"]
 4. Create a `.env` file, or rename the included `.example.env`, and add the key `WEBMENTION_API_KEY` and set the api key as the value.
 5. Go to [brid.gy](https://brid.gy/) and sign-in to each social account[s] you wish to link.
 6. Publish and build your website, remember to add the api key, and it should now be ready to receive webmentions!
-7. That's it, I just wanted to finish on a cool number.
+7. That's it, maybe give this post a like!
 
 ## What are webmentions
 

src/layouts/Base.astro

@@ -23,11 +23,11 @@ const {
 		<BaseHead title={title} description={description} ogImage={ogImage} articleDate={articleDate} />
 		{
 			/* 
-			Fallback set to none in non-supporting browsers -> https://docs.astro.build/en/guides/view-transitions/#fallback-control
+			Set a fallback set -> https://docs.astro.build/en/guides/view-transitions/#fallback-control
 			This is set to false by default in src/site.config.ts 
 			*/
 		}
-		{siteConfig.includeViewTransitions && <ViewTransitions fallback="none" />}
+		{siteConfig.includeViewTransitions && <ViewTransitions />}
 	</head>
 	<body>
 		<ThemeProvider />

src/pages/index.astro

@@ -58,7 +58,7 @@ const cactusTech: Array<{ title: string; desc: string; href: string }> = [
 		<p class="mb-4">
 			Hi, I’m a theme for Astro, an example of how you can use this starter to create a personal
 			blog. If you want to know more about how you can customise me, add more posts, and make it
-			your own, click on one the github icon link below which will take you to my repo.
+			your own, click on the github icon link below and it will take you to my repo.
 		</p>
 		<SocialList />
 	</section>