From 8167f6f232535f7ea835633561def0ca97afd719 Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Tue, 28 Mar 2023 10:34:48 -0700
Subject: [PATCH 1/4] Add navrow + markdown parsing

---
 docs/.vitepress/config.js            |   1 +
 docs/components/nav-row.md           |  47 +++++++
 lib/assets/styles/classes.scss       |   1 +
 lib/components/base/FileInput.vue    |   2 +-
 lib/components/base/ModalReport.vue  |   2 +-
 lib/components/base/ProjectCard.vue  |   2 +-
 lib/components/nav/NavRow.vue        | 175 ++++++++++++++++++++++-----
 lib/components/search/Categories.vue |   2 +-
 lib/helpers/highlight.js             |  63 ++++++++++
 lib/helpers/index.js                 |   3 +
 lib/{components => helpers}/parse.js |  15 ++-
 lib/{components => helpers}/utils.js |   0
 lib/index.js                         |   1 +
 package.json                         |   1 +
 yarn.lock                            |   5 +
 15 files changed, 280 insertions(+), 40 deletions(-)
 create mode 100644 docs/components/nav-row.md
 create mode 100644 lib/helpers/highlight.js
 create mode 100644 lib/helpers/index.js
 rename lib/{components => helpers}/parse.js (92%)
 rename lib/{components => helpers}/utils.js (100%)

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index c5a3108a3..0693e692a 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -38,6 +38,7 @@ export default {
           { text: 'Search Filter', link: '/components/search-filter' },
           { text: 'Toggle', link: '/components/toggle' },
           { text: 'Promotion', link: '/components/promotion' },
+          { text: 'Navigation Row', link: '/components/nav-row' },
         ],
       },
     ],
