fix: appendchild related issue when redering content

Author: cd-bash

src/components/vertical-nav/project-nav.ts

@@ -13,17 +13,19 @@ export type RelatedLinks = [
 
 export function projectInfo(about: AboutProject, links: RelatedLinks[]) {
     const navWrapper = document.getElementById('nav-wrapper');
+    const section = document.createElement('section');
 
-    if (about != null && navWrapper != null) {
-        navWrapper?.appendChild(sectionAboutTheGame(about));
+    navWrapper?.appendChild(section);
 
+    if (typeof about === "object" && typeof links === "object") {
+        section.appendChild(sectionAboutTheGame(about));
+        section.appendChild(sectionRelatedLinks(links));
     }
-
-    if (links != null) {
-        navWrapper?.appendChild(sectionRelatedLinks(links));
+    else {
+        throw new Error("Infos are not well formatted")
     }
 
-    return navWrapper;
+    return section;
 }
 
 //-----------------------------------------------------------------------
@@ -37,9 +39,9 @@ function sectionAboutTheGame(about: AboutProject) {
 
     detailSection.className = "detail-section";
     detailTitle.textContent = "About the Project"
-    releaseDate.textContent = "<b>Release date: </b>" + about.release;
-    platformAvailable.textContent = "<b>Platforms: </b" + about.platforms;
-    developerNames.textContent = "<b>Developer: </b>" + about.developer;
+    releaseDate.innerHTML = "<b>Release date: </b>" + about.release;
+    platformAvailable.innerHTML = "<b>Platforms: </b" + about.platforms;
+    developerNames.innerHTML = "<b>Developer: </b>" + about.developer;
 
     detailSection.appendChild(detailTitle);
     detailSection.appendChild(releaseDate);
@@ -52,9 +54,13 @@ function sectionAboutTheGame(about: AboutProject) {
 
 function sectionRelatedLinks(relatedLinks: RelatedLinks[]) {
     const detailSection = document.createElement('div');
+    const detailTitle = document.createElement("h4");
     const linkList = document.createElement('ul');
 
     detailSection.className = "detail-section";
+    detailTitle.textContent = "Related Links";
+
+    detailSection.appendChild(detailTitle);
     detailSection.appendChild(linkList);
 
     relatedLinks.forEach(relatedLink => {

src/content/projects/tank/index.ts

@@ -14,7 +14,7 @@ import SCREENSHOT_4 from "./assets/tank-screenshot-4.jpg"
 const content: ProjectContent = {
     name: "TANK",
     tagline: "A collection of three unique iterations",
-    path: "www.charlesdouce.com/interactives/",
+    path: "www.charlesdoucet.com/interactives/",
 
     paragraphs: [
         "TANK assemble three different games, each based on the original TANKS! game made by Unity Technologies. It’s an exploration of mechanics and the discovery of new environment. The game is experimental and has the goal to dig the player’s curiosity. Prepare yourself as you step into unknown territory, revealing the ruins of a lost civilization.",

src/views/project-view/index.ts

@@ -20,22 +20,24 @@ export type ProjectContent = {
 
 export function projectView(content: ProjectContent) {
     const viewWrapper = document.getElementById('view-wrapper')!;
+    const article = document.createElement('article');
 
     const projectTitle = writeTitle("h1", content.name);
     const projectShowcase = createVideoShowcase(content.heroVideo);
     const projectSubtitle = writeTitle("h2", content.tagline)
 
-    viewWrapper.appendChild(projectTitle);
-    viewWrapper.appendChild(projectShowcase);
-    viewWrapper.appendChild(projectSubtitle);
+    viewWrapper.appendChild(article);
+    article.appendChild(projectTitle);
+    article.appendChild(projectShowcase);
+    article.appendChild(projectSubtitle);
 
     content.paragraphs.forEach(paragraph => {
         const text = writeParagraph(paragraph);
-        viewWrapper.appendChild(text);
+        article.appendChild(text);
     })
 
     const projectGallery = createContentGallery(content.imageGallery);
-    viewWrapper.appendChild(projectGallery);
+    article.appendChild(projectGallery);
 
-    return viewWrapper;
+    return article;
 }

src/views/utils/view-utils.ts

@@ -18,8 +18,6 @@ export function renderView(viewFn: Function) {
     const viewWrapper = clearView();
     const view = viewFn();
 
-    console.log(typeof view);
-
     viewWrapper.appendChild(view);
 }