[WIP] Aggregate external Hugo blog posts (without RSS) and display on homepage/posts page

.github/workflows/static.yml

@@ -54,6 +54,13 @@ jobs:
       - name: Install Node.js dependencies
         run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
 
+      - name: Aggregate external blog posts
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          echo "🔄 Aggregating external blog posts..."
+          npm run aggregate-posts || echo "⚠️ Post aggregation failed, continuing with build"
+
       - name: Initialize Hugo modules
         run: hugo mod get
 

assets/css/external-posts.css

@@ -0,0 +1,60 @@
+/* External post card styling */
+.external-post-card {
+  position: relative;
+}
+
+.external-post-card .card {
+  border-left: 4px solid #007bff;
+  background: linear-gradient(145deg, #ffffff, #f8f9fa);
+}
+
+.external-post-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: rgba(0, 123, 255, 0.9);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  z-index: 10;
+}
+
+.external-post-badge i {
+  margin-right: 4px;
+}
+
+.external-post-source {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid #dee2e6;
+}
+
+.external-post-source i {
+  margin-right: 4px;
+}
+
+.tag-badge {
+  margin-right: 4px;
+  margin-bottom: 4px;
+  font-size: 0.7rem;
+}
+
+.tags {
+  margin-top: 8px;
+}
+
+/* Dark theme support */
+[data-theme="dark"] .external-post-card .card {
+  background: linear-gradient(145deg, #2d3748, #1a202c);
+  border-left-color: #4299e1;
+}
+
+[data-theme="dark"] .external-post-badge {
+  background: rgba(66, 153, 225, 0.9);
+}
+
+[data-theme="dark"] .external-post-source {
+  border-top-color: #4a5568;
+}

data/en/external-posts.yaml

@@ -0,0 +1 @@
+posts: []

data/en/external_posts.yaml

@@ -0,0 +1,11 @@
+posts:
+  - title: "Sample External Post"
+    date: "2024-01-15T00:00:00Z"
+    summary: "This is a sample external post to demonstrate the aggregation functionality."
+    url: "https://wesleycamargo.github.io/sample-post"
+    source:
+      repository: "wesleycamargo/wesleycamargo.github.io"
+      author: "wesleycamargo"
+      originalUrl: "https://github.com/wesleycamargo/wesleycamargo.github.io/blob/main/content/posts/sample.md"
+    tags: ["sample", "demo"]
+    external: true

layouts/_default/list.html

@@ -0,0 +1,60 @@
+{{ define "navbar" }}
+    {{ partial "navigators/navbar.html" . }}
+{{ end }}
+
+{{ define "sidebar" }}
+  {{ $homePage:="#" }}
+  {{ if hugo.IsMultilingual }}
+    {{ $homePage = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
+  {{ end }}
+
+  <section class="sidebar-section" id="sidebar-section">
+    <div class="sidebar-holder">
+      <div class="sidebar" id="sidebar">
+        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
+          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
+        </form>
+        <div class="sidebar-tree">
+          <ul class="tree" id="tree">
+            <li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
+            <div class="subtree">
+                {{ partial "navigators/sidebar.html" (dict "menuName" "sidebar" "menuItems" site.Menus.sidebar "ctx" .) }}
+            </div>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+{{ end }}
+
+{{ define "content" }}
+<section class="content-section" id="content-section">
+  <div class="content container-fluid" id="content">
+    <div class="container-fluid post-card-holder" id="post-card-holder">
+      <!-- Render local blog posts -->
+      {{ $posts := where .RegularPagesRecursive "Layout" "!=" "search" }}
+      {{ $numShow := site.Params.features.pagination.maxPostsPerPage | default 12}}
+      {{ $paginator := .Paginate $posts $numShow }}
+      {{ range $paginator.Pages }}
+        {{ if .Layout }}
+          {{/* ignore the search.md file*/}}
+        {{ else }}
+          {{ partial "cards/post.html" . }}
+        {{ end }}
+      {{ end }}
+
+      <!-- Render external blog posts -->
+      {{ with site.Data.en.external_posts }}
+        {{ if .posts }}
+          {{ range .posts }}
+            {{ partial "cards/external-post.html" . }}
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    </div>
+    <div class="paginator">
+      {{ partial "pagination.html" . }}
+    </div>
+  </div>
+</section>
+{{ end }}

layouts/partials/cards/external-post.html

@@ -0,0 +1,42 @@
+<div class="post-card external-post-card">
+  <div class="card">
+    <div class="card-head">
+      <a href="{{ .url }}" class="post-card-link" target="_blank" rel="noopener">
+        <img class="card-img-top" src="/images/site/external-post-hero.png" alt="External Post" onerror="this.src='/images/site/main-logo.png'">
+        <div class="external-post-badge">
+          <i class="fas fa-external-link-alt"></i> External
+        </div>
+      </a>
+    </div>
+    <div class="card-body">
+      <a href="{{ .url }}" class="post-card-link" target="_blank" rel="noopener">
+        <h5 class="card-title">{{ .title }}</h5>
+        <p class="card-text post-summary">{{ .summary }}</p>
+      </a>
+      {{ if .tags }}
+        <div class="tags">
+          {{ range .tags }}
+            <span class="badge bg-secondary tag-badge">{{ . }}</span>
+          {{ end }}
+        </div>
+      {{ end }}
+      <div class="external-post-source">
+        <small class="text-muted">
+          <i class="fab fa-github"></i> From {{ .source.author }}
+        </small>
+      </div>
+    </div>
+    <div class="card-footer">
+      <span class="float-start">
+          {{ .date | time.Format ":date_full" }}
+      </span>
+      <a
+      href="{{ .url }}"
+      target="_blank"
+      rel="noopener"
+      class="float-end btn btn-outline-info btn-sm">
+        <i class="fas fa-external-link-alt"></i> {{ i18n "read" }}
+      </a>
+    </div>
+  </div>
+</div>

layouts/partials/header.html

@@ -6,6 +6,7 @@
 
 {{/* Custom site styles */}}
 <link rel="stylesheet" href="/css/custom-navbar.css" />
+<link rel="stylesheet" href="/css/external-posts.css" />
 
 <!--================= fab-icon =========================-->
 {{/* add favicon only if the site author has provided the the favicon */}}

layouts/partials/sections/recent-posts.html

@@ -0,0 +1,45 @@
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+{{ $numShow := 3}}
+{{ if .section.numShow }}
+  {{ $numShow = .section.numShow }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 recent-posts-section">
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ end }}
+  <div class="container">
+    <div class="row" id="recent-post-cards">
+      <!-- First, render local posts -->
+      {{ range first $numShow (where (where site.RegularPages.ByDate.Reverse "Type" "posts" ) "Layout" "!=" "search") }}
+        {{ partial "cards/post.html" . }}
+      {{ end }}
+
+      <!-- Then, render external posts -->
+      {{ with site.Data.en.external_posts }}
+        {{ if .posts }}
+          {{ range first $numShow .posts }}
+            {{ partial "cards/external-post.html" . }}
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    </div>
+  </div>
+  {{ if (.section.showMoreButton) }}
+  <div class="container" style="
+  display: flex;
+  align-items: center;
+  justify-content: center;">
+    <a href="/posts/" title="Show More" class="float-end btn btn-outline-info btn-sm" >
+    {{ i18n "show_more"}}</a>
+  </div>
+  {{ end }}
+</div>

package.json

@@ -14,12 +14,16 @@
     "imagesloaded": "^5.0.0",
     "include-media": "^1.4.10",
     "ityped": "^1.0.3",
+    "js-yaml": "^4.1.0",
     "katex": "^0.16.11",
     "mark.js": "^8.11.1",
     "mermaid": "^11.6.0",
     "plyr": "^3.7.2",
     "popper.js": "^1.16.1",
     "postcss": "^8.4.41",
     "postcss-cli": "^11.0.0"
+  },
+  "scripts": {
+    "aggregate-posts": "node scripts/aggregate-posts.js"
   }
 }