Add tailwindcss.

2023-12-13 15:43:47 -07:00 · 2023-12-13 15:43:47 -07:00 · a3c63511d7
parent 0995870b95
commit a3c63511d7
7 changed files with 30 additions and 18 deletions
--- a/.githooks/pre-commit
+++ b/.githooks/pre-commit
--- a/flake.nix
+++ b/flake.nix
@ -26,15 +26,18 @@
            pname = "portfolio";
            version = "0.1.0";
            src = ./.;
-            npmDepsHash = "sha256-eGfiDf/BKQcGhwGvmqpHTQNkAfiKSSPIfrmrPsGyOHw=";
+            npmDepsHash = "sha256-Vx9NOJfk4sF2MMy/x0mJ0SINqWgx5oKmc8XOhi2vu6I";
+            forceEmptyCache = true;

            # Needed to properly invoke npm run build.
-            nativeBuildInputs = [ pkgs.typescript ];
+            nativeBuildInputs = with pkgs; [
+              nodePackages.tailwindcss
+              typescript
+            ];

            installPhase = ''
              mkdir $out
-              cp src/index.html $out
-              cp dist/main.js $out
+              cp -a dist/* $out
            '';
          };

@ -45,6 +48,7 @@
          packages = with pkgs; [
            nodePackages.prettier
            nodePackages.typescript-language-server
+            nodePackages.tailwindcss
            nodejs
            prefetch-npm-deps
            typescript
--- a/package-lock.json
+++ b/package-lock.json
@ -7,15 +7,7 @@
    "": {
      "name": "portfolio",
      "version": "0.1.0",
-      "license": "ISC",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      }
-    },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "license": "ISC"
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -4,14 +4,11 @@
  "description": "",
  "main": "main.js",
  "scripts": {
-    "build": "tsc",
+    "build": "tsc && tailwindcss -i ./src/main.css -o ./dist/main.css && cp ./src/index.html ./dist/index.html",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "lodash": "^4.17.21"
-  }
+  "license": "ISC"
 }
--- a/src/index.html
+++ b/src/index.html
@ -4,10 +4,17 @@
    <meta charset="utf-8" />
    <meta name="description" content="Joshua Potter portfolio" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link phx-track-static rel="stylesheet" href="./main.css" />
    <script defer type="text/javascript" src="./main.js">
    </script>
  </head>
  <body>
+    <header class="flex">
+      <h1 class="grow">Joshua Potter</h1>
+      Github
+      Zotero
+      Linkedin

+    </header>
  </body>
 </html>
--- a/src/main.css
+++ b/src/main.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["src/**/*.{html,ts}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+