mtd/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Move files in preparation for monorepo migration

Browse Source
This commit is contained in:
Jai A
2024-07-03 16:21:07 -07:00
parent 11020c4545
commit 1ef8bf4690
271 changed files with 0 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
libs/omorphia/docs/.postcssrc.cjs Normal file
View File

@@ -0,0 +1,12 @@
module.exports = {
plugins: {
'postcss-prefix-selector': {
prefix: ':not(:where(.vp-raw *))',
includeFiles: [/vp-doc\.css/],
transform(prefix, _selector) {
const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
return selector + prefix + pseudo
},
},
},
}

125
libs/omorphia/docs/.vitepress/config.js Normal file
View File

@@ -0,0 +1,125 @@
import { resolve, basename } from 'path'
import svgLoader from 'vite-svg-loader'
import eslintPlugin from 'vite-plugin-eslint'
import { icuMessages } from '@vintl/unplugin/vite'
import virtual from '@rollup/plugin-virtual'
import { globSync } from 'glob'
/** @type {import('vitepress').SiteConfig} */
export default {
title: 'Omorphia',
description: 'A components library used for Modrinth.',
head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]],
themeConfig: {
logo: { src: '/favicon.svg', width: 24, height: 24 },
socialLinks: [{ icon: 'github', link: 'https://github.com/modrinth/omorphia' }],
search: {
provider: 'local',
},
sidebar: [
{
items: [
{ text: 'Introduction', link: '/' },
{ text: 'Setup', link: '/setup' },
],
},
{
text: 'Components',
items: [
{ text: 'Avatar', link: '/components/avatar' },
{ text: 'Badge', link: '/components/badge' },
{ text: 'Button', link: '/components/button' },
{ text: 'Card', link: '/components/card' },
{ text: 'Checkbox', link: '/components/checkbox' },
{ text: 'Chips', link: '/components/chips' },
{ text: 'File Input', link: '/components/file-input' },
{ text: 'Drop Area', link: '/components/drop-area' },
{ text: 'Icons', link: '/components/icons' },
{ text: 'Pagination', link: '/components/pagination' },
{ text: 'Modal', link: '/components/modal' },
{ text: 'Dropdown Select', link: '/components/dropdown-select' },
{ text: 'Popout Menu', link: '/components/popout-menu' },
{ text: 'Overflow Menu', link: '/components/overflow-menu' },
{ text: 'Project Card', link: '/components/project-card' },
{ text: 'Environment Indicator', link: '/components/environment-indicator' },
{ text: 'Categories', link: '/components/categories' },
{ text: 'Animated Logo', link: '/components/animated-logo' },
{ text: 'Text Logo', link: '/components/text-logo' },
{ text: 'Slider', link: '/components/slider' },
{ text: 'Text Inputs', link: '/components/text-inputs' },
{ text: 'Number Inputs', link: '/components/number-inputs' },
{ text: 'Search Filter', link: '/components/search-filter' },
{ text: 'Toggle', link: '/components/toggle' },
{ text: 'Promotion', link: '/components/promotion' },
{ text: 'Markdown', link: '/components/markdown' },
{ text: 'Markdown Editor', link: '/components/markdown-editor' },
{ text: 'Copy Code', link: '/components/copy-code' },
{ text: 'Notifications', link: '/components/notifications' },
{ text: 'Share Modal', link: '/components/share-modal' },
{ text: 'Analytics', link: '/components/analytics' },
{ text: 'Search dropdown', link: '/components/search-dropdown' },
],
},
],
footer: {
message:
'Released under the <a href="https://github.com/modrinth/omoprhia/blob/main/LICENSE">AGPLv3 License</a>.',
copyright: 'Copyright © 2023-present <a href="https://modrinth.com">Rinth, Inc.</a>',
},
},
vite: {
plugins: [
svgLoader({
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
},
}),
eslintPlugin(),
icuMessages({
filter: (id) => id.endsWith('.json?messages'),
pluginsWrapping: true,
}),
virtual({
'@modrinth/omorphia-dev/locales/index.js': (() => {
const localeDirs = globSync('../../locales/*', { cwd: __dirname, absolute: true })
let output = 'export const localeDefinitions = Object.create(null);\n'
for (const localeDir of localeDirs) {
const tag = basename(localeDir)
output += `localeDefinitions[${JSON.stringify(tag)}] = {\n`
output += '\tasync importFunction() {\n'
output += `\t\tconst messages = Object.create(null);\n`
for (const filePath of globSync('*', { cwd: localeDir, absolute: true })) {
const fileName = basename(filePath)
if (fileName === 'index.json') {
output += `\t\tObject.assign(messages, await import(${JSON.stringify(
`${filePath}?messages`
)}).then((mod) => mod['default']));\n`
}
}
output += '\t\treturn { messages }\n'
output += '\t},\n'
output += '}\n'
}
return output
})(),
}),
],
resolve: {
alias: {
'@': resolve(__dirname, '../../lib'),
omorphia: resolve(__dirname, '../../lib'),
'@formatjs/icu-messageformat-parser': '@formatjs/icu-messageformat-parser/lib/no-parser',
},
dedupe: ['vue'],
},
},
}

15
libs/omorphia/docs/.vitepress/env.d.ts vendored Normal file
View File

@@ -0,0 +1,15 @@
/// <reference types="vite/client" />
declare module '@modrinth/omorphia-dev/locales/index.js' {
interface LocaleExport {
messages: Record<string, any[]>
}
interface LocaleDefinition {
importFunction(): Promise<LocaleExport>
}
const localeDefinitions: Partial<Record<string, LocaleDefinition>>
export { localeDefinitions }
}

16
libs/omorphia/docs/.vitepress/theme/DemoContainer.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div class="demo"><slot /></div>
</template>
<style lang="scss" scoped>
.demo {
background: var(--color-raised-bg);
border: 1px solid var(--color-button-bg);
display: flex;
padding: var(--gap-md);
gap: var(--gap-md);
align-items: center;
flex-wrap: wrap;
border-radius: var(--radius-lg);
}
</style>

73
libs/omorphia/docs/.vitepress/theme/LanguageSwitcher.vue Normal file
View File

