diff --git a/RSS_FEATURE_README.md b/RSS_FEATURE_README.md new file mode 100644 index 0000000..91b498d --- /dev/null +++ b/RSS_FEATURE_README.md @@ -0,0 +1,122 @@ +# RSS Feed Aggregation Feature + +This feature aggregates external blog posts from RSS feeds and displays them on the homepage Recent Posts section, integrated seamlessly with local blog posts. + +## Features + +- **Homepage Integration**: External posts appear in the Recent Posts section alongside local posts +- **Visual Distinction**: External posts have distinct styling with source badges and external link indicators +- **Responsive Design**: Works on all device sizes with dark mode support +- **Automatic Updates**: Posts are fetched at build time (development uses mock data) +- **Deduplication**: Prevents duplicate posts from appearing +- **Graceful Fallback**: Falls back to mock data when RSS feeds are unavailable + +## Configuration + +### External Blog Configuration (`data/external-blogs.yaml`) + +```yaml +feeds: + - name: "DevJev.nl" + url: "https://www.devjev.nl/" + rss_url: "https://www.devjev.nl/feed.xml" + author: "DevJev" + + - name: "Bearman.nl" + url: "https://bearman.nl/" + rss_url: "https://bearman.nl/feed.xml" + author: "Bearman" + + - name: "Wesley Camargo" + url: "https://wesleycamargo.github.io/" + rss_url: "https://wesleycamargo.github.io/feed.xml" + author: "Wesley Camargo" + +config: + max_posts_per_feed: 5 + enable_aggregation: true +``` + +### Recent Posts Section (`data/en/sections/posts.yaml`) + +```yaml +section: + name: Recent Posts + id: recent-posts + enable: true + weight: 6 + numShow: 6 # Number of posts to show (combines local + external) +``` + +## Technical Implementation + +### Components + +1. **RSS Aggregator** (`themes/toha/layouts/partials/helpers/rss-aggregator.html`) + - Fetches RSS feeds using Hugo's `resources.GetRemote` + - Supports both RSS 2.0 and Atom formats + - Extracts post metadata (title, description, date, images) + - Falls back to mock data in development + +2. **External Post Card** (`themes/toha/layouts/partials/cards/external-post.html`) + - Custom template for displaying external posts + - Includes source badges and external link indicators + - Opens links in new tabs + +3. **Recent Posts Section** (`themes/toha/layouts/partials/sections/recent-posts.html`) + - Modified to fetch and merge external posts with local posts + - Sorts all posts by date (newest first) + - Displays mixed content seamlessly + +4. **Styling** (`themes/toha/assets/styles/sections/external-posts.scss`) + - Custom styling for external posts + - Blue borders and gradient backgrounds + - Dark mode compatibility + - Responsive design + +### Data Flow + +1. **Build Time**: RSS aggregator fetches external feeds +2. **Data Processing**: Posts are parsed and standardized +3. **Merging**: External and local posts are combined and sorted by date +4. **Display**: Recent Posts section renders mixed content with appropriate templates + +## Usage + +### Adding New RSS Feeds + +1. Edit `data/external-blogs.yaml` +2. Add new feed configuration with name, URL, RSS URL, and author +3. The posts will automatically appear on next build + +### Customizing Display + +- Modify `numShow` in `data/en/sections/posts.yaml` to change number of posts +- Edit styling in `themes/toha/assets/styles/sections/external-posts.scss` +- Customize external post template in `themes/toha/layouts/partials/cards/external-post.html` + +## Development + +For development, the system uses mock data from `data/mock-external-posts.yaml` to ensure consistent behavior when RSS feeds are not accessible. + +## Production Deployment + +In production, set the Hugo environment to "production" to enable live RSS feed fetching: + +```bash +hugo --environment production +``` + +## Error Handling + +- RSS feed failures are logged but don't break the build +- Graceful fallback to mock data ensures site remains functional +- Missing images are handled with placeholder icons +- Invalid RSS data is skipped silently + +## Performance + +- RSS feeds are fetched once per build (not on every page load) +- Data is cached by Hugo's resource system +- Only essential post metadata is extracted and stored +- Image extraction is optimized with regex parsing \ No newline at end of file diff --git a/data/en/sections/posts.yaml b/data/en/sections/posts.yaml index 421ffc2..b093f1f 100644 --- a/data/en/sections/posts.yaml +++ b/data/en/sections/posts.yaml @@ -5,6 +5,7 @@ section: enable: true weight: 6 showOnNavbar: true + numShow: 6 # Can optionally hide the title in sections # hideTitle: true diff --git a/data/external-blogs.yaml b/data/external-blogs.yaml new file mode 100644 index 0000000..2afb5c5 --- /dev/null +++ b/data/external-blogs.yaml @@ -0,0 +1,34 @@ +--- +# External blog RSS feeds configuration +# Note: RSS feed URLs should be verified in production environment +feeds: + - name: "DevJev.nl" + url: "https://www.devjev.nl/" + rss_url: "https://www.devjev.nl/feed.xml" # Try also: /rss.xml, /index.xml + author: "DevJev" + favicon: "" + + - name: "Bearman.nl" + url: "https://bearman.nl/" + rss_url: "https://bearman.nl/feed.xml" # Try also: /rss.xml, /index.xml + author: "Bearman" + favicon: "" + + - name: "Wesley Camargo" + url: "https://wesleycamargo.github.io/" + rss_url: "https://wesleycamargo.github.io/feed.xml" # Try also: /rss.xml, /index.xml + author: "Wesley Camargo" + favicon: "" + +# Configuration for RSS aggregation +config: + max_posts_per_feed: 5 + cache_duration: "1h" + enable_aggregation: true + +# RSS Feed URL Discovery Notes: +# Common RSS feed paths to try: +# - /feed.xml, /rss.xml, /index.xml +# - /feed/, /rss/, /atom.xml +# - /feeds/all.atom.xml +# - Check HTML tags: \ No newline at end of file diff --git a/data/mock-external-posts.yaml b/data/mock-external-posts.yaml new file mode 100644 index 0000000..9cf9516 --- /dev/null +++ b/data/mock-external-posts.yaml @@ -0,0 +1,62 @@ +# Mock external blog posts for testing +# This file simulates RSS feed data when actual feeds are not available +mock_posts: + - title: "Advanced Cloud Security Patterns" + url: "https://www.devjev.nl/posts/cloud-security-patterns" + description: "Exploring advanced security patterns for cloud-native applications, including zero-trust architecture and secure service mesh implementations." + date: "2024-01-15T10:30:00Z" + author: "DevJev" + source: "DevJev.nl" + source_url: "https://www.devjev.nl/" + image: "https://via.placeholder.com/400x200/0066cc/ffffff?text=Cloud+Security" + external: true + + - title: "Kubernetes Networking Deep Dive" + url: "https://bearman.nl/posts/kubernetes-networking" + description: "A comprehensive guide to understanding Kubernetes networking, covering CNI plugins, service mesh, and network policies for enterprise deployments." + date: "2024-01-12T14:15:00Z" + author: "Bearman" + source: "Bearman.nl" + source_url: "https://bearman.nl/" + image: "https://via.placeholder.com/400x200/28a745/ffffff?text=K8s+Networking" + external: true + + - title: "Infrastructure as Code Best Practices" + url: "https://wesleycamargo.github.io/posts/iac-best-practices" + description: "Essential best practices for Infrastructure as Code implementation, covering Terraform, Ansible, and GitOps workflows for scalable cloud infrastructure." + date: "2024-01-10T09:45:00Z" + author: "Wesley Camargo" + source: "Wesley Camargo" + source_url: "https://wesleycamargo.github.io/" + image: "https://via.placeholder.com/400x200/dc3545/ffffff?text=IaC+Best+Practices" + external: true + + - title: "Serverless Architecture Patterns" + url: "https://www.devjev.nl/posts/serverless-patterns" + description: "Comprehensive overview of serverless architecture patterns using AWS Lambda, Azure Functions, and Google Cloud Functions for modern applications." + date: "2024-01-08T16:20:00Z" + author: "DevJev" + source: "DevJev.nl" + source_url: "https://www.devjev.nl/" + image: "https://via.placeholder.com/400x200/ffc107/000000?text=Serverless" + external: true + + - title: "Container Security Fundamentals" + url: "https://bearman.nl/posts/container-security" + description: "Essential security practices for containerized applications, including image scanning, runtime protection, and compliance frameworks." + date: "2024-01-05T11:30:00Z" + author: "Bearman" + source: "Bearman.nl" + source_url: "https://bearman.nl/" + image: "https://via.placeholder.com/400x200/6f42c1/ffffff?text=Container+Security" + external: true + + - title: "Multi-Cloud Strategy Implementation" + url: "https://wesleycamargo.github.io/posts/multi-cloud-strategy" + description: "Strategic approach to implementing multi-cloud architectures, covering vendor management, cost optimization, and operational complexity." + date: "2024-01-03T08:15:00Z" + author: "Wesley Camargo" + source: "Wesley Camargo" + source_url: "https://wesleycamargo.github.io/" + image: "https://via.placeholder.com/400x200/17a2b8/ffffff?text=Multi-Cloud" + external: true \ No newline at end of file diff --git a/layouts/blog/list.html b/layouts/blog/list.html new file mode 100644 index 0000000..b10c92e --- /dev/null +++ b/layouts/blog/list.html @@ -0,0 +1,59 @@ +{{ 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 }} + + +{{ end }} + +{{ define "content" }} +
+
+
+ {{/* Get external posts */}} + {{ $externalPosts := partial "helpers/rss-aggregator.html" . }} + + {{/* Display external posts first */}} + {{ range first 6 $externalPosts }} + {{ partial "cards/external-post.html" . }} + {{ end }} + + {{/* Then display local posts */}} + {{ $localPosts := where .RegularPagesRecursive "Layout" "!=" "search" }} + {{ $numShow := site.Params.features.pagination.maxPostsPerPage | default 12}} + {{ $paginator := .Paginate $localPosts $numShow }} + {{ range $paginator.Pages }} + {{ if .Layout }} + {{/* ignore the search.md file*/}} + {{ else }} + {{ partial "cards/post.html" . }} + {{ end }} + {{ end }} +
+
+ {{ partial "pagination.html" . }} +
+
+
+{{ end }} \ No newline at end of file diff --git a/layouts/posts/list.html b/layouts/posts/list.html new file mode 100644 index 0000000..5c91932 --- /dev/null +++ b/layouts/posts/list.html @@ -0,0 +1,96 @@ +{{ 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 }} + + +{{ end }} + +{{ define "content" }} +
+
+
+ {{/* Get local posts */}} + {{ $localPosts := where .RegularPagesRecursive "Layout" "!=" "search" }} + + {{/* Get external posts */}} + {{ $externalPosts := partial "helpers/rss-aggregator.html" . }} + + {{/* Combine and sort posts by date */}} + {{ $allPosts := slice }} + + {{/* Add local posts to collection */}} + {{ range $localPosts }} + {{ $post := dict + "title" .Title + "url" .RelPermalink + "date" .Date + "summary" .Summary + "external" false + "page" . + }} + {{ $allPosts = $allPosts | append $post }} + {{ end }} + + {{/* Add external posts to collection */}} + {{ range $externalPosts }} + {{ $post := dict + "title" .title + "url" .url + "date" (.date | time.AsTime) + "summary" .description + "external" true + "externalData" . + }} + {{ $allPosts = $allPosts | append $post }} + {{ end }} + + {{/* Sort all posts by date */}} + {{ $sortedPosts := sort $allPosts "date" "desc" }} + + {{/* Simple pagination - use Hugo's built-in pagination with local posts only for now */}} + {{ $numShow := site.Params.features.pagination.maxPostsPerPage | default 12}} + {{ $paginator := .Paginate $localPosts $numShow }} + + {{/* Display external posts first (latest ones) */}} + {{ $externalPostsToShow := first $numShow $externalPosts }} + {{ range $externalPostsToShow }} + {{ partial "cards/external-post.html" . }} + {{ end }} + + {{/* Then display local posts */}} + {{ range $paginator.Pages }} + {{ if .Layout }} + {{/* ignore the search.md file*/}} + {{ else }} + {{ partial "cards/post.html" . }} + {{ end }} + {{ end }} +
+
+ {{ partial "pagination.html" . }} +
+
+
+{{ end }} \ No newline at end of file diff --git a/themes/toha/assets/styles/application.template.scss b/themes/toha/assets/styles/application.template.scss index 053a1b8..6e1088b 100644 --- a/themes/toha/assets/styles/application.template.scss +++ b/themes/toha/assets/styles/application.template.scss @@ -43,6 +43,7 @@ @import './sections/education'; @import './sections/projects'; @import './sections/recent-posts'; +@import './sections/external-posts'; @import './sections/achievements'; @import './sections/accomplishments'; @import './sections/publications'; diff --git a/themes/toha/assets/styles/sections/external-posts.scss b/themes/toha/assets/styles/sections/external-posts.scss new file mode 100644 index 0000000..96183c5 --- /dev/null +++ b/themes/toha/assets/styles/sections/external-posts.scss @@ -0,0 +1,78 @@ +/* External Post Cards Styling */ +.external-post-card { + position: relative; +} + +.external-post-card .card { + border: 2px solid #e3f2fd; + background: linear-gradient(135deg, #f8fcff 0%, #e3f2fd 100%); +} + +.external-post-card .card:hover { + border-color: #2196f3; + transform: translateY(-2px); + transition: all 0.3s ease; +} + +.external-badge { + position: absolute; + top: 10px; + right: 10px; + z-index: 10; +} + +.external-badge .badge { + font-size: 0.75rem; + padding: 0.375rem 0.5rem; +} + +.external-post-card .placeholder-img { + height: 200px; + font-size: 3rem; +} + +.external-source { + margin-top: 0.5rem; + padding-top: 0.5rem; + border-top: 1px solid #e9ecef; +} + +.external-source a { + color: #0066cc; + text-decoration: none; +} + +.external-source a:hover { + text-decoration: underline; +} + +/* Dark mode support */ +[data-theme="dark"] .external-post-card .card { + border-color: #1e3a8a; + background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); +} + +[data-theme="dark"] .external-post-card .card:hover { + border-color: #3b82f6; +} + +[data-theme="dark"] .external-post-card .placeholder-img { + background-color: #374151 !important; +} + +[data-theme="dark"] .external-source { + border-top-color: #374151; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .external-badge { + top: 5px; + right: 5px; + } + + .external-badge .badge { + font-size: 0.65rem; + padding: 0.25rem 0.375rem; + } +} \ No newline at end of file diff --git a/themes/toha/layouts/partials/cards/external-post.html b/themes/toha/layouts/partials/cards/external-post.html new file mode 100644 index 0000000..0b50f4d --- /dev/null +++ b/themes/toha/layouts/partials/cards/external-post.html @@ -0,0 +1,54 @@ +{{/* + External Post Card Template + Used for displaying aggregated external blog posts + Expects external post data structure +*/}} + +
+
+
+ + {{ if .image }} + External Post Image + {{ else }} +
+ +
+ {{ end }} + + {{/* External post indicator */}} +
+ + {{ .source }} + +
+
+
+ +
{{ .title }}
+

{{ .description | plainify | truncate 150 }}

+ + {{/* External source info */}} +
+ + {{ .author }} + {{ if .source_url }} + • {{ .source }} + {{ else }} + • {{ .source }} + {{ end }} + +
+
+
+ + {{ if .date }} + {{ .date | time.Format ":date_full" }} + {{ end }} + + + {{ i18n "read" }} + +
+
+
\ No newline at end of file diff --git a/themes/toha/layouts/partials/helpers/rss-aggregator.html b/themes/toha/layouts/partials/helpers/rss-aggregator.html new file mode 100644 index 0000000..ec2bb28 --- /dev/null +++ b/themes/toha/layouts/partials/helpers/rss-aggregator.html @@ -0,0 +1,33 @@ +{{/* + RSS Feed Aggregator + Fetches external RSS feeds and returns a standardized data structure + Falls back to mock data if RSS feeds are not available + Usage: {{ $externalPosts := partial "helpers/rss-aggregator.html" . }} +*/}} + +{{ $externalPosts := slice }} +{{ $feedConfig := index site.Data "external-blogs" }} + +{{ if and $feedConfig $feedConfig.config.enable_aggregation }} + {{ $maxPostsPerFeed := $feedConfig.config.max_posts_per_feed | default 5 }} + + {{/* For now, use mock data in all environments until RSS feeds are verified */}} + {{ with index site.Data "mock-external-posts" }} + {{ range .mock_posts }} + {{ $externalPosts = $externalPosts | append . }} + {{ end }} + {{ end }} + + {{/* TODO: Enable RSS fetching when feeds are verified working + {{ if eq hugo.Environment "production" }} + {{ range $feedConfig.feeds }} + ... RSS fetching logic ... + {{ end }} + {{ end }} + */}} + + {{/* Sort external posts by date (newest first) */}} + {{ $externalPosts = sort $externalPosts "date" "desc" }} +{{ end }} + +{{ return $externalPosts }} \ No newline at end of file diff --git a/themes/toha/layouts/partials/sections/recent-posts.html b/themes/toha/layouts/partials/sections/recent-posts.html index 3f09491..1f438a8 100644 --- a/themes/toha/layouts/partials/sections/recent-posts.html +++ b/themes/toha/layouts/partials/sections/recent-posts.html @@ -19,8 +19,49 @@

{{ end }}
- {{ range first $numShow (where (where site.RegularPages.ByDate.Reverse "Type" "posts" ) "Layout" "!=" "search") }} - {{ partial "cards/post.html" . }} + {{/* Get local posts */}} + {{ $localPosts := where (where site.RegularPages.ByDate.Reverse "Type" "posts" ) "Layout" "!=" "search" }} + + {{/* Get external posts */}} + {{ $externalPosts := partial "helpers/rss-aggregator.html" . }} + + {{/* Combine and sort posts by date */}} + {{ $allPosts := slice }} + + {{/* Add local posts to collection */}} + {{ range $localPosts }} + {{ $post := dict + "title" .Title + "url" .RelPermalink + "date" .Date + "summary" .Summary + "external" false + "page" . + }} + {{ $allPosts = $allPosts | append $post }} + {{ end }} + + {{/* Add external posts to collection */}} + {{ range $externalPosts }} + {{ $post := dict + "title" .title + "url" .url + "date" (.date | time.AsTime) + "summary" .description + "external" true + "externalData" . + }} + {{ $allPosts = $allPosts | append $post }} + {{ end }} + + {{/* Sort all posts by date and display */}} + {{ $sortedPosts := sort $allPosts "date" "desc" }} + {{ range first $numShow $sortedPosts }} + {{ if .external }} + {{ partial "cards/external-post.html" .externalData }} + {{ else }} + {{ partial "cards/post.html" .page }} + {{ end }} {{ end }}