chore(website): add prettier formatting

.github/workflows/changes.yml

@@ -44,6 +44,8 @@ on:
         value: ${{ jobs.source.outputs.markdown }}
       scripts:
         value: ${{ jobs.source.outputs.scripts }}
+      website:
+        value: ${{ jobs.source.outputs.website }}
       website_only:
         value: ${{ jobs.source.outputs.website_only }}
       install:
@@ -172,6 +174,7 @@ jobs:
       scripts: ${{ steps.filter.outputs.scripts }}
       install: ${{ steps.filter.outputs.install }}
       k8s: ${{ steps.filter.outputs.k8s }}
+      website: ${{ steps.filter.outputs.website }}
       website_only: ${{ steps.filter.outputs.website == 'true' && steps.filter.outputs.not_website == 'false' }}
       test-yml: ${{ steps.filter.outputs.test-yml }}
       integration-yml: ${{ steps.filter.outputs.integration-yml }}

.github/workflows/test.yml

@@ -203,6 +203,23 @@ jobs:
           rustup target add wasm32-unknown-unknown
           wasm-pack build --target web --out-dir public/pkg
 
+  check-website-fmt:
+    name: Check Website Formatting
+    runs-on: ubuntu-24.04
+    if: ${{ needs.changes.outputs.website == 'true' || needs.changes.outputs.test-yml == 'true' }}
+    needs: changes
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
+        with:
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: 'website/yarn.lock'
+      - name: Install dependencies
+        run: cd website && yarn install --frozen-lockfile
+      - name: Check formatting
+        run: cd website && make format-check
+
   all-checks:
     name: Test Suite
     runs-on: ubuntu-24.04
@@ -221,6 +238,7 @@ jobs:
       - check-rust-docs
       - test-vrl
       - build-vrl-playground
+      - check-website-fmt
     steps:
       - name: Check all jobs status
         run: |

website/.htmltest.external.yml

@@ -4,11 +4,11 @@ CheckExternal: true
 IgnoreAltMissing: true
 IgnoreEmptyHref: true
 IgnoreURLs:
-# We have to ignore this due to rate limiting
-- "github.com"
-- "packages.timber.io"
-- "localhost"
-# Somehow this link allows shows up as broken, so we'll exclude it
-- "https://www.microsoft.com/en-us/windows"
-# Somehow these links always come up as 5xx even though they work fine in the browser
-- "maxmind.com"
+  # We have to ignore this due to rate limiting
+  - "github.com"
+  - "packages.timber.io"
+  - "localhost"
+  # Somehow this link allows shows up as broken, so we'll exclude it
+  - "https://www.microsoft.com/en-us/windows"
+  # Somehow these links always come up as 5xx even though they work fine in the browser
+  - "maxmind.com"

website/.prettierignore

@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Hugo-generated assets
+public/
+resources/
+hugo_stats.json
+assets/jsconfig.json
+
+# Assets generated by the Makefile
+data/cargo-lock.toml
+data/docs.json
+
+# Temporary files
+tmp/
+
+# Reports
+reports/
+
+# JavaScript files with Go template syntax (Hugo processes these)
+assets/js/
+
+# HTML files that prettier-plugin-go-template cannot parse
+layouts/_default/index.json.json
+layouts/_default/_markup/render-heading.html
+
+layouts/partials/badge.html
+layouts/partials/docs/sidebar.html
+layouts/partials/heading.html
+
+*.md

website/.prettierrc.json

@@ -4,14 +4,15 @@
     {
       "files": ["*.html"],
       "options": {
-        "parser": "go-template"
+        "parser": "go-template",
+        "htmlWhitespaceSensitivity": "strict"
       }
     }
   ],
   "tabWidth": 2,
   "useTabs": false,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "none",
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
   "printWidth": 120
 }

website/Makefile

@@ -85,3 +85,15 @@ local-preview-build: clean setup cargo-data structured-data preview-build run-li
 # Generate Lighthouse scores locally
 lighthouse-report:
 	yarn lighthouse
+
+# Format all files with Prettier
+format:
+	yarn format
+
+# Check formatting without making changes
+format-check:
+	yarn format:check
+
+# Format only HTML template files
+format-html:
+	yarn format:html

website/algolia.json

@@ -3,47 +3,24 @@
   "minWordSizefor2Typos": 8,
   "hitsPerPage": 10,
   "maxValuesPerFacet": 100,
