Typefolio Blog Components
/ 3 min read
Updated:Table of Contents
TLDR
- Typefolio combines Markdown directives, MDX, and layout-level helpers to keep feature posts expressive without adding runtime-heavy UI.
- This article demonstrates admonitions, GitHub cards, Astro Icon, TLDR, and backlinks in one release-ready post.
- The backlinks panel at the end is generated automatically because other public posts in the archive link back to this guide.
This post demonstrates the various blog components and rich-content patterns built into Typefolio. If you want the lower-level Markdown reference, continue with the Typefolio Markdown Reference.
Admonitions
Admonitions (also known as “asides”) are useful for providing supportive and/or supplementary information related to your content.
How to use them
To use admonitions in Typefolio, wrap your Markdown content in a pair of triple colons :::. The first pair should also include the type of admonition you want to use.
For example, with the following Markdown:
:::noteHighlights information that users should take into account, even when skimming.:::Outputs:
The following admonitions are currently supported:
notetipimportantwarningcaution
Customising the admonition title
You can customise the admonition title using the following markup:
:::note[My custom title]This is a note with a custom title.:::Outputs:
GitHub cards for repository context
You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.
::github{repo="whliao5am/astro-theme-typefolio"}You can also link a Github user:
::github{user="whliao5am"}Astro Icon for inline visual markers
When a post benefits from compact visual signposts, MDX can import astro-icon directly and keep the iconography consistent with the rest of the site.
Writing surface
Use icons to emphasize page roles and feature labels without adding a full UI framework.
Archive cues
The same icon set can reinforce tags, metadata, and supporting navigation across archive pages.
Project references
Inline icons are especially useful when a post points to repositories, release notes, or implementation guides.
TLDR comes from frontmatter
The summary block at the top of this page is rendered by the shared blog layout, not by custom markup in the article body. That keeps short-form summaries consistent across every post that needs one.
tldr: - "Summarize the article in two or three points." - "Keep each point concrete and readable out of context."Backlinks close the loop
Typefolio records internal post-to-post references during Markdown processing. When another article links here, the layout automatically exposes that relationship in the backlinks section at the bottom of the page.
That makes component guides more discoverable over time: feature walkthroughs can reference one another, and readers can move through the archive by following real editorial connections instead of isolated demo pages.