thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 10:51:36 +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> <svelte:head>
<head> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title> <title>{title}</title>
<link rel="stylesheet" href="../styles.css" /> <link rel="stylesheet" href="../styles.css" />
</head> </head>
</svelte:head> </svelte:head>
<nav> <nav>
<div class="container">
{#if logoType === "text"} {#if logoType === "text"}
<p> <p>
<strong>{logo}</strong> <strong>{logo}</strong>
@@ -26,20 +29,27 @@
{:else} {:else}
<img src={logo} alt="" /> <img src={logo} alt="" />
{/if} {/if}
</div>
</nav> </nav>
<header> <header>
<div class="container">
{#if coverImage} {#if coverImage}
<img src={coverImage} alt="" /> <img src={coverImage} alt="" />
{/if} {/if}
<h1>{title}</h1> <h1>{title}</h1>
<p>{publicationDate}</p> <p>{publicationDate}</p>
</div>
</header> </header>
<main> <main>
<div class="container">
{@html mainContent} {@html mainContent}
</div>
</main> </main>
<footer> <footer>
<div class="container">
{footerAdditionalText} {footerAdditionalText}
</div>
</footer> </footer>

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

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

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

@@ -30,10 +30,21 @@ export const md = markdownit({
const sections: { header: number; nesting: number }[] = []; const sections: { header: number; nesting: number }[] = [];
let nestedLevel = 0; 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); const t = new Token("section_open", "section", 1);
t.block = true; 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; 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) { if (token.type.search("heading") !== 0) {
nestedLevel += token.nesting; nestedLevel += token.nesting;
} }
@@ -79,7 +91,11 @@ export const md = markdownit({
if (sections.length && section.header <= sections[sections.length - 1].header) { if (sections.length && section.header <= sections[sections.length - 1].header) {
closeSections(section); 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"); const idIndex = token.attrIndex("id");
if (idIndex !== -1) { if (idIndex !== -1) {
token.attrs?.splice(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; padding-block: 1rem;
} }
section + section { section:has(> h2) + section:has(> h2) {
margin-block-start: 1rem; margin-block-start: 2rem;
}
section {
display: flex;
flex-direction: column;
gap: 1rem;
} }