-  "searchableAttributes": [
-    "title",
-    "content",
-    "unordered(hierarchy)",
-    "unordered(tags)"
-  ],
+  "searchableAttributes": ["title", "content", "unordered(hierarchy)", "unordered(tags)"],
   "numericAttributesToIndex": null,
   "attributesToRetrieve": null,
   "unretrievableAttributes": null,
   "optionalWords": null,
   "attributesForFaceting": null,
-  "attributesToSnippet": [
-    "title:10",
-    "content:10"
-  ],
+  "attributesToSnippet": ["title:10", "content:10"],
   "attributesToHighlight": null,
   "paginationLimitedTo": 1000,
   "attributeForDistinct": null,
   "exactOnSingleWordQuery": "attribute",
-  "ranking": [
-    "typo",
-    "geo",
-    "words",
-    "filters",
-    "proximity",
-    "attribute",
-    "exact",
-    "custom"
-  ],
-  "customRanking": [
-    "desc(level)",
-    "desc(ranking)"
-  ],
+  "ranking": ["typo", "geo", "words", "filters", "proximity", "attribute", "exact", "custom"],
+  "customRanking": ["desc(level)", "desc(ranking)"],
   "separatorsToIndex": "",
   "removeWordsIfNoResults": "none",
   "queryType": "prefixLast",
   "highlightPreTag": "<em>",
   "highlightPostTag": "</em>",
   "snippetEllipsisText": "…",
-  "alternativesAsExact": [
-    "ignorePlurals",
-    "singleWordSynonym"
-  ]
+  "alternativesAsExact": ["ignorePlurals", "singleWordSynonym"]
 }

website/assets/css/style.css

@@ -66,8 +66,8 @@ a[type="button"] {
 
 /* Algolia search */
 :root {
-  --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
-    inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
+  --docsearch-key-shadow:
+    inset 0 -2px 0 0 rgb(205, 205, 230), inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
 }
 
 .aa-DetachedFormContainer,
@@ -149,10 +149,7 @@ a[type="button"] {
 }
 
 .aa-DetachedContainer .aa-DetachedFormContainer {
-  background: rgba(
-    var(--aa-background-color-rgb),
-    var(--aa-background-color-alpha)
-  );
+  background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
   padding: calc(var(--aa-spacing-half) * 1.5);
 }
 
@@ -239,10 +236,7 @@ a[type="button"] {
   font-size: 0.85em;
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(
-    var(--aa-panel-border-color-rgb),
-    var(--aa-panel-border-color-alpha)
-  );
+  border-color: rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
   border-radius: 3px;
 }
 
@@ -254,7 +248,9 @@ a[type="button"] {
 
 .aa-Footer {
   padding: 15px;
-  box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
+  box-shadow:
+    0 -1px 0 0 #e0e3e8,
+    0 -3px 6px 0 rgba(69, 98, 155, 0.12);
 }
 
 @media screen and (max-width: 679px) {
@@ -263,13 +259,8 @@ a[type="button"] {
   }
 }
 
-[data-autocomplete-source-id="suggestions"]
-  .aa-Item[aria-selected="true"]
-  .aa-QuerySuggestion {
-  background: rgba(
-    var(--aa-selected-color-rgb),
-    var(--aa-selected-color-alpha)
-  );
+[data-autocomplete-source-id="suggestions"] .aa-Item[aria-selected="true"] .aa-QuerySuggestion {
+  background: rgba(var(--aa-selected-color-rgb), var(--aa-selected-color-alpha));
   border-color: transparent;
 }
 

website/babel.config.js

@@ -1,6 +1,6 @@
-import presetEnv from '@babel/preset-env';
-import presetReact from '@babel/preset-react';
-import presetTypeScript from '@babel/preset-typescript';
+import presetEnv from "@babel/preset-env";
+import presetReact from "@babel/preset-react";
+import presetTypeScript from "@babel/preset-typescript";
 
 export default function (api) {
   api.cache(true);
@@ -9,30 +9,30 @@ export default function (api) {
     [
       presetEnv,
       {
-        "useBuiltIns": 'entry',
-        "corejs": 3
-      }
+        useBuiltIns: "entry",
+        corejs: 3,
+      },
     ],
     [
       presetReact,
       {
-        "flow": false,
-        "typescript": true
-      }
+        flow: false,
+        typescript: true,
+      },
     ],
     [
       presetTypeScript,
       {
-        "isTSX": true,
-        "allExtensions": true
-      }
-    ]
+        isTSX: true,
+        allExtensions: true,
+      },
+    ],
   ];
 
   const plugins = [];
 
   return {
     presets,
-    plugins
+    plugins,
   };
 }