docs: update components docs (#338)

* docs: implement new docs version 1

* docs: refactor utils

* docs: refactor utils

* docs: run lint

* docs: enhance sidebar

* docs: enhance sidebar

.gitignore

@@ -69,4 +69,3 @@ out-tsc
 # Vitepress
 docs/.vitepress/dist
 docs/.vitepress/cache
-docs/dev/components/custom-elements.json

docs/.vitepress/config.ts

@@ -1,14 +1,12 @@
 import { defineConfig } from "vitepress";
-import nav from "./nav";
-import sidebar from "./sidebar";
-import socialLinks from "./socialLinks";
+import sidebar from "../sidebar";
+import socialLinks from "../social-links";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "Tapsi components",
   description: "A set of components based on Tapsi design system.",
   base: "/web-components/",
-  vite: {},
   head: [
     ["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],
     [
@@ -30,6 +28,5 @@ export default defineConfig({
   themeConfig: {
     sidebar,
     socialLinks,
-    nav,
   },
 });

docs/.vitepress/theme/custom.css

@@ -12,77 +12,3 @@
   gap: 12px;
   flex-wrap: wrap;
 }
-
-
-custom-element-manifest-viewer::part(container) {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-custom-element-manifest-viewer::part(label) {
-  border-radius: 4px;
-  padding: 3px 6px;
-  transition: color 0.25s, background-color 0.5s;
-  font-size: var(--vp-code-font-size);
-}
-
-custom-element-manifest-viewer::part(input) {
-  transition: all 0.3s;
-  border: 1px solid var(--vp-c-divider);
-  padding: 8px;
-  background: transparent;
-  border-radius: 8px;
-}
-
-custom-element-manifest-viewer::part(input):hover, custom-element-manifest-viewer::part(input):focus {
-  border: 1px solid var(--vp-c-brand-1);
-}
-
-custom-element-manifest-viewer::part(component-preview) {
-  background-color: #fff;
-  /*background-image: linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee);*/
-  background-size: 20px 20px;
-  background-position: 0 0, 10px 10px;
-  color: black;
-  padding: 16px;
-  min-height: 100px;
-  border-radius: 8px 8px 0 0;
-  /*border-radius: 8px 0 0 0;*/
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  /*width: 60%;*/
-  direction: rtl;
-  position: relative;
-}
-
-.vp-doc table {
-   display: table;
-  width: 100%;
-}
-
-custom-element-manifest-viewer::part(knobs) {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 24px;
-  border-radius: 0;
-  /*border-radius: 0 8px 0 0;*/
-  position: relative;
-  width: 100%;
-  /*width: 40%;*/
-  background: var(--vp-c-bg-elv);
-}
-
-custom-element-manifest-viewer::part(code) {
-  position: relative;
-  z-index: 1;
-  margin: 0;
-  padding: 20px 24px;
-  background: #0d1117;
-  overflow-x: auto;
-  font-size: var(--vp-code-font-size);
-  width: 100%;
-  border-radius: 0 0 8px 8px;
-}

docs/.vitepress/theme/index.ts

@@ -1,6 +1,5 @@
 import DefaultTheme from "vitepress/theme";
 import "../../../packages/theme/src/index.css";
-import "../../components";
 import "./custom.css";
 
 export default {

docs/components/[component].md

@@ -0,0 +1,36 @@
+---
+prev: false
+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 -->