peskyadmin/DAM-static-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update tailwind v4, remove sass and postcss dependency

Browse Source
This commit is contained in:
Somrat 2025-02-16 12:07:19 +06:00
parent 3b220f635d
commit 02085ffbe0
29 changed files with 468 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/scss/base.scss → assets/css/base.css
View File

@ -55,5 +55,5 @@ code {
}
blockquote > p {
@apply my-0 #{!important};
@apply my-0!;
}

0
assets/scss/buttons.scss → assets/css/buttons.css
View File

54
assets/css/components.css Executable file
View File

@ -0,0 +1,54 @@
/* section style */
.section {
@apply py-24 xl:py-28;
}
.section-sm {
@apply py-16 xl:py-20;
}
/* container */
.container {
@apply mx-auto max-w-[1320px] px-4;
}
/* social icons */
.social-icons {
@apply space-x-4;
}
.social-icons li {
@apply inline-block;
}
.social-icons li a {
@apply flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-center leading-9 text-white dark:bg-darkmode-primary dark:text-dark;
}
.social-icons li a svg {
@apply h-5 w-5;
}
/* content style */
.content {
@apply prose max-w-none;
@apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-dark dark:prose-headings:text-darkmode-dark;
@apply prose-h1:text-h1-sm md:prose-h1:text-h1;
@apply prose-h2:text-h2-sm md:prose-h2:text-h2;
@apply prose-h3:text-h3-sm md:prose-h3:text-h3;
@apply prose-img:max-w-full prose-img:rounded;
@apply prose-hr:border-border dark:prose-hr:border-darkmode-border;
@apply prose-p:text-base prose-p:text-text dark:prose-p:text-darkmode-text;
@apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark dark:prose-blockquote:border-darkmode-primary dark:prose-blockquote:bg-darkmode-theme-light dark:prose-blockquote:text-darkmode-light;
@apply prose-pre:rounded-lg prose-pre:bg-theme-light dark:prose-pre:bg-darkmode-theme-light;
@apply prose-code:px-1 prose-code:text-primary dark:prose-code:text-darkmode-primary;
@apply prose-strong:text-dark dark:prose-strong:text-darkmode-text;
@apply prose-a:text-text prose-a:underline prose-a:hover:text-primary dark:prose-a:text-darkmode-text dark:prose-a:hover:text-darkmode-primary;
@apply prose-li:text-text dark:prose-li:text-darkmode-text;
@apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] dark:prose-table:before:border-darkmode-border;
@apply prose-thead:border-border prose-thead:bg-theme-light dark:prose-thead:border-darkmode-border dark:prose-thead:bg-darkmode-theme-light;
@apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark dark:prose-th:text-darkmode-text;
@apply prose-tr:border-border dark:prose-tr:border-darkmode-border;
@apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] dark:prose-td:text-darkmode-text;
}
.content .btn {
@apply dark:hover:text-dark no-underline hover:!text-white;
}

2
assets/css/custom.css Normal file
View File

@ -0,0 +1,2 @@
/* DO NOT WRITE ANY STYLE IN THIS FILE */
/* If you want to add your own styles, please write it in the `./assets/css/custom.css` file. */

37
assets/css/main.css Executable file
View File

@ -0,0 +1,37 @@
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "./tailwind-plugin/tw-theme";
@plugin "./tailwind-plugin/tw-bs-grid";
@source "hugo_stats.json";
@custom-variant dark (&:where(.dark, .dark *));
@import "./safe.css";
@layer base {
@import "./base.css";
}
@layer components {
@import "./components.css";
@import "./navigation.css";
@import "./buttons.css";
}
@layer utilities {
@import "./utilities.css";
}
@import "search.css";
@import "social-share.css";
@import "gallery-slider.css";
@import "images.css";
@import "toc.css";
@import "tab.css";
@import "accordion.css";
@import "modal.css";
@import "notice.css";
@import "module-overrides.css";
@import "custom.css";

54
assets/css/module-overrides.css Normal file
View File

