chrismwilliams/astro-theme-cactus

A simple Astro theme. Use it to create your blog or website.

Astro Cactus

Astro Cactus is a simple opinionated starter built with the Astro framework. Use it to create an easy-to-use blog or website.

Table Of Contents

1. Key Features
2. Demo
3. Quick start
4. Preview
5. Commands
6. Configure
7. Adding Posts
   • Frontmatter
   • Frontmatter Snippet
8. Pagefind search
9. Analytics
10. Deploy
11. Acknowledgment

Key Features

• Astro v4 Fast 🚀
• TailwindCSS Utility classes
• Accessible, semantic HTML markup
• Responsive & SEO-friendly
• Dark / Light mode, using Tailwind and CSS variables
• Astro Assets Integration for optimised images
• MD & MDX posts
• Satori for creating open graph png images
• Pagination
• Automatic RSS feed
• Webmentions
• Auto-generated sitemap
• Pagefind static search library integration
• Astro Icon svg icon component
• Expressive Code source code and syntax highlighter

Demo 💻

Check out the Demo, hosted on Netlify

Quick start

Create a new repo from this template.

# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus

# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactus

Preview

Commands

Replace pnpm with your choice of npm / yarn

Command	Action
pnpm install	Installs dependencies
pnpm dev	Starts local dev server at localhost:3000
pnpm build	Build your production site to ./dist/
pnpm postbuild	Pagefind script to build the static search of your blog posts
pnpm preview	Preview your build locally, before deploying
pnpm sync	Generate types based on your config in src/content/config.ts

Configure

• Edit the config file src/site.config.ts for basic site meta data
  • Read this post 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.
  • You can also modify the theme(s) for markdown code blocks generated by Expressive Code. 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.
• Edit social links in src/components/SocialList.astro to add/replace your media profile. Icons can be found @ icones.js.org, per Astro Icon's instructions.
• Create / edit posts for your blog within src/content/post/ with .md/mdx file(s). See below 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 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 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
• 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.

Adding posts

This theme utilises Content Collections to organise Markdown and/or 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 has a detailed section on markdown pages.

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.
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

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.

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.

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/Hero.astro.

If you would rather not include this integration, simply remove the component src/components/Search.astro, and uninstall both @pagefind/default-ui & pagefind from package.json. You will also need to remove the postbuild script from here as well.

You can reduce the initial css payload of your css, as demonstrated here, by lazy loading the web components styles.

Analytics

You may want to track the number of visitors you receive to your blog/website in order to understand trends and popular posts/pages you've created. There are a number of providers out there one could use, including web hosts such as vercel, netlify, and cloudflare.

This theme/template doesn't include a specific solution due to there being a number of use cases and/or options which some people may or may not use.

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.

Deploy

Astro docs has a great section and breakdown of how to deploy your own Astro site on various platforms and their idiosyncrasies.

By default the site will be built (see Commands section above) to a /dist directory.

Acknowledgment

This theme was inspired by Hexo Theme Cactus

License

MIT

astro-theme-cactus's Issues

Feature Request: Netlify Image CDN using Astro Adapter

https://www.netlify.com/blog/astro-netlify-adapter/

Is this something that would be easy to implement?
I tried to do it but could not get it to work.
But for those who code it might be easy. Any thoughts?
Paul

No image on Social Image post

Here is how the Example Social Image post looks like. Shouldn't there be an image?

Logo change

First of all thank you for the awesome template!

This may end up to be more of a general question, rather than an issue to this repository. Is there preferred way to change the logo on the website? I currently have a single svg image, but there are many different logo image placed around the project (afaik 512x512.png, 912x192.png, favicon.ico, icon.svg, apple-touch-icon.png and the one inline in Base.astro). It feels that this procedure can be automated so as a frontend development noob I was wondering if there are any automations or best practices when it comes to changing the logo.

auto hide "table of contents" when didn't have heading

Feature Request: Back button on the post details page

Back button on the post details page

Errors during deploy

