From 435d018ba6e1fe9d0d37b5ed5088af3997a8cbc5 Mon Sep 17 00:00:00 2001
From: Kristjan Jansen <kristjan.jansen@gmail.com>
Date: Wed, 6 Apr 2022 11:17:36 +0300
Subject: [PATCH 1/3] feat: Icon component

---
 docs/components/f-three.md |  2 +-
 package-lock.json          | 16 ++++++++--------
 package.json               |  7 +++----
 src/app.ts                 |  6 +++---
 src/internal/Content.vue   | 21 +++++++++++++++++++++
 src/internal/Icon.vue      | 25 +++++++++++++++++++++++++
 vite.config.app.ts         |  1 -
 7 files changed, 61 insertions(+), 17 deletions(-)
 create mode 100644 src/internal/Icon.vue

diff --git a/docs/components/f-three.md b/docs/components/f-three.md
index d3ead3a..86ecd16 100644
--- a/docs/components/f-three.md
+++ b/docs/components/f-three.md
@@ -10,7 +10,7 @@
 
 First, let's create a scene with `<f-three>` component. Then let's add `<f-three-mesh>` with `geometry` and `material` props.
 
-Use the mouse or pointer to adjust the rotation of the scene.
+> <Icon name="hand-finger" /> Use the mouse or pointer to adjust the rotation of the scene.
 
 ```md
 <script setup>
diff --git a/package-lock.json b/package-lock.json
index 5364874..09de7d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "fachwerk",
-      "version": "0.0.20",
+      "version": "0.0.22",
       "license": "MIT",
       "dependencies": {
         "d3-shape": "^3.1.0",
@@ -19,7 +19,7 @@
       },
       "devDependencies": {
         "@babel/types": "^7.17.0",
-        "@iconify-json/tabler": "^1.1.3",
+        "@iconify-json/tabler": "^1.1.8",
         "@tailwindcss/typography": "^0.5.2",
         "@types/d3-shape": "^3.0.2",
         "@types/katex": "^0.11.1",
@@ -367,9 +367,9 @@
       }
     },
     "node_modules/@iconify-json/tabler": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.1.3.tgz",
-      "integrity": "sha512-QhnSYkQ4FS3uTrSOg+I9WQBLNtI7hXa00Fi8OcQhOw8isQ+Vt1BbaBkXtfdxcl1Xo5VIPhvkk8QVTyJL8k339g==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.1.8.tgz",
+      "integrity": "sha512-uNdzJeccj/o1pbofBFxdjwnxDYgPDUIQv0pp7tjyG6ZUbmiZXWDn377pprg242bUSPI/+gE7JIBryVLZmLFbEA==",
       "dev": true,
       "dependencies": {
         "@iconify/types": "^1.0.12"
@@ -4573,9 +4573,9 @@
       }
     },
     "@iconify-json/tabler": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.1.3.tgz",
-      "integrity": "sha512-QhnSYkQ4FS3uTrSOg+I9WQBLNtI7hXa00Fi8OcQhOw8isQ+Vt1BbaBkXtfdxcl1Xo5VIPhvkk8QVTyJL8k339g==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.1.8.tgz",
+      "integrity": "sha512-uNdzJeccj/o1pbofBFxdjwnxDYgPDUIQv0pp7tjyG6ZUbmiZXWDn377pprg242bUSPI/+gE7JIBryVLZmLFbEA==",
       "dev": true,
       "requires": {
         "@iconify/types": "^1.0.12"
diff --git a/package.json b/package.json
index 4e0f518..5528bc7 100644
--- a/package.json
+++ b/package.json
@@ -42,9 +42,8 @@
   },
   "typings": "./dist/lib.esm.ts",
   "scripts": {
-    "dev": "vite --port 3000 --host -c vite.config.app.ts --open",
-    "build": "vite build -c vite.config.esm.ts && vite build -c vite.config.cjs.ts && vite build -c vite.config.app.ts && vite build -c vite.config.internal.ts",
-    "preview": "vite preview --port 5000",
+    "dev": "vite --open --port 3000 -c vite.config.app.ts",
+    "build": "vite build -c vite.config.app.ts && vite build -c vite.config.esm.ts && vite build -c vite.config.cjs.ts && vite build -c vite.config.internal.ts",
     "test": "vitest",
     "typecheck": "vue-tsc --noEmit",
     "release": "vitest --run && npm run build && vue-tsc --declaration --emitDeclarationOnly",
@@ -61,7 +60,7 @@
   },
   "devDependencies": {
     "@babel/types": "^7.17.0",
-    "@iconify-json/tabler": "^1.1.3",
+    "@iconify-json/tabler": "^1.1.8",
     "@tailwindcss/typography": "^0.5.2",
     "@types/d3-shape": "^3.0.2",
     "@types/katex": "^0.11.1",
diff --git a/src/app.ts b/src/app.ts
index dae49f7..3d152e0 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,4 +1,4 @@
-import { createApp } from "vue";
+import { createApp, h, shallowRef, watchEffect } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
 
 import routes from "virtual:generated-pages";
@@ -8,7 +8,7 @@ import App from "./App.vue";
 import Layout from "./internal/Layout.vue";
 import Editor from "./internal/Editor.vue";
 import Button from "./internal/Button.vue";
-import IconOne from "~icons/tabler/circle-1";
+import Icon from "./internal/Icon.vue";
 
 import "./app.css";
 
@@ -23,5 +23,5 @@ app.use(Fachwerk);
 app.component("Layout", Layout);
 app.component("Editor", Editor);
 app.component("Button", Button);
-app.component("IconOne", IconOne);
+app.component("Icon", Icon);
 app.mount("#app");
diff --git a/src/internal/Content.vue b/src/internal/Content.vue
index e5f9caf..a40da78 100644
--- a/src/internal/Content.vue
+++ b/src/internal/Content.vue
@@ -23,6 +23,7 @@ const defaultClass = `
   prose-a:text-lightblue-700
   prose-a:underline
   prose-a:underline-offset-2
