Merge pull request #14 from Tap30/docs/add-homepage

docs(vitepress): add homepage

docs/.vitepress/config.ts

@@ -7,9 +7,13 @@ export default defineConfig({
   title: 'Tapsi Icons',
   description: 'A set of icons based on Tapsi design system.',
   base: "/icons/",
+  lastUpdated: true,
   themeConfig: {
     sidebar,
     socialLinks,
     nav,
+    footer: {
+      copyright: 'Copyright © 2024-present Tapsi Front-End Team'
+    }
   },
 });

docs/.vitepress/data/categories.json

@@ -1,82 +1,102 @@
 [
   {
     "items": ["interface", "essential"],
-    "name": "interface"
+    "name": "interface",
+    "description": "A list of interface icons."
   },
   {
     "items": ["arrow", "diagrams"],
-    "name": "arrow"
+    "name": "arrow",
+    "description": "A list of arrow icons."
   },
   {
     "items": ["brand"],
-    "name": "brand"
+    "name": "brand",
+    "description": "A list of brand icons."
   },
   {
     "items": ["building", "construction"],
-    "name": "building"
+    "name": "building",
+    "description": "A list of building icons."
   },
   {
     "items": ["car", "service", "parts", "vehicle"],
-    "name": "car"
+    "name": "car",
+    "description": "A list of car icons."
   },
   {
     "items": ["cursor", "select", "hand"],
-    "name": "cursor"
+    "name": "cursor",
+    "description": "A list of cursor icons."
   },
   {
     "items": ["disabled", "disability", "accessibility"],
-    "name": "accessibility"
+    "name": "accessibility",
+    "description": "A list of accessibility icons."
   },
   {
     "items": ["mobile", "device", "telephone", "emails", "messages", "chat"],
-    "name": "device"
+    "name": "device",
+    "description": "A list of device icons."
   },
   {
     "items": ["money", "payments", "finance"],
-    "name": "finance"
+    "name": "finance",
+    "description": "A list of finance icons."
   },
   {
     "items": ["navigation", "maps"],
-    "name": "navigation"
+    "name": "navigation",
+    "description": "A list of navigation icons."
   },
   {
     "items": ["photo", "video", "camera", "media"],
-    "name": "media"
+    "name": "media",
+    "description": "A list of media icons."
   },
   {
     "items": ["signs"],
-    "name": "signs"
+    "name": "signs",
+    "description": "A list of signs icons."
   },
   {
     "items": ["social", "medias", "rewards"],
-    "name": "social"
+    "name": "social",
+    "description": "A list of social icons."
   },
   {
     "items": ["time", "history", "calendar"],
-    "name": "time"
+    "name": "time",
+    "description": "A list of time icons."
   },
   {
     "items": ["transportation", "transport"],
-    "name": "transport"
+    "name": "transport",
+    "description": "A list of transport icons."
   },
   {
     "items": ["users", "person"],
-    "name": "person"
+    "name": "person",
+    "description": "A list of person icons."
   },
   {
     "items": ["number", "digit"],
-    "name": "number"
+    "name": "number",
+    "description": "A list of number icons."
   },
   {
     "items": ["fill", "filled"],
-    "name": "fill"
+    "name": "fill",
+    "description": "A list of fill icons."
   },
   {
     "items": ["outlined"],
-    "name": "outlined"
+    "name": "outlined",
+    "description": "A list of outlined icons."
   },
   {
     "items": ["/", "slash"],
-    "name": "slash"
+    "name": "slash",
+    "description": "A list of slash icons."
   }
 ]

docs/.vitepress/nav.ts

@@ -2,8 +2,13 @@ import { DefaultTheme } from "vitepress";
 
 export default [
   {
-    text: 'Web Components',
-    link: 'https://tap30.github.io/web-components',
-    target: '_blank',
-  }
+    text: 'Icons',
+    link: '/all',
+    target: '_self',
+  },
+  {
+    text: 'Packages',
+    link: '/package',
+    target: '_self',
+  },
 ] as DefaultTheme.NavItem[]

docs/.vitepress/sidebar.ts

