Finish base template for blog

This commit is contained in:
thiloho
2024-08-28 17:30:32 +02:00
parent 6a5cf76264
commit 4572b7f6ce
7 changed files with 170 additions and 31 deletions

View File

@@ -2,11 +2,15 @@
const {
logoType,
logo,
isDocsTemplate = false
isDocsTemplate = false,
categorizedArticles = {},
isIndexPage = true
}: {
logoType: "text" | "image";
logo: string;
isDocsTemplate?: boolean;
categorizedArticles?: { [key: string]: { title: string }[] };
isIndexPage?: boolean;
} = $props();
</script>
@@ -30,9 +34,23 @@
</svg>
</label>
<ul class="docs-navigation">
<li>nav comes here</li>
</ul>
<section id="docs-navigation" class="docs-navigation">
<ul>
{#each Object.keys(categorizedArticles) as key}
<li>
<strong>{key}</strong>
<ul>
{#each categorizedArticles[key] as { title }}
{@const articleFileName = title.toLowerCase().split(" ").join("-")}
<li>
<a href="{isIndexPage ? './articles' : '.'}/{articleFileName}.html">{title}</a>
</li>
{/each}
</ul>
</li>
{/each}
</ul>
</section>
{/if}
<a href="../">
{#if logoType === "text"}

View File

@@ -9,6 +9,7 @@
logoType,
logo,
mainContent,
categorizedArticles,
coverImage,
publicationDate,
footerAdditionalText
@@ -18,6 +19,7 @@
logoType: "text" | "image";
logo: string;
mainContent: string;
categorizedArticles: { [key: string]: { title: string }[] };
coverImage: string;
publicationDate: string;
footerAdditionalText: string;
@@ -26,7 +28,7 @@
<Head {title} {favicon} nestingLevel={1} />
<Nav {logoType} {logo} isDocsTemplate={true} />
<Nav {logoType} {logo} isDocsTemplate={true} {categorizedArticles} isIndexPage={false} />
<header>
<div class="container">

View File

@@ -10,6 +10,7 @@
logo,
mainContent,
articles,
categorizedArticles,
footerAdditionalText
}: {
favicon: string;
@@ -18,13 +19,14 @@
logo: string;
mainContent: string;
articles: { title: string; publication_date: string; meta_description: string }[];
categorizedArticles: { [key: string]: { title: string }[] };
footerAdditionalText: string;
} = $props();
</script>
<Head {title} {favicon} />
<Nav {logoType} {logo} isDocsTemplate={true} />
<Nav {logoType} {logo} isDocsTemplate={true} {categorizedArticles} />
<header>
<div class="container">
@@ -35,30 +37,6 @@
<main>
<div class="container">
{@html mainContent}
{#if articles.length > 0}
<section class="articles" id="articles">
<h2>
<a href="#articles">Articles</a>
</h2>
<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>

View File

@@ -98,6 +98,7 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
: `${API_BASE_PREFIX}/rpc/retrieve_file?id=${websiteData.logo_image}`,
mainContent: md(websiteData.main_content ?? "", false),
articles: websiteData.articles ?? [],
categorizedArticles: websiteData.categorized_articles ?? [],
footerAdditionalText: md(websiteData.additional_text ?? "")
}
}));
@@ -169,6 +170,7 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
: "",
publicationDate: article.publication_date,
mainContent: md(article.main_content ?? ""),
categorizedArticles: websiteData.categorized_articles ?? [],
footerAdditionalText: md(websiteData.additional_text ?? "")
}
}));

View File

@@ -20,7 +20,6 @@
<h2>
<a href="#publish-website">Publish website</a>
</h2>
{JSON.stringify(data.websiteOverview.articles)}
<p>
The preview area on this page allows you to see exactly how your website will look when it is
is published. If you are happy with the results, click the button below and your website will