@@ -0,0 +1,73 @@
<script setup lang="ts">
import { useVIntl } from '@vintl/vintl'
import { DropdownSelect } from 'omorphia'
import { computed, ref } from 'vue'
const { $locales, $config, changeLocale } = useVIntl()
const getLocaleDisplayName = (() => {
const cache = new Map<string, Intl.DisplayNames>()
return function getLocaleDisplayName(locale: string) {
let displayNames = cache.get(locale)
if (displayNames == null) {
displayNames = new Intl.DisplayNames(locale, {
type: 'language',
languageDisplay: 'standard',
})
cache.set(locale, displayNames)
}
return displayNames.of(locale)
}
})()
const isChanging = ref(false)
const currentLocale = computed({
get() {
return $config.locale
},
async set(value) {
if (isChanging.value) return
try {
isChanging.value = true
await changeLocale(value)
} finally {
isChanging.value = false
}
},
})
</script>
<template>
<div class="LanguageSwitcher">
<h2 class="title">Playground language</h2>
<DropdownSelect
class="locale-dropdown"
name="locale"
v-model="currentLocale"
placeholder="Change language"
:disabled="isChanging"
:options="Array.from($locales).map(([{ tag }]) => tag)"
:display-name="(locale: string) => getLocaleDisplayName(locale)"
/>
</div>
</template>
<style scoped>
.LanguageSwitcher {
padding-block: 18px;
border-bottom: 1px solid var(--vp-c-divider);
}
.LanguageSwitcher .title {
font-weight: 700;
font-size: 14px;
color: var(--vp-c-text-1);
}
.LanguageSwitcher .locale-dropdown {
width: 200px;
font-size: 14px;
}
</style>

24
libs/omorphia/docs/.vitepress/theme/compat.scss Normal file
View File

@@ -0,0 +1,24 @@
.VPLink,
.title,
.pager-link,
.link,
.header-anchor {
color: inherit;
transition: none;
&:hover {
text-decoration: none;
}
&:active:not(&:disabled) {
scale: 1;
}
}
.content-container {
max-width: 100% !important;
}
body {
background-color: var(--vp-c-bg);
}

50
libs/omorphia/docs/.vitepress/theme/index.js Normal file
View File

@@ -0,0 +1,50 @@
import { localeDefinitions } from '@modrinth/omorphia-dev/locales/index.js'
import { createPlugin } from '@vintl/vintl/plugin'
import { plugin as Omorphia } from 'omorphia'
import DefaultTheme from 'vitepress/theme'
import { createVNode } from 'vue'
import DemoContainer from './DemoContainer.vue'
import LanguageSwitcher from './LanguageSwitcher.vue'
import './compat.scss'
import './style.scss'
/** @type {import('vitepress').Theme} */
export default {
...DefaultTheme,
enhanceApp(ctx) {
ctx.app.use(Omorphia)
ctx.app.component('DemoContainer', DemoContainer)
ctx.app.use(
createPlugin({
controllerOpts: {
locales: Object.keys(localeDefinitions).map((tag) => ({ tag })),
listen: {
async localeload(event) {
const locale = event.locale.tag
if (!Object.hasOwn(localeDefinitions, locale)) {
throw new Error(`Unknown locale: ${locale}`)
}
try {
const { messages } = await localeDefinitions[locale].importFunction()
event.addMessages(messages)
} catch (err) {
console.error(`Failed to load locale: ${locale}`, err)
}
},
},
defaultMessageOrder: ['locale', 'descriptor'],
},
globalMixin: false,
})
)
},
Layout() {
return createVNode(DefaultTheme.Layout, null, {
'sidebar-nav-before'() {
return createVNode(LanguageSwitcher)
},
})
},
}

130
libs/omorphia/docs/.vitepress/theme/style.scss Normal file
View File

@@ -0,0 +1,130 @@
/**
* Customize default theme styling by overriding CSS variables:
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
*/
/**
* Colors
*
* Each colors have exact same color scale system with 3 levels of solid
* colors with different brightness, and 1 soft color.
*
* - `XXX-1`: The most solid color used mainly for colored text. It must
* satisfy the contrast ratio against when used on top of `XXX-soft`.
*
* - `XXX-2`: The color used mainly for hover state of the button.
*
* - `XXX-3`: The color for solid background, such as bg color of the button.
* It must satisfy the contrast ratio with pure white (#ffffff) text on
* top of it.
*
* - `XXX-soft`: The color used for subtle background such as custom container
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
* on top of it.
*
* The soft color must be semi transparent alpha channel. This is crucial
* because it allows adding multiple "soft" colors on top of each other
* to create a accent, such as when having inline code block inside
* custom containers.
*
* - `default`: The color used purely for subtle indication without any
* special meanings attched to it such as bg color for menu hover state.
*
* - `brand`: Used for primary brand colors, such as link text, button with
* brand theme, etc.
*
* - `tip`: Used to indicate useful information. The default theme uses the
* brand color for this by default.
*
* - `warning`: Used to indicate warning to the users. Used in custom
* container, badges, etc.
*
* - `danger`: Used to show error, or dangerous message to the users. Used
* in custom container, badges, etc.
* -------------------------------------------------------------------------- */
:root {
--vp-c-default-1: var(--vp-c-gray-1);
--vp-c-default-2: var(--vp-c-gray-2);
--vp-c-default-3: var(--vp-c-gray-3);
--vp-c-default-soft: var(--vp-c-gray-soft);
--vp-c-brand-1: var(--vp-c-green-1);
--vp-c-brand-2: var(--vp-c-green-2);
--vp-c-brand-3: var(--vp-c-green-3);
--vp-c-brand-soft: var(--vp-c-green-soft);
--vp-c-tip-1: var(--vp-c-brand-1);
--vp-c-tip-2: var(--vp-c-brand-2);
--vp-c-tip-3: var(--vp-c-brand-3);
--vp-c-tip-soft: var(--vp-c-brand-soft);
--vp-c-warning-1: var(--vp-c-yellow-1);
--vp-c-warning-2: var(--vp-c-yellow-2);
--vp-c-warning-3: var(--vp-c-yellow-3);
--vp-c-warning-soft: var(--vp-c-yellow-soft);
--vp-c-danger-1: var(--vp-c-red-1);
--vp-c-danger-2: var(--vp-c-red-2);
--vp-c-danger-3: var(--vp-c-red-3);
--vp-c-danger-soft: var(--vp-c-red-soft);
}
/**
* Component: Button
* -------------------------------------------------------------------------- */
:root {
--vp-button-brand-border: transparent;
--vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand-3);
--vp-button-brand-hover-border: transparent;
--vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
--vp-button-brand-active-border: transparent;
--vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-c-brand-1);
}
/**
* Component: Home
* -------------------------------------------------------------------------- */
:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
--vp-home-hero-image-filter: blur(40px);
}
@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}
@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(72px);
}
}
/**
* Component: Custom Block
* -------------------------------------------------------------------------- */
:root {
--vp-custom-block-tip-border: transparent;
--vp-custom-block-tip-text: var(--vp-c-text-1);
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}
/**
* Component: Algolia
* -------------------------------------------------------------------------- */
.DocSearch {
--docsearch-primary-color: var(--vp-c-brand-1) !important;
}

169
libs/omorphia/docs/components/analytics.md Normal file
View File