diff --git a/docs/components/nav-row.md b/docs/components/nav-row.md
new file mode 100644
index 000000000..3e7d9c58b
--- /dev/null
+++ b/docs/components/nav-row.md
@@ -0,0 +1,47 @@
+# NavRow
+
+Note: the links and animation do not work in the documentation as Vue Router is not used for routing
+
+<DemoContainer>
+  <NavRow :links="[
+        {
+          label: 'Avatar',
+          href: '/components/avatar.html',
+        },
+        {
+          label: 'Badge',
+          href: '/components/nav-row.html',
+        },
+        {
+          label: 'Pagination',
+          href: '/components/Pagination.html',
+        },
+        {
+          label: 'NavRow',
+          href: '/components/nav-row.html',
+        }
+      ]" 
+/>
+</DemoContainer>
+
+```vue
+  <NavRow :links="[
+        {
+          label: 'Avatar',
+          href: '/components/avatar.html',
+        },
+        {
+          label: 'Badge',
+          href: '/components/nav-row.html',
+        },
+        {
+          label: 'Pagination',
+          href: '/components/Pagination.html',
+        },
+        {
+          label: 'NavRow',
+          href: '/components/nav-row.html',
+        }
+      ]" 
+/>
+```
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index e4be2067b..8807e4936 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -609,6 +609,7 @@ a,
   }
 
   a {
+    cursor: pointer;
     color: var(--color-link);
 
     &:focus-visible,
diff --git a/lib/components/base/FileInput.vue b/lib/components/base/FileInput.vue
index 9bc463b70..ab2fc0b81 100644
--- a/lib/components/base/FileInput.vue
+++ b/lib/components/base/FileInput.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { fileIsValid } from '@/components/utils'
+import { fileIsValid } from '@/helpers/utils.js'
 import { defineComponent } from 'vue'
 export default defineComponent({
   props: {
diff --git a/lib/components/base/ModalReport.vue b/lib/components/base/ModalReport.vue
index dc18a8c45..37bd03f82 100644
--- a/lib/components/base/ModalReport.vue
+++ b/lib/components/base/ModalReport.vue
@@ -56,7 +56,7 @@
 </template>
 <script setup>
 import { Modal, Chips, XIcon, CheckIcon, DropdownSelect } from '@/components'
-import { renderString } from '@/components/parse.js'
+import { renderString } from '@/helpers/parse.js'
 import { ref } from 'vue'
 
 const modal = ref('modal')
diff --git a/lib/components/base/ProjectCard.vue b/lib/components/base/ProjectCard.vue
index 0ec77d442..193f7d834 100644
--- a/lib/components/base/ProjectCard.vue
+++ b/lib/components/base/ProjectCard.vue
@@ -76,7 +76,7 @@ import {
   Categories,
   EnvironmentIndicator,
 } from '@/components'
-import { formatNumber } from '@/components/utils'
+import { formatNumber } from '@/helpers/utils.js'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 dayjs.extend(relativeTime)
diff --git a/lib/components/nav/NavRow.vue b/lib/components/nav/NavRow.vue
index ea63d8b77..ba0fa6322 100644
--- a/lib/components/nav/NavRow.vue
+++ b/lib/components/nav/NavRow.vue
@@ -1,51 +1,166 @@
-<script setup>
-defineProps({})
-</script>
-
 <template>
-  <div class="omorphia__navrow">
-    <slot />
-    <div class="right-slot">
-      <slot name="right" />
-    </div>
-  </div>
+  <nav class="navigation">
+    <router-link
+      v-for="(link, index) in filteredLinks"
+      v-show="link.shown === undefined ? true : link.shown"
+      :key="index"
+      ref="linkElements"
+      :to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
+      class="nav-link button-animation"
+    >
+      <span>{{ link.label }}</span>
+    </router-link>
+    <div
+      class="nav-indicator"
+      :style="{
+        left: positionToMoveX,
+        top: positionToMoveY,
+        width: sliderWidth,
+        opacity: activeIndex === -1 ? 0 : 1,
+      }"
+      aria-hidden="true"
+    />
+  </nav>
 </template>
 
+<script>
+export default {
+  props: {
+    links: {
+      default: () => [],
+      type: Array,
+    },
+    query: {
+      default: null,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      sliderPositionX: 0,
+      sliderPositionY: 18,
+      selectedElementWidth: 0,
+      activeIndex: -1,
+      oldIndex: -1,
+    }
+  },
+  computed: {
+    filteredLinks() {
+      return this.links.filter((x) => (x.shown === undefined ? true : x.shown))
+    },
+    positionToMoveX() {
+      return `${this.sliderPositionX}px`
+    },
+    positionToMoveY() {
+      return `${this.sliderPositionY}px`
+    },
+    sliderWidth() {
+      return `${this.selectedElementWidth}px`
+    },
+  },
+  watch: {
+    '$route.path': {
+      handler() {
+        this.pickLink()
+      },
+    },
+    '$route.query': {
+      handler() {
+        if (this.query) this.pickLink()
+      },
+    },
+  },
+  mounted() {
+    window.addEventListener('resize', this.pickLink)
+    this.pickLink()
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.pickLink)
+  },
+  methods: {
+    pickLink() {
+      this.activeIndex = this.query
+        ? this.filteredLinks.findIndex(
+          (x) => (x.href === '' ? undefined : x.href) === this.$route.path[this.query]
+        )
+        : this.filteredLinks.findIndex((x) => x.href === decodeURIComponent(this.$route.path))
+
+      if (this.activeIndex !== -1) {
+        this.startAnimation()
+      } else {
+        this.oldIndex = -1
+        this.sliderPositionX = 0
+        this.selectedElementWidth = 0
+      }
+    },
+    startAnimation() {
+      const el = this.$refs.linkElements[this.activeIndex].$el
+
+      this.sliderPositionX = el.offsetLeft
+      this.sliderPositionY = el.offsetTop + el.offsetHeight
+      this.selectedElementWidth = el.offsetWidth
+    },
+  },
+}
+</script>
+
 <style lang="scss" scoped>
-.omorphia__navrow {
+.navigation {
   display: flex;
   flex-direction: row;
+  align-items: center;
+  grid-gap: 1rem;
+  flex-wrap: wrap;
+  position: relative;
 
-  .right-slot {
-    margin-left: auto;
-  }
-
-  :deep(.btn) {
+  .nav-link {
+    text-transform: capitalize;
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text);
     position: relative;
 
-    &::after {
-      content: '';
-      position: absolute;
-      width: calc(100% - var(--gap-lg) * 2);
-      height: 4px;
-      bottom: 4px;
-      border-radius: var(--radius-max);
-      background-color: var(--color-brand);
-      opacity: 0;
+    &:hover {
+      color: var(--color-text);
+
+      &::after {
+        opacity: 0.4;
+      }
     }
 
-    &:hover::after {
-      opacity: 50%;
+    &:active::after {
+      opacity: 0.2;
     }
 
-    &.selected {
-      color: var(--color-contrast);
-      font-weight: bold;
+    &.router-link-exact-active {
+      color: var(--color-text);
 
       &::after {
         opacity: 1;
       }
     }
   }
+
+  &.use-animation {
+    .nav-link {
+      &.is-active::after {
+        opacity: 0;
+      }
+    }
+  }
+
+  .nav-indicator {
+    position: absolute;
+    height: 0.25rem;
+    bottom: -5px;
+    left: 0;
+    width: 3rem;
+    transition: all ease-in-out 0.2s;
+    border-radius: var(--size-rounded-max);
+    background-color: var(--color-brand);
+
+    @media (prefers-reduced-motion) {
+      transition: none !important;
+    }
+  }
 }
 </style>
diff --git a/lib/components/search/Categories.vue b/lib/components/search/Categories.vue
index 267e37720..1315893d7 100644
--- a/lib/components/search/Categories.vue
+++ b/lib/components/search/Categories.vue
@@ -9,7 +9,7 @@
   </div>
 </template>
 <script setup>
-import { formatCategory } from '@/components/utils'
+import { formatCategory } from '@/helpers/utils.js'
 </script>
 <script>
 export default {
diff --git a/lib/helpers/highlight.js b/lib/helpers/highlight.js
new file mode 100644
index 000000000..a5fca863b
--- /dev/null
+++ b/lib/helpers/highlight.js
@@ -0,0 +1,63 @@
+import hljs from 'highlight.js/lib/core'
+// Scripting
+import javascript from 'highlight.js/lib/languages/javascript'
+import python from 'highlight.js/lib/languages/python'
+import lua from 'highlight.js/lib/languages/lua'
+// Coding
+import java from 'highlight.js/lib/languages/java'
+import kotlin from 'highlight.js/lib/languages/kotlin'
+import scala from 'highlight.js/lib/languages/scala'
+import groovy from 'highlight.js/lib/languages/groovy'
+// Configs
+import gradle from 'highlight.js/lib/languages/gradle'
+import json from 'highlight.js/lib/languages/json'
+import ini from 'highlight.js/lib/languages/ini'
+import yaml from 'highlight.js/lib/languages/yaml'
+import xml from 'highlight.js/lib/languages/xml'
+import properties from 'highlight.js/lib/languages/properties'
+import { md, configuredXss } from '@/helpers/parse'
+
+/* REGISTRATION */
+// Scripting
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('lua', lua)
+// Coding
+hljs.registerLanguage('java', java)
+hljs.registerLanguage('kotlin', kotlin)
+hljs.registerLanguage('scala', scala)
+hljs.registerLanguage('groovy', groovy)
+// Configs
+hljs.registerLanguage('gradle', gradle)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('ini', ini)
+hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('properties', properties)
+
+/* ALIASES */
+// Scripting
+hljs.registerAliases(['js'], { languageName: 'javascript' })
+hljs.registerAliases(['py'], { languageName: 'python' })
+// Coding
+hljs.registerAliases(['kt'], { languageName: 'kotlin' })
+// Configs
+hljs.registerAliases(['json5'], { languageName: 'json' })
+hljs.registerAliases(['toml'], { languageName: 'ini' })
+hljs.registerAliases(['yml'], { languageName: 'yaml' })
+hljs.registerAliases(['html', 'htm', 'xhtml', 'mcui', 'fxml'], { languageName: 'xml' })
+
+export const renderHighlightedString = (string) =>
+  configuredXss.process(
+    md({
+      highlight: function (str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            return hljs.highlight(str, { language: lang }).value
+          } catch (__) { /* empty */ }
+        }
+
+        return ''
+      },
+    }).render(string)
+  )
diff --git a/lib/helpers/index.js b/lib/helpers/index.js
new file mode 100644
index 000000000..0e4b90e76
--- /dev/null
+++ b/lib/helpers/index.js
@@ -0,0 +1,3 @@
+export * from './highlight'
+export * from './parse'
+export * from './utils'
diff --git a/lib/components/parse.js b/lib/helpers/parse.js
similarity index 92%
rename from lib/components/parse.js
rename to lib/helpers/parse.js
index f68d021b6..dbfe6b5c3 100644
--- a/lib/components/parse.js
+++ b/lib/helpers/parse.js
@@ -31,6 +31,10 @@ export const configuredXss = new xss.FilterXSS({
             /^https?:\/\/(www\.)?youtube(-nocookie)?\.com\/embed\/[a-zA-Z0-9_-]{11}(\?&autoplay=[0-1]{1})?$/,
           remove: ['&autoplay=1'], // Prevents autoplay
         },
+        {
+          regex: /^https?:\/\/(www\.)?discord\.com\/widget\?id=\d{18,19}(&theme=\w+)?$/,
+          remove: [/&theme=\w+/],
+        },
       ]
 
       for (const source of allowedSources) {
@@ -82,9 +86,7 @@ export const md = (options = {}) => {
         if (allowedHostnames.includes(url.hostname)) {
           return defaultLinkOpenRenderer(tokens, idx, options, env, self)
         }
-      } catch (err) {
-        // Ignore
-      }
+      } catch (err) {}
     }
 
     tokens[idx].attrSet('rel', 'noopener nofollow ugc')
@@ -109,21 +111,22 @@ export const md = (options = {}) => {
         const url = new URL(src)
 
         const allowedHostnames = [
+          'imgur.com',
           'i.imgur.com',
           'cdn-raw.modrinth.com',
           'cdn.modrinth.com',
           'staging-cdn-raw.modrinth.com',
           'staging-cdn.modrinth.com',
+          'github.com',
           'raw.githubusercontent.com',
           'img.shields.io',
+          'i.postimg.cc',
         ]
 
         if (allowedHostnames.includes(url.hostname)) {
           return defaultImageRenderer(tokens, idx, options, env, self)
         }
-      } catch (err) {
-        /* empty */
-      }
+      } catch (err) {}
       token.attrs[index][1] = `//wsrv.nl/?url=${encodeURIComponent(src)}`
     }
 
diff --git a/lib/components/utils.js b/lib/helpers/utils.js
similarity index 100%
rename from lib/components/utils.js
rename to lib/helpers/utils.js
diff --git a/lib/index.js b/lib/index.js
index e2b721a72..52cf8c3a2 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -10,5 +10,6 @@ function install(app) {
 
 export default { install }
 export * from './components'
+export * from './helpers'
 
 import './assets/omorphia.scss'
diff --git a/package.json b/package.json
index ccdc5c35f..04875fa1d 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   "dependencies": {
     "dayjs": "^1.11.7",
     "floating-vue": "^2.0.0-beta.20",
+    "highlight.js": "^11.7.0",
     "markdown-it": "^13.0.1",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
diff --git a/yarn.lock b/yarn.lock
index 7bce7f2a7..3f0e932e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1064,6 +1064,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+highlight.js@^11.7.0:
+  version "11.7.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.7.0.tgz#3ff0165bc843f8c9bce1fd89e2fda9143d24b11e"
+  integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
+
 ignore@^5.2.0:
   version "5.2.4"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"

From 9ff3ab1a2b74d8412de3ca24e206327d48f47569 Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Tue, 28 Mar 2023 10:42:03 -0700
Subject: [PATCH 2/4] lint

---
 lib/components/nav/NavRow.vue | 4 ++--
 lib/helpers/highlight.js      | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/components/nav/NavRow.vue b/lib/components/nav/NavRow.vue
index ba0fa6322..a1cf7f733 100644
--- a/lib/components/nav/NavRow.vue
+++ b/lib/components/nav/NavRow.vue
@@ -81,8 +81,8 @@ export default {
     pickLink() {
       this.activeIndex = this.query
         ? this.filteredLinks.findIndex(
-          (x) => (x.href === '' ? undefined : x.href) === this.$route.path[this.query]
-        )
+            (x) => (x.href === '' ? undefined : x.href) === this.$route.path[this.query]
+          )
         : this.filteredLinks.findIndex((x) => x.href === decodeURIComponent(this.$route.path))
 
       if (this.activeIndex !== -1) {
diff --git a/lib/helpers/highlight.js b/lib/helpers/highlight.js
index a5fca863b..f250c4e4d 100644
--- a/lib/helpers/highlight.js
+++ b/lib/helpers/highlight.js
@@ -54,7 +54,9 @@ export const renderHighlightedString = (string) =>
         if (lang && hljs.getLanguage(lang)) {
           try {
             return hljs.highlight(str, { language: lang }).value
-          } catch (__) { /* empty */ }
+          } catch (__) {
+            /* empty */
+          }
         }
 
         return ''

From 70e894c26856d1ea2a6832c332662c179d078b75 Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Tue, 28 Mar 2023 10:43:16 -0700
Subject: [PATCH 3/4] fix vars

---
 lib/components/nav/NavRow.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/components/nav/NavRow.vue b/lib/components/nav/NavRow.vue
index a1cf7f733..f002a2702 100644
--- a/lib/components/nav/NavRow.vue
+++ b/lib/components/nav/NavRow.vue
@@ -116,11 +116,11 @@ export default {
   .nav-link {
     text-transform: capitalize;
     font-weight: var(--font-weight-bold);
-    color: var(--color-text);
+    color: var(--color-base);
     position: relative;
 
     &:hover {
-      color: var(--color-text);
+      color: var(--color-base);
 
       &::after {
         opacity: 0.4;
@@ -132,7 +132,7 @@ export default {
     }
 
     &.router-link-exact-active {
-      color: var(--color-text);
+      color: var(--color-base);
 
       &::after {
         opacity: 1;
@@ -155,7 +155,7 @@ export default {
     left: 0;
     width: 3rem;
     transition: all ease-in-out 0.2s;
-    border-radius: var(--size-rounded-max);
+    border-radius: var(--radius-max);
     background-color: var(--color-brand);
 
     @media (prefers-reduced-motion) {

From 8cc44b3958571c046afed33971745d5a0d3dccb7 Mon Sep 17 00:00:00 2001
From: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>
Date: Tue, 28 Mar 2023 18:02:22 -0400
Subject: [PATCH 4/4] Update parse.js

---
 lib/helpers/parse.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/helpers/parse.js b/lib/helpers/parse.js
index dbfe6b5c3..41f31963d 100644
--- a/lib/helpers/parse.js
+++ b/lib/helpers/parse.js
@@ -86,7 +86,9 @@ export const md = (options = {}) => {
         if (allowedHostnames.includes(url.hostname)) {
           return defaultLinkOpenRenderer(tokens, idx, options, env, self)
         }
-      } catch (err) {}
+      } catch (err) {
+        /* empty */
+      }
     }
 
     tokens[idx].attrSet('rel', 'noopener nofollow ugc')
@@ -126,7 +128,9 @@ export const md = (options = {}) => {
         if (allowedHostnames.includes(url.hostname)) {
           return defaultImageRenderer(tokens, idx, options, env, self)
         }
-      } catch (err) {}
+      } catch (err) {
+        /* empty */
+      }
       token.attrs[index][1] = `//wsrv.nl/?url=${encodeURIComponent(src)}`
     }