@@ -16,17 +16,17 @@ const getPackages = (): DefaultTheme.SidebarItem[] => {
 export default [
   // { text: 'Getting Started', link: '/getting-started' },
   {
-    text: 'Icon Set',
-    link: '/',
+    text: 'All',
+    link: '/all',
   },
   {
     text: 'Icon Categories',
-    collapsed: true,
+    collapsed: false,
     items: getCategories(),
   },
   {
     text: 'Packages',
-    collapsed: true,
+    collapsed: false,
     items: getPackages(),
   },
 ] as DefaultTheme.SidebarItem[]

docs/.vitepress/theme/custom.css

@@ -1,2 +1,7 @@
 :root {
+  --vp-c-brand-1: #ff7733;
+  --vp-button-brand-bg: #e64917;
+  --vp-c-brand-2: #e64917;
+  --vp-badge-tip-text: #e64917;
+  --vp-badge-tip-bg: #e6491722;
 }

docs/all.md

@@ -0,0 +1,12 @@
+---
+prev: false
+next: false
+aside: false
+---
+
+<script setup>
+import Icons from './components/Icons.vue';
+</script>
+
+<Icons />
+

docs/category/[category].md

@@ -1,12 +1,22 @@
 ---
 outline: 'deep'
+aside: false
 ---
 
 <script setup>
 import Icons from '../components/Icons.vue';
+import { useData } from 'vitepress';
+
+const { page } = useData();
+
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
 
 </script>
 
+# {{capitalizeFirstLetter(page?.params?.category)}} Icons
+
 <Icons />
 
 <!-- @content -->

docs/category/[category].paths.ts

@@ -1,17 +1,22 @@
 import fs from 'fs';
 
-const packages = JSON.parse(
+const categories = JSON.parse(
   fs.readFileSync('docs/.vitepress/data/categories.json').toString(),
 ) as {
   name: string;
   title: string;
+  description: string;
   items: string[];
 }[];
 
 export default {
   paths() {
-    return packages.map((pck) => ({
-      params: { category: pck.name, items: pck.items },
+    return [...categories].map((cat) => ({
+      params: {
+        category: cat.name,
+        items: cat.items,
+        description: cat.description,
+      },
     }));
   },
 };

docs/components/Control.vue

@@ -146,7 +146,7 @@ const {selectedIcon} = defineProps({
 
 const width = ref(120);
 const height = ref(120);
-const color = ref('#5672cd');
+const color = ref('#ff7733');
 
 function toPascalCase(name) {
   return name
@@ -257,4 +257,15 @@ form:hover {
   border-color: var(--vp-c-brand-1);
 }
 
+@media (max-width: 700px) {
+  .control {
+    top: 20px;
+    right: 20px;
+    left: 20px;
+    bottom: 20px;
+    min-width: unset;
+    transform: unset;
+  }
+}
+
 </style>

docs/index.md

@@ -1,6 +1,41 @@
-<script setup>
-import Icons from './components/Icons.vue';
-</script>
+---
 
-<Icons />
+layout: home
+
+
+hero:
+
+  name: Tapsi Design System
+
+  text: Icon Set
+
+  tagline: Usable for all front-end frameworks
+
+
+  actions:
+    - theme: brand
+      text: Explore Icons
+      link: /all
+    - theme: alt
+      text: Installation
+      link: /package
+    - theme: alt
+      text: GitHub
+      link: https://github.com/Tap30/icons
+
+features:
+  - icon: ✨
+    title: Scalable
+    details: No need to define components for different frameworks for adding an icon! You only need to add your new icon and everything will be handled in the background!
+  - icon: 🗃️
+    title: Categorized Icons
+    details: You can easily find your icons based on different categories and variants.
+  - icon: 🎚️
+    title: Rich Playground
+    details: You can customize your icon and then copy the code and use it on your projects
+  - icon: 🧩
+    title: Usable Everywhere
+    details: Based on the framework you are using, you can import a package in your project and use our icons.
+
+---
 

docs/package.md

@@ -0,0 +1,6 @@
+# Packages
+
+Here is the current packages available for Tapsi icons:
+
+- [Lit](/package/lit)
+- [React](/package/react)

package.json

@@ -55,7 +55,6 @@
     "@vitejs/plugin-react": "^4.3.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "ansi-colors": "^4.1.3",
-    "cli-progress": "^3.12.0",
     "lit": "^3.1.2",
     "vue": "^3.4.27"
   }

scripts/generateConfigFile.js

@@ -1,7 +1,6 @@
 import fs from "fs";
 import path from "path";
 import {configFilePath, inputDir, outputDir} from "./constants.js";
-import cliProgress from "cli-progress";
 import colors from "ansi-colors";
 const config = {};
 
@@ -21,33 +20,31 @@ fs.readdir(inputDir, (err, files) => {
     fs.mkdirSync('dist', {recursive: true});
   }
   console.info("Generating `dist/config.json`:")
-  const bar = new cliProgress.SingleBar({
-    format: '{percentage}% ({value}/{total}) |' + colors.yellow('{bar}') + '|',
-    barCompleteChar: '\u2588',
-    barIncompleteChar: '\u2591',
-    hideCursor: true
-  }, cliProgress.Presets.shades_classic);
-  bar.start(files.length, 0);
   files.forEach((file, index) => {
-    bar.update(index + 1);
+    console.info(`[${colors.yellow(index + 1)}/${colors.yellow(files.length)}] Processing ${colors.cyan(file)}...`);
+
     const id = file.split(".")?.[0];
+
     if (file.endsWith(".svg")) {
       const svgContent = fs.readFileSync(path.join(inputDir, file), "utf8").replaceAll('\n', '');
       config[id] = {...config[id], svgContent, id}
+
     } else if (file.endsWith(".json")) {
       const jsonContent = JSON.parse(fs.readFileSync(path.join(inputDir, file), "utf8").replaceAll('\n', ''));
       if (jsonContent.categories?.length > 0) {
         config[id] = {
           ...config[id],
-          categories: jsonContent.categories.reduce((a, b) => [...a, ...(categoriesContent[b] || [])], [])
+          categories: jsonContent.categories.reduce((a, b) => [...a, ...(categoriesContent[b] || [])], []),
+          description: jsonContent.description
         }
       }
     }
   });
-  bar.stop();
 
   fs.writeFileSync(
     configFilePath,
     JSON.stringify(config, null, 2)
   );
 });
+
+console.info("✨ Done")