Skip to content
This repository was archived by the owner on Jun 13, 2024. It is now read-only.

Add custom list rendering for body frontmatter #48

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add custom list rendering for body frontmatter #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15671be
Add custom list rendering for `body` frontmatter
Sep 6, 2023
3403002
Text align left
Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/pages/c/[configKind]/[tip].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export async function getStaticPaths() {
});
return `<div class="rounded-md px-2 bg-gray-800 w-full overflow-x-auto"><pre><code class="language-${lang}">${html}</code></pre></div>`;
};

return marked(markdown, { renderer });
}

Expand Down
16 changes: 14 additions & 2 deletions src/pages/c/[configKind]/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,23 @@ import type { BreadCrumbList } from '../../../components/Navigation/BreadCrumb.a

export async function getStaticPaths() {
const configKinds = await getCollection("configKinds");
const renderer = new marked.Renderer();

// Custom render lists in the body
renderer.list = (body, ordered) => {
const type = ordered ? 'ol' : 'ul';
const className = ordered ? 'list-decimal' : 'list-disc';

return `
<div class="text-left">
<${type} class="${className} list-inside text-left">${body}</${type}>
</div>`;
};

const paths = await Promise.all(configKinds.map(async (configKind) => {
const allTips = await getCollection("tips");
const tips = allTips.filter(tip => tip.data.kind.id === configKind.id);
const htmlBody = marked(configKind.data.body);
const htmlBody = marked(configKind.data.body, { renderer });
return {
params: { configKind: configKind.id },
props: { configKind, tips, htmlBody },
Expand Down Expand Up @@ -67,4 +79,4 @@ const breadCrumbList: BreadCrumbList = [
))}
</div>
</div>
</Layout>
</Layout>