z0x/blog.z0x.ca
Code Actions

chore: cleanup, shadcn

Browse source
This commit is contained in:
enscribe 2024-09-10 14:24:09 -07:00
parent 230dca64ca
commit ea68d4f02f
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
38 changed files with 1073 additions and 1378 deletions
Download patch file Download diff file Expand all files Collapse all files

270
src/content/blog/00-academics-getting-started.md
View file

@ -1,270 +0,0 @@
---
title: '[Tutorial] Getting started with Astro-Micro-Academics'
description: 'Hit the ground running.'
date: '2024-07-26'
tags: ['guide', 'tutorial']
---
:exclamation: Also refer to [Old] posts to see examples and changes. Some changes are removed in this version, which are marked.
## Install Astro-Micro-Academics
Clone the [repository](https://github.com/jingwu2121/astro-micro-academic).
```sh
git clone https://github.com/jingwu2121/astro-micro-academic.git
```
```sh
cd astro-micro-academic
```
```sh
npm i
```
Run local server
```sh
npm run dev
```
## Update the Homepage
Update your home page in `src/pages/index.astro`.
## CV & About
Update your CV and About page in `src/pages/cv.astro` and `src/pages/about.astro`.
```ts
const works = [
{
company: 'Company A',
time: '2022-Present',
job_title: 'Research Scientist',
location: 'London, UK',
description: 'Your Notes about the job',
},
{
company: 'Company A',
time: '2022-Present',
job_title: 'Research Scientist',
location: 'London, UK',
description: 'Your Notes about the job',
},
]
const educations = [
{
school: 'University 1',
time: '2022-Present',
job_title: 'BEng in Electronic Information Engineering',
location: 'London, UK',
description: 'Your Notes about the study',
},
]
```
## Social Links
Update the social links in `src/components/SocialIcons.astro`, simply replace the `URL`.
## Publications metadata
Metadata is required for each post. Add a new `publication.md` to automartically add a publication on the website. Publications are sorted by date.
```astro
---
title: 'Diffusion Models Beat GANs on Image Synthesis'
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias earum quod quo repellat blanditiis est iste eos dolorem! Voluptatibus corporis totam sed unde est iusto neque iure natus adipisci omnis.'
date: '2024-07-26'
authors: 'John B*, Jon A*, Frank C, John B, Jon A, Frank C'
paperURL: 'Paper: https://astro-sphere-demo.vercel.app'
codeURL: 'Code: '
webURL: 'Web: https://github.com/markhorn-dev/astro-sphere'
dataURL: 'Data: https://github.com/markhorn-dev/astro-sphere'
img: '/rupert-cat.gif'
imgAlt: 'Paper Teaser'
pub: 'ECCV2024'
---
```
| 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). |
| authors | Yes | string | A string seperated by comma. |
| paperURL, codeURL, webURL, dataURL | Yes | string | A string seperated by ": ". If you don't have a link to add, leave the link part blank, e.g. `codeURL: "Code: "` |
| img | Yes | string | Path to teaser image. |
| imgAlt | Yes | string | Description of the image. |
| pub | Yes | string | The conference or journal |
## Blog metadata
Metadata is required for each post.
```astro
---
title: 'Blog Collection'
description: 'How to add posts to the blog.'
date: '2024-03-21'
tags: ['guide', 'tutorial']
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). |
| tags | Yes | list | A list of strings |
| draft | No | boolean | If draft: true, content will not be published. |
## Customize the website metadata and set up RSS
To change the website metadata, edit `src/consts.ts`.
```ts
// src/consts.ts
export const SITE: Site = {
TITLE: 'Astro Micro Academics',
DESCRIPTION: 'Astro Micro Academics is for academic user.',
EMAIL: 'youremial@gmail.com',
NUM_POSTS_ON_HOMEPAGE: 2,
NUM_PUBLICATIONS_ON_HOMEPAGE: 3,
SITEURL: 'https://astro-micro-academic.vercel.app', // Update here to link the RSS icon to your website RSS
}
```
| 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_PUBLICATIONS | Yes | Limit number of research on home page. |
| SITEURL | Yes | Your website URL |
### RSS Post
Please tag the post of RSS feed with tag `"rss-feed"`, other posts are not included in the RSS.
---
## Custom metadata for highlighted author in your paper
```ts
// src/consts.ts
export const HIGHLIGHTAUTHOR = 'John B'
```
## Customize metadata for individual pages
```ts
// src/consts.ts
export const HOME: Metadata = {
TITLE: 'Home',
DESCRIPTION: 'Astro Micro is an accessible theme for Astro.',
}
export const BLOG: Metadata = {
TITLE: 'Blog',
DESCRIPTION: 'A collection of articles on topics I am passionate about.',
}
export const RESEARCH: Metadata = {
TITLE: 'Publications',
DESCRIPTION:
'A collection of my publications with links to paper, repositories and live demos.',
}
export const CV: Metadata = {
TITLE: 'CV',
DESCRIPTION: 'your cv',
}
export const TAGS: Metadata = {
TITLE: 'TAGS',
DESCRIPTION: 'blog tag filter',
}
export const ABOUT: Metadata = {
TITLE: 'ABOUT',
DESCRIPTION: 'A self-intro',
}
```
| Field | Req | Description |
| :---------- | :-- | :--------------------------------------------- |
| TITLE | Yes | Displayed in browser tab. Used in SEO and RSS. |
| DESCRIPTION | Yes | Used in SEO and RSS. |
---
## 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/).
To deploy to Github, see [here](https://docs.astro.build/en/guides/deploy/github/).
## Set up Giscus (from Astro Micro)
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()
}
}
```

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

