93 lines
2.8 KiB
JavaScript
93 lines
2.8 KiB
JavaScript
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));
|
|
});
|
|
|
|
if (item.github) {
|
|
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;
|
|
}
|