Add a page about themes, and fix a few issues (#44)

adam-subframe · web-flow · commit 9dfb0ec6e301 · 2025-05-27T12:58:20.000-07:00
diff --git a/packages/docs/docs.json b/packages/docs/docs.json
@@ -29,6 +29,7 @@
         "pages": [
           "introduction",
           "installation",
+          "theme",
           "fonts",
           "faq",
           {
diff --git a/packages/docs/export-to-cursor.mdx b/packages/docs/export-to-cursor.mdx
@@ -84,7 +84,7 @@ To use them:
   # Additional Resources 
 
   - TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html
-  - TailwindCSS Documentation: https://v3.tailwindcss.com/docs/installation
+  - TailwindCSS Documentation: https://v3.tailwindcss.com/docs/installation/using-postcss
   - React Documentation: https://react.dev/reference/react
   - Supabase Documentation: https://supabase.com/docs
   - Subframe Help: https://help.subframe.com/en/collections/9444971-developing-with-subframe
diff --git a/packages/docs/fonts.mdx b/packages/docs/fonts.mdx
@@ -6,14 +6,14 @@ Make sure you've first [installed Subframe](/installation).
 
 To ensure the right fonts load in your development environment you'll need to add a snippet similar to the following to your `<head>` tag:
 
+<Note>
+  Find the exact snippet needed to load the fonts for your project [here](https://app.subframe.com/library?component=theme&showInstallFontsModal=true).
+</Note>
+
 ```html index.html {2-4}
 <head>
   <link rel="preconnect" href="https://fonts.googleapis.com"/>
   <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
 </head>
-```
-
-<Note>
-  Find the exact snippet needed to load the fonts for your project [here](https://app.subframe.com/library?component=theme&showInstallFontsModal=true).
-</Note>
+```
diff --git a/packages/docs/framework-guides/vite.mdx b/packages/docs/framework-guides/vite.mdx
@@ -25,7 +25,7 @@ Run the following command in the root of your repository to install Subframe and
 </CodeGroup>
 
 ### Configure Vite to use import aliases
-1. Configure the `compilerOptions` in the `tsconfig.app.json` file so Typescript understand your import aliases.
+1. Configure the `compilerOptions` in the `tsconfig.app.json` file so Typescript understands your import aliases.
 
 <CodeGroup>
 ```json tsconfig.app.json {3-8}
@@ -57,24 +57,26 @@ Run the following command in the root of your repository to install Subframe and
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "noFallthroughCasesInSwitch": true,
-        "noUncheckedSideEffectImports": true+
+        "noUncheckedSideEffectImports": true
     },
     "include": ["src"]
 }
 ```
 </CodeGroup>
 
-2. Update `vite.config.ts` so Vite can resolve paths without error:
+2. Run `npm install -D @types/node` and then update `vite.config.ts` so Vite can resolve paths without error:
+
 <CodeGroup>
-```tsx vite.config.ts {6-10}
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+```tsx vite.config.ts {7-11}
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import { resolve } from "node:path"
 
 export default defineConfig({
     plugins: [react()],
     resolve: {
         alias: {
-            "@/*": "./src/*"
+            "@": resolve(__dirname, "./src"),
         }
     }
 })
diff --git a/packages/docs/theme.mdx b/packages/docs/theme.mdx

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@`
`29`	`29`	`"pages": [`
`30`	`30`	`"introduction",`
`31`	`31`	`"installation",`
	`32`	`+ "theme",`
`32`	`33`	`"fonts",`
`33`	`34`	`"faq",`
`34`	`35`	`{`