cleanup

MyApp.Client/components.d.ts

@@ -7,11 +7,13 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    AppBreadcrumb: typeof import('./src/components/AppBreadcrumb.vue')['default']
-    AppPage: typeof import('./src/components/AppPage.vue')['default']
+    Author: typeof import('./src/components/Author.vue')['default']
+    AuthorLinks: typeof import('./src/components/AuthorLinks.vue')['default']
+    BlogPosts: typeof import('./src/components/BlogPosts.vue')['default']
+    BlogTitle: typeof import('./src/components/BlogTitle.vue')['default']
+    FollowLinks: typeof import('./src/components/FollowLinks.vue')['default']
     GettingStarted: typeof import('./src/components/GettingStarted.vue')['default']
-    HelloApi: typeof import('./src/components/HelloApi.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    MarkdownComponent: typeof import('./src/components/MarkdownComponent.vue')['default']
     MarkdownPage: typeof import('./src/components/MarkdownPage.vue')['default']
     NavFooter: typeof import('./src/components/NavFooter.vue')['default']
     NavHeader: typeof import('./src/components/NavHeader.vue')['default']
@@ -21,5 +23,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     ShellCommand: typeof import('./src/components/ShellCommand.vue')['default']
     SrcLink: typeof import('./src/components/SrcLink.vue')['default']
+    SrcVuePage: typeof import('./src/components/SrcVuePage.vue')['default']
+    VideoGroup: typeof import('./src/components/VideoGroup.vue')['default']
   }
 }

MyApp.Client/package.json

@@ -24,6 +24,7 @@
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@iconify/vue": "^4.1.1",
     "@rushstack/eslint-patch": "^1.3.3",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
@@ -45,7 +46,6 @@
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
     "typescript": "~5.3.0",
-    "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "unplugin-vue-markdown": "^0.26.0",
     "unplugin-vue-router": "^0.7.0",

MyApp.Client/plugins/press/posts.ts

@@ -2,8 +2,7 @@ import fs from 'fs'
 import path from 'path'
 import { leftPart, rightPart, lastLeftPart } from "@servicestack/client"
 import { createDoc, generateSlug } from "./utils"
