DOCSEARCHbyAlgolia
Submit Docs

Chiyu's Blog

website·Indexed 31 days ago

https://blog.chiyu.site

A personal blog featuring technical articles on TypeScript template literals, MDX, and Markdown style guides in Astro, alongside personal records and travel logs.

Tokens
2K
Snippets
20
Records
24
Agent score
48%

What's inside Chiyu's Blog

  1. Tech stack used for blog.chiyu.site

    The website is built using Astro as the primary framework and React as the secondary framework. Additional libraries and tools include Unocss, Jotai, Framer Motion, and AnimateCss. The site uses Maple Font for typography and its UI design is largely based on the Gyoza template by lxchapu.

  2. Use MDX to embed JSX components in Astro content

    MDX allows you to mix JavaScript and JSX syntax directly within Markdown content, enabling the use of interactive UI components (such as charts or alerts) inside your documents. In this theme, the @astrojs/mdx integration is pre-installed and configured in astro.config.mjs. To disable MDX support, remove the integration from the configuration file.

  3. Create tables in Astro Markdown

    Use pipes | to separate columns and hyphens - to create the header separator row.
    | Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

  4. Create blockquotes in Astro Markdown

    Use the > symbol at the start of a line to create a blockquote. You can use standard Markdown syntax (like bold or italics) inside the quote. For attributions, you can use the <cite> HTML tag.
    > This is a blockquote without attribution.

> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike</cite>

  5. Constrain string patterns using Template Literal Types

    TypeScript allows the use of template literal types to define strings that must follow a specific pattern, such as requiring a specific prefix or suffix. This provides more type safety than the generic string type by ensuring strings conform to a required format at compile time.
    // Ensure a string ends with .png
type PNG = `${string}.png`;
let somePNG: PNG = "image.png"; // ✅ correct
let someJPG: PNG = "image.jpg"; // ❌ error

// Ensure a string starts with /api/
type APIPath = `/api/${string}`;
let userInfoPath: APIPath = "/api/userinfo"; // ✅ correct
let aboutPath: APIPath = "/about"; // ❌ error

  6. Create headings in Astro Markdown

    Use the hash symbol (#) to create section headings. There are six levels of headings, where # (H1) is the highest level and ###### (H6) is the lowest.
    # H1
## H2
### H3
#### H4
##### H5
###### H6

  7. Insert syntax-highlighted code blocks in Astro Markdown

    Wrap code in triple backticks (```). To enable language-specific syntax highlighting, specify the language name (e.g., html, javascript, css, markdown, typescript, txt, bash) immediately after the first set of backticks.
    ```html
<!doctype html>
<html>
  <body>
    <p>Test</p>
  </body>
</html>

  8. Create headings in Astro Markdown

    Use the hash symbol (#) to create section headings. There are six levels of headings, where # (H1) is the highest level and ###### (H6) is the lowest.
    # H1
## H2
### H3
#### H4
##### H5
###### H6

  10. Use inline HTML elements in Astro Markdown

    Astro Markdown supports standard HTML tags for specialized formatting, such as <abbr> for abbreviations, <sub> for subscripts, <sup> for superscripts, <kbd> for keyboard input, and <mark> for highlighted text.
    <abbr title="Graphics Interchange Format">GIF</abbr>
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd>
Most <mark>salamanders</mark> are nocturnal.

  11. Enable interactivity for MDX components using Client Directives

    By default, components embedded in MDX render as static HTML without JavaScript. To make a component interactive in the browser, you must use Astro Client Directives (e.g., client:load, client:visible).

  12. Create ordered, unordered, and nested lists in Astro Markdown

    Use numbers for ordered lists and hyphens for unordered lists. To create nested lists, indent the sub-items under the parent item.
    1. First item
2. Second item

- Fruit
  - Apple
  - Orange
- Dairy
  - Milk