diff --git a/src/content/blog/00-micro-changelog/index.mdx b/src/content/blog/00-micro-changelog/index.mdx deleted file mode 100644 index 23fa2ad..0000000 --- a/src/content/blog/00-micro-changelog/index.mdx +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Everything new in Astro Micro -description: Features, enhancements, and changes. -date: '2024-05-09' ---- - - -import Callout from "@/components/Callout.astro"; - ---- - -## Pagefind search 🔎 - -[Pagefind](https://pagefind.app) is a search library for static websites. Micro uses [Sergey Shishkin's](https://github.com/shishkin) [astro-pagefind](https://github.com/shishkin/astro-pagefind) integration. This integration simplifies development and does not require any changes to the default build script. - -Press / or CTRL + K to open the search dialog. For Mac users, ⌘ + K can also be used. To dismiss the search dialog, press Esc or click on an area outside the component. - -### Build and develop - - - The site **must** be built at least once so Pagefind can index the content. - - -```bash -# Pagefind must index the site to function -npm run build -``` - -When developing you can continue to use `npm run dev` and Pagefind will use the index from the last available build. - ---- - -## Giscus comments 💬 - -[Giscus](https://giscus.app) leverages Github discussions to act as a comments system. To get Giscus working on your own website, see [here](/blog/01-getting-started#deploy-the-site). - ---- - -## Callout component 🆕 - - - Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation - labore consequat ullamco nostrud non. - - - - Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation - labore consequat ullamco nostrud non. - - - - Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation - labore consequat ullamco nostrud non. - - - - Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation - labore consequat ullamco nostrud non. - - ---- - -## UI enhancements 🎨 - -- Elements are styled and animate on focus -- Increased contrast in light mode -- Active theme is indicated by theme buttons -- Separate syntax highlight themes for light and dark mode -- Code blocks have a copy button -- Add pagination to the bottom of blog posts -- Create 404 page -- Add ToC component to posts - ---- - -## Other changes - -- Change fonts to Geist Sans and Geist Mono -- Switch base color from "stone" to "neutral" -- Change formatted date to use "long" option for month -- Minor spacing changes throughout -- Remove "work" collection and components - - If desired, you can get the code from [Astro Nano](https://github.com/markhorn-dev/astro-nano) -- Slightly increased link decoration offset -- Slightly sped-up animations -- Reversed animation -- Ensure posts use an h1 tag for post titles -- Tweaked typography - ---- - -## Issues ⚠️ - -### Active issues - -No active issues! - -### Closed issues - -- Fixed by [blopker](https://github.com/blopker): [ToC links are obscured by Header when scrolled to](https://github.com/trevortylerlee/astro-micro/issues/4) -- Fixed by [blopker](https://github.com/blopker): [Pagefind requires a refresh to function when ViewTransitions is enabled](https://github.com/trevortylerlee/astro-micro/issues/7) -- Fixed by [arastoonet](https://github.com/arastoonet): [Fix typo in README](https://github.com/trevortylerlee/astro-micro/pull/19) -- Fixed by [cgranier](https://github.com/cgranier): [Pagination links advance by slug/folder](https://github.com/trevortylerlee/astro-micro/issues/26) -- Fixed by [cgranier](https://github.com/cgranier): [Hides Table of Contents when there are no headings](https://github.com/trevortylerlee/astro-micro/pull/30) -- Fixed: [Giscus does not appear when switching blogs via post navigation](https://github.com/trevortylerlee/astro-micro/issues/32) -- Fixed: [Geist font renders incorrectly on Windows](https://github.com/trevortylerlee/astro-micro/issues/33) -- Fixed: [Pagination fails in Cloudflare Pages](https://github.com/trevortylerlee/astro-micro/issues/39) -- Fixed by [luciancah](https://github.com/luciancah): [Prevent Pagefind from double-indexing results](https://github.com/trevortylerlee/astro-micro/issues/40) -- Fixed by [luciancah](https://github.com/luciancah): [Pagefind should close if a result is clicked](https://github.com/trevortylerlee/astro-micro/issues/43) -- Fixed: [Implement tags](https://github.com/trevortylerlee/astro-micro/issues/70) -- Fixed by [anaxite](https://github.com/anaxite): [Update Astro to 5.0](https://github.com/trevortylerlee/astro-micro/issues/73) -- Fixed by [MoyaF](https://github.com/MoyaF): [Table of Contents links not working](https://github.com/trevortylerlee/astro-micro/issues/75) -- Fixed by [antoniovalentini](https://github.com/antoniovalentini): [Possible bugs due to outdated Astro version 5.0.3](https://github.com/trevortylerlee/astro-micro/issues/78) - diff --git a/src/content/blog/01-getting-started/index.md b/src/content/blog/01-getting-started/index.md deleted file mode 100644 index 9ed1dce..0000000 --- a/src/content/blog/01-getting-started/index.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Getting started -description: Hit the ground running. -date: '2024-03-22' -tags: - - tutorial ---- ---- - -## Install astro-micro - -Clone the [Astro Micro repository](https://github.com/trevortylerlee/astro-micro.git). - -```sh -git clone https://github.com/trevortylerlee/astro-micro.git my-astro-micro -``` - -```sh -cd my-astro-micro -``` - -```sh -npm i -``` - -```sh -npm run build -``` - -```sh -npm run dev -``` - -## Customize the website metadata - -To change the website metadata, edit `src/consts.ts`. - -```ts -// src/consts.ts - -export const SITE: Site = { - NAME: "Astro Micro", - DESCRIPTION: "Astro Micro is an accessible theme for Astro.", - EMAIL: "trevortylerlee@gmail.com", - NUM_POSTS_ON_HOMEPAGE: 3, - NUM_PROJECTS_ON_HOMEPAGE: 3, -}; -``` - -| Field | Req | Description | -| :----------- | :-- | :--------------------------------------------------- | -| TITLE | Yes | Displayed in header and footer. Used in SEO and RSS. | -| DESCRIPTION | Yes | Used in SEO and RSS. | -| EMAIL | Yes | Displayed in contact section. | -| NUM_POSTS | Yes | Limit number of posts on home page. | -| NUM_PROJECTS | Yes | Limit number of projects on home page. | - ---- - -## Customize metadata for individual pages - -```ts -// src/consts.ts - -export const ABOUT: Metadata = { - TITLE: "About", - DESCRIPTION: "Astro Micro is a fork of Astro Nano.", -}; -``` - -| Field | Req | Description | -| :---------- | :-- | :--------------------------------------------- | -| TITLE | Yes | Displayed in browser tab. Used in SEO and RSS. | -| DESCRIPTION | Yes | Used in SEO and RSS. | - ---- - -## Add your social media links - -```ts -// src/consts.ts - -export const SOCIALS: Socials = [ - { - NAME: "twitter-x", - HREF: "https://twitter.com/boogerbuttcheeks", - }, - { - NAME: "github", - HREF: "https://github.com/trevortylerlee", - }, - { - NAME: "linkedin", - HREF: "https://www.linkedin.com/in/trevortylerlee", - }, -]; -``` - -| Field | Req | Description | -| :---- | :-- | :-------------------------------------- | -| NAME | Yes | Displayed in contact section as a link. | -| HREF | Yes | External url to social media profile. | - -## Deploy the site - -To set up RSS and Giscus, it's easier if the site is deployed and has a URL for you to use. Instantly deploy to Vercel or Netlify by clicking the buttons below. - -
- - - - - - -
- -To deploy manually see [Astro's docs](https://docs.astro.build/en/guides/deploy/). - -## Set up RSS - -Change the `site` option to the deployed site's URL. - -```js -// astro.config.mjs - -export default defineConfig({ - site: "https://astro-micro.vercel.app", - integrations: [tailwind(), sitemap(), mdx(), pagefind()], - markdown: { - shikiConfig: { - theme: "css-variables", - }, - }, -}); -``` - -## Set up Giscus - -Follow the steps at [giscus.app](https://giscus.app). Once you get your custom Giscus script from that site, go to `Giscus.astro` and replace that script with your own. - -```js -// src/components/Giscus.astro - - -``` - -To change the Giscus themes used, edit the `setGiscusTheme` function in `Head.astro`. - -```js -// src/components/Head.astro - -const setGiscusTheme = () => { - const giscus = document.querySelector(".giscus-frame"); - - const isDark = document.documentElement.classList.contains("dark"); - - if (giscus) { - const url = new URL(giscus.src); - // Change "dark" and "light" to other Giscus themes - url.searchParams.set("theme", isDark ? "dark" : "light"); - giscus.src = url.toString(); - } -}; -``` - diff --git a/src/content/blog/02-blog-collection/index.md b/src/content/blog/02-blog-collection/index.md deleted file mode 100644 index f8650a1..0000000 --- a/src/content/blog/02-blog-collection/index.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Blog Collection -description: How to add posts to the blog. -date: '2024-03-21' -tags: - - tutorial ---- - - ---- - -## Working with the `blog` collection: - -The `blog` collection is found in `src/content/blog`. - -``` -📁 /src/content/blog -└── 📁 post-1 - └── 📄 index.md -└── 📁 post-2 - └── 📄 index.mdx -``` - -In the above example, two blog posts will be generated with the folder name representing the id. - -- `https://example.com/blog/post-1` -- `https://example.com/blog/post-2` - ---- - -## Provide metadata - -Metadata is required for each post. - -```astro ---- -title: "Blog Collection"; -description: "How to add posts to the blog."; -date: "2024-03-21"; -draft: false; -tags: - - tutorial ---- -``` - -| Field | Req | Type | Remarks | -| :---------- | :-- | :------ | :----------------------------------------------- | -| title | Yes | string | Title of the content. Used in SEO and RSS. | -| description | Yes | string | Description of the content. Used in SEO and RSS. | -| date | Yes | string | Must be a valid date string (able to be parsed). | -| draft | No | boolean | If draft: true, content will not be published. | -| tags | No | string array | Tags to organize content | - ---- - -All that's left to do is write the content under the metadata. - -```astro ---- -title: "Blog Collection"; -description: "How to add posts to the blog."; -date: "2024-03-21"; -draft: false; -tags: - - tutorial ---- - -## Working with the blog collection - -``` - diff --git a/src/content/blog/03-projects-collection/index.md b/src/content/blog/03-projects-collection/index.md deleted file mode 100644 index f7240d1..0000000 --- a/src/content/blog/03-projects-collection/index.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Projects Collection -description: How to add projects to your portfolio. -date: '2024-03-20' -tags: - - tutorial ---- - - ---- - -## Working with the `projects` collection - -The `projects` collections is found in `src/content/projects`. - -``` -📁 /src/content/projects -└── 📁 project-1 - └── 📄 index.md -└── 📁 project-2 - └── 📄 index.mdx -``` - -In the above example, two project posts will be generated with the folder name representing the id. - -- `https://example.com/projects/project-1` -- `https://example.com/projects/project-2` - ---- - -## Provide metadata - -```astro ---- -title: "Astro Micro"; -description: "Astro Micro is an accessible theme for Astro."; -date: "2024-03-20"; -draft: false; ---- -``` - -| Field | Req | Type | Remarks | -| :---------- | :-- | :------ | :----------------------------------------------- | -| title | Yes | string | Title of the content. Used in SEO and RSS. | -| description | Yes | string | Description of the content. Used in SEO and RSS. | -| date | Yes | string | Must be a valid date string (able to be parsed). | -| draft | No | boolean | If draft: true, content will not be published. | -| demoURL | No | string | Link to live project demo, if available. | -| repoURL | No | string | Link to project repo, if available. | - ---- - -All that's left to do is write the content under the metadata. - -```astro ---- -title: "Astro Micro"; -description: "Astro Micro is an accessible theme for Astro"; -date: "2024-03-20"; -draft: false; ---- - -## Astro Micro 🔬 - -``` - diff --git a/src/content/blog/04-markdown-syntax/index.mdx b/src/content/blog/04-markdown-syntax/index.mdx deleted file mode 100644 index 1150a12..0000000 --- a/src/content/blog/04-markdown-syntax/index.mdx +++ /dev/null @@ -1,402 +0,0 @@ ---- -title: Markdown syntax guide -description: Get started writing content in Markdown. -date: '2024-03-17' -tag: - - reference ---- - - -import Callout from "@/components/Callout.astro"; - ---- - -## Headings - -To create headings, use hash symbols (#) followed by a space. The number of hash symbols indicates the heading level. - - - Use `h2` tags instead of `h1` tags in the post. Too many `h1` tags on a single - page can impact SEO. The post title serves as the `h1`. - - -```md -# Heading 1 - -## Heading 2 - -### Heading 3 - -#### Heading 4 - -##### Heading 5 - -###### Heading 6 -``` - -

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
- ---- - -## Paragraphs - -To create paragraphs, use a blank line to separate one or more lines of text. - -{/* prettier-ignore */} -```md - -I love Star Wars. - -My favourite is Episode III – Revenge of the Sith. - -``` - -I love Star Wars. - -My favourite is Episode III – Revenge of the Sith. - ---- - -## Italic - -Use one asterisk \(\*\) or underscore \(\_\) to italicize text. - -{/* prettier-ignore */} -```md -I *love* Star Wars. -My _favourite_ is Episode III – Revenge of the Sith. -``` - -I _love_ Star Wars. -My _favourite_ is Episode III – Revenge of the Sith. - ---- - -## Bold - -Use two asterisks \(\*\) or underscores \(\_\) to bold text. - -{/* prettier-ignore */} -```md -I **love** Star Wars. -My __favourite__ is Episode III – Revenge of the Sith. -``` - -I **love** Star Wars. -My **favourite** is Episode III – Revenge of the Sith. - ---- - -## Italic and Bold - -Use three asterisks \(\*\) or underscores \(\_\) to both bold and italicize text. - -{/* prettier-ignore */} -```md -I ***love*** Star Wars. -My ___favourite___ is Episode III – Revenge of the Sith. -``` - -I **_love_** Star Wars. -My **_favourite_** is Episode III – Revenge of the Sith. - ---- - -## Horizontal Rule - -Use three hyphens \(\-\), asterisks \(\*\), or underscores \(\_\) to create a horizontal rule. - -{/* prettier-ignore */} -```md - ---- - -*** - -___ - -``` - ---- - ---- - ---- - -## Links - -To create a link, the link text in brackets \(\[\]\) and then follow it immediately with the URL in parentheses \(\(\)\). - -```md -Micro is a fork of [astro-nano](https://github.com/markhorn-dev/astro-nano). -``` - -Micro is a fork of [astro-nano](https://github.com/markhorn-dev/astro-nano). - ---- - -## Ordered Lists - -To create an ordered list, add line items with numbers followed by periods. Use an indent to create a nested list. - -```md -1. Item 1 -2. Item 2 - 1. Sub item 1 - 2. Sub item 2 -3. Item 3 -``` - -1. Item 1 -2. Item 2 - 1. Sub item 1 - 2. Sub item 2 -3. Item 3 - ---- - -## Unordered List - -To create an unordered list, add a hyphen \(\-\), an asterisk \(\*\), or a plus sign \(\+\) in front of line items. Don't mix. Use an indent to create a nested list. - -```md -- Item 1 -- Item 2 - - Sub item 1 - - Sub item 2 -- Item 3 -``` - -- Item 1 -- Item 2 - - Sub item 1 - - Sub item 2 -- Item 3 - ---- - -## Images - -To add an image, add an exclamation mark (!), followed by alt text in brackets ([]), and the path or URL to the image asset in parentheses. - -```md -![altText](pathToImage) -``` - -### Relative - -Use the `![altText](./image.*)` pattern relative to the same folder as the markdown file. Notice the period. - -```md -![X-Wing Starfighter](./x-wing.jpeg) -``` - -![X-Wing Starfighter](./x-wing.jpeg) - -### Public Image - -Use the `![altText](/image.*)` pattern relative to the public folder. No period. - -```md -![Y-Wing Starfighter](/y-wing.jpeg) -``` - -![Y-Wing Starfighter](/y-wing.jpeg) - -### External Image - -Use the `![altText](url)` pattern. - -```md -![Naboo N-1 Starfighter](https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg) -``` - -![Naboo N-1 Starfighter](https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg) - ---- - -## Blockquotes - -To add a blockquote add the greater-than character \(\>\) before a paragraph. For multi-line blockquotes, add additional greater-than character for each line and include an empty spacer line. - -```md -> So this is how liberty dies... -> -> with thunderous applause. -``` - -> So this is how liberty dies... -> -> with thunderous applause. - ---- - -## Strikethrough - -Use a tilde \(\~\) symbol to strikethrough text. - -```md -~I don't like sand.~ It's coarse and rough and irritating. -``` - -~I don't like sand.~ It's coarse and rough and irritating. - ---- - -## Subscript - -Use the `` tag to denote subscript. - -```md -H2O -``` - -H2O - ---- - -## Superscript - -Use the `` tag to denote superscript. - -```md -E=mc2 -``` - -E=mc2 - ---- - -## Keyboard - -Use the `` tag to denote keys on the keyboard. - -```md -CTRL + ALT + Delete -``` - -CTRL + ALT + Delete - ---- - -## Abbreviate - -Use the `` tag to denote abbreviation. - -```md -GIF -``` - -GIF - ---- - -### Highlight - -Use the `` tag to denote highlighted text. - -```md -Do or do not. There is no try. -``` - -Do or do not. There is no try. - ---- - -## Task Lists - -Combine a list with square brackets ([]) representing a checkbox. Typing `x` inside the brackets marks the task as complete. - -```md -- [x] Build a lightsaber -- [ ] Pass the Jedi Trials -- [ ] Train a padawan -``` - -- [x] Build a lightsaber -- [ ] Pass the Jedi Trials -- [ ] Train a padawan - ---- - -## Tables - -Use three or more hyphens (-) for the column headers and use pipes (|) to separate each column. You can align text in the columns to the left, right, or center by adding a colon (:) to the left, right, or on both side of the hyphens. - -```md -| Item | Count | -| :----- | ----: | -| X-Wing | 1 | -| Y-Wing | 2 | -| A-Wing | 3 | -``` - -| Item | Count | -| :----- | ----: | -| X-Wing | 1 | -| Y-Wing | 2 | -| A-Wing | 3 | - ---- - -## Footnotes - -Add a caret (^) and an identifier inside brackets \(\[\^1\]\). Identifiers can be numbers or words but can't contain spaces or tabs. - -```md -Here's a footnote, [^1] and here's another one. [^2] -[^1]: This is the first footnote. -[^2]: This is the second footnote. -``` - -Here's a footnote, [^1] and here's another one. [^2] -[^1]: This is the first footnote. -[^2]: This is the second footnote. - -See the bottom of this page to view the footnotes. - ---- - -## Code - -To denote a word or phrase as code, enclose it in backticks (`). - -```md -`package.json` -``` - -`package.json` - ---- - -## Code Blocks - -Denote a code block by wrapping a section of valid code in triple backticks (`). To enable syntax highlighting, type the shorthand symbol for the language after the first three backticks. [Reference for shorthand symbols](https://shiki.style/languages). - -```` -```js - function hello() { - console.log("hello world"); - } -``` -```` - -```js -function hello() { - console.log("hello world"); -} -``` - ---- - -## Conclusion - -Refer to [markdownguide.org](https://www.markdownguide.org/) for best practices as well as extended syntax. - ---- - diff --git a/src/content/blog/04-markdown-syntax/x-wing.jpeg b/src/content/blog/04-markdown-syntax/x-wing.jpeg deleted file mode 100644 index 7f0ef0d..0000000 Binary files a/src/content/blog/04-markdown-syntax/x-wing.jpeg and /dev/null differ diff --git a/src/content/blog/05-mdx-syntax/component.astro b/src/content/blog/05-mdx-syntax/component.astro deleted file mode 100644 index 3a6aac7..0000000 --- a/src/content/blog/05-mdx-syntax/component.astro +++ /dev/null @@ -1,10 +0,0 @@ ---- - ---- - - diff --git a/src/content/blog/05-mdx-syntax/index.mdx b/src/content/blog/05-mdx-syntax/index.mdx deleted file mode 100644 index 6140346..0000000 --- a/src/content/blog/05-mdx-syntax/index.mdx +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: MDX syntax guide -description: Use interactive components in Markdown. -date: '2024-03-16' -tags: - - reference - - client-directives - - markdown-and-mdx-pages ---- - - -import Callout from "@/components/Callout.astro"; - ---- - -MDX is an extension of Markdown with the ability to import `.astro`, -`.jsx`, `.tsx` and other framework components you have integrated. - -This guide covers the basics of MDX syntax and how to use it, as well as a few examples. - -## Example 1 - -Importing a component from the `/components` directory. - -This component accepts a Javascript date object and format it as a string. - -```astro -import DateComp from "@/components/FormattedDate.astro"; - - -``` - -import FormattedDate from "@/components/FormattedDate.astro"; - - - ---- - -## Example 2 - -Importing a component from a relative path to your content. - -This component displays an alert when the button is clicked. - -```astro -import RelativeComponent from "./component.astro"; - - -``` - -import RelativeComponent from "./component.astro"; - - - ---- - -By default Micro has zero frameworks installed. If you install a framework, components of that framework can be used in MDX files. - - - Don't forget to use [client - directives](https://docs.astro.build/en/reference/directives-reference/) - to make framework components interactive. - - -```astro - -``` - ---- - -## More Links - -- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx) -- [Astro Framework Integrations](https://docs.astro.build/en/guides/integrations-guide) -- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/) -- [Client Directives](https://docs.astro.build/en/reference/directives-reference/) - diff --git a/src/content/blog/06-year-sorting-example/index.md b/src/content/blog/06-year-sorting-example/index.md deleted file mode 100644 index a42876b..0000000 --- a/src/content/blog/06-year-sorting-example/index.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Year sorting example -description: Nano groups posts by year. -date: '2023-12-31' -tags: - - example ---- - - -This post is to demonstrate the year sorting capabilities. - diff --git a/src/content/blog/07-draft-example/index.md b/src/content/blog/07-draft-example/index.md deleted file mode 100644 index 1e32a9d..0000000 --- a/src/content/blog/07-draft-example/index.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Draft example -description: Setting draft flag to true to hide this post. -date: '2022-12-31' -draft: false -tags: - - example ---- - - -This post also demonstrates the year sorting capabilities. - -Try setting this file's metadata to `draft: true`. - diff --git a/src/content/blog/08-prev-next-order-example/index.md b/src/content/blog/08-prev-next-order-example/index.md deleted file mode 100644 index e0def90..0000000 --- a/src/content/blog/08-prev-next-order-example/index.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Chronological pagination example -description: Pagination works regardless of folder name. -date: '2024-03-21' -tags: - - example ---- - - -This post should show up in proper chronological order even though its folder comes last in the `content/blog` directory. - -The `Previous Post` and `Next Post` buttons under each blog post should also keep the proper chronological order, based on the frontmatter `date` field. - diff --git a/src/content/blog/09-test-sync/index.md b/src/content/blog/09-test-sync/index.md deleted file mode 100644 index dd027c1..0000000 --- a/src/content/blog/09-test-sync/index.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Testing the sync pipeline -description: A test post to verify the Obsidian → Astro sync. -date: '2026-02-20' -tags: - - test ---- - - -## Hello from Obsidian - -This post was written in Obsidian and synced automatically to the micro blog. - -
-

💡 How it works

-

The sync service transforms Obsidian markdown into Astro-compatible content.

-
- -That's pretty cool, right? - -test - - -