From dbe1f7dff8aec3f3f7f1e0dabc8a483a6aac190d Mon Sep 17 00:00:00 2001
From: Stuyk <trevorwessel@protonmail.com>
Date: Tue, 9 Apr 2024 11:19:52 +0100
Subject: [PATCH 1/4] fix: tab hover stuck on mouse leave (#63)

* fix: tab hover stuck on mouse leave

* fix: lint
---
 src/components/ui/UiTabs.vue         | 14 ++++++++++++--
 tests/components/UserBalance.spec.ts | 14 ++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/UiTabs.vue b/src/components/ui/UiTabs.vue
index 6541d1e..22815ac 100644
--- a/src/components/ui/UiTabs.vue
+++ b/src/components/ui/UiTabs.vue
@@ -2,7 +2,13 @@
   <DropDown v-model="tabIdx" :values="options" class="md:hidden" v-bind="$attrs" @select="changeTab" />
 
   <div class="hidden md:flex flex-col w-full pt-12 relative" v-bind="$attrs">
-    <div ref="toggler" class="flex flex-row w-full gap-6 md:gap-12 relative" role="radiogroup" aria-label="Switch">
+    <div
+      ref="toggler"
+      class="flex flex-row w-full gap-6 md:gap-12 relative"
+      role="radiogroup"
+      aria-label="Switch"
+      @mouseleave="changeTab(lastTab)"
+    >
       <!-- Tabs -->
       <div
         v-for="(option, index) in options"
@@ -47,6 +53,7 @@ type Props = {
 };
 
 const tabSelected = defineModel<string>();
+const lastTab = ref<number>(0);
 const toggler = ref<HTMLElement | null>(null);
 const tabRefs = ref<HTMLElement[]>([]);
 const line = ref<HTMLElement | null>(null);
@@ -55,7 +62,10 @@ const tabIdx = ref<number>(0);
 const props = withDefaults(defineProps<Props>(), { modelValue: undefined });
 function changeTab(idx: number = 0, isClicked = true) {
   tabIdx.value = idx;
-  if (isClicked) tabSelected.value = props.options[tabIdx.value];
+  if (isClicked) {
+    tabSelected.value = props.options[tabIdx.value];
+    lastTab.value = idx;
+  }
   const el = tabRefs.value[tabIdx.value] as HTMLElement;
   if (!el || !line.value) {
     return;
diff --git a/tests/components/UserBalance.spec.ts b/tests/components/UserBalance.spec.ts
index 9b13a1e..d4346dc 100644
--- a/tests/components/UserBalance.spec.ts
+++ b/tests/components/UserBalance.spec.ts
@@ -1,9 +1,11 @@
-import { test, expect } from '@playwright/experimental-ct-vue';
-import UserBalance from '../../src/components/helper/UserBalance.vue';
+import { test, expect } from "@playwright/experimental-ct-vue";
+import UserBalance from "../../src/components/helper/UserBalance.vue";
 
 test.use({ viewport: { width: 500, height: 500 } });
 
-test('UserBalance balance formatted display', async ({ mount }) => {
-  const component = await mount(UserBalance,{props: { address: "govgen1995thtfe5gs47wrrjg9gsq0xs0udq3lr8yk7z8", denom: "ugovgen"}});
-  await expect(component).toContainText('6.223631');
-});
\ No newline at end of file
+test("UserBalance balance formatted display", async ({ mount }) => {
+  const component = await mount(UserBalance, {
+    props: { address: "govgen1995thtfe5gs47wrrjg9gsq0xs0udq3lr8yk7z8", denom: "ugovgen" },
+  });
+  await expect(component).toContainText("6.223631");
+});

From 8fe6fae4636c498f51bc5843669df55ba103876c Mon Sep 17 00:00:00 2001
From: Stuyk <trevorwessel@protonmail.com>
Date: Tue, 9 Apr 2024 11:37:34 +0100
Subject: [PATCH 2/4] feat: code blocks (#61)

* feat: add info tab, add description tab

* feat: code blocks

* Update src/components/proposals/ProposalWrapper.vue

Co-authored-by: Clockwork <alex@clockwork.gr>

---------

Co-authored-by: Clockwork <alex@clockwork.gr>
---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 25 +++++++-
 src/components/popups/ProposalDescription.vue | 15 -----
 src/components/proposals/ProposalWrapper.vue  | 59 +++++++++----------
 src/components/ui/icons/Curlybrackets.vue     |  7 +++
 src/localization/index.ts                     |  1 +
 6 files changed, 62 insertions(+), 46 deletions(-)
 delete mode 100644 src/components/popups/ProposalDescription.vue
 create mode 100644 src/components/ui/icons/Curlybrackets.vue

diff --git a/package.json b/package.json
index 86fba7a..38f4c2b 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@vitest/coverage-istanbul": "^1.2.2",
     "@vue/apollo-composable": "^4.0.1",
     "@vueuse/core": "^10.8.0",
+    "@wdns/vue-code-block": "^2.3.2",
     "chart.js": "^4.4.2",
     "chartjs-chart-treemap": "^2.3.0",
     "cosmjs-types": "^0.9.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1022eaf..4cea22c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ dependencies:
   '@vueuse/core':
     specifier: ^10.8.0
     version: 10.8.0(vue@3.4.15)
+  '@wdns/vue-code-block':
+    specifier: ^2.3.2
+    version: 2.3.2(typescript@5.3.3)
   chart.js:
     specifier: ^4.4.2
     version: 4.4.2
@@ -3097,6 +3100,17 @@ packages:
       '@walletconnect/window-getters': 1.0.0
     dev: false
 
+  /@wdns/vue-code-block@2.3.2(typescript@5.3.3):
+    resolution: {integrity: sha512-wFqSzaB+587XbWjq+L+IYZAZsCILNZVgRZ+FAoPH5n1TQoBpxfJGUsG8GrTHHIgiuz7txL79DqvRj3oy+ziC1g==}
+    dependencies:
+      highlight.js: 11.9.0
+      prismjs: 1.29.0
+      ua-parser-js: 1.0.37
+      vue: 3.4.15(typescript@5.3.3)
+    transitivePeerDependencies:
+      - typescript
+    dev: false
+
   /@whatwg-node/events@0.0.3:
     resolution: {integrity: sha512-IqnKIDWfXBJkvy/k6tzskWTc2NK3LcqHlb+KHGCrjOCH4jfQckRX0NAiIcC/vIqQkzLYw2r2CTSwAxcrtcD6lA==}
     dev: true
@@ -5283,6 +5297,11 @@ packages:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
     dev: false
 
+  /highlight.js@11.9.0:
+    resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
   /hmac-drbg@1.0.1:
     resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==}
     dependencies:
@@ -6757,6 +6776,11 @@ packages:
       ansi-styles: 5.2.0
       react-is: 18.2.0
 
+  /prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /process@0.11.10:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
@@ -7686,7 +7710,6 @@ packages:
 
   /ua-parser-js@1.0.37:
     resolution: {integrity: sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==}
-    dev: true
 
   /uc.micro@1.0.6:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
diff --git a/src/components/popups/ProposalDescription.vue b/src/components/popups/ProposalDescription.vue
deleted file mode 100644
index 1b7b7ab..0000000
--- a/src/components/popups/ProposalDescription.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import ModalBox from "@/components/common/ModalBox.vue";
-
-const visible = defineModel<boolean>();
-</script>
-
-<template>
-  <div class="relative">
-    <ModalBox v-model="visible" title="Description" @close="visible = false">
-      <div class="p-12">
-        <slot></slot>
-      </div>
-    </ModalBox>
-  </div>
-</template>
diff --git a/src/components/proposals/ProposalWrapper.vue b/src/components/proposals/ProposalWrapper.vue
index 50caeef..2182f66 100644
--- a/src/components/proposals/ProposalWrapper.vue
+++ b/src/components/proposals/ProposalWrapper.vue
@@ -25,12 +25,13 @@ import * as Utility from "@/utility/index";
 import CommonButton from "../ui/CommonButton.vue";
 import Breakdown from "@/components/proposals/Breakdown.vue";
 import ValidatorBreakdown from "./ValidatorBreakdown.vue";
-import ProposalDescription from "@/components/popups/ProposalDescription.vue";
 import MarkdownParser from "@/components/common/MarkdownParser.vue";
+import ModalBox from "@/components/common/ModalBox.vue";
+import { VCodeBlock } from "@wdns/vue-code-block";
 
 const voteTypes = ["yes", "no", "veto", "abstain"] as const;
 type BreakdownType = "voters" | "validators" | null;
-type TabNames = "Info" | "Voters" | "Discussions" | "Links";
+type TabNames = "Description" | "Info" | "Voters" | "Discussions" | "Links";
 type VoteTypes = (typeof voteTypes)[number];
 
 dayjs.extend(duration);
@@ -199,11 +200,13 @@ const termLink = computed(() => `Link #${props.proposalId}`);
 const termDiscussion = computed(() => `Proposal #${props.proposalId}`);
 
 const tabSelected = ref<TabNames>("Info");
-const tabOptions = reactive<TabNames[]>(["Info", "Voters", "Discussions", "Links"]);
+const tabOptions = reactive<TabNames[]>(["Description", "Info", "Voters", "Discussions", "Links"]);
 
 const breakdownType = ref<("validators" | "voters") | null>(null);
 const breakdownOffset = ref(0);
 
+const showJsonModal = ref(false);
+
 const inDeposit = computed(() => proposal.value?.proposal[0].status === "PROPOSAL_STATUS_DEPOSIT_PERIOD");
 const inVoting = computed(() => proposal.value?.proposal[0].status === "PROPOSAL_STATUS_VOTING_PERIOD");
 const failed = computed(() => proposal.value?.proposal[0].status === "PROPOSAL_STATUS_FAILED");
@@ -241,12 +244,6 @@ const tally_params = computed(() => {
   }
 });
 
-const shouldTrim = computed(() => {
-  return (proposal.value?.proposal[0].description?.length ?? 0) > 650;
-});
-
-const showAll = ref(false);
-
 const quorum = computed(() => {
   return parseFloat(tally_params.value?.quorum ?? "0");
 });
@@ -385,7 +382,8 @@ function showBreakdown(type: BreakdownType) {
 
 <template>
   <div>
-    <div class="badges my-8 md:my-12">
+    <div class="flex flex-row justify-between items-center">
+      <div class="badges my-8 md:my-12">
       <template v-if="inVoting">
         <SimpleBadge :type="ContextTypes.INFO" icon="progress" class="mr-3"
           >{{ $t("proposalpage.badges.votingPeriod") }}
@@ -412,6 +410,11 @@ function showBreakdown(type: BreakdownType) {
         $t("proposalpage.badges.passed")
       }}</SimpleBadge>
     </div>
+    <div class="flex items-center text-300 text-grey-100 start-7 hover:opacity-50 hover:cursor-pointer" @click="showJsonModal = true">
+      <Icon icon="Curlybrackets" />&nbsp; JSON
+    </div>
+    </div>
+
     <div class="flex mb-12 flex-col md:flex-row">
       <div class="basic-details flex-grow md:pr-10">
         <h1 class="font-termina text-500 md:text-800 text-light mb-8 md:mb-16 pb-2">
@@ -546,17 +549,6 @@ function showBreakdown(type: BreakdownType) {
         <div v-if="isTabSelected('Info')" class="w-full">
           <div class="flex flex-col gap-4 md:gap-6">
             <div class="flex flex-col md:flex-row gap-4 lg:gap-6">
-              <SimpleCard class="w-full md:w-1/2 flex-grow">
-                <div class="text-light text-300 md:text-500 text-left mb-8 font-medium">
-                  {{ $t("proposalpage.labels.proposalDescription") }}
-                </div>
-                <div v-if="proposal" class="text-grey-100">
-                  <MarkdownParser v-model="proposal.proposal[0].description" :limit="356" />
-                  <template v-if="shouldTrim">
-                    <span class="text-light cursor-pointer" @click="showAll = true">{{ $t("ui.readMore") }}</span>
-                  </template>
-                </div>
-              </SimpleCard>
               <SimpleCard class="w-full md:w-1/2 flex-grow">
                 <div class="flex w-full flex-wrap">
                   <div class="w-full flex-2 mb-10">
@@ -659,9 +651,7 @@ function showBreakdown(type: BreakdownType) {
                   <div class="grow w-full md:w-1/2 mb-10 md:pl-3 pr-0">
                     <div class="text-grey-100 text-200 mb-2">{{ $t("proposalpage.labels.changes") }}</div>
                     <div class="text-light text-100">
-                      <code>
-                        <pre class="text-pretty break-words">{{ proposal?.proposal[0].content.changes }}</pre>
-                      </code>
+                      <VCodeBlock :code="JSON.stringify(proposal?.proposal[0].content.changes, null, '\t')" prismjs />
                     </div>
                   </div>
                 </div>
@@ -688,9 +678,7 @@ function showBreakdown(type: BreakdownType) {
                   <div class="grow w-1/2 mb-10">
                     <div class="text-grey-100 text-200 mb-2">{{ $t("proposalpage.labels.upgradePlan") }}</div>
                     <div class="text-light text-100">
-                      <code>
-                        <pre class="text-pretty">{{ proposal?.proposal[0].content.plan }}</pre>
-                      </code>
+                      <VCodeBlock :code="JSON.stringify(proposal?.proposal[0].content.plan, null, '\t')" prismjs />
                     </div>
                   </div>
                 </div>
@@ -699,6 +687,15 @@ function showBreakdown(type: BreakdownType) {
           </div>
         </div>
 
+        <div v-else-if="isTabSelected('Description')" class="w-full">
+          <div class="flex flex-col gap-8 p-10 bg-grey-400 rounded-md">
+            <span>Proposal Description</span>
+            <div v-if="proposal" class="text-grey-50">
+              <MarkdownParser v-model="proposal.proposal[0].description" />
+            </div>
+          </div>
+        </div>
+
         <div v-else-if="isTabSelected('Voters')" class="flex flex-col w-full gap-6">
           <template v-if="!breakdownType">
             <!-- Voters Panel -->
@@ -779,9 +776,11 @@ function showBreakdown(type: BreakdownType) {
         </div>
       </Transition>
     </div>
-    <ProposalDescription v-if="proposal" v-model="showAll">
-      <MarkdownParser v-model="proposal.proposal[0].description" />
-    </ProposalDescription>
+    <ModalBox title="JSON" v-model="showJsonModal" @close="showJsonModal = false">
+      <div class="p-4" v-if="proposal">
+        <VCodeBlock :code="JSON.stringify(proposal, null, '\t')" prismjs />
+      </div>
+    </ModalBox>
   </div>
 </template>
 
diff --git a/src/components/ui/icons/Curlybrackets.vue b/src/components/ui/icons/Curlybrackets.vue
new file mode 100644
index 0000000..ba64503
--- /dev/null
+++ b/src/components/ui/icons/Curlybrackets.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 3C6.66886 3 5.97463 3.14224 5.41197 3.44311C4.83669 3.75073 4.44961 4.19732 4.20014 4.71186C3.7489 5.64254 3.74949 6.82294 3.74997 7.78253L3.75 7.875C3.75 8.96211 3.73429 9.79767 3.45014 10.3837C3.32461 10.6426 3.14918 10.8406 2.88072 10.9841C2.59963 11.1344 2.16886 11.25 1.5 11.25C1.08579 11.25 0.75 11.5858 0.75 12C0.75 12.4142 1.08579 12.75 1.5 12.75C2.16886 12.75 2.59963 12.8656 2.88072 13.0159C3.14918 13.1594 3.32461 13.3574 3.45014 13.6163C3.73429 14.2023 3.75 15.0379 3.75 16.125L3.74997 16.2175C3.74949 17.1771 3.7489 18.3575 4.20014 19.2881C4.44961 19.8027 4.83669 20.2493 5.41197 20.5569C5.97463 20.8578 6.66886 21 7.5 21C7.91421 21 8.25 20.6642 8.25 20.25C8.25 19.8358 7.91421 19.5 7.5 19.5C6.83114 19.5 6.40037 19.3844 6.11928 19.2341C5.85082 19.0906 5.67539 18.8926 5.54986 18.6337C5.26571 18.0477 5.25 17.2121 5.25 16.125L5.25003 16.0325C5.25051 15.0729 5.2511 13.8925 4.79986 12.9619C4.62402 12.5992 4.37983 12.2703 4.04955 12C4.37983 11.7297 4.62402 11.4008 4.79986 11.0381C5.2511 10.1075 5.25051 8.92706 5.25003 7.96747L5.25 7.875C5.25 6.78789 5.26571 5.95233 5.54986 5.36627C5.67539 5.10737 5.85082 4.90943 6.11928 4.76588C6.40037 4.61557 6.83114 4.5 7.5 4.5C7.91421 4.5 8.25 4.16421 8.25 3.75C8.25 3.33579 7.91421 3 7.5 3ZM16.5 3C16.0858 3 15.75 3.33579 15.75 3.75C15.75 4.16421 16.0858 4.5 16.5 4.5C17.1689 4.5 17.5996 4.61557 17.8807 4.76588C18.1492 4.90943 18.3246 5.10737 18.4501 5.36627C18.7343 5.95233 18.75 6.78789 18.75 7.875L18.75 7.96747C18.7495 8.92706 18.7489 10.1075 19.2001 11.0381C19.376 11.4008 19.6202 11.7297 19.9505 12C19.6202 12.2703 19.376 12.5992 19.2001 12.9619C18.7489 13.8925 18.7495 15.0729 18.75 16.0325L18.75 16.125C18.75 17.2121 18.7343 18.0477 18.4501 18.6337C18.3246 18.8926 18.1492 19.0906 17.8807 19.2341C17.5996 19.3844 17.1689 19.5 16.5 19.5C16.0858 19.5 15.75 19.8358 15.75 20.25C15.75 20.6642 16.0858 21 16.5 21C17.3311 21 18.0254 20.8578 18.588 20.5569C19.1633 20.2493 19.5504 19.8027 19.7999 19.2881C20.2511 18.3575 20.2505 17.1771 20.25 16.2175L20.25 16.125C20.25 15.0379 20.2657 14.2023 20.5499 13.6163C20.6754 13.3574 20.8508 13.1594 21.1193 13.0159C21.4004 12.8656 21.8311 12.75 22.5 12.75C22.9142 12.75 23.25 12.4142 23.25 12C23.25 11.5858 22.9142 11.25 22.5 11.25C21.8311 11.25 21.4004 11.1344 21.1193 10.9841C20.8508 10.8406 20.6754 10.6426 20.5499 10.3837C20.2657 9.79767 20.25 8.96211 20.25 7.875L20.25 7.78253C20.2505 6.82294 20.2511 5.64254 19.7999 4.71186C19.5504 4.19732 19.1633 3.75073 18.588 3.44311C18.0254 3.14224 17.3311 3 16.5 3Z" fill="currentColor"/>
+</svg>
+
+
+</template>
\ No newline at end of file
diff --git a/src/localization/index.ts b/src/localization/index.ts
index 35fff0c..94fe3d7 100644
--- a/src/localization/index.ts
+++ b/src/localization/index.ts
@@ -132,6 +132,7 @@ export const messages = {
         Info: "Info",
         Voters: "Voters",
         Discussions: "Discussions",
+        Description: "Description",
         Links: "Links",
         Yes: "Yes",
         No: "No",

From 5505989c25a24f549d185492e2ab1332658c3192 Mon Sep 17 00:00:00 2001
From: Stuyk <trevorwessel@protonmail.com>
Date: Tue, 9 Apr 2024 11:37:47 +0100
Subject: [PATCH 3/4] feat: mardown-alerts (#64)

---
 package.json                             |   2 +
 pnpm-lock.yaml                           | 103 +++++++++--------------
 src/components/common/MarkdownParser.vue |  84 +++++++++++++++++-
 src/style.css                            |   6 +-
 tailwind.config.ts                       |   3 +
 5 files changed, 128 insertions(+), 70 deletions(-)

diff --git a/package.json b/package.json
index 38f4c2b..3fbb1d5 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@giscus/vue": "^2.4.0",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@keplr-wallet/types": "^0.12.69",
+    "@tailwindcss/typography": "^0.5.12",
     "@vitest/coverage-istanbul": "^1.2.2",
     "@vue/apollo-composable": "^4.0.1",
     "@vueuse/core": "^10.8.0",
@@ -38,6 +39,7 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "markdown-it": "^14.1.0",
+    "markdown-it-github-alert": "^1.0.6",
     "mitt": "^3.0.1",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vue": "^3.4.15",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cea22c..4f69fd5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ dependencies:
   '@keplr-wallet/types':
     specifier: ^0.12.69
     version: 0.12.70
+  '@tailwindcss/typography':
+    specifier: ^0.5.12
+    version: 0.5.12(tailwindcss@3.4.1)
   '@vitest/coverage-istanbul':
     specifier: ^1.2.2
     version: 1.2.2(vitest@1.2.2)
@@ -65,6 +68,9 @@ dependencies:
   markdown-it:
     specifier: ^14.1.0
     version: 14.1.0
+  markdown-it-github-alert:
+    specifier: ^1.0.6
+    version: 1.0.6
   mitt:
     specifier: ^3.0.1
     version: 3.0.1
@@ -217,7 +223,6 @@ packages:
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
-    dev: true
 
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
@@ -2049,7 +2054,6 @@ packages:
       strip-ansi-cjs: /strip-ansi@6.0.1
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: /wrap-ansi@7.0.0
-    dev: true
 
   /@istanbuljs/schema@0.1.3:
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
@@ -2163,7 +2167,6 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
     requiresBuild: true
-    dev: true
     optional: true
 
   /@pkgr/core@0.1.1:
@@ -2416,6 +2419,18 @@ packages:
   /@sinclair/typebox@0.27.8:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
+  /@tailwindcss/typography@0.5.12(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-CNwpBpconcP7ppxmuq3qvaCxiRWnbhANpY/ruH4L5qs2GCiVDJXde/pjj2HWPV1+Q4G9+V/etrwUYopdcjAlyg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.1
+    dev: false
+
   /@types/dompurify@3.0.5:
     resolution: {integrity: sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==}
     dependencies:
@@ -3278,12 +3293,10 @@ packages:
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /ansi-regex@6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
-    dev: true
 
   /ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
@@ -3296,7 +3309,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: true
 
   /ansi-styles@5.2.0:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
@@ -3305,11 +3317,9 @@ packages:
   /ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
-    dev: true
 
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: true
 
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -3317,7 +3327,6 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /arch@2.2.0:
     resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==}
@@ -3325,7 +3334,6 @@ packages:
 
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -3469,7 +3477,6 @@ packages:
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: true
 
   /bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
@@ -3519,7 +3526,6 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
     dependencies:
       balanced-match: 1.0.2
-    dev: true
 
   /braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@@ -3664,7 +3670,6 @@ packages:
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
@@ -3811,7 +3816,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /cipher-base@1.0.4:
     resolution: {integrity: sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==}
@@ -3896,14 +3900,12 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
 
   /colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
@@ -3919,7 +3921,6 @@ packages:
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
@@ -4098,7 +4099,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
@@ -4504,7 +4504,6 @@ packages:
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true
 
   /diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
@@ -4527,7 +4526,6 @@ packages:
 
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true
 
   /doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
@@ -4568,7 +4566,6 @@ packages:
 
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-    dev: true
 
   /electron-to-chromium@1.4.656:
     resolution: {integrity: sha512-9AQB5eFTHyR3Gvt2t/NwR0le2jBSUNwCnMbUCejFWHD+so4tH40/dRLgoE+jxlPeWS43XJewyvCv+I8LPMl49Q==}
@@ -4591,11 +4588,9 @@ packages:
 
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-    dev: true
 
   /emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: true
 
   /entities@3.0.1:
     resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==}
@@ -5012,7 +5007,6 @@ packages:
     dependencies:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
-    dev: true
 
   /form-data@4.0.0:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
@@ -5096,7 +5090,6 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob@10.3.10:
     resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
@@ -5108,7 +5101,6 @@ packages:
       minimatch: 9.0.3
       minipass: 7.0.4
       path-scurry: 1.10.1
-    dev: true
 
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@@ -5472,7 +5464,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: true
 
   /is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
@@ -5497,7 +5488,6 @@ packages:
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
-    dev: true
 
   /is-generator-function@1.0.10:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
@@ -5679,12 +5669,10 @@ packages:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
-    dev: true
 
   /jiti@1.21.0:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
     hasBin: true
-    dev: true
 
   /jose@5.2.3:
     resolution: {integrity: sha512-KUXdbctm1uHVL8BYhnyHkgp3zDX5KW8ZhAKVFEfUbU2P8Alpzjb+48hHvjOdQIyPshoblhzsuqOwEEAbtHVirA==}
@@ -5812,16 +5800,13 @@ packages:
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
-    dev: true
 
   /lilconfig@3.0.0:
     resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
     engines: {node: '>=14'}
-    dev: true
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true
 
   /linkify-it@4.0.1:
     resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==}
@@ -5900,9 +5885,16 @@ packages:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
     dev: false
 
+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+    dev: false
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+    dev: false
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: true
 
   /lodash.sortby@4.7.0:
     resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
@@ -5959,7 +5951,6 @@ packages:
   /lru-cache@10.2.0:
     resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
     engines: {node: 14 || >=16.14}
-    dev: true
 
   /lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
@@ -5996,6 +5987,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /markdown-it-github-alert@1.0.6:
+    resolution: {integrity: sha512-r2PAjllqovn+vsBi0e3snXzLtR/qmY9LlDLWEW4DIAn/C1Eg6WxIfmrwkdf4kDSLUmtnuVGkiWm1ldwhFd91dA==}
+    dependencies:
+      markdown-it: 13.0.2
+    dev: false
+
   /markdown-it@13.0.2:
     resolution: {integrity: sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==}
     hasBin: true
@@ -6146,7 +6143,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.1
-    dev: true
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
@@ -6155,7 +6151,6 @@ packages:
   /minipass@7.0.4:
     resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
     engines: {node: '>=16 || 14 >=14.17'}
-    dev: true
 
   /mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
@@ -6211,7 +6206,6 @@ packages:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
-    dev: true
 
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
@@ -6300,7 +6294,6 @@ packages:
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-range@0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -6337,7 +6330,6 @@ packages:
   /object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
@@ -6582,7 +6574,6 @@ packages:
     dependencies:
       lru-cache: 10.2.0
       minipass: 7.0.4
-    dev: true
 
   /path-to-regexp@2.2.1:
     resolution: {integrity: sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==}
@@ -6620,12 +6611,10 @@ packages:
   /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /pkg-dir@5.0.0:
     resolution: {integrity: sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==}
@@ -6672,7 +6661,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
-    dev: true
 
   /postcss-js@4.0.1(postcss@8.4.33):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -6682,7 +6670,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.33
-    dev: true
 
   /postcss-load-config@4.0.2(postcss@8.4.33):
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
@@ -6699,7 +6686,6 @@ packages:
       lilconfig: 3.0.0
       postcss: 8.4.33
       yaml: 2.3.4
-    dev: true
 
   /postcss-nested@6.0.1(postcss@8.4.33):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
@@ -6709,7 +6695,6 @@ packages:
     dependencies:
       postcss: 8.4.33
       postcss-selector-parser: 6.0.15
-    dev: true
 
   /postcss-nesting@12.0.4(postcss@8.4.33):
     resolution: {integrity: sha512-WuCe0KnP4vKjLZK8VNoUWKL8ZLOv/5jiM94mHcI3VszLropHwmjotdUyP/ObzqZpXuQKP2Jf9R12vIHKFSStKw==}
@@ -6722,17 +6707,23 @@ packages:
       postcss-selector-parser: 6.0.15
     dev: true
 
+  /postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: false
+
   /postcss-selector-parser@6.0.15:
     resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==}
     engines: {node: '>=4'}
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss@8.4.33:
     resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
@@ -6958,7 +6949,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: true
 
   /readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
@@ -6973,7 +6963,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /readonly-date@1.0.0:
     resolution: {integrity: sha512-tMKIV7hlk0h4mO3JTmmVuIlJVXjKk3Sep9Bf5OH0O+758ruuVkUy2J9SttDLm91IEX/WHlXPSpxMGjPj4beMIQ==}
@@ -7390,7 +7379,6 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
-    dev: true
 
   /string-width@5.1.2:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
@@ -7399,7 +7387,6 @@ packages:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
-    dev: true
 
   /string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
@@ -7411,14 +7398,12 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       ansi-regex: 5.0.1
-    dev: true
 
   /strip-ansi@7.1.0:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
     dependencies:
       ansi-regex: 6.0.1
-    dev: true
 
   /strip-final-newline@2.0.0:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
@@ -7460,7 +7445,6 @@ packages:
       mz: 2.7.0
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
-    dev: true
 
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@@ -7531,7 +7515,6 @@ packages:
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
-    dev: true
 
   /test-exclude@6.0.0:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
@@ -7550,13 +7533,11 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       thenify: 3.3.1
-    dev: true
 
   /thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
     dependencies:
       any-promise: 1.3.0
-    dev: true
 
   /throttle-debounce@5.0.0:
     resolution: {integrity: sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==}
@@ -7643,7 +7624,6 @@ packages:
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: true
 
   /ts-invariant@0.10.3:
     resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==}
@@ -8147,7 +8127,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
   /wrap-ansi@8.1.0:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
@@ -8156,7 +8135,6 @@ packages:
       ansi-styles: 6.2.1
       string-width: 5.1.2
       strip-ansi: 7.1.0
-    dev: true
 
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
@@ -8239,7 +8217,6 @@ packages:
   /yaml@2.3.4:
     resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
     engines: {node: '>= 14'}
-    dev: true
 
   /yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
diff --git a/src/components/common/MarkdownParser.vue b/src/components/common/MarkdownParser.vue
index 57464ad..23105c0 100644
--- a/src/components/common/MarkdownParser.vue
+++ b/src/components/common/MarkdownParser.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import markdownit from "markdown-it";
 import MarkdownItMermaid from "@agoose77/markdown-it-mermaid";
+import { alertPlugin} from 'markdown-it-github-alert'
 
 import DOMPurify from "dompurify";
 
@@ -9,7 +10,7 @@ const md = markdownit({
   html: true,
   linkify: true,
   typographer: true,
-}).use(MarkdownItMermaid);
+}).use(MarkdownItMermaid).use(alertPlugin);
 
 const props = defineProps<{ limit?: number }>();
 const content = defineModel<string>();
@@ -27,13 +28,88 @@ async function parseData() {
   trimmedContent.value = DOMPurify.sanitize(htmlContent);
 }
 
+const getClasses = computed(() => {
+  return [
+    'prose',
+    'max-w-none',
+    'prose:font-interVar',
+    'prose-a:text-accent-100',
+    'prose-p:text-light',
+    'prose-code:text-accent-200',
+    'prose-li:text-light',
+    'prose-h1:text-light',
+    'prose-h1:text-400',
+    'prose-h2:text-light',
+    'prose-h2:text-300',
+    'prose-h3:text-light',
+    'prose-h3:text-200',
+    'prose-h4:text-light',
+    'prose-h4:text-200',
+    'prose-h5:text-light',
+    'prose-h5:text-200',
+    'prose-strong:text-light',
+    'prose-pre:bg-grey-500',
+    'prose-table:text-light',
+    'prose-table:border',
+    'prose-td:text-center',
+    'prose-td:p-2',
+    'prose-td:border',
+    'prose-th:text-center',
+    'prose-th:text-light',
+    'prose-th:border',
+  ]
+});
+
 onMounted(parseData);
 </script>
 
 <template>
-  <div>
+  <div :class="getClasses">
     <!-- eslint-disable vue/no-v-html -->
-    <div v-if="content" class="markdown" v-html="trimmedContent"></div>
+      <div v-if="content" v-html="trimmedContent"></div>
     <!--eslint-enable-->
   </div>
 </template>
+
+<style>
+.markdown-alert {
+    padding: 1em;
+    border-left: 0.25rem solid;
+    padding-bottom: 0px;
+    padding-top: 0px;
+    border-color: var(--border-color);
+}
+
+.markdown-alert > span {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--border-color);
+}
+
+.markdown-alert .markdown-alert-icon {
+    margin-right: 0.5em;
+    fill: var(--border-color);
+}
+
+.markdown-alert.note {
+    --border-color: #539BF5;
+}
+
+.markdown-alert.warning {
+    --border-color: #C69026;
+}
+
+.markdown-alert.important {
+    --border-color: #986EE2;
+}
+
+.markdown-alert.caution {
+    --border-color: #E5534B;
+}
+
+.markdown-alert.tip {
+    --border-color: #57AB5A;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 68e2ac8..99006e4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -133,8 +133,8 @@ html {
     @apply font-interVar;
   }
 }
-
-.markdown {
+/* 
+.markdown { 
   h1 {
     @apply text-500 font-medium my-2;
   }
@@ -191,4 +191,4 @@ html {
     @apply p-2;
     @apply text-center;
   }
-}
+} */
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 383c171..fa4e89f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,9 +1,11 @@
 import { Config } from "tailwindcss";
 import plugin from "tailwindcss/plugin";
 import defaultTheme from "tailwindcss/defaultTheme";
+import twTypography from '@tailwindcss/typography'
 
 const pxToRem = (dest: number) => 1 / (16 / dest);
 
+
 export default <Config>{
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {
@@ -106,6 +108,7 @@ export default <Config>{
     },
   ],
   plugins: [
+    twTypography,
     plugin(function ({ addUtilities, addComponents }) {
       addUtilities({
         ".clip-display": {

From 762fe7948500fb007d29d0bf1ad7a6537270c633 Mon Sep 17 00:00:00 2001
From: Stuyk <trevorwessel@protonmail.com>
Date: Tue, 9 Apr 2024 11:50:08 +0100
Subject: [PATCH 4/4] feat: translate github comments component (#69)

---
 src/components/proposals/GithubComments.vue | 14 +++++++-------
 src/localization/index.ts                   |  9 +++++++++
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/proposals/GithubComments.vue b/src/components/proposals/GithubComments.vue
index 4a39471..8397a79 100644
--- a/src/components/proposals/GithubComments.vue
+++ b/src/components/proposals/GithubComments.vue
@@ -73,8 +73,8 @@ onMounted(refresh);
       v-if="!isLoggedIn"
       class="flex flex-row gap-8 px-8 py-6 bg-gradient from-gradient-100 to-gradient-900 rounded-md text-dark justify-between items-center"
     >
-      <span class="text-400 font-medium">Sign in via GitHub to be able to post messages</span>
-      <button class="bg-dark py-4 px-6 text-light rounded-md" @click="login">GitHub Sign In</button>
+      <span class="text-400 font-medium">{{  $t('components.GithubComments.signInLong') }}</span>
+      <button class="bg-dark py-4 px-6 text-light rounded-md" @click="login">{{  $t('components.GithubComments.signIn') }}</button>
     </div>
     <div v-else class="flex flex-col gap-8 w-full">
       <div class="flex flex-row justify-between items-center">
@@ -82,7 +82,7 @@ onMounted(refresh);
           <img :src="avatar" class="w-10 h-10 rounded-circle" />
           <span class="pt-1 font-medium text-400">{{ username }}</span>
         </div>
-        <CommonButton @click="logout">Sign Out</CommonButton>
+        <CommonButton @click="logout">{{  $t('components.GithubComments.signOut') }}</CommonButton>
       </div>
       <div class="flex flex-col relative">
         <textarea
@@ -105,7 +105,7 @@ onMounted(refresh);
     </div>
 
     <div class="flex flex-row w-full justify-between items-center mt-[72px] mb-8">
-      <div class="text-500 font-medium">Proposal Discussions</div>
+      <div class="text-500 font-medium">{{  $t('components.GithubComments.proposalDiscussion') }}</div>
       <DropDown v-model="sortingType" :values="sortingList" @select="handleSortingChange" />
     </div>
     <!-- Ratio Controller -->
@@ -119,8 +119,8 @@ onMounted(refresh);
         class="w-full appearance-none bg-transparent rounded-lg focus:outline-none [&::-webkit-slider-runnable-track]:bg-grey-400 [&::-webkit-slider-runnable-track]:rounded-lg cursor-pointer"
       />
       <div class="flex flex-row justify-between gap-8">
-        <span class="text-grey-100">Upvote Ratio: {{ ratio }}</span>
-        <div class="text-200 text-grey-100 text-right">{{ sortedComments.length }} Total Comment(s)</div>
+        <span class="text-grey-100">{{  $t('components.GithubComments.upvoteRatio') }}: {{ ratio }}</span>
+        <div class="text-200 text-grey-100 text-right">{{ sortedComments.length }} {{  $t('components.GithubComments.totalComments') }}</div>
       </div>
     </div>
     <!-- Comments -->
@@ -154,7 +154,7 @@ onMounted(refresh);
             <div>{{ comment.createdAtHuman }}</div>
             <div class="flex flex-row gap-6">
               <!-- GithHub Link -->
-              <a :href="comment.url" target="_blank" class="hover:opacity-50">View on GitHub</a>
+              <a :href="comment.url" target="_blank" class="hover:opacity-50">{{  $t('components.GithubComments.viewOnGithub') }}</a>
               <!-- Upvote -->
               <div
                 :class="isLoggedIn ? ['cursor-pointer'] : []"
diff --git a/src/localization/index.ts b/src/localization/index.ts
index 94fe3d7..0cfa57f 100644
--- a/src/localization/index.ts
+++ b/src/localization/index.ts
@@ -110,6 +110,15 @@ export const messages = {
         breakdown: "Breakdown",
         noVotes: "No votes have been recorded.",
       },
+      GithubComments: {
+        signInLong: 'Sign in via GitHub to be able to post messages',
+        signIn: 'Github Sign In',
+        signOut: 'Sign Out',
+        proposalDiscussion: 'Proposal Discussion',
+        upvoteRatio: 'Upvote Ratio',
+        totalComments: 'Total Comment(s)',
+        viewOnGithub: 'View on GitHub',
+      }
     },
     ui: {
       readMore: "Read More",