Init PetalNotes

.github/CODEOWNERS

@@ -24,5 +24,5 @@
 eslint.config.ts  @lishaduck
 package.json      @lishaduck
 pnpm-lock.yaml    @lishaduck
-tsconfig.*json    @lishaduck
+tsconfig.json    @lishaduck
 vite.config.ts    @lishaduck

.github/dependabot.yaml

@@ -15,7 +15,6 @@ updates:
     groups:
       lint:
         patterns:
-          - "@eslint-types/*"
           - "@sherifforg/*"
           - "eslint*"
       commitlint:

.github/workflows/ci.yaml

@@ -58,11 +58,12 @@ jobs:
           key: ${{ runner.os }}-turbo-${{ github.sha }}
           restore-keys: |
             ${{ runner.os }}-turbo-
-          # fetch registry metadata
       - name: 🎾 Fetch package metadata
         run: pnpm fetch
       - name: 📦 Install dependencies
         run: pnpm install --frozen-lockfile --offline
+      - name: 🎭 Install browser
+        run: pnpm dlx playwright install --with-deps
       - name: 🌐 Disable analytics
         run: pnpm exec turbo telemetry disable
       - name: 🔨 Build

.gitignore

@@ -80,18 +80,19 @@ web_modules/
 !.yarn/versions
 .pnp.*
 
-# dotenv environment variable files
+# Env
 .env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
+.env.*
+!.env.example
+!.env.test
+.envrc
 
 # Vite bundler config
 dev-dist
 build
 types
-vite.config.ts.timestamp-*.mjs
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
 
 # parcel-bundler cache (https://parceljs.org/)
 .parcel-cache
@@ -133,6 +134,16 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
-
 # Turborepo
 .turbo
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+.svelte-kit
+build
+
+test-results
+*storybook.log

.npmrc

@@ -1,3 +1,4 @@
 auto-install-peers=true
 strict-peer-dependencies=true
 disallow-workspace-cycles=true
+engine-strict=true

.prettierrc

@@ -1,17 +1,24 @@
 {
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "trailingComma": "all",
   "singleQuote": false,
   "semi": true,
   "tabWidth": 2,
   "useTabs": false,
   "endOfLine": "lf",
+  "experimentalTernaries": true,
   "overrides": [
     {
       "files": [".prettierrc"],
       "options": {
         "parser": "json"
       }
+    },
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
     }
-  ],
-  "experimentalTernaries": true
+  ]
 }

.vscode/extensions.json

@@ -7,6 +7,12 @@
     "webhint.vscode-webhint",
     "christian-kohler.npm-intellisense",
     "davidanson.vscode-markdownlint",
-    "swellaby.node-pack"
+    "swellaby.node-pack",
+    "svelte.svelte-vscode",
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer",
+    "vitest.explorer",
+    "inlang.vs-code-extension",
+    "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/settings.json

@@ -2,20 +2,37 @@
   "eslint.useFlatConfig": true,
   "eslint.workingDirectories": [
     "apps/gpa-calculator",
+    "apps/petal-notes",
     "apps/phs-map",
     "packages/deputy"
   ],
+  "eslint.validate": ["javascript", "typescript", "svelte"],
   "files.trimTrailingWhitespace": true,
   "markdownlint.config": {
     "MD028": false,
     "MD025": {
       "front_matter_title": ""
     }
   },
-  "cSpell.words": ["fontawesome", "fortawesome", "pathfinding", "Xmark"],
+  "cSpell.enabledFileTypes": {
+    "*": true,
+    "javascript": false,
+    "typescript": false,
+    "svelte": false
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.sortImports": "never"
   },
