You've already forked AstralRinth
forked from didirus/AstralRinth
Remove lots of inline SVGs, use moment.js for times, add some pages for future work
This commit is contained in:
Jai A
6
assets/images/categories/adventure.svg
Normal file
6
assets/images/categories/adventure.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<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"></circle>
|
||||||
|
<polygon
|
||||||
|
points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
|
||||||
|
></polygon>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 267 B |
22
assets/images/categories/cursed.svg
Normal file
22
assets/images/categories/cursed.svg
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<rect x="7" y="7.5" width="10" height="14" rx="5" />
|
||||||
|
<polyline points="2 12.5 4 14.5 7 14.5" />
|
||||||
|
<polyline points="22 12.5 20 14.5 17 14.5" />
|
||||||
|
<polyline points="3 21.5 5 18.5 7 17.5" />
|
||||||
|
<polyline points="21 21.5 19 18.5 17 17.5" />
|
||||||
|
<polyline points="3 8.5 5 10.5 7 11.5" />
|
||||||
|
<polyline points="21 8.5 19 10.5 17 11.5" />
|
||||||
|
<line x1="12" y1="7.5" x2="12" y2="21.5" />
|
||||||
|
<path
|
||||||
|
d="M15.38,8.82A3,3,0,0,0,16,7h0a3,3,0,0,0-3-3H11A3,3,0,0,0,8,7H8a3,3,0,0,0,.61,1.82"
|
||||||
|
/>
|
||||||
|
<line x1="9" y1="4.5" x2="8" y2="2.5" />
|
||||||
|
<line x1="15" y1="4.5" x2="16" y2="2.5" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 712 B |
11
assets/images/categories/decoration.svg
Normal file
11
assets/images/categories/decoration.svg
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||||
|
<polyline points="9 22 9 12 15 12 15 22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 252 B |
18
assets/images/categories/equipment.svg
Normal file
18
assets/images/categories/equipment.svg
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M17.573 20.038L3.849 7.913 2.753 2.755 7.838 4.06 19.47 18.206l-1.898 1.832z"
|
||||||
|
/>
|
||||||
|
<path d="M7.45 14.455l-3.043 3.661 1.887 1.843 3.717-3.25" />
|
||||||
|
<path
|
||||||
|
d="M16.75 10.82l3.333-2.913 1.123-5.152-5.091 1.28-2.483 2.985"
|
||||||
|
/>
|
||||||
|
<path d="M21.131 16.602l-5.187 5.01 2.596-2.508 2.667 2.761" />
|
||||||
|
<path d="M2.828 16.602l5.188 5.01-2.597-2.508-2.667 2.761" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 517 B |
14
assets/images/categories/food.svg
Normal file
14
assets/images/categories/food.svg
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
|
||||||
|
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
|
||||||
|
<line x1="6" y1="1" x2="6" y2="4"></line>
|
||||||
|
<line x1="10" y1="1" x2="10" y2="4"></line>
|
||||||
|
<line x1="14" y1="1" x2="14" y2="4"></line>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 388 B |
13
assets/images/categories/library.svg
Normal file
13
assets/images/categories/library.svg
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
||||||
|
<path
|
||||||
|
d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 286 B |
12
assets/images/categories/magic.svg
Normal file
12
assets/images/categories/magic.svg
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10.42 3C9.88 9.2 4 9.4 4 14.38c0 2.8 1.7 5.35 4.17 6.62.76-2.1 3.83-3.17 3.83-5.57a7.65 7.65 0 013.92 5.52C24.13 15.88 18.9 6.18 10.42 3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 304 B |
14
assets/images/categories/misc.svg
Normal file
14
assets/images/categories/misc.svg
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<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"></circle>
|
||||||
|
<line x1="2" y1="12" x2="22" y2="12"></line>
|
||||||
|
<path
|
||||||
|
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 352 B |
12
assets/images/categories/storage.svg
Normal file
12
assets/images/categories/storage.svg
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="21 8 21 21 3 21 3 8"></polyline>
|
||||||
|
<rect x="1" y="3" width="22" height="5"></rect>
|
||||||
|
<line x1="10" y1="12" x2="14" y2="12"></line>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 295 B |
1
assets/images/categories/tech.svg
Normal file
1
assets/images/categories/tech.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<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"></line><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"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>
|
||||||
|
After Width: | Height: | Size: 392 B |
11
assets/images/categories/utility.svg
Normal file
11
assets/images/categories/utility.svg
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 262 B |
12
assets/images/categories/worldgen.svg
Normal file
12
assets/images/categories/worldgen.svg
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2v6.5M10 4l2 1 2-1M3.3 7L9 10.2m-4.9-.5L6 8.5l.1-2.2M3.3 17L9 13.7m-2.9 4L6 15.5l-1.9-1.2M12 22v-6.5m2 4.5l-2-1-2 1m5-6.2l5.6 3.3m-.7-2.8L18 15.5l-.1 2.2M20.7 7L15 10.3m2.9-4l.1 2.2 1.9 1.2M12 8.5l3 1.8v3.5l-3 1.8-3-1.8v-3.5l3-1.8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 401 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.4 KiB |
@@ -1,7 +1,4 @@
|
|||||||
:root {
|
.light-mode {
|
||||||
/**
|
|
||||||
* Colors
|
|
||||||
*/
|
|
||||||
--color-text: #1a202c;
|
--color-text: #1a202c;
|
||||||
--color-bg: #ffffff;
|
--color-bg: #ffffff;
|
||||||
|
|
||||||
@@ -18,21 +15,9 @@
|
|||||||
--color-grey-5: #718096;
|
--color-grey-5: #718096;
|
||||||
--color-grey-6: #4a5568;
|
--color-grey-6: #4a5568;
|
||||||
--color-grey-7: #2d3748;
|
--color-grey-7: #2d3748;
|
||||||
|
|
||||||
/**
|
|
||||||
* Sizes
|
|
||||||
*/
|
|
||||||
--size-rounded-sm: 0.25rem;
|
|
||||||
--size-rounded-md: 0.5rem;
|
|
||||||
--size-rounded-lg: 1rem;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Defaults
|
|
||||||
*/
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[data-theme='dark'] {
|
.dark-mode {
|
||||||
--color-text: #ccccc2;
|
--color-text: #ccccc2;
|
||||||
--color-bg: #191917;
|
--color-bg: #191917;
|
||||||
|
|
||||||
@@ -58,6 +43,17 @@ body {
|
|||||||
Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
/**
|
||||||
|
* Sizes
|
||||||
|
*/
|
||||||
|
--size-rounded-sm: 0.25rem;
|
||||||
|
--size-rounded-md: 0.5rem;
|
||||||
|
--size-rounded-lg: 1rem;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defaults
|
||||||
|
*/
|
||||||
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|||||||
173
components/InputLabel.vue
Normal file
173
components/InputLabel.vue
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<div class="columns label">
|
||||||
|
<p>{{ label }}</p>
|
||||||
|
<button :v-tooltip="tooltip">
|
||||||
|
<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"></circle>
|
||||||
|
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||||
|
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<svg
|
||||||
|
v-if="required"
|
||||||
|
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"></circle>
|
||||||
|
<line x1="12" y1="8" x2="12" y2="12"></line>
|
||||||
|
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'InputLabel',
|
||||||
|
props: {
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: 'Label',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
required: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.label {
|
||||||
|
color: var(--color-text);
|
||||||
|
height: 24px;
|
||||||
|
font-size: 24px;
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
display: block !important;
|
||||||
|
z-index: 10000;
|
||||||
|
|
||||||
|
.tooltip-inner {
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 5px 10px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-arrow {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
position: absolute;
|
||||||
|
margin: 5px;
|
||||||
|
border-color: black;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[x-placement^='top'] {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
.tooltip-arrow {
|
||||||
|
border-width: 5px 5px 0 5px;
|
||||||
|
border-left-color: transparent !important;
|
||||||
|
border-right-color: transparent !important;
|
||||||
|
border-bottom-color: transparent !important;
|
||||||
|
bottom: -5px;
|
||||||
|
left: calc(50% - 5px);
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[x-placement^='bottom'] {
|
||||||
|
margin-top: 5px;
|
||||||
|
|
||||||
|
.tooltip-arrow {
|
||||||
|
border-width: 0 5px 5px 5px;
|
||||||
|
border-left-color: transparent !important;
|
||||||
|
border-right-color: transparent !important;
|
||||||
|
border-top-color: transparent !important;
|
||||||
|
top: -5px;
|
||||||
|
left: calc(50% - 5px);
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[x-placement^='right'] {
|
||||||
|
margin-left: 5px;
|
||||||
|
|
||||||
|
.tooltip-arrow {
|
||||||
|
border-width: 5px 5px 5px 0;
|
||||||
|
border-left-color: transparent !important;
|
||||||
|
border-top-color: transparent !important;
|
||||||
|
border-bottom-color: transparent !important;
|
||||||
|
left: -5px;
|
||||||
|
top: calc(50% - 5px);
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[x-placement^='left'] {
|
||||||
|
margin-right: 5px;
|
||||||
|
|
||||||
|
.tooltip-arrow {
|
||||||
|
border-width: 5px 0 5px 5px;
|
||||||
|
border-top-color: transparent !important;
|
||||||
|
border-right-color: transparent !important;
|
||||||
|
border-bottom-color: transparent !important;
|
||||||
|
right: -5px;
|
||||||
|
top: calc(50% - 5px);
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.popover {
|
||||||
|
$color: #f9f9f9;
|
||||||
|
|
||||||
|
.popover-inner {
|
||||||
|
background: $color;
|
||||||
|
color: black;
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 5px 30px rgba(black, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-arrow {
|
||||||
|
border-color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-hidden='true'] {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.15s, visibility 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-hidden='false'] {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.15s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -45,7 +45,7 @@
|
|||||||
d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z"
|
d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<p>{{ createdAt }}</p>
|
<p>{{ $moment(createdAt).fromNow() }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-image columns">
|
<div class="result-image columns">
|
||||||
<svg
|
<svg
|
||||||
@@ -63,7 +63,7 @@
|
|||||||
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
|
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
<p>{{ updatedAt }}</p>
|
<p>{{ $moment(updatedAt).fromNow() }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="result-image columns">
|
<div class="result-image columns">
|
||||||
<svg
|
<svg
|
||||||
@@ -103,206 +103,51 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="categories">
|
<div class="categories">
|
||||||
<p v-if="categories.includes('technology')">
|
<p v-if="categories.includes('technology')">
|
||||||
<svg
|
<TechCategory />
|
||||||
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"></line>
|
|
||||||
<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"
|
|
||||||
></path>
|
|
||||||
<line x1="6" y1="16" x2="6.01" y2="16"></line>
|
|
||||||
<line x1="10" y1="16" x2="10.01" y2="16"></line>
|
|
||||||
</svg>
|
|
||||||
Technology
|
Technology
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('adventure')">
|
<p v-if="categories.includes('adventure')">
|
||||||
<svg
|
<AdventureCategory />
|
||||||
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"></circle>
|
|
||||||
<polygon
|
|
||||||
points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
|
|
||||||
></polygon>
|
|
||||||
</svg>
|
|
||||||
Adventure
|
Adventure
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('magic')">
|
<p v-if="categories.includes('magic')">
|
||||||
<svg
|
<MagicCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M10.42 3C9.88 9.2 4 9.4 4 14.38c0 2.8 1.7 5.35 4.17 6.62.76-2.1 3.83-3.17 3.83-5.57a7.65 7.65 0 013.92 5.52C24.13 15.88 18.9 6.18 10.42 3z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Magic
|
Magic
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('utility')">
|
<p v-if="categories.includes('utility')">
|
||||||
<svg
|
<UtilityCategory />
|
||||||
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>
|
|
||||||
Utility
|
Utility
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('decoration')">
|
<p v-if="categories.includes('decoration')">
|
||||||
<svg
|
<DecorationCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
||||||
<polyline points="9 22 9 12 15 12 15 22" />
|
|
||||||
</svg>
|
|
||||||
Decoration
|
Decoration
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('library')">
|
<p v-if="categories.includes('library')">
|
||||||
<svg
|
<LibraryCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
|
||||||
<path
|
|
||||||
d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
Library
|
Library
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('cursed')">
|
<p v-if="categories.includes('cursed')">
|
||||||
<svg
|
<CursedCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<rect x="7" y="7.5" width="10" height="14" rx="5" />
|
|
||||||
<polyline points="2 12.5 4 14.5 7 14.5" />
|
|
||||||
<polyline points="22 12.5 20 14.5 17 14.5" />
|
|
||||||
<polyline points="3 21.5 5 18.5 7 17.5" />
|
|
||||||
<polyline points="21 21.5 19 18.5 17 17.5" />
|
|
||||||
<polyline points="3 8.5 5 10.5 7 11.5" />
|
|
||||||
<polyline points="21 8.5 19 10.5 17 11.5" />
|
|
||||||
<line x1="12" y1="7.5" x2="12" y2="21.5" />
|
|
||||||
<path
|
|
||||||
d="M15.38,8.82A3,3,0,0,0,16,7h0a3,3,0,0,0-3-3H11A3,3,0,0,0,8,7H8a3,3,0,0,0,.61,1.82"
|
|
||||||
/>
|
|
||||||
<line x1="9" y1="4.5" x2="8" y2="2.5" />
|
|
||||||
<line x1="15" y1="4.5" x2="16" y2="2.5" />
|
|
||||||
</svg>
|
|
||||||
Cursed
|
Cursed
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('worldgen')">
|
<p v-if="categories.includes('worldgen')">
|
||||||
<svg
|
<WorldGenCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M12 2v6.5M10 4l2 1 2-1M3.3 7L9 10.2m-4.9-.5L6 8.5l.1-2.2M3.3 17L9 13.7m-2.9 4L6 15.5l-1.9-1.2M12 22v-6.5m2 4.5l-2-1-2 1m5-6.2l5.6 3.3m-.7-2.8L18 15.5l-.1 2.2M20.7 7L15 10.3m2.9-4l.1 2.2 1.9 1.2M12 8.5l3 1.8v3.5l-3 1.8-3-1.8v-3.5l3-1.8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Worldgen
|
Worldgen
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('storage')">
|
<p v-if="categories.includes('storage')">
|
||||||
<svg
|
<StorageCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<polyline points="21 8 21 21 3 21 3 8"></polyline>
|
|
||||||
<rect x="1" y="3" width="22" height="5"></rect>
|
|
||||||
<line x1="10" y1="12" x2="14" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
Storage
|
Storage
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('food')">
|
<p v-if="categories.includes('food')">
|
||||||
<svg
|
<FoodCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
|
|
||||||
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
|
|
||||||
<line x1="6" y1="1" x2="6" y2="4"></line>
|
|
||||||
<line x1="10" y1="1" x2="10" y2="4"></line>
|
|
||||||
<line x1="14" y1="1" x2="14" y2="4"></line>
|
|
||||||
</svg>
|
|
||||||
Food
|
Food
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('equipment')">
|
<p v-if="categories.includes('equipment')">
|
||||||
<svg
|
<EquipmentCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M17.573 20.038L3.849 7.913 2.753 2.755 7.838 4.06 19.47 18.206l-1.898 1.832z"
|
|
||||||
/>
|
|
||||||
<path d="M7.45 14.455l-3.043 3.661 1.887 1.843 3.717-3.25" />
|
|
||||||
<path
|
|
||||||
d="M16.75 10.82l3.333-2.913 1.123-5.152-5.091 1.28-2.483 2.985"
|
|
||||||
/>
|
|
||||||
<path d="M21.131 16.602l-5.187 5.01 2.596-2.508 2.667 2.761" />
|
|
||||||
<path d="M2.828 16.602l5.188 5.01-2.597-2.508-2.667 2.761" />
|
|
||||||
</svg>
|
|
||||||
Equipment
|
Equipment
|
||||||
</p>
|
</p>
|
||||||
<p v-if="categories.includes('misc')">
|
<p v-if="categories.includes('misc')">
|
||||||
<svg
|
<MiscCategory />
|
||||||
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"></circle>
|
|
||||||
<line x1="2" y1="12" x2="22" y2="12"></line>
|
|
||||||
<path
|
|
||||||
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
Misc
|
Misc
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -310,8 +155,35 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import TechCategory from '~/assets/images/categories/tech.svg?inline'
|
||||||
|
import AdventureCategory from '~/assets/images/categories/adventure.svg?inline'
|
||||||
|
import CursedCategory from '~/assets/images/categories/cursed.svg?inline'
|
||||||
|
import DecorationCategory from '~/assets/images/categories/decoration.svg?inline'
|
||||||
|
import EquipmentCategory from '~/assets/images/categories/equipment.svg?inline'
|
||||||
|
import FoodCategory from '~/assets/images/categories/food.svg?inline'
|
||||||
|
import LibraryCategory from '~/assets/images/categories/library.svg?inline'
|
||||||
|
import MagicCategory from '~/assets/images/categories/magic.svg?inline'
|
||||||
|
import MiscCategory from '~/assets/images/categories/misc.svg?inline'
|
||||||
|
import StorageCategory from '~/assets/images/categories/storage.svg?inline'
|
||||||
|
import UtilityCategory from '~/assets/images/categories/utility.svg?inline'
|
||||||
|
import WorldGenCategory from '~/assets/images/categories/worldgen.svg?inline'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SearchResult',
|
name: 'ModResult',
|
||||||
|
components: {
|
||||||
|
TechCategory,
|
||||||
|
AdventureCategory,
|
||||||
|
CursedCategory,
|
||||||
|
DecorationCategory,
|
||||||
|
EquipmentCategory,
|
||||||
|
FoodCategory,
|
||||||
|
LibraryCategory,
|
||||||
|
MagicCategory,
|
||||||
|
MiscCategory,
|
||||||
|
StorageCategory,
|
||||||
|
UtilityCategory,
|
||||||
|
WorldGenCategory,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|||||||
@@ -142,7 +142,6 @@
|
|||||||
alt="avatar"
|
alt="avatar"
|
||||||
@click="showPopup = !showPopup"
|
@click="showPopup = !showPopup"
|
||||||
/>
|
/>
|
||||||
<span> {{ this.$auth.user.username }} </span>
|
|
||||||
<div v-if="showPopup" class="user-actions-popup">
|
<div v-if="showPopup" class="user-actions-popup">
|
||||||
<div class="popup-inner">
|
<div class="popup-inner">
|
||||||
<p>
|
<p>
|
||||||
@@ -156,6 +155,7 @@
|
|||||||
<p @click="logout">Logout</p>
|
<p @click="logout">Logout</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<span> {{ this.$auth.user.username }} </span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="this.$auth.loggedIn" class="notifications">
|
<div v-if="this.$auth.loggedIn" class="notifications">
|
||||||
<svg
|
<svg
|
||||||
@@ -172,14 +172,17 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="theme">
|
<div class="theme">
|
||||||
<svg
|
<svg
|
||||||
v-if="theme === 'light'"
|
v-if="$colorMode.value === 'light'"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
@click="switchTheme"
|
@click="
|
||||||
|
$colorMode.value =
|
||||||
|
$colorMode.value === 'dark' ? 'light' : 'dark'
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -191,7 +194,10 @@
|
|||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
@click="switchTheme"
|
@click="
|
||||||
|
$colorMode.value =
|
||||||
|
$colorMode.value === 'dark' ? 'light' : 'dark'
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<circle cx="12" cy="12" r="5"></circle>
|
<circle cx="12" cy="12" r="5"></circle>
|
||||||
<line x1="12" y1="1" x2="12" y2="3"></line>
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||||
@@ -237,30 +243,10 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
theme: 'light',
|
|
||||||
showPopup: false,
|
showPopup: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeMount() {
|
|
||||||
const theme = localStorage.getItem('data-theme')
|
|
||||||
? localStorage.getItem('data-theme')
|
|
||||||
: 'light'
|
|
||||||
|
|
||||||
this.theme = theme
|
|
||||||
document.documentElement.setAttribute('data-theme', theme)
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
switchTheme() {
|
|
||||||
let theme = localStorage.getItem('data-theme')
|
|
||||||
if (theme === 'dark') {
|
|
||||||
theme = 'light'
|
|
||||||
} else {
|
|
||||||
theme = 'dark'
|
|
||||||
}
|
|
||||||
this.theme = theme
|
|
||||||
localStorage.setItem('data-theme', theme)
|
|
||||||
document.documentElement.setAttribute('data-theme', theme)
|
|
||||||
},
|
|
||||||
toggleNavMenu() {
|
toggleNavMenu() {
|
||||||
document.body.style.overflow =
|
document.body.style.overflow =
|
||||||
document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
|
document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
|
||||||
@@ -468,8 +454,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
bottom: 500%;
|
bottom: 100%;
|
||||||
margin-left: -165px;
|
margin-left: -50px;
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
color: var(--color-grey-2);
|
color: var(--color-grey-2);
|
||||||
|
|||||||
@@ -125,6 +125,9 @@ export default {
|
|||||||
buildModules: [
|
buildModules: [
|
||||||
// Doc: https://github.com/nuxt-community/eslint-module
|
// Doc: https://github.com/nuxt-community/eslint-module
|
||||||
'@nuxtjs/eslint-module',
|
'@nuxtjs/eslint-module',
|
||||||
|
'@nuxtjs/svg',
|
||||||
|
'@nuxtjs/color-mode',
|
||||||
|
'@nuxtjs/moment',
|
||||||
],
|
],
|
||||||
/*
|
/*
|
||||||
** Nuxt.js modules
|
** Nuxt.js modules
|
||||||
@@ -133,6 +136,7 @@ export default {
|
|||||||
// Doc: https://axios.nuxtjs.org/usage
|
// Doc: https://axios.nuxtjs.org/usage
|
||||||
'@nuxtjs/axios',
|
'@nuxtjs/axios',
|
||||||
'@nuxtjs/auth',
|
'@nuxtjs/auth',
|
||||||
|
'@nuxtjs/markdownit',
|
||||||
],
|
],
|
||||||
auth: {
|
auth: {
|
||||||
strategies: {
|
strategies: {
|
||||||
@@ -152,7 +156,22 @@ export default {
|
|||||||
** Axios module configuration
|
** Axios module configuration
|
||||||
** See https://axios.nuxtjs.org/options
|
** See https://axios.nuxtjs.org/options
|
||||||
*/
|
*/
|
||||||
axios: {},
|
axios: {
|
||||||
|
headers: {
|
||||||
|
common: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
moment: {
|
||||||
|
defaultTimezone: 'America/Los_Angeles',
|
||||||
|
timezone: true,
|
||||||
|
startYear: 2010,
|
||||||
|
endYear: 2030,
|
||||||
|
},
|
||||||
|
markdownit: {
|
||||||
|
injected: true,
|
||||||
|
},
|
||||||
/*
|
/*
|
||||||
** Build configuration
|
** Build configuration
|
||||||
** See https://nuxtjs.org/api/configuration-build/
|
** See https://nuxtjs.org/api/configuration-build/
|
||||||
|
|||||||
1535
package-lock.json
generated
1535
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -18,8 +18,12 @@
|
|||||||
"vue-multiselect": "^2.1.6"
|
"vue-multiselect": "^2.1.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@nuxtjs/color-mode": "^1.1.1",
|
||||||
"@nuxtjs/eslint-config": "^3.1.0",
|
"@nuxtjs/eslint-config": "^3.1.0",
|
||||||
"@nuxtjs/eslint-module": "^2.0.0",
|
"@nuxtjs/eslint-module": "^2.0.0",
|
||||||
|
"@nuxtjs/moment": "^1.6.1",
|
||||||
|
"@nuxtjs/markdownit": "^1.2.10",
|
||||||
|
"@nuxtjs/svg": "^0.1.12",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"eslint": "^7.9.0",
|
"eslint": "^7.9.0",
|
||||||
"eslint-config-prettier": "^6.11.0",
|
"eslint-config-prettier": "^6.11.0",
|
||||||
|
|||||||
@@ -1,11 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<h2>Create Mod</h2>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss"></style>
|
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h3>Mods</h3>
|
<h3>Mods</h3>
|
||||||
<nuxt-link class="create-button" to="/create/mod"
|
<nuxt-link class="create-button" to="/mod/create"
|
||||||
>Create a new mod</nuxt-link
|
>Create a new mod</nuxt-link
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -166,7 +166,6 @@
|
|||||||
<img class="logo" src="~/assets/images/logo.svg" alt="logo" />
|
<img class="logo" src="~/assets/images/logo.svg" alt="logo" />
|
||||||
<p class="name">modrinth</p>
|
<p class="name">modrinth</p>
|
||||||
</div>
|
</div>
|
||||||
<img class="host" src="~/assets/images/fosshost.svg" alt="logo" />
|
|
||||||
<p class="copyright">© Guavy LLC</p>
|
<p class="copyright">© Guavy LLC</p>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<h4 class="pages">Pages</h4>
|
<h4 class="pages">Pages</h4>
|
||||||
@@ -417,15 +416,9 @@ footer {
|
|||||||
font-family: 'Montserrat Alternates', serif;
|
font-family: 'Montserrat Alternates', serif;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.host {
|
|
||||||
grid-column-start: 1;
|
|
||||||
grid-row-start: 10;
|
|
||||||
grid-row-end: 11;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
.copyright {
|
.copyright {
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-row-start: 12;
|
grid-row-start: 10;
|
||||||
color: var(--color-grey-6);
|
color: var(--color-grey-6);
|
||||||
}
|
}
|
||||||
h4 {
|
h4 {
|
||||||
|
|||||||
21
pages/mod/_id.vue
Normal file
21
pages/mod/_id.vue
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
async asyncData(data) {
|
||||||
|
const res = await axios.get(
|
||||||
|
`https://api.modrinth.com/api/v1/mod/${data.params.id}`
|
||||||
|
)
|
||||||
|
|
||||||
|
return {
|
||||||
|
mod: res.data,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
126
pages/mod/create.vue
Normal file
126
pages/mod/create.vue
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<h2>Create Mod</h2>
|
||||||
|
<InputLabel
|
||||||
|
label="Name"
|
||||||
|
tooltip="The name of the mod"
|
||||||
|
:required="true"
|
||||||
|
></InputLabel>
|
||||||
|
<input v-model="name" type="text" />
|
||||||
|
<input v-model="namespace" type="text" />
|
||||||
|
<input v-model="description" type="text" />
|
||||||
|
<div class="editor">
|
||||||
|
<textarea v-model="body"></textarea>
|
||||||
|
<div v-html="$md.render(body)"></div>
|
||||||
|
</div>
|
||||||
|
<input v-model="issues_url" type="text" />
|
||||||
|
<input v-model="source_url" type="text" />
|
||||||
|
<input v-model="wiki_url" type="text" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
import InputLabel from '@/components/InputLabel'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { InputLabel },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name: '',
|
||||||
|
namespace: '',
|
||||||
|
description: '',
|
||||||
|
body: '',
|
||||||
|
compiledBody: '',
|
||||||
|
versions: [],
|
||||||
|
categories: [],
|
||||||
|
issues_url: null,
|
||||||
|
source_url: null,
|
||||||
|
wiki_url: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async createMod() {
|
||||||
|
const formData = new FormData()
|
||||||
|
|
||||||
|
formData.append(
|
||||||
|
'data',
|
||||||
|
JSON.stringify({
|
||||||
|
mod_name: this.name,
|
||||||
|
mod_namespace: this.namespace,
|
||||||
|
mod_description: this.description,
|
||||||
|
mod_body: this.body,
|
||||||
|
initial_versions: this.versions,
|
||||||
|
team_members: [
|
||||||
|
{
|
||||||
|
user_id: this.$auth.user.id,
|
||||||
|
name: this.$auth.user.username,
|
||||||
|
role: 'Owner',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
categories: this.categories,
|
||||||
|
issues_url: this.issues_url,
|
||||||
|
source_url: this.source_url,
|
||||||
|
wiki_url: this.wiki_url,
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await axios({
|
||||||
|
url: 'https://api.modrinth.com/api/v1/mod',
|
||||||
|
method: 'POST',
|
||||||
|
data: formData,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(result)
|
||||||
|
} catch (err) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.error(err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
compileBody() {
|
||||||
|
// this.compiledBody = DomPurify.sanitize(marked(this.body))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
input {
|
||||||
|
width: 200px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 500px;
|
||||||
|
textarea {
|
||||||
|
padding: 20px;
|
||||||
|
width: calc(50% - 50px);
|
||||||
|
min-height: 500px;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--color-grey-1);
|
||||||
|
border-right: 1px solid var(--color-text);
|
||||||
|
color: var(--color-text);
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
padding: 20px;
|
||||||
|
margin: 0;
|
||||||
|
min-height: 540px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
vertical-align: top;
|
||||||
|
background-color: var(--color-grey-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
219
pages/mods.vue
219
pages/mods.vue
@@ -61,8 +61,8 @@
|
|||||||
:name="result.title"
|
:name="result.title"
|
||||||
:description="result.description"
|
:description="result.description"
|
||||||
:latest-version="result.versions[0]"
|
:latest-version="result.versions[0]"
|
||||||
:created-at="result.date_created.substring(0, 10)"
|
:created-at="result.date_created"
|
||||||
:updated-at="result.date_modified.substring(0, 10)"
|
:updated-at="result.date_modified"
|
||||||
:downloads="formatNumber(result.downloads)"
|
:downloads="formatNumber(result.downloads)"
|
||||||
:icon-url="result.icon_url"
|
:icon-url="result.icon_url"
|
||||||
:author-url="result.author_url"
|
:author-url="result.author_url"
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
:categories="result.categories"
|
:categories="result.categories"
|
||||||
:is-ad="index === -1"
|
:is-ad="index === -1"
|
||||||
/>
|
/>
|
||||||
<div class="no-results" v-if="results.length === 0">
|
<div v-if="results.length === 0" class="no-results">
|
||||||
<p>No results found for your query!</p>
|
<p>No results found for your query!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -109,21 +109,7 @@
|
|||||||
facet-name="categories:technology"
|
facet-name="categories:technology"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<TechCategory />
|
||||||
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"></line>
|
|
||||||
<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"
|
|
||||||
></path>
|
|
||||||
<line x1="6" y1="16" x2="6.01" y2="16"></line>
|
|
||||||
<line x1="10" y1="16" x2="10.01" y2="16"></line>
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -131,19 +117,7 @@
|
|||||||
facet-name="categories:adventure"
|
facet-name="categories:adventure"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<AdventureCategory />
|
||||||
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"></circle>
|
|
||||||
<polygon
|
|
||||||
points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
|
|
||||||
></polygon>
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -151,18 +125,7 @@
|
|||||||
facet-name="categories:magic"
|
facet-name="categories:magic"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<MagicCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M10.42 3C9.88 9.2 4 9.4 4 14.38c0 2.8 1.7 5.35 4.17 6.62.76-2.1 3.83-3.17 3.83-5.57a7.65 7.65 0 013.92 5.52C24.13 15.88 18.9 6.18 10.42 3z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -170,17 +133,7 @@
|
|||||||
facet-name="categories:utility"
|
facet-name="categories:utility"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<UtilityCategory />
|
||||||
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>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -188,17 +141,7 @@
|
|||||||
facet-name="categories:decoration"
|
facet-name="categories:decoration"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<DecorationCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
||||||
<polyline points="9 22 9 12 15 12 15 22" />
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -206,19 +149,7 @@
|
|||||||
facet-name="categories:library"
|
facet-name="categories:library"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<LibraryCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
|
||||||
<path
|
|
||||||
d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -226,28 +157,7 @@
|
|||||||
facet-name="categories:cursed"
|
facet-name="categories:cursed"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<CursedCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<rect x="7" y="7.5" width="10" height="14" rx="5" />
|
|
||||||
<polyline points="2 12.5 4 14.5 7 14.5" />
|
|
||||||
<polyline points="22 12.5 20 14.5 17 14.5" />
|
|
||||||
<polyline points="3 21.5 5 18.5 7 17.5" />
|
|
||||||
<polyline points="21 21.5 19 18.5 17 17.5" />
|
|
||||||
<polyline points="3 8.5 5 10.5 7 11.5" />
|
|
||||||
<polyline points="21 8.5 19 10.5 17 11.5" />
|
|
||||||
<line x1="12" y1="7.5" x2="12" y2="21.5" />
|
|
||||||
<path
|
|
||||||
d="M15.38,8.82A3,3,0,0,0,16,7h0a3,3,0,0,0-3-3H11A3,3,0,0,0,8,7H8a3,3,0,0,0,.61,1.82"
|
|
||||||
/>
|
|
||||||
<line x1="9" y1="4.5" x2="8" y2="2.5" />
|
|
||||||
<line x1="15" y1="4.5" x2="16" y2="2.5" />
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -255,18 +165,7 @@
|
|||||||
facet-name="categories:worldgen"
|
facet-name="categories:worldgen"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<WorldGenCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M12 2v6.5M10 4l2 1 2-1M3.3 7L9 10.2m-4.9-.5L6 8.5l.1-2.2M3.3 17L9 13.7m-2.9 4L6 15.5l-1.9-1.2M12 22v-6.5m2 4.5l-2-1-2 1m5-6.2l5.6 3.3m-.7-2.8L18 15.5l-.1 2.2M20.7 7L15 10.3m2.9-4l.1 2.2 1.9 1.2M12 8.5l3 1.8v3.5l-3 1.8-3-1.8v-3.5l3-1.8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -274,18 +173,7 @@
|
|||||||
facet-name="categories:storage"
|
facet-name="categories:storage"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<StorageCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<polyline points="21 8 21 21 3 21 3 8"></polyline>
|
|
||||||
<rect x="1" y="3" width="22" height="5"></rect>
|
|
||||||
<line x1="10" y1="12" x2="14" y2="12"></line>
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -293,20 +181,7 @@
|
|||||||
facet-name="categories:food"
|
facet-name="categories:food"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<FoodCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
|
|
||||||
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
|
|
||||||
<line x1="6" y1="1" x2="6" y2="4"></line>
|
|
||||||
<line x1="10" y1="1" x2="10" y2="4"></line>
|
|
||||||
<line x1="14" y1="1" x2="14" y2="4"></line>
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -314,24 +189,7 @@
|
|||||||
facet-name="categories:equipment"
|
facet-name="categories:equipment"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<EquipmentCategory />
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M17.573 20.038L3.849 7.913 2.753 2.755 7.838 4.06 19.47 18.206l-1.898 1.832z"
|
|
||||||
/>
|
|
||||||
<path d="M7.45 14.455l-3.043 3.661 1.887 1.843 3.717-3.25" />
|
|
||||||
<path
|
|
||||||
d="M16.75 10.82l3.333-2.913 1.123-5.152-5.091 1.28-2.483 2.985"
|
|
||||||
/>
|
|
||||||
<path d="M21.131 16.602l-5.187 5.01 2.596-2.508 2.667 2.761" />
|
|
||||||
<path d="M2.828 16.602l5.188 5.01-2.597-2.508-2.667 2.761" />
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
:active-filters="facets"
|
:active-filters="facets"
|
||||||
@@ -339,20 +197,7 @@
|
|||||||
facet-name="categories:misc"
|
facet-name="categories:misc"
|
||||||
@toggle="toggleFacet"
|
@toggle="toggleFacet"
|
||||||
>
|
>
|
||||||
<svg
|
<MiscCategory />
|
||||||
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"></circle>
|
|
||||||
<line x1="2" y1="12" x2="22" y2="12"></line>
|
|
||||||
<path
|
|
||||||
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</SearchFilter>
|
</SearchFilter>
|
||||||
<h3>Loaders</h3>
|
<h3>Loaders</h3>
|
||||||
<SearchFilter
|
<SearchFilter
|
||||||
@@ -414,11 +259,18 @@ import SearchResult from '@/components/ModResult'
|
|||||||
import Pagination from '@/components/Pagination'
|
import Pagination from '@/components/Pagination'
|
||||||
import SearchFilter from '@/components/SearchFilter'
|
import SearchFilter from '@/components/SearchFilter'
|
||||||
|
|
||||||
const config = {
|
import TechCategory from '~/assets/images/categories/tech.svg?inline'
|
||||||
headers: {
|
import AdventureCategory from '~/assets/images/categories/adventure.svg?inline'
|
||||||
Accept: 'application/json',
|
import CursedCategory from '~/assets/images/categories/cursed.svg?inline'
|
||||||
},
|
import DecorationCategory from '~/assets/images/categories/decoration.svg?inline'
|
||||||
}
|
import EquipmentCategory from '~/assets/images/categories/equipment.svg?inline'
|
||||||
|
import FoodCategory from '~/assets/images/categories/food.svg?inline'
|
||||||
|
import LibraryCategory from '~/assets/images/categories/library.svg?inline'
|
||||||
|
import MagicCategory from '~/assets/images/categories/magic.svg?inline'
|
||||||
|
import MiscCategory from '~/assets/images/categories/misc.svg?inline'
|
||||||
|
import StorageCategory from '~/assets/images/categories/storage.svg?inline'
|
||||||
|
import UtilityCategory from '~/assets/images/categories/utility.svg?inline'
|
||||||
|
import WorldGenCategory from '~/assets/images/categories/worldgen.svg?inline'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
auth: false,
|
auth: false,
|
||||||
@@ -427,6 +279,18 @@ export default {
|
|||||||
Pagination,
|
Pagination,
|
||||||
Multiselect,
|
Multiselect,
|
||||||
SearchFilter,
|
SearchFilter,
|
||||||
|
TechCategory,
|
||||||
|
AdventureCategory,
|
||||||
|
CursedCategory,
|
||||||
|
DecorationCategory,
|
||||||
|
EquipmentCategory,
|
||||||
|
FoodCategory,
|
||||||
|
LibraryCategory,
|
||||||
|
MagicCategory,
|
||||||
|
MiscCategory,
|
||||||
|
StorageCategory,
|
||||||
|
UtilityCategory,
|
||||||
|
WorldGenCategory,
|
||||||
},
|
},
|
||||||
async fetch() {
|
async fetch() {
|
||||||
if (this.$route.query.q) this.query = this.$route.query.q
|
if (this.$route.query.q) this.query = this.$route.query.q
|
||||||
@@ -472,8 +336,7 @@ export default {
|
|||||||
async fillInitialVersions() {
|
async fillInitialVersions() {
|
||||||
try {
|
try {
|
||||||
const res = await axios.get(
|
const res = await axios.get(
|
||||||
'https://launchermeta.mojang.com/mc/game/version_manifest.json',
|
'https://launchermeta.mojang.com/mc/game/version_manifest.json'
|
||||||
config
|
|
||||||
)
|
)
|
||||||
|
|
||||||
const versions = res.data.versions
|
const versions = res.data.versions
|
||||||
@@ -554,7 +417,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const res = await axios.get(url, config)
|
const res = await axios.get(url)
|
||||||
this.results = res.data.hits
|
this.results = res.data.hits
|
||||||
|
|
||||||
const pageAmount = Math.ceil(res.data.total_hits / res.data.limit)
|
const pageAmount = Math.ceil(res.data.total_hits / res.data.limit)
|
||||||
|
|||||||
36
pages/user/_id.vue
Normal file
36
pages/user/_id.vue
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<img :src="user.avatar_url" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
async asyncData(data) {
|
||||||
|
let res = await axios.get(
|
||||||
|
`https://api.modrinth.com/api/v1/user/${data.params.id}`
|
||||||
|
)
|
||||||
|
const user = res.data
|
||||||
|
|
||||||
|
let mods = []
|
||||||
|
res = await axios.get(
|
||||||
|
`https://api.modrinth.com/api/v1/user/${data.params.id}/mods`
|
||||||
|
)
|
||||||
|
if (res.data) {
|
||||||
|
res = await axios.get(
|
||||||
|
`https://api.modrinth.com/api/v1/mods/?ids=${JSON.stringify(res.data)}`
|
||||||
|
)
|
||||||
|
mods = res.data
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
mods,
|
||||||
|
user,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss"></style>
|
||||||
Reference in New Issue
Block a user