@@ -0,0 +1,169 @@
# Analytics
<DemoContainer>
<client-only>
<Chart
name="Chart"
type="bar"
:stacked="true"
:labels="[
'2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
'2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
'2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
'2021-01-16', '2021-01-17'
]"
:data="[
{
name: 'Spirit',
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280],
},
{
name: 'Ad Astra',
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230],
},
{
name: 'Tempad',
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
},
]"
:colors="['#FF0000', '#00FF00', '#0000FF']"
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
/>
</client-only>
</DemoContainer>
<DemoContainer>
<client-only>
<Chart
name="Chart"
type="line"
:labels="[
'2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
'2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
'2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
'2021-01-16', '2021-01-17'
]"
:data="[
{
name: 'Spirit',
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 1280],
},
{
name: 'Ad Astra',
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 1230],
},
{
name: 'Tempad',
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
},
]"
:colors="['#FF0000', '#00FF00', '#0000FF']"
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
/>
</client-only>
</DemoContainer>
<DemoContainer>
<client-only>
<Chart
name="Chart"
:labels="[
'2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
'2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
'2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
'2021-01-16', '2021-01-17'
]"
:data="[
{
name: 'Downloads',
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280],
},
{
name: 'Revenue',
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230],
},
{
name: 'Page views',
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
},
]"
hide-total
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
>
Slot for title stuff
<Chips :items="['option 1', 'option 3']" />
<template #toolbar>
<Button>
<PlusIcon />
Slot for toolbar stuff
</Button>
</template>
</Chart>
</client-only>
</DemoContainer>
<DemoContainer>
<client-only>
<div style="display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap-md);">
<CompactChart
v-for="i in 4"
title="Downloads"
value="10,230"
:labels="[
'2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
'2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
'2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
'2021-01-16', '2021-01-17'
]"
:data="[
{
name: 'Downloads',
data: [240, 180, 210, 160, 250, 130, 220, 270, 120, 260, 200, 230, 140, 280, 190, 150, 170],
}
]"
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
/>
</div>
</client-only>
</DemoContainer>
```vue
<Chart
name="Chart name"
:labels="['array', 'of', 'labels', 'for', 'x-axis', 'typically', 'dates']"
:data="[
{
name: 'Spirit',
data: ['array', 'of', 'data', 'equal', 'length', 'to', 'x-axis'],
},
...
]"
:colors="['array', 'of', 'colors', 'for', 'each', 'series/dataset']"
prefix="string or svg icon to append to each data point"
suffix="string or svg icon to append to each data point"
type="bar|line"
:stacked="true|false (default: false) (determines whether or not values overlap/sidebyside instead of stacked)"
:hideTotal="true|false (default: false) (hide total value in tooltip)"
:hideToolbar="true|false (default: false) (hide toolbar)"
:hideLegend="true|false (default: false) (hide legend)"
>
... slot for title stuff
<template #toolbar>
... slot for toolbar stuff
</template>
</Chart>
```
```vue
<CompactChart
title="Chart title"
value="Chart value"
:labels="['array', 'of', 'labels', 'for', 'x-axis', 'typically', 'dates']"
:data="[
{
name: 'Spirit',
data: ['array', 'of', 'data', 'equal', 'length', 'to', 'x-axis'],
},
...
]"
prefix="string or svg icon to append to each data point"
suffix="string or svg icon to append to each data point"
/>
```

8
libs/omorphia/docs/components/animated-logo.md Normal file
View File

@@ -0,0 +1,8 @@
# Animated Logo
<DemoContainer>
<AnimatedLogo />
</DemoContainer>
```vue
<AnimatedLogo />
```

16
libs/omorphia/docs/components/avatar.md Normal file
View File

@@ -0,0 +1,16 @@
# Avatars
<DemoContainer class="columns">
<Avatar size="lg" circle src="https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg" />
<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
<Avatar size="md" src="https://cdn.modrinth.com/data/ssUbhMkL/icon.png" />
<Avatar size="sm" />
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
</DemoContainer>
```vue
<Avatar size="lg" circle src="https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg" />
<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
<Avatar size="sm" />
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
```

72
libs/omorphia/docs/components/badge.md Normal file
View File

@@ -0,0 +1,72 @@
# Badge
## Colored badge
<DemoContainer>
<Badge color="red" type="Tomato" />
<Badge color="orange" type="Squash" />
<Badge color="green" type="Lettuce" />
<Badge type="Onion" />
</DemoContainer>
```vue
<Badge color="red" type="Tomato" />
<Badge color="orange" type="Squash" />
<Badge color="green" type="Lettuce" />
<Badge type="Onion" />
```
## Badge with icon
<DemoContainer>
<Badge type="admin" />
<Badge type="moderator" />
<Badge type="creator" />
<Badge type="approved" />
<Badge type="approved-general" />
<Badge type="unlisted" />
<Badge type="withheld" />
<Badge type="private" />
<Badge type="scheduled" />
<Badge type="draft" />
<Badge type="archived" />
<Badge type="rejected" />
<Badge type="processing" />
<Badge type="accepted" />
<Badge type="pending" />
<Badge type="processed" />
<Badge type="failed" />
<Badge type="returned" />
<Badge type="closed" />
</DemoContainer>
```vue
<Badge type="admin" />
<Badge type="moderator" />
<Badge type="creator" />
<Badge type="approved" />
<Badge type="approved-general" />
<Badge type="unlisted" />
<Badge type="withheld" />
<Badge type="private" />
<Badge type="scheduled" />
<Badge type="draft" />
<Badge type="archived" />
<Badge type="rejected" />
<Badge type="processing" />
<Badge type="accepted" />
<Badge type="pending" />
<Badge type="processed" />
<Badge type="failed" />
<Badge type="returned" />
<Badge type="closed" />
```

159
libs/omorphia/docs/components/button.md Normal file
View File

