You've already forked AstralRinth
forked from didirus/AstralRinth
Project card (#15)
* initial impl * merge from main * No more crashy * Almost there * fix import * fix more imports * Code cleanup, Fixed components, Added Tooltip * Added Env ind and Category pages --------- Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
This commit is contained in:
Adrian O.V
16
.idea/inspectionProfiles/Project_Default.xml
generated
16
.idea/inspectionProfiles/Project_Default.xml
generated
@@ -23,5 +23,21 @@
|
|||||||
</option>
|
</option>
|
||||||
<option name="myCustomValuesEnabled" value="true" />
|
<option name="myCustomValuesEnabled" value="true" />
|
||||||
</inspection_tool>
|
</inspection_tool>
|
||||||
|
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
|
||||||
|
<option name="myValues">
|
||||||
|
<value>
|
||||||
|
<list size="7">
|
||||||
|
<item index="0" class="java.lang.String" itemvalue="nobr" />
|
||||||
|
<item index="1" class="java.lang.String" itemvalue="noembed" />
|
||||||
|
<item index="2" class="java.lang.String" itemvalue="comment" />
|
||||||
|
<item index="3" class="java.lang.String" itemvalue="noscript" />
|
||||||
|
<item index="4" class="java.lang.String" itemvalue="embed" />
|
||||||
|
<item index="5" class="java.lang.String" itemvalue="script" />
|
||||||
|
<item index="6" class="java.lang.String" itemvalue="environmentindicator" />
|
||||||
|
</list>
|
||||||
|
</value>
|
||||||
|
</option>
|
||||||
|
<option name="myCustomValuesEnabled" value="true" />
|
||||||
|
</inspection_tool>
|
||||||
</profile>
|
</profile>
|
||||||
</component>
|
</component>
|
||||||
12
docs/.postcssrc.cjs
Normal file
12
docs/.postcssrc.cjs
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -26,6 +26,9 @@ export default {
|
|||||||
{ text: 'Chips', link: '/components/chips' },
|
{ text: 'Chips', link: '/components/chips' },
|
||||||
{ text: 'Icons', link: '/components/icons' },
|
{ text: 'Icons', link: '/components/icons' },
|
||||||
{ text: 'Pagination', link: '/components/pagination' },
|
{ text: 'Pagination', link: '/components/pagination' },
|
||||||
|
{ 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: 'Animated Logo', link: '/components/animated-logo' },
|
||||||
{ text: 'Text Logo', link: '/components/text-logo' },
|
{ text: 'Text Logo', link: '/components/text-logo' },
|
||||||
{ text: 'Slider', link: '/components/slider' },
|
{ text: 'Slider', link: '/components/slider' },
|
||||||
|
|||||||
@@ -1,8 +1,3 @@
|
|||||||
body {
|
|
||||||
color: var(--vp-c-text-1);
|
|
||||||
background-color: var(--vp-c-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.VPLink,
|
.VPLink,
|
||||||
.title,
|
.title,
|
||||||
.pager-link,
|
.pager-link,
|
||||||
@@ -19,3 +14,7 @@ body {
|
|||||||
scale: 1;
|
scale: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|||||||
24
docs/components/categories.md
Normal file
24
docs/components/categories.md
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# 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>
|
||||||
51
docs/components/environment-indicator.md
Normal file
51
docs/components/environment-indicator.md
Normal 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"
|
||||||
|
/>
|
||||||
|
```
|
||||||
455
docs/components/project-card.md
Normal file
455
docs/components/project-card.md
Normal 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>
|
||||||
|
```
|
||||||
@@ -118,3 +118,74 @@ svg {
|
|||||||
height: 1em;
|
height: 1em;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.project-list {
|
||||||
|
width: 100%;
|
||||||
|
gap: var(--gap-md);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: var(--gap-md);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-list.display-mode--list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-list.display-mode--gallery {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
|
||||||
|
@media screen and (max-width: 750px) {
|
||||||
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-list.display-mode--grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
|
||||||
|
@media screen and (max-width: 80rem) {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 860px) {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 550px) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-popper--theme-tooltip {
|
||||||
|
.v-popper__inner {
|
||||||
|
background: var(--color-tooltip-bg) !important;
|
||||||
|
color: var(--color-tooltip-text) !important;
|
||||||
|
padding: 5px 10px 4px !important;
|
||||||
|
border-radius: var(--size-rounded-tooltip) !important;
|
||||||
|
box-shadow: var(--shadow-floating) !important;
|
||||||
|
font-size: 0.9rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-popper__arrow-outer,
|
||||||
|
.v-popper__arrow-inner {
|
||||||
|
border-color: var(--color-tooltip-bg) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-animation {
|
||||||
|
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
|
||||||
|
outline 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:active:not(&:disabled) {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -82,10 +82,12 @@ export default {
|
|||||||
.avatar {
|
.avatar {
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
box-shadow: var(--shadow-inset-lg), var(--shadow-card);
|
box-shadow: var(--shadow-inset-lg), var(--shadow-card);
|
||||||
height: var(--size);
|
height: var(--size) !important;
|
||||||
width: var(--size);
|
width: var(--size) !important;
|
||||||
background-color: var(--color-button-bg);
|
background-color: var(--color-button-bg);
|
||||||
object-fit: contain;
|
object-fit: cover;
|
||||||
|
max-width: var(--size) !important;
|
||||||
|
max-height: var(--size) !important;
|
||||||
|
|
||||||
&.size-xs {
|
&.size-xs {
|
||||||
--size: 2.5rem;
|
--size: 2.5rem;
|
||||||
|
|||||||
104
lib/components/base/EnvironmentIndicator.vue
Normal file
104
lib/components/base/EnvironmentIndicator.vue
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
<template>
|
||||||
|
<span v-if="typeOnly" class="environment">
|
||||||
|
<InfoIcon aria-hidden="true" />
|
||||||
|
A {{ type }}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-else-if="
|
||||||
|
!['resourcepack', 'shader'].includes(type) &&
|
||||||
|
!(type === 'plugin' && search)
|
||||||
|
"
|
||||||
|
class="environment"
|
||||||
|
>
|
||||||
|
<template v-if="clientSide === 'optional' && serverSide === 'optional'">
|
||||||
|
<GlobeIcon aria-hidden="true" />
|
||||||
|
Client or server
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
v-else-if="clientSide === 'required' && serverSide === 'required'"
|
||||||
|
>
|
||||||
|
<GlobeIcon aria-hidden="true" />
|
||||||
|
Client and server
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
v-else-if="
|
||||||
|
(clientSide === 'optional' || clientSide === 'required') &&
|
||||||
|
(serverSide === 'optional' || serverSide === 'unsupported')
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<ClientIcon aria-hidden="true" />
|
||||||
|
Client
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
v-else-if="
|
||||||
|
(serverSide === 'optional' || serverSide === 'required') &&
|
||||||
|
(clientSide === 'optional' || clientSide === 'unsupported')
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<ServerIcon aria-hidden="true" />
|
||||||
|
Server
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
v-else-if="serverSide === 'unsupported' && clientSide === 'unsupported'"
|
||||||
|
>
|
||||||
|
<GlobeIcon aria-hidden="true" />
|
||||||
|
Unsupported
|
||||||
|
</template>
|
||||||
|
<template v-else-if="alwaysShow">
|
||||||
|
<InfoIcon aria-hidden="true" />
|
||||||
|
A {{ type }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon} from "@/components";
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'mod',
|
||||||
|
},
|
||||||
|
serverSide: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
clientSide: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
typeOnly: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
alwaysShow: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.environment {
|
||||||
|
display: flex;
|
||||||
|
color: var(--color-text) !important;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
svg {
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
608
lib/components/base/ProjectCard.vue
Normal file
608
lib/components/base/ProjectCard.vue
Normal file
@@ -0,0 +1,608 @@
|
|||||||
|
<template>
|
||||||
|
<article
|
||||||
|
class="project-card base-card padding-bg"
|
||||||
|
:aria-label="name"
|
||||||
|
role="listitem"
|
||||||
|
>
|
||||||
|
<router-link
|
||||||
|
class="icon"
|
||||||
|
tabindex="-1"
|
||||||
|
:to="`/${projectTypeUrl}/${id}`"
|
||||||
|
>
|
||||||
|
<Avatar :src="iconUrl" :alt="name" size="md" no-shadow loading="lazy" />
|
||||||
|
</router-link>
|
||||||
|
<router-link
|
||||||
|
class="gallery"
|
||||||
|
:class="{ 'no-image': !featuredImage }"
|
||||||
|
tabindex="-1"
|
||||||
|
:to="`/${projectTypeUrl}/${id}`"
|
||||||
|
:style="color ? `background-color: ${toColor};` : ''"
|
||||||
|
>
|
||||||
|
<img v-if="featuredImage" :src="featuredImage" alt="gallery image" />
|
||||||
|
</router-link>
|
||||||
|
<div class="title">
|
||||||
|
<router-link :to="`/${projectTypeUrl}/${id}`">
|
||||||
|
<h2 class="name">
|
||||||
|
{{ name }}
|
||||||
|
</h2>
|
||||||
|
</router-link>
|
||||||
|
<p v-if="author" class="author">
|
||||||
|
by
|
||||||
|
<router-link class="title-link" :to="'/user/' + author"
|
||||||
|
>{{ author }}
|
||||||
|
</router-link>
|
||||||
|
</p>
|
||||||
|
<Badge
|
||||||
|
v-if="status && status !== 'approved'"
|
||||||
|
:type="status"
|
||||||
|
class="status"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p class="description">
|
||||||
|
{{ description }}
|
||||||
|
</p>
|
||||||
|
<Categories
|
||||||
|
:categories="categories"
|
||||||
|
:type="type"
|
||||||
|
class="tags"
|
||||||
|
>
|
||||||
|
<EnvironmentIndicator
|
||||||
|
:type-only="moderation"
|
||||||
|
:client-side="clientSide"
|
||||||
|
:server-side="serverSide"
|
||||||
|
:type="projectTypeDisplay"
|
||||||
|
:search="search"
|
||||||
|
/>
|
||||||
|
</Categories>
|
||||||
|
<div class="stats">
|
||||||
|
<div v-if="downloads" class="stat">
|
||||||
|
<DownloadIcon aria-hidden="true" />
|
||||||
|
<p>
|
||||||
|
<strong>{{ formatNumber(downloads) }}</strong
|
||||||
|
><span class="stat-label">
|
||||||
|
download<span v-if="downloads !== '1'">s</span></span
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div v-if="follows" class="stat">
|
||||||
|
<HeartIcon aria-hidden="true" />
|
||||||
|
<p>
|
||||||
|
<strong>{{ formatNumber(follows) }}</strong
|
||||||
|
><span class="stat-label">
|
||||||
|
follower<span v-if="follows !== '1'">s</span></span
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="buttons">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="showUpdatedDate"
|
||||||
|
v-tooltip="updatedDate"
|
||||||
|
class="stat date"
|
||||||
|
>
|
||||||
|
<EditIcon aria-hidden="true" />
|
||||||
|
<span class="date-label">Updated </span
|
||||||
|
> {{ sinceUpdated }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
v-tooltip="createdDate"
|
||||||
|
class="stat date"
|
||||||
|
>
|
||||||
|
<CalendarIcon aria-hidden="true" />
|
||||||
|
<span class="date-label">Published </span
|
||||||
|
>{{ sinceCreation }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Badge, HeartIcon, DownloadIcon, EditIcon, CalendarIcon, Avatar, Categories, EnvironmentIndicator } from '@/components'
|
||||||
|
import { formatNumber } from '@/components/utils'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||||
|
dayjs.extend(relativeTime)
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
default: 'modrinth-0',
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'mod',
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: 'Project Name',
|
||||||
|
},
|
||||||
|
author: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
type: String,
|
||||||
|
default: 'A _type description',
|
||||||
|
},
|
||||||
|
iconUrl: {
|
||||||
|
type: String,
|
||||||
|
default: '#',
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
downloads: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
follows: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
createdAt: {
|
||||||
|
type: String,
|
||||||
|
default: '0000-00-00',
|
||||||
|
},
|
||||||
|
updatedAt: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
categories: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
},
|
||||||
|
filteredCategories: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
},
|
||||||
|
projectTypeDisplay: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
projectTypeUrl: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
status: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
hasModMessage: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
serverSide: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
clientSide: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
moderation: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
featuredImage: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
showUpdatedDate: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
hideLoaders: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
toColor() {
|
||||||
|
let color = this.color
|
||||||
|
|
||||||
|
color >>>= 0
|
||||||
|
const b = color & 0xff
|
||||||
|
const g = (color & 0xff00) >>> 8
|
||||||
|
const r = (color & 0xff0000) >>> 16
|
||||||
|
return 'rgba(' + [r, g, b, 1].join(',') + ')'
|
||||||
|
},
|
||||||
|
createdDate() {
|
||||||
|
return dayjs(this.createdAt).format('MMMM D, YYYY [at] h:mm:ss A')
|
||||||
|
},
|
||||||
|
sinceCreation() {
|
||||||
|
return dayjs(this.createdAt).fromNow()
|
||||||
|
},
|
||||||
|
updatedDate() {
|
||||||
|
return dayjs(this.updatedAt).format('MMMM D, YYYY [at] h:mm:ss A')
|
||||||
|
},
|
||||||
|
sinceUpdated() {
|
||||||
|
return dayjs(this.updatedAt).fromNow()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatNumber
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.project-card {
|
||||||
|
display: inline-grid;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-mode--list .project-card {
|
||||||
|
grid-template:
|
||||||
|
'icon title stats'
|
||||||
|
'icon description stats'
|
||||||
|
'icon tags stats';
|
||||||
|
grid-template-columns: min-content 1fr auto;
|
||||||
|
grid-template-rows: min-content 1fr min-content;
|
||||||
|
column-gap: var(--gap-md);
|
||||||
|
row-gap: var(--gap-sm);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media screen and (max-width: 750px) {
|
||||||
|
grid-template:
|
||||||
|
'icon title'
|
||||||
|
'icon description'
|
||||||
|
'icon tags'
|
||||||
|
'stats stats';
|
||||||
|
grid-template-columns: min-content auto;
|
||||||
|
grid-template-rows: min-content 1fr min-content min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 550px) {
|
||||||
|
grid-template:
|
||||||
|
'icon title'
|
||||||
|
'icon description'
|
||||||
|
'tags tags'
|
||||||
|
'stats stats';
|
||||||
|
grid-template-columns: min-content auto;
|
||||||
|
grid-template-rows: min-content 1fr min-content min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-mode--gallery .project-card,
|
||||||
|
.display-mode--grid .project-card {
|
||||||
|
padding: 0 0 1rem 0;
|
||||||
|
grid-template: 'gallery gallery' 'icon title' 'description description' 'tags tags' 'stats stats';
|
||||||
|
grid-template-columns: min-content 1fr;
|
||||||
|
grid-template-rows: min-content min-content 1fr min-content min-content;
|
||||||
|
row-gap: var(--gap-sm);
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 10rem;
|
||||||
|
background-color: var(--color-button-bg-active);
|
||||||
|
|
||||||
|
&.no-image {
|
||||||
|
filter: brightness(0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
box-shadow: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 10rem;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-left: var(--gap-lg);
|
||||||
|
margin-top: -3rem;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
img, svg {
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
border: 4px solid var(--color-raised-bg);
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-left: var(--gap-md);
|
||||||
|
margin-right: var(--gap-md);
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
margin-top: var(--gap-xs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-inline: var(--gap-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
margin-inline: var(--gap-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
margin-inline: var(--gap-lg);
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: var(--gap-sm);
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
> :first-child {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child > :last-child {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons:not(:empty) + .date {
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-mode--grid .project-card {
|
||||||
|
.gallery {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-top: calc(var(--gap-lg) - var(--gap-sm));
|
||||||
|
|
||||||
|
img,
|
||||||
|
svg {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: calc(var(--gap-lg) - var(--gap-sm));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
grid-area: icon;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
display: none;
|
||||||
|
height: 10rem;
|
||||||
|
grid-area: gallery;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
grid-area: title;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: baseline;
|
||||||
|
column-gap: var(--gap-sm);
|
||||||
|
row-gap: 0;
|
||||||
|
word-wrap: anywhere;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: bolder;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: auto;
|
||||||
|
color: var(--color-special-orange);
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-bottom: -0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&:focus-visible,
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
color: var(--color-text-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
grid-area: stats;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: var(--gap-md);
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
width: fit-content;
|
||||||
|
gap: var(--gap-xs);
|
||||||
|
--stat-strong-size: 1.25rem;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: var(--stat-strong-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: var(--stat-strong-size);
|
||||||
|
width: var(--stat-strong-size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 750px) {
|
||||||
|
flex-direction: row;
|
||||||
|
column-gap: var(--gap-md);
|
||||||
|
margin-top: var(--gap-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.environment {
|
||||||
|
color: var(--color-text) !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
grid-area: description;
|
||||||
|
margin-block: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
grid-area: tags;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
@media screen and (max-width: 550px) {
|
||||||
|
margin-top: var(--gap-xs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--gap-sm);
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-mode {
|
||||||
|
@media screen and (min-width: 750px) {
|
||||||
|
grid-template:
|
||||||
|
'icon title'
|
||||||
|
'icon description'
|
||||||
|
'icon tags'
|
||||||
|
'stats stats' !important;
|
||||||
|
grid-template-columns: min-content auto !important;
|
||||||
|
grid-template-rows: min-content 1fr min-content min-content !important;
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
margin-top: var(--gap-xs) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
flex-direction: row;
|
||||||
|
column-gap: var(--gap-md) !important;
|
||||||
|
margin-top: var(--gap-xs) !important;
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.base-card {
|
||||||
|
padding: var(--gap-lg);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
min-height: 2rem;
|
||||||
|
|
||||||
|
background-color: var(--color-raised-bg);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
|
||||||
|
outline: 2px solid transparent;
|
||||||
|
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
|
||||||
|
.card__overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
grid-gap: 0.5rem;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
border-left: 0.5rem solid var(--color-banner-side);
|
||||||
|
padding: 1.5rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
background-color: var(--color-banner-bg);
|
||||||
|
color: var(--color-banner-text);
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
/* Uses active color to increase contrast */
|
||||||
|
color: var(--color-link-active);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.moderation-card {
|
||||||
|
background-color: var(--color-banner-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -9,6 +9,10 @@ export { default as Slider } from './base/Slider.vue'
|
|||||||
export { default as AnimatedLogo } from './brand/AnimatedLogo.vue'
|
export { default as AnimatedLogo } from './brand/AnimatedLogo.vue'
|
||||||
export { default as TextLogo } from './brand/TextLogo.vue'
|
export { default as TextLogo } from './brand/TextLogo.vue'
|
||||||
export { default as Pagination } from './base/Pagination.vue'
|
export { default as Pagination } from './base/Pagination.vue'
|
||||||
|
export { default as ProjectCard } from './base/ProjectCard.vue'
|
||||||
|
export { default as EnvironmentIndicator } from './base/EnvironmentIndicator.vue'
|
||||||
|
|
||||||
|
export { default as Categories } from './search/Categories.vue'
|
||||||
|
|
||||||
export { default as NavItem } from './nav/NavItem.vue'
|
export { default as NavItem } from './nav/NavItem.vue'
|
||||||
export { default as NavRow } from './nav/NavRow.vue'
|
export { default as NavRow } from './nav/NavRow.vue'
|
||||||
@@ -52,6 +56,7 @@ export { default as GlobeIcon } from '@/assets/icons/globe.svg'
|
|||||||
export { default as GridIcon } from '@/assets/icons/grid.svg'
|
export { default as GridIcon } from '@/assets/icons/grid.svg'
|
||||||
export { default as HamburgerIcon } from '@/assets/icons/hamburger.svg'
|
export { default as HamburgerIcon } from '@/assets/icons/hamburger.svg'
|
||||||
export { default as HashIcon } from '@/assets/icons/hash.svg'
|
export { default as HashIcon } from '@/assets/icons/hash.svg'
|
||||||
|
export { default as HeartIcon } from '@/assets/icons/heart.svg'
|
||||||
export { default as HeartHandshakeIcon } from '@/assets/icons/heart-handshake.svg'
|
export { default as HeartHandshakeIcon } from '@/assets/icons/heart-handshake.svg'
|
||||||
export { default as ImageIcon } from '@/assets/icons/image.svg'
|
export { default as ImageIcon } from '@/assets/icons/image.svg'
|
||||||
export { default as InfoIcon } from '@/assets/icons/info.svg'
|
export { default as InfoIcon } from '@/assets/icons/info.svg'
|
||||||
|
|||||||
54
lib/components/search/Categories.vue
Normal file
54
lib/components/search/Categories.vue
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<div class="categories">
|
||||||
|
<slot />
|
||||||
|
<span
|
||||||
|
v-for="category in categories"
|
||||||
|
:key="category.name"
|
||||||
|
v-html="category.icon + formatCategory(category.name)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { formatCategory } from '@/components/utils'
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Categories',
|
||||||
|
props: {
|
||||||
|
categories: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatCategory,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.categories {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--gap-sm);
|
||||||
|
|
||||||
|
span ::v-deep {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
color: var(--color-icon);
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 1rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
202
lib/components/utils.js
Normal file
202
lib/components/utils.js
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
export const formatNumber = (number) => {
|
||||||
|
const x = +number
|
||||||
|
if (x >= 1000000) {
|
||||||
|
return (x / 1000000).toFixed(2).toString() + 'M'
|
||||||
|
} else if (x >= 10000) {
|
||||||
|
return (x / 1000).toFixed(1).toString() + 'K'
|
||||||
|
} else {
|
||||||
|
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatMoney(number) {
|
||||||
|
const x = +number
|
||||||
|
if (x >= 1000000) {
|
||||||
|
return '$' + (x / 1000000).toFixed(2).toString() + 'M'
|
||||||
|
} else if (x >= 10000) {
|
||||||
|
return '$' + (x / 1000).toFixed(1).toString() + 'K'
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
'$' +
|
||||||
|
x
|
||||||
|
.toFixed(2)
|
||||||
|
.toString()
|
||||||
|
.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const formatBytes = (bytes, decimals = 2) => {
|
||||||
|
if (bytes === 0) return '0 Bytes'
|
||||||
|
|
||||||
|
const k = 1024
|
||||||
|
const dm = decimals < 0 ? 0 : decimals
|
||||||
|
const sizes = ['Bytes', 'KiB', 'MiB', 'GiB']
|
||||||
|
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const capitalizeString = (name) => {
|
||||||
|
return name ? name.charAt(0).toUpperCase() + name.slice(1) : name
|
||||||
|
}
|
||||||
|
|
||||||
|
export const formatWallet = (name) => {
|
||||||
|
if (name === 'paypal') {
|
||||||
|
return 'PayPal'
|
||||||
|
}
|
||||||
|
return capitalizeString(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const formatProjectType = (name) => {
|
||||||
|
if (name === 'resourcepack') {
|
||||||
|
return 'Resource Pack'
|
||||||
|
} else if (name === 'datapack') {
|
||||||
|
return 'Data Pack'
|
||||||
|
}
|
||||||
|
|
||||||
|
return capitalizeString(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const formatCategory = (name) => {
|
||||||
|
if (name === 'modloader') {
|
||||||
|
return "Risugami's ModLoader"
|
||||||
|
} else if (name === 'bungeecord') {
|
||||||
|
return 'BungeeCord'
|
||||||
|
} else if (name === 'liteloader') {
|
||||||
|
return 'LiteLoader'
|
||||||
|
} else if (name === 'game-mechanics') {
|
||||||
|
return 'Game Mechanics'
|
||||||
|
} else if (name === 'worldgen') {
|
||||||
|
return 'World Generation'
|
||||||
|
} else if (name === 'core-shaders') {
|
||||||
|
return 'Core Shaders'
|
||||||
|
} else if (name === 'gui') {
|
||||||
|
return 'GUI'
|
||||||
|
} else if (name === '8x-') {
|
||||||
|
return '8x or lower'
|
||||||
|
} else if (name === '512x+') {
|
||||||
|
return '512x or higher'
|
||||||
|
} else if (name === 'kitchen-sink') {
|
||||||
|
return 'Kitchen Sink'
|
||||||
|
} else if (name === 'path-tracing') {
|
||||||
|
return 'Path Tracing'
|
||||||
|
} else if (name === 'pbr') {
|
||||||
|
return 'PBR'
|
||||||
|
} else if (name === 'datapack') {
|
||||||
|
return 'Data Pack'
|
||||||
|
} else if (name === 'colored-lighting') {
|
||||||
|
return 'Colored Lighting'
|
||||||
|
} else if (name === 'optifine') {
|
||||||
|
return 'OptiFine'
|
||||||
|
}
|
||||||
|
|
||||||
|
return capitalizeString(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const formatCategoryHeader = (name) => {
|
||||||
|
return capitalizeString(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const formatProjectStatus = (name) => {
|
||||||
|
if (name === 'approved') {
|
||||||
|
return 'Listed'
|
||||||
|
} else if (name === 'processing') {
|
||||||
|
return 'Under review'
|
||||||
|
}
|
||||||
|
|
||||||
|
return capitalizeString(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const formatVersions = (versionArray, store) => {
|
||||||
|
const allVersions = store.state.tag.gameVersions.slice().reverse()
|
||||||
|
const allReleases = allVersions.filter((x) => x.version_type === 'release')
|
||||||
|
|
||||||
|
const intervals = []
|
||||||
|
let currentInterval = 0
|
||||||
|
|
||||||
|
for (let i = 0; i < versionArray.length; i++) {
|
||||||
|
const index = allVersions.findIndex((x) => x.version === versionArray[i])
|
||||||
|
const releaseIndex = allReleases.findIndex(
|
||||||
|
(x) => x.version === versionArray[i]
|
||||||
|
)
|
||||||
|
|
||||||
|
if (i === 0) {
|
||||||
|
intervals.push([[versionArray[i], index, releaseIndex]])
|
||||||
|
} else {
|
||||||
|
const intervalBase = intervals[currentInterval]
|
||||||
|
|
||||||
|
if (
|
||||||
|
(index - intervalBase[intervalBase.length - 1][1] === 1 ||
|
||||||
|
releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
|
||||||
|
(allVersions[intervalBase[0][1]].version_type === 'release' ||
|
||||||
|
allVersions[index].version_type !== 'release')
|
||||||
|
) {
|
||||||
|
intervalBase[1] = [versionArray[i], index, releaseIndex]
|
||||||
|
} else {
|
||||||
|
currentInterval += 1
|
||||||
|
intervals[currentInterval] = [[versionArray[i], index, releaseIndex]]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const newIntervals = []
|
||||||
|
for (let i = 0; i < intervals.length; i++) {
|
||||||
|
const interval = intervals[i]
|
||||||
|
|
||||||
|
if (
|
||||||
|
interval.length === 2 &&
|
||||||
|
interval[0][2] !== -1 &&
|
||||||
|
interval[1][2] === -1
|
||||||
|
) {
|
||||||
|
let lastSnapshot = null
|
||||||
|
for (let j = interval[1][1]; j > interval[0][1]; j--) {
|
||||||
|
if (allVersions[j].version_type === 'release') {
|
||||||
|
newIntervals.push([
|
||||||
|
interval[0],
|
||||||
|
[
|
||||||
|
allVersions[j].version,
|
||||||
|
j,
|
||||||
|
allReleases.findIndex(
|
||||||
|
(x) => x.version === allVersions[j].version
|
||||||
|
),
|
||||||
|
],
|
||||||
|
])
|
||||||
|
|
||||||
|
if (lastSnapshot !== null && lastSnapshot !== j + 1) {
|
||||||
|
newIntervals.push([
|
||||||
|
[allVersions[lastSnapshot].version, lastSnapshot, -1],
|
||||||
|
interval[1],
|
||||||
|
])
|
||||||
|
} else {
|
||||||
|
newIntervals.push([interval[1]])
|
||||||
|
}
|
||||||
|
|
||||||
|
break
|
||||||
|
} else {
|
||||||
|
lastSnapshot = j
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
newIntervals.push(interval)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const output = []
|
||||||
|
|
||||||
|
for (const interval of newIntervals) {
|
||||||
|
if (interval.length === 2) {
|
||||||
|
output.push(`${interval[0][0]}—${interval[1][0]}`)
|
||||||
|
} else {
|
||||||
|
output.push(interval[0][0])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return output.join(', ')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function cycleValue(value, values) {
|
||||||
|
const index = values.indexOf(value) + 1
|
||||||
|
return values[index % values.length]
|
||||||
|
}
|
||||||
@@ -1,8 +1,10 @@
|
|||||||
import * as components from './components'
|
import * as components from './components'
|
||||||
|
import FloatingVue from 'floating-vue'
|
||||||
|
|
||||||
function install(app) {
|
function install(app) {
|
||||||
for (const key in components) {
|
for (const key in components) {
|
||||||
app.component(key, components[key])
|
app.component(key, components[key])
|
||||||
|
app.use(FloatingVue)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -23,6 +23,8 @@
|
|||||||
"docs:preview": "vitepress preview docs"
|
"docs:preview": "vitepress preview docs"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"dayjs": "^1.11.7",
|
||||||
|
"floating-vue": "^2.0.0-beta.20",
|
||||||
"vue": "^3.2.45",
|
"vue": "^3.2.45",
|
||||||
"vue-router": "^4.1.6"
|
"vue-router": "^4.1.6"
|
||||||
},
|
},
|
||||||
@@ -31,12 +33,14 @@
|
|||||||
"eslint": "^8.33.0",
|
"eslint": "^8.33.0",
|
||||||
"eslint-config-prettier": "^8.6.0",
|
"eslint-config-prettier": "^8.6.0",
|
||||||
"eslint-plugin-vue": "^9.9.0",
|
"eslint-plugin-vue": "^9.9.0",
|
||||||
|
"postcss": "^8.4.21",
|
||||||
|
"postcss-prefix-selector": "^1.16.0",
|
||||||
"prettier": "^2.7.1",
|
"prettier": "^2.7.1",
|
||||||
"sass": "^1.57.1",
|
"sass": "^1.57.1",
|
||||||
"sass-loader": "^13.2.0",
|
"sass-loader": "^13.2.0",
|
||||||
"vite": "^4.0.0",
|
"vite": "^4.0.0",
|
||||||
"vite-svg-loader": "^4.0.0",
|
|
||||||
"vite-plugin-eslint": "^1.8.1",
|
"vite-plugin-eslint": "^1.8.1",
|
||||||
|
"vite-svg-loader": "^4.0.0",
|
||||||
"vitepress": "^1.0.0-alpha.46"
|
"vitepress": "^1.0.0-alpha.46"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user