diff --git a/.stylelintignore b/.stylelintignore index f8f6930c..773e6dbd 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -3,5 +3,6 @@ assets/scss/components/_syntax-dark.scss assets/scss/components/_syntax-light.scss assets/scss/vendor assets/scss/theme/fonts.scss +assets/scss/app-dart.scss assets/scss/app.scss node_modules diff --git a/assets/scss/app-dart.scss b/assets/scss/app-dart.scss new file mode 100644 index 00000000..7c707105 --- /dev/null +++ b/assets/scss/app-dart.scss @@ -0,0 +1,56 @@ +@use "sass:meta"; + +// Define template variables +@use "hugo:vars" as h; // note: modified for dart-sass + +// Include default variable overrides +@import "common/variables-dart.scss"; // note: modified for dart-sass +@import "common/icons.scss"; + +// Import Bootstrap configuration (mounted by core Bootstrap module) +@import "bootstrap-dart.scss"; // note: modified for dart-sass + +// Include dark mode overrides +@import "common/variables-dark.scss"; + +// Import Hinode theme styles +@import "components/alert.scss"; +@import "components/blockquote.scss"; +@import "components/breadcrumb.scss"; +@import "components/buttons.scss"; +@import "components/card.scss"; +@import "components/carousel.scss"; +@import "components/clipboard.scss"; +@import "components/command.scss"; +@import "components/comments.scss"; +@import "components/feature.scss"; +@import "components/footer.scss"; +@import "components/navbar.scss"; +@import "components/img.scss"; +@import "components/pagination.scss"; +@import "components/persona.scss"; +@import "components/popover.scss"; +@import "components/sidebar.scss"; +@import "components/syntax-dart.scss"; // note: modified for dart-sass +@import "components/table.scss"; +@import "components/timeline.scss"; +@import "components/toc.scss"; +@import "components/vimeo.scss"; +@import "common/animation.scss"; +@import "common/styles.scss"; +@import "layouts/reboot.scss"; +@import "layouts/type.scss"; +@import "common/export.scss"; +@import "helpers/colored-links.scss"; +@import "helpers/display.scss"; + +// note: modified for dart-sass +@if h.$import-fonts { + @include meta.load-css(theme/fonts); +} + +// Import theme placeholder +@import "theme/theme.scss"; + +// Import Bootstrap utilities API (mounted by core Bootstrap module) +@import "modules/bootstrap/utilities/api"; diff --git a/assets/scss/common/_variables-dart.scss b/assets/scss/common/_variables-dart.scss new file mode 100644 index 00000000..54f7e1d2 --- /dev/null +++ b/assets/scss/common/_variables-dart.scss @@ -0,0 +1,41 @@ +// Bootstrap variables overrides for theme +$enable-negative-margins: true; +$enable-important-utilities: true !default; + +// Remove the border from the focused navigation toggler +$navbar-toggler-focus-width: 0 !default; + +$font-family-sans-serif: h.$theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$headings-font-weight: 600 !default; +$font-weight-lighter: lighter !default; +$font-weight-light: 200 !default; +$font-weight-normal: 300 !default; +$font-weight-bold: 600 !default; +$font-weight-bolder: bolder !default; + +strong { + font-weight: 600 if($enable-important-utilities, !important, null); +} + +$navbar-offset: h.$navbar-offset; +$primary: h.$primary; +$secondary: h.$secondary; +$success: h.$success; +$info: h.$info; +$warning: h.$warning; +$danger: h.$danger; +$light: h.$light; +$dark: h.$dark; + +$black: #000 !default; +$btn-toggle-color: $black !default; + +$carousel-dark-indicator-active-bg: #fff !default; +$carousel-dark-caption-color: #fff !default; +$carousel-dark-control-icon-filter: invert(0) grayscale(100) !default; + +$primary-text-emphasis-dark: mix(white, h.$primary, h.$dark-mode-tint) !default; +$secondary-text-emphasis-dark: mix(white, h.$secondary, h.$dark-mode-tint) !default; +$link-color-dark: mix(white, h.$primary, h.$dark-mode-tint) !default; +$primary-bg-subtle-dark: mix(black, h.$primary, h.$dark-mode-shade) !default; +$primary-border-subtle-dark: mix(black, h.$primary, calc(h.$dark-mode-shade / 2)) !default; \ No newline at end of file diff --git a/assets/scss/common/_variables.scss b/assets/scss/common/_variables.scss index 43b5e8fd..23a102b4 100644 --- a/assets/scss/common/_variables.scss +++ b/assets/scss/common/_variables.scss @@ -22,8 +22,8 @@ strong { $black: #000 !default; $btn-toggle-color: $black !default; -$carousel-dark-indicator-active-bg: #ffffff !default; -$carousel-dark-caption-color: #ffffff !default; +$carousel-dark-indicator-active-bg: #fff !default; +$carousel-dark-caption-color: #fff !default; $carousel-dark-control-icon-filter: invert(0) grayscale(100) !default; // scss-docs-start color-mode diff --git a/assets/scss/components/_syntax-dart.scss b/assets/scss/components/_syntax-dart.scss new file mode 100644 index 00000000..14f55f7e --- /dev/null +++ b/assets/scss/components/_syntax-dart.scss @@ -0,0 +1,49 @@ +// stylelint-disable annotation-no-unknown +@import "syntax-light"; + +.bg, +.chroma, +.chroma .err { + // set to transparent background to avoid rendering issues with example shortcode + background-color: transparent if($enable-important-utilities, !important, null); +} + +.chroma { + display: flex; +} + +.chroma code { + flex: 1; +} + +.syntax-highlight { + background-color: var(--bs-light) if($enable-important-utilities, !important, null); + overflow-x: auto; +} + +@if $enable-dark-mode { + [data-bs-theme="dark"] { + @include meta.load-css(syntax-dark); + + .bg, + .chroma, + .chroma .err { + // set to transparent background to avoid rendering issues with example shortcode + background-color: transparent if($enable-important-utilities, !important, null); + } + + .syntax-highlight { + background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null); + overflow-x: auto; + } + + .bg, + .chroma, + .chroma .ge, + .chroma .gl, + .chroma .gs { + color: #c9d1d9 if($enable-important-utilities, !important, null); + } + } +} +// stylelint-enable annotation-no-unknown diff --git a/config/_default/params.toml b/config/_default/params.toml index 8255cfa6..d6a01589 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -9,6 +9,8 @@ [main.externalLinks] cue = false tab = false + [main.build] + transpiler = "libsass" # toml-docs-end main # toml-docs-start modules diff --git a/exampleSite/config/_default/hugo.toml b/exampleSite/config/_default/hugo.toml index 608bab58..bd08fb31 100644 --- a/exampleSite/config/_default/hugo.toml +++ b/exampleSite/config/_default/hugo.toml @@ -5,8 +5,8 @@ paginate = 9 enableGitInfo = true # additional settings -googleAnalytics = "G-T85PPZ36GN" -baseURL = "https://demo.gethinode.com/" +# googleAnalytics = "G-T85PPZ36GN" +baseURL = "https://dart.gethinode.com/" canonifyURLs = false enableEmoji = true enableRobotsTXT = true diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 7ad0fb00..7f5cf9b3 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -7,6 +7,8 @@ [main.externalLinks] cue = true tab = true + [main.build] + transpiler = "dartsass" [modules] core = ["bootstrap", "flexsearch", "fontawesome"] diff --git a/exampleSite/go.sum b/exampleSite/go.sum index f17740e3..1338136c 100644 --- a/exampleSite/go.sum +++ b/exampleSite/go.sum @@ -1,5 +1,9 @@ github.com/gethinode/mod-bootstrap v1.1.1 h1:Tx4M5hGVOFrEaxnUONDAm6N9xuRi5UphKlT7F26HujU= github.com/gethinode/mod-bootstrap v1.1.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8= +github.com/gethinode/mod-bootstrap v1.2.0 h1:JkTcImU3qpi25WgKvUxUYiMoiXtrxrG+Wf/utRB5UbU= +github.com/gethinode/mod-bootstrap v1.2.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8= +github.com/gethinode/mod-bootstrap v1.2.1 h1:z54dgsbhShhlri+X77Z+yLrg0wz/f8C8ojA/wnlhsJc= +github.com/gethinode/mod-bootstrap v1.2.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8= github.com/gethinode/mod-flexsearch v1.2.0 h1:SSMpWzK9SMbi9QRYfil9PJZLLWWLHWzlTc69UxtSWAA= github.com/gethinode/mod-flexsearch v1.2.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4= github.com/gethinode/mod-flexsearch v1.3.0 h1:RbfEDw219Y1rOVp9lHmy5ePdF9lyPalDu2J5oVeejrU= diff --git a/go.mod b/go.mod index 9aad3ee8..ea1bec83 100644 --- a/go.mod +++ b/go.mod @@ -3,7 +3,7 @@ module github.com/gethinode/hinode go 1.19 require ( - github.com/gethinode/mod-bootstrap v1.1.1 // indirect + github.com/gethinode/mod-bootstrap v1.2.1 // indirect github.com/gethinode/mod-flexsearch v1.4.0 // indirect github.com/gethinode/mod-fontawesome v1.3.1 // indirect github.com/gethinode/mod-katex v1.0.2 // indirect diff --git a/go.sum b/go.sum index c79c470a..12064fef 100644 --- a/go.sum +++ b/go.sum @@ -4,6 +4,10 @@ github.com/gethinode/mod-bootstrap v1.1.0 h1:BbalsW8kmFhv+J+dcc41TGcjIlM/p69AB0h github.com/gethinode/mod-bootstrap v1.1.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8= github.com/gethinode/mod-bootstrap v1.1.1 h1:Tx4M5hGVOFrEaxnUONDAm6N9xuRi5UphKlT7F26HujU= github.com/gethinode/mod-bootstrap v1.1.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8= +github.com/gethinode/mod-bootstrap v1.2.0 h1:JkTcImU3qpi25WgKvUxUYiMoiXtrxrG+Wf/utRB5UbU= +github.com/gethinode/mod-bootstrap v1.2.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8= +github.com/gethinode/mod-bootstrap v1.2.1 h1:z54dgsbhShhlri+X77Z+yLrg0wz/f8C8ojA/wnlhsJc= +github.com/gethinode/mod-bootstrap v1.2.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8= github.com/gethinode/mod-flexsearch v1.0.1 h1:FJkRsUzSnQTXl3MWCigT4E6vfff870UWTnkGqaDGIhA= github.com/gethinode/mod-flexsearch v1.0.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4= github.com/gethinode/mod-flexsearch v1.1.0 h1:7BCMyQDlYlskNXuazt8Jg/jg9WREexu2xVkYqThkAX4= diff --git a/layouts/partials/head/head.html b/layouts/partials/head/head.html index 69aac5e6..2fe5eac7 100644 --- a/layouts/partials/head/head.html +++ b/layouts/partials/head/head.html @@ -3,7 +3,7 @@ {{ hugo.Generator}} - {{ partial "head/stylesheet.html" -}} + {{ partialCached "head/stylesheet-core.html" . -}} {{- $modules := site.Params.modules.optional | intersect .Page.Params.modules -}} {{- range $index, $mod := $modules -}} {{- $source := printf "scss/%s.scss" $mod -}} diff --git a/layouts/partials/head/stylesheet-core.html b/layouts/partials/head/stylesheet-core.html new file mode 100644 index 00000000..1f55f0d1 --- /dev/null +++ b/layouts/partials/head/stylesheet-core.html @@ -0,0 +1,3 @@ +{{/* Wrapper for the stylesheet partial with default arguments. */}} +{{/* Added to avoid interference with the argument of partialCached. */}} +{{ partial "head/stylesheet.html" -}} \ No newline at end of file diff --git a/layouts/partials/head/stylesheet.html b/layouts/partials/head/stylesheet.html index dd8bfe25..ee9f3530 100644 --- a/layouts/partials/head/stylesheet.html +++ b/layouts/partials/head/stylesheet.html @@ -1,5 +1,14 @@ +{{- $transpiler := site.Params.main.build.transpiler | default "libsass" -}} +{{- $supportedTranspilers := slice "libsass" "dartsass" -}} +{{- if not (in $supportedTranspilers $transpiler) -}} + {{- errorf "partial [head/stylesheet.html] - Invalid value for param 'transpiler': %s" $transpiler -}} +{{- end -}} + {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}} -{{- $source := .source | default "scss/app.scss" -}} +{{- $source := .source }} +{{- if not $source -}} + {{- if eq $transpiler "dartsass" }}{{ $source = "scss/app-dart.scss" }}{{ else }}{{ $source = "scss/app.scss" }}{{ end -}} +{{- end -}} {{- $target := .target | default "css/main.css" -}} {{- $page := .page -}} {{- $core := .core | default true -}} @@ -36,7 +45,7 @@ "dark-mode-tint" (default "0%" site.Params.style.darkModeTint) -}} -{{- $options := (dict "transpiler" "libsass" "targetPath" $target "enableSourceMap" (not hugo.IsProduction) "vars" $vars) -}} +{{- $options := (dict "transpiler" $transpiler "targetPath" $target "enableSourceMap" (not hugo.IsProduction) "vars" $vars) -}} {{- $bundle := partial "utilities/bundle" (dict "match" $source "filename" (printf "scss/bundle-%d.scss" now.UnixNano) "modules" $modules "basepath" "scss" "debugging" site.Params.debugging.showSCSS) -}} {{- $css := $bundle | resources.ExecuteAsTemplate $target . | toCSS $options -}} diff --git a/package-lock.json b/package-lock.json index 51250ecf..30e7c04e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gethinode/hinode", - "version": "0.19.0", + "version": "0.20.0-alpha", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@gethinode/hinode", - "version": "0.19.0", + "version": "0.20.0-alpha", "license": "MIT", "devDependencies": { "@fullhuman/postcss-purgecss": "^5.0.0", diff --git a/package.json b/package.json index fa6dc5d9..6e65d2d4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gethinode/hinode", - "version": "0.19.0", + "version": "0.20.0-alpha", "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator", "keywords": [ "hugo",