fix(theme): rework how the default theme must be installed

.storybook/preview.ts

@@ -11,7 +11,7 @@ import "vitepress/dist/client/theme-default/styles/components/vp-code.css";
 import "vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
 import "vitepress/dist/client/theme-default/styles/components/vp-doc.css";
 import "vitepress/dist/client/theme-default/styles/components/vp-sponsor.css";
-import "../docs/.vitepress/theme/style.css";
+import "@tsed/vitepress-theme/styles/global.css";
 import LazyLoadObserver from "@tsed/vitepress-theme/directives/lazyLoadObserver";
 import VPButton from "./mock/VPButton.vue";
 

docs/.vitepress/theme/index.ts

@@ -1,5 +1,4 @@
 // https://vitepress.dev/guide/custom-theme
-import "./style.css";
 import {DefaultTheme} from "@tsed/vitepress-theme";
 import type {Theme} from "vitepress";
 

packages/theme/.npmignore

@@ -0,0 +1,2 @@
+**/*.spec.ts
+**/*.stories.ts

packages/theme/DefaultTheme.ts

@@ -2,6 +2,7 @@
 import {h} from "vue";
 import type {Theme} from "vitepress";
 import DefaultTheme from "vitepress/theme";
+import "./styles/global.css";
 import ApiAnchorQuery from "./molecules/api-anchor/ApiAnchorQuery.vue";
 import ApiList from "./molecules/api-list/ApiList.vue";
 import GithubContributors from "./organisms/github-contributors/GithubContributors.vue";

packages/theme/organisms/warehouse/Warehouse.vue

@@ -8,9 +8,9 @@ import ClearableFilter from "../../molecules/filters/ClearableFilter.vue";
 import SortBy from "../../molecules/sort-by/SortBy.vue";
 import FilterBy from "../../molecules/filters/FilterBy.vue";
 import CardPackage from "../../molecules/card-package/CardPackage.vue";