@@ -0,0 +1,159 @@
# Buttons
## Standard
<DemoContainer>
<Button><BookmarkIcon /> Save</Button>
<Button color="primary"><UploadIcon /> Upload</Button>
<Button color="secondary"><PlusIcon /> Create new instance</Button>
<Button color="highlight"><ScaleIcon /> Submit for review</Button>
<Button color="danger"><TrashIcon /> Delete</Button>
</DemoContainer>
```vue
<Button><BookmarkIcon /> Save</Button>
<Button color="primary"><UploadIcon /> Upload</Button>
<Button color="secondary"><PlusIcon /> Create new instance</Button>
<Button color="highlight"><ScaleIcon /> Submit for review</Button>
<Button color="danger"><TrashIcon /> Delete</Button>
```
## Large
<DemoContainer>
<Button color="primary" large><DownloadIcon /> Download</Button>
<Button color="blue" large><ServerIcon /> Host a Server</Button>
<Button color="purple" large><HeartIcon /> Donate</Button>
</DemoContainer>
```vue
<Button color="primary" large><DownloadIcon /> Download</Button>
<Button color="blue" large><ServerIcon /> Host a Server</Button>
<Button color="purple" large><HeartIcon /> Donate</Button>
```
## Outline
<DemoContainer>
<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
<Button color="red" outline><ReportIcon /> Report project</Button>
</DemoContainer>
```vue
<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
<Button color="red" outline><ReportIcon /> Report project</Button>
```
## Transparent
<DemoContainer>
<Button transparent><IssuesIcon /> Report issues</Button>
<Button transparent><CodeIcon /> View sources</Button>
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
</DemoContainer>
```vue
<Button transparent><IssuesIcon /> Report issues</Button>
<Button transparent><CodeIcon /> View sources</Button>
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
```
## Hover-filled
<DemoContainer>
<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
</DemoContainer>
```vue
<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
```
## Hover-filled-only
<DemoContainer>
<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
</DemoContainer>
```vue
<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
```
## Icon-only
<DemoContainer>
<Button icon-only><HeartIcon /></Button>
<Button icon-only><XIcon /></Button>
<Button icon-only><MoreHorizontalIcon /></Button>
<Button icon-only transparent><SunIcon /></Button>
<Button icon-only transparent><DropdownIcon /></Button>
</DemoContainer>
```vue
<Button icon-only><HeartIcon /></Button>
<Button icon-only><XIcon /></Button>
<Button icon-only><MoreHorizontalIcon /></Button>
<Button icon-only transparent><SunIcon /></Button>
<Button icon-only transparent><DropdownIcon /></Button>
```
## Joined buttons
<DemoContainer>
<div class="joined-buttons">
<Button color="primary"><UploadIcon /> Upload</Button>
<OverflowMenu :options="[
{
'id': 'import',
'action': () => {},
},
{
'id': 'edit',
'action': () => {}
}
]" class="btn btn-primary btn-dropdown-animation icon-only">
<DropdownIcon />
<template #import>
<ImportIcon /> Import
</template>
<template #edit>
<EditIcon /> Edit
</template>
</OverflowMenu>
</div>
</DemoContainer>
```vue
<div class="joined-buttons">
<Button color="primary"><UploadIcon /> Upload</Button>
<OverflowMenu :options="[
{
'id': 'import',
'action': () => {},
},
{
'id': 'edit',
'action': () => {}
}
]" class="btn btn-primary btn-dropdown-animation icon-only">
<DropdownIcon />
<template #import>
<ImportIcon /> Import
</template>
<template #edit>
<EditIcon /> Edit
</template>
</OverflowMenu>
</div>
```

13
libs/omorphia/docs/components/card.md Normal file
View File

@@ -0,0 +1,13 @@
# Card
<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
<Card>
This is a card!
</Card>
</DemoContainer>
```vue
<Card>
This is a card!
</Card>
```

47
libs/omorphia/docs/components/categories.md Normal file
View File

@@ -0,0 +1,47 @@
# Categories
<DemoContainer>
<Categories
:categories="[{
name: 'magic',
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
name: 'utility',
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
type="mod"
class="tags"
/>
</DemoContainer>
```vue
<Categories
:categories="[{
name: 'magic',
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
name: 'utility',
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
type="mod"
class="tags"
/>
```

21
libs/omorphia/docs/components/checkbox.md Normal file
View File

@@ -0,0 +1,21 @@
# Checkbox
<script setup>
import { ref } from "vue";
const value = ref(false)
</script>
<DemoContainer>
<Checkbox v-model="value">Test</Checkbox>
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const value = ref(false)
</script>
<Checkbox v-model="value">Test</Checkbox>
```

20
libs/omorphia/docs/components/chips.md Normal file
View File

@@ -0,0 +1,20 @@
# Chips
<script setup>
import { ref } from "vue";
const value = ref('option 1')
</script>
<DemoContainer>
<Chips v-model="value" :items="['option 1', 'option 2', 'option 3', 'option 4']" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const value = ref('option 1')
</script>
<Chips v-model="value" :items="['option 1', 'option 2', 'option 3', 'option 4']" />
```

13
libs/omorphia/docs/components/copy-code.md Normal file
View File

@@ -0,0 +1,13 @@
# Copy Code
<DemoContainer>
<CopyCode
text="urmom"
/>
</DemoContainer>
```vue
<CopyCode
text="urmom"
/>
```

17
libs/omorphia/docs/components/drop-area.md Normal file
View File

@@ -0,0 +1,17 @@
# Drop Area
<script setup>
import { ref } from "vue";
const files = ref([])
</script>
<DemoContainer>
<DropArea accept="*" @change="files">
<InfoIcon /> Click to choose a file or drag one onto this page
</DropArea>
</DemoContainer>
```vue
<InfoIcon /> Click to choose a file or drag one onto this page
<DropArea accept="*" />
```

44
libs/omorphia/docs/components/dropdown-select.md Normal file
View File

@@ -0,0 +1,44 @@
# Dropdown
<script setup>
import {ref} from "vue";
const value = ref(null);
const newValue = ref(null);
const options = ref([{ test: 'hello', display: 'no' }, { test: 'nob', display: 'yes' }, { test: 'ball', display: 'eat' }]);
</script>
<DemoContainer>
<DropdownSelect
v-model="value"
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
placeholder="Choose Frequency"
/>
<DropdownSelect
v-model="value"
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
placeholder="Choose Frequency"
render-up
/>
<DropdownSelect
v-model="value"
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
placeholder="Choose Frequency"
disabled
/>
<DropdownSelect
v-model="newValue"
:options="options"
placeholder="Choose Frequency"
:display-name="(name) => name?.display"
/>
</DemoContainer>
```vue
<DropdownSelect
v-model="value"
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
placeholder="Choose Frequency"
render-up
/>
```

51
libs/omorphia/docs/components/environment-indicator.md Normal file
View File

@@ -0,0 +1,51 @@
# Environment Indicator
:::raw
<DemoContainer>
<EnvironmentIndicator
:typeOnly="false"
client-side="unsupported"
server-side="required"
type="mod"
:search="true"
/>
<EnvironmentIndicator
:type-only="false"
client-side="required"
server-side="unsupported"
type="mod"
:search="true"
/>
<EnvironmentIndicator
:type-only="false"
client-side="required"
server-side="required"
type="mod"
:search="true"
/>
</DemoContainer>
:::
```vue
<EnvironmentIndicator
:type-only="false"
:client-side="true"
:server-side="true"
type="mod"
:search="true"
/>
<EnvironmentIndicator
:type-only="false"
:client-side="false"
:server-side="true"
type="mod"
:search="true"
/>
<EnvironmentIndicator
:type-only="false"
:client-side="true"
:server-side="false"
type="mod"
:search="true"
/>
```

