{"id":26566216,"url":"https://github.com/artemkutsan/astro-citrus","last_synced_at":"2025-03-22T18:19:28.362Z","repository":{"id":280698665,"uuid":"942212979","full_name":"ArtemKutsan/astro-citrus","owner":"ArtemKutsan","description":"Astro Citrus","archived":false,"fork":false,"pushed_at":"2025-03-10T17:05:19.000Z","size":19253,"stargazers_count":27,"open_issues_count":0,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T13:02:02.078Z","etag":null,"topics":["astro","astro-template","astro-theme","blog","css","html","markdown","md","mdx","pagefind","rehype","rss","satori","shiki","ssg","static-site","tailwind","tailwindcss","typescript","webmentions"],"latest_commit_sha":null,"homepage":"https://astrocitrus.netlify.app","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/ArtemKutsan.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":"2025-03-03T18:52:37.000Z","updated_at":"2025-03-21T23:26:27.000Z","dependencies_parsed_at":"2025-03-04T21:30:00.793Z","dependency_job_id":null,"html_url":"https://github.com/ArtemKutsan/astro-citrus","commit_stats":null,"previous_names":["artemkutsan/astro-citrus"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtemKutsan%2Fastro-citrus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtemKutsan%2Fastro-citrus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtemKutsan%2Fastro-citrus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArtemKutsan%2Fastro-citrus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArtemKutsan","download_url":"https://codeload.github.com/ArtemKutsan/astro-citrus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244999783,"owners_count":20544941,"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":["astro","astro-template","astro-theme","blog","css","html","markdown","md","mdx","pagefind","rehype","rss","satori","shiki","ssg","static-site","tailwind","tailwindcss","typescript","webmentions"],"created_at":"2025-03-22T18:19:27.620Z","updated_at":"2025-03-22T18:19:28.347Z","avatar_url":"https://github.com/ArtemKutsan.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"Astro Citrus logo\" src=\"https://github.com/ArtemKutsan/astro-citrus/blob/main/src/assets/images/logo.svg\" width=\"70\" /\u003e\n\u003c/div\u003e\n\u003ch1 align=\"center\"\u003e\n  Astro Citrus\n\u003c/h1\u003e\n\nAstro Citrus 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. [Updating](#updating)\n8. [Adding posts and notes](#adding-posts-and-notes)\n   - [Post Frontmatter](#post-frontmatter)\n   - [Note Frontmatter](#note-frontmatter)\n   - [Frontmatter Snippet](#frontmatter-snippet)\n9. [Pagefind search](#pagefind-search)\n10. [Analytics](#analytics)\n11. [Deploy](#deploy)\n12. [Acknowledgment](#acknowledgment)\n\n## Key Features\n\n- Astro v5 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- MD \u0026 [MDX](https://docs.astro.build/en/guides/markdown-content/#mdx-only-features) posts \u0026 notes\n  - Includes [Admonitions](http://astrocitrus.artemkutsan.pp.ua/posts/markdown-elements/admonistions/)\n- [Satori](https://github.com/vercel/satori) for creating open graph png images\n- [Automatic RSS feed](https://docs.astro.build/en/guides/rss)\n- [Webmentions](https://webmention.io/)\n- Auto-generated:\n  - [sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)\n  - [robots.txt](https://github.com/alextim/astro-lib/blob/main/packages/astro-robots-txt/README.md)\n  - [web app manifest](https://github.com/alextim/astro-lib/blob/main/packages/astro-webmanifest/README.md)\n- [Pagefind](https://pagefind.app/) static search library integration\n- [Astro Icon](https://github.com/natemoo-re/astro-icon) svg icon component\n- [Rehype Pretty Code](https://rehype-pretty.pages.dev/) code blocks and syntax highlighter\n\n## Demo\n\nCheck out the [Demo](https://astrocitrus.netlify.app/)\n\n## Quick start\n\n[Create a new repo](https://github.com/artemkutsan/astro-citrus/generate) from this template.\n\n```bash\n# npm 7+\nnpm create astro@latest -- --template artemkutsan/astro-citrus\n\n# pnpm\npnpm dlx create-astro --template artemkutsan/astro-citrus\n```\n\n[![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/artemkutsan/astro-citrus) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fartemkutsan%2Fastro-citrus\u0026project-name=astro-citrus)\n\n## Preview\n\n| ![Light Theme 01](https://github.com/ArtemKutsan/astro-citrus/blob/main/public/images/screenshot01.png?raw=true) | ![Light Theme 02](https://github.com/ArtemKutsan/astro-citrus/blob/main/public/images/screenshot02.png?raw=true) |\n|-------------|-------------|\n| ![Dark Theme 03](https://github.com/ArtemKutsan/astro-citrus/blob/main/public/images/screenshot03.png?raw=true) | ![Light Theme 04](https://github.com/ArtemKutsan/astro-citrus/blob/main/public/images/screenshot04.png?raw=true) |\n| ![Light Theme 05](https://github.com/ArtemKutsan/astro-citrus/blob/main/public/images/screenshot05.png?raw=true) | ![Light Theme 06](https://github.com/ArtemKutsan/astro-citrus/blob/main/public/images/screenshot06.png?raw=true) |\n| ![Dark Theme 07](https://github.com/ArtemKutsan/astro-citrus/blob/main/public/images/screenshot07.png?raw=true) | ![Dark Theme 08](https://github.com/ArtemKutsan/astro-citrus/blob/main/public/images/screenshot08.png?raw=true) |\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- Update file `astro.config.ts`\n  - **Important**: the site property with your own domain.\n  - [astro-webmanifest options](https://github.com/alextim/astro-lib/blob/main/packages/astro-webmanifest/README.md)\n- Replace \u0026 update files within the `/public` folder:\n  - icon.svg - used as the source to create favicons \u0026 manifest icons\n  - social-card.png - used as the default og:image\n- Modify file `src/styles/global.css` with your own light and dark styles.\n  - You can also modify the theme(s) for markdown code blocks generated by [Rehype Pretty Code](https://rehype-pretty.pages.dev/). Astro Citrus has both a dark (rose-pine) and light (rose-pine-dawn) theme, which can be found in `src/site.config.ts`. You can find more theme(s) and options [here](https://shiki.matsu.io/).\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/), per [Astro Icon's instructions](https://www.astroicon.dev/guides/customization/#find-an-icon-set).\n- Create/edit posts \u0026 notes for your blog within `src/content/post/` \u0026 `src/content/note/` with .md/mdx file(s). See [below](#adding-posts-and-notes) for more details.\n  - Read [this post](http://astrocitrus.artemkutsan.pp.ua/posts/webmentions/) for adding webmentions to your site.\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 use this [playground](https://og-playground.vercel.app/) to aid your design.\n  - You can also create your own og images and skip satori generating it for you by adding an ogImage property in the frontmatter with a link to the asset, an example can be found in `src/content/post/social-image.md`. More info on frontmatter can be found [here](#frontmatter)\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## Updating\n\nIf 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.\n\nIf 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).\n\n## Adding posts and notes\n\nThis theme utilises [Content Collections](https://docs.astro.build/en/guides/content-collections/) to organise local Markdown and MDX files, as well as type-checking frontmatter with a schema -\u003e `src/content/config.ts`.\n\nAdding a post/note is as simple as adding your .md(x) files to the `src/content/post` and/or `src/content/note` folder, the filename of which will be used as the slug/url. The posts included with this template are there as an example of how to structure your frontmatter. Additionally, the [Astro docs](https://docs.astro.build/en/guides/markdown-content/) has a detailed section on markdown pages.\n\n### Post Frontmatter\n\n| Property (\\* required) | Description |\n|------------------------|-------------|\n| **title \\***          | Self-explanatory. Used as the text link to the post, the h1 on the post's page, and the page's 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 `\u003cFormattedDate\u003e` component if required. |\n| **updatedDate**       | This is an optional date representing when a post has been updated, in the same format as the `publishDate`. |\n| **seriesId**          | An optional property that groups posts into a series. Posts with the same `seriesId` are considered part of the same series and can be displayed together in order. This allows for better organization of related content. |\n| **orderInSeries**     | A numeric value defining the position of a post within a series. Lower values indicate earlier posts in the series, while higher values appear later. Used for sorting and navigation between posts within the same series. |\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 `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 setting it to `true`, the post will be filtered out of the production build in a number of places, including `getAllPosts()` calls, OG images, RSS feeds, and generated page[s]. You can view an example in `src/content/post/draft-post.md`. |\n\n\n### Note Frontmatter\n\n| Property (\\* required) | Description                                        |\n| ---------------------- | -------------------------------------------------- |\n| title \\*               | string, max length 60 chars.                       |\n| description            | to be used for the head meta description property. |\n| publishDate \\*         | ISO 8601 format with offsets allowed.              |\n\n### Frontmatter snippet\n\nAstro Citrus includes a helpful VSCode snippet which creates a frontmatter 'stub' for posts and note's, found here -\u003e `.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.\n\n## Pagefind search\n\nThis 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 \u0026\u0026 postbuild.\n\nSearch 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`.\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/Masthead.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/artemkutsan/astro-citrus/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 can add the snippet in `src/components/BaseHead.astro`.\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\n**This theme was inspired by [Astro Theme Cactus](https://github.com/chrismwilliams/astro-theme-cactus) by [Chriss Williams](https://github.com/chrismwilliams). Huge thanks to Chriss for his amazing work and inspiration!** 🚀👏\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartemkutsan%2Fastro-citrus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartemkutsan%2Fastro-citrus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartemkutsan%2Fastro-citrus/lists"}