Use PostCSS for bundling

Dockerfile

@@ -5,7 +5,7 @@ FROM hugomods/hugo:nightly
 RUN apk add --no-cache nodejs npm
 
 # Install Sass (Dart Sass) globally
-RUN npm install -g sass
+RUN npm install -g sass yarn
 
 # Set the working directory inside the container
 WORKDIR /app
@@ -18,7 +18,7 @@ RUN chmod +x scripts/build.sh
 
 # Install Node.js dependencies if any (e.g., for fetch-wordpress.js)
 # Assuming package.json exists and has dependencies
-RUN if [ -f package.json ]; then npm install; fi
+RUN if [ -f package.json ]; then yarn install; fi
 
 # Ensure /usr/local/bin is in PATH for the CMD
 ENV PATH="/usr/local/bin:$PATH"

assets/css/bundle.css.old

@@ -0,0 +1,45 @@
+/* PostCSS Bundle - All CSS files from layouts/_default/baseof.html */
+
+/* Import Bootstrap CSS */
+@import url('../static/assets/plugins/bootstrap/bootstrap.min.css');
+
+/* Import Theme CSS */
+@import url('../static/assets/css/theme.css');
+
+/* Import Bootstrap Icons */
+@import url('../static/assets/plugins/bootstrap-icons/bootstrap-icons.css');
+
+/* Import Font Awesome */
+@import url('../static/assets/plugins/font-awesome/css/all.css');
+
+/* Additional CSS files (uncomment as needed) */
+/* @import url('../static/assets/plugins/owl-carousel/owl.carousel.min.css'); */
+/* @import url('../static/assets/plugins/owl-carousel/owl.theme.default.min.css'); */
+/* @import url('../static/assets/plugins/magnific-popup/magnific-popup.min.css'); */
+/* @import url('../static/assets/plugins/scrollcue/scrollcue.css'); */
+/* @import url('../static/assets/plugins/swiper/swiper-bundle.min.css'); */
+/* @import url('../static/assets/css/theme-colors/theme-color-blue.css'); */
+
+/* Custom styles and overrides */
+:root {
+  /* Custom CSS variables can be defined here */
+}
+
+/* Ensure proper box-sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Ensure responsive images */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Ensure proper font rendering */
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

hugo.toml

@@ -3,6 +3,7 @@ languageCode = 'fr-fr'
 title = 'Mistergeek'
 # theme = "your-theme"
 ignoreLogs = ["warning-goldmark-raw-html"]
+enableRobotsTXT = true
 
 # [permalinks]
   # posts = "/:section/:slug/"
@@ -32,7 +33,7 @@ ignoreLogs = ["warning-goldmark-raw-html"]
     creator = "@mistergeekfrance"
   
   # Facebook
-  facebook_page = "mistergeek.fr"
+  facebook_page = "mistergeekfrance"
   youtube_channel = "UCXXXXXXXXXXXXXXXXXXX"
   
   # Search Engine Verification
@@ -41,27 +42,27 @@ ignoreLogs = ["warning-goldmark-raw-html"]
   # yandex_verification = "your-yandex-verification-code"
   
   # Local SEO
-  [params.seo.local]
-    enabled = true
-    country = "FR"
-    language = "fr"
-    region = "Île-de-France"
-    city = "Paris"
-    latitude = "48.8566"
-    longitude = "2.3522"
+  # [params.seo.local]
+  #   enabled = true
+  #   country = "FR"
+  #   language = "fr"
+  #   region = "Île-de-France"
+  #   city = "Paris"
+  #   latitude = "48.8566"
+  #   longitude = "2.3522"
   
   # Rich snippets
   enable_search_box = true
   enable_sitelinks_searchbox = true
   
   # Verification codes
-  [params.seo.verification]
-    google = "your-google-verification-code"
-    bing = "your-bing-verification-code"
-    yandex = "your-yandex-verification-code"
-    alexa = "your-alexa-verification-code"
-    pinterest = "your-pinterest-verification-code"
-    norton = "your-norton-verification-code"
+  # [params.seo.verification]
+  #   google = "your-google-verification-code"
+  #   bing = "your-bing-verification-code"
+  #   yandex = "your-yandex-verification-code"
+  #   alexa = "your-alexa-verification-code"
+  #   pinterest = "your-pinterest-verification-code"
+  #   norton = "your-norton-verification-code"
 
 # Image optimization for SEO
 [imaging]

layouts/_default/baseof.html

