From d00bac76520024ac4d0df1df5ba9626f5f8f2070 Mon Sep 17 00:00:00 2001 From: cwhite911 Date: Thu, 3 Jul 2025 14:31:42 -0400 Subject: [PATCH 01/20] Added Docker support for local development --- .env | 1 + README.md | 32 +++++ docker-compose.yml | 9 ++ themes/grass/assets/scss/main.scss | 154 ++++++++++++++++++++++++ themes/grass/layouts/partials/head.html | 19 +++ 5 files changed, 215 insertions(+) create mode 100644 .env create mode 100644 docker-compose.yml create mode 100644 themes/grass/assets/scss/main.scss diff --git a/.env b/.env new file mode 100644 index 00000000..9a1b3ef5 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +HUGO_VERSION=0.147.9 \ No newline at end of file diff --git a/README.md b/README.md index dd0c37c6..20f0f401 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,38 @@ Run hugo development server from the `grass-website` root directory: View the website running at http://localhost:1313 +### Run Hugo locally with Docker + +We are using the 'hugo:dart-sass` Docker container from [hugomods.com](https://docker.hugomods.com/docs/tags/). +The container contains the following core features: + +* Extended Hugo +* Go +* Node.js +* Git +* Dart Sass + +```sh +docker pull hugomods/hugo:dart-sass +``` + +### Install Node depencies before running Hugo. + +```sh +docker compose run server npm i +``` + +### Run the Hugo server container using Docker compose + +```sh +docker compose up server +``` + +### Lauch interactive shell + +```sh +docker compose run server /bin/sh +``` ## How to add content diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 00000000..48c99acd --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,9 @@ +services: + server: + image: hugomods/hugo:dart-sass-${HUGO_VERSION} + command: server -D -p 1313 --noBuildLock + volumes: + - ./:/src + - ~/hugo_cache:/tmp/hugo_cache + ports: + - 1313:1313 \ No newline at end of file diff --git a/themes/grass/assets/scss/main.scss b/themes/grass/assets/scss/main.scss new file mode 100644 index 00000000..dac19240 --- /dev/null +++ b/themes/grass/assets/scss/main.scss @@ -0,0 +1,154 @@ +//-- scss:defaults --*/ +// GRASS Theme +/* GRASS Variables +Use these variables to customize the GRASS theme. +----------------------------------------------------------------------------- */ +/* GRASS Font */ +$gs-grass-font: 'Fira Sans Regular', sans-serif; +$gs-grass-font--medium: 'Fira Sans Medium', sans-serif; +$gs-grass-font--bold: 'Fira Sans Bold', sans-serif; +$gs-grass-font--light: 'Fira Sans ExtraLight', sans-serif; +$gs-grass-font--mono: 'Fira Mono', monospace; + +/* Primary Color */ +$gs-primary-color: rgb(76, 176, 91); +$gs-primary-color--light: rgba(76, 176, 91, 0.541); +$gs-primary-color--lighter: rgba(76, 176, 91, 0.322); +$gs-primary-color--lightest: rgba(76, 176, 91, 0.071); + +/* Primary Alt Color */ +$gs-primary-alt-color: rgb(110, 208, 121); +$gs-primary-alt-color--light: rgba(110, 208, 121, 0.541); +$gs-primary-alt-color--lighter: rgba(110, 208, 121, 0.322); +$gs-primary-alt-color--lightest: rgba(110, 208, 121, 0.071); + +/* Primary Light Color */ +$gs-primary-light-color: rgb(135, 233, 145); +$gs-primary-light-color--light: rgba(135, 233, 145, 0.541); +$gs-primary-light-color--lighter: rgba(138, 233, 145, 0.322); +$gs-primary-light-color--lightest: rgba(138, 233, 145, 0.071); + +/* Primary Dark Color */ +$gs-primary-dark-color: rgb(8, 139, 54); +$gs-primary-dark-color--light: rgba(8, 139, 54, 0.541); +$gs-primary-dark-color--lighter: rgba(8, 139, 54, 0.322); +$gs-primary-dark-color--lightest: rgba(8, 139, 54, 0.071); + +/* Secondary Color */ +$gs-secondary-color: rgb(0, 57, 63); +$gs-secondary-color--light: rgba(0, 57, 63, 0.541); +$gs-secondary-color--lighter: rgba(0, 57, 63, 0.322); +$gs-secondary-color--lightest: rgba(0, 57, 63, 0.071); + +/* Secondary Alt Color */ +$gs-secondary-alt-color: rgb(39, 87, 92); +$gs-secondary-alt-color--light: rgba(39, 87, 92, 0.541); +$gs-secondary-alt-color--lighter: rgba(39, 87, 92, 0.322); +$gs-secondary-alt-color--lightest: rgba(39, 87, 92, 0.071); + +/* Secondary Light Color */ +$gs-secondary-light-color: rgb(74, 120, 125); +$gs-secondary-light-color--light: rgba(74, 121, 127, 0.541); +$gs-secondary-light-color--lighter: rgba(74, 121, 127, 0.322); +$gs-secondary-light-color--lightest: rgba(74, 121, 127, 0.071); + +/* Secondary Dark Color */ +$gs-secondary-dark-color: rgb(0, 32, 36); +$gs-secondary-dark-color--light: rgba(0, 32, 36, 0.541); +$gs-secondary-dark-color--lighter: rgba(0, 32, 36, 0.322); +$gs-secondary-dark-color--lightest: rgba(0, 32, 36, 0.071); + +/* White */ +$gs-white-base-color: rgb(255, 255, 255); +$gs-white-color: rgb(247, 247, 247); +$gs-white-color--light: rgba(247, 247, 247, 0.541); +$gs-white-color--lighter: rgba(247, 247, 247, 0.322); +$gs-white-color--lightest: rgba(247, 247, 247, 0.071); + +/* Black */ +$gs-black-base-color: rgb(0, 0, 0); +$gs-black-color: rgb(2, 25, 5); +$gs-black-color--light: rgba(2, 25, 5, 0.541); +$gs-black-color--lighter: rgba(2, 25, 5, 0.322); +$gs-black-color--lightest: rgba(2, 25, 5, 0.071); + +/* Grey */ +$gs-grey-color: rgb(145, 144, 143); +$gs-grey-color--light: rgba(145, 144, 143, 0.541); +$gs-grey-color--lighter: rgba(145, 144, 143, 0.322); +$gs-grey-color--lightest: rgba(145, 144, 143, 0.071); + +/* Grey Alt */ +$gs-grey-alt-color: rgb(216, 216, 216); +$gs-grey-alt-color--light: rgba(216, 216, 216, 0.541); +$gs-grey-alt-color--lighter: rgba(216, 216, 216, 0.322); +$gs-grey-alt-color--lightest: rgba(216, 216, 216, 0.071); + +/* Grey Light */ +$gs-grey-light-color: rgb(240, 240, 241); +$gs-grey-light-color--light: rgba(240, 240, 241, 0.541); +$gs-grey-light-color--lighter: rgba(240, 240, 241, 0.322); +$gs-grey-light-color--lightest: rgba(240, 240, 241, 0.071); + +/* Grey Dark */ +$gs-grey-dark-color: rgb(78, 77, 76); +$gs-grey-dark-color--light: rgba(78, 77, 76, 0.541); +$gs-grey-dark-color--lighter: rgba(78, 77, 76, 0.322); +$gs-grey-dark-color--lightest: rgba(78, 77, 76, 0.071); + +/* Special Colors */ +$gs-support-color: rgb(243, 57, 138); +$gs-support-color--dark: rgba(243, 57, 138, 0.541); +$gs-support-color--light: rgba(243, 57, 138, 0.322); +$gs-yard-sign-color: rgb(116, 93, 2); + +/* Bootstrap Mapping Colors */ +// $gs-primary-color: $gs-primary-color; Defined above +// $gs-secondonary-color: $gs-secondary-color; Defined above +$gs-danger-color: rgb(176, 76, 76); +$gs-warning-color: rgb(176, 154, 76); +$gs-success-color: $gs-primary-alt-color; +$gs-info-color: $gs-secondary-alt-color; +$gs-light-color: $gs-grey-light-color; + +/* Images */ +$gs-images-base-path: 'images'; +$gs-images-logos-small-path: $gs-images-base-path + '/logos/small'; +$gs-svg-logos-base-path: $gs-images-base-path + '/logos/large'; +$gs-icons-base-path: $gs-images-base-path + '/icons'; + + +/* Icons */ +$gs-grass-logo-white-simple: url($gs-images-logos-small-path + '/grass-logo-green-simple@05x.png'); +$gs-grass-logo-simple-svg: url($gs-svg-logos-base-path + '/grass-green-no-text.svg'); +$gs-grass-icon: url($gs-icons-base-path + '/grass-icon.svg'); + +// Description: This file defines Bootstrap theme variables by mapping them +// to custom color variables. These variables are used to +// customize the appearance of the Bootstrap framework. +// Bootstrap Variables: https: //github.com/twbs/bootstrap/blob/main/scss/_variables.scss +// Variables: +// - $primary: Primary theme color, mapped to $gs-primary-color. +// - $secondary: Secondary theme color, mapped to $gs-secondary-color. +// - $success: Success state color, mapped to $gs-success-color. +// - $info: Informational state color, mapped to $gs-info-color. +// - $warning: Warning state color, mapped to $gs-warning-color. +// - $danger: Danger/error state color, mapped to $gs-danger-color. +// - $light: Light theme color, mapped to $gs-grey-light-color. +// - $dark: Dark theme color, mapped to $gs-grey-dark-color. +// Bootstrap Variables +/*---------------------------------------------------------------------------*/ +$primary: $gs-primary-color; +$secondary: $gs-secondary-color; +$success: $gs-success-color; +$info: $gs-info-color; +$warning: $gs-warning-color; +$danger: $gs-danger-color; +$light: $gs-grey-light-color; +$dark: $gs-grey-dark-color; + +// Control the color of the active tab in a tabset +$nav-tabs-link-active-color: $gs-secondary-alt-color; + +// Control listing card title color +$card-title-color: $gs-grey-dark-color; \ No newline at end of file diff --git a/themes/grass/layouts/partials/head.html b/themes/grass/layouts/partials/head.html index e69f338b..69b15d81 100644 --- a/themes/grass/layouts/partials/head.html +++ b/themes/grass/layouts/partials/head.html @@ -36,6 +36,25 @@ {{ $styles := resources.Get "css/style.css" | minify}} + {{ with resources.Get "sass/main.scss" }} + {{ $opts := dict + "enableSourceMap" hugo.IsDevelopment + "outputStyle" (cond hugo.IsDevelopment "expanded" "compressed") + "targetPath" "css/main.css" + "transpiler" "dartsass" + "vars" site.Params.styles + "includePaths" (slice "node_modules/bootstrap/scss") + }} + {{ with . | toCSS $opts }} + {{ if hugo.IsDevelopment }} + + {{ else }} + {{ with . | fingerprint }} + + {{ end }} + {{ end }} + {{ end }} +{{ end }} From 113a682c247c1641eba07c7f2c8f1535253d9f6b Mon Sep 17 00:00:00 2001 From: cwhite911 Date: Thu, 3 Jul 2025 14:34:59 -0400 Subject: [PATCH 02/20] Added line at end of files --- .env | 2 +- docker-compose.yml | 2 +- themes/grass/assets/scss/main.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.env b/.env index 9a1b3ef5..bcd8e696 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -HUGO_VERSION=0.147.9 \ No newline at end of file +HUGO_VERSION=0.147.9 diff --git a/docker-compose.yml b/docker-compose.yml index 48c99acd..680f90d4 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -6,4 +6,4 @@ services: - ./:/src - ~/hugo_cache:/tmp/hugo_cache ports: - - 1313:1313 \ No newline at end of file + - 1313:1313 diff --git a/themes/grass/assets/scss/main.scss b/themes/grass/assets/scss/main.scss index dac19240..35461cf7 100644 --- a/themes/grass/assets/scss/main.scss +++ b/themes/grass/assets/scss/main.scss @@ -151,4 +151,4 @@ $dark: $gs-grey-dark-color; $nav-tabs-link-active-color: $gs-secondary-alt-color; // Control listing card title color -$card-title-color: $gs-grey-dark-color; \ No newline at end of file +$card-title-color: $gs-grey-dark-color; From ff2157966e4cf98d0b4cc7ada64cd888b4f5eb75 Mon Sep 17 00:00:00 2001 From: cwhite911 Date: Thu, 3 Jul 2025 17:27:39 -0400 Subject: [PATCH 03/20] Updated head to use scss code instead of old css --- .env | 2 +- .nvmrc | 2 +- package-lock.json | 42 +++++++++++++++++++ package.json | 5 +++ themes/grass/assets/sass/_colors.scss | 0 themes/grass/assets/{scss => sass}/main.scss | 34 +++++++++++++++ themes/grass/layouts/partials/head.html | 42 +++++++++---------- themes/grass/layouts/partials/navigation.html | 23 ++-------- 8 files changed, 107 insertions(+), 43 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 themes/grass/assets/sass/_colors.scss rename themes/grass/assets/{scss => sass}/main.scss (87%) diff --git a/.env b/.env index bcd8e696..daf906ac 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -HUGO_VERSION=0.147.9 +HUGO_VERSION=0.139.4 diff --git a/.nvmrc b/.nvmrc index 7d41c735..fa12cf29 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -22.14.0 +v23.3.0 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..f7f0c051 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,42 @@ +{ + "name": "src", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "bootstrap": "^5.3.7" + } + }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/bootstrap": { + "version": "5.3.7", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.7.tgz", + "integrity": "sha512-7KgiD8UHjfcPBHEpDNg+zGz8L3LqR3GVwqZiBRFX04a1BCArZOz1r2kjly2HQ0WokqTO0v1nF+QAt8dsW4lKlw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..79d52496 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "bootstrap": "^5.3.7" + } +} diff --git a/themes/grass/assets/sass/_colors.scss b/themes/grass/assets/sass/_colors.scss new file mode 100644 index 00000000..e69de29b diff --git a/themes/grass/assets/scss/main.scss b/themes/grass/assets/sass/main.scss similarity index 87% rename from themes/grass/assets/scss/main.scss rename to themes/grass/assets/sass/main.scss index 35461cf7..7a02f90c 100644 --- a/themes/grass/assets/scss/main.scss +++ b/themes/grass/assets/sass/main.scss @@ -117,6 +117,7 @@ $gs-images-logos-small-path: $gs-images-base-path + '/logos/small'; $gs-svg-logos-base-path: $gs-images-base-path + '/logos/large'; $gs-icons-base-path: $gs-images-base-path + '/icons'; +$gs-grass-background-image: url("/images/logos/banner.jpg"); /* Icons */ $gs-grass-logo-white-simple: url($gs-images-logos-small-path + '/grass-logo-green-simple@05x.png'); @@ -152,3 +153,36 @@ $nav-tabs-link-active-color: $gs-secondary-alt-color; // Control listing card title color $card-title-color: $gs-grey-dark-color; + +$primary-rgb: $gs-primary-color; +$secondary-rgb: $gs-secondary-color; +$success-rgb: $gs-success-color; +$info-rgb: $gs-info-color; +$warning-rgb: $gs-warning-color; +$danger-rgb: $gs-danger-color; +$light-rgb: $gs-grey-light-color; +$dark-rgb: $gs-grey-dark-color; + +// Variable overrides first +@import "bootstrap/scss/bootstrap"; + +body { + line-height: 1.8; + font-family: $gs-grass-font; + -webkit-font-smoothing: antialiased; + font-size: 16px; + color: $gs-black-color; + background-color: $gs-white-color--lightest; + background-color: $gs-white-color; +} + +.grass-bg-image { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-image: linear-gradient(to bottom, + $gs-secondary-color--light 0%, + $gs-secondary-color--light 100% + ), + $gs-grass-background-image; +} \ No newline at end of file diff --git a/themes/grass/layouts/partials/head.html b/themes/grass/layouts/partials/head.html index 69b15d81..7c73da8c 100644 --- a/themes/grass/layouts/partials/head.html +++ b/themes/grass/layouts/partials/head.html @@ -26,7 +26,26 @@ - + {{ with resources.Get "sass/main.scss" }} + {{ $opts := dict + "enableSourceMap" false + "outputStyle" (cond hugo.IsDevelopment "expanded" "compressed") + "silenceDeprecations" true + "targetPath" "css/main.css" + "transpiler" "dartsass" + "vars" site.Params.styles + "includePaths" (slice "node_modules") + }} + {{ with . | toCSS $opts }} + {{ if hugo.IsDevelopment }} + + {{ else }} + {{ with . | fingerprint }} + + {{ end }} + {{ end }} + {{ end }} + {{ end }} @@ -34,27 +53,6 @@ - {{ $styles := resources.Get "css/style.css" | minify}} - - {{ with resources.Get "sass/main.scss" }} - {{ $opts := dict - "enableSourceMap" hugo.IsDevelopment - "outputStyle" (cond hugo.IsDevelopment "expanded" "compressed") - "targetPath" "css/main.css" - "transpiler" "dartsass" - "vars" site.Params.styles - "includePaths" (slice "node_modules/bootstrap/scss") - }} - {{ with . | toCSS $opts }} - {{ if hugo.IsDevelopment }} - - {{ else }} - {{ with . | fingerprint }} - - {{ end }} - {{ end }} - {{ end }} -{{ end }} diff --git a/themes/grass/layouts/partials/navigation.html b/themes/grass/layouts/partials/navigation.html index a5cff5fc..a1acd5a6 100644 --- a/themes/grass/layouts/partials/navigation.html +++ b/themes/grass/layouts/partials/navigation.html @@ -1,6 +1,7 @@ -