45
libs/omorphia/docs/components/file-input.md Normal file
View File

@@ -0,0 +1,45 @@
# File Input
<DemoContainer>
<FileInput
:max-size="262144"
accept="image/png,image/jpeg,image/gif,image/webp"
class="btn"
prompt="Upload icon"
>
<UploadIcon />
</FileInput>
</DemoContainer>
```vue
<FileInput
:max-size="262144"
accept="image/png,image/jpeg,image/gif,image/webp"
class="btn"
prompt="Upload icon"
>
<UploadIcon />
</FileInput>
```
## Long Style
<DemoContainer>
<FileInput
:max-size="262144"
accept="image/png,image/jpeg,image/gif,image/webp"
long-style
class="btn"
prompt="Upload icon"
/>
</DemoContainer>
```vue
<FileInput
:max-size="262144"
accept="image/png,image/jpeg,image/gif,image/webp"
long-style
class="btn"
prompt="Upload icon"
/>
```

27
libs/omorphia/docs/components/icons.md Normal file
View File

@@ -0,0 +1,27 @@
# Icons
Omorphia includes a set of icons. You can view the available icons in the `~/assets/icons/*` folder of this repository.
<DemoContainer>
<CheckIcon />
<UnknownIcon />
<SettingsIcon />
<TagIcon />
<SendIcon />
<LogOutIcon />
<HeartHandshakeIcon />
<EyeOffIcon />
<ClipboardCopyIcon />
</DemoContainer>
```vue
<CheckIcon />
<UnknownIcon />
<SettingsIcon />
<TagIcon />
<SendIcon />
<LogOutIcon />
<HeartHandshakeIcon />
<EyeOffIcon />
<ClipboardCopyIcon />
```

116
libs/omorphia/docs/components/markdown-editor.md Normal file
View File

@@ -0,0 +1,116 @@
# Markdown Editor
<script setup>
import { ref } from "vue";
const description = ref(null);
const description1 = ref(null);
const description2 = ref(null);
const description3 = ref(null);
const description4 = ref("Hello, world! This is a **bold** statement.");
const isDisabled = ref(false);
const onImageUpload = (file) => {
return URL.createObjectURL(file).replace("blob:", "");
};
</script>
The Markdown editor allows for easy formatting of Markdown text whether the user is familiar with Markdown or not. It includes standard shortcuts such as `CTRL+B` for bold, `CTRL+I` for italic, and more.
## Full editor
<DemoContainer>
<MarkdownEditor v-model="description" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const description = ref(null)
</script>
<MarkdownEditor v-model="description" />
```
## With options
<DemoContainer>
<MarkdownEditor v-model="description1" placeholder="Enter a description" max-length="800" max-height="400" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const description = ref(null)
</script>
<MarkdownEditor v-model="description" placeholder="Enter a description" max-length="800" max-height="400" />
```
## With image upload
<DemoContainer>
<MarkdownEditor v-model="description2" :on-image-upload="onImageUpload" />
</DemoContainer>
```vue
<script setup lang="ts">
import { ref } from "vue";
const description = ref(null)
// Return a URL to the image for the editor to consume
const onImageUpload = (file: File): string => {
// Upload the file to your server and return a URL
// This example url will not work bc of proxy
// If the upload fails, throw an error and it will show as
// a Validation Error to the user
return URL.createObjectURL(file).replace("blob:", "");
};
</script>
<MarkdownEditor v-model="description" :on-image-upload="onImageUpload" />
```
## Without heading buttons
<DemoContainer>
<MarkdownEditor v-model="description3" :heading-buttons="false" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const description = ref(null)
</script>
<MarkdownEditor v-model="description" :heading-buttons="false" />
```
## With default value
<DemoContainer>
<MarkdownEditor v-model="description4" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const description = ref("Hello, world! This is a **bold** statement.");
</script>
<MardownEditor v-model="description" />
```
## Disabled
<DemoContainer>
<Toggle v-model="isDisabled" label="Disabled" />
<MarkdownEditor v-model="description" :disabled="isDisabled" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const description = ref(null);
</script>
<MardownEditor v-model="description" disabled />
```

38
libs/omorphia/docs/components/markdown.md Normal file
View File

@@ -0,0 +1,38 @@
# Markdown
<script setup>
import { renderHighlightedString } from 'omorphia';
import { ref } from 'vue';
const b = '`';
const body = ref('');
fetch('https://raw.githubusercontent.com/joeyespo/grip/master/tests/input/gfm-test.md')
.then((response) => response.text())
.then((response) => body.value = response)
</script>
:::raw
<DemoContainer>
<div style="width: 100%" class="markdown-body" v-html="renderHighlightedString(body)" />
</DemoContainer>
:::
<style lang="scss">
h1, h2, h3, h4, h5, h6 {
line-height: 1.15;
font-weight: revert;
font-size: revert;
margin: revert;
}
ul, ol {
list-style: revert;
margin: revert;
padding: revert;
}
blockquote {
margin: revert;
}
</style>

32
libs/omorphia/docs/components/modal.md Normal file
View File

@@ -0,0 +1,32 @@
# Modal
:::raw
<DemoContainer>
<Button :action="() => this.$refs.reportModal.show()">Show Report Modal</Button>
<Button :action="() => this.$refs.confirmModal.show()">Show Confirm Modal</Button>
<ReportModal
ref="reportModal"
itemType="project"
:reportTypes="['cringitude', 'rudeness', 'notgamer', 'windowsuser']"
>
</ReportModal>
<ConfirmModal
ref="confirmModal"
title="Are you sure you want to delete this version?"
description="This will remove this version forever (like really forever)."
:has-to-type="true"
proceed-label="Delete"
confirmationText="Hello"
>
</ConfirmModal>
</DemoContainer>
:::
```vue
<Button :action="() => this.$refs.reportModal.modal.show()">Show Modal</Button>
<ReportModal
ref="reportModal"
itemType="project"
:reportTypes="['cringitude', 'rudeness', 'notgamer', 'windowsuser']"
/>
```

46
libs/omorphia/docs/components/notifications.md Normal file
View File

