fix(graph): use lang paths and load code with onMounted 🩹 (#22)

Author: amiceli

app/Console/Commands/LoadProLang.php

@@ -179,6 +179,10 @@ private function updateLangFamily() {
             'Dylan' => array('ALGOL 60', 'EuLisp'),
             // Data : https://en.wikipedia.org/wiki/Lasso_(programming_language)
             'Lasso' => array('Dylan', 'Scala'),
+            // Data : https://en.wikipedia.org/wiki/JavaScript
+            'ActionScript' => array('JavaScript'),
+            'CoffeeScript' => array('JavaScript'),
+            'JavaScript' => array('Java', 'Self', 'AWK'),
         );
 
         foreach ($langFamilies as $name => $value) {

resources/js/components/prolang/LangCard.vue

@@ -146,20 +146,17 @@
 
 <script lang="ts" setup>
 import { codeToHtml } from "shiki"
-import { computed, ref } from "vue"
+import { computed, onMounted, ref } from "vue"
 import type { ProLangLanguage } from "@/types/main"
 
-const code = ref<string | null>(null)
-const emits = defineEmits(["select-lang", "close"])
-
 const props = defineProps<{
     lang: ProLangLanguage
     selectedLang: string | null
 }>()
 
-const hasEnoughData = computed(() => {
-    return props.lang.link || props.lang.mainRepository
-})
+const code = ref<string | null>(null)
+const emits = defineEmits(["select-lang", "close"])
+const hasEnoughData = computed(() => props.lang.link || props.lang.mainRepository)
 const castYears = JSON.parse(props.lang.years).join(", ")
 
 async function setCodeHtml(codeStr: string, lang?: string) {
@@ -173,19 +170,19 @@ async function setCodeHtml(codeStr: string, lang?: string) {
 }
 
 async function showCode() {
-    if (code.value === null) {
-        if (props.lang.rawCode) {
-            await setCodeHtml(props.lang.rawCode)
-        } else if (props.lang.rawCodeLink) {
-            const resp = await fetch(props.lang.rawCodeLink)
-            const text = await resp.text()
-
-            setCodeHtml(text)
-        }
-    }
-
     emits("select-lang", props.lang.name)
 }
+
+onMounted(async () => {
+    if (props.lang.rawCode) {
+        await setCodeHtml(props.lang.rawCode)
+    } else if (props.lang.rawCodeLink) {
+        const resp = await fetch(props.lang.rawCodeLink)
+        const text = await resp.text()
+
+        setCodeHtml(text)
+    }
+})
 </script>
 
 <style lang="scss" scoped>

resources/js/components/prolang/LangGraphData.ts

@@ -2,7 +2,9 @@ import type { Edges, Layouts, Nodes } from "v-network-graph"
 import type { ProLangLanguage } from "@/types/main"
 
 function langNameMatch(lang: ProLangLanguage, search: string) {
-    return lang.name.toLowerCase().includes(search.toLowerCase())
+    return lang.paths.some((p) => {
+        return p.toLowerCase().includes(search.toLowerCase())
+    })
 }
 
 export function isMemberOf(search: string, lang: ProLangLanguage): boolean {

resources/js/pages/LangFamily.vue

@@ -53,8 +53,12 @@ const configs = reactive(
         node: {
             normal: {
                 color: (n) => {
-                    if (hasName.value && n.name?.includes(hasName.value)) {
-                        return "#a45586"
+                    if (hasName.value) {
+                        const regex = new RegExp(`${hasName.value}`, "i")
+
+                        if (n.name && regex.test(n.name)) {
+                            return "#a45586"
+                        }
                     }
                     return n.name === "Human" ? "#100d50" : "#08abff"
                 },

resources/js/pages/LangHistory.vue

@@ -89,10 +89,6 @@ function updateSelectedLang(value: string, forClose: boolean) {
     if (forClose) {
         selectedLang.value = ""
     } else {
-        // if (searchLang.value.length > 0) {
-        //     searchLang.value = value
-        // }
-
         searchLang.value = value
         selectedLang.value = value
     }