@ -0,0 +1,54 @@
/* table of contents */
.table-of-content {
@apply overflow-hidden rounded;
}
/* share icons */
.share-icons .share-link {
@apply h-9 w-9 rounded leading-9 bg-primary hover:bg-primary dark:bg-darkmode-primary dark:hover:bg-darkmode-primary;
}
.share-icons .share-icon svg {
@apply dark:fill-dark;
}
/* notice */
.notice {
@apply rounded-lg;
}
/* tab */
.tab {
@apply border-border dark:border-darkmode-border overflow-hidden rounded-lg border;
}
.tab-nav {
@apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light pl-4;
}
.tab-nav-item {
@apply text-dark dark:text-darkmode-dark px-8 !text-lg;
}
.tab-nav-item.active {
@apply border-dark dark:border-darkmode-primary;
}
.tab-content-panel {
@apply px-4 !pt-0;
}
/* accordion */
.accordion {
@apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light mb-6 overflow-hidden rounded-lg border;
}
.accordion-header {
@apply text-dark dark:text-darkmode-dark;
}
/* cookie consent */
.cookie-box {
@apply !rounded-lg;
}
/* slider */
.gallery-slider {
@apply !ml-0;
}

31
assets/scss/navigation.scss → assets/css/navigation.css
View File

@ -1,21 +1,8 @@
// navbar toggler
input#nav-toggle:checked + label #show-button {
@apply hidden;
}
input#nav-toggle:checked + label #hide-button {
@apply block;
}
input#nav-toggle:checked ~ #nav-menu {
@apply block;
}
.header {
@apply bg-body dark:bg-darkmode-body py-6;
}
// navbar items
/* navbar items */
.navbar {
@apply relative flex flex-wrap items-center justify-between;
}
@ -31,25 +18,21 @@ input#nav-toggle:checked ~ #nav-menu {
@apply text-center lg:text-left;
}
// .nav-item {
// @apply mx-3;
// }
.nav-link {
@apply text-dark hover:text-primary dark:text-darkmode-dark dark:hover:text-darkmode-primary block p-3 cursor-pointer font-semibold transition lg:px-2 lg:py-3;
}
.nav-dropdown {
@apply mr-0;
& > svg {
}
.nav-dropdown > svg {
@apply pointer-events-none;
}
&.active {
.nav-dropdown-list {
.nav-dropdown.active .nav-dropdown-list {
@apply block;
}
}
}
.nav-dropdown-list {
@apply bg-body dark:bg-darkmode-body z-10 min-w-[180px] rounded p-4 shadow hidden lg:invisible lg:absolute lg:block lg:opacity-0;
@ -63,7 +46,7 @@ input#nav-toggle:checked ~ #nav-menu {
@apply text-dark hover:text-primary dark:text-darkmode-text dark:hover:text-darkmode-primary block py-1 font-semibold transition;
}
//theme-switcher
/* theme-switcher */
.theme-switcher {
@apply inline-flex;

8
assets/css/safe.css Normal file
View File

@ -0,0 +1,8 @@
/* swiper pagination */
.swiper-pagination-bullet {
@apply !h-2.5 !w-2.5 !bg-theme-light !opacity-100 dark:!bg-darkmode-theme-light;
}
.swiper-pagination-bullet-active {
@apply !h-4 !w-4 !bg-primary dark:!bg-darkmode-primary;
}

29
assets/css/utilities.css Executable file
View File

@ -0,0 +1,29 @@
/* navbar toggler */
input#nav-toggle:checked + label #show-button {
@apply hidden;
}
input#nav-toggle:checked + label #hide-button {
@apply block;
}
input#nav-toggle:checked ~ #nav-menu {
@apply block;
}
.bg-gradient {
@apply bg-linear-to-b from-[rgba(249,249,249,1)] from-[0.53%] to-white to-[83.28%] dark:from-darkmode-theme-light dark:to-darkmode-body;
}
.shadow {
@apply shadow-[0px_4px_40px_rgba(0,0,0,0.05)];
}
/* form style */
.form-input {
@apply w-full rounded border-transparent bg-theme-light px-6 py-4 text-dark placeholder:text-light focus:border-primary dark:focus:border-darkmode-primary focus:ring-transparent dark:border-darkmode-border dark:bg-darkmode-theme-light dark:text-darkmode-light;
}
.form-label {
@apply mb-4 block font-secondary text-xl font-normal text-dark dark:text-darkmode-light;
}

2
assets/js/main.js
View File

@ -10,7 +10,7 @@
dropdownMenuToggler.forEach((toggler) => {
toggler?.addEventListener("click", (e) => {
e.target.closest('.nav-item').classList.toggle("active");
e.target.closest(".nav-item").classList.toggle("active");
});
});