@@ -8,18 +8,22 @@
     <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}</title>
     {{ partial "seo/seo-config.html" . }}
     
-    <!-- CSS -->
-    <link href="/assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
-    <link href="/assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
-    <link href="/assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
-    <link href="/assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
-    <link href="/assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
-    <link href="/assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
-    <link href="/assets/css/theme.css" rel="stylesheet">
-    <link href="/assets/css/theme-colors/theme-color-blue.css" rel="stylesheet">
-    <!-- Fonts/Icons -->
-    <link href="/assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
-    <link href="/assets/plugins/font-awesome/css/all.css" rel="stylesheet">
+    <!-- CSS - PostCSS Bundled -->
+    <link href="/assets/css/bundle.min.css" rel="stylesheet">
+    
+    <!-- Individual CSS files (uncomment if needed for development) -->
+    <!-- <link href="/assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet"> -->
+    <!-- <link href="/assets/css/theme.css" rel="stylesheet"> -->
+    <!-- <link href="/assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> -->
+    <!-- <link href="/assets/plugins/font-awesome/css/all.css" rel="stylesheet"> -->
+    
+    <!-- Optional CSS files (uncomment as needed) -->
+    <!-- <link href="/assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet"> -->
+    <!-- <link href="/assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet"> -->
+    <!-- <link href="/assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet"> -->
+    <!-- <link href="/assets/plugins/scrollcue/scrollcue.css" rel="stylesheet"> -->
+    <!-- <link href="/assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet"> -->
+    <!-- <link href="/assets/css/theme-colors/theme-color-blue.css" rel="stylesheet"> -->
 </head>
 <body data-preloader="1">
 
@@ -48,4 +52,4 @@
     <script src="/assets/js/functions.js"></script>
     {{ partial "scripts.html" . }}
 </body>
-</html>
+</html>

layouts/partials/footer.html

@@ -20,14 +20,12 @@
                     </ul>
                 </div>
 
-
                 <div class="col-6 col-sm-6 col-lg-3">
                     <h6 class="font-small fw-medium uppercase">Toutes les catégories</h6>
                     <ul class="list-unstyled">
                         {{ if .Site.Data.wordpress }}
-                            {{ $count := 0 }}
                             {{ range $index, $element := .Site.Data.wordpress.categories }}
-                                {{ if ne $element.name "Featured" }}
+                                {{ if and (ne $element.name "Featured") (gt $element.count 0) }}
                                 <li class="nav-item">
                                     <a class="nav-link" href="/{{ $element.slug }}">{{ $element.name }}</a>
                                 </li>

layouts/partials/seo/head-performance.html

@@ -1,34 +0,0 @@
-{{- /* Performance optimization for SEO */ -}}
-
-<!-- DNS Prefetch and Preconnect for performance -->
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="dns-prefetch" href="//www.google-analytics.com">
-<link rel="dns-prefetch" href="//googletagmanager.com">
-<link rel="dns-prefetch" href="//www.googletagmanager.com">
-<link rel="dns-prefetch" href="//fonts.googleapis.com">
-<link rel="dns-prefetch" href="//fonts.gstatic.com">
-
-<!-- Resource hints for common CDNs -->
-<link rel="preconnect" href="https://cdnjs.cloudflare.com">
-<link rel="preconnect" href="https://unpkg.com">
-
-<!-- Prefetch critical resources -->
-<link rel="prefetch" href="/assets/css/theme.css">
-<link rel="prefetch" href="/assets/images/logo.png">
-
-<!-- Preload critical fonts -->
-<link rel="preload" href="/assets/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="/assets/fonts/icon-font.woff2" as="font" type="font/woff2" crossorigin>
-
-<!-- Performance meta tags -->
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="HandheldFriendly" content="True">
-<meta name="MobileOptimized" content="320">
-
-<!-- Disable phone number detection -->
-<meta name="format-detection" content="telephone=no">
-<meta name="format-detection" content="date=no">
-<meta name="format-detection" content="address=no">
-<meta name="format-detection" content="email=no">

layouts/partials/seo/seo-config.html

@@ -1,9 +1,6 @@
 {{- /* SEO Configuration Partial */ -}}
 {{- /* This partial includes all SEO-related partials */ -}}
 
-<!-- Performance optimizations -->
-{{ partial "seo/head-performance.html" . }}
-
 <!-- Core SEO Meta Tags -->
 {{ partial "seo/seo-meta.html" . }}
 
@@ -68,4 +65,4 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 {{- if $code }}
 <meta name="{{ $name }}" content="{{ $code }}">
 {{- end }}
