kbe/hugo-mistergeek
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use PostCSS for bundling

Browse Source
This commit is contained in:
kbe
2025-08-20 00:07:58 +02:00
parent 880af9bb7d
commit 2f98e9f3fc
13 changed files with 13134 additions and 10192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/bundle.css.old
+45
View File
@@ -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;
}
layouts/_default/baseof.html
+17 -13
View File
@@ -8,18 +8,22 @@
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}</title> <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}</title>
{{ partial "seo/seo-config.html" . }} {{ partial "seo/seo-config.html" . }}
<!-- CSS --> <!-- CSS - PostCSS Bundled -->
<link href="/assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="/assets/css/bundle.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"> <!-- Individual CSS files (uncomment if needed for development) -->
<link href="/assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet"> <!-- <link href="/assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet"> -->
<link href="/assets/plugins/scrollcue/scrollcue.css" rel="stylesheet"> <!-- <link href="/assets/css/theme.css" rel="stylesheet"> -->
<link href="/assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet"> <!-- <link href="/assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> -->
<link href="/assets/css/theme.css" rel="stylesheet"> <!-- <link href="/assets/plugins/font-awesome/css/all.css" rel="stylesheet"> -->
<link href="/assets/css/theme-colors/theme-color-blue.css" rel="stylesheet">
<!-- Fonts/Icons --> <!-- Optional CSS files (uncomment as needed) -->
<link href="/assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> <!-- <link href="/assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet"> -->
<link href="/assets/plugins/font-awesome/css/all.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> </head>
<body data-preloader="1"> <body data-preloader="1">
@@ -48,4 +52,4 @@
<script src="/assets/js/functions.js"></script> <script src="/assets/js/functions.js"></script>
{{ partial "scripts.html" . }} {{ partial "scripts.html" . }}
</body> </body>
</html> </html>
layouts/partials/seo/head-performance.html
-34
View File
@@ -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 -4
View File
@@ -1,9 +1,6 @@
{{- /* SEO Configuration Partial */ -}} {{- /* SEO Configuration Partial */ -}}
{{- /* This partial includes all SEO-related partials */ -}} {{- /* This partial includes all SEO-related partials */ -}}
<!-- Performance optimizations -->
{{ partial "seo/head-performance.html" . }}
<!-- Core SEO Meta Tags --> <!-- Core SEO Meta Tags -->
{{ partial "seo/seo-meta.html" . }} {{ 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 }} {{- if $code }}
<meta name="{{ $name }}" content="{{ $code }}"> <meta name="{{ $name }}" content="{{ $code }}">
{{- end }} {{- end }}
{{- end }} {{- end }}
package-lock.json
Generated
+2024 -11
View File
File diff suppressed because it is too large Load Diff
package.json
+12 -3
View File
@@ -7,7 +7,10 @@
"fetch-data": "node scripts/fetch-wordpress.js", "fetch-data": "node scripts/fetch-wordpress.js",
"generate-content": "node scripts/generate-content.js", "generate-content": "node scripts/generate-content.js",
"prebuild": "npm run fetch-data && npm run generate-content", "prebuild": "npm run fetch-data && npm run generate-content",
"build:css": "sass assets/css/scss:static/assets/css", "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" "clean": "rm -rf data/wordpress content/posts public"
}, },
"dependencies": { "dependencies": {
@@ -15,7 +18,13 @@
"node-fetch": "^3.3.2" "node-fetch": "^3.3.2"
}, },
"devDependencies": { "devDependencies": {
"yarn": "^1.22.22", "autoprefixer": "^10.4.16",
"sass": "^1.69.5" "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
+23
View File
@@ -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/build.sh
+8 -17
View File
@@ -6,24 +6,15 @@ set -e
# Log the start of the build process # Log the start of the build process
echo "Starting build process..." echo "Starting build process..."
# Log the beginning of CSS compilation # 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..." echo "Building CSS..."
# Assuming sass is installed and available in the environment or Docker image yarn run build
# Compile theme.scss to theme.css echo "CSS building completed successfully."
echo "Compiling SASS to CSS..."
sass assets/css/scss/theme.scss static/assets/css/theme.css
echo "CSS compilation completed successfully."
# Log the beginning of data fetching from WordPress
echo "Fetching content from WordPress..."
# Assuming Node.js and Yarn are installed and available in the environment or Docker image
yarn run fetch-data
echo "Content fetched successfully from WordPress."
# Log the beginning of content generation for Hugo
echo "Generating content for Hugo..."
yarn run generate-content
echo "Content generation for Hugo completed successfully."
# Log the beginning of Hugo production build # Log the beginning of Hugo production build
echo "Generating production build with Hugo..." echo "Generating production build with Hugo..."
scripts/bundle-css.js
+46
View File
@@ -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();
static/assets/css/bundle.min.css
Vendored
+9972
View File
File diff suppressed because one or more lines are too long
static/assets/css/theme.css
+2 -10104
View File
File diff suppressed because one or more lines are too long
static/assets/css/theme.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
yarn.lock
+983 -5
View File
File diff suppressed because it is too large Load Diff