-import {useWarehouse} from "../../composables/api/useWarehouse";
-import {useThemeConfig} from "../../composables/config/__mocks__/useThemeConfig";
-import upperFirst from "lodash/upperFirst";
+import {useWarehouse} from "../../composables/api/useWarehouse.js";
+import {useThemeConfig} from "../../composables/config/useThemeConfig";
+import {upperFirst} from "../../utils/upperFirst.js";
 
 const stats = [
   {
@@ -33,12 +33,12 @@ const {isActive, packages, fetchPackages, tags} = useWarehouse(githubProxyUrl);
 
 const category = ref("");
 const categoriesChoices = computed(() =>
-  [{label: "All", value: ""}].concat(
-    tags.value.map((tag) => ({
-      label: upperFirst(tag),
-      value: tag
-    }))
-  )
+    [{label: "All", value: ""}].concat(
+        tags.value.map((tag) => ({
+          label: upperFirst(tag),
+          value: tag
+        }))
+    )
 );
 
 const q = ref("");
@@ -75,20 +75,20 @@ const filterOptions = [
 
 const filteredPackages = computed(() => {
   return packages.value
-    .filter((plugin) => {
-      const qMatch = q.value ? plugin.name.toLowerCase().includes(q.value.toLowerCase()) : true;
-      const categoryMatch = category.value ? plugin.tags.includes(category.value) : true;
-      const typeMatch = filterType.value ? plugin.type === filterType.value : true;
+      .filter((plugin) => {
+        const qMatch = q.value ? plugin.name.toLowerCase().includes(q.value.toLowerCase()) : true;
+        const categoryMatch = category.value ? plugin.tags.includes(category.value) : true;
+        const typeMatch = filterType.value ? plugin.type === filterType.value : true;
 
-      return qMatch && categoryMatch && typeMatch;
-    })
-    .sort((a, b) => {
-      if (sort.value.value === "downloads") {
-        return sort.value.order === "asc" ? a.downloads - b.downloads : b.downloads - a.downloads;
-      } else {
-        return sort.value.order === "asc" ? a.stars - b.stars : b.stars - a.stars;
-      }
-    });
+        return qMatch && categoryMatch && typeMatch;
+      })
+      .sort((a, b) => {
+        if (sort.value.value === "downloads") {
+          return sort.value.order === "asc" ? a.downloads - b.downloads : b.downloads - a.downloads;
+        } else {
+          return sort.value.order === "asc" ? a.stars - b.stars : b.stars - a.stars;
+        }
+      });
 });
 
 const keywords = computed(() => {
@@ -111,54 +111,54 @@ fetchPackages();
     <div class="-mt-[60px]">
       <div class="relative z-10 max-w-screen-xl mb-10 px-4 mx-auto sm:px-6 lg:px-8">
         <div class="max-w-4xl mx-auto">
-          <CardStats :items="stats" />
+          <CardStats :items="stats"/>
         </div>
       </div>
     </div>
 
     <div class="flex flex-col space-y-3 mx-5">
       <div class="max-w-site-xxl m-auto">
         <div v-if="isActive" class="text-center text-4xl text-gray-darker p-5 flex items-center justify-center">
-          <LoaderCircle class="animate-spin mr-5 text-blue-active" :size="32" />
+          <LoaderCircle class="animate-spin mr-5 text-blue-active" :size="32"/>
           Loading...
         </div>
 
         <div v-else class="container px-4 pt-12 pb-8 mx-auto sm:px-0">
           <!-- Search -->
           <div class="flex sm:max-w-sm sm:mx-auto">
             <label class="relative flex-1">
-              <Search class="absolute left-4 top-3" />
+              <Search class="absolute left-4 top-3"/>
 
               <input
-                ref="searchPlugin"
-                v-model="q"
-                type="search"
-                aria-label="Search"
-                class="bg-[#F6F6F7] dark:bg-[#444e60] rounded-full w-full p-3 pl-12 text-base leading-6 placeholder-gray-700 transition duration-150 ease-in-out ring-3 ring-blue-300 focus:outline-none focus:placeholder-gray-500 sm:flex-1"
-                placeholder="Search a module (name, category, username, etc.)"
+                  ref="searchPlugin"
+                  v-model="q"
+                  type="search"
+                  aria-label="Search"
+                  class="bg-[#F6F6F7] dark:bg-[#444e60] rounded-full w-full p-3 pl-12 text-base leading-6 placeholder-gray-700 transition duration-150 ease-in-out ring-3 ring-blue-300 focus:outline-none focus:placeholder-gray-500 sm:flex-1"
+                  placeholder="Search a module (name, category, username, etc.)"
               />
             </label>
           </div>
 
           <!-- Categories -->
-          <ButtonBoxes v-model="category" :choices="categoriesChoices" />
+          <ButtonBoxes v-model="category" :choices="categoriesChoices"/>
         </div>
       </div>
       <div v-if="!isActive" class="flex flex-col items-center justify-between sm:flex-row">
-        <ClearableFilter :keywords="keywords" :count="filteredPackages.length" @clear="onClear()" />
+        <ClearableFilter :keywords="keywords" :count="filteredPackages.length" @clear="onClear()"/>
         <div class="flex gap-4">
-          <FilterBy v-model="filterType" :choices="filterOptions" label="Package type" />
-          <SortBy v-model="sort" :choices="sortOptions" />
+          <FilterBy v-model="filterType" :choices="filterOptions" label="Package type"/>
+          <SortBy v-model="sort" :choices="sortOptions"/>
         </div>
       </div>
       <div v-if="!isActive" class="grid gap-8 md:grid-cols-2 xl:grid-cols-3">
         <div
-          v-for="plugin of filteredPackages"
-          :key="plugin.name"
-          v-lazyload-observer:focus.self="true"
-          class="transition-opacity duration-500"
+            v-for="plugin of filteredPackages"
+            :key="plugin.name"
+            v-lazyload-observer:focus.self="true"
+            class="transition-opacity duration-500"
         >
-          <CardPackage v-bind="plugin" />
+          <CardPackage v-bind="plugin"/>
         </div>
       </div>
     </div>

packages/theme/package.json

@@ -6,6 +6,10 @@
   "main": "./index.ts",
   "exports": {
     ".": "./index.ts",
+    "./tailwind.preset": {
+      "import": "./tailwind.preset.ts",
+      "types": "./tailwind.preset.ts"
+    },
     "./directives/lazyLoadObserver": {
       "import": "./directives/lazyLoadObserver.ts",
       "types": "./directives/lazyLoadObserver.ts"

packages/theme/readme.md

@@ -38,142 +38,7 @@ yarn add @tsed/vitepress-theme
 
 ## Configuration
 
-To use this theme, you need to create a `style.css` file in your `.vitepress` folder.
-
-```css
-@import "@tsed/vitepress-theme/styles/tailwind.css";
-@import "./variables.css";
-@import "@tsed/vitepress-theme/styles/algolia.css";
-```
-
-Example of `variables.css`:
-
-```css
-/**
- * Customize default theme styling by overriding CSS variables:
- * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
- */
-
-/**
- * Colors
- *
- * Each colors have exact same color scale system with 3 levels of solid
- * colors with different brightness, and 1 soft color.
- *
- * - `XXX-1`: The most solid color used mainly for colored text. It must
- *   satisfy the contrast ratio against when used on top of `XXX-soft`.
- *
- * - `XXX-2`: The color used mainly for hover state of the button.
- *
- * - `XXX-3`: The color for solid background, such as bg color of the button.
- *   It must satisfy the contrast ratio with pure white (#ffffff) text on
- *   top of it.
- *
- * - `XXX-soft`: The color used for subtle background such as custom container
- *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
- *   on top of it.
- *
- *   The soft color must be semi transparent alpha channel. This is crucial
- *   because it allows adding multiple "soft" colors on top of each other
- *   to create a accent, such as when having inline code block inside
- *   custom containers.
- *
- * - `default`: The color used purely for subtle indication without any
- *   special meanings attched to it such as bg color for menu hover state.
- *
- * - `brand`: Used for primary brand colors, such as link text, button with
- *   brand theme, etc.
- *
- * - `tip`: Used to indicate useful information. The default theme uses the
- *   brand color for this by default.
- *
- * - `warning`: Used to indicate warning to the users. Used in custom
- *   container, badges, etc.
- *
- * - `danger`: Used to show error, or dangerous message to the users. Used
- *   in custom container, badges, etc.
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-c-default-1: var(--vp-c-gray-1);
-  --vp-c-default-2: var(--vp-c-gray-2);
-  --vp-c-default-3: var(--vp-c-gray-3);
-  --vp-c-default-soft: var(--vp-c-gray-soft);
-
-  --vp-c-brand-1: var(--vp-c-indigo-1);
-  --vp-c-brand-2: var(--vp-c-indigo-2);
-  --vp-c-brand-3: var(--vp-c-indigo-3);
-  --vp-c-brand-soft: var(--vp-c-indigo-soft);
-
-  --vp-c-tip-1: var(--vp-c-brand-1);
-  --vp-c-tip-2: var(--vp-c-brand-2);
-  --vp-c-tip-3: var(--vp-c-brand-3);
-  --vp-c-tip-soft: var(--vp-c-brand-soft);
-
-  --vp-c-warning-1: var(--vp-c-yellow-1);
-  --vp-c-warning-2: var(--vp-c-yellow-2);
-  --vp-c-warning-3: var(--vp-c-yellow-3);
-  --vp-c-warning-soft: var(--vp-c-yellow-soft);
-
-  --vp-c-danger-1: var(--vp-c-red-1);
-  --vp-c-danger-2: var(--vp-c-red-2);
-  --vp-c-danger-3: var(--vp-c-red-3);
-  --vp-c-danger-soft: var(--vp-c-red-soft);
-}
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-button-brand-border: transparent;
-  --vp-button-brand-text: var(--vp-c-white);
-  --vp-button-brand-bg: var(--vp-c-brand-3);
-  --vp-button-brand-hover-border: transparent;
-  --vp-button-brand-hover-text: var(--vp-c-white);
-  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
-  --vp-button-brand-active-border: transparent;
-  --vp-button-brand-active-text: var(--vp-c-white);
-  --vp-button-brand-active-bg: var(--vp-c-brand-1);
-  --theme-transition-duration: 0.2s;
-}
-
-/**
- * Component: Home
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #0075db 30%, #41d1ff);
-
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
-  --vp-home-hero-image-filter: blur(44px);
-}
-
-@media (min-width: 640px) {
-  :root {
-    --vp-home-hero-image-filter: blur(56px);
-  }
-}
-
-@media (min-width: 960px) {
-  :root {
-    --vp-home-hero-image-filter: blur(68px);
-  }
-}
-
-/**
- * Component: Custom Block
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-custom-block-tip-border: transparent;
-  --vp-custom-block-tip-text: var(--vp-c-text-1);
-  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
-  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
-}
-```
-Then, in your config.mts file, you can import the theme and extend it:
+In your config.mts file, you can import the theme and extend it:
 
 ```ts
 import "./style.css";
@@ -186,6 +51,36 @@ export default {
 } satisfies Theme;
 ```
 
+Then, create a `tailwind.config.ts` configuration file:
+
+```ts
+import type {Config} from "tailwindcss";
+import {tailwindPreset} from "@tsed/vitepress-theme/tailwind.preset";
+
+const config = {
+  presets: [tailwindPreset as unknown as Config],
+  darkMode: "class",
+  content: [
+    "./docs/.vitepress/**/*.{js,ts,vue}",
+    "./docs/.vitepress/themes/**/*.{js,ts,vue}",
+    "./packages/theme/**/*.{js,ts,vue}",
+    "./docs/**/*.md"
+  ],
+  safelist: [
+    {pattern: /^bg-/},
+    {pattern: /^text-/},
+    {pattern: /^m-/},
+    {pattern: /^mx-/},
+    {pattern: /^p-/},
+    {pattern: /^px-/},
+    {pattern: /^gap-/},
+    {pattern: /^shadow-/}
+  ]
+} satisfies Config;
+
+export default config;
+```
+
 ## Contributors
 
 Please read [contributing guidelines here](https://github.com/tsedio/tsed-website/CONTRIBUTING.md).

packages/theme/styles/base.css

@@ -0,0 +1,28 @@
+
+.reset-list,
+.vp-doc .reset-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.vp-doc .reset-list li + li {
+  margin: 0;
+}
+
+.reset-link,
+.vp-doc .reset-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.VPHomeHero {
+  @apply bg-gray-100 dark:bg-gray-700 mb-10;
+}
+
+.box .icon {
+  background: var(--vp-c-indigo-1);
+  @apply text-white dark:text-black;
+}
+
+

packages/theme/styles/global.css

@@ -0,0 +1,4 @@
+@import "./variables.css";
+@import "./tailwind.css";
+@import "./base.css";
+@import "./algolia.css";