minor fixes to disclosures, basic markdown support (#7133)

packages/ui/src/components/base/BasicMarkdownText.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { renderBasicInlineMarkdown } from '@modrinth/utils'
+import { computed } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		text: string
+		target?: string
+	}>(),
+	{
+		target: '_blank',
+	},
+)
+
+const html = computed(() =>
+	renderBasicInlineMarkdown(props.text, {
+		target: props.target,
+	}),
+)
+</script>
+
+<template>
+	<span class="basic-markdown-text" v-html="html" />
+</template>
+
+<style scoped>
+.basic-markdown-text {
+	display: block;
+	max-width: 100%;
+	overflow-wrap: break-word;
+}
+
+.basic-markdown-text :deep(a) {
+	color: var(--color-link);
+}
+
+.basic-markdown-text :deep(a:hover) {
+	text-decoration: underline;
+}
+
+.basic-markdown-text :deep(code) {
+	background-color: var(--surface-4);
+	font-size: 12px;
+	padding: 2px 4px;
+	border-radius: 4px;
+}
+</style>

packages/ui/src/components/base/index.ts

@@ -7,6 +7,7 @@ export { default as AutoLink } from './AutoLink.vue'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
 export { default as BaseTerminal } from './BaseTerminal.vue'
+export { default as BasicMarkdownText } from './BasicMarkdownText.vue'
 export { default as BigOptionButton } from './BigOptionButton.vue'
 export { default as BulletDivider } from './BulletDivider.vue'
 export { default as Button } from './buttons/Button.vue'