74
assets/scss/components.scss
View File

@ -1,74 +0,0 @@
main {
min-height: 70vh;
}
// section style
.section {
@apply py-24 xl:py-28;
&-sm {
@apply py-16 xl:py-20;
}
}
// container
.container {
@apply mx-auto px-4 2xl:max-w-[1320px];
}
// form style
.form-input {
@apply bg-theme-light text-dark placeholder:text-light focus:border-primary dark:border-darkmode-border dark:bg-darkmode-theme-light dark:text-darkmode-light w-full rounded border-transparent px-6 py-4 focus:ring-transparent;
}
.form-label {
@apply font-secondary text-dark dark:text-darkmode-light mb-4 block text-xl font-normal;
}
// social icons
.social-icons {
@apply space-x-4;
li {
@apply inline-block;
a {
@apply bg-primary dark:bg-darkmode-primary dark:text-dark flex h-9 w-9 items-center justify-center rounded text-center leading-9 text-white;
svg {
@apply h-5 w-5;
}
}
}
}
// swiper pagination
.swiper-pagination-bullet {
@apply bg-theme-light dark:bg-darkmode-theme-light h-2.5 w-2.5 opacity-100 mx-1.5 #{!important};
&-active {
@apply bg-primary dark:bg-darkmode-primary h-4 w-4 #{!important};
}
}
// content style
.content {
@apply prose max-w-none;
@apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-dark prose-headings:dark:text-darkmode-dark;
@apply prose-h1:text-h1-sm md:prose-h1:text-h1;
@apply prose-h2:text-h2-sm md:prose-h2:text-h2;
@apply prose-h3:text-h3-sm md:prose-h3:text-h3;
@apply prose-img:max-w-full prose-img:rounded;
@apply prose-hr:border-border prose-hr:dark:border-darkmode-border;
@apply prose-p:text-base prose-p:text-text prose-p:dark:text-darkmode-text;
@apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark prose-blockquote:dark:border-darkmode-primary prose-blockquote:dark:bg-darkmode-theme-light prose-blockquote:dark:text-darkmode-light;
@apply prose-pre:rounded-lg prose-pre:bg-theme-light prose-pre:dark:bg-darkmode-theme-light;
@apply prose-code:px-1 prose-code:dark:text-darkmode-light;
@apply prose-strong:text-dark prose-strong:dark:text-darkmode-text;
@apply prose-a:text-text prose-a:underline hover:prose-a:text-primary prose-a:dark:text-darkmode-text hover:prose-a:dark:text-darkmode-primary;
@apply prose-li:text-text prose-li:dark:text-darkmode-text;
@apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] prose-table:before:dark:border-darkmode-border;
@apply prose-thead:border-border prose-thead:bg-theme-light prose-thead:dark:border-darkmode-border prose-thead:dark:bg-darkmode-theme-light;
@apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark prose-th:dark:text-darkmode-text;
@apply prose-tr:border-border prose-tr:dark:border-darkmode-border;
@apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] prose-td:dark:text-darkmode-text;
.btn {
@apply dark:hover:text-dark no-underline hover:text-white #{!important};
}
}

2
assets/scss/custom.scss
View File

@ -1,2 +0,0 @@
// DO NOT WRITE ANY STYLE IN THIS FILE
// If you want to add your own styles, please write it in the `./assets/scss/custom.scss` file.

30
assets/scss/main.scss
View File

@ -1,30 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@import "base";
}
@layer components {
@import "components";
@import "navigation";
@import "buttons";
}
@layer utilities {
@import "utilities";
}
@import "search";
@import "social-share";
@import "gallery-slider";
@import "images";
@import "toc";
@import "tab";
@import "accordion";
@import "modal";
@import "notice";
@import "module-overrides";
@import "custom";

58
assets/scss/module-overrides.scss
View File