I get the following errors during a deploy to Vercel.

error Cannot read properties of undefined (reading 'forEach')

13:20:33.562 | at file:///vercel/path0/dist/entry.mjs?time=1657387232641:1327:16
13:20:33.562 | at Array.reduce (<anonymous>)
13:20:33.562 | at getAllTagsFromPosts (file:///vercel/path0/dist/entry.mjs?time=1657387232641:1324:18)
13:20:33.562 | at file:///vercel/path0/dist/entry.mjs?time=1657387232641:4001:19
13:20:33.562 | at async renderPage (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/runtime/server/index.js:450:30)
13:20:33.562 | at async render (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/render/core.js:108:12)
13:20:33.562 | at async generatePath (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/generate.js:158:22)
13:20:33.562 | at async generatePage (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/generate.js:92:5)
13:20:33.562 | at async generatePages (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/generate.js:61:5)
13:20:33.562 | at async staticBuild (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/static-build.js:70:7)
13:20:33.596 | ELIFECYCLE  Command failed with exit code 1.
13:20:33.621 | Error! Command "pnpm run build" exited with 1
13:20:33.693 | Error: Command "vercel build" exited with 1

I don't know how to access file:///vercel/path0/dist/entry.mjs to check on things. This is a fresh install, all I did was copy & paste a few posts to check things.
Any ideas?

Thanks
Paul

Tiny white/black bar at the very top

When in light (dark) mode, there is a thin black (white) bar at the very top when fully scrolled up the page.

It is visible in both desktop and mobile version of the site.

No Issue just a thought

Loving your Astro theme. Have you considered sending it to some sites such as https://jamstackthemes.dev, you would be the first Astro theme there, or even better submitting it to https://astro.build/themes/ ?

I understand you might not have time to maintain Cactus full time, but I love the site and feel others will too.
Anyway thanks for the hard work, looking forward to whatever you add to the theme.
Sorry for posting this as an issue, but I could not find your contact info.
Paul

Hamburger menu not working on post page

The hamburger menu is not working on the blog post page. You can click it but nothing happens. When viewed using developer tools nothing is showing at all. No error, no network request, nothing.

Also Writings -> Blog, in the footer was not changed when all Writings were all changed to Blog. Just that one was missed.

Random white line appearing above page

https://milo.solar/

Reminder Request: Add Expressive code

Add expressive code to template

Feature Request: support static search

I am just implementing a static search feature using "page-find".
May I send a PR?

how to change title from "Astro Cactus"?

sorry dumb question

Feature request: search

example: https://github.com/shishkin/astro-pagefind

Merged declaration "post" cannot include a default export declaration

The error happens in [posts].astro

const { post } = Astro.props;
const { Content } = await post.render();

analytic

https://astro.build/integrations/analytics/

Fix the email link in SocialList.astro

RFC: Remove the frontmatter description from blog posts

Summary

Currently, the frontmatter description property is being used in 3 places.

1. The SEO meta description
2. Displayed at the top of a single blog post, just below the title
3. A summary when linking to a post

This change would be removing no.2.

Proposal

It doesn't seem particularly helpful to include, what is essentially a meta description, within the body of a post. By removing it, it would allow users to add content in any order they wish, and to provide a description better fitting for SEO purposes.

Request

Looking for feedback and thought's on this as it would/could effect how you write both the frontmatter and body of every post going forward. I'm also contemplating removing no.3, however, this would require pulling content from the start of the post's body, which may not be to everyone's liking.

Upgrade Astro Package to v4

Feature Request: blog last updated time

import astro-icon (but not mdi:)

i wrote social links in https://github.com/chrismwilliams/astro-theme-cactus/blob/64ae486e7e63d74d3c5cdc5c8d0ccbc23aecc77d/src/components/SocialList.astro.

	{
		name: "mdi:twitter",
		friendlyName: "twitter",
		link: "my twitter link",
	},
//it works
	{
		name: "skill-icons:misskey-dark",
		friendlyName: "misskey",
		link: "my misskey link",
	},
//icon is blank, but link works.

should i add config about astro-icon?

logs:
Error: Not Found: pack "skill-icons" at request (C:/Users/hiba/astro_blog/node_modules/astro-icon/lib/resolver.ts:17:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async get (C:/Users/hiba/astro_blog/node_modules/astro-icon/lib/resolver.ts:33:10) at async Module.load [as default] (C:/Users/hiba/astro_blog/node_modules/astro-icon/lib/utils.ts:153:22) at async eval (C:/Users/hiba/astro_blog/node_modules/astro-icon/lib/Icon.astro:22:17) at async AstroComponentInstance.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/instance.js:37:7) at async Object.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/component.js:335:7) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async RenderTemplateResult.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:45:9) at async renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:28:7) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async RenderTemplateResult.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:45:9) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async AstroComponentInstance.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/instance.js:46:7) at async Object.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/component.js:335:7) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async RenderTemplateResult.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:45:9) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/slot.js:29:7) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async RenderTemplateResult.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:45:9) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async AstroComponentInstance.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/instance.js:46:7) at async Object.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/component.js:335:7) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async RenderTemplateResult.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:45:9) at async file:///C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render.js:70:11

