93 |
95 |
96 |
98 |
18 |
25 |
42 |
43 |
--------------------------------------------------------------------------------
/src/components/BackToPrevious.astro:
--------------------------------------------------------------------------------
1 | ---
2 | type Props = {
3 | href: string;
4 | };
5 |
6 | const { href } = Astro.props;
7 | ---
8 |
9 |
13 |
30 |
19 | {entry.data.title}
20 |
21 |
22 | {entry.data.description}
23 |
24 |
31 |
33 |
34 |
--------------------------------------------------------------------------------
/src/components/BackToTop.astro:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | ---
4 |
5 |
28 |
--------------------------------------------------------------------------------
/src/components/Callout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | interface Props {
3 | type?: "default" | "info" | "warning" | "error";
4 | }
5 | const { type = "default" } = Astro.props;
6 | let emoji = "💡";
7 | if (type === "info") {
8 | emoji = "ℹ️";
9 | } else if (type === "warning") {
10 | emoji = "⚠️";
11 | } else if (type === "error") {
12 | emoji = "🚨";
13 | }
14 |
15 | const baseClasses = "relative my-4 flex rounded border p-3";
16 | const typeClasses = {
17 | default:
18 | "border-orange-800 bg-orange-100 text-orange-950 dark:border-orange-200/20 dark:bg-orange-950/20 dark:text-orange-200",
19 | info: "border-blue-800 bg-blue-100 text-blue-950 dark:border-blue-200/20 dark:bg-blue-950/20 dark:text-blue-200",
20 | warning:
21 | "border-yellow-800 bg-yellow-100 text-yellow-950 dark:border-yellow-200/20 dark:bg-yellow-950/20 dark:text-yellow-200",
22 | error:
23 | "border-red-800 bg-red-100 text-red-950 dark:border-red-200/20 dark:bg-red-950/20 dark:text-red-200",
24 | };
25 | ---
26 |
27 |
28 | {emoji}
29 |
31 |
--------------------------------------------------------------------------------
/src/components/Container.astro:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | ---
4 |
5 |
10 |
11 |
45 |
12 | {SITE.TITLE} 🔬
13 |
14 |
15 |
44 |
6 | {
7 | prevPost?.id ? (
8 |
12 |
29 |
66 |
--------------------------------------------------------------------------------
/src/components/TableOfContents.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import TableOfContentsHeading from "./TableOfContentsHeading.astro";
3 |
4 | // https://kld.dev/building-table-of-contents/
5 | const { headings } = Astro.props;
6 | const toc = buildToc(headings);
7 |
8 | export interface Heading {
9 | depth: number;
10 | slug: string;
11 | text: string;
12 | }
13 |
14 | function buildToc(headings: Heading[]) {
15 | const toc: Heading[] = [];
16 | const parentHeadings = new Map();
17 | headings.forEach((h) => {
18 | const heading = { ...h, subheadings: [] };
19 | parentHeadings.set(heading.depth, heading);
20 | if (heading.depth === 2) {
21 | toc.push(heading);
22 | } else {
23 | parentHeadings.get(heading.depth - 1).subheadings.push(heading);
24 | }
25 | });
26 | return toc;
27 | }
28 | ---
29 |
30 | {prevPost?.data.title}
30 |
31 | ) : (
32 |
33 | )
34 | }
35 |
36 | {
37 | nextPost?.id ? (
38 |
42 |
59 | {nextPost?.data.title}
60 |
61 | ) : (
62 |
63 | )
64 | }
65 |
34 |
44 |
--------------------------------------------------------------------------------
/src/components/TableOfContentsHeading.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { Heading } from "./TableOfContents.astro";
3 | import Link from "./Link.astro";
4 |
5 | // https://kld.dev/building-table-of-contents/
6 |
7 | const { heading } = Astro.props;
8 | ---
9 |
10 | Table of Contents
38 | 43 |-
17 | {heading.subheadings.map((subheading: Heading) => (
18 |
110 |
111 | 
112 |
113 |
114 | 
115 |
116 |
117 |
118 | To deploy manually see [Astro's docs](https://docs.astro.build/en/guides/deploy/).
119 |
120 | ## Set up RSS
121 |
122 | Change the `site` option to the deployed site's URL.
123 |
124 | ```js
125 | // astro.config.mjs
126 |
127 | export default defineConfig({
128 | site: "https://astro-micro.vercel.app",
129 | integrations: [tailwind(), sitemap(), mdx(), pagefind()],
130 | markdown: {
131 | shikiConfig: {
132 | theme: "css-variables",
133 | },
134 | },
135 | });
136 | ```
137 |
138 | ## Set up Giscus
139 |
140 | 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.
141 |
142 | ```js
143 | // src/components/Giscus.astro
144 |
145 |
163 | ```
164 |
165 | To change the Giscus themes used, edit the `setGiscusTheme` function in `Head.astro`.
166 |
167 | ```js
168 | // src/components/Head.astro
169 |
170 | const setGiscusTheme = () => {
171 | const giscus = document.querySelector(".giscus-frame");
172 |
173 | const isDark = document.documentElement.classList.contains("dark");
174 |
175 | if (giscus) {
176 | const url = new URL(giscus.src);
177 | // Change "dark" and "light" to other Giscus themes
178 | url.searchParams.set("theme", isDark ? "dark" : "light");
179 | giscus.src = url.toString();
180 | }
181 | };
182 | ```
183 |
--------------------------------------------------------------------------------
/src/content/blog/02-blog-collection/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Blog Collection"
3 | description: "How to add posts to the blog."
4 | date: "2024-03-21"
5 | tags:
6 | - tutorial
7 | ---
8 |
9 | ---
10 |
11 | ## Working with the `blog` collection:
12 |
13 | The `blog` collection is found in `src/content/blog`.
14 |
15 | ```
16 | 📁 /src/content/blog
17 | └── 📁 post-1
18 | └── 📄 index.md
19 | └── 📁 post-2
20 | └── 📄 index.mdx
21 | ```
22 |
23 | In the above example, two blog posts will be generated with the folder name representing the id.
24 |
25 | - `https://example.com/blog/post-1`
26 | - `https://example.com/blog/post-2`
27 |
28 | ---
29 |
30 | ## Provide metadata
31 |
32 | Metadata is required for each post.
33 |
34 | ```astro
35 | ---
36 | title: "Blog Collection";
37 | description: "How to add posts to the blog.";
38 | date: "2024-03-21";
39 | draft: false;
40 | tags:
41 | - tutorial
42 | ---
43 | ```
44 |
45 | | Field | Req | Type | Remarks |
46 | | :---------- | :-- | :------ | :----------------------------------------------- |
47 | | title | Yes | string | Title of the content. Used in SEO and RSS. |
48 | | description | Yes | string | Description of the content. Used in SEO and RSS. |
49 | | date | Yes | string | Must be a valid date string (able to be parsed). |
50 | | draft | No | boolean | If draft: true, content will not be published. |
51 | | tags | No | string array | Tags to organize content |
52 |
53 | ---
54 |
55 | All that's left to do is write the content under the metadata.
56 |
57 | ```astro
58 | ---
59 | title: "Blog Collection";
60 | description: "How to add posts to the blog.";
61 | date: "2024-03-21";
62 | draft: false;
63 | tags:
64 | - tutorial
65 | ---
66 |
67 | ## Working with the blog collection
68 |
69 | ```
70 |
--------------------------------------------------------------------------------
/src/content/blog/03-projects-collection/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Projects Collection"
3 | description: "How to add projects to your portfolio."
4 | date: "2024-03-20"
5 | tags:
6 | - tutorial
7 | ---
8 |
9 | ---
10 |
11 | ## Working with the `projects` collection
12 |
13 | The `projects` collections is found in `src/content/projects`.
14 |
15 | ```
16 | 📁 /src/content/projects
17 | └── 📁 project-1
18 | └── 📄 index.md
19 | └── 📁 project-2
20 | └── 📄 index.mdx
21 | ```
22 |
23 | In the above example, two project posts will be generated with the folder name representing the id.
24 |
25 | - `https://example.com/projects/project-1`
26 | - `https://example.com/projects/project-2`
27 |
28 | ---
29 |
30 | ## Provide metadata
31 |
32 | ```astro
33 | ---
34 | title: "Astro Micro";
35 | description: "Astro Micro is an accessible theme for Astro.";
36 | date: "2024-03-20";
37 | draft: false;
38 | ---
39 | ```
40 |
41 | | Field | Req | Type | Remarks |
42 | | :---------- | :-- | :------ | :----------------------------------------------- |
43 | | title | Yes | string | Title of the content. Used in SEO and RSS. |
44 | | description | Yes | string | Description of the content. Used in SEO and RSS. |
45 | | date | Yes | string | Must be a valid date string (able to be parsed). |
46 | | draft | No | boolean | If draft: true, content will not be published. |
47 | | demoURL | No | string | Link to live project demo, if available. |
48 | | repoURL | No | string | Link to project repo, if available. |
49 |
50 | ---
51 |
52 | All that's left to do is write the content under the metadata.
53 |
54 | ```astro
55 | ---
56 | title: "Astro Micro";
57 | description: "Astro Micro is an accessible theme for Astro";
58 | date: "2024-03-20";
59 | draft: false;
60 | ---
61 |
62 | ## Astro Micro 🔬
63 |
64 | ```
65 |
--------------------------------------------------------------------------------
/src/content/blog/04-markdown-syntax/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Markdown syntax guide"
3 | description: "Get started writing content in Markdown."
4 | date: "2024-03-17"
5 | tag:
6 | - reference
7 | ---
8 |
9 | import Callout from "@/components/Callout.astro";
10 |
11 | ---
12 |
13 | ## Headings
14 |
15 | To create headings, use hash symbols (#) followed by a space. The number of hash symbols indicates the heading level.
16 |
17 |
112 |
113 |
114 |
115 |
116 | Heading 1
37 |Heading 2
38 |Heading 3
39 |Heading 4
40 |Heading 5
41 |Heading 6
42 | 43 | --- 44 | 45 | ## Paragraphs 46 | 47 | To create paragraphs, use a blank line to separate one or more lines of text. 48 | 49 | {/* prettier-ignore */} 50 | ```md 51 | 52 | I love Star Wars. 53 | 54 | My favourite is Episode III – Revenge of the Sith. 55 | 56 | ``` 57 | 58 | I love Star Wars. 59 | 60 | My favourite is Episode III – Revenge of the Sith. 61 | 62 | --- 63 | 64 | ## Italic 65 | 66 | Use one asterisk \(\*\) or underscore \(\_\) to italicize text. 67 | 68 | {/* prettier-ignore */} 69 | ```md 70 | I *love* Star Wars. 71 | My _favourite_ is Episode III – Revenge of the Sith. 72 | ``` 73 | 74 | I _love_ Star Wars. 75 | My _favourite_ is Episode III – Revenge of the Sith. 76 | 77 | --- 78 | 79 | ## Bold 80 | 81 | Use two asterisks \(\*\) or underscores \(\_\) to bold text. 82 | 83 | {/* prettier-ignore */} 84 | ```md 85 | I **love** Star Wars. 86 | My __favourite__ is Episode III – Revenge of the Sith. 87 | ``` 88 | 89 | I **love** Star Wars. 90 | My **favourite** is Episode III – Revenge of the Sith. 91 | 92 | --- 93 | 94 | ## Italic and Bold 95 | 96 | Use three asterisks \(\*\) or underscores \(\_\) to both bold and italicize text. 97 | 98 | {/* prettier-ignore */} 99 | ```md 100 | I ***love*** Star Wars. 101 | My ___favourite___ is Episode III – Revenge of the Sith. 102 | ``` 103 | 104 | I **_love_** Star Wars. 105 | My **_favourite_** is Episode III – Revenge of the Sith. 106 | 107 | --- 108 | 109 | ## Horizontal Rule 110 | 111 | Use three hyphens \(\-\), asterisks \(\*\), or underscores \(\_\) to create a horizontal rule. 112 | 113 | {/* prettier-ignore */} 114 | ```md 115 | 116 | --- 117 | 118 | *** 119 | 120 | ___ 121 | 122 | ``` 123 | 124 | --- 125 | 126 | --- 127 | 128 | --- 129 | 130 | ## Links 131 | 132 | To create a link, the link text in brackets \(\[\]\) and then follow it immediately with the URL in parentheses \(\(\)\). 133 | 134 | ```md 135 | Micro is a fork of [astro-nano](https://github.com/markhorn-dev/astro-nano). 136 | ``` 137 | 138 | Micro is a fork of [astro-nano](https://github.com/markhorn-dev/astro-nano). 139 | 140 | --- 141 | 142 | ## Ordered Lists 143 | 144 | To create an ordered list, add line items with numbers followed by periods. Use an indent to create a nested list. 145 | 146 | ```md 147 | 1. Item 1 148 | 2. Item 2 149 | 1. Sub item 1 150 | 2. Sub item 2 151 | 3. Item 3 152 | ``` 153 | 154 | 1. Item 1 155 | 2. Item 2 156 | 1. Sub item 1 157 | 2. Sub item 2 158 | 3. Item 3 159 | 160 | --- 161 | 162 | ## Unordered List 163 | 164 | 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. 165 | 166 | ```md 167 | - Item 1 168 | - Item 2 169 | - Sub item 1 170 | - Sub item 2 171 | - Item 3 172 | ``` 173 | 174 | - Item 1 175 | - Item 2 176 | - Sub item 1 177 | - Sub item 2 178 | - Item 3 179 | 180 | --- 181 | 182 | ## Images 183 | 184 | 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. 185 | 186 | ```md 187 |  188 | ``` 189 | 190 | ### Relative 191 | 192 | Use the `` pattern relative to the same folder as the markdown file. Notice the period. 193 | 194 | ```md 195 |  196 | ``` 197 | 198 |  199 | 200 | ### Public Image 201 | 202 | Use the `` pattern relative to the public folder. No period. 203 | 204 | ```md 205 |  206 | ``` 207 | 208 |  209 | 210 | ### External Image 211 | 212 | Use the `` pattern. 213 | 214 | ```md 215 |  216 | ``` 217 | 218 |  219 | 220 | --- 221 | 222 | ## Blockquotes 223 | 224 | 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. 225 | 226 | ```md 227 | > So this is how liberty dies... 228 | > 229 | > with thunderous applause. 230 | ``` 231 | 232 | > So this is how liberty dies... 233 | > 234 | > with thunderous applause. 235 | 236 | --- 237 | 238 | ## Strikethrough 239 | 240 | Use a tilde \(\~\) symbol to strikethrough text. 241 | 242 | ```md 243 | ~I don't like sand.~ It's coarse and rough and irritating. 244 | ``` 245 | 246 | ~I don't like sand.~ It's coarse and rough and irritating. 247 | 248 | --- 249 | 250 | ## Subscript 251 | 252 | Use the `` tag to denote subscript. 253 | 254 | ```md 255 | H2O 256 | ``` 257 | 258 | H2O 259 | 260 | --- 261 | 262 | ## Superscript 263 | 264 | Use the `` tag to denote superscript. 265 | 266 | ```md 267 | E=mc2 268 | ``` 269 | 270 | E=mc2 271 | 272 | --- 273 | 274 | ## Keyboard 275 | 276 | Use the `` tag to denote keys on the keyboard. 277 | 278 | ```md 279 | CTRL + ALT + Delete 280 | ``` 281 | 282 | CTRL + ALT + Delete 283 | 284 | --- 285 | 286 | ## Abbreviate 287 | 288 | Use the `` tag to denote abbreviation. 289 | 290 | ```md 291 | GIF 292 | ``` 293 | 294 | GIF 295 | 296 | --- 297 | 298 | ### Highlight 299 | 300 | Use the `` tag to denote highlighted text. 301 | 302 | ```md 303 | Do or do not. There is no try. 304 | ``` 305 | 306 | Do or do not. There is no try. 307 | 308 | --- 309 | 310 | ## Task Lists 311 | 312 | Combine a list with square brackets ([]) representing a checkbox. Typing `x` inside the brackets marks the task as complete. 313 | 314 | ```md 315 | - [x] Build a lightsaber 316 | - [ ] Pass the Jedi Trials 317 | - [ ] Train a padawan 318 | ``` 319 | 320 | - [x] Build a lightsaber 321 | - [ ] Pass the Jedi Trials 322 | - [ ] Train a padawan 323 | 324 | --- 325 | 326 | ## Tables 327 | 328 | 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. 329 | 330 | ```md 331 | | Item | Count | 332 | | :----- | ----: | 333 | | X-Wing | 1 | 334 | | Y-Wing | 2 | 335 | | A-Wing | 3 | 336 | ``` 337 | 338 | | Item | Count | 339 | | :----- | ----: | 340 | | X-Wing | 1 | 341 | | Y-Wing | 2 | 342 | | A-Wing | 3 | 343 | 344 | --- 345 | 346 | ## Footnotes 347 | 348 | Add a caret (^) and an identifier inside brackets \(\[\^1\]\). Identifiers can be numbers or words but can't contain spaces or tabs. 349 | 350 | ```md 351 | Here's a footnote, [^1] and here's another one. [^2] 352 | [^1]: This is the first footnote. 353 | [^2]: This is the second footnote. 354 | ``` 355 | 356 | Here's a footnote, [^1] and here's another one. [^2] 357 | [^1]: This is the first footnote. 358 | [^2]: This is the second footnote. 359 | 360 | See the bottom of this page to view the footnotes. 361 | 362 | --- 363 | 364 | ## Code 365 | 366 | To denote a word or phrase as code, enclose it in backticks (`). 367 | 368 | ```md 369 | `package.json` 370 | ``` 371 | 372 | `package.json` 373 | 374 | --- 375 | 376 | ## Code Blocks 377 | 378 | 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). 379 | 380 | ```` 381 | ```js 382 | function hello() { 383 | console.log("hello world"); 384 | } 385 | ``` 386 | ```` 387 | 388 | ```js 389 | function hello() { 390 | console.log("hello world"); 391 | } 392 | ``` 393 | 394 | --- 395 | 396 | ## Conclusion 397 | 398 | Refer to [markdownguide.org](https://www.markdownguide.org/) for best practices as well as extended syntax. 399 | 400 | --- 401 | -------------------------------------------------------------------------------- /src/content/blog/04-markdown-syntax/x-wing.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/trevortylerlee/astro-micro/a1618ee2a3b4761a18f463ff200a48b6d415609a/src/content/blog/04-markdown-syntax/x-wing.jpeg -------------------------------------------------------------------------------- /src/content/blog/05-mdx-syntax/component.astro: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | 11 | -------------------------------------------------------------------------------- /src/content/blog/05-mdx-syntax/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "MDX syntax guide" 3 | description: "Use interactive components in Markdown." 4 | date: "2024-03-16" 5 | tags: 6 | - reference 7 | --- 8 | 9 | import Callout from "@/components/Callout.astro"; 10 | 11 | --- 12 | 13 | MDX is an extension of Markdown with the ability to import `.astro`, 14 | `.jsx`, `.tsx` and other framework components you have integrated. 15 | 16 | This guide covers the basics of MDX syntax and how to use it, as well as a few examples. 17 | 18 | ## Example 1 19 | 20 | Importing a component from the `/components` directory. 21 | 22 | This component accepts a Javascript date object and format it as a string. 23 | 24 | ```astro 25 | import DateComp from "../../../components/FormattedDate.astro"; 26 | 27 |
11 | Go to home page
16 |
17 |
18 | 12 | 404: Page not found 13 |
14 | 15 |
57 | Back to blog
58 |
59 |
60 |
89 | {headings.length > 0 &&
61 |
71 |
62 |
64 | •
65 | {post.body && (
66 |
67 | {readingTime(post.body)}
68 |
69 | )}
70 | 72 | {post.data.title} 73 |
74 | { 75 | post.data.tags && post.data.tags?.length > 0 ? ( 76 |
77 | {post.data.tags.map((tag) => (
78 |
82 | {tag}
83 |
84 | ))}
85 |
86 | ) : null
87 | }
88 |
29 | Back to projects
30 |
31 |
32 |
64 |
33 |
43 |
34 |
36 | •
37 | {project.body && (
38 |
39 | {readingTime(project.body)}
40 |
41 | )}
42 | 44 | {project.data.title} 45 |
46 | { 47 | (project.data.demoURL || project.data.repoURL) && ( 48 | 61 | ) 62 | } 63 |
35 | All tags
36 |
43 | 37 | Posts tagged with "{id}" 38 |
39 |-
40 | {sortedPosts.map((post) =>
13 |
30 | All Tags
14 |
15 | {
16 | tags.map((tag) => (
17 |
21 | {tag}{" "}
22 |
23 | ({posts.filter((post) => post.data.tags?.includes(tag)).length})
24 |
25 |
26 | ))
27 | }
28 |
29 |