@@ -0,0 +1,46 @@
# Notifications
<script setup>
import { ref } from "vue";
const notifsContainer = ref(null);
function addNotification(type) {
console.log(notifsContainer);
notifsContainer.value.addNotification({
title: 'Test Notification',
text: 'This is a test! Random number: ' + Math.random(),
type,
});
}
</script>
<DemoContainer>
<Notifications ref="notifsContainer" />
<Button color="primary" @click="addNotification('success')">Success</Button>
<Button color="highlight" @click="addNotification('warn')">Warning</Button>
<Button color="danger" @click="addNotification('error')">Error</Button>
<Button @click="addNotification('info')">Info</Button>
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const notifsContainer = ref(null);
function addNotification(type) {
console.log(notifsContainer);
notifsContainer.value.addNotification({
title: 'Test Notification',
text: 'This is a test! Random number: ' + Math.random(),
type,
});
}
</script>
<Notifications ref="notifsContainer" />
<Button color="primary" @click="addNotification('success')">Success</Button>
<Button color="highlight" @click="addNotification('warn')">Warning</Button>
<Button color="danger" @click="addNotification('error')">Error</Button>
<Button @click="addNotification('info')">Info</Button>
```

20
libs/omorphia/docs/components/number-inputs.md Normal file
View File

@@ -0,0 +1,20 @@
# Number Inputs
<script setup>
import { ref } from "vue";
const input = ref(0)
</script>
<DemoContainer>
<input v-model="input" type="number" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const input = ref(0)
</script>
<input v-model="input" type="number" />
```

96
libs/omorphia/docs/components/overflow-menu.md Normal file
View File

@@ -0,0 +1,96 @@
# Overflow Menu
<DemoContainer>
<OverflowMenu :options="[
{
'id': 'play',
'color': 'primary',
'action': () => {},
'hoverFilledOnly': true
},
{ divider: true },
{
'id': 'duplicate',
'action': () => {}
},
{
'id': 'report',
'link': 'https://example.com/report',
'external': true,
},
{
'id': 'remain',
'action': () => {},
'remainOnClick': true,
},
{ divider: true },
{
'id': 'delete',
'color': 'danger',
'action': () => {},
'hoverFilled': true,
}
]" class="btn">
More options...
<template #play>
<PlayIcon /> Play
</template>
<template #duplicate>
<CopyIcon /> Duplicate
</template>
<template #report>
<ReportIcon /> Report
</template>
<template #remain>
<ClearIcon /> I shall remain
</template>
<template #delete>
<TrashIcon /> Delete
</template>
</OverflowMenu>
</DemoContainer>
```vue
<OverflowMenu
class="btn"
:options="[
{
'id': 'play',
'color': 'primary',
'action': () => {},
'hoverFilledOnly': true
},
{ divider: true },
{
'id': 'duplicate',
'action': () => {}
},
{
'id': 'report',
'link': 'https://example.com/report',
'external': true,
},
{
'id': 'remain',
'action': () => {},
'remainOnClick': true,
},
{ divider: true },
{
'id': 'delete',
'color': 'danger',
'action': () => {},
'hoverFilled': true,
}
]">
More options...
<template #like>
<HeartIcon /> Like
</template>
<template #report>
<ReportIcon /> Report
</template>
<template #delete>
<TrashIcon /> Delete
</template>
</OverflowMenu>
```

28
libs/omorphia/docs/components/pagination.md Normal file
View File