Question: where are the icons from?

Hi, thanks for the great theme. I wanted to change some of the icons - for example I don't use twitter but mastodon - and wanted to find icons in the same style. Where are they from?

MDX Integration breaks Netlify Build

Hey @chrismwilliams,

Hope you are doing great, I just fixed failed netlify build pipelines, After debugging build logs I found this

2:53:16 AM:  ERR_PNPM_PEER_DEP_ISSUES  Unmet peer dependencies
2:53:16 AM: .
2:53:16 AM: └─┬ @astrojs/mdx 0.14.0
2:53:16 AM:   └─┬ @mdx-js/rollup 2.2.1
2:53:16 AM:     ├── ✕ missing peer rollup@>=2
2:53:16 AM:     └─┬ @rollup/pluginutils 5.0.2
2:53:16 AM:       └── ✕ missing peer rollup@^1.20.0||^2.0.0||^3.0.0
2:53:16 AM: Peer dependencies that should be installed:
2:53:16 AM:   rollup@">=2.0.0 <3.0.0 || >=3.0.0 <4.0.0"
2:53:16 AM: hint: If you want peer dependencies to be automatically installed, add "auto-install-peers=true" to an .npmrc file at the root of your project.
2:53:16 AM: hint: If you don't want pnpm to fail on peer dependency issues, add "strict-peer-dependencies=false" to an .npmrc file at the root of your project.
2:53:16 AM: ​
2:53:16 AM:   "build.command" failed                                        

