diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index e8a34eb..12dd085 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -31,6 +31,9 @@ jobs: - name: Run JavaScript linter run: npm run js:lint + - + name: Run Prettier + run: npm run prettier - name: Build website run: npm run build diff --git a/.prettierrc.yml b/.prettierrc.yml index 92de971..3ab8ab3 100644 --- a/.prettierrc.yml +++ b/.prettierrc.yml @@ -1,4 +1,5 @@ -trailingComma: "es5" tabWidth: 2 +printWidth: 120 semi: true singleQuote: true +trailingComma: "es5" diff --git a/package.json b/package.json index cdc986c..572afea 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,10 @@ "js:lint": "npx eslint 'src/js/**'", "js:fix": "npx eslint --fix 'src/js/**'", "build": "npm-run-all dist:delete sass:compile eleventy:build", + "prettier": "npx prettier --check 'src/scss/**/*.scss'", "sass:watch": "sass --watch --update --load-path=node_modules --no-source-map --style=expanded src/scss:src/css", - "sass:fix": "stylelint src/scss/**/*.scss --fix", - "sass:lint": "stylelint src/scss/**/*.scss", + "sass:fix": "stylelint 'src/scss/**/*.scss' --fix", + "sass:lint": "stylelint 'src/scss/**/*.scss'", "sass:compile": "sass --load-path=node_modules --no-source-map --style=compressed src/scss:src/css", "start": "npm-run-all --parallel sass:watch eleventy:serve" }, diff --git a/src/scss/component/_code-tab.scss b/src/scss/component/_code-tab.scss index 03ceb1f..40d1692 100644 --- a/src/scss/component/_code-tab.scss +++ b/src/scss/component/_code-tab.scss @@ -53,7 +53,9 @@ flex-wrap: wrap; gap: spacer('xxs') spacer('xs'); - > * + * { margin-block-start: 0; } + > * + * { + margin-block-start: 0; + } &--title { gap: spacer('xxs') spacer('s'); diff --git a/src/scss/component/_cookie-consent.scss b/src/scss/component/_cookie-consent.scss index f07f7e7..ec84be2 100644 --- a/src/scss/component/_cookie-consent.scss +++ b/src/scss/component/_cookie-consent.scss @@ -12,11 +12,13 @@ } .cookie-consent { - @include set-css-variable(( - --base-color-text: hsl(0deg 0% 97%), - --base-color-link: color('primary', $only-color: true, $map: dark.$colors), - --base-color-link-hover: color.scale(color('primary', $only-color: true, $map: dark.$colors), $lightness: 20%), - )); + @include set-css-variable( + ( + --base-color-text: hsl(0deg 0% 97%), + --base-color-link: color('primary', $only-color: true, $map: dark.$colors), + --base-color-link-hover: color.scale(color('primary', $only-color: true, $map: dark.$colors), $lightness: 20%), + ) + ); align-items: center; background-color: hsl(260deg 70% 6%); diff --git a/src/scss/component/_ide.scss b/src/scss/component/_ide.scss index e5ed2b0..6160660 100644 --- a/src/scss/component/_ide.scss +++ b/src/scss/component/_ide.scss @@ -97,7 +97,7 @@ } } - pre[class*=language-] { + pre[class*='language-'] { border-radius: 0 0 var(--doc-border-radius-md); padding: 2rem 2.25rem; } diff --git a/src/scss/component/_pagefind.scss b/src/scss/component/_pagefind.scss index 95243db..7316814 100644 --- a/src/scss/component/_pagefind.scss +++ b/src/scss/component/_pagefind.scss @@ -23,10 +23,7 @@ &::before { --size: 1em; - @include field-icon( - config('search', $form-icon, false), - color('icon', 'search', true) - ); + @include field-icon(config('search', $form-icon, false), color('icon', 'search', true)); background-size: var(--size); block-size: var(--size); content: ''; diff --git a/src/scss/component/_pagination.scss b/src/scss/component/_pagination.scss index 46dcb66..213b124 100644 --- a/src/scss/component/_pagination.scss +++ b/src/scss/component/_pagination.scss @@ -1,11 +1,6 @@ @use 'sprucecss/scss/spruce' as *; -@include generate-btn( - '.pagination a', - null, - false, - true -); +@include generate-btn('.pagination a', null, false, true); .pagination { @include clear-list; @@ -21,15 +16,17 @@ a { @include btn-variant('pagination'); - @include set-css-variable(( - --padding: 1em 1.25em, - )); + @include set-css-variable( + ( + --padding: 1em 1.25em, + ) + ); border-radius: var(--doc-border-radius-md); font-size: 0.91375rem; font-weight: 700; text-transform: uppercase; - &[aria-current="page"] { + &[aria-current='page'] { background: color('pagination-background-hover', 'btn'); border-color: color('pagination-background-hover', 'btn'); color: color('pagination-foreground-hover', 'btn'); diff --git a/src/scss/component/_theme-switcher.scss b/src/scss/component/_theme-switcher.scss index 1ec1852..c13d534 100644 --- a/src/scss/component/_theme-switcher.scss +++ b/src/scss/component/_theme-switcher.scss @@ -5,9 +5,15 @@ display: inline-flex; position: relative; - &[data-theme-mode='system'] &__system-mode { display: flex; } - &[data-theme-mode='light'] &__light-mode { display: flex; } - &[data-theme-mode='dark'] &__dark-mode { display: flex; } + &[data-theme-mode='system'] &__system-mode { + display: flex; + } + &[data-theme-mode='light'] &__light-mode { + display: flex; + } + &[data-theme-mode='dark'] &__dark-mode { + display: flex; + } button { display: none; diff --git a/src/scss/component/card/_accordion.scss b/src/scss/component/card/_accordion.scss index 9204f0c..a6cbafa 100644 --- a/src/scss/component/card/_accordion.scss +++ b/src/scss/component/card/_accordion.scss @@ -72,11 +72,11 @@ display: grid; padding-inline: spacer('m'); - &[aria-hidden="true"] { + &[aria-hidden='true'] { grid-template-rows: 0fr; } - &[aria-hidden="false"] { + &[aria-hidden='false'] { grid-template-rows: 1fr; padding-block-end: spacer('m'); } diff --git a/src/scss/config/_config.scss b/src/scss/config/_config.scss index 992318b..09eac11 100644 --- a/src/scss/config/_config.scss +++ b/src/scss/config/_config.scss @@ -77,7 +77,8 @@ $color-dark: hsl(260deg 70% 6%); ), $dark-colors: dark.$colors, $form-icon: ( - 'search': '', + 'search': + '', ), $layout: ( 'container-inline-size': 94rem, @@ -85,5 +86,5 @@ $color-dark: hsl(260deg 70% 6%); $settings: ( 'css-custom-properties': true, 'html-smooth-scrolling': true, - ), + ) ); diff --git a/src/scss/config/_dark-mode.scss b/src/scss/config/_dark-mode.scss index 0899df7..67fa1fd 100644 --- a/src/scss/config/_dark-mode.scss +++ b/src/scss/config/_dark-mode.scss @@ -1,18 +1,12 @@ @use 'sprucecss/scss/spruce' as *; -@include generate-color-variables( - $dark-colors, - ':root[data-theme-mode="dark"]' -); +@include generate-color-variables($dark-colors, ':root[data-theme-mode="dark"]'); [data-theme-mode='dark'] { color-scheme: dark; /* stylelint-disable-next-line selector-no-qualifying-type */ select.form-control:not([multiple]):not([size]) { - @include field-icon( - config('select', $form-icon, false), - color('select-foreground', 'form', true, $dark-colors), - ); + @include field-icon(config('select', $form-icon, false), color('select-foreground', 'form', true, $dark-colors)); } } diff --git a/src/scss/config/_font.scss b/src/scss/config/_font.scss index 2a4cd12..ec1750d 100644 --- a/src/scss/config/_font.scss +++ b/src/scss/config/_font.scss @@ -1,35 +1,13 @@ @use 'sprucecss/scss/spruce' as *; -@include font-face( - 'Inter', - '../../font/inter-v13-latin-regular.woff2' -); +@include font-face('Inter', '../../font/inter-v13-latin-regular.woff2'); -@include font-face( - 'Inter', - '../../font/inter-v13-latin-500.woff2', - 500 -); +@include font-face('Inter', '../../font/inter-v13-latin-500.woff2', 500); -@include font-face( - 'Inter', - '../../font/inter-v13-latin-700.woff2', - 700 -); +@include font-face('Inter', '../../font/inter-v13-latin-700.woff2', 700); -@include font-face( - 'Figtree', - '../../font/figtree-v5-latin-regular.woff2' -); +@include font-face('Figtree', '../../font/figtree-v5-latin-regular.woff2'); -@include font-face( - 'Figtree', - '../../font/figtree-v5-latin-500.woff2', - 500 -); +@include font-face('Figtree', '../../font/figtree-v5-latin-500.woff2', 500); -@include font-face( - 'Figtree', - '../../font/figtree-v5-latin-700.woff2', - 700 -); +@include font-face('Figtree', '../../font/figtree-v5-latin-700.woff2', 700); diff --git a/src/scss/layout/_container.scss b/src/scss/layout/_container.scss index ec033a8..c187d03 100644 --- a/src/scss/layout/_container.scss +++ b/src/scss/layout/_container.scss @@ -4,10 +4,7 @@ --inline-size: #{config('container-inline-size', $layout)}; --gap: #{spacer-clamp(m, l)}; - @include layout-center( - var(--gap), - var(--inline-size) - ); + @include layout-center(var(--gap), var(--inline-size)); &--narrow { --inline-size: 60rem; diff --git a/src/scss/layout/_templates.scss b/src/scss/layout/_templates.scss index b633948..bcfe5a0 100644 --- a/src/scss/layout/_templates.scss +++ b/src/scss/layout/_templates.scss @@ -10,6 +10,8 @@ gap: spacer('l'); grid-template-columns: repeat(var(--columns), minmax(0, 2fr)); - @include breakpoint('sm') { --columns: 2; } + @include breakpoint('sm') { + --columns: 2; + } } } diff --git a/src/scss/main.scss b/src/scss/main.scss index e8e8877..95d8b59 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -5,15 +5,16 @@ @forward 'extend'; @forward 'helper'; - @use 'sprucecss/scss/spruce' as *; :root { - @include set-css-variable(( - --section-gap: clamp(5rem, 8vw, 9rem), - --section-gap-half: clamp(3.5rem, 8vw, 6rem), - --duration: 0.15s, - )); + @include set-css-variable( + ( + --section-gap: clamp(5rem, 8vw, 9rem), + --section-gap-half: clamp(3.5rem, 8vw, 6rem), + --duration: 0.15s, + ) + ); } body { @@ -36,4 +37,6 @@ h6 { font-family: var(--doc-heading-font-family); } -[x-cloak] { display: none !important; } +[x-cloak] { + display: none !important; +} diff --git a/src/scss/section/_hero.scss b/src/scss/section/_hero.scss index 393cc87..818401d 100644 --- a/src/scss/section/_hero.scss +++ b/src/scss/section/_hero.scss @@ -2,11 +2,7 @@ @use 'sprucecss/scss/spruce' as *; .hero-wrapper { - background: linear-gradient( - 0deg, - color('gradient-start', 'hero') 0%, - color('gradient-end', 'hero') 100% - ); + background: linear-gradient(0deg, color('gradient-start', 'hero') 0%, color('gradient-end', 'hero') 100%); } .hero { diff --git a/src/scss/section/_post-content.scss b/src/scss/section/_post-content.scss index 2d40123..57fc35b 100644 --- a/src/scss/section/_post-content.scss +++ b/src/scss/section/_post-content.scss @@ -8,7 +8,27 @@ } &--blog { - :is(dd, dl, dl, h1, h2, h3, h4, h5, h6, hr, ul, ol, p:not(p:has(img)), blockquote, form, pre, [class*=language-], .notification, .anchor-heading) { + :is( + dd, + dl, + dl, + h1, + h2, + h3, + h4, + h5, + h6, + hr, + ul, + ol, + p:not(p:has(img)), + blockquote, + form, + pre, + [class*='language-'], + .notification, + .anchor-heading + ) { @include layout-center(null, 45rem); } }