@@ -0,0 +1,28 @@
# Pagination
<script setup>
import { ref } from "vue";
const currentPage = ref(1)
function switchPage(page) {
currentPage.value = page
}
</script>
<DemoContainer style="background-color: var(--color-bg)">
<Pagination :page="currentPage" :count="100" @switch-page="switchPage" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const currentPage = ref(1)
function switchPage(page) {
currentPage.value = page
}
</script>
<Pagination :page="currentPage" :count="100" @switch-page="switchPage" />
```

76
libs/omorphia/docs/components/popout-menu.md Normal file
View File

@@ -0,0 +1,76 @@
# Popout Menu
<DemoContainer>
<PopoutMenu class="btn" position="bottom" direction="left">
Bottom going left
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="bottom" direction="right">
Bottom going right
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="top" direction="left">
Top going left
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="top" direction="right">
Top going right
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="left" direction="up">
Left going up
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="left" direction="down">
Left going down
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="right" direction="up">
Right going up
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
<PopoutMenu class="btn" position="right" direction="down">
Right going down
<template #menu>
Menu contents!
Menu contents!
Menu contents!
</template>
</PopoutMenu>
</DemoContainer>
```vue
<PopoutMenu class="btn" position="bottom" direction="right">
Bottom going right
<template #menu>
Menu contents!
</template>
</PopoutMenu>
```

455
libs/omorphia/docs/components/project-card.md Normal file
View File

@@ -0,0 +1,455 @@
# Project Card
::: raw
<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
<div class="project-list display-mode--list">
<ProjectCard
id="spirit"
type="mod"
name="Spirit"
author="CodexAdrian"
description="Create your own configurable mob spawner!"
iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
downloads="2784"
follows="20"
createdAt="2020-12-27T19:00:00.000Z"
updatedAt="2021-01-01T19:00:00.000Z"
:categories="[{
name: 'magic',
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
name: 'utility',
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="required"
clientSide="required"
:showUpdatedDate="false"
color="1716041"
/>
<ProjectCard
id="craftify"
type="mod"
name="Craftify"
author="ThatGravyBoat"
description="Allows for you to control and display your music in-game!"
iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
downloads="309117"
follows="177"
createdAt="2022-09-02T19:00:00.000Z"
updatedAt="2023-02-18T19:00:00.000Z"
:categories="[{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
name: 'management'
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
name: 'utility',
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="unsupported"
clientSide="required"
:showUpdatedDate="true"
color="3460212"
/>
<ProjectCard
id="ad-astra"
type="mod"
name="Ad Astra"
author="AlexNijjar"
description="Live long and prosper, Ad Astra!"
iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
downloads="14780"
follows="153"
createdAt="2022-06-19T19:00:00.000Z"
updatedAt="2023-03-03T19:00:00.000Z"
:categories="[{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
name: 'adventure'
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
name: 'technology'
},
{
icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
name: 'worldgen'
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="required"
clientSide="required"
:showUpdatedDate="false"
color="#FFFFFF"
/>
</div>
</DemoContainer>
<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
<div class="project-list display-mode--grid">
<ProjectCard
id="spirit"
type="mod"
name="Spirit"
author="CodexAdrian"
description="Create your own configurable mob spawner!"
iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
downloads="2784"
follows="20"
createdAt="2020-12-27T19:00:00.000Z"
updatedAt="2021-01-01T19:00:00.000Z"
:categories="[{
name: 'magic',
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
name: 'utility',
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="required"
clientSide="required"
:showUpdatedDate="false"
color="1716041"
/>
<ProjectCard
id="craftify"
type="mod"
name="Craftify"
author="ThatGravyBoat"
description="Allows for you to control and display your music in-game!"
iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
downloads="309117"
follows="177"
createdAt="2022-09-02T19:00:00.000Z"
updatedAt="2023-02-18T19:00:00.000Z"
:categories="[{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
name: 'management'
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
name: 'utility',
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="unsupported"
clientSide="required"
:showUpdatedDate="true"
color="3460212"
/>
<ProjectCard
id="ad-astra"
type="mod"
name="Ad Astra"
author="AlexNijjar"
description="Live long and prosper, Ad Astra!"
iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
downloads="14780"
follows="153"
createdAt="2022-06-19T19:00:00.000Z"
updatedAt="2023-03-03T19:00:00.000Z"
:categories="[{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
name: 'adventure'
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
name: 'technology'
},
{
icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
name: 'worldgen'
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="required"
clientSide="required"
:showUpdatedDate="false"
color="#FFFFFF"
/>
</div>
</DemoContainer>
<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
<div class="project-list display-mode--gallery">
<ProjectCard
id="spirit"
type="mod"
name="Spirit"
author="CodexAdrian"
description="Create your own configurable mob spawner!"
iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
downloads="2784"
follows="20"
createdAt="2020-12-27T19:00:00.000Z"
updatedAt="2021-01-01T19:00:00.000Z"
:categories="[{
name: 'magic',
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
name: 'utility',
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="required"
clientSide="required"
:showUpdatedDate="false"
color="1716041"
/>
<ProjectCard
id="craftify"
type="mod"
name="Craftify"
author="ThatGravyBoat"
description="Allows for you to control and display your music in-game!"
iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
downloads="309117"
follows="177"
createdAt="2022-09-02T19:00:00.000Z"
updatedAt="2023-02-18T19:00:00.000Z"
:categories="[{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
name: 'management'
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
name: 'utility',
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="unsupported"
clientSide="required"
:showUpdatedDate="true"
color="3460212"
/>
<ProjectCard
id="ad-astra"
type="mod"
name="Ad Astra"
author="AlexNijjar"
description="Live long and prosper, Ad Astra!"
iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
downloads="14780"
follows="153"
createdAt="2022-06-19T19:00:00.000Z"
updatedAt="2023-03-03T19:00:00.000Z"
:categories="[{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
name: 'adventure'
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
name: 'technology'
},
{
icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
name: 'worldgen'
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="required"
clientSide="required"
:showUpdatedDate="false"
color="#FFFFFF"
/>
</div>
</DemoContainer>
:::
```vue
<ProjectCard
id="spirit"
type="mod"
name="Spirit"
author="CodexAdrian"
description="Create your own configurable mob spawner!"
iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
downloads="2784"
follows="20"
createdAt="2020-12-27T19:00:00.000Z"
updatedAt="2021-01-01T19:00:00.000Z"
:categories="[{
name: 'magic',
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
name: 'utility',
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="required"
clientSide="required"
:showUpdatedDate="false"
color="1716041"
>
</ProjectCard>
<ProjectCard
id="craftify"
type="mod"
name="Craftify"
author="ThatGravyBoat"
description="Allows for you to control and display your music in-game!"
iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
downloads="309117"
follows="177"
createdAt="2022-09-02T19:00:00.000Z"
updatedAt="2023-02-18T19:00:00.000Z"
:categories="[{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
name: 'management'
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
name: 'utility',
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="unsupported"
clientSide="required"
:showUpdatedDate="true"
color="3460212"
>
</ProjectCard>
<ProjectCard
id="ad-astra"
type="mod"
name="Ad Astra"
author="AlexNijjar"
description="Live long and prosper, Ad Astra!"
iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
downloads="14780"
follows="153"
createdAt="2022-06-19T19:00:00.000Z"
updatedAt="2023-03-03T19:00:00.000Z"
:categories="[{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
name: 'adventure'
},
{
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
name: 'technology'
},
{
icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
name: 'worldgen'
},
{
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
name: 'fabric',
},
{
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
name: 'forge'
}]"
projectTypeDisplay="mod"
projectTypeUrl="/mod"
serverSide="required"
clientSide="required"
:showUpdatedDate="false"
color="#FFFFFF"
>
</ProjectCard>
```

12
libs/omorphia/docs/components/promotion.md Normal file
View File

@@ -0,0 +1,12 @@
# Promotion
The Promotion component is used to serve Adrinth ads.
:::raw
<DemoContainer>
<Promotion />
</DemoContainer>
:::
```vue
<Promotion :external="true | false" queryParam="?optional-query-param"/>
```

93
libs/omorphia/docs/components/search-dropdown.md Normal file
View File

@@ -0,0 +1,93 @@
# Search Dropdown
<script setup>
import { ref } from "vue";
const options = ref([]);
const text = ref("");
const onSelected = (option) => {
options.value.push(option);
};
</script>
<DemoContainer>
{{options}}
{{text}}
<SearchDropdown
placeholder="Search for dependencies"
@on-selected="onSelected"
v-model="text"
:options="[
{
title: 'Project 1',
subtitle: 'Author 1',
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
id: 'ejnfwfinj',
},
{
title: 'Project 2',
subtitle: 'Author 1',
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
id: 'ejnfwfinj',
},
{
title: 'Project 3',
subtitle: 'Author 1',
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
id: 'ejnfwfinj',
},
{
title: 'Project 3',
subtitle: 'Author 1',
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
id: 'ejnfwfinj',
},
{
title: 'Project 1',
subtitle: 'Author 1',
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
id: 'ejnfwfinj',
},
{
title: 'Project 2',
subtitle: 'Author 1',
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
id: 'ejnfwfinj',
},
{
title: 'Project 3',
subtitle: 'Author 1',
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
id: 'ejnfwfinj',
},
{
title: 'Project 3',
subtitle: 'Author 1',
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
id: 'ejnfwfinj',
}
]"
/>
</DemoContainer>
```vue
<SearchDropdown
placeholder="Search for dependencies"
@on-selected="onSelected"
v-model="text"
disabled
render-up
circled-icons
:options="[
{
title: 'Project 1',
subtitle: 'Author 1',
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
...
},
...
]"
/>
```

53
libs/omorphia/docs/components/search-filter.md Normal file
View File

@@ -0,0 +1,53 @@
# Search Filter
<script setup>
import { ref } from "vue";
const activeFilters = ref([]);
function toggleFilter(filter) {
const index = activeFilters.value.indexOf(filter);
if (index !== -1) {
activeFilters.value.splice(index, 1)
} else {
activeFilters.value.push(filter)
}
}
</script>
<DemoContainer>
<SearchFilter
:active-filters="activeFilters"
display-name="Client"
facet-name="client"
@toggle="toggleFilter"
>
<ClientIcon aria-hidden="true" />
</SearchFilter>
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const activeFilters = ref([]);
function toggleFilter(filter) {
const index = activeFilters.value.indexOf(filter);
if (index !== -1) {
activeFilters.value.splice(index, 1)
} else {
activeFilters.value.push(filter)
}
}
</script>
<SearchFilter
:active-filters="activeFilters"
display-name="Client"
facet-name="client"
@toggle="toggleFilter"
>
<ClientIcon aria-hidden="true" />
</SearchFilter>
```