-{{- end }}
+{{- end }}

layouts/partials/seo/seo-meta.html

@@ -1,4 +1,4 @@
-{{- $description := .Description | default .Summary | default .Site.Params.description | default .Site.Title -}}
+{{- $description := .Description | default .Params.description | default .Summary | default .Site.Params.description | default .Site.Title -}}
 {{- $keywords := delimit (.Keywords | default .Site.Params.keywords | default (slice)) ", " -}}
 {{- $author := .Params.author | default .Site.Params.author | default .Site.Title -}}
 {{- $robots := .Params.robots | default "index, follow" -}}
@@ -37,4 +37,4 @@
 <meta name="DC.Title" content="{{ .Title | default .Site.Title }}">
 <meta name="DC.Creator" content="{{ $author }}">
 <meta name="DC.Description" content="{{ $description }}">
-<meta name="DC.Language" content="{{ .Site.Language.Lang | default "en" }}">
+<meta name="DC.Language" content="{{ .Site.Language.Lang | default "en" }}">

package.json

@@ -2,13 +2,15 @@
   "name": "hugo-wordpress-blog",
   "version": "1.0.0",
   "description": "Hugo static site with WordPress content",
+  "license": "MIT",
   "scripts": {
     "fetch-data": "node scripts/fetch-wordpress.js",
     "generate-content": "node scripts/generate-content.js",
     "prebuild": "npm run fetch-data && npm run generate-content",
-    "build": "npm run build:css && hugo --minify",
-    "build:css": "sass assets/css/scss:static/assets/css",
-    "dev": "npm run fetch-data && npm run generate-content && npm run build:css && hugo server -D",
+    "build": "npm run build:css && npm run build:css:bundle",
+    "build:css": "sass assets/css/scss:static/assets/css --style=compressed && postcss static/assets/css/*.css --replace --use autoprefixer cssnano",
+    "build:css:dev": "sass assets/css/scss:static/assets/css --style=expanded --source-map",
+    "build:css:bundle": "node scripts/bundle-css.js",
     "clean": "rm -rf data/wordpress content/posts public"
   },
   "dependencies": {
@@ -16,6 +18,13 @@
     "node-fetch": "^3.3.2"
   },
   "devDependencies": {
-    "sass": "^1.69.5"
+    "autoprefixer": "^10.4.16",
+    "cssnano": "^6.0.1",
+    "postcss": "^8.4.31",
+    "postcss-cli": "^10.1.0",
+    "postcss-import": "^16.1.1",
+    "postcss-url": "^10.1.3",
+    "sass": "^1.69.5",
+    "yarn": "^1.22.22"
   }
-}
+}

postcss.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  plugins: [
+    require('postcss-import')({
+      path: ['static/assets/css', 'static/assets/plugins', 'assets/css/scss']
+    }),
+    require('postcss-url')({
+      url: 'inline',
+      maxSize: 100,
+      fallback: 'copy'
+    }),
+    require('autoprefixer')({
+      overrideBrowserslist: ['> 1%', 'last 2 versions', 'IE >= 11']
+    }),
+    require('cssnano')({
+      preset: ['default', {
+        discardComments: { removeAll: true },
+        normalizeWhitespace: true,
+        colormin: true,
+        zindex: false
+      }]
+    })
+  ]
+}

scripts/README.md

@@ -0,0 +1,37 @@
+# Website Update Script
+
+This script triggers the builder container to update the website content using Docker Compose.
+
+## Usage
+
+1. Make the script executable:
+   ```sh
+   chmod +x scripts/update-website.sh
+   ```
+
+2. Run the script manually to test it:
+   ```sh
+   ./scripts/update-website.sh
+   ```
+
+3. To set up a cron job, add the following line to your crontab (edit with `crontab -e`):
+   ```sh
+   0 2 * * * /home/acid/Documents/mistergeek/scripts/update-website.sh >> /home/acid/Documents/mistergeek/logs/update-website.log 2>&1
+   ```
+
+   This will run the update script every day at 2:00 AM.
+
+   Alternatively, you can run the update script every 6 hours:
+   ```sh
+   0 */6 * * * /home/acid/Documents/mistergeek/scripts/update-website.sh >> /home/acid/Documents/mistergeek/logs/update-website.log 2>&1
+   ```
+
+## Logs
+
+Logs are stored in `/home/acid/Documents/mistergeek/logs/update-website.log`.
+
+## Requirements
+
+- Docker
+- Docker Compose
+- The `docker` and `docker compose` commands must be available in the system's PATH

