diff --git a/web-app/src/lib/templates/blog/BlogArticle.svelte b/web-app/src/lib/templates/blog/BlogArticle.svelte index 66e6397..f9cdcd9 100644 --- a/web-app/src/lib/templates/blog/BlogArticle.svelte +++ b/web-app/src/lib/templates/blog/BlogArticle.svelte @@ -13,33 +13,43 @@ + + {title}
- {#if coverImage} - - {/if} -

{title}

-

{publicationDate}

+
+ {#if coverImage} + + {/if} +

{title}

+

{publicationDate}

+
- {@html mainContent} +
+ {@html mainContent} +
diff --git a/web-app/src/lib/templates/blog/BlogIndex.svelte b/web-app/src/lib/templates/blog/BlogIndex.svelte index 31e93a8..89ae687 100644 --- a/web-app/src/lib/templates/blog/BlogIndex.svelte +++ b/web-app/src/lib/templates/blog/BlogIndex.svelte @@ -11,6 +11,8 @@ + + {title} diff --git a/web-app/src/lib/utils.ts b/web-app/src/lib/utils.ts index 4c6a1e5..d4110f7 100644 --- a/web-app/src/lib/utils.ts +++ b/web-app/src/lib/utils.ts @@ -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); diff --git a/web-app/template-styles/blog-styles.css b/web-app/template-styles/blog-styles.css index 1c5a41f..3496c1d 100644 --- a/web-app/template-styles/blog-styles.css +++ b/web-app/template-styles/blog-styles.css @@ -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; }