mirror of
https://github.com/thiloho/archtika.git
synced 2025-11-22 10:51:36 +01:00
Add categories for docs template
This commit is contained in:
thiloho
@@ -5,6 +5,7 @@
|
||||
|
||||
const {
|
||||
id,
|
||||
contentType,
|
||||
title,
|
||||
children,
|
||||
fullPreview = false,
|
||||
@@ -12,6 +13,7 @@
|
||||
previewScrollTop = 0
|
||||
}: {
|
||||
id: string;
|
||||
contentType: string;
|
||||
title: string;
|
||||
children: Snippet;
|
||||
fullPreview?: boolean;
|
||||
@@ -41,6 +43,9 @@
|
||||
<li>
|
||||
<a href="/website/{id}/articles">Articles</a>
|
||||
</li>
|
||||
{#if contentType === "Docs"}
|
||||
<a href="/website/{id}/categories">Categories</a>
|
||||
{/if}
|
||||
<li>
|
||||
<a href="/website/{id}/collaborators">Collaborators</a>
|
||||
</li>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import BlogHead from "./common/BlogHead.svelte";
|
||||
import BlogNav from "./common/BlogNav.svelte";
|
||||
import BlogFooter from "./common/BlogFooter.svelte";
|
||||
import Head from "../common/Head.svelte";
|
||||
import Nav from "../common/Nav.svelte";
|
||||
import Footer from "../common/Footer.svelte";
|
||||
|
||||
const {
|
||||
favicon,
|
||||
@@ -24,9 +24,9 @@
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<BlogHead {title} {favicon} nestingLevel={1} />
|
||||
<Head {title} {favicon} nestingLevel={1} />
|
||||
|
||||
<BlogNav {logoType} {logo} />
|
||||
<Nav {logoType} {logo} />
|
||||
|
||||
<header>
|
||||
<div class="container">
|
||||
@@ -48,4 +48,4 @@
|
||||
</main>
|
||||
{/if}
|
||||
|
||||
<BlogFooter text={footerAdditionalText} />
|
||||
<Footer text={footerAdditionalText} />
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import BlogHead from "./common/BlogHead.svelte";
|
||||
import BlogNav from "./common/BlogNav.svelte";
|
||||
import BlogFooter from "./common/BlogFooter.svelte";
|
||||
import Head from "../common/Head.svelte";
|
||||
import Nav from "../common/Nav.svelte";
|
||||
import Footer from "../common/Footer.svelte";
|
||||
|
||||
const {
|
||||
favicon,
|
||||
@@ -22,9 +22,9 @@
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<BlogHead {title} {favicon} />
|
||||
<Head {title} {favicon} />
|
||||
|
||||
<BlogNav {logoType} {logo} />
|
||||
<Nav {logoType} {logo} />
|
||||
|
||||
<header>
|
||||
<div class="container">
|
||||
@@ -62,4 +62,4 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<BlogFooter text={footerAdditionalText} />
|
||||
<Footer text={footerAdditionalText} />
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
<script lang="ts">
|
||||
const { logoType, logo }: { logoType: "text" | "image"; logo: string } = $props();
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<a href="../">
|
||||
{#if logoType === "text"}
|
||||
<p>
|
||||
<strong>{logo}</strong>
|
||||
</p>
|
||||
{:else}
|
||||
<img src={logo} width="24" height="24" alt="" />
|
||||
{/if}
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
45
web-app/src/lib/templates/common/Nav.svelte
Normal file
45
web-app/src/lib/templates/common/Nav.svelte
Normal file
@@ -0,0 +1,45 @@
|
||||
<script lang="ts">
|
||||
const {
|
||||
logoType,
|
||||
logo,
|
||||
isDocsTemplate = false
|
||||
}: {
|
||||
logoType: "text" | "image";
|
||||
logo: string;
|
||||
isDocsTemplate?: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
{#if isDocsTemplate}
|
||||
<input type="checkbox" id="toggle-sidebar" hidden />
|
||||
<label for="toggle-sidebar">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
<ul class="docs-navigation">
|
||||
<li>nav comes here</li>
|
||||
</ul>
|
||||
{/if}
|
||||
<a href="../">
|
||||
{#if logoType === "text"}
|
||||
<strong>{logo}</strong>
|
||||
{:else}
|
||||
<img src={logo} width="24" height="24" alt="" />
|
||||
{/if}
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
51
web-app/src/lib/templates/docs/DocsArticle.svelte
Normal file
51
web-app/src/lib/templates/docs/DocsArticle.svelte
Normal file
@@ -0,0 +1,51 @@
|
||||
<script lang="ts">
|
||||
import Head from "../common/Head.svelte";
|
||||
import Nav from "../common/Nav.svelte";
|
||||
import Footer from "../common/Footer.svelte";
|
||||
|
||||
const {
|
||||
favicon,
|
||||
title,
|
||||
logoType,
|
||||
logo,
|
||||
mainContent,
|
||||
coverImage,
|
||||
publicationDate,
|
||||
footerAdditionalText
|
||||
}: {
|
||||
favicon: string;
|
||||
title: string;
|
||||
logoType: "text" | "image";
|
||||
logo: string;
|
||||
mainContent: string;
|
||||
coverImage: string;
|
||||
publicationDate: string;
|
||||
footerAdditionalText: string;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<Head {title} {favicon} nestingLevel={1} />
|
||||
|
||||
<Nav {logoType} {logo} isDocsTemplate={true} />
|
||||
|
||||
<header>
|
||||
<div class="container">
|
||||
<hgroup>
|
||||
<p>{publicationDate}</p>
|
||||
<h1>{title}</h1>
|
||||
</hgroup>
|
||||
{#if coverImage}
|
||||
<img src={coverImage} alt="" />
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if mainContent}
|
||||
<main>
|
||||
<div class="container">
|
||||
{@html mainContent}
|
||||
</div>
|
||||
</main>
|
||||
{/if}
|
||||
|
||||
<Footer text={footerAdditionalText} />
|
||||
@@ -1,52 +0,0 @@
|
||||
<script lang="ts">
|
||||
const {
|
||||
title,
|
||||
logoType,
|
||||
logo,
|
||||
mainContent,
|
||||
coverImage,
|
||||
publicationDate,
|
||||
footerAdditionalText
|
||||
}: {
|
||||
title: string;
|
||||
logoType: "text" | "image";
|
||||
logo: string;
|
||||
mainContent: string;
|
||||
coverImage: string;
|
||||
publicationDate: string;
|
||||
footerAdditionalText: string;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<link rel="stylesheet" href="../styles.css" />
|
||||
</head>
|
||||
</svelte:head>
|
||||
|
||||
<nav>
|
||||
{#if logoType === "text"}
|
||||
<p>
|
||||
<strong>{logo}</strong>
|
||||
</p>
|
||||
{:else}
|
||||
<img src={logo} alt="" />
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
{#if coverImage}
|
||||
<img src={coverImage} alt="" />
|
||||
{/if}
|
||||
<h1>{title}</h1>
|
||||
<p>{publicationDate}</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{@html mainContent}
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
{footerAdditionalText}
|
||||
</footer>
|
||||
@@ -1,5 +1,10 @@
|
||||
<script lang="ts">
|
||||
import Head from "../common/Head.svelte";
|
||||
import Nav from "../common/Nav.svelte";
|
||||
import Footer from "../common/Footer.svelte";
|
||||
|
||||
const {
|
||||
favicon,
|
||||
title,
|
||||
logoType,
|
||||
logo,
|
||||
@@ -7,6 +12,7 @@
|
||||
articles,
|
||||
footerAdditionalText
|
||||
}: {
|
||||
favicon: string;
|
||||
title: string;
|
||||
logoType: "text" | "image";
|
||||
logo: string;
|
||||
@@ -16,50 +22,44 @@
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
</svelte:head>
|
||||
<Head {title} {favicon} />
|
||||
|
||||
<nav>
|
||||
{#if logoType === "text"}
|
||||
<p>
|
||||
<strong>{logo}</strong>
|
||||
</p>
|
||||
{:else}
|
||||
<img src={logo} alt="" />
|
||||
{/if}
|
||||
</nav>
|
||||
<Nav {logoType} {logo} isDocsTemplate={true} />
|
||||
|
||||
<header>
|
||||
<h1>{title}</h1>
|
||||
<div class="container">
|
||||
<h1>{title}</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{@html mainContent}
|
||||
{#if articles.length > 0}
|
||||
<section class="articles" id="articles">
|
||||
<h2>Articles</h2>
|
||||
<div class="container">
|
||||
{@html mainContent}
|
||||
{#if articles.length > 0}
|
||||
<section class="articles" id="articles">
|
||||
<h2>
|
||||
<a href="#articles">Articles</a>
|
||||
</h2>
|
||||
|
||||
{#each articles as article}
|
||||
{@const articleFileName = article.title.toLowerCase().split(" ").join("-")}
|
||||
|
||||
<article>
|
||||
<p>{article.publication_date}</p>
|
||||
<h3>
|
||||
<a href="./documents/{articleFileName}.html">{article.title}</a>
|
||||
</h3>
|
||||
{#if article.meta_description}
|
||||
<p>{article.meta_description}</p>
|
||||
{/if}
|
||||
</article>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
<ul class="unpadded">
|
||||
{#each articles as article}
|
||||
{@const articleFileName = article.title.toLowerCase().split(" ").join("-")}
|
||||
<li>
|
||||
<p>{article.publication_date}</p>
|
||||
<p>
|
||||
<strong>
|
||||
<a href="./articles/{articleFileName}.html">{article.title}</a>
|
||||
</strong>
|
||||
</p>
|
||||
{#if article.meta_description}
|
||||
<p>{article.meta_description}</p>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
{footerAdditionalText}
|
||||
</footer>
|
||||
<Footer text={footerAdditionalText} />
|
||||
|
||||
@@ -36,7 +36,7 @@ const createMarkdownParser = (showToc = true) => {
|
||||
|
||||
const unescapeTest = /&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/gi;
|
||||
|
||||
function unescape(html: string) {
|
||||
const unescape = (html: string) => {
|
||||
return html.replace(unescapeTest, (_, n) => {
|
||||
n = n.toLowerCase();
|
||||
if (n === "colon") return ":";
|
||||
@@ -47,13 +47,13 @@ const createMarkdownParser = (showToc = true) => {
|
||||
}
|
||||
return "";
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let slugger = new GithubSlugger();
|
||||
let headings: { text: string; raw: string; level: number; id: string }[] = [];
|
||||
let sectionStack: { level: number; id: string }[] = [];
|
||||
|
||||
function gfmHeadingId({ prefix = "", showToc = true } = {}) {
|
||||
const gfmHeadingId = ({ prefix = "", showToc = true } = {}) => {
|
||||
return {
|
||||
renderer: {
|
||||
heading(this: Renderer, { tokens, depth }: { tokens: Token[]; depth: number }) {
|
||||
@@ -141,7 +141,7 @@ const createMarkdownParser = (showToc = true) => {
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
marked.use(gfmHeadingId({ showToc: showToc }));
|
||||
|
||||
|
||||
Reference in New Issue
Block a user