thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 02:41:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add slugified id for sections

Browse Source
This commit is contained in:
thiloho
2024-08-18 19:18:32 +02:00
parent 191fc1c12b
commit b32727aa8c
4 changed files with 54 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web-app/src/lib/templates/blog/BlogArticle.svelte
View File

@@ -13,12 +13,15 @@
<svelte:head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<link rel="stylesheet" href="../styles.css" />
</head>
</svelte:head>
<nav>
<div class="container">
{#if logoType === "text"}
<p>
<strong>{logo}</strong>
@@ -26,20 +29,27 @@
{:else}
<img src={logo} alt="" />
{/if}
</div>
</nav>
<header>
<div class="container">
{#if coverImage}
<img src={coverImage} alt="" />
{/if}
<h1>{title}</h1>
<p>{publicationDate}</p>
</div>
</header>
<main>
<div class="container">
{@html mainContent}
</div>
</main>
<footer>
<div class="container">
{footerAdditionalText}
</div>
</footer>

2
web-app/src/lib/templates/blog/BlogIndex.svelte
View File

@@ -11,6 +11,8 @@
<svelte:head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<link rel="stylesheet" href="./styles.css" />
</head>

24
web-app/src/lib/utils.ts
View File

@@ -30,10 +30,21 @@ export const md = markdownit({
const sections: { header: number; nesting: number }[] = [];
let nestedLevel = 0;
const openSection = (attrs: [string, string][] | null) => {
const slugify = (text: string) => {
return text
.toLowerCase()
.replace(/\s+/g, "-")
.replace(/[^\w-]+/g, "")
.replace(/--+/g, "-")
.replace(/^-+/, "")
.replace(/-+$/, "");
};
const openSection = (attrs: [string, string][] | null, headingText: string) => {
const t = new Token("section_open", "section", 1);
t.block = true;
t.attrs = attrs ? attrs.map((attr) => [attr[0], attr[1]]) : null;
t.attrs = attrs ? attrs.map((attr) => [attr[0], attr[1]]) : [];
t.attrs.push(["id", slugify(headingText)]);
return t;
};
@@ -63,7 +74,8 @@ export const md = markdownit({
}
};
for (const token of state.tokens) {
for (let i = 0; i < state.tokens.length; i++) {
const token = state.tokens[i];
if (token.type.search("heading") !== 0) {
nestedLevel += token.nesting;
}
@@ -79,7 +91,11 @@ export const md = markdownit({
if (sections.length && section.header <= sections[sections.length - 1].header) {
closeSections(section);
}
tokens.push(openSection(token.attrs));
const headingTextToken = state.tokens[i + 1];
const headingText = headingTextToken.content;
tokens.push(openSection(token.attrs, headingText));
const idIndex = token.attrIndex("id");
if (idIndex !== -1) {
token.attrs?.splice(idIndex, 1);

10
web-app/template-styles/blog-styles.css
View File

@@ -35,6 +35,12 @@ footer {
padding-block: 1rem;
}
section + section {
margin-block-start: 1rem;
section:has(> h2) + section:has(> h2) {
margin-block-start: 2rem;
}
section {
display: flex;
flex-direction: column;
gap: 1rem;
}