44
libs/omorphia/docs/components/share-modal.md Normal file
View File

@@ -0,0 +1,44 @@
# Share Modal
<DemoContainer>
<Button @click="$refs.shareContent.show('This is content')">
<EditIcon/>
Share Content
</Button>
<Button @click="$refs.shareLink.show('https://modrinth.com')">
<GlobeIcon/>
Share Link
</Button>
<ShareModal
ref="shareContent"
share-title="This is the title for the content"
share-text="Share this content"
/>
<ShareModal
ref="shareLink"
share-title="This is the title for the link"
share-text="Share this link"
link
/>
</DemoContainer>
```vue
<ShareModal
ref="shareContent"
share-title="This is the title for the content"
share-text="Share this content"
/>
<ShareModal
ref="shareLink"
share-title="This is the title for the link"
share-text="Share this link"
link
/>
```
You can use ref to open the modal, calling the show method
`content` is what will be shown in the text of the input for sharing
```text
$refs.shareContent.show(content)
```

24
libs/omorphia/docs/components/slider.md Normal file
View File

@@ -0,0 +1,24 @@
# Slider
<script setup>
import { ref } from "vue";
const value = ref(0)
const valueTwo = ref(0)
</script>
<DemoContainer>
<Slider v-model="value" :min="1000" :max="10000" :step="1000" unit="mb"/>
<Slider v-model="value" :min="1024" :max="32768" :step="1" :snapPoints='[2048,4096,8192,16384]' :snapRange='500' unit="mb"/>
<Slider v-model="valueTwo" :min="1000" :max="10000" :step="1000" unit="mb" :disabled="true"/>
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const value = ref(0)
</script>
<Slider v-model="value" :min="1000" :max="10000" :step="1000"/>
```

101
libs/omorphia/docs/components/text-inputs.md Normal file
View File

@@ -0,0 +1,101 @@
# Text Inputs
<script setup>
import { ref } from "vue";
const inputText = ref(null)
</script>
<DemoContainer>
<input
type="text"
placeholder="Text input"
/>
</DemoContainer>
```vue
<input
type="text"
placeholder="Text input"
/>
```
<DemoContainer>
<div class="iconified-input">
<SearchIcon/>
<input
v-model="inputText"
type="text"
placeholder="Text input"
/>
<Button class="r-btn" @click="() => inputText = ''">
<XIcon/>
</Button>
</div>
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const inputText = ref(null)
</script>
<div class="iconified-input">
<SearchIcon/>
<input
v-model="inputText"
type="text"
placeholder="Text input"
/>
<Button @click="() => inputText = ''">
<XIcon/>
</Button>
</div>
```
<DemoContainer>
<div class="dropdown-input">
<DropdownSelect
v-model="value"
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
placeholder="Choose Frequency"
/>
<div class="iconified-input">
<SearchIcon/>
<input
v-model="inputText"
type="text"
placeholder="Text input"
/>
<Button class="r-btn" @click="() => inputText = ''">
<XIcon/>
</Button>
</div>
</div>
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const inputText = ref(null)
const value = ref(null)
</script>
<div class="dropdown-input">
<DropdownSelect
v-model="value"
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
placeholder="Choose Frequency"
/>
<div class="iconified-input">
<SearchIcon/>
<input
v-model="inputText"
type="text"
placeholder="Text input"
/>
<Button class="r-btn" @click="() => inputText = ''">
<XIcon/>
</Button>
</div>
</div>
```

23
libs/omorphia/docs/components/text-logo.md Normal file
View File

@@ -0,0 +1,23 @@
# Text Logo
<DemoContainer>
<TextLogo :animate="true" />
</DemoContainer>
```vue
<TextLogo :animate="true" />
```
<DemoContainer>
<TextLogo :animate="false" />
</DemoContainer>
```vue
<TextLogo :animate="false" />
```
<style scoped>
svg {
width: 100%;
height: auto;
}
</style>

20
libs/omorphia/docs/components/toggle.md Normal file
View File

@@ -0,0 +1,20 @@
# Toggle
<script setup>
import { ref } from "vue";
const value = ref(true)
</script>
<DemoContainer>
<Toggle v-model="value" checked="true" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const value = ref(true)
</script>
<Toggle v-model="value" />
```

14
libs/omorphia/docs/index.md Normal file
View File

@@ -0,0 +1,14 @@
# Introduction
## Overview
Omorphia is Modrinth's internal component and style library for its Vue projects. It includes:
- 🧩 Typed components which enhance HTML elements and provide a consistent UI
- 🎨 CSS classes to easily style elements with a coherent style
Omorphia is used in [Knossos](https://github.com/modrinth/knossos) (modrinth.com) and [Theseus](https://github.com/modrinth/theseus) (Minecraft launcher).
## Getting started
Follow the instructions on the [➜ **setup page** 🛠️](/setup).

BIN
libs/omorphia/docs/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

1
libs/omorphia/docs/public/favicon.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"><path d="M15.933,18.394c-3.261,-0.286 -11.074,-1.466 -14.644,-8.469m22.422,-0c-2.114,4.291 -10.8,11.927 -16.017,13.026m6.18,-21.87c-3.606,1.979 -8.378,8.639 -8.241,13.307m17.732,-5.664c-2.232,-1.888 -9.562,-5.15 -16.943,1.716m8.652,-3.947c1.888,1.087 5.492,3.288 4.806,8.369m-9.956,2.787c-0.286,-1.888 -0.103,-6.213 2.918,-8.41m4.12,4.977c-0.014,-0.135 -0.039,-0.269 -0.075,-0.4m-0,0c-0.528,-1.965 -2.354,-5.652 -6.963,-5.908m6.963,5.908c-2.856,2.601 -6.11,3.11 -7.65,2.975m7.65,-2.975c0.752,-0.685 1.702,-2.374 2.36,-3.376m-8.98,2.575c0.687,0.744 3.468,2.369 4.978,2.231m8.755,-2.746c0,6.351 -5.149,11.5 -11.5,11.5c-6.351,0 -11.5,-5.149 -11.5,-11.5c0,-6.351 5.149,-11.5 11.5,-11.5c6.351,0 11.5,5.149 11.5,11.5Z" style="fill:none;fill-rule:nonzero;stroke:#ff496e;stroke-width:2px;"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

5
libs/omorphia/docs/setup.md Normal file
View File

@@ -0,0 +1,5 @@
# Setup
```bash
npm install omorphia
```