split javascript file into multiple

scripts/sections/common.js

@@ -0,0 +1,31 @@
+import { el } from "../core/dom.js";
+
+// Shared skeleton of work and project sections: <section> + header with title,
+// plus the matching navbar entry.
+export function createSection(container, navbar, item, index) {
+    const section = el("section", "project-section");
+    section.id = item.id;
+    section.setAttribute("data-nav", item.id);
+    container.appendChild(section);
+
+    navbar.addEntry(item.title, item.id, index + 1);
+
+    const header = el("div", "section-header");
+    section.appendChild(header);
+    header.appendChild(el("h1", "section-title", item.title));
+
+    return { section, header };
+}
+
+export function appendDescription(header, text) {
+    header.appendChild(el("p", "section-desc", text));
+}
+
+export function appendTags(header, tags) {
+    const tagList = el("div", "tags");
+    header.appendChild(tagList);
+
+    tags.forEach(tag => {
+        tagList.appendChild(el("span", "tag", tag));
+    });
+}

scripts/sections/introduction.js

@@ -0,0 +1,16 @@
+import { el } from "../core/dom.js";
+
+export function renderIntroduction(data, navbar) {
+    const introduction = document.getElementById("introduction");
+
+    introduction.appendChild(el("h1", "", data.title_introduction));
+    introduction.appendChild(el("p", "", data.content_introduction));
+
+    const githubLink = el("a", "text-link introduction", "GitHub ↗");
+    githubLink.href = "https://github.com/marvinkrausser";
+    githubLink.target = "_blank";
+    githubLink.rel = "noopener noreferrer";
+    introduction.appendChild(githubLink);
+
+    navbar.addEntry(data.title_introduction, "introduction", 0);
+}

scripts/sections/projects.js

@@ -0,0 +1,90 @@
+import { el } from "../core/dom.js";
+import { createSection, appendDescription, appendTags } from "./common.js";
+
+export function renderProjects(container, navbar, data, imageConfig) {
+    navbar.addGroup(data.navbar_group_projects);
+
+    data.content_projects.forEach((item, index) => {
+        const { section, header } = createSection(container, navbar, item, index);
+
+        appendDescription(header, item.description);
+        appendTags(header, item.tags);
+
+        const blocks = el("div", "content-blocks");
+        section.appendChild(blocks);
+        item.blocks.forEach((block, i) => {
+            blocks.appendChild(createBlock(block, i, imageConfig));
+        });
+
+        section.appendChild(createGithubLink(item.github, data.github_desc));
+    });
+}
+
+// One image + text block. Odd blocks put the image on the right.
+function createBlock(block, index, imageConfig) {
+    const contentBlock = el("div", "content-block");
+    const blockImage = createImage(block.image, imageConfig);
+    const blockText = createText(block);
+
+    if (index % 2 == 1) {
+        blockImage.className = "block-image right";
+        blockText.className = "block-text left";
+        contentBlock.appendChild(blockText);
+        contentBlock.appendChild(blockImage);
+    } else {
+        blockImage.className = "block-image left";
+        blockText.className = "block-text right";
+        contentBlock.appendChild(blockImage);
+        contentBlock.appendChild(blockText);
+    }
+
+    return contentBlock;
+}
+
+function createImage(imageId, imageConfig) {
+    const blockImage = el("div");
+    const imageObject = imageConfig.images.find(img => img.id === imageId);
+
+    const image = el("img", imageObject.image_pos);
+    image.src = imageObject.image;
+    image.loading = "lazy";
+    blockImage.appendChild(image);
+
+    return blockImage;
+}
+
+function createText(block) {
+    const blockText = el("div");
+    blockText.appendChild(el("h2", "", block.heading));
+
+    // "--link--" in the text marks where the next entry of block.links goes.
+    const parts = block.text.split("--link--");
+    const textContent = el("div", "text-content");
+    blockText.appendChild(textContent);
+
+    parts.forEach((part, i) => {
+        textContent.appendChild(el("span", "", part));
+
+        if (i < parts.length - 1) {
+            const link = el("a", "text-link", block.links[i].desc);
+            link.href = block.links[i].link;
+            link.target = "_blank";
+            link.rel = "noopener noreferrer";
+            textContent.appendChild(link);
+        }
+    });
+
+    return blockText;
+}
+
+function createGithubLink(url, text) {
+    const row = el("div", "link-row");
+
+    const link = el("a", "text-link", text);
+    link.href = url;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    row.appendChild(link);
+
+    return row;
+}

scripts/sections/sidebar.js

@@ -0,0 +1,10 @@
+import { el } from "../core/dom.js";
+
+// Status / profession / workplace lines below the name.
+export function renderSidebarTop(data) {
+    const content = document.getElementById("sidebar-top-content");
+
+    content.appendChild(el("p", "", data.status));
+    content.appendChild(el("p", "", data.profession));
+    content.appendChild(el("p", "", data.workplace));
+}

scripts/sections/work.js

@@ -0,0 +1,30 @@
+import { el } from "../core/dom.js";
+import { formatDateRange } from "../core/dates.js";
+import { createSection, appendDescription, appendTags } from "./common.js";
+
+export function renderWork(container, navbar, data) {
+    navbar.addGroup(data.navbar_group_work);
+
+    data.content_work.forEach((item, index) => {
+        const { section, header } = createSection(container, navbar, item, index);
+
+        appendDescription(header, item.description);
+        appendDescription(header, formatDateRange(item) + "\n" + item.at + "\n" + item.company);
+        appendTags(header, item.tech);
+
+        section.appendChild(createTasks(item.tasks));
+    });
+}
+
+function createTasks(tasks) {
+    const tasksDiv = el("div", "tasks-div");
+
+    tasks.forEach(task => {
+        const taskDiv = el("div", "task-div");
+        taskDiv.appendChild(el("span", "task-title", task.title + ": "));
+        taskDiv.appendChild(el("span", "task-content", task.content));
+        tasksDiv.appendChild(taskDiv);
+    });
+
+    return tasksDiv;
+}