+  prose-blockquote:text-gray-600
   prose-blockquote:border-l-4
   prose-blockquote:border-yellow-400
   prose-blockquote:pl-6
@@ -68,4 +69,24 @@ const mergedClass = computed(() => twMerge(`${defaultClass} ${customClass}`));
 .prose button {
   @apply text-lightblue-800 inline-block rounded border-2 border-sky-800 px-3 py-1 text-center font-medium hover:bg-black/5;
 }
+.prose > * > h1:first-child,
+.prose > * > h2:first-child,
+.prose > * > h3:first-child,
+.prose > * > h3:first-child,
+.prose > * > h3:first-child,
+.prose > * > h3:first-child,
+.prose > * > h3:first-child,
+.prose > * > h5:first-child,
+.prose > * > h6:first-child {
+  @apply !mt-0;
+}
+
+.prose > * > * > h1,
+.prose > * > * > h2,
+.prose > * > * > h3,
+.prose > * > * > h4,
+.prose > * > * > h5,
+.prose > * > * > h6 {
+  @apply !mt-0;
+}
 </style>
diff --git a/src/internal/Icon.vue b/src/internal/Icon.vue
new file mode 100644
index 0000000..6184c21
--- /dev/null
+++ b/src/internal/Icon.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import icons from "@iconify-json/tabler/icons.json";
+
+type Props = {
+  name: string;
+};
+const { name } = defineProps<Props>();
+
+//@ts-ignore
+const icon = icons.icons[name].body;
+</script>
+
+<template>
+  <svg
+    sstyle="
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      vertical-align: -webkit-baseline-middle;
+    "
+    class="text-lightgray-600 !inline-block h-5 align-[-webkit-baseline-middle]"
+    viewBox="0 0 24 24"
+    v-html="icon"
+  />
+</template>
diff --git a/vite.config.app.ts b/vite.config.app.ts
index 8c856e6..37e26c7 100644
--- a/vite.config.app.ts
+++ b/vite.config.app.ts
@@ -71,7 +71,6 @@ export default defineConfig({
     ViteIcons({ autoInstall: true }),
   ],
   build: {
-    emptyOutDir: false,
     outDir: "dist/docs",
   },
 });

From a755008704cda6d68b317238a3ece727fea861a0 Mon Sep 17 00:00:00 2001
From: Kristjan Jansen <kristjan.jansen@gmail.com>
Date: Wed, 6 Apr 2022 11:29:35 +0300
Subject: [PATCH 2/3] change api

---
 docs/components/f-three.md |  2 +-
 src/internal/Icon.vue      | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/components/f-three.md b/docs/components/f-three.md
index 86ecd16..0417fae 100644
--- a/docs/components/f-three.md
+++ b/docs/components/f-three.md
@@ -10,7 +10,7 @@
 
 First, let's create a scene with `<f-three>` component. Then let's add `<f-three-mesh>` with `geometry` and `material` props.
 
-> <Icon name="hand-finger" /> Use the mouse or pointer to adjust the rotation of the scene.
+> <Icon id="tabler:hand-finger" /> Use the mouse or pointer to adjust the rotation of the scene.
 
 ```md
 <script setup>
diff --git a/src/internal/Icon.vue b/src/internal/Icon.vue
index 6184c21..d7a80f7 100644
--- a/src/internal/Icon.vue
+++ b/src/internal/Icon.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import icons from "@iconify-json/tabler/icons.json";
+import tabler from "@iconify-json/tabler/icons.json";
+const icons = { tabler };
 
 type Props = {
-  name: string;
+  id: string;
 };
-const { name } = defineProps<Props>();
-
+const { id } = defineProps<Props>();
+const [collection, name] = id.split(":");
 //@ts-ignore
-const icon = icons.icons[name].body;
+const icon = icons[collection]?.icons[name]?.body;
 </script>
 
 <template>

From 665de73a866f25f1908283a0c2cbb08c5aadf433 Mon Sep 17 00:00:00 2001
From: Kristjan Jansen <kristjan.jansen@gmail.com>
Date: Wed, 6 Apr 2022 11:32:15 +0300
Subject: [PATCH 3/3] docs

---
 src/app.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app.ts b/src/app.ts
index 3d152e0..5312d53 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -20,8 +20,13 @@ const router = createRouter({
 const app = createApp(App);
 app.use(router);
 app.use(Fachwerk);
+
+// Used by vue-markdown
 app.component("Layout", Layout);
+
+// Used inside markdown documents
 app.component("Editor", Editor);
 app.component("Button", Button);
 app.component("Icon", Icon);
+
 app.mount("#app");