Use PostCSS for bundling
This commit is contained in:
kbe
45
assets/css/bundle.css.old
Normal file
45
assets/css/bundle.css.old
Normal 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;
|
||||
}
|
||||
@@ -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 }}
|
||||
|
||||
2035
package-lock.json
generated
2035
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
23
postcss.config.js
Normal file
23
postcss.config.js
Normal 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
|
||||
}]
|
||||
})
|
||||
]
|
||||
}
|
||||
@@ -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..."
|
||||
|
||||
46
scripts/bundle-css.js
Normal file
46
scripts/bundle-css.js
Normal 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();
|
||||
9972
static/assets/css/bundle.min.css
vendored
Normal file
9972
static/assets/css/bundle.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
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