-  "commitlint.config.file": "commitlint.config.js"
+  "commitlint.config.file": "commitlint.config.js",
+  "svelte.enable-ts-plugin": true,
+
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[css][javascript][json][markdown][svelte][tailwindcss][typescript][yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

apps/gpa-calculator/index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width" />
     <title>GPA Calculator</title>
     <script type="module" src="/src/script.ts"></script>
-    <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body class="bg-[url('/bground.png')]" onload="startApp()">
     <!-- The overlay -->
@@ -17,36 +16,36 @@
       >
 
       <!-- Overlay content -->
-      <form class="overlay-content text-white flex flex-col">
-        <p class="text-white text-sm mt-4">These actions refresh the page.</p>
+      <form class="overlay-content flex flex-col text-white">
+        <p class="mt-4 text-sm text-white">These actions refresh the page.</p>
         <button
-          class="text-white m-2"
+          class="m-2 text-white"
           type="submit"
           id="clearDataButton"
           onclick="clearData()"
         >
           Clear Grade Data
         </button>
-        <button class="text-white m-2" type="submit" onclick="clearAll()">
+        <button class="m-2 text-white" type="submit" onclick="clearAll()">
           Clear All Site Data
         </button>
       </form>
     </div>
 
     <div class="main">
       <div
-        class="grid grid-cols-6 gap-4 lg:w-1/3 lg:p-2 p-8 bg-black text-white border borderwhite border-t-0 border-l-0 border-r-0 border-b-1"
+        class="border-b-1 grid grid-cols-6 gap-4 border border-l-0 border-r-0 border-t-0 bg-black p-8 text-white lg:w-1/3 lg:p-2"
       >
         <button
           type="button"
           onclick="toggleNav(true)"
-          class="pb-8 text-xl text-white rounded-full w-8 h-8"
+          class="h-8 w-8 rounded-full pb-8 text-xl text-white"
         >
           ☰
         </button>
 
         <h5
-          class="col-start-2 col-span-4 align-middle text-center text-3xl"
+          class="col-span-4 col-start-2 text-center align-middle text-3xl"
           id="gradeLvl"
         >
           Middle School
@@ -68,9 +67,9 @@
     </div>
 
     <header id="myHeader"></header>
-    <div class="lg:pb-8 lg:flex h-full text-white">
+    <div class="h-full text-white lg:flex lg:pb-8">
       <div
-        class="basis-1/3 lg:rounded-br-lg lg:px-10 lg:pt-8 p-8 bg-black lg:h-screen"
+        class="basis-1/3 bg-black p-8 lg:h-screen lg:rounded-br-lg lg:px-10 lg:pt-8"
       >
         <h5>How to use!</h5>
         <p id="Directions">
@@ -87,23 +86,23 @@ <h5>How to use!</h5>
             type="number"
             placeholder="Number of Classes"
             id="numOfClasses"
-            class="text-black rounded-sm mt-3 pl-1"
+            class="rounded-xs mt-3 pl-1 text-black"
           />
           <button
             onclick="classAmount()"
-            class="text-black px-1 rounded-sm"
+            class="rounded-xs px-1 text-black"
             type="submit"
           >
             Submit
           </button>
         </form>
       </div>
 
-      <div class="lg:w-2/3 lg:px-16 px-4 lg:p-8 p-4" id="c">
+      <div class="p-4 px-4 lg:w-2/3 lg:p-8 lg:px-16" id="c">
         <h5>Grades:</h5>
         <div id="temp1"></div>
         <div
-          class="lg:drop-shadow-2xl lg:fixed static lg:right-16 lg:bottom-16 p-4 bg-black rounded-lg text-white"
+          class="static rounded-lg bg-black p-4 text-white lg:fixed lg:bottom-16 lg:right-16 lg:drop-shadow-2xl"
         >
           <h2 id="gpa">No Data</h2>
         </div>

apps/gpa-calculator/package.json

@@ -22,13 +22,12 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite --open",
-    "typecheck:extra": "tsc -p tsconfig.eslint.json",
-    "typecheck:src": "tsc",
-    "lint": "eslint . --report-unused-disable-directives --max-warnings=0",
+    "typecheck": "tsc",
+    "lint": "eslint . --max-warnings=0",
     "lint:fix": "pnpm run lint --fix"
   },
   "browserslist": [
-    "defaults and fully supports es6-module"
+    "defaults"
   ],
   "dependencies": {
     "html-template-tag": "^4.1.1",
@@ -39,6 +38,7 @@
   },
   "devDependencies": {
     "@psdtools/tsconfig": "workspace:^",
+    "@tailwindcss/vite": "4.0.0",
     "@total-typescript/ts-reset": "^0.6.1",
     "@vite-pwa/assets-generator": "^0.2.6",
     "browserslist": "^4.24.4",
@@ -48,8 +48,9 @@
     "fontaine": "^0.5.0",
     "jiti": "^2.4.2",
     "lightningcss": "^1.29.1",
+    "tailwindcss": "4.0.0",
     "typescript": "~5.7.3",
-    "vite": "^6.0.7",
+    "vite": "^6.0.11",
     "vite-plugin-html-minifier": "^1.0.5",
     "vite-plugin-pwa": "^0.21.1",
     "workbox-build": "^7.3.0",

apps/gpa-calculator/src/script.ts

@@ -117,11 +117,11 @@ function createCourse(num: number): void {
   // creates html elements in the courses class
   document.querySelector(`div#${tempElementId}`)!.innerHTML = html`<div
       oninput="loadGpa();"
-      class="pt-4 pb-4 lg:text-2xl text-lg"
+      class="pb-4 pt-4 text-lg lg:text-2xl"
     >
       <div id="input-con-div">
         <input
-          class="hover:scale-105 w-36 placeholder-white blacktxt"
+          class="blacktxt w-36 placeholder-white hover:scale-105"
           placeholder="Class ${stringNum}:"
           oninput="loadGpa();"
           id="cl${stringNum}txt"
@@ -130,7 +130,7 @@ function createCourse(num: number): void {
         />
         <span class="float-right" id="typeId${stringNum}">
           <form>
-            <select class="hover:scale-105 blacktxt" id="cltyp${stringNum}">
+            <select class="blacktxt hover:scale-105" id="cltyp${stringNum}">
               <option value="1">No-Weight</option>
               <option value="2">Honors</option>
             </select>
@@ -142,12 +142,12 @@ function createCourse(num: number): void {
           min="0"
           max="4"
           value="4"
-          class="hover:scale-105 slider float-right w-1/2"
+          class="slider float-right w-1/2 hover:scale-105"
           id="slide${stringNum}"
           oninput="document.querySelector('#cl${stringNum}').value = document.querySelector('#slide${stringNum}').value;loadGpa();"
         />
         <select
-          class="hover:scale-105 blacktxt float-right appearance-none"
+          class="blacktxt float-right appearance-none hover:scale-105"
           oninput="document.querySelector('#slide${stringNum}').value = document.querySelector('#cl${stringNum}').value;loadGpa();"
           id="cl${stringNum}"
         >

apps/gpa-calculator/src/styles/global.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 html,
 body {
   height: 100%;
@@ -11,8 +13,7 @@ body {
 }
 
 body {
-  font-family: Norwester, "Norwester fallback", Verdana, Geneva, Tahoma,
-    sans-serif;
+  font-family: Norwester, "Norwester fallback";
 }
 
 button {

apps/gpa-calculator/vite.config.ts

@@ -1,6 +1,6 @@
+import tailwindcss from "@tailwindcss/vite";
 import browserslist from "browserslist";
 import browserslistToEsbuild from "browserslist-to-esbuild";
-import { FontaineTransform } from "fontaine";
 import { browserslistToTargets } from "lightningcss";
 import { defineConfig } from "vite";
 import htmlMinifier from "vite-plugin-html-minifier";
@@ -27,10 +27,13 @@ export default defineConfig({
     transformer: "lightningcss",
   },
   plugins: [
-    FontaineTransform.vite({
-      fallbacks: ["Verdana", "Geneva", "Tahoma", "sans-serif"],
-      resolvePath: (path) => new URL(`.${path}`, import.meta.url),
-    }),
+    tailwindcss(),
+    // See unjs/fontaine#446.
+    // FontaineTransform.vite({
+    //   fallbacks: ["Verdana", "Geneva", "Tahoma", "sans-serif"],
+    //   // Convert an absolute paths to be relative to the root.
+    //   resolvePath: (path) => new URL(`.${path}`, import.meta.url),
+    // }),
     htmlMinifier({
       minify: true,
     }),