remove components library

packages/canvas/package.json

@@ -7,12 +7,9 @@
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
     "vite": "vite",
-    "vue-tsc": "vue-tsc",
-    "codegen:web-types": "vue-docgen-web-types --configFile web-types.config.json",
-    "vue-docgen-web-types": "vue-docgen-web-types"
+    "vue-tsc": "vue-tsc"
   },
   "dependencies": {
-    "@digital-garden/components": "workspace:^",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },
@@ -23,11 +20,10 @@
     "cssnano": "^6.1.0",
     "postcss": "^8.4.35",
     "postcss-load-config": "^5.0.3",
+    "postcss-nested": "^6.0.1",
     "tailwindcss": "^3.4.1",
     "typescript": "~5.4.2",
     "vite": "^5.1.6",
-    "vue-docgen-web-types": "^0.1.8",
     "vue-tsc": "^2.0.6"
-  },
-  "web-types": "./web-types.json"
+  }
 }

packages/canvas/src/digital-garden/DigitalGarden.vue → packages/canvas/src/DigitalGarden/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import dark from './dark.png';
 import light from './light.png';
+import CenteredLayout from '@/shared/layouts/CenteredLayout/index.vue';
 </script>
 
 <template>

packages/canvas/src/home/Home.vue → packages/canvas/src/Home/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { routeToName } from '@/home/route.ts';
+import { routeToName } from './index.meta.ts';
+import CenteredLayout from '@/shared/layouts/CenteredLayout/index.vue';
 </script>
 
 <template>

packages/canvas/src/thoughts-on-modern-framework-features/ThoughtsOnModernFrameworkFeatures.vue → packages/canvas/src/ThoughtsOnModernFrameworkFeatures/index.vue

@@ -3,6 +3,7 @@ import angularLogo from './angular-logo.png';
 import reactLogo from './react-logo.svg';
 import spiderManTriple from './spider-man-triple.jpg';
 import vueLogo from './vue-logo.png';
+import CenteredLayout from '@/shared/layouts/CenteredLayout/index.vue';
 </script>
 
 <template>

packages/canvas/src/typescript-monorepos-are-a-mess/TypescriptMonoreposAreAMess.vue → packages/canvas/src/TypescriptMonoreposAreAMess/index.vue

@@ -5,6 +5,7 @@ import tsLogoDark from './ts-logo-dark.svg';
 import tsLogo from './ts-logo.svg';
 import yarnLogoDark from './yarn-logo-dark.svg';
 import yarnLogo from './yarn-logo.svg';
+import CenteredLayout from '@/shared/layouts/CenteredLayout/index.vue';
 
 // bg-zinc-100 -> #f4f4f5
 // bg-zinc-900 -> #18181b

packages/canvas/src/main.ts

@@ -1,19 +1,16 @@
 import './index.css';
 
-import DigitalGarden from '@/digital-garden/DigitalGarden.vue';
-import Home from '@/home/Home.vue';
-import { Route, routeToName } from '@/home/route.ts';
-import ThoughtsOnModernFrameworkFeatures from '@/thoughts-on-modern-framework-features/ThoughtsOnModernFrameworkFeatures.vue';
-import TypescriptMonoreposAreAMess from '@/typescript-monorepos-are-a-mess/TypescriptMonoreposAreAMess.vue';
-import components from '@digital-garden/components';
+import DigitalGarden from '@/DigitalGarden/index.vue';
+import { Route, routeToName } from '@/Home/index.meta.ts';
+import Home from '@/Home/index.vue';
+import ThoughtsOnModernFrameworkFeatures from '@/ThoughtsOnModernFrameworkFeatures/index.vue';
+import TypescriptMonoreposAreAMess from '@/TypescriptMonoreposAreAMess/index.vue';
 import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import App from './App.vue';
 
 const app = createApp(App);
 
-app.use(components);
-
 app.use(
   createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),

packages/components/src/layout/CenteredLayout/CenteredLayout.vue → packages/canvas/src/shared/layouts/CenteredLayout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <main
     class="min-w-dvw min-h-dvh flex items-center justify-center bg-slate-50 dark:bg-slate-900">
-    <slot></slot>
+    <slot />
   </main>
 </template>

packages/canvas/tailwind.config.ts

@@ -1,11 +1,7 @@
 import type { Config } from 'tailwindcss';
 
 export default {
-  content: [
-    './index.html',
-    './src/**/*.{js,ts,jsx,tsx,vue}',
-    '../components/src/**/*.{js,ts,jsx,tsx,vue}',
-  ],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
   theme: {
     extend: {},
   },

packages/canvas/tsconfig.json

@@ -35,8 +35,7 @@
     /* Misc */
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "@digital-garden/components": ["../components/src/index.ts"]
+      "@/*": ["src/*"]
     }
   },
   "include": ["src"]

packages/canvas/vite.config.mjs

@@ -8,10 +8,6 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@digital-garden/components': new URL(
-        '../components/src/index.ts',
-        import.meta.url,
-      ).pathname,
     },
   },
 });