build: replace node/npm with tailwindcss cli (v3.4.4)

.gitignore

@@ -1,7 +1,6 @@
 build
 public
 resources
-node_modules
 hugo_stats.json
 .hugo_build.lock
 

README.md

@@ -56,10 +56,7 @@ Clone your forked repository and modify it as follows:
   ├── flake.nix
 - ├── go.mod
 - ├── go.sum
-- ├── hugo.toml
-- ├── package.hugo.json
-- ├── postcss.config.js
-- └── tailwind.config.js
+- └── hugo.toml
 ```
 
 ### 6. Rename your Hugo Module and Import Theme
@@ -78,20 +75,24 @@ Rename your module and remove the replacement directive to change `modern-hugo-r
 
 ### 7. Update Build Path, Name, and Dependency Hash
 
-GitHub Actions is configured to build the site using Nix. Now that your site is built from the root directory (not `exampleSite`), you should update its build path and name.
+GitHub Actions is configured to build the site using Nix. Now that your site is built from the root directory (not `exampleSite`), you should update its `pname` and remove the custom `sourceRoot`.
 
-Nix also requires the expected hash of downloaded dependencies. Now that `modern-hugo-resume` is imported, you will need to update this hash. Follow the instructions above `outputHash` in [`flake.nix`](./flake.nix).
+Nix also requires the expected hash of downloaded dependencies, which now includes `modern-hugo-resume`, so you will need to update this hash. Follow the instructions above `outputHash` in [`flake.nix`](./flake.nix).
 
 See [`cjshearer.dev/flake.nix`](https://github.com/cjshearer/cjshearer.dev/blob/9b49eaef33ed9fb4d8726f6578085d76145c3d1a/flake.nix) for reference.
 
 ```diff
 # flake.nix
-- buildFolder = "exampleSite";
-+ buildFolder = ".";
 ...
 - pname = "modern-hugo-resume-exampleSite"
 + pname = "<your username>.github.io"
 ...
+- sourceRoot = "${finalAttrs.src.name}/exampleSite";
+...
+  name = "${finalAttrs.pname}-hugoVendor";
+- inherit (finalAttrs) src sourceRoot;
++ inherit (finalAttrs) src;
+...
 - outputHash = "sha256-someOldHash=
 + outputHash = "sha256-someNewHash=
 ```
@@ -112,11 +113,9 @@ git push
 
 These can be installed manually, or automatically with [nix](https://github.com/DeterminateSystems/nix-installer?tab=readme-ov-file#the-determinate-nix-installer) by running `nix develop`:
 
-1. Install [`hugo`](https://gohugo.io/installation/) 1.27.0+extended.
+1. Install [`hugo`](https://gohugo.io/installation/) >= 1.28.0+extended.
 2. Install [`go`](https://go.dev/dl/) >= 1.22.3.
-3. Install `node` >= 20.2.0 with [nvm](https://github.com/nvm-sh/nvm).
-4. Install `pnpm` with `corepack enable`.
-5. Run `pnpm install` within `exampleSite`.
+3. Install [`tailwindcss`](https://github.com/tailwindlabs/tailwindcss/releases) >= 3.4.4.
 
 ### Common Commands
 ```sh

assets/css/main.css

@@ -9,22 +9,22 @@
   }
 
   :root {
-    --background: theme(colors.white);
-    --body: theme(colors.gray.700);
-    --bullets: theme(colors.gray.300);
-    --headings: theme(colors.gray.900);
+    --background: theme("colors.white");
+    --body: theme("colors.gray.700");
+    --bullets: theme("colors.gray.300");
+    --headings: theme("colors.gray.900");
     --link-hover: var(--body);
-    --shadow: theme(colors.gray.800);
-    --invert-background: theme(colors.neutral.800);
-    --invert-body: theme(colors.gray.300);
-    --invert-bullets: theme(colors.gray.600);
-    --invert-headings: theme(colors.white);
-    --invert-link-hover: theme(colors.gray.100);
-    --invert-shadow: theme(colors.gray.500);
-  }
-  
+    --shadow: theme("colors.gray.800");
+    --invert-background: theme("colors.neutral.800");
+    --invert-body: theme("colors.gray.300");
+    --invert-bullets: theme("colors.gray.600");
+    --invert-headings: theme("colors.white");
+    --invert-link-hover: theme("colors.gray.100");
+    --invert-shadow: theme("colors.gray.500");
+  }
+
   @media (prefers-color-scheme: dark) {
-    :root{
+    :root {
       --background: var(--invert-background);
       --body: var(--invert-body);
       --bullets: var(--invert-bullets);
@@ -34,54 +34,58 @@
     }
   }
 
-  h1, h2, h3 {
+  h1,
+  h2,
+  h3 {
     color: var(--headings);
   }
 
   h2 + *,
   h3 + * {
-    margin-top: theme(margin.0);
+    margin-top: theme("margin.0");
   }
 
   h1 {
-    font-size: theme(fontSize.2xl);
-    font-weight: theme(fontWeight.medium);
-    line-height: theme(lineHeight.8);
+    font-size: theme("fontSize.2xl");
+    font-weight: theme("fontWeight.medium");
+    line-height: theme("lineHeight.8");
   }
 
   h2 {
-    font-size: theme(fontSize.xl);
-    font-weight: theme(fontWeight.medium);
-    line-height: theme(lineHeight.7);
-    margin-bottom: theme(margin[2.5]);
+    font-size: theme("fontSize.xl");
+    font-weight: theme("fontWeight.medium");
+    line-height: theme("lineHeight.7");
+    margin-bottom: theme("margin[2.5]");
   }
 
   h3 {
-    font-size: theme(fontSize.lg);
-    font-weight: theme(fontWeight.medium);
-    line-height: theme(lineHeight.7);
+    font-size: theme("fontSize.lg");
+    font-weight: theme("fontWeight.medium");
+    line-height: theme("lineHeight.7");
   }
 
-  a, p, li{
-    font-size: theme(fontSize.sm);
-    line-height: theme(lineHeight.6);
+  a,
+  p,
+  li {
+    font-size: theme("fontSize.sm");
+    line-height: theme("lineHeight.6");
   }
 
   ul {
     list-style-type: disc;
-    margin-bottom: theme(margin.4);
-    margin-top: theme(margin.4);
+    margin-bottom: theme("margin.4");
+    margin-top: theme("margin.4");
     padding-inline-start: 22px;
 
     ul {
-      margin-bottom: theme(margin.2);
-      margin-top: theme(margin.2);
+      margin-bottom: theme("margin.2");
+      margin-top: theme("margin.2");
     }
 
     > li {
-      margin-bottom: theme(margin.1);
-      margin-top: theme(margin.1);
-      padding-inline-start: theme(padding[1.5]);
+      margin-bottom: theme("margin.1");
+      margin-top: theme("margin.1");
+      padding-inline-start: theme("padding[1.5]");
 
       &::marker {
         color: var(--bullets);
@@ -102,32 +106,35 @@
       text-decoration-line: none;
     }
 
-    h2, h3, p {
+    h2,
+    h3,
+    p {
       break-after: avoid-page;
     }
-
-    p, ul {
+
+    p,
+    ul {
       break-inside: avoid-page;
     }
   }
 }
 
 @layer components {
   .avatar {
-    aspect-ratio: theme(aspectRatio.square);
-    border-radius: theme(borderRadius.full);
+    aspect-ratio: theme("aspectRatio.square");
+    border-radius: theme("borderRadius.full");
     overflow: hidden;
     position: relative;
 
     &::after {
-      border-radius: theme(borderRadius.full);
-      box-shadow: inset 0 0 theme(inset.5) 0 var(--shadow);
+      border-radius: theme("borderRadius.full");
+      box-shadow: inset 0 0 theme("inset.5") 0 var(--shadow);
       content: "";
       display: block;
-      height: theme(height.full);
+      height: theme("height.full");
       position: absolute;
       top: 0;
-      width: theme(width.full);
+      width: theme("width.full");
     }
   }
 
@@ -139,7 +146,7 @@
     display: inline-block;
     height: 1em;
     width: 1em;
-    fill: currentColor;
+    fill: currentcolor;
     vertical-align: calc(0.5cap - 0.5em);
   }
 
@@ -154,7 +161,7 @@
   .list-as-table > li > * {
     display: table-cell;
   }
-  
+
   .list-as-table > li > ul {
     list-style-type: none;
   }

exampleSite/content/_index.md

@@ -8,18 +8,18 @@ layout: modern-hugo-resume
 <header class="mb-3 text-center md:text-left print:text-left">
 
 ![](avatar.jpg "A close-up photo of me wearing a suit and tie")
-{ class="avatar float-right hidden h-24 print:hidden md:block" sizes="256"}
+{class="avatar float-right hidden h-24 print:hidden md:block" sizes="256"}
 
 # Cody Shearer
 
 Software Developer with 3 Years of Experience in Full Stack Web and Mobile Development
-{ class="mb-1"}
+{class="mb-1"}
 
 - [![](svgs/brands/github.svg)cjshearer](https://github.com/cjshearer "My GithHub")
 - [![](svgs/brands/linkedin.svg)in/cjshearer](https://linkedin.com/in/cjshearer "My LinkedIn")
 - [![](svgs/solid/house.svg)cjshearer.dev](https://cjshearer.dev "My Website")
 - [![](svgs/solid/envelope.svg)cjshearer@live.com](mailto:cjshearer@live.com "My Email")
-{ class="*:inline-svg my-0 inline-flex w-fit flex-wrap justify-center gap-4 whitespace-nowrap ps-0 *:ps-0 [&_svg]:mr-1"}
+{class="*:inline-svg my-0 inline-flex w-fit flex-wrap justify-center gap-4 whitespace-nowrap ps-0 *:ps-0 [&_svg]:mr-1"}
 
 </header>
 
@@ -70,7 +70,7 @@ Software Developer with 3 Years of Experience in Full Stack Web and Mobile Devel
   - Sentry
   - Stripe
   - SendGrid
-{ class="max-md:list-as-table mt-0 md:float-right print:md:float-none [&>li]:list-none"}
+{class="max-md:list-as-table mt-0 md:float-right print:md:float-none [&>li]:list-none"}
 
 ## Experience
 

exampleSite/go.mod

@@ -8,5 +8,5 @@ replace github.com/cjshearer/modern-hugo-resume => ../
 
 require (
 	github.com/FortAwesome/Font-Awesome v0.0.0-20240402185447-c0f460dca7f7 // indirect
-	github.com/cjshearer/modern-hugo-resume v0.0.0-20240622205900-d5aff7eecfd0 // indirect
+	github.com/cjshearer/modern-hugo-resume v0.0.0-20240625183116-2a701eb5eb00 // indirect
 )

exampleSite/hugo.toml

@@ -7,7 +7,7 @@ languageCode = "en-us"
 enable = true
 
 [[build.cacheBusters]]
-source = "assets/watching/hugo_stats.json"
+source = "assets/notwatching/hugo_stats.json"
 target = "main.css"
 
 [markup.goldmark.renderer]
@@ -16,13 +16,14 @@ unsafe = true
 [markup.goldmark.parser]
 wrapStandAloneImageWithinParagraph = false
 
-  [markup.goldmark.parser.attribute]
-  block = true
-  title = true
+[markup.goldmark.parser.attribute]
+block = true
+title = true
 
 [[module.imports]]
 path = "github.com/cjshearer/modern-hugo-resume"
 
 [[module.mounts]]
+disableWatch = true
 source = "hugo_stats.json"
-target = "assets/watching/hugo_stats.json"
+target = "assets/notwatching/hugo_stats.json"