implement missing components used in posts

MyApp.Client/src/_posts/2023-08-23_razor-ssg-new-blog-features.md

@@ -6,6 +6,11 @@ image: https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?crop=entropy
 author: Lucy Bates
 ---
 
+<script setup lang="ts">
+import ChartJs from "./components/ChartJs";
+import FileLayout from "./components/FileLayout.vue";
+</script>
+
 ## New Blogging features in Razor SSG
 
 [Razor SSG](https://razor-ssg.web-templates.io) is our Free Project Template for creating fast, statically generated Websites and Blogs with

MyApp.Client/src/_posts/2023-11-20_net8-blazor-template.md

@@ -6,6 +6,10 @@ image: https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?crop=entropy
 author: Lucy Bates
 ---
 
+<script setup lang="ts">
+import BlazorTemplate from "./components/BlazorTemplate.vue";
+</script>
+
 With the release of **.NET 8**, we're happy to announce ServiceStack's new [Blazor](https://blazor.web-templates.io/)
 Tailwind project template that takes advantage of .NET 8 Blazor's new features that redefines modern Web Development in C#.
 
@@ -29,7 +33,7 @@ We’ll also discuss the project's structure, usage of **ASP.NET Core Identity**
     Blazor Tailwind Template
 </h3></div>
 <div class="py-8 max-w-7xl mx-auto px-4 sm:px-6">
-    <lite-youtube class="w-full mx-4 my-4" width="560" height="315" videoid="hqyozHSL0Nk" style="background-image: url('https://img.youtube.com/vi/hqyozHSL0Nk/maxresdefault.jpg')"></lite-youtube>
+    <LiteYouTube id="hqyozHSL0Nk" title=".NET 8 Blazor Tailwind Template" />
 </div>
 </div>
 
@@ -40,7 +44,7 @@ We’ll also discuss the project's structure, usage of **ASP.NET Core Identity**
             Create a new Blazor Tailwind project with your preferred project name:
         </p>
     </div>
-    <blazor-template repo="NetCoreTemplates/blazor" name="Blazor"></blazor-template>
+    <BlazorTemplate repo="NetCoreTemplates/blazor" name="Blazor" />
 </div>
 
 ## ASP.NET Core Identity Integration

MyApp.Client/src/_posts/2023-11-22_net8-best-blazor.md

@@ -6,13 +6,16 @@ image: https://images.unsplash.com/photo-1482686115713-0fbcaced6e28?crop=entropy
 author: Gayle Smith
 ---
 
+<script setup lang="ts">
+import Counter from "./components/Counter.vue";
+import BlazorVueTemplate from "./components/BlazorVueTemplate.vue";
+</script>
+
 The best way to find out what's new in .NET 8 Blazor is to watch the excellent 
 [Full stack web UI with Blazor in .NET 8](https://www.youtube.com/watch?v=QD2-DwuOfKM) presentation by Daniel Roth and Steve Sanderson, 
 which covers how Blazor has become a Full Stack UI Web Technology for developing any kind of .NET Web App.
 
-<div class="flex justify-center">
-    <lite-youtube class="w-full mx-4 my-4" width="560" height="315" videoid="YwZdtLEtROA" style="background-image: url('https://img.youtube.com/vi/YwZdtLEtROA/maxresdefault.jpg')"></lite-youtube>
-</div>
+<LiteYouTube id="YwZdtLEtROA" title="Full stack web UI with Blazor in .NET 8 | .NET Conf 2023" />
 
 ## Your first .NET 8 Blazor App
 
@@ -430,7 +433,7 @@ Vue.js to and the [Vue Components](/vue/) library.
     Blazor Vue Template
 </h3></div>
 <div class="py-8 max-w-7xl mx-auto px-4 sm:px-6">
-    <lite-youtube class="w-full mx-4 my-4" width="560" height="315" videoid="ujbTGn4IwFs" style="background-image: url('https://img.youtube.com/vi/ujbTGn4IwFs/maxresdefault.jpg')"></lite-youtube>
+    <LiteYouTube id="ujbTGn4IwFs" title="Blazor Vue Template" />    
 </div>
 </div>
 

MyApp.Client/src/_posts/components/BlazorTemplate.vue

@@ -0,0 +1,7 @@
+<template>
+  <Templates :templates="[Index['blazor']]" />
+</template>
+<script setup lang="ts">
+import Templates from "./Templates.vue"
+import Index from "./TemplateIndex"
+</script>

MyApp.Client/src/_posts/components/BlazorVueTemplate.vue

@@ -0,0 +1,7 @@
+<template>
+  <Templates :templates="[Index['blazor-vue']]" />
+</template>
+<script setup lang="ts">
+import Templates from "./Templates.vue"
+import Index from "./TemplateIndex"
+</script>

MyApp.Client/src/_posts/components/ChartJs.ts

@@ -0,0 +1,31 @@
+import { ref, onMounted, defineComponent, h } from "vue"
+import { addScript } from "@servicestack/client"
+
+const loadJs = addScript('https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js')
+
+declare var Chart:any
+
+export default defineComponent({
+    props:['type','data','options'],
+    setup(props) {
+        const chart = ref()
+        onMounted(async () => {
+            await loadJs
+
+            const options = props.options || {
+                responsive: true,
+                legend: {
+                    position: "top"
+                }
+            }
+            new Chart(chart.value, {
+                type: props.type || "bar",
+                data: props.data,
+                options,
+            })
+
+        })
+        //<div><canvas ref="chart"></canvas></div>
+        return () => h('div', {}, [h('canvas', { ref: chart })])
+    }
+})

MyApp.Client/src/_posts/components/File.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div v-if="label == '_'">
+      <div v-for="file in contents" class="ml-6 flex items-center text-base leading-8">
+        <svg class="mr-1 text-slate-600" aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path></svg>
+        <span>{{file}}</span>
+      </div>
+    </div>
+    <div v-else>
+      <div class="ml-6">
+        <div class="flex items-center text-base leading-8">
+          <svg class="mr-1 text-slate-600" aria-hidden="true" focusable="false" role="img" viewBox="0 0 12 12" width="12" height="12" fill="currentColor" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"><path d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"></path></svg>
+          <svg class="mr-1 text-sky-500" aria-hidden="true" focusable="false" role="img" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"><path d="M.513 1.513A1.75 1.75 0 0 1 1.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1H13a1 1 0 0 1 1 1v.5H2.75a.75.75 0 0 0 0 1.5h11.978a1 1 0 0 1 .994 1.117L15 13.25A1.75 1.75 0 0 1 13.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75c0-.464.184-.91.513-1.237Z"></path></svg>
+          <span>{{label}}</span>
+        </div>
+        <File v-for="(children,item) in contents" :label="item" :contents="children" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string
+  contents: any
+  depth?: number
+}>()
+</script>

MyApp.Client/src/_posts/components/FileLayout.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <File v-for="(contents,label) in files" :label="label" :contents="contents" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import File from './File.vue'
+defineProps<{
+  files: Record<string, any>
+}>()
+</script>