Format/init (#1489)

Adds formatting checks to the CI

with using "prettier" with "prettier-plugin-astro"

Locally developers can run:

`nix run .#format` to format the src directory`

Alternatively / Additionally:

Use any LSP that has `prettier` support.
 
or run:

`npm run format`
`npm run format:check`

Ci executes:

`nix build .\#checks.x86_64-linux.format`

Which fails if the formatting is not in the required format which will
ensure the format stays consistent.

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# Format: run on all files
+690acaad552afe771806443c3c8c93efe32f71a9

.github/workflows/ci.yml

@@ -18,15 +18,13 @@ concurrency:
  cancel-in-progress: true
 
 jobs:
-
  build:
  name: "Build nixos.org"
  runs-on: "ubuntu-latest"
 
  if: "!contains(github.event.head_commit.message, '[ci skip]')"
 
  steps:
-
  - name: "Checking out the repository"
  uses: "actions/checkout@v4"
  with:
@@ -39,7 +37,12 @@ jobs:
  uses: "cachix/cachix-action@v15"
  with:
  name: "nixos-homepage"
- signingKey: '${{ secrets.CACHIX_SIGNING_KEY }}'
+ signingKey: "${{ secrets.CACHIX_SIGNING_KEY }}"
+
+ - name: "Check formatting"
+ run: |
+ npm install
+ npm run format:check
 
  - name: "Build"
  run: |

.prettierrc.mjs

@@ -0,0 +1,12 @@
+/** @type {import("prettier").Config} */
+export default {
+ plugins: ["prettier-plugin-astro"],
+ overrides: [
+ {
+ files: "*.astro",
+ options: {
+ parser: "astro",
+ },
+ },
+ ],
+};

astro.config.mjs

@@ -1,26 +1,26 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
 import icon from "astro-icon";
 
 // theme derivated from https://raw.githubusercontent.com/shikijs/textmate-grammars-themes/main/packages/tm-themes/themes/vesper.json
-import syntaxTheme from "./src/lib/shiki/theme.json"
+import syntaxTheme from "./src/lib/shiki/theme.json";
 
 // https://astro.build/config
 export default defineConfig({
- output: 'static',
- site: 'https://nixos.org',
+ output: "static",
+ site: "https://nixos.org",
  integrations: [
  tailwind(),
  mdx(),
  sitemap(),
  icon({
  include: {
- mdi: ['*'],
- simpleIcons: ['*'],
- }
+ mdi: ["*"],
+ simpleIcons: ["*"],
+ },
  }),
  ],
  markdown: {

flake.nix

@@ -186,7 +186,7 @@ rec {
  done
  '';
 
- in rec {
+ in {
  packages.manuals = manuals;
  packages.pills = pills;
  packages.demos = demos;

package.json

@@ -13,7 +13,9 @@
  "preview": "astro preview",
  "astro": "astro",
  "linkcheck:minimal": "linkchecker http://localhost:4321 --ignore-url /manual --ignore-url /guides --ignore-url /tutorials",
- "linkcheck:full": "linkchecker http://localhost:4321"
+ "linkcheck:full": "linkchecker http://localhost:4321",
+ "format": "prettier --write ./src",
+ "format:check": "prettier --check ./src"
  },
  "dependencies": {
  "@astrojs/mdx": "^3.1.2",
@@ -37,7 +39,9 @@
  },
  "devDependencies": {
  "@iconify-json/mdi": "^1.1.67",
+ "@iconify/tailwind": "^1.1.1",
  "@iconify-json/simple-icons": "^1.1.107",
- "@iconify/tailwind": "^1.1.1"
+ "prettier": "^3.3.2",
+ "prettier-plugin-astro": "^0.14.0"
  }
 }

src/components/layout/CodeBlock.astro

@@ -1,22 +1,24 @@
 ---
 interface Props {
- lines: Array<{ shellPrompt: string, code: string }>;
+ lines: Array<{ shellPrompt: string; code: string }>;
  type?: "code" | "storepath";
 }
 
 const { lines, type = "code" } = Astro.props;
 ---
 
-<pre class:list={[
- "border-1 bg-[#3a3a3a] px-4 py-4 rounded-3xl my-2 mb-4 overflow-x-auto",
- { "bg-[#3a3a3a] text-white": type === "code" },
- { "font-mono font-[500] bg-nix-blue-extralight border-nix-blue-extralight text-black shadow-inner": type === "storepath" }
+<pre
+ class:list={[
+ "border-1 bg-[#3a3a3a] px-4 py-4 rounded-3xl my-2 mb-4 overflow-x-auto",
+ { "bg-[#3a3a3a] text-white": type === "code" },
+ {
+ "font-mono font-[500] bg-nix-blue-extralight border-nix-blue-extralight text-black shadow-inner":
+ type === "storepath",
+ },
  ]}>
 {lines.map((line, idx, {length}) => {
  if (length - 1 === idx) {
- return <code class="font-bold bg-transparent border-none w-full p-0">{line.shellPrompt}</code><span>{line.code}</span>
- } else {
- return <code class="font-bold bg-transparent border-none w-full p-0">{line.shellPrompt}</code><span>{line.code}</span><br>
- }
+ return <code class="font-bold bg-transparent border-none w-full p-0">{line.shellPrompt}</code><span>{line.code}</span>} else {
+ return <code class="font-bold bg-transparent border-none w-full p-0">{line.shellPrompt}</code><span>{line.code}</span><br />}
 })}
 </pre>

src/components/layout/CodeInline.astro

@@ -1,4 +1,7 @@
 ---
+
 ---
 
-<code class="text-nix-orange-dark bg-neutral-100 py-1 px-2 border-1 rounded-lg"><slot /></code>
+<code class="text-nix-orange-dark bg-neutral-100 py-1 px-2 border-1 rounded-lg"
+ ><slot /></code
+>

src/components/layout/Container.astro

@@ -2,6 +2,9 @@
 const { class: extraClasses, id = null } = Astro.props;
 ---
 
-<div class={`md:mx-auto px-4 sm:max-w-[736px] md:max-w-[960px] lg:max-w-[1168px] ${extraClasses}`} id={id}>
- <slot />
+<div
+ class={`md:mx-auto px-4 sm:max-w-[736px] md:max-w-[960px] lg:max-w-[1168px] ${extraClasses}`}
+ id={id}
+>
+ <slot />
 </div>

src/components/layout/Divider.astro

@@ -1,29 +1,36 @@
 ---
-import InlineSVG from '../util/InlineSVG.astro';
+import InlineSVG from "../util/InlineSVG.astro";
 
 interface Props {
-  style?: "slope" | "landing_search_bottom",
-  mirrorX?: boolean,
-  mirrorY?: boolean
+ style?: "slope" | "landing_search_bottom";
+ mirrorX?: boolean;
+ mirrorY?: boolean;
 }
 
 const styleMap = {
-  "slope": "/src/assets/image/divider/slope_down.svg",
-  "landing_search_bottom": "/src/assets/image/divider/landing_search_bottom.svg",
-}
+ slope: "/src/assets/image/divider/slope_down.svg",
+ landing_search_bottom: "/src/assets/image/divider/landing_search_bottom.svg",
+};
 
 const heightMap = {
-  "slope": "h-16",
-  "landing_search_bottom": "h-16 md:h-48"
-}
+ slope: "h-16",
+ landing_search_bottom: "h-16 md:h-48",
+};
 
 const { style = "slope", mirrorX = false, mirrorY = false } = Astro.props;
 ---
 
-<InlineSVG role="separator" src={styleMap[style]} class:list={["block left-0 right-0 h-16 w-full",
-heightMap[style],
-mirrorY ? "translate-y-[1px]" : "translate-y-[-1px]",
-{
- "-scale-x-100": mirrorX,
- "-scale-y-100": mirrorY
-}]} aria-hidden="true" />
+<InlineSVG
+ role="separator"
+ src={styleMap[style]}
+ class:list={[
+ "block left-0 right-0 h-16 w-full",
+ heightMap[style],
+ mirrorY ? "translate-y-[1px]" : "translate-y-[-1px]",
+ {
+ "-scale-x-100": mirrorX,
+ "-scale-y-100": mirrorY,
+ },
+ ]}
+ aria-hidden="true"
+/>

src/components/layout/PageHeader.astro

@@ -1,32 +1,34 @@
 ---
-
 interface Props {
  text?: string;
  subtext?: string;
  parentPath?: string;
 }
 
-const { text = '', subtext, parentPath = undefined }: Props = Astro.props;
+const { text = "", subtext, parentPath = undefined }: Props = Astro.props;
 
 import Container from "./Container.astro";
-
 ---
-<div class="inline-svg-header-nixdarkblue bg-bottom bg-no-repeat bg-cover py-24 hidden md:block">
+
+<div
+ class="inline-svg-header-nixdarkblue bg-bottom bg-no-repeat bg-cover py-24 hidden md:block"
+>
  <Container class="text-white grid grid-cols-3">
  <div class="flex flex-col gap-4 col-span-2">
- {parentPath && (
- <a href={parentPath} class="!text-white -mb-4 -mt-6 invisible md:visible">
- <span class="text-nixblue">←</span> Back
- </a>
- )}
+ {
+ parentPath && (
+ <a
+ href={parentPath}
+ class="!text-white -mb-4 -mt-6 invisible md:visible"
+ >
+ <span class="text-nixblue">←</span> Back
+ </a>
+ )
+ }
  <h1 class="text-4xl font-bold font-heading text-left">
  {text}
  </h1>
- {subtext && (
- <p class="text text-left">
- {subtext}
- </p>
- )}
+ {subtext && <p class="text text-left">{subtext}</p>}
  </div>
  </Container>
 </div>

src/components/layout/SponsorLogo.astro

@@ -1,13 +1,16 @@
 ---
 const {
-  class: extraClasses,
-  href: externalLink,
-  src: imageSource,
-  alt: altText
- } = Astro.props;
+ class: extraClasses,
+ href: externalLink,
+ src: imageSource,
+ alt: altText,
+} = Astro.props;
 ---
-<div class=`flex min-h-24 xl:min-h-20 flex-col justify-center bg-white p-4 rounded-lg ${extraClasses}`>
+
+<div
+ class=`flex min-h-24 xl:min-h-20 flex-col justify-center bg-white p-4 rounded-lg ${extraClasses}`
+>
  <a href={externalLink}>
- <img class="h-full w-full" src={imageSource} alt={altText}>
+ <img class="h-full w-full" src={imageSource} alt={altText} />
  </a>
 </div>