scripts/build.sh

@@ -3,18 +3,24 @@
 # Exit immediately if a command exits with a non-zero status.
 set -e
 
+# Log the start of the build process
+echo "Starting build process..."
+
+# Log the beginning of CSS compilation and data preparation
+echo "Running pre-build tasks..."
+yarn run prebuild
+echo "Pre-build tasks completed successfully."
+
+# Log the beginning of CSS building
 echo "Building CSS..."
-# Assuming sass is installed and available in the environment or Docker image
-# Compile theme.scss to theme.css
-sass assets/css/scss/theme.scss static/assets/css/theme.css
-
-echo "Fetching content from WordPress..."
-# Assuming Node.js is installed and available in the environment or Docker image
-node scripts/fetch-wordpress.js
+yarn run build
+echo "CSS building completed successfully."
 
+# Log the beginning of Hugo production build
 echo "Generating production build with Hugo..."
-
 # Assuming Hugo is installed and available in the environment or Docker image
 hugo --minify --environment production --config hugo.toml
+echo "Hugo production build completed successfully."
 
+# Log the successful completion of the build process
 echo "Build process completed successfully!"

scripts/bundle-css.js

@@ -0,0 +1,46 @@
+const fs = require('fs');
+const path = require('path');
+
+// Define the CSS files to bundle in order
+const cssFiles = [
+  'static/assets/plugins/bootstrap/bootstrap.min.css',
+  'static/assets/css/theme.css',
+  'static/assets/plugins/bootstrap-icons/bootstrap-icons.css',
+  'static/assets/plugins/font-awesome/css/all.css'
+];
+
+// Output file
+const outputFile = 'static/assets/css/bundle.min.css';
+
+// Function to bundle CSS files
+function bundleCSS() {
+  let bundledCSS = '';
+  
+  console.log('Starting CSS bundling...');
+  
+  cssFiles.forEach(file => {
+    const filePath = path.join(__dirname, '..', file);
+    console.log(`Processing: ${filePath}`);
+    
+    if (fs.existsSync(filePath)) {
+      const content = fs.readFileSync(filePath, 'utf8');
+      bundledCSS += `\n/* === ${file} === */\n${content}\n`;
+      console.log(`✓ Added: ${file}`);
+    } else {
+      console.warn(`⚠ Warning: ${file} not found`);
+    }
+  });
+  
+  // Ensure output directory exists
+  const outputDir = path.dirname(outputFile);
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+  
+  // Write bundled CSS
+  fs.writeFileSync(path.join(__dirname, '..', outputFile), bundledCSS);
+  console.log(`✓ Bundled CSS saved to: ${outputFile}`);
+}
+
+// Run the bundling
+bundleCSS();

scripts/fetch-wordpress.js

@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
 
-const WORDPRESS_API = 'https://www.mistergeek.net/wp-json/wp/v2';
+const WORDPRESS_API = 'https://wp.mistergeek.net/wp-json/wp/v2';
 const OUTPUT_DIR = path.join(__dirname, '..', 'data', 'wordpress');
 const HUGO_DATA_DIR = path.join(__dirname, '..', 'data');
 

scripts/update-website.cron

@@ -0,0 +1,7 @@
+# Crontab file for updating the website
+
+# Run the update script every day at 2:00 AM
+0 2 * * * /home/acid/Documents/mistergeek/scripts/update-website.sh >> /home/acid/Documents/mistergeek/logs/update-website.log 2>&1
+
+# Alternatively, run the update script every 6 hours
+# 0 */6 * * * /home/acid/Documents/mistergeek/scripts/update-website.sh >> /home/acid/Documents/mistergeek/logs/update-website.log 2>&1

scripts/update-website.sh

@@ -0,0 +1,24 @@
+#!/bin/sh
+
+# Exit immediately if a command exits with a non-zero status.
+set -e
+
+# Log the start of the update process
+echo "Starting website update process..."
+
+# Navigate to the project directory
+cd "$(dirname "$0")/.."
+
+# Build the Docker image if it doesn't exist
+echo "Checking for Docker image..."
+if ! docker compose ls | grep -q "builder"; then
+  echo "Docker image not found. Building image..."
+  docker compose build
+fi
+
+# Start the builder container
+echo "Starting builder container..."
+docker compose run --rm builder
+
+# Log the successful completion of the update process
+echo "Website update process completed successfully!"

static/assets/images/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

static/assets/images/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}