{"id":16962498,"url":"https://github.com/threeal/blog","last_synced_at":"2025-04-05T15:43:25.053Z","repository":{"id":217246503,"uuid":"743329743","full_name":"threeal/blog","owner":"threeal","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-22T21:35:33.000Z","size":2139,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-23T13:34:58.789Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/threeal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-15T01:40:51.000Z","updated_at":"2024-10-22T05:36:05.000Z","dependencies_parsed_at":"2024-10-25T18:54:39.213Z","dependency_job_id":null,"html_url":"https://github.com/threeal/blog","commit_stats":null,"previous_names":["threeal/blog"],"tags_count":1,"template":false,"template_full_name":"chrismwilliams/astro-theme-cactus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threeal%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threeal%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threeal%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threeal%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/threeal","download_url":"https://codeload.github.com/threeal/blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361598,"owners_count":20926642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T23:06:56.141Z","updated_at":"2025-04-05T15:43:25.024Z","avatar_url":"https://github.com/threeal.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"Astro Cactus logo\" src=\"https://github.com/chrismwilliams/astro-theme-cactus/assets/12715988/85aa0d3c-ef6a-44e2-954d-ef035b4f4315\" width=\"70\" /\u003e\n\u003c/div\u003e\n\u003ch1 align=\"center\"\u003e\n  Astro Cactus\n\u003c/h1\u003e\n\nAstro Cactus is a simple opinionated starter built with the Astro framework. Use it to create an easy-to-use blog or website.\n\n## Table Of Contents\n\n1. [Key Features](#key-features)\n2. [Demo](#demo-💻)\n3. [Quick start](#quick-start)\n4. [Preview](#preview)\n5. [Commands](#commands)\n6. [Configure](#configure)\n7. [Adding Posts](#adding-posts)\n   - [Frontmatter](#frontmatter)\n8. [Pagefind search](#pagefind-search)\n9. [Analytics](#analytics)\n10. [Deploy](#deploy)\n11. [Acknowledgment](#acknowledgment)\n\n## Key Features\n\n- Astro v4 Fast 🚀\n- TailwindCSS Utility classes\n- Accessible, semantic HTML markup\n- Responsive \u0026 SEO-friendly\n- Dark / Light mode, using Tailwind and CSS variables\n- [Astro Assets Integration](https://docs.astro.build/en/guides/assets/) for optimised images\n- MD \u0026 [MDX](https://docs.astro.build/en/guides/markdown-content/#mdx-only-features) posts\n- [Satori](https://github.com/vercel/satori) for creating open graph png images\n- Pagination\n- [Automatic RSS feed](https://docs.astro.build/en/guides/rss)\n- [Webmentions](https://webmention.io/)\n- Shiki code syntax styling\n- Auto-generated [sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)\n- [Pagefind](https://pagefind.app/) static search library integration\n- [Astro Icon](https://github.com/natemoo-re/astro-icon) svg icon component\n\n## Demo 💻\n\nCheck out the [Demo](https://astro-cactus.chriswilliams.dev/), hosted on Netlify\n\n## Quick start\n\n[Create a new repo](https://github.com/chrismwilliams/astro-theme-cactus/generate) from this template.\n\n```bash\n# npm 7+\nnpm create astro@latest -- --template chrismwilliams/astro-theme-cactus\n\n# pnpm\npnpm dlx create-astro --template chrismwilliams/astro-theme-cactus\n```\n\n[![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\u0026project-name=astro-theme-cactus)\n\n## Preview\n\n![Astro Theme Cactus in a light theme mode](https://github.com/chrismwilliams/astro-theme-cactus/assets/12715988/84c89d42-4525-4674-b10c-6d6ebdc06382)\n\n![Astro Theme Cactus in a dark theme mode](https://github.com/chrismwilliams/astro-theme-cactus/assets/12715988/e0e575e2-445f-4c2d-a812-b5b53d2d9031)\n\n## Commands\n\nReplace pnpm with your choice of npm / yarn\n\n| Command          | Action                                                         |\n| :--------------- | :------------------------------------------------------------- |\n| `pnpm install`   | Installs dependencies                                          |\n| `pnpm dev`       | Starts local dev server at `localhost:3000`                    |\n| `pnpm build`     | Build your production site to `./dist/`                        |\n| `pnpm postbuild` | Pagefind script to build the static search of your blog posts  |\n| `pnpm preview`   | Preview your build locally, before deploying                   |\n| `pnpm sync`      | Generate types based on your config in `src/content/config.ts` |\n\n## Configure\n\n- Edit the config file `src/site.config.ts` for basic site meta data\n  - Read [this post](http://astro-cactus.chriswilliams.dev/posts/webmentions/) for adding webmentions to your site, otherwise set `siteConfig.webmentions.link` to empty value.\n- Update file `astro.config.ts` site property with your own domain\n- Replace \u0026 update files within the `/public` folder:\n  - favicon.ico \u0026 other social icons\n  - robots.txt - update the Sitemap url to your own domain\n  - manifest.webmanifest\n- Modify file `src/styles/global.css` with your own light and dark styles\n- 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/)\n- Create / edit posts for your blog within `src/content/post/` with .md/mdx file(s). See [below](#adding-posts) for more details.\n- OG Image:\n  - 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.\n  - 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`.\n  - 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)\n- Optional:\n  - 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).\n\n## Adding posts\n\nThis 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 -\u003e `src/content/config.ts`.\n\nAdding 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.\n\n### Frontmatter\n\n| Property (\\* required) | Description                                                                                                                                                                                                                                                                                                  |\n| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| 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`                                                                                                                                   |\n| 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.                                                                                                                                                                        |\n| 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 `\u003cFormattedDate\u003e` if required.                                                                                        |\n| 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.                                    |\n| tags                   | Tags are optional with any created post. Any new tag(s) will be shown in `yourdomain.com/posts` \u0026 `yourdomain.com/tags`, and generate the page(s) `yourdomain.com/tags/[yourTag]`                                                                                                                            |\n| 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`.                                                                                                 |\n| 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.            |\n| 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` |\n\n## Pagefind search\n\nThis 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 \u0026\u0026 postbuild.\n\nSearch 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`.\n\nIt 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`.\n\nIf you would rather not include this integration, simply remove the component `src/components/Search.astro`, and uninstall both `@pagefind/default-ui` \u0026 `pagefind` from package.json. You will also need to remove the postbuild script from here as well.\n\nYou can reduce the initial css payload of your css, as demonstrated [here](https://github.com/chrismwilliams/astro-theme-cactus/pull/145#issue-1943779868), by lazy loading the web components styles.\n\n## Analytics\n\nYou 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](https://vercel.com/analytics), [netlify](https://www.netlify.com/products/analytics/), and [cloudflare](https://www.cloudflare.com/web-analytics/).\n\nThis 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.\n\nYou 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`.\n\nAnother 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)\n\n```bash\npnpm install astro-google-analytics\n```\n\nEdit `src/layouts/Base.astro`, and add:\n\n```astro\n---\nimport { GoogleAnalytics } from \"astro-google-analytics\";\n// ...other imports\n---\n\n\u003chead\u003e\n  \u003c!-- Replace id with your own Google Analytics ID --\u003e\n  \u003cGoogleAnalytics id=\"G-XXXXXXXXXX\" /\u003e\n\u003c/head\u003e\n```\n\n## Deploy\n\n[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.\n\nBy default the site will be built (see [Commands](#commands) section above) to a `/dist` directory.\n\n## Acknowledgment\n\nThis theme was inspired by [Hexo Theme Cactus](https://github.com/probberechts/hexo-theme-cactus)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreeal%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthreeal%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreeal%2Fblog/lists"}