@ -1,105 +0,0 @@
---
title: '[Old] Everything new in Astro Micro'
description: 'Features, enhancements, and changes.'
date: '2024-05-09'
tags: ['astro-micro']
---
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 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
- [PostNavigation.astro is broken when deployed with Cloudflare Pages](https://github.com/trevortylerlee/astro-micro/issues/39)
### Closed issues
- 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 [blopker](https://github.com/blopker): [ToC links are obscured by Header when scrolled to](https://github.com/trevortylerlee/astro-micro/issues/4)
- 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 by [arastoonet](https://github.com/arastoonet): [Fix typo in README](https://github.com/trevortylerlee/astro-micro/pull/19)
- Fixed by [luciancah](https://github.com/luciancah): [Prevent Pagefind from double-indexing results](https://github.com/trevortylerlee/astro-micro/issues/40)

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

@ -1,181 +0,0 @@
---
title: '[Old] Getting started with Astro-Micro'
description: 'Hit the ground running.'
date: '2024-03-22'
tags: ['guide', 'start']
---
---
## 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_PUBLICATIONS_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_PUBLICATIONS | Yes | Limit number of research 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~~ Removed in Micro Academics
```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~~ New config in Astro Micro Academics
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()
}
}
```

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

@ -1,63 +0,0 @@
---
title: '[Old] Blog Collection'
description: 'How to add posts to the blog.'
date: '2024-03-21'
tags: ['aa']
---
---
## 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 slug.
- `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
---
```
| 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. |
---
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
---
## Working with the blog collection
<!-- content -->
```

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

@ -1,398 +0,0 @@
---
title: '[Old] Markdown syntax guide'
description: 'Get started writing content in Markdown.'
date: '2024-03-17'
---
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>

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

@ -1,71 +0,0 @@
---
title: '[Old] MDX syntax guide'
description: 'Use interactive components in Markdown.'
date: '2024-03-16'
---
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/#client-directives)
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/#markdown-and-mdx-pages)
- [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives)

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

@ -1,7 +0,0 @@
---
title: '[Old] Year sorting example'
description: 'Nano groups posts by year.'
date: '2023-12-31'
---
This post is to demonstrate the year sorting capabilities.

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

@ -1,10 +0,0 @@
---
title: '[Old] Draft example'
description: 'Setting draft flag to true to hide this post.'
date: '2022-12-31'
draft: false
---
This post also demonstrates the year sorting capabilities.
Try setting this file's metadata to `draft: true`.

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

@ -1,10 +0,0 @@
---
title: '[Old] Chronological pagination example'
description: 'Pagination works regardless of folder name.'
date: '2024-03-21'
draft: false
---
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.