configure

.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

.prettierrc.yml

@@ -1,4 +1,5 @@
-trailingComma: "es5"
 tabWidth: 2
+printWidth: 120
 semi: true
 singleQuote: true
+trailingComma: "es5"

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"
   },

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');

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%);

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;
   }

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: '';

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');

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;

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');
     }

src/scss/config/_config.scss

@@ -77,13 +77,14 @@ $color-dark: hsl(260deg 70% 6%);
   ),
   $dark-colors: dark.$colors,
   $form-icon: (
-    'search': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z" style="fill:#COLOR#;"/></svg>',
+    'search':
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19.501,9.75c-0,2.152 -0.699,4.14 -1.875,5.752l5.935,5.94c0.585,0.586 0.585,1.537 -0,2.123c-0.586,0.586 -1.538,0.586 -2.124,0l-5.935,-5.939c-1.612,1.181 -3.6,1.875 -5.752,1.875c-5.386,-0 -9.75,-4.364 -9.75,-9.751c0,-5.386 4.364,-9.75 9.75,-9.75c5.387,-0 9.751,4.364 9.751,9.75Zm-9.751,6.751c3.704,-0 6.751,-3.047 6.751,-6.751c-0,-3.703 -3.047,-6.75 -6.751,-6.75c-3.703,0 -6.75,3.047 -6.75,6.75c0,3.704 3.047,6.751 6.75,6.751Z" style="fill:#COLOR#;"/></svg>',
   ),
   $layout: (
     'container-inline-size': 94rem,
   ),
   $settings: (
     'css-custom-properties': true,
     'html-smooth-scrolling': true,
-  ),
+  )
 );

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));
   }
 }

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);

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;

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;
+    }
   }
 }

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;
+}

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 {

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);
     }
   }