Generate base user website via template directory

This commit is contained in:
Thilo Hohlt
2024-08-04 16:15:09 +02:00
parent 6b05ab1d28
commit b8ddcdc101
7 changed files with 123 additions and 23 deletions

View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
{{logo}}
</nav>
<header>
{{cover_image}}
{{title}}
{{publication_date}}
</header>
<main>
{{main_content}}
</main>
<footer>
{{additional_text}}
</footer>
</body>
</html>

22
templates/blog/index.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
{{logo}}
</nav>
<header>
{{title}}
</header>
<main>
{{main_content}}
</main>
<footer>
{{additional_text}}
</footer>
</body>
</html>

View File

1
web-app/.gitignore vendored
View File

@@ -1,5 +1,6 @@
node_modules node_modules
user-uploads user-uploads
user-websites
# Output # Output
.output .output

View File

@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { Snippet } from "svelte"; import type { Snippet } from "svelte";
import markdownit from "markdown-it"; import { md } from "$lib/utils";
import hljs from "highlight.js";
const { const {
id, id,
@@ -16,20 +15,6 @@
fullPreview?: boolean; fullPreview?: boolean;
previewContent: string; previewContent: string;
}>(); }>();
const md = markdownit({
linkify: true,
typographer: true,
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, { language: lang }).value;
} catch (_) {}
}
return "";
}
});
</script> </script>
<div class="operations"> <div class="operations">
@@ -46,7 +31,10 @@
<div class="preview"> <div class="preview">
{#if fullPreview} {#if fullPreview}
<iframe src={previewContent} title="Preview"></iframe> <iframe
src="http://localhost:5173/user-websites/e6710116-f2b7-4318-82de-35a25d22ed2e/0015130f-3024-402b-8421-aaee4a6f0890/index.html"
title="Preview"
></iframe>
{:else} {:else}
{@html md.render(previewContent)} {@html md.render(previewContent)}
{/if} {/if}

View File

@@ -1,3 +1,6 @@
import markdownit from "markdown-it";
import hljs from "highlight.js";
export const sortOptions = [ export const sortOptions = [
{ value: "creation-time", text: "Creation time" }, { value: "creation-time", text: "Creation time" },
{ value: "last-modified", text: "Last modified" }, { value: "last-modified", text: "Last modified" },
@@ -6,3 +9,17 @@ export const sortOptions = [
]; ];
export const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/svg+xml", "image/webp"]; export const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/svg+xml", "image/webp"];
export const md = markdownit({
linkify: true,
typographer: true,
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, { language: lang }).value;
} catch (_) {}
}
return "";
}
});

View File

@@ -1,12 +1,60 @@
import { randomUUID } from "node:crypto"; import { readFile, mkdir, writeFile } from "node:fs/promises";
import { mkdir, writeFile } from "node:fs/promises"; import { join } from "node:path";
import { extname, join, relative } from "node:path"; import { md } from "$lib/utils";
export const load = async ({ parent }) => { export const load = async ({ params, fetch, cookies, locals }) => {
const { website } = await parent(); const websiteOverviewData = await fetch(
`http://localhost:3000/website_overview?id=eq.${params.websiteId}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${cookies.get("session_token")}`,
Accept: "application/vnd.pgrst.object+json"
}
}
);
const websiteOverview = await websiteOverviewData.json();
const templatePath = join(
process.cwd(),
"..",
"templates",
websiteOverview.content_type.toLowerCase()
);
const indexFile = await readFile(join(templatePath, "index.html"), { encoding: "utf-8" });
const articleFileContents = await readFile(join(templatePath, "article.html"), {
encoding: "utf-8"
});
const indexFileContents = indexFile
.replace("{{title}}", `<h1>${websiteOverview.title}</h1>`)
.replace("{{main_content}}", md.render(websiteOverview.main_content))
.replace("{{additional_text}}", md.render(websiteOverview.additional_text));
const uploadDir = join(
process.cwd(),
"static",
"user-websites",
locals.user.id,
params.websiteId
);
await mkdir(uploadDir, { recursive: true });
await writeFile(join(uploadDir, "index.html"), indexFileContents);
await mkdir(join(uploadDir, "articles"), { recursive: true });
for (const article of websiteOverview.articles) {
const articleFileName = article.title.toLowerCase().split(" ").join("-");
await writeFile(join(uploadDir, "articles", `${articleFileName}.html`), articleFileContents);
}
return { return {
website websiteOverview
}; };
}; };