diff options
24 files changed, 202 insertions, 650 deletions
@@ -22,4 +22,6 @@ pnpm-debug.log* # misc *.pem .cache -.astro
\ No newline at end of file +.astro + +examples/
\ No newline at end of file @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2022 Chris Williams +Copyright (c) 2025 Dawid Rycerz Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -1,190 +1,17 @@ -<div align="center"> - <img alt="Astro Cactus logo" src="https://github.com/chrismwilliams/astro-theme-cactus/assets/12715988/85aa0d3c-ef6a-44e2-954d-ef035b4f4315" width="70" /> -</div> -<h1 align="center"> - Astro Cactus -</h1> +# Dawid Rycerz Personal 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. +Source code for my personal website built with [Astro](https://astro.build). -## Table Of Contents - -1. [Key Features](#key-features) -2. [Demo](#demo-) -3. [Quick start](#quick-start) -4. [Preview](#preview) -5. [Commands](#commands) -6. [Configure](#configure) -7. [Updating](#updating) -8. [Adding posts, notes, and tags](#adding-posts-notes-and-tags) - - [Post Frontmatter](#post-frontmatter) - - [Note Frontmatter](#note-frontmatter) - - [Tag Frontmatter](#tag-frontmatter) - - [Frontmatter Snippets](#frontmatter-snippets) -9. [Pagefind search](#pagefind-search) -10. [Analytics](#analytics) -11. [Deploy](#deploy) -12. [Acknowledgment](#acknowledgment) - -## Key Features - -- Astro v5 Fast š -- Tailwind v4 -- Accessible, semantic HTML markup -- Responsive & SEO-friendly -- 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/admonitions/) -- [Satori](https://github.com/vercel/satori) for creating open graph png images -- [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/) - - [robots.txt](https://github.com/alextim/astro-lib/blob/main/packages/astro-robots-txt/README.md) - - [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/) code blocks and syntax highlighter - -## Demo š» - -Check out the [Demo](https://astro-cactus.chriswilliams.dev/), hosted on Netlify - -## Quick start - -[Create a new repo](https://github.com/chrismwilliams/astro-theme-cactus/generate) from this template. - -```bash -# npm 7+ -npm create astro@latest -- --template chrismwilliams/astro-theme-cactus - -# pnpm -pnpm dlx create-astro --template chrismwilliams/astro-theme-cactus -``` - -[](https://app.netlify.com/start/deploy?repository=https://github.com/chrismwilliams/astro-theme-cactus) [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fchrismwilliams%2Fastro-theme-cactus&project-name=astro-theme-cactus) - -## Preview - - - - - -## Commands - -Replace pnpm with your choice of npm / yarn +## Development | 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 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 [@ expressive-code](https://expressive-code.com/guides/themes/#available-themes). -- Update file `astro.config.ts` - - [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, 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-notes-and-tags) for more details. - - Read [this post](http://astro-cactus.chriswilliams.dev/posts/webmentions/) for adding webmentions to your site. - - Add any custom Tag pages for related blog posts in `/src/content/tag/`, ensuring that the file name is the same as the tag. -- 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 [below](#post-frontmatter) -- Optional: - - 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 - -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, notes, and tags - -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/tag is as simple as adding your .md(x) files to either `src/content/post`, `src/content/note`, and `src/content/tag` folders, the filename of which will be used as the slug/url. - -The Tag collection allows you to override the content for generated tag pages. For example the template includes `src/content/tag/test.md` which overrides the content shown in `your-domain.com/tags/test`. - -> **Note** -> For a tag page to work, the file name (`src/content/tag/*`) must also be in a post's [tags frontmatter.](#post-frontmatter) - -The posts/notes/tags 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. - -### 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. | -| tags | Tags are optional with any created post. Any new tag(s) will be shown in `your-domain.com/posts` & `your-domain.com/tags`, and generate the page(s) `your-domain.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` | - -### Note Frontmatter - -| Property (\* required) | Description | -| ---------------------- | --------------------------------------------------------------------------------------------------------------------- | -| title \* | Used as the link text to the note, the pages title property, and the h1 of said note page. Has a max length 60 chars. | -| description | Optional. Used for the head meta description property. | -| publishDate \* | ISO 8601 format with offsets allowed. | - -### Tag Frontmatter - -| Property (\* required) | Description | -| ---------------------- | ------------------------------------------------------------------------------------------------------- | -| title | Optional. Used as the h1 on the tags' page, and the pages title property. Has a max length of 60 chars. | -| description | Optional. Used for the head meta description and the first paragraph under the h1. | - -### 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 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 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`. - -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](https://github.com/chrismwilliams/astro-theme-cactus/pull/145#issue-1943779868), 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](https://vercel.com/analytics), [netlify](https://www.netlify.com/products/analytics/), and [cloudflare](https://www.cloudflare.com/web-analytics/). - -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 can add the snippet in `src/components/BaseHead.astro`. - -## Deploy - -[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. - -By default the site will be built (see [Commands](#commands) section above) to a `/dist` directory. - -## Acknowledgment - -This theme was inspired by [Hexo Theme Cactus](https://github.com/probberechts/hexo-theme-cactus) +| `pnpm install` | Install dependencies | +| `pnpm dev` | Start local dev server at `localhost:3000` | +| `pnpm build` | Build production site to `./dist/` | +| `pnpm postbuild` | Build static search index | +| `pnpm preview` | Preview build locally | -## License +## Based on -MIT +This website is based on the [Astro Cactus](https://github.com/chrismwilliams/astro-theme-cactus) theme. diff --git a/public/icon.svg b/public/icon.svg index 9c33deb..f1b42d3 100644 --- a/public/icon.svg +++ b/public/icon.svg @@ -1 +1,18 @@ -<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><path fill="#B04304" d="M295.334 103.333v-40L340.667 90v40l-45.333-26.667ZM250.001 63.333l-45.334-26.666v426.666L250.001 490V63.333Z"/><path fill="#FF5D01" d="m250.001 129.944 45.333-26.667 45.333 26.667-45.333 26.667-45.333-26.667ZM204.667 36.667 250.001 10l45.333 26.667-45.333 26.666-45.334-26.666ZM295.334 63.277l45.333-26.666L386 63.277l-45.333 26.667-45.333-26.667ZM114 223.277l45.333-26.667 45.334 26.667-45.334 26.667L114 223.277ZM250 249.944l-45.333-26.667v53.333L250 249.944Z"/><path fill="#53C68C" d="m250 63.333 45.333-26.666v120L340.667 130V90L386 63.333V170l-90.667 53.333v240L250 490V316.667L159.333 370V250l45.334-26.667v53.334L250 250V63.333Z"/><path fill="#B04304" d="M159.333 250 114 223.334v120L159.333 370V250Z"/></svg>
\ No newline at end of file +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> +<!-- Created using Krita: https://krita.org --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:krita="http://krita.org/namespaces/svg/krita" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + width="360pt" + height="360pt" + viewBox="0 0 360 360"> +<defs/> +<g id="group0" transform="translate(70.8749995138331, 7.01999995184633)" fill="none"> + <path id="shape0" transform="translate(13.2299999092488, 0)" fill="#306b4e" fill-rule="evenodd" stroke="#306b4e" stroke-width="2.16" stroke-linecap="square" stroke-linejoin="bevel" d="M0 91.53C32.9712 58.5548 0.838759 20.1965 65.61 7.155C90.6937 0.313979 85.2036 3.0468 97.2 0C98.3977 0.598844 109.07 14.0691 108.675 15.255C108.457 17.8034 108.106 21.0139 107.152 22.7948C88.7999 18.6814 63.7461 26.7779 52.11 35.505C18.588 76.6103 48.6792 86.5536 22.005 95.445C18.7941 96.5153 0.27 93.935 0.27 91.53" sodipodi:nodetypes="cccccccc"/> + <path id="shape1" transform="translate(48.5999996666284, 29.3959603876917)" fill="#306b4e" fill-rule="evenodd" stroke="#306b4e" stroke-width="2.16" stroke-linecap="square" stroke-linejoin="bevel" d="M0 109.114L8.1 96.559L8.64 40.939C35.4994 -24.1754 90.6285 2.75644 101.79 24.199L40.5 41.749L29.835 56.599L49.005 101.689L41.04 99.259L19.305 114.784C19.125 114.874 12.69 112.984 0 109.114Z" sodipodi:nodetypes="cccccccccc"/> + <path id="shape2" transform="translate(89.2349993878927, 58.9949995953239)" fill="#306b4e" fill-rule="evenodd" stroke="#306b4e" stroke-width="2.16" stroke-linecap="square" stroke-linejoin="bevel" d="M4.86 20.385L70.335 0L79.245 22.815L34.02 24.705L37.8 34.02L87.615 34.56L66.42 93.825L18.09 75.33L0 27.405C0 27.405 1.62 25.065 4.86 20.385Z" sodipodi:nodetypes="cccccccccc"/> + <path id="shape3" transform="translate(0, 151.803088248821)" fill="#306b4e" fill-rule="evenodd" stroke="#306b4e" stroke-width="2.16" stroke-linecap="square" stroke-linejoin="bevel" d="M73.17 6.01191C59.7458 10.5419 54.7859 14.4672 22.815 20.3219L22.275 41.7869L0 32.8769C22.0145 1.58636 46.4045 -7.36864 73.17 6.01191Z" sodipodi:nodetypes="ccccc"/> + </g><path id="shape4" transform="translate(101.789996268193, 159.569994149873)" fill="#b04304" fill-rule="evenodd" stroke="#b04304" stroke-width="2.16" stroke-linecap="square" stroke-linejoin="bevel" d="M0 26.19C25.2141 21.5944 52.0199 14.6103 79.38 0C102.4 9.84952 124.488 20.1337 157.95 25.11L157.14 71.28C72.4992 62.1903 35.5629 78.3158 0.27 95.31C0.99 94.95 0.9 71.91 0 26.19Z" sodipodi:nodetypes="cccccc"/><path id="shape5" transform="translate(154.169994347847, 243.809991061482)" fill="#b04304" fill-rule="evenodd" stroke="#b04304" stroke-width="2.16" stroke-linecap="square" stroke-linejoin="bevel" d="M0 92.34L26.73 111.24C68.8327 85.2955 105.901 55.7671 106.11 0C46.5948 1.94824 11.2248 32.7282 0 92.34Z" sodipodi:nodetypes="cccc"/><path id="shape6" transform="translate(117.989995674272, 280.709989708662)" fill="#b04304" fill-rule="evenodd" stroke="#b04304" stroke-width="2.16" stroke-linecap="square" stroke-linejoin="bevel" d="M0 15.03L7.02 24.93C9.86684 17.4815 14.7638 11.673 19.98 6.12L11.43 0C8.46106 1.32415 4.65106 6.33415 0 15.03Z" sodipodi:nodetypes="ccccc"/><path id="shape7" transform="translate(141.209994822985, 257.489990559949)" fill="#b04304" fill-rule="evenodd" stroke="#b04304" stroke-width="2.16" stroke-linecap="square" stroke-linejoin="bevel" d="M0 12.51L7.47 17.73C12.2932 12.4756 18.0945 8.93282 23.85 5.31L17.19 0C14.5911 0.898115 8.86111 5.06811 0 12.51Z" sodipodi:nodetypes="ccccc"/><path id="shape8" transform="translate(172.979993658239, 247.469668124269)" fill="#b04304" fill-rule="evenodd" stroke="#b04304" stroke-width="2.16" stroke-linecap="square" stroke-linejoin="bevel" d="M0 4.44032L4.68 8.13032C8.94565 5.54974 14.0379 4.34681 18.99 2.91032L17.64 0.0303228C15.7496 -0.234517 9.86959 1.23548 0 4.44032Z" sodipodi:nodetypes="ccccc"/> +</svg> diff --git a/public/social-card.png b/public/social-card.png Binary files differdeleted file mode 100644 index edc7bcd..0000000 --- a/public/social-card.png +++ /dev/null diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index ceb55ea..d65dd9a 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -83,4 +83,24 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url ) } +{/* Plausible Analytics */} +<link rel="dns-prefetch" href="//analytics.craftknight.com" /> +<script + type="text/javascript" + defer + data-domain="rycerz.xyz" + data-api="https://analytics.craftknight.com/api/event" + data-cfasync="false" + src="https://analytics.craftknight.com/js/plausible.outbound-links.js?ver=2.1.3" + id="plausible"></script> +<script type="text/javascript" id="plausible-analytics-js-after"> + /* <![CDATA[ */ + window.plausible = + window.plausible || + function () { + (window.plausible.q = window.plausible.q || []).push(arguments); + }; + /* ]]> */ +</script> + <meta content={Astro.generator} name="generator" /> diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro index e7a9a1d..0b03986 100644 --- a/src/components/layout/Header.astro +++ b/src/components/layout/Header.astro @@ -13,24 +13,110 @@ import { siteConfig } from "../../site.config"; href="/" > <svg + xmlns="http://www.w3.org/2000/svg" + class="me-3 h-15 w-9 sm:absolute sm:-start-18 sm:me-0 sm:h-16 sm:w-18" aria-hidden="true" - class="me-3 h-10 w-6 sm:absolute sm:-start-18 sm:me-0 sm:h-20 sm:w-12" fill="none" focusable="false" - viewBox="0 0 272 480" - xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 360 360" > - <title>Logo</title> - <path - d="M181.334 93.333v-40L226.667 80v40l-45.333-26.667ZM136.001 53.333 90.667 26.667v426.666L136.001 480V53.333Z" - fill="#B04304"></path> - <path - d="m136.001 119.944 45.333-26.667 45.333 26.667-45.333 26.667-45.333-26.667ZM90.667 26.667 136.001 0l45.333 26.667-45.333 26.666-45.334-26.666ZM181.334 53.277l45.333-26.666L272 53.277l-45.333 26.667-45.333-26.667ZM0 213.277l45.333-26.667 45.334 26.667-45.334 26.667L0 213.277ZM136 239.944l-45.333-26.667v53.333L136 239.944Z" - fill="#FF5D01"></path> - <path - d="m136 53.333 45.333-26.666v120L226.667 120V80L272 53.333V160l-90.667 53.333v240L136 480V306.667L45.334 360V240l45.333-26.667v53.334L136 240V53.333Z" - fill="#53C68C"></path> - <path d="M45.334 240 0 213.334v120L45.334 360V240Z" fill="#B04304"></path> + <defs></defs> + <g id="group0" transform="translate(70.8749995138331, 7.01999995184633)" fill="none"> + <path + id="shape0" + transform="translate(13.2299999092488, 0)" + fill="#306b4e" + fill-rule="evenodd" + stroke="#306b4e" + stroke-width="2.16" + stroke-linecap="square" + stroke-linejoin="bevel" + d="M0 91.53C32.9712 58.5548 0.838759 20.1965 65.61 7.155C90.6937 0.313979 85.2036 3.0468 97.2 0C98.3977 0.598844 109.07 14.0691 108.675 15.255C108.457 17.8034 108.106 21.0139 107.152 22.7948C88.7999 18.6814 63.7461 26.7779 52.11 35.505C18.588 76.6103 48.6792 86.5536 22.005 95.445C18.7941 96.5153 0.27 93.935 0.27 91.53" + ></path> + <path + id="shape1" + transform="translate(48.5999996666284, 29.3959603876917)" + fill="#306b4e" + fill-rule="evenodd" + stroke="#306b4e" + stroke-width="2.16" + stroke-linecap="square" + stroke-linejoin="bevel" + d="M0 109.114L8.1 96.559L8.64 40.939C35.4994 -24.1754 90.6285 2.75644 101.79 24.199L40.5 41.749L29.835 56.599L49.005 101.689L41.04 99.259L19.305 114.784C19.125 114.874 12.69 112.984 0 109.114Z" + ></path> + <path + id="shape2" + transform="translate(89.2349993878927, 58.9949995953239)" + fill="#306b4e" + fill-rule="evenodd" + stroke="#306b4e" + stroke-width="2.16" + stroke-linecap="square" + stroke-linejoin="bevel" + d="M4.86 20.385L70.335 0L79.245 22.815L34.02 24.705L37.8 34.02L87.615 34.56L66.42 93.825L18.09 75.33L0 27.405C0 27.405 1.62 25.065 4.86 20.385Z" + ></path> + <path + id="shape3" + transform="translate(0, 151.803088248821)" + fill="#306b4e" + fill-rule="evenodd" + stroke="#306b4e" + stroke-width="2.16" + stroke-linecap="square" + stroke-linejoin="bevel" + d="M73.17 6.01191C59.7458 10.5419 54.7859 14.4672 22.815 20.3219L22.275 41.7869L0 32.8769C22.0145 1.58636 46.4045 -7.36864 73.17 6.01191Z" + ></path> + </g><path + id="shape4" + transform="translate(101.789996268193, 159.569994149873)" + fill="#b04304" + fill-rule="evenodd" + stroke="#b04304" + stroke-width="2.16" + stroke-linecap="square" + stroke-linejoin="bevel" + d="M0 26.19C25.2141 21.5944 52.0199 14.6103 79.38 0C102.4 9.84952 124.488 20.1337 157.95 25.11L157.14 71.28C72.4992 62.1903 35.5629 78.3158 0.27 95.31C0.99 94.95 0.9 71.91 0 26.19Z" + ></path><path + id="shape5" + transform="translate(154.169994347847, 243.809991061482)" + fill="#b04304" + fill-rule="evenodd" + stroke="#b04304" + stroke-width="2.16" + stroke-linecap="square" + stroke-linejoin="bevel" + d="M0 92.34L26.73 111.24C68.8327 85.2955 105.901 55.7671 106.11 0C46.5948 1.94824 11.2248 32.7282 0 92.34Z" + ></path><path + id="shape6" + transform="translate(117.989995674272, 280.709989708662)" + fill="#b04304" + fill-rule="evenodd" + stroke="#b04304" + stroke-width="2.16" + stroke-linecap="square" + stroke-linejoin="bevel" + d="M0 15.03L7.02 24.93C9.86684 17.4815 14.7638 11.673 19.98 6.12L11.43 0C8.46106 1.32415 4.65106 6.33415 0 15.03Z" + ></path><path + id="shape7" + transform="translate(141.209994822985, 257.489990559949)" + fill="#b04304" + fill-rule="evenodd" + stroke="#b04304" + stroke-width="2.16" + stroke-linecap="square" + stroke-linejoin="bevel" + d="M0 12.51L7.47 17.73C12.2932 12.4756 18.0945 8.93282 23.85 5.31L17.19 0C14.5911 0.898115 8.86111 5.06811 0 12.51Z" + ></path><path + id="shape8" + transform="translate(172.979993658239, 247.469668124269)" + fill="#b04304" + fill-rule="evenodd" + stroke="#b04304" + stroke-width="2.16" + stroke-linecap="square" + stroke-linejoin="bevel" + d="M0 4.44032L4.68 8.13032C8.94565 5.54974 14.0379 4.34681 18.99 2.91032L17.64 0.0303228C15.7496 -0.234517 9.86959 1.23548 0 4.44032Z" + ></path> </svg> <span class="text-xl font-bold sm:text-2xl">{siteConfig.title}</span> </a> diff --git a/src/content/post/cover-image/cover.png b/src/content/post/cover-image/cover.png Binary files differdeleted file mode 100644 index 2910690..0000000 --- a/src/content/post/cover-image/cover.png +++ /dev/null diff --git a/src/content/post/cover-image/index.md b/src/content/post/cover-image/index.md deleted file mode 100644 index 4f78dc9..0000000 --- a/src/content/post/cover-image/index.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: "Example Cover Image" -description: "This post is an example of how to add a cover/hero image" -publishDate: "04 July 2023" -updatedDate: "14 August 2023" -coverImage: - src: "./cover.png" - alt: "Astro build wallpaper" -tags: ["test", "image"] ---- diff --git a/src/content/post/devops-mindset.md b/src/content/post/devops-mindset.md new file mode 100644 index 0000000..166d282 --- /dev/null +++ b/src/content/post/devops-mindset.md @@ -0,0 +1,35 @@ +--- +title: "DevOps Mindset" +description: "DevOps - culture, mindset and processes" +publishDate: "3 July 2025" +tags: ["devops101", devops] +draft: false +--- + +## DevOps Mindset + +The first thing you need to understand to become a good DevOps engineer is what DevOps truly is. Being a DevOps engineer means driving change in culture, processes, and mindset. I often say I do *DevOps evangelization*, because the shift in how people think and work is far more important than tools and automation. Without that foundation, no tool will bring real improvement. + +This mindset helps focus on what truly matters. As a consultant, Iāve often been asked about priorities - where a project should invest its main efforts, and what actions will bring the biggest results with the least effort. + +Some books that helped shape my thinking: + +- [*The Phoenix Project*](https://www.goodreads.com/book/show/17255186-the-phoenix-project) - Absolute legend book +- [*The DevOps Handbook*](https://www.goodreads.com/book/show/26083308-the-devops-handbook) - Must read handbook +- [*The Unicorn Project*](https://www.goodreads.com/book/show/44333183-the-unicorn-project) - Modern version of *Phoenix Project* + +These books wonāt solve your problems or give you ready-made answers, but they will help guide your decisions. The principles behind DevOps - building healthy work environments, creating well-sized and effective teams - are universal, regardless of the technology or the company. + +Key ideas youāll find in them: + +- The "wall of confusion" between development and operations teams +- Shift-left approach and continuous feedback +- Blameless culture and continuous learning +- Cross-functional cooperation and shared goals +- Lean thinking and waste reduction +- Security as an integral part of the development process +- [CALMS](https://devops.com/using-calms-to-assess-organizations-devops/) framework +- [DORA](https://dora.dev/guides/dora-metrics-four-keys/) metrics +- [Value stream mapping](https://dora.dev/guides/value-stream-management/) + +The most important takeaway: **DevOps is not about tools**. Itās not CI/CD, itās not Kubernetes, itās not Cloud or Ansible. DevOps is a mindset. Tools are just there to support processes. Donāt forget that. diff --git a/src/content/post/markdown-elements/admonitions.md b/src/content/post/markdown-elements/admonitions.md deleted file mode 100644 index d7cf5f9..0000000 --- a/src/content/post/markdown-elements/admonitions.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: "Markdown Admonitions" -description: "This post showcases using the markdown admonition feature in Astro Cactus" -publishDate: "25 Aug 2024" -updatedDate: "7 Jan 2025" -tags: ["markdown", "admonitions"] ---- - -## What are admonitions - -Admonitions (also known as āasidesā) are useful for providing supportive and/or supplementary information related to your content. - -## How to use them - -To use admonitions in Astro Cactus, wrap your Markdown content in a pair of triple colons `:::`. The first pair should also include the type of admonition you want to use. - -For example, with the following Markdown: - -```md -:::note -Highlights information that users should take into account, even when skimming. -::: -``` - -Outputs: - -:::note -Highlights information that users should take into account, even when skimming. -::: - -## Admonition Types - -The following admonitions are currently supported: - -- `note` -- `tip` -- `important` -- `warning` -- `caution` - -### Note - -```md -:::note -Highlights information that users should take into account, even when skimming. -::: -``` - -:::note -Highlights information that users should take into account, even when skimming. -::: - -### Tip - -```md -:::tip -Optional information to help a user be more successful. -::: -``` - -:::tip -Optional information to help a user be more successful. -::: - -### Important - -```md -:::important -Crucial information necessary for users to succeed. -::: -``` - -:::important -Crucial information necessary for users to succeed. -::: - -### Caution - -```md -:::caution -Negative potential consequences of an action. -::: -``` - -:::caution -Negative potential consequences of an action. -::: - -### Warning - -```md -:::warning -Critical content demanding immediate user attention due to potential risks. -::: -``` - -:::warning -Critical content demanding immediate user attention due to potential risks. -::: - -## Customising the admonition title - -You can customise the admonition title using the following markup: - -```md -:::note[My custom title] -This is a note with a custom title. -::: -``` - -Outputs: - -:::note[My custom title] -This is a note with a custom title. -::: diff --git a/src/content/post/markdown-elements/index.md b/src/content/post/markdown-elements/index.md deleted file mode 100644 index 63a8773..0000000 --- a/src/content/post/markdown-elements/index.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: "A post of Markdown elements" -description: "This post is for testing and listing a number of different markdown elements" -publishDate: "22 Feb 2023" -updatedDate: 22 Jan 2024 -tags: ["test", "markdown"] ---- - -## This is a H2 Heading - -### This is a H3 Heading - -#### This is a H4 Heading - -##### This is a H5 Heading - -###### This is a H6 Heading - -## Horizontal Rules - ---- - ---- - ---- - -## Emphasis - -**This is bold text** - -_This is italic text_ - -~~Strikethrough~~ - -## Quotes - -"Double quotes" and 'single quotes' - -## Blockquotes - -> Blockquotes can also be nested... -> -> > ...by using additional greater-than signs right next to each other... - -## References - -An example containing a clickable reference[^1] with a link to the source. - -Second example containing a reference[^2] with a link to the source. - -[^1]: Reference first footnote with a return to content link. - -[^2]: Second reference with a link. - -If you check out this example in `src/content/post/markdown-elements/index.md`, you'll notice that the references and the heading "Footnotes" are added to the bottom of the page via the [remark-rehype](https://github.com/remarkjs/remark-rehype#options) plugin. - -## Lists - -Unordered - -- Create a list by starting a line with `+`, `-`, or `*` -- Sub-lists are made by indenting 2 spaces: - - Marker character change forces new list start: - - Ac tristique libero volutpat at - - Facilisis in pretium nisl aliquet - - Nulla volutpat aliquam velit -- Very easy! - -Ordered - -1. Lorem ipsum dolor sit amet -2. Consectetur adipiscing elit -3. Integer molestie lorem at massa - -4. You can use sequential numbers... -5. ...or keep all the numbers as `1.` - -Start numbering with offset: - -57. foo -1. bar - -## Code - -Inline `code` - -Indented code - - // Some comments - line 1 of code - line 2 of code - line 3 of code - -Block code "fences" - -``` -Sample text here... -``` - -Syntax highlighting - -```js -var foo = function (bar) { - return bar++; -}; - -console.log(foo(5)); -``` - -### Expressive code examples - -Adding a title - -```js title="file.js" -console.log("Title example"); -``` - -A bash terminal - -```bash -echo "A base terminal example" -``` - -Highlighting code lines - -```js title="line-markers.js" del={2} ins={3-4} {6} -function demo() { - console.log("this line is marked as deleted"); - // This line and the next one are marked as inserted - console.log("this is the second inserted line"); - - return "this line uses the neutral default marker type"; -} -``` - -[Expressive Code](https://expressive-code.com/) can do a ton more than shown here, and includes a lot of [customisation](https://expressive-code.com/reference/configuration/). - -## Tables - -| Option | Description | -| ------ | ------------------------------------------------------------------------- | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -### Table Alignment - -| Item | Price | # In stock | -| ------------ | :---: | ---------: | -| Juicy Apples | 1.99 | 739 | -| Bananas | 1.89 | 6 | - -### Keyboard elements - -| Action | Shortcut | -| --------------------- | ------------------------------------------ | -| Vertical split | <kbd>Alt+Shift++</kbd> | -| Horizontal split | <kbd>Alt+Shift+-</kbd> | -| Auto split | <kbd>Alt+Shift+d</kbd> | -| Switch between splits | <kbd>Alt</kbd> + arrow keys | -| Resizing a split | <kbd>Alt+Shift</kbd> + arrow keys | -| Close a split | <kbd>Ctrl+Shift+W</kbd> | -| Maximize a pane | <kbd>Ctrl+Shift+P</kbd> + Toggle pane zoom | - -## Images - -Image in the same folder: `src/content/post/markdown-elements/logo.png` - - - -## Links - -[Content from markdown-it](https://markdown-it.github.io/) diff --git a/src/content/post/markdown-elements/logo.png b/src/content/post/markdown-elements/logo.png Binary files differdeleted file mode 100644 index f6c3cd7..0000000 --- a/src/content/post/markdown-elements/logo.png +++ /dev/null diff --git a/src/content/post/social-image.md b/src/content/post/social-image.md deleted file mode 100644 index c03faac..0000000 --- a/src/content/post/social-image.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: "Example OG Social Image" -publishDate: "27 January 2023" -description: "An example post for Astro Cactus, detailing how to add a custom social image card in the frontmatter" -tags: ["example", "blog", "image"] -ogImage: "/social-card.png" ---- - -## Adding your own social image to a post - -This post is an example of how to add a custom [open graph](https://ogp.me/) social image, also known as an OG image, to a blog post. -By adding the optional ogImage property to the frontmatter of a post, you opt out of [satori](https://github.com/vercel/satori) automatically generating an image for this page. - -If you open this markdown file `src/content/post/social-image.md` you'll see the ogImage property set to an image which lives in the public folder[^1]. - -```yaml -ogImage: "/social-card.png" -``` - -You can view the one set for this template page [here](https://astro-cactus.chriswilliams.dev/social-card.png). - -[^1]: The image itself can be located anywhere you like. diff --git a/src/content/post/testing/draft-post.md b/src/content/post/testing/draft-post.md deleted file mode 100644 index a0edc55..0000000 --- a/src/content/post/testing/draft-post.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: "A working draft title" -description: "This post is for testing the draft post functionality" -publishDate: "10 March 2024" -tags: ["test"] -draft: true ---- - -If this is working correctly, this post should only be accessible in a dev environment, as well as any tags that are unique to this post. diff --git a/src/content/post/testing/long-title.md b/src/content/post/testing/long-title.md deleted file mode 100644 index f79f330..0000000 --- a/src/content/post/testing/long-title.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id" -description: "This post is purely for testing if the css is correct for the title on the page" -publishDate: "01 Feb 2023" -tags: ["test"] ---- - -## Testing the title tag diff --git a/src/content/post/testing/missing-content.md b/src/content/post/testing/missing-content.md deleted file mode 100644 index 4b10c6f..0000000 --- a/src/content/post/testing/missing-content.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: "This post doesn't have any content" -description: "This post is purely for testing the table of content, which should not be rendered" -publishDate: "22 Feb 2023" -tags: ["test", "toc"] ---- diff --git a/src/content/post/testing/unique-tags.md b/src/content/post/testing/unique-tags.md deleted file mode 100644 index 887d279..0000000 --- a/src/content/post/testing/unique-tags.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: "Unique tags validation" -publishDate: "30 January 2023" -description: "This post is used for validating if duplicate tags are removed, regardless of the string case" -tags: ["blog", "blog", "Blog", "test", "bloG", "Test", "BLOG"] ---- - -## This post is to test zod transform - -If you open the file `src/content/post/unique-tags.md`, the tags array has a number of duplicate blog strings of various cases. - -These are removed as part of the removeDupsAndLowercase function found in `src/content/config.ts`. diff --git a/src/content/post/webmentions.md b/src/content/post/webmentions.md deleted file mode 100644 index 70168d8..0000000 --- a/src/content/post/webmentions.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: "Adding Webmentions to Astro Cactus" -description: "This post describes the process of adding webmentions to your own site" -publishDate: "11 Oct 2023" -tags: ["webmentions", "astro", "social"] -updatedDate: 6 December 2024 ---- - -## TLDR - -1. Add a link on your homepage to either your GitHub profile and/or email address as per [IndieLogin's](https://indielogin.com/setup) instructions. You _could_ do this via `src/components/SocialList.astro`, just be sure to include `isWebmention` to the relevant link if doing so. -2. Create an account @ [Webmention.io](https://webmention.io/) by entering your website's address. -3. Add the link feed and api key to a `.env` file with the key `WEBMENTION_URL` and `WEBMENTION_API_KEY` respectively, you could rename `.env.example` found in this template. You can also add the optional `WEBMENTION_PINGBACK` link here too. -4. Go to [brid.gy](https://brid.gy/) and sign-in to each social account[s] you wish to link. -5. Publish and build your website, remember to add the api key, and it should now be ready to receive webmentions! - -## What are webmentions - -Put simply, it's a way to show users who like, comment, repost and more, on various pages on your website via social media. - -This theme displays the number of likes, mentions and replies each blog post receives. There are a couple of more webmentions that I haven't included, like reposts, which are currently filtered out, but shouldn't be too difficult to include. - -## Steps to add it to your own site - -Your going to have to create a couple of accounts to get things up-and-running. But, the first thing you need to ensure is that your social links are correct. - -### Add link(s) to your profile(s) - -Firstly, you need to add a link on your site to prove ownership. If you have a look at [IndieLogin's](https://indielogin.com/setup) instructions, it gives you 2 options, either an email address and/or GitHub account. I've created the component `src/components/SocialList.astro` where you can add your details into the `socialLinks` array, just include the `isWebmention` property to the relevant link which will add the `rel="me authn"` attribute. Whichever way you do it, make sure you have a link in your markup as per IndieLogin's [instructions](https://indielogin.com/setup) - -```html -<a href="https://github.com/your-username" rel="me">GitHub</a> -``` - -### Sign up to Webmention.io - -Next, head over to [Webmention.io](https://webmention.io/) and create an account by signing in with your domain name, e.g. `https://astro-cactus.chriswilliams.dev/`. Please note that .app TLDs don't function correctly. Once in, it will give you a couple of links for your domain to accept webmentions. Make a note of these and create a `.env` file (this template include an example `.env.example` which you could rename). Add the link feed and api key with the key/values of `WEBMENTION_URL` and `WEBMENTION_API_KEY` respectively, and the optional `WEBMENTION_PINGBACK` url if required. Please try not to publish this to a repository! - -:::note -You don't have to include the pingback link. Maybe coincidentally, but after adding it I started to receive a higher frequency of spam in my mailbox, informing me that my website could be better. TBH they're not wrong. I've now removed it, but it's up to you. -::: - -### Sign up to Brid.gy - -You're now going to have to use [brid.gy](https://brid.gy/). As the name suggests, it links your website to your social media accounts. For every account you want to set up (e.g. Mastodon), click on the relevant button and connect each account you want brid.gy to search. Just to note again, brid.gy currently has an issue with .app TLDs. - -## Testing everything works - -With everything set, it's now time to build and publish your website. **REMEMBER** to set your environment variables `WEBMENTION_API_KEY` & `WEBMENTION_URL` with your host. - -You can check to see if everything is working by sending a test webmention via [webmentions.rocks](https://webmention.rocks/receive/1). Log in with your domain, enter the auth code, and then the url of the page you want to test. For example, to test this page I would add `https://astro-cactus.chriswilliams.dev/posts/webmentions/`. To view it on your website, rebuild or (re)start dev mode locally, and you should see the result at the bottom of your page. - -You can also view any test mentions in the browser via their [api](https://github.com/aaronpk/webmention.io#api). - -## Things to add, things to consider - -- At the moment, fresh webmentions are only fetched on a rebuild or restarting dev mode, which obviously means if you don't update your site very often you wont get a lot of new content. It should be quite trivial to add a cron job to run the `getAndCacheWebmentions()` function in `src/utils/webmentions.ts` and populate your blog with new content. This is probably what I'll add next as a github action. - -- I have seen some mentions have duplicates. Unfortunately, they're quite difficult to filter out as they have different id's. - -- I'm not a huge fan of the little external link icon for linking to comments/replies. It's not particularly great on mobile due to its size, and will likely change it in the future. - -## Acknowledgements - -Many thanks to [Kieran McGuire](https://github.com/chrismwilliams/astro-theme-cactus/issues/107#issue-1863931105) for sharing this with me, and the helpful posts. I'd never heard of webmentions before, and now with this update hopefully others will be able to make use of them. Additionally, articles and examples from [kld](https://kld.dev/adding-webmentions/) and [ryanmulligan.dev](https://ryanmulligan.dev/blog/) really helped in getting this set up and integrated, both a great resource if you're looking for more information! diff --git a/src/content/tag/archived.md b/src/content/tag/archived.md new file mode 100644 index 0000000..e15003a --- /dev/null +++ b/src/content/tag/archived.md @@ -0,0 +1,5 @@ +--- +title: Archived +--- + +Old and archived posts, nothing to see here. diff --git a/src/content/tag/devops101.md b/src/content/tag/devops101.md new file mode 100644 index 0000000..52c20a9 --- /dev/null +++ b/src/content/tag/devops101.md @@ -0,0 +1,10 @@ +--- +title: DevOps101 +description: Series of posts about what to learn to become a Senior DevOps Engineer. +--- + +The *DevOps101* tag is a series that covers the most important topics from my journey to becoming a senior DevOps engineer. + +This is my subjective view on what someone in this role should know to be an independent, autonomous engineer-capable of providing consultation on both high- and low-level topics I deal with day to day. + +Feel free to explore the posts in any order. Iāve grouped technologies, tools, and methodologies into logical categories where possible. diff --git a/src/content/tag/image.md b/src/content/tag/image.md deleted file mode 100644 index 35cf3fd..0000000 --- a/src/content/tag/image.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -description: Learn about image handling in Astro Cactus ---- - -This is an example of a custom intro on a tag page. Its markdown can be found in `src/content/tag/image.md`. - -Posts tagged with "image" demonstrate various image-related features including cover images, social media cards, and image optimization. diff --git a/src/content/tag/markdown.md b/src/content/tag/markdown.md deleted file mode 100644 index eaff3b8..0000000 --- a/src/content/tag/markdown.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Markdown Features -description: Posts showcasing markdown and MDX capabilities ---- - -This is an example of a custom intro on a tag page. Its markdown can be found in `src/content/tag/markdown.md`. - -This tag includes posts that demonstrate the markdown processing capabilities of this theme. diff --git a/src/content/tag/test.md b/src/content/tag/test.md deleted file mode 100644 index 8cf5f41..0000000 --- a/src/content/tag/test.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Test Tag -description: This tag is used for testing various features of the theme. ---- - -This is an example of a custom intro on a tag page. Its markdown can be found in `src/content/tag/test.md`. - -This collection includes posts that demonstrate and test different features of the Astro Theme Cactus, including: - -- Markdown rendering capabilities -- Image handling and optimization -- Table of contents generation -- Various edge cases and scenarios - -Feel free to explore these posts to understand how the theme handles different content types and configurations. |