-import { Post, Author } from "./types"
-import { Options } from "./index"
+import { Options, Post, Author } from "./types"
 
 export function loadFrom(fromDir:string, options: Options = {}) {
     const authorSlugs : {[name:string]:Author} = {}

MyApp.Client/plugins/press/utils.ts

@@ -1,8 +1,7 @@
 import fs from "fs"
 import matter from "front-matter"
 import { leftPart, lastRightPart } from "@servicestack/client"
-import { Doc } from "./types"
-import { Options } from "./index"
+import { Doc, Options } from "./types"
 
 function padInt(n: number) { 
     return n < 10 ? '0' + n : n 

MyApp.Client/plugins/press/videos.ts

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import { createDoc } from "./utils"
-import { Options } from "./index"
+import { Options } from "./types"
 
 export function loadFrom(fromDir:string, options: Options = {}) {
     const groups :{[key:string]:any[]} = {}

MyApp.Client/src/components/BlogPosts.vue

@@ -67,6 +67,6 @@ function author(name:string) : Author | undefined {
   return name ? meta.posts.authors.find((x:Author) => x.name.toLowerCase() == name.toLowerCase()) : undefined 
 }
 function authorProfileUrl(name:string) {
-  return author(name)?.profileUrl ?? "/img/profiles/user1.svg"
+  return author(name)?.profileUrl!
 }
 </script>

MyApp.Client/src/components/GettingStarted.vue

@@ -12,7 +12,7 @@
             <div class="bg-white dark:bg-gray-800 px-4 py-4 mr-4 mb-4 rounded-lg shadow-lg text-center items-center justify-center hover:shadow-2xl dark:border-2 dark:border-pink-600 dark:hover:border-blue-600" style="min-width:150px">
               <div class="text-center font-extrabold flex items-center justify-center mb-2">
                 <div class="text-4xl text-blue-400 my-3">
-                  <LogosVue class="w-12 h-12" />
+                  <Iconify icon="logos:vue" class="w-12 h-12" />
                 </div>
               </div>
               <div class="text-xl font-medium text-gray-700">Vue SPA</div>
@@ -34,8 +34,6 @@
 </template>
 
 <script setup lang="ts">
-import LogosVue from "@/assets/img/logos/vue.svg"
-import ShellCommand from "@/components/ShellCommand.vue"
 import { ref, computed } from "vue"
 
 defineProps<{

MyApp.Client/src/components/ShellCommand.vue

@@ -12,7 +12,7 @@
     <div v-if="successText" class="absolute right-0 -mr-28 -mt-3 rounded-md bg-green-50 p-3">
       <div class="flex">
         <div class="flex-shrink-0">
-          <MdiCheckCircle class="h-5 w-5 text-green-400" />
+          <Iconify icon="mdi:check-circle" class="h-5 w-5 text-green-400" />
         </div>
         <div class="ml-3">
           <p class="text-sm font-medium text-green-800">
@@ -25,7 +25,6 @@
 </template>
 
 <script setup lang="ts">
-import MdiCheckCircle from "@/assets/img/mdi/check-circle.svg"
 import { ref } from "vue"
 
 let successText = ref('')

MyApp.Client/src/components/SrcVuePage.vue

@@ -1,12 +1,10 @@
 <template>
   <SrcLink :href="combinePaths('/MyApp.Client/src',path)">
-    <LogosVue class="w-5 h-5 inline" />
+    <Iconify icon="logos:vue" class="w-5 h-5 inline" />
   </SrcLink>
 </template>
 
 <script setup lang="ts">
-import SrcLink from "@/components/SrcLink.vue"
-import LogosVue from "@/assets/img/logos/vue.svg"
 import { combinePaths } from "@servicestack/client"
 
 defineProps<{

MyApp.Client/src/main.ts

@@ -10,6 +10,7 @@ import { createRouter, createWebHistory } from 'vue-router/auto'
 import { setupLayouts } from 'virtual:generated-layouts'
 import { createPinia } from "pinia"
 import meta from "virtual:meta"
+import { Icon } from '@iconify/vue'
 
 import LiteYoutube from "@/components/LiteYouTube"
 import { configRouter} from "@/routing"
@@ -56,4 +57,5 @@ app
     .provide('client', client)
     .provide('meta', meta)
     .component('LiteYouTube', LiteYoutube)
+    .component('Iconify', Icon)
     .mount('#app')

MyApp.Client/src/pages/[...all].vue

@@ -9,7 +9,7 @@
     <div class="mt-2">
       <button @click="router.back()"
               class="inline-flex justify-center py-1 px-2 shadow rounded-sm text-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-        <MdiArrowLeftThin class="w-5 h-5" />
+        <Iconify icon="mdi:arrow-left-thin" class="w-5 h-5" />
         back
       </button>
     </div>
@@ -22,7 +22,6 @@ meta:
 </route>
 
 <script setup lang="ts">
-import MdiArrowLeftThin from "@/assets/img/mdi/arrow-left-thin.svg"
 import { useRouter } from "vue-router"
 const router = useRouter()
 </script>

MyApp.Client/src/pages/bookings-auto.vue

@@ -50,7 +50,7 @@
         </div>
         <div>
           <RouterLink class="text-gray-400 hover:text-gray-600" to="/bookings-data">Bookings DataGrid</RouterLink>
-          <MdiChevronRight class="text-gray-400 w-6 h-6 inline" aria-hidden="true"/>
+          <Iconify icon="mdi:chevron-right" class="text-gray-400 w-6 h-6 inline" aria-hidden="true" />
         </div>
       </div>
     </div>
@@ -97,7 +97,6 @@
 </template>
 
 <script setup lang="ts">
-import MdiChevronRight from "@/assets/img/mdi/chevron-right.svg"
 import { ref } from "vue"
 import { useClient, useFormatters } from "@servicestack/vue"
 import { QueryCoupons } from "@/dtos"

MyApp.Client/src/pages/bookings-data.vue

@@ -44,7 +44,7 @@
         </div>
         <div>
           <RouterLink class="text-gray-400 hover:text-gray-600" to="/bookings-auto">Bookings AutoQueryGrid</RouterLink>
-          <MdiChevronRight class="text-gray-400 w-6 h-6 inline" aria-hidden="true"/>
+          <Iconify icon="mdi:chevron-right" class="text-gray-400 w-6 h-6 inline" aria-hidden="true" />
         </div>
       </div>
     </div>
@@ -55,7 +55,6 @@
 import { computed, ref, watch, onMounted } from "vue"
 import { useClient, useAuth, useFormatters } from "@servicestack/vue"
 import { Booking, QueryBookings } from "@/dtos"
-import MdiChevronRight from "@/assets/img/mdi/chevron-right.svg"
 import { useHead } from "@unhead/vue"
 useHead({ title: 'Bookings DataGrid' })
 

MyApp.Client/src/pages/features.md

@@ -12,6 +12,7 @@ productivity and performance.
 | [Tailwindcss](https://tailwindcss.com)                                     | Productive responsive-first utility-based css framework with growing [rich component ecosystem](https://tailwindcomponents.com) |
 | [TypeScript](https://www.typescriptlang.org)                               | Advanced type-safety, static analysis and richer IDE tooling                                                                    |
 | [Markdown](https://github.com/markdown-it/markdown-it)                     | Native Markdown integration with advanced featureset supporting embedding of HTML & Vue Components                              |
+| [Iconify](https://iconify.design)                                          | Unified registry to access 100k+ high quality SVG icons from 100+ icon sets                                                     |
 | [tailwind/typography](https://tailwindcss-typography.vercel.app)           | Beautiful css typography for markdown articles & blog posts                                                                     |
 | [tailwind/forms](https://github.com/tailwindlabs/tailwindcss-forms)        | Beautiful css form & input styles that's easy to override with utilities                                                        |
 | [plugin/vue-router](https://github.com/posva/unplugin-vue-router)          | Conventional file system based routing for Vue 3 on Vite                                                                        |
@@ -41,6 +42,20 @@ Components({
 })
 ```
 
+### [Iconify for Vue](https://iconify.design/docs/icon-components/vue/)
+
+For accessing [thousands of Iconfigy's SVG icons](https://icon-sets.iconify.design) as Vue components **on-demand** universally.
+
+```ts
+import { Icon } from '@iconify/vue'
+```
+
+#### Usage
+
+```html
+<Icon icon="mdi-light:home" />
+```
+
 ### [unplugin-vue-router](https://github.com/posva/unplugin-vue-router)
 
 For auto generating vue routing configurations for each Vue 3 component from 
@@ -52,7 +67,7 @@ VueRouter({
 })
 ```
 
-### [vite-plugin-md](https://github.com/antfu/vite-plugin-md)
+### [unplugin-vue-markdown](https://github.com/unplugin/unplugin-vue-markdown)
 
 For enabling Markdown Support by converting each `.md` document into a Vue Component that's rendered using 
 [markdown-it](https://github.com/markdown-it/markdown-it).

MyApp.Client/src/pages/profile.vue

@@ -2,8 +2,8 @@
   <div class="mt-8 mb-20 mx-auto max-w-fit text-center">
     <h1 class="mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">My Profile</h1>
 
-    <MdiShieldAccount v-if="hasRole('Admin')" class="w-36 h-36 text-gray-700 inline-block" />
-    <MdiAccountCircle v-else class="w-36 h-36 text-gray-700 inline-block"/>
+    <Iconify icon="mdi:shield-account" v-if="hasRole('Admin')" class="w-36 h-36 text-gray-700 inline-block" />
+    <Iconify icon="mdi:account-circle" v-else class="w-36 h-36 text-gray-700 inline-block" />
     <div>{{ (user as AuthenticateResponse).displayName }}</div>
     <div>{{ (user as AuthenticateResponse).userName }}</div>
     <div class="mt-2">
@@ -18,8 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import MdiShieldAccount from "@/assets/img/mdi/shield-account.svg"
-import MdiAccountCircle from "@/assets/img/mdi/account-circle.svg"
 import { useAuth } from "@servicestack/vue"
 import { signout } from "@/auth"
 import { useHead } from "@unhead/vue"

MyApp.Client/src/pages/todomvc.vue

@@ -12,14 +12,14 @@
         <li v-for="todo in store.filteredTodos" :key="todo.id" class="px-6 py-4">
           <div class="relative flex items-start" @click="store.toggleTodo(todo.id)">
             <div class="flex items-center h-6">
-              <MdiCheckCircle v-if="todo.isFinished" class="text-green-600" />
-              <MdiCheckboxBlankCircleOutline v-else />
+              <Iconify v-if="todo.isFinished" icon="mdi:check-circle" class="text-green-600" />
+              <Iconify v-else icon="mdi/checkbox-blank-circle-outline" />
             </div>
             <div class="ml-3 flex-grow">
               <label :class="{'line-through':todo.isFinished}">{{ todo.text }}</label>
             </div>
             <div>
-              <MdiTrashCanOutline v-if="todo.isFinished" class="cursor-pointer" @click="store.removeTodo(todo.id)" />
+              <Iconify v-if="todo.isFinished" icon="mdi:trash-can-outline" class="cursor-pointer" @click="store.removeTodo(todo.id)" />
             </div>
           </div>
         </li>
@@ -52,7 +52,7 @@
 
     <div class="mt-4 text-center text-gray-400 flex justify-center -ml-6">
       <SrcLink href="/MyApp.Client/src/stores/todos.ts">
-        <NotoPineapple class="w-5 h-5 inline-flex" />
+        <Iconify icon="noto:pineapple" class="w-5 h-5 inline-flex" />
       </SrcLink>
       <SrcVuePage path="pages/todomvc.vue" />
     </div>
@@ -62,10 +62,6 @@
 <script setup lang="ts">
 import { h, type SetupContext } from "vue"
 import { type Filter, useTodosStore } from "@/stores/todos"
-import MdiCheckCircle from "@/assets/img/mdi/check-circle.svg"
-import MdiTrashCanOutline from "@/assets/img/mdi/trash-can-outline.svg"
-import MdiCheckboxBlankCircleOutline from "@/assets/img/mdi/checkbox-blank-circle-outline.svg"
-import NotoPineapple from "@/assets/img/noto/pineapple.svg"
 
 const store = useTodosStore()
 store.refreshTodos()

MyApp.Client/tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["*.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,

MyApp.Client/vite.config.ts

@@ -10,9 +10,7 @@ import meta from "./plugins/press"
 import Vue from '@vitejs/plugin-vue'
 import matter from "front-matter"
 import Components from 'unplugin-vue-components/vite'
-import AutoImport from 'unplugin-auto-import/vite'
 import VueRouter from 'unplugin-vue-router/vite'
-import { VueRouterAutoImports } from 'unplugin-vue-router'
 import Layouts from 'vite-plugin-vue-layouts'
 import Markdown from 'unplugin-vue-markdown/vite'
 import svgLoader from 'vite-svg-loader'
@@ -113,24 +111,6 @@ export default defineConfig({
         Layouts(),
         svgLoader(),
 
-        // https://github.com/antfu/unplugin-auto-import
-        AutoImport({
-            imports: [
-                'vue',
-                '@vueuse/core',
-                VueRouterAutoImports,
-                {
-                    // add any other imports you were relying on
-                    'vue-router/auto': ['useLink'],
-                },
-            ],
-            dts: true,
-            dirs: [
-                './src/composables',
-            ],
-            vueTemplate: true,
-        }),
-
         // https://github.com/unplugin/unplugin-vue-markdown
         Markdown({
             // default options passed to markdown-it
@@ -147,15 +127,16 @@ export default defineConfig({
             },            
         }),
 
-        // https://github.com/antfu/vite-plugin-components
+        // https://github.com/unplugin/unplugin-vue-components
         Components({
             // allow auto load markdown components under `./src/components/`
             extensions: ['vue', 'md'],
 
             // allow auto import and register components used in markdown
             include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
 
-            dts: 'src/components.d.ts',
+            //dts: 'src/components.d.ts',
+            dts:true,
         }),
     ],
     resolve: {