Use PostCSS for bundling
This commit is contained in:
kbe
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
@@ -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 }}
|
||||
|
||||
Generated
+2024
-11
File diff suppressed because it is too large
Load Diff
+12
-3
@@ -7,7 +7,10 @@
|
||||
"fetch-data": "node scripts/fetch-wordpress.js",
|
||||
"generate-content": "node scripts/generate-content.js",
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -15,7 +18,13 @@
|
||||
"node-fetch": "^3.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"yarn": "^1.22.22",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}]
|
||||
})
|
||||
]
|
||||
}
|
||||
+8
-17
@@ -6,24 +6,15 @@ set -e
|
||||
# Log the start of the 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..."
|
||||
# Assuming sass is installed and available in the environment or Docker image
|
||||
# Compile theme.scss to theme.css
|
||||
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."
|
||||
yarn run build
|
||||
echo "CSS building completed successfully."
|
||||
|
||||
# Log the beginning of Hugo production build
|
||||
echo "Generating production build with Hugo..."
|
||||
|
||||
@@ -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();
|
||||
Vendored
+9972
File diff suppressed because one or more lines are too long
+2
-10104
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user