After removing MDX from package.json (because I don't work with MDX) the build process successes

What do you think?

RSS Link

Hi, I just tried the RSS. The link seems to be not functioning properly.

Upon investigating the issue, I discovered that the current RSS link is: example.com/hello-world
However, it appears that the correct link should be: example.com/posts/hello-world

the code link: post.slug, should the code looks something like this link: `/posts/${post.slug}/`, ? in rss.xml.ts

Hot reloading is not working

Thanks for sharing the template but when I tried to use it, I could not get hot reloading to work. I am not sure if this is related to this issue withastro/astro#4419

Update to [email protected]

• Blog pages may need to change to .mdx, .md files are now under a legacy flag

Feature Request: support i18n

i18n is a necessary feature when you want to write blogs for multi-language users. There are some i18n packages such as astro-i18n and astro-i18next. Both of them can not be used directly.

So I hope this theme can support i18n directly. From my view, nextra i18n is a nice paradigm as it inserts language between the file name and suffix.

Layout issue with scroll bar.

There is a layout issue. Pages with a scroll bar don't have the same width as pages without a scroll bar.
As an example you check: without scroll bar and with scroll bar.
I solved this issue by adding overflow-y-scroll in the body.

Is there a way to update the template to get new functionality?

Hey just seen the added search and new post type with cover image.

Was wondering if there is a way to update the template without causing breaking changes given I customized it a little bit.

Mixed content error logs in console

For each of my posts, I am getting the following error in console.

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure resource '<URL>'. This request has been blocked; the content must be served over HTTPS.

I made sure the astro.config.ts file reflects my website thusly with https. Using example.com as a placeholder:

export default defineConfig({
	site: "https://example.com/",
//...more code...

What else am I missing? This is the only area I recall specifying my domain. Or is it something else entirely?

I also notice that the icon that switches the theme does not function on a post page either. May be in relation to this error?

None of these issues reflect at all during dev mode.

Favicon and icon problems

Hi, today I tried to create a site with this theme but I have some problems with the favicon and the icon on the header.
If I replace the favicon and the icons it will be always rendered with the "stock" image.

Where am I doing wrong?

Tag problems

Hi!
I have been using it via "Use this template" since the weekend.
So I think it is v1.5.2.

1. Posts do not appear on the "Tag" page.

condition

When upper-case letters are mixed in tags of front-matter.

cause

I believe the problem lies in the string comparison.

The part that unifies duplicate tags into lowercase.

astro-theme-cactus/src/utils/post.ts

Line 12 in 58caa51

post.data.tags.map((tag) => uniqueTags.add(tag.toLowerCase()));

The part that compares with the front-matter tags.

astro-theme-cactus/src/pages/tags/[tag]/[...page].astro

Line 16 in 58caa51

const filterPosts = allPostsByDate.filter((post) => post.data.tags?.includes(tag));

2. Links on the "All Tag" page are not working.

condition

When upper-case letters are mixed in tags of front-matter.

cause

The URL points to a page in uppercase, but the actual page is in lowercase.

The part that generates tags.

astro-theme-cactus/src/utils/post.ts

Line 23 in 58caa51

runningTags[tag] = (runningTags[tag] || 0) + 1;

The part that uses them.

astro-theme-cactus/src/pages/tags/index.astro

Line 23 in 58caa51

href={`/tags/${tag}`}

Thank you.

Fix the table of contents structure

Mobile View Inconsistent

Hey there! I've adapted this theme for my personal website and blog and I absolutely love it; thank you for sharing it! :)

I've put a few posts up on prod with no problem, but I'm working on adapting some Medium posts and importing them to my own site. I've simply copied and pasted the text, but for some reason it keeps breaking the mobile view. I even make a separate file with large paragraphs to see if I can reproduce it, but for some reason its only these posts. Is there perhaps a word limit that I'm breaking which would cause this?

Link to a live preview, just use dev console to see mobile view or visit on your phone:
https://stevedsimkins-dev-astro-8wx39j648-stevedsimkins.vercel.app/posts/3d-solana-nfts

Link to the repo at current branch:
https://github.com/stevedsimkins/stevedsimkins-dev-astro/tree/import-medium-posts

Broken post

Working post

Generate robots.txt from config

Instead of hardcoding robots.txt, can we use the astro-robots-txt integration to generate it from config? It'll be less error-prone if you want to customize it.

I'm happy to submit a PR if this is something you'd like.

Generate RSS feed

Can we add support for RSS feeds using the @astrojs/rss integration?

I'm happy to submit a PR if this is something you'd like.

table don't works

I was working to make [RTL] version of this theme

https://github.com/X7md/astro-theme-cactus-rtl

but I notice issue...

and as temporary workaround I use this:

sh npm i remark-gfm

//astro.config.ts
import remarkGfm from "remark-gfm"
integrations: [
		mdx({
			// add this
			remarkPlugins:[[remarkGfm, {}]]
		}),
		tailwind({
			config: { applyBaseStyles: false },
		}),
		image(),
		sitemap(),
	],

Bug: theme toggle breaks with view transitions

The light theme activates whenever I go to another page, and the svg on the button disappears.

CSS Grid for blog posts: main column expands if content is too wide

If some of the content in the main content column of a blog post is too wide, the main area (the <article>) expands and squashes the content navigation (the <aside>). That's because it is define as a grid with 3fr 1fr, which gets treated as minmax(auto, 3fr) 1fr. That should be changed to minmax(0, 3fr) 1fr. There are two ways i know of doing that with Tailwind, either grid-cols-[minmax(0,3fr)_1fr] or changing it to a 4 cols layout. I will submit a PR with the latter approach

Not an issue but a question

How do you change the font? I have tried examples from https://tailwindcss.com/docs/font-family, but nothing seems to work. I made sure the pages were not in the browser's cache. There has to be something I am missing.
Thanks
Paul

Deploying error

v2.5.1 conflicts with github distribution? when i create the deploy.yml file the action fails

Thank you

Feature Request: Comments from Mastodon

Hello! First off, I love this theme and am very grateful that you've shared it.

I've seen other people add Mastodon-powered comments to their blogs (any blogs, not necessarily Astro) and I think it's a great idea. I would try to do it myself, as I've already forked and customised the project a bit, but I am Terrible At Design and don't really know what I'm doing.

This person seems to have made it work: https://sam.pikesley.org/blog/2023/03/06/mastodon-powered-comments-in-astro/

From your comments on the search feature request, I understand that you might not want to include a Mastodon-specific comments component, but I'm curious to hear your thoughts either way.

Edit: this person has gone further and combined Mastodon comments and webmentions! https://kld.dev/adding-webmentions

"Table of contents" styling different heading

Ideas:

[TOC]
# heading 1
....## heading 2
........### heading 3

Feature Request: Draft blog's without live publish

Adds the ability for drafts, specified in the frontmatter

Error while building

I'm getting an error while building the site

if i run the dev environment with
npm run dev
everything works normally

if i build the website with
npm run build
i get this

λ src/pages/og-image/[slug].png.ts
 error   Unsupported OpenType signature <!DO
  File:
    /tmp/astro-theme-cactus/node_modules/@shuding/opentype.js/dist/opentype.js:11450:18
  Code:
    11449 |        } else {
    > 11450 |            throw new Error('Unsupported OpenType signature ' + signature);
            |                  ^
      11451 |        }
      11453 |        var cffTableEntry;

The code is freshly cloned from github with NO modifications

Bug : Long Titles in Blog Page

Hey, @chrismwilliams I hope you are doing fine, I found a small problem specifically with long post titles on the blog page, the text gets hidden after it gets wrapped up, I think the problem is the content box not dynamically changing its height, but sadly I could not submit a PR because I am a noob when it comes to Tailwind.

Feature Request: Footnotes

Discussed in #108

^{Originally posted by fabriziodevincenzi August 26, 2023}
Hi @chrismwilliams , I really appreciate your work and this specific theme. One feature I really like is the table of contents on the right sidebar, a very useful option for in-depth content. Content for which it would also be nice to have a footnote option. I paste here a link to three examples of how they could be implemented https://codepen.io/cadars/pen/dyXaGdy

I hope it's a welcome idea. Best wishes.
Fabrizio

SSL Error for og_image (and maybe something else?)

I wanted to try the Satori integration for creating open graph png images, i created a post in various social network with a link to the demo site but i got no og image.

This is the demo page i used https://astro-theme-cactus.netlify.app/posts/markdown-elements/

I watched the source for the og link and found the correct tag with the image
<meta property="og:image" content="https://www.astro-theme-cactus.netlify.app/og-image/markdown-elements.png">

I opened the linked image
https://www.astro-theme-cactus.netlify.app/og-image/markdown-elements.png
and got an SSL error

error from firefox: SSL_ERROR_BAD_CERT_DOMAIN
error from chrome: NET::ERR_CERT_COMMON_NAME_INVALID

I think there is a misconfig in the demo site or in the theme itself

Correct Command in Quick Start Section

Hi,

I noticed the Quick Start section suggests npx create, but I ran into a snag. Is the correct command perhaps npm create?

Thank you.

Visual hierarchy in post header