docs(vitepress): add icons (#339)

* docs: add icons to vitepress doc * refactor(docs): rename the function of getting sidebar item in vitepress * fix: remove single icon pages * feat: add modal view for icons * fix: make icons md file prettier * refactor: break icon grid component into multiple methods * fix: resolve comments * fix: revert changes * refactor: icon grid * refactor: getSvg
Tap30 · Feb 5, 2025 · 7edb4f0 · 7edb4f0
1 parent 64d4f99
commit 7edb4f0
Show file tree

Hide file tree

Showing 13 changed files with 599 additions and 117 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -28,10 +28,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0 
+          fetch-depth: 0
       - uses: pnpm/action-setup@v3
         with:
-          version: 9 
+          version: 9
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
@@ -41,8 +41,8 @@ jobs:
         uses: actions/configure-pages@v4
       - name: Install dependencies
         run: pnpm install
-      - name: Analyze 
-        run: pnpm analyze 
+      - name: Building Packages
+        run: pnpm packages:build
       - name: Build Docs
         run: pnpm docs:build
       - name: Upload artifact
@@ -60,4 +60,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -13,6 +13,37 @@
   flex-wrap: wrap;
 }
 
+#usage {
+  background: var(--vp-c-bg-soft);
+  padding: 18px;
+  border-radius: 8px;
+  overflow: auto;
+  font-size: 14px;
+}
+
+#usage li {
+  display: flex;
+  align-items: center;
+}
+
+:not(.dark) #usage pre span {
+  color: var(--shiki-light, inherit);
+}
+
+.dark #usage pre span {
+  color: var(--shiki-dark, inherit);
+}
+
+#usage pre {
+  margin: 0;
+  flex-shrink: 0;
+}
+
+#usage strong {
+  width: 90px;
+  flex-shrink: 0;
+}
+
 .table-wrapper {
   width: 100%;
   overflow: auto;
@@ -22,3 +53,51 @@
   min-width: 688px;
   display: table;
 }
+
+.modal-overlay {
+  position: fixed;
+  background: var(--vp-backdrop-bg-color);
+  backdrop-filter: blur(4px);
+
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 240ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-overlay.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.modal {
+  overflow: auto;
+  background: var(--vp-c-bg);
+  padding: 0 30px 30px;
+  max-width: 90dvw;
+  width: 500px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 101;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 240ms;
+  border-radius: 16px;
+}
+
+.modal.open {
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+  opacity: 1;
+}
+
diff --git a/docs/components/[component].md b/docs/components/[component].md
@@ -4,33 +4,4 @@ next: false
 outline: "deep"
 ---
 
-<style>
-#usage {
-  background: var(--vp-c-bg-soft);
-  padding: 18px;
-  border-radius: 8px;
-  overflow: auto;
-font-size: 14px;
-}
-#usage li {
-  display: flex;
-  align-items: center;
-}
-:not(.dark) #usage pre span {
-    color: var(--shiki-light, inherit);
-}
-.dark #usage pre span {
-    color: var(--shiki-dark, inherit);
-}
-#usage pre {
-  margin: 0;
-  flex-shrink: 0;
-}
-#usage strong {
-  width: 90px;
-
-  flex-shrink: 0;
-}
-</style>
-
 <!-- @content -->
diff --git a/docs/components/[component].paths.ts b/docs/components/[component].paths.ts
@@ -5,7 +5,13 @@ import {
   type Metadata,
 } from "../../internals/doc-helpers/types.ts";
 import { getFileMeta } from "../../scripts/utils.ts";
-import { codify, tabulateData } from "../utils/md.ts";
+import {
+  codify,
+  getFormattedImportUsageString,
+  getFormattedTagUsageString,
+  getUsageSectionMarkdown,
+  tabulateData,
+} from "../utils/markdown.ts";
 
 export default {
   paths() {
@@ -43,7 +49,13 @@ const getComponentMarkdown = (component: Component) => {
 
     res += `${component.summary}\n`;
 
-    res += getUsageMarkdown(component);
+    res += getUsageSectionMarkdown([
+      [
+        "Import",
+        getFormattedImportUsageString(component.importPaths.webComponents),
+      ],
+      ["Tag", getFormattedTagUsageString(component.tagName)],
+    ]);
 
     res += getMembersMarkdown(component);
 
@@ -95,19 +107,6 @@ ${slots
   return res;
 };
 
-const getUsageMarkdown = (component: Component) => {
-  let res = "";
-
-  res += "\n<ul id='usage'>\n";
-
-  res += `<li><strong>Import</strong><pre><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span> <span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"${component.importPaths.webComponents}"</span>;</pre></li>`;
-  res += `<li><strong>Tag</strong><pre>&lt;<span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">${component.tagName}</span>&gt;&lt;/<span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">${component.tagName}</span>&gt;</pre></li>`;
-
-  res += "\n</ul>\n";
-
-  return res;
-};
-
 const getMembersMarkdown = (component: Component) => {
   const members = component.members || [];
   let res = "";

diff --git a/docs/icons.md b/docs/icons.md
@@ -0,0 +1,113 @@
+---
+prev: false
+next: false
+outline: false
+---
+
+<style>
+
+#icon-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.icons-search-input {
+  max-width: 200px;
+  display: flex;
+  height: 60px;
+  border-radius: 8px;
+  padding: 0 8px;
+  background-color: var(--vp-c-bg-alt);
+  margin-left: 20px;
+}
+
+.DocSearch-MagnifierLabel {
+  color: unset;
+}
+
+.DocSearch-Input {
+  font-size: 1em;
+  height: 100%;
+  outline: none;
+  padding: 0 0 0 8px;
+  width: 80%;
+}
+
+#icons-grid {
+  margin-top: 50px;
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.icon-item {
+  background-color: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-1);
+  height: 36px;
+  width: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  padding: 6px;
+}
+
+.icon-item svg {
+ color: currentcolor;
+  fill: currentcolor;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.tapsi-icon {
+  height: 24px;
+  width: 24px;
+  fill: currentColor;
+}
+
+#icon-wrapper {
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 50px;
+  margin-top: 1rem;
+}
+
+#icon-wrapper svg {
+  width: 100%;
+  height: 100%;
+  max-width: 100px;
+  max-height: 100px;
+}
+
+</style>
+
+<script setup>
+import './internals/components/DocIconGrid';
+</script>
+
+# Icons
+
+## Properties 
+
+<div class="table-wrapper">
+
+
+| Name       | Description                                                                                                                                | Default Value   |
+|------------|--------------------------------------------------------------------------------------------------------------------------------------------|-----------------|
+| `viewbox`  | The viewBox of the SVG. Allows you to redefine what the coordinates without units mean inside an SVG element.                              | `0 0 24 24`     |
+| `title`    | Provides a human-readable title for the element that contains it. [More Info](https://www.w3.org/TR/SVG-access/#Equivalent)               | -               |
+| `size`     | The size of the icon. If set to `"auto"`, the icon will get the parent's width and height.                                                | `"auto"`        |
+
+</div>
+
+## Explore Icons
+
+<doc-icon-grid></doc-icon-grid>