tomasalias/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

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" />
```