Implementing blog #14

nasfernane · 2025-09-21T17:12:09Z

linked to #4

fraxken · 2025-09-25T14:14:12Z

I think we should not includes built articles in GIT (they should be only useful for the build)

Copilot

Pull Request Overview

This PR implements a comprehensive blog functionality for the NodeSecure landing page, adding a markdown-to-HTML article processing system with a complete blog interface.

Blog article processing from markdown files with YAML frontmatter parsing
HTML generation for both individual articles and blog index page with author information
Complete blog styling and UI components including article cards and navigation

Reviewed Changes

Copilot reviewed 34 out of 35 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
vite.config.js	Adds blog entry discovery and multi-page build configuration
src/build-articles.js	Implements markdown processing, HTML generation, and author integration
public/css/blog.css	Provides complete blog styling including article cards and content formatting
public/css/index.css	Adds blog-specific header styles and navigation elements
public/css/reset.css	Adds cursor pointer style for anchor elements
package.json	Adds markdown processing dependencies and build script integration
index.html	Updates paths and adds blog navigation link
blog/*.html	Generated blog pages including index and individual articles
articles/*.md	Blog article source files with frontmatter metadata

Comments suppressed due to low confidence (2)

src/build-articles.js:1

Missing space in CSS selector: '>h3' should be '> h3' for consistency with other selectors.

// Import Node.js Dependencies

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/build-articles.js

public/css/blog.css

src/build-articles.js

…authors with author gihub link

…ation

fraxken · 2025-09-30T15:52:22Z

public/css/index.css

+
+
+
+
+
+
+


To much new line here at the end of the file

fraxken · 2025-09-30T15:53:02Z

blog/index-base-template.html

+  <script type="module" src="../src/particules.js"></script>
+</body>
+
+</html>


Missing new line at the end of the file (there is emoji stop if you reviews files you will see it).

fraxken · 2025-09-30T15:53:44Z

src/build-articles.js

+      return `
+      <div class="article-card">
+        <div class="article-card-content">
+          <div class="article-card-header">
+            <a target="_blank" rel="noopener" href="https://github.com/${coreContributor.github}">
+              <img class="authorImg" src="${imgSource}" alt="Thomas">
+            </a>
+            <div class="article-card-header-infos">
+              <span>${coreContributor?.name || article.author}</span>
+              <span style="display: flex; align-items: center; gap: 10px;">
+                <span style="display: flex; align-items: center; gap: 5px;">
+                  <img 
+                    src="https://img.icons8.com/material-rounded/24/calendar--v1.png" 
+                    alt="calendar" 
+                    style="width:18px;height:18px;filter:invert(1) brightness(2);"
+                  />
+                  <span>${formatDate(article.date)}</span>
+                </span>
+                <span style="display: flex; align-items: center; gap: 5px;"> 
+                  <img 
+                    src="https://img.icons8.com/forma-regular/24/clock.png" 
+                    alt="clock" 
+                    style="width:18px;height:18px;filter:invert(1) brightness(2);"
+                  />
+                  <span>${article.readTime} min read</span>
+                </span>
+              </span>
+            </div>
+          </div>
+          <a 
+            href="${article.path}" 
+            title="${article.title}" 
+            class="article-link">
+            <span>${article.title}</span>
+          </a>
+          <p>${article.description}</p>
+      </div>
+      </div>
+      `;
+    })
+    .join("\n    ");


This can probably be a template and you can use zup to inject things into it

fraxken · 2025-09-30T15:56:25Z

src/build-articles.js

+  const response = await fetch(
+    "https://raw.githubusercontent.com/NodeSecure/Governance/main/contributors.json"
+  );
+
+  if (!response.ok) {
+    throw new Error(
+      `Error while fetching contributors list: ${response.status}`
+    );
+  }
+
+  const contributors = await response.json();
+  const authors = contributors.core;


Not sure if you really need that here. With github you can do that:

https://github.com/${username}.png

fraxken · 2025-09-30T15:58:38Z

src/build-articles.js

+function formatDate(date) {
+  if (!(date instanceof Date)) {
+    return date;
+  }
+
+  const day = date.getDate();
+  const month = date.toLocaleString("en-US", { month: "short" });
+  const year = date.getFullYear();
+
+  return `${month} ${day}, ${year}`;
+}


You can probably use Intl.DateTimeFormat to achieve the same result: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

fraxken · 2025-09-30T16:01:01Z

src/build-articles.js

+function parseYamlFile(content) {
+  if (!content.startsWith("---")) {
+    return { metadata: {}, content };
+  }
+
+  const lines = content.split("\n");
+  let endLineIndex = -1;
+
+  for (let i = 1; i < lines.length; i++) {
+    if (lines[i].trim() === "---") {
+      endLineIndex = i;
+      break;
+    }
+  }
+
+  if (endLineIndex === -1) {
+    return { metadata: {}, content };
+  }
+
+  // extract frontmatter
+  const frontmatterLines = lines.slice(1, endLineIndex);
+  const markdownLines = lines.slice(endLineIndex + 1);
+
+  const markdownContent = markdownLines.join("\n").trim();
+
+  const metadata = {};
+
+  for (const line of frontmatterLines) {
+    const trimmedLine = line.trim();
+    if (trimmedLine && trimmedLine.includes(":")) {
+      const [key, ...valueParts] = trimmedLine.split(":");
+
+      const dataKey = key.trim();
+      const dataValue = valueParts.join(":").trim();
+
+      if (dataKey === "date") {
+        const [day, month, year] = dataValue.split("/").map(Number);
+        const date = new Date(year, month - 1, day);
+        metadata[dataKey] = date;
+      }
+      else {
+        metadata[dataKey] = dataValue;
+      }
+    }
+  }
+
+  return { metadata, content: markdownContent };
+}


Maybe we should use showdown instead of marked, there is a built-in getMetadata() method. Feel weird to implement it by ourself.

fraxken requested review from Copilot, PierreDemailly and clemgbld September 25, 2025 14:15

Copilot AI reviewed Sep 25, 2025

View reviewed changes

src/build-articles.js Outdated Show resolved Hide resolved

src/build-articles.js Show resolved Hide resolved

public/css/blog.css Outdated Show resolved Hide resolved

clemgbld reviewed Sep 25, 2025

View reviewed changes

src/build-articles.js Outdated Show resolved Hide resolved

nasfernane added 11 commits September 25, 2025 20:09

feat: base markdown conversion

2279668

feat: implementing blog

57dbf27

feat: added articles descriptions and updated computed blog articles …

9cd3c80

…authors with author gihub link

feat: update computed html styling

7f38485

feat: sanitize blog html content, format date and add read time estim…

f64b80a

…ation

fix: format external dev.to article links

fd6e2f0

feat: responsive on articles list

374ce3f

feat: add article author links

fc6ae54

feat: format blog externals links

b598c33

feat: update list and code styling

c2f843c

feat: update code blocks padding

ecaf383

nasfernane force-pushed the feat/blog_articles branch from f65f146 to ecaf383 Compare September 25, 2025 18:10

fix: remove built blog files

9c6b42f

clemgbld approved these changes Sep 29, 2025

View reviewed changes

fraxken reviewed Sep 30, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Implementing blog #14

Implementing blog #14

Uh oh!

nasfernane commented Sep 21, 2025

Uh oh!

fraxken commented Sep 25, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fraxken Sep 30, 2025

Uh oh!

fraxken Sep 30, 2025

Uh oh!

fraxken Sep 30, 2025

Uh oh!

fraxken Sep 30, 2025

Uh oh!

fraxken Sep 30, 2025

Uh oh!

fraxken Sep 30, 2025

Uh oh!

Uh oh!

Implementing blog #14

Are you sure you want to change the base?

Implementing blog #14

Uh oh!

Conversation

nasfernane commented Sep 21, 2025

Uh oh!

fraxken commented Sep 25, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fraxken Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

fraxken Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

fraxken Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

fraxken Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

fraxken Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

fraxken Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!