@ -1,58 +0,0 @@
// table of contents
.table-of-content {
@apply overflow-hidden rounded;
}
// share icons
.share-icons {
.share-link {
@apply h-9 w-9 rounded leading-9;
@apply bg-primary hover:bg-primary dark:bg-darkmode-primary dark:hover:bg-darkmode-primary;
}
.share-icon svg {
@apply dark:fill-dark;
}
}
// notice
.notice {
@apply rounded-lg;
}
// tab
.tab {
@apply border-border dark:border-darkmode-border overflow-hidden rounded-lg border;
&-nav {
@apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light pl-4;
&-item {
@apply text-dark dark:text-darkmode-dark px-8 text-lg #{!important};
&.active {
@apply border-dark dark:border-darkmode-primary;
}
}
}
&-content {
&-panel {
@apply px-4 pt-0 #{!important};
}
}
}
// accordion
.accordion {
@apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light mb-6 overflow-hidden rounded-lg border;
&-header {
@apply text-dark dark:text-darkmode-dark;
}
}
// cookie consent
.cookie-box {
@apply rounded-lg #{!important};
}
// slider
.gallery-slider {
@apply ml-0 #{!important};
}

20
assets/scss/utilities.scss
View File

@ -1,20 +0,0 @@
.bg-gradient {
@apply dark:from-darkmode-theme-light dark:to-darkmode-body bg-gradient-to-b from-[rgba(249,249,249,1)] from-[0.53%] to-white to-[83.28%];
}
.rounded-sm {
@apply rounded-[4px];
}
.rounded {
@apply rounded-[6px];
}
.rounded-lg {
@apply rounded-[12px];
}
.rounded-xl {
@apply rounded-[16px];
}
.shadow {
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
}

1
exampleSite/assets/css/custom.css Executable file
View File

@ -0,0 +1 @@
/* Add your own custom styles here */

1
exampleSite/assets/scss/custom.scss
View File

@ -1 +0,0 @@
// Add your own custom styles here

4
exampleSite/data/theme.json
View File

@ -9,7 +9,7 @@
"theme_dark": ""
},
"text_color": {
"default": "#444444",
"text": "#444444",
"dark": "#040404",
"light": "#717171"
}
@ -23,7 +23,7 @@
"theme_dark": ""
},
"text_color": {
"default": "#B4AFB6",
"text": "#B4AFB6",
"dark": "#fff",
"light": "#B4AFB6"
}

48
exampleSite/go.mod
View File

@ -3,29 +3,29 @@ module hugoplate.netlify.app
go 1.21
require (
github.com/gethugothemes/hugo-modules/accordion v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/adsense v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/components/announcement v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/components/cookie-consent v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/components/custom-script v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/components/preloader v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/components/render-link v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/components/social-share v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/gallery-slider v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/gzip-caching v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/icons/font-awesome v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/images v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/modal v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/pwa v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/search v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/seo-tools/basic-seo v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/seo-tools/google-tag-manager v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/seo-tools/site-verifications v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/shortcodes/button v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/shortcodes/notice v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/tab v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/table-of-contents v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/videos v0.0.0-20250112030311-a0de82520a5a // indirect
github.com/gethugothemes/hugo-modules/accordion v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/adsense v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/components/announcement v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/components/cookie-consent v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/components/custom-script v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/components/preloader v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/components/render-link v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/components/social-share v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/gallery-slider v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/gzip-caching v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/icons/font-awesome v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/images v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/modal v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/pwa v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/search v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/seo-tools/basic-seo v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/seo-tools/google-tag-manager v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/seo-tools/site-verifications v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/shortcodes/button v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/shortcodes/notice v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/tab v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/table-of-contents v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/gethugothemes/hugo-modules/videos v0.0.0-20250213104422-d6c69545f20a // indirect
github.com/hugomods/mermaid v0.1.4 // indirect
github.com/zeon-studio/hugoplate v0.0.0-20250116040859-e767a2ce9068 // indirect
github.com/zeon-studio/hugoplate v0.0.0-20250205092428-3b220f635d99 // indirect
)

39
exampleSite/hugo.toml
View File

