Blogs/micro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

sync: update content from obsidian vault

Browse source
This commit is contained in:
Obsidian Sync 2026-02-20 01:01:48 +00:00
parent c32a14ce5a
commit 7d502cc5e1
12 changed files with 0 additions and 984 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/content/blog/00-micro-changelog/index.mdx
View file

@ -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 <kbd>/</kbd> or <kbd>CTRL</kbd> + <kbd>K</kbd> to open the search dialog. For Mac users, <kbd>⌘</kbd> + <kbd>K</kbd> can also be used. To dismiss the search dialog, press <kbd>Esc</kbd> or click on an area outside the component.
### Build and develop
<Callout type="error">
The site **must** be built at least once so Pagefind can index the content.
</Callout>
```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 🆕
<Callout>
Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation
labore consequat ullamco nostrud non.
</Callout>
<Callout type="info">
Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation
labore consequat ullamco nostrud non.
</Callout>
<Callout type="warning">
Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation
labore consequat ullamco nostrud non.
</Callout>
<Callout type="error">
Adipisicing et officia reprehenderit fugiat occaecat cupidatat exercitation
labore consequat ullamco nostrud non.
</Callout>
---
## 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)

182
src/content/blog/01-getting-started/index.md
View file

@ -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.
<div class="flex gap-2">
<a target="_blank" aria-label="Deploy with Vercel" href="https://vercel.com/new/clone?repository-url=https://github.com/trevortylerlee/astro-micro">
<img src="/deploy_vercel.svg" />
</a>
<a target="_blank" aria-label="Deploy with Netlify" href="https://app.netlify.com/start/deploy?repository=https://github.com/trevortylerlee/astro-micro">
<img src="/deploy_netlify.svg" />
</a>
</div>
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
<script
is:inline
src="https://giscus.app/client.js"
data-repo="trevortylerlee/astro-micro"
data-repo-id="R_kgDOL_6l9Q"
data-category="Announcements"
data-category-id="DIC_kwDOL_6l9c4Cfk55"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="en"
data-loading="lazy"
crossorigin="anonymous"
async
></script>
```
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();
}
};
```

71
src/content/blog/02-blog-collection/index.md
View file

@ -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
<!-- content -->
```

66
src/content/blog/03-projects-collection/index.md
View file

@ -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 🔬
<!-- content -->
```

402
src/content/blog/04-markdown-syntax/index.mdx
View file

@ -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.
<Callout>
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`.
</Callout>
```md
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
---
## Paragraphs
To create paragraphs, use a blank line to separate one or more lines of text.
{/* prettier-ignore */}
```md
<!-- empty line -->
I love Star Wars.
<!-- empty line -->
My favourite is Episode III – Revenge of the Sith.
<!-- empty line -->
```
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
<!-- empty line -->
---
<!-- empty line -->
***
<!-- empty line -->
___
<!-- empty line -->
```
---
---
---
## 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 `<sub>` tag to denote subscript.
```md
H<sub>2</sub>O
```
H<sub>2</sub>O
---
## Superscript
Use the `<sup>` tag to denote superscript.
```md
E=mc<sup>2</sup>
```
E=mc<sup>2</sup>
---
## Keyboard
Use the `<kbd>` tag to denote keys on the keyboard.
```md
<kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd>
```
<kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd>
---
## Abbreviate
Use the `<abbr>` tag to denote abbreviation.
```md
<abbr title="Graphics Interchange Format">GIF</abbr>
```
<abbr title="Graphics Interchange Format">GIF</abbr>
---
### Highlight
Use the `<mark>` tag to denote highlighted text.
```md
Do or do not. <mark>There is no try.</mark>
```
Do or do not. <mark>There is no try.</mark>
---
## 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.
---

BIN
src/content/blog/04-markdown-syntax/x-wing.jpeg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 203 KiB

10
src/content/blog/05-mdx-syntax/component.astro
View file

@ -1,10 +0,0 @@
---
---
<button
onclick="alert(`You clicked the button!`)"
class="border border-black/10 p-2 transition-colors duration-300 ease-in-out hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/10"
>
Relative Button
</button>

77
src/content/blog/05-mdx-syntax/index.mdx
View file

@ -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";
<DateComp date={new Date()} />
```
import FormattedDate from "@/components/FormattedDate.astro";
<FormattedDate date={new Date()} />
---
## 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";
<RelativeComponent />
```
import RelativeComponent from "./component.astro";
<RelativeComponent />
---
By default Micro has zero frameworks installed. If you install a framework, components of that framework can be used in MDX files.
<Callout>
Don't forget to use [client
directives](https://docs.astro.build/en/reference/directives-reference/)
to make framework components interactive.
</Callout>
```astro
<ReactComponent client:load />
```
---
## 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/)

11
src/content/blog/06-year-sorting-example/index.md
View file

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

14
src/content/blog/07-draft-example/index.md
View file

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

13
src/content/blog/08-prev-next-order-example/index.md
View file

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

24
src/content/blog/09-test-sync/index.md
View file

@ -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.
<div class="callout callout-note">
<p class="callout-title">💡 How it works</p>
<p>The sync service transforms Obsidian markdown into Astro-compatible content.</p>
</div>
That's <mark>pretty cool</mark>, right?
test