[-] Remove old checkbox code

package.json

@@ -11,9 +11,11 @@
     "element-plus": "^2.1.9",
     "marked": "^4.0.16",
     "vue": "^3.2.33",
+    "vue-lite-youtube-embed": "^1.0.4",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {
+    "@types/marked": "^4.0.3",
     "@types/node": "^17.0.24",
     "@vitejs/plugin-vue": "^2.3.1",
     "sass": "^1.50.0",

src/App.vue

@@ -1,20 +1,15 @@
 <template>
   <p>
-    <!-- use the router-link component for navigation. -->
-    <!-- specify the link by passing the `to` prop. -->
-    <!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
     <router-link class="rlink" to="/PrimarySymbol">Primary Symbols</router-link>
     |
     <router-link class="rlink" to="/">tf</router-link>
     |
     <router-link class="rlink" to="/about">About</router-link>
-    <div id="application">
-      <Navbar />
-    </div>
   </p>
+  <div id="application">
+    <Navbar />
+  </div>
 
-  <!-- route outlet -->
-  <!-- component matched by the route will render here -->
   <router-view></router-view>
 </template>
 
@@ -25,9 +20,12 @@ export default {
   components: {
     Navbar
   },
+  data() {
+  return {
+    contentType: [],
+    }
+  },
 };
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 </script>
 
 

src/meta_yt_links.json

@@ -1,4 +1,5 @@
-[{"name": "tf", "link": "https://youtu.be/jKV53r9-H14", "type": "Api"},
+[{"name": "name", "link": "link", "type": "Api"},
+{"name": "tf", "link": "https://youtu.be/jKV53r9-H14", "type": "Api"},
 {"name": "tf.abs", "link": "https://youtu.be/RPocW_aMZKE", "type": "Api"},
 {"name": "tf.acos", "link": "https://youtu.be/hzHy57W4Nho", "type": "Api"},
 {"name": "tf.acosh", "link": "https://youtu.be/hzHy57W4Nho", "type": "Api"},
@@ -96,4 +97,4 @@
 {"name": "tf.compat.v1.app.flags.DEFINE_flag", "link": "null", "type": "Api"},
 {"name": "tf.compat.v1.app.flags.DEFINE_float", "link": "null", "type": "Api"},
 {"name": "tf.compat.v1.app.flags.DEFINE_integer", "link": "null", "type": "Api"},
-{"name": "tf.compat.v1.app.flags.DEFINE_list", "link": "null", "type": "Api"}]
+{"name": "tf.compat.v1.app.flags.DEFINE_list", "link": "null"}]

src/views/Home.vue

@@ -1,5 +1,12 @@
 <template>
     <div id="Home">
+        <el-checkbox-group v-model="options">
+            <el-checkbox label="Text" />
+            <el-checkbox label="Video" />
+            <el-checkbox label="Examples" />
+            <el-checkbox label="Q&A" />
+        </el-checkbox-group>
+
         <div class="category" v-for="ty of types" :key="ty">
             <h2>{{ty}}</h2>
             <div class="api" v-for="api of apis(ty)" :key="api.name">
@@ -9,6 +16,10 @@
                 </div>
                 <div class="content">
                     <div class="md-docstring" v-html="encodeHtml(api.docs)"></div>
+
+                    <div class="yt-embed clickable" v-if="options.includes('Video') && getVideoId(api.name)">
+                        <LiteYouTubeEmbed title="" :id="getVideoId(api.name)"/>
+                    </div>
                 </div>
             </div>
         </div>
@@ -18,8 +29,10 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 import meta from '../meta.json';
+import metaYT from '../meta_yt_links.json'
 import { marked } from 'marked';
-import {$} from '../main';
+import {$} from '@/main';
+import LiteYouTubeEmbed from 'vue-lite-youtube-embed'
 
 interface APIEntry
 {
@@ -34,9 +47,26 @@ function onlyUnique(value, index, self) {
     return self.indexOf(value) === index;
 }
 
-@Options({components: {}})
+// Create name to object index for youtube videos
+const ytNameIndex = Object.assign({}, ...metaYT.map((x) => ({[x.name]: x})));
+
+@Options({components: {LiteYouTubeEmbed}})
 export default class Home extends Vue
 {
+    options = ['Text']
+
+    getVideoId(api: string)
+    {
+        // Normalize api names
+        if (!api.startsWith('tf.')) api = 'tf.' + api
+
+        // Search for api name in yt links json using the index
+        let find = ytNameIndex[api]
+
+        // If a matching name is found, then return the ID extracted from the link
+        if (find) return find.link.split('/').pop()
+    }
+
     get types(): string[]
     {
         return meta.map(it => it.type).filter(onlyUnique)
@@ -85,15 +115,22 @@ export default class Home extends Vue
     .ui-state-active.header
         border-radius: 10px 10px 0 0!important
 
+    .content
+        background: #f3f3f3
+        padding: 10px
+        border-radius: 0 0 10px 10px
 </style>
 
 <style lang="sass">
 .md-docstring
     text-align: left
-    background: #f3f3f3
-    padding: 10px
-    border-radius: 0 0 10px 10px
 
     h1, h2
         font-size: 1em !important
-</style>
+
+.yt-lite
+    height: 320px
+    background-repeat: no-repeat
+    background-size: contain
+    background-position: center
+</style>

src/views/PrimarySymbol.vue

@@ -1,18 +1,8 @@
 <template>
     <div id="PrimarySymbol">
-        <input type="checkbox" v-model="checkedFilter" @change="filterItems" value="video" /> Video 
-        <div v-if="filteredData" class="category" v-for="ty of types" :key="ty">
+        <div class="category" v-for="ty of types" :key="ty">
             <h2>{{ty}}</h2>
             <div class="api" v-for="api of apis(ty)" :key="api.name">
-                <div class="header clickable">
-                    <span class="name">{{api.name}}</span>
-                    <span class="desc" v-html="api.link"></span>
-                </div>
-            </div>
-        </div>
-        <div v-else class="category" v-for="type of types" :key="type">
-            <h2>{{type}}</h2>
-            <div class="api" v-for="api of apis(type)" :key="api.name">
                 <div class="header clickable">
                     <span class="name">{{api.name}}</span>
                     <span class="desc" v-html="api.desc"></span>
@@ -27,10 +17,9 @@
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import meta_filtered from '../meta_yt_links.json';
 import meta from '../meta_primary_symbol.json';
 import { marked } from 'marked';
-import {$} from '../main';
+import {$} from '@/main';
 
 interface APIEntry
 {
@@ -47,16 +36,9 @@ function onlyUnique(value, index, self) {
 @Options({components: {}})
 export default class PrimarySymbol extends Vue
 {
-
-    checkedFilter = false
-    filteredData = false
-
     get types(): string[]
     {
-        if(this.checkedFilter)
-            return meta_filtered.map(it => it.type).filter(onlyUnique)
-        else
-            return meta.map(it => it.type).filter(onlyUnique)
+        return meta.map(it => it.type).filter(onlyUnique)
     }
 
     mounted()
@@ -72,16 +54,9 @@ export default class PrimarySymbol extends Vue
         return marked(markdown)
     }
 
-    apis(ty: string) 
+    apis(ty: string): APIEntry[] 
     {
-        if(this.checkedFilter)
-            return meta_filtered.filter(it => it.type == ty)
-        else
-            return meta.filter(it => it.type == ty)
-    }
-
-    filterItems() {
-        this.filteredData = this.checkedFilter 
+        return meta.filter(it => it.type == ty)
     }
 }
 </script>
@@ -120,4 +95,4 @@ export default class PrimarySymbol extends Vue
 
     h1, h2
         font-size: 1em !important
-</style>
+</style>

yarn.lock

@@ -46,6 +46,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.181.tgz#d1d3740c379fda17ab175165ba04e2d03389385d"
   integrity sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==
 
+"@types/marked@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.3.tgz#2098f4a77adaba9ce881c9e0b6baf29116e5acc4"
+  integrity sha512-HnMWQkLJEf/PnxZIfbm0yGJRRZYYMhb++O9M36UCTA9z53uPvVoSlAwJr3XOpDEryb7Hwl1qAx/MV6YIW1RXxg==
+
 "@types/node@^17.0.24":
   version "17.0.41"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.41.tgz#1607b2fd3da014ae5d4d1b31bc792a39348dfb9b"
@@ -716,6 +721,18 @@ vue-demi@*:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
   integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
 
+vue-demi@latest:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.1.tgz#7604904c88be338418a10abbc94d5b8caa14cb8c"
+  integrity sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==
+
+vue-lite-youtube-embed@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vue-lite-youtube-embed/-/vue-lite-youtube-embed-1.0.4.tgz#e05f6709f3722001e0310e934c5097c00e8a1c8b"
+  integrity sha512-2JZMa8ysGN1TNQwn9KWqSz8aXgZRnwEBlrrKc8Y6hLiIdr3U0D0ltST4sAYLA5L+eUM4Dfsvxp95egKMSYsEXQ==
+  dependencies:
+    vue-demi latest
+
 vue-property-decorator@^10.0.0-rc.3:
   version "10.0.0-rc.3"
   resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-10.0.0-rc.3.tgz#bb0cb2c7c31dc41149eb432f2104fb82dc3d95be"