@ -38,40 +38,23 @@ pagerSize = 10
path = 'page'
############################# Modules ############################
[module]
[[module.mounts]]
source = "assets"
target = "assets"
[[module.mounts]]
source = "hugo_stats.json"
target = "assets/watching/hugo_stats.json"
############################# Build ##############################
[build]
noJSConfigInAssets = false
useResourceCacheWhen = 'fallback'
[build.buildStats]
enable = true
[[build.cachebusters]]
source = 'assets/watching/hugo_stats\.json'
target = 'style\.css'
[[build.cachebusters]]
source = '(postcss|tailwind)\.config\.js'
source = 'assets/notwatching/hugo_stats\.json'
target = 'css'
[[build.cachebusters]]
source = 'assets/.*\.(js|ts|jsx|tsx)'
target = 'js'
[[build.cachebusters]]
source = 'assets/.*\.(css|scss|sass)'
target = 'css'
[[build.cachebusters]]
source = 'data/.*\.(.*)$'
target = 'css'
[[build.cachebusters]]
source = 'assets/.*\.(.*)$'
target = '$1'
############################# Modules ############################
[module]
[[module.mounts]]
source = 'assets'
target = 'assets'
[[module.mounts]]
disableWatch = true
source = 'hugo_stats.json'
target = 'assets/notwatching/hugo_stats.json'
############################# Outputs ############################

103
exampleSite/tailwind.config.js
View File

@ -1,103 +0,0 @@
const fs = require("fs");
const path = require("path");
const themePath = path.join(__dirname, "data/theme.json");
const themeRead = fs.readFileSync(themePath, "utf8");
const theme = JSON.parse(themeRead);
let font_base = Number(theme.fonts.font_size.base.replace("px", ""));
let font_scale = Number(theme.fonts.font_size.scale);
let h6 = font_scale;
let h5 = h6 * font_scale;
let h4 = h5 * font_scale;
let h3 = h4 * font_scale;
let h2 = h3 * font_scale;
let h1 = h2 * font_scale;
let fontPrimary, fontPrimaryType, fontSecondary, fontSecondaryType;
if (theme.fonts.font_family.primary) {
fontPrimary = theme.fonts.font_family.primary
.replace(/\+/g, " ")
.replace(/:[ital,]*[ital@]*[wght@]*[0-9,;.]+/gi, "");
fontPrimaryType = theme.fonts.font_family.primary_type;
}
if (theme.fonts.font_family.secondary) {
fontSecondary = theme.fonts.font_family.secondary
.replace(/\+/g, " ")
.replace(/:[ital,]*[ital@]*[wght@]*[0-9,;.]+/gi, "");
fontSecondaryType = theme.fonts.font_family.secondary_type;
}
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./hugo_stats.json"],
safelist: [{ pattern: /^swiper-/ }],
darkMode: "class",
theme: {
screens: {
sm: "540px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
container: {
center: true,
padding: "2rem",
},
extend: {
colors: {
text: theme.colors.default.text_color.default,
light: theme.colors.default.text_color.light,
dark: theme.colors.default.text_color.dark,
primary: theme.colors.default.theme_color.primary,
secondary: theme.colors.default.theme_color.secondary,
body: theme.colors.default.theme_color.body,
border: theme.colors.default.theme_color.border,
"theme-light": theme.colors.default.theme_color.theme_light,
"theme-dark": theme.colors.default.theme_color.theme_dark,
darkmode: {
text: theme.colors.darkmode.text_color.default,
light: theme.colors.darkmode.text_color.light,
dark: theme.colors.darkmode.text_color.dark,
primary: theme.colors.darkmode.theme_color.primary,
secondary: theme.colors.darkmode.theme_color.secondary,
body: theme.colors.darkmode.theme_color.body,
border: theme.colors.darkmode.theme_color.border,
"theme-light": theme.colors.darkmode.theme_color.theme_light,
"theme-dark": theme.colors.darkmode.theme_color.theme_dark,
},
},
fontSize: {
base: font_base + "px",
"base-sm": font_base * 0.8 + "px",
h1: h1 + "rem",
"h1-sm": h1 * 0.9 + "rem",
h2: h2 + "rem",
"h2-sm": h2 * 0.9 + "rem",
h3: h3 + "rem",
"h3-sm": h3 * 0.9 + "rem",
h4: h4 + "rem",
h5: h5 + "rem",
h6: h6 + "rem",
},
fontFamily: {
primary: [fontPrimary, fontPrimaryType],
secondary: [fontSecondary, fontSecondaryType],
},
},
},
plugins: [
require("@tailwindcss/typography"),
require("@tailwindcss/forms"),
require("tailwind-bootstrap-grid")({
generateContainer: false,
gridGutterWidth: "2rem",
gridGutters: {
1: "0.25rem",
2: "0.5rem",
3: "1rem",
4: "1.5rem",
5: "3rem",
},
}),
],
};

9
layouts/partials/essentials/header.html
View File

@ -112,9 +112,14 @@
<button
aria-label="search"
{{ if and (not site.Params.navigation_button.enable) (not site.Params.theme_switcher) }}
class="border-border text-dark hover:text-primary dark:border-darkmode-border mr-5 inline-block border-r lg:border-r-0 pr-5 lg:pr-0 text-xl dark:text-white dark:hover:text-darkmode-primary"
class="border-border text-dark hover:text-primary
dark:border-darkmode-border mr-5 inline-block border-r
lg:border-r-0 pr-5 lg:pr-0 text-xl dark:text-white
dark:hover:text-darkmode-primary"
{{ else }}
class="border-border text-dark hover:text-primary dark:border-darkmode-border mr-5 inline-block border-r pr-5 text-xl dark:text-white dark:hover:text-darkmode-primary"
class="border-border text-dark hover:text-primary
dark:border-darkmode-border mr-5 inline-block border-r pr-5
text-xl dark:text-white dark:hover:text-darkmode-primary"
{{ end }}
data-target="search-modal">
<i class="fa-solid fa-search"></i>

24
layouts/partials/essentials/style.html
View File

@ -29,9 +29,10 @@
})();
</script>
<!-- plugins + stylesheet -->
<!-- main styles -->
{{ $styles := slice }}
{{ $stylesLazy := slice }}
{{ range site.Params.plugins.css }}
{{ if findRE "^http" .link }}
<link
@ -49,29 +50,28 @@
{{ end }}
{{ end }}
{{/* main style */}}
{{ $styles = $styles | append (resources.Get "scss/main.scss" | toCSS) }}
{{ $mainCSS := resources.Get "css/main.css" }}
{{ $tailwindOpts := dict "inlineImports" true }}
{{ $tailwindCSS := $mainCSS | css.TailwindCSS $tailwindOpts }}
{{ $styles = $styles | append $tailwindCSS }}
{{ $styles = $styles | resources.Concat "css/style.css" }}
{{ $styles = $styles | css.PostCSS }}
{{ $stylesLazy = $stylesLazy | resources.Concat "css/style-lazy.css" }}
{{ $stylesLazy = $stylesLazy | css.PostCSS }}
{{ if hugo.IsProduction }}
{{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . | minify | fingerprint | resources.PostProcess }}
{{ $stylesLazy = $stylesLazy | resources.ExecuteAsTemplate "css/style-lazy.css" . | minify | fingerprint | resources.PostProcess }}
{{ else }}
{{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . }}
{{ $stylesLazy = $stylesLazy | resources.ExecuteAsTemplate "css/style-lazy.css" . }}
{{ $styles = $styles | minify | fingerprint }}
{{ $stylesLazy = $stylesLazy | minify | fingerprint }}
{{ end }}
{{/* styles */}}
<!-- link main style -->
<link
href="{{ $styles.RelPermalink }}"
integrity="{{ $styles.Data.Integrity }}"
rel="stylesheet" />
{{/* styles lazy */}}
<!-- link lazy style -->
<link
defer
async

19
package.json
View File

@ -1,7 +1,7 @@
{
"name": "hugoplate",
"description": "hugo tailwindcss boilerplate",
"version": "1.19.0",
"version": "2.0.0",
"license": "MIT",
"author": "zeon.studio",
"scripts": {
@ -19,21 +19,12 @@
"format": "prettier -w ."
},
"devDependencies": {
"@tailwindcss/cli": "^4.0.6",
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/typography": "^0.5.16",
"autoprefixer": "^10.4.20",
"postcss": "^8.5.1",
"postcss-cli": "^11.0.0",
"prettier": "^3.4.2",
"prettier": "^3.5.0",
"prettier-plugin-go-template": "0.0.15",
"prettier-plugin-tailwindcss": "^0.6.10",
"tailwind-bootstrap-grid": "^5.1.0",
"tailwindcss": "^3.4.17"
},
"postcss": {
"plugins": {
"tailwindcss": {},
"autoprefixer": {}
}
"prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^4.0.6"
}
}

4
readme.md
View File

@ -66,8 +66,6 @@ We have included almost everything you need to start your Hugo project. Let's se
- [Hugo](https://gohugo.io/)
- [Tailwind CSS](https://tailwindcss.com/)
- [PostCSS](https://postcss.org/)
- [PurgeCSS](https://purgecss.com/)
- [AutoPrefixer](https://autoprefixer.github.io/)
- [Hugo Modules](https://gohugo.io/hugo-modules/) by [Gethugothemes](https://gethugothemes.com/hugo-modules)
- [Markdown](https://markdownguide.org/)
@ -185,7 +183,7 @@ After you finish your development, you can build or deploy your project almost e
### 👉 Build Command
To build your project locally, you can use the following command. It will purge all the unused CSS and minify all the files.
To build your project locally, you can use the following command.
```bash
npm run build

8
scripts/removeDarkmode.js
View File

@ -3,10 +3,6 @@ const path = require("path");
const rootDirs = ["assets/scss", "layouts"];
const configFiles = [
{
filePath: "exampleSite/tailwind.config.js",
patterns: ["darkmode:\\s*{[^}]*},", 'darkMode:\\s*"class",'],
},
{
filePath: "exampleSite/data/theme.json",
patterns: ["colors.darkmode"],
@ -75,14 +71,10 @@ function removeDarkModeFromPages(directoryPath) {
function removeDarkMode(configFile) {
const { filePath, patterns } = configFile;
if (filePath === "exampleSite/tailwind.config.js") {
removeDarkModeFromFiles(filePath, patterns);
} else {
const contentFile = JSON.parse(fs.readFileSync(filePath, "utf8"));
patterns.forEach((pattern) => deleteNestedProperty(contentFile, pattern));
fs.writeFileSync(filePath, JSON.stringify(contentFile));
}
}
function deleteNestedProperty(obj, propertyPath) {
const properties = propertyPath.split(".");

2
scripts/themeSetup.js
View File

@ -89,8 +89,6 @@ const setupTheme = () => {
].forEach(toggleComment);
const includesFiles = [
"tailwind.config.js",
"postcss.config.js",
"go.mod",
"hugo.toml",
"assets",

109
tailwind-plugin/tw-bs-grid.js Normal file
View File

@ -0,0 +1,109 @@
import plugin from "tailwindcss/plugin";
(function () {
"use strict";
module.exports = plugin.withOptions(() => {
return ({ addComponents }) => {
const gridColumns = 12;
const gridGutterWidth = "1.5rem";
const gridGutters = {
0: "0",
1: "0.25rem",
2: "0.5rem",
3: "1rem",
4: "1.5rem",
5: "3rem",
};
const respectImportant = true;
const columns = Array.from({ length: gridColumns }, (_, i) => i + 1);
const rowColsSteps = columns.slice(0, Math.floor(gridColumns / 2));
// row
addComponents(
{
".row": {
"--bs-gutter-x": gridGutterWidth,
"--bs-gutter-y": 0,
display: "flex",
flexWrap: "wrap",
marginTop: "calc(var(--bs-gutter-y) * -1)",
marginRight: "calc(var(--bs-gutter-x) / -2)",
marginLeft: "calc(var(--bs-gutter-x) / -2)",
"& > *": {
boxSizing: "border-box",
flexShrink: 0,
width: "100%",
maxWidth: "100%",
paddingRight: "calc(var(--bs-gutter-x) / 2)",
paddingLeft: "calc(var(--bs-gutter-x) / 2)",
marginTop: "var(--bs-gutter-y)",
},
},
},
{ respectImportant },
);
// columns
addComponents(
[
{
".col": { flex: "1 0 0%" },
".row-cols-auto": { "& > *": { flex: "0 0 auto", width: "auto" } },
},
...rowColsSteps.map((num) => ({
[`.row-cols-${num}`]: {
"& > *": { flex: "0 0 auto", width: `${100 / num}%` },
},
})),
{ ".col-auto": { flex: "0 0 auto", width: "auto" } },
...columns.map((num) => ({
[`.col-${num}`]: {
flex: "0 0 auto",
width: `${(100 / gridColumns) * num}%`,
},
})),
],
{ respectImportant },
);
// offset
addComponents(
[0, ...columns.slice(0, -1)].map((num) => ({
[`.offset-${num}`]: { marginLeft: `${(100 / gridColumns) * num}%` },
})),
{ respectImportant },
);
// gutters
if (Object.keys(gridGutters).length) {
const gutterComponents = Object.entries(gridGutters).reduce(
(acc, [key, value]) => {
acc[`.g-${key}`] = {
"--bs-gutter-x": value,
"--bs-gutter-y": value,
};
acc[`.gx-${key}`] = { "--bs-gutter-x": value };
acc[`.gy-${key}`] = { "--bs-gutter-y": value };
return acc;
},
{},
);
addComponents(gutterComponents, { respectImportant });
}
// order
addComponents(
[
{
".order-first": { order: "-1" },
".order-last": { order: gridColumns + 1 },
},
...[0, ...columns].map((num) => ({
[`.order-${num}`]: { order: String(num) },
})),
],
{ respectImportant },
);
};
});
})();

96
tailwind-plugin/tw-theme.js Normal file
View File

@ -0,0 +1,96 @@
const plugin = require("tailwindcss/plugin");
const fs = require("fs");
const path = require("path");
const themePath = path.join(__dirname, "../data/theme.json");
const themeRead = fs.readFileSync(themePath, "utf8");
const themeConfig = JSON.parse(themeRead);
const findFont = (fontStr) =>
fontStr.replace(/\+/g, " ").replace(/:[^:]+/g, "");
module.exports = plugin.withOptions(() => {
return ({ addBase, addUtilities }) => {
const rootVars = {};
const baseSize = Number(themeConfig.fonts.font_size.base);
const scale = Number(themeConfig.fonts.font_size.scale);
// Set font sizes
const fontSizes = {
base: `${baseSize}px`,
"base-sm": `${baseSize * 0.8}px`,
h1: `${scale ** 5}rem`,
"h1-sm": `${scale ** 5 * 0.9}rem`,
h2: `${scale ** 4}rem`,
"h2-sm": `${scale ** 4 * 0.9}rem`,
h3: `${scale ** 3}rem`,
"h3-sm": `${scale ** 3 * 0.9}rem`,
h4: `${scale ** 2}rem`,
h5: `${scale}rem`,
h6: `${scale}rem`,
};
Object.entries(fontSizes).forEach(([k, v]) => {
rootVars[`--text-${k}`] = v;
});
// Set font families
rootVars["--font-primary"] =
`${findFont(themeConfig.fonts.font_family.primary)}, ${themeConfig.fonts.font_family.primary_type}`;
rootVars["--font-secondary"] =
`${findFont(themeConfig.fonts.font_family.secondary)}, ${themeConfig.fonts.font_family.secondary_type}`;
// Define color groups
const groups = [
{ colors: themeConfig.colors.default.theme_color, prefix: "" },
{ colors: themeConfig.colors.default.text_color, prefix: "" },
{
colors: themeConfig.colors.darkmode.theme_color,
prefix: "darkmode-",
},
{ colors: themeConfig.colors.darkmode.text_color, prefix: "darkmode-" },
];
// Set color variables
groups.forEach(({ colors, prefix }) => {
Object.entries(colors).forEach(([k, v]) => {
rootVars[`--color-${prefix}${k.replace(/_/g, "-")}`] = v;
});
});
addBase({ ":root": rootVars });
// Generate color utilities
const colorUtils = {};
groups.forEach(({ colors, prefix }) => {
Object.keys(colors).forEach((k) => {
const cls = k.replace(/_/g, "-");
const varRef = `var(--color-${prefix}${cls})`;
colorUtils[`.bg-${prefix}${cls}`] = { backgroundColor: varRef };
colorUtils[`.text-${prefix}${cls}`] = { color: varRef };
colorUtils[`.border-${prefix}${cls}`] = { borderColor: varRef };
colorUtils[`.fill-${prefix}${cls}`] = { fill: varRef };
colorUtils[`.from-${prefix}${cls}`] = {
"--tw-gradient-from": varRef,
};
colorUtils[`.to-${prefix}${cls}`] = { "--tw-gradient-to": varRef };
colorUtils[`.via-${prefix}${cls}`] = {
"--tw-gradient-stops": varRef,
};
});
});
// Generate font utilities
const fontUtils = {
".font-primary": { fontFamily: "var(--font-primary)" },
".font-secondary": { fontFamily: "var(--font-secondary)" },
};
Object.keys(fontSizes).forEach((k) => {
fontUtils[`.text-${k}`] = { fontSize: `var(--text-${k})` };
});
addUtilities(
{ ...colorUtils, ...fontUtils },
{ variants: ["responsive", "hover", "focus", "active", "disabled"] },
);
};
});