Landing page (#353)
* Landing page * Change legal corp name, remove google from privacy policy, other fixes
This commit is contained in:
parent
e91b0500c5
commit
51a9a7b75d
@ -11,4 +11,4 @@ components/ui/search/LogoAnimated.vue <br />
|
||||
assets/images/landing.svg <br />
|
||||
|
||||
## Logo Licenses
|
||||
All rights reserved. ©2020-2021 Guavy LLC
|
||||
All rights reserved. ©2020-2022 Rinth, Inc.
|
||||
|
||||
1
assets/images/illustrations/features.svg
Normal file
1
assets/images/illustrations/features.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
1
assets/images/landing-gradient.svg
Normal file
1
assets/images/landing-gradient.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 205L82 205L82 115L164 115L164 109L245 109L245 163L327 163L327 181L409 181L409 253L491 253L491 217L573 217L573 241L655 241L655 253L736 253L736 127L818 127L818 115L900 115L900 115L900 0L900 0L818 0L818 0L736 0L736 0L655 0L655 0L573 0L573 0L491 0L491 0L409 0L409 0L327 0L327 0L245 0L245 0L164 0L164 0L82 0L82 0L0 0Z" fill="#1bd96a"></path><path d="M0 241L82 241L82 211L164 211L164 169L245 169L245 205L327 205L327 241L409 241L409 337L491 337L491 289L573 289L573 307L655 307L655 325L736 325L736 163L818 163L818 205L900 205L900 181L900 113L900 113L818 113L818 125L736 125L736 251L655 251L655 239L573 239L573 215L491 215L491 251L409 251L409 179L327 179L327 161L245 161L245 107L164 107L164 113L82 113L82 203L0 203Z" fill="#1ad070"></path><path d="M0 349L82 349L82 433L164 433L164 391L245 391L245 373L327 373L327 427L409 427L409 445L491 445L491 373L573 373L573 415L655 415L655 445L736 445L736 367L818 367L818 421L900 421L900 415L900 179L900 203L818 203L818 161L736 161L736 323L655 323L655 305L573 305L573 287L491 287L491 335L409 335L409 239L327 239L327 203L245 203L245 167L164 167L164 209L82 209L82 239L0 239Z" fill="#1fc675"></path><path d="M0 451L82 451L82 475L164 475L164 469L245 469L245 469L327 469L327 499L409 499L409 541L491 541L491 469L573 469L573 511L655 511L655 541L736 541L736 439L818 439L818 517L900 517L900 541L900 413L900 419L818 419L818 365L736 365L736 443L655 443L655 413L573 413L573 371L491 371L491 443L409 443L409 425L327 425L327 371L245 371L245 389L164 389L164 431L82 431L82 347L0 347Z" fill="#27bc79"></path><path d="M0 601L82 601L82 601L164 601L164 601L245 601L245 601L327 601L327 601L409 601L409 601L491 601L491 601L573 601L573 601L655 601L655 601L736 601L736 601L818 601L818 601L900 601L900 601L900 539L900 515L818 515L818 437L736 437L736 539L655 539L655 509L573 509L573 467L491 467L491 539L409 539L409 497L327 497L327 467L245 467L245 467L164 467L164 473L82 473L82 449L0 449Z" fill="#30b27b"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/images/search-dark.mp4
Normal file
BIN
assets/images/search-dark.mp4
Normal file
Binary file not shown.
BIN
assets/images/search.mp4
Normal file
BIN
assets/images/search.mp4
Normal file
Binary file not shown.
@ -70,12 +70,13 @@ export default {
|
||||
|
||||
z-index: 20;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
bottom: 4rem;
|
||||
right: 0;
|
||||
.banner {
|
||||
padding: 1rem;
|
||||
font-size: 1.05rem;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
@ -88,6 +89,14 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
bottom: 0;
|
||||
|
||||
.banner {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
width: unset;
|
||||
text-align: unset;
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
<div v-if="downloads" class="stat">
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
<p>
|
||||
<strong>{{ formatNumber(downloads) }}</strong> download<span
|
||||
<strong>{{ $formatNumber(downloads) }}</strong> download<span
|
||||
v-if="downloads !== '1'"
|
||||
>s</span
|
||||
>
|
||||
@ -78,7 +78,7 @@
|
||||
<div v-if="follows" class="stat">
|
||||
<HeartIcon aria-hidden="true" />
|
||||
<p>
|
||||
<strong>{{ formatNumber(follows) }}</strong> follower<span
|
||||
<strong>{{ $formatNumber(follows) }}</strong> follower<span
|
||||
v-if="follows !== '1'"
|
||||
>s</span
|
||||
>
|
||||
@ -197,18 +197,6 @@ export default {
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
formatNumber(y) {
|
||||
const x = +y
|
||||
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, ',')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -315,7 +303,7 @@ export default {
|
||||
}
|
||||
|
||||
.right-side {
|
||||
min-width: 8.75rem;
|
||||
min-width: 12rem;
|
||||
text-align: right;
|
||||
|
||||
.stat {
|
||||
|
||||
@ -149,54 +149,56 @@
|
||||
</button>
|
||||
</section>
|
||||
<section ref="mobileMenu" class="mobile-menu">
|
||||
<div class="items-container rows">
|
||||
<NuxtLink
|
||||
v-if="$auth.user"
|
||||
class="item user-item"
|
||||
:to="`/user/${$auth.user.username}`"
|
||||
>
|
||||
<img :src="$auth.user.avatar_url" class="user-icon" />
|
||||
<div class="profile-link">
|
||||
<div class="username">@{{ $auth.user.username }}</div>
|
||||
<div class="prompt">Go to my profile</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<button v-if="$auth.user" class="item log-out" @click="logout">
|
||||
<LogOutIcon class="icon" />
|
||||
<span class="dropdown-item__text">Log out</span>
|
||||
</button>
|
||||
<NuxtLink v-if="$auth.user" class="item" to="/create/project">
|
||||
<PlusIcon class="icon" />
|
||||
<span class="title">Create a project</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink v-if="$auth.user" class="item" to="/settings">
|
||||
<SettingsIcon class="icon" />
|
||||
<span class="title">Settings</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
v-if="
|
||||
$auth.user &&
|
||||
($auth.user.role === 'moderator' || $auth.user.role === 'admin')
|
||||
"
|
||||
class="item"
|
||||
to="/moderation"
|
||||
>
|
||||
<ModerationIcon class="icon" />
|
||||
<span class="title">Moderation</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink v-if="$auth.user" class="item" to="/notifications">
|
||||
<NotificationIcon class="icon" />
|
||||
<span class="title">Notifications</span>
|
||||
</NuxtLink>
|
||||
<button class="item" @click="changeTheme">
|
||||
<MoonIcon v-if="$colorMode.value === 'light'" class="icon" />
|
||||
<SunIcon v-else class="icon" />
|
||||
<span class="dropdown-item__text">Change theme</span>
|
||||
</button>
|
||||
<a v-if="!$auth.user" :href="authUrl" class="item log-in">
|
||||
<GitHubIcon aria-hidden="true" />
|
||||
Sign in with GitHub</a
|
||||
>
|
||||
<div class="mobile-menu-wrapper">
|
||||
<div class="items-container rows">
|
||||
<NuxtLink
|
||||
v-if="$auth.user"
|
||||
class="item user-item"
|
||||
:to="`/user/${$auth.user.username}`"
|
||||
>
|
||||
<img :src="$auth.user.avatar_url" class="user-icon" />
|
||||
<div class="profile-link">
|
||||
<div class="username">@{{ $auth.user.username }}</div>
|
||||
<div class="prompt">Go to my profile</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<button v-if="$auth.user" class="item log-out" @click="logout">
|
||||
<LogOutIcon class="icon" />
|
||||
<span class="dropdown-item__text">Log out</span>
|
||||
</button>
|
||||
<NuxtLink v-if="$auth.user" class="item" to="/create/project">
|
||||
<PlusIcon class="icon" />
|
||||
<span class="title">Create a project</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink v-if="$auth.user" class="item" to="/settings">
|
||||
<SettingsIcon class="icon" />
|
||||
<span class="title">Settings</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
v-if="
|
||||
$auth.user &&
|
||||
($auth.user.role === 'moderator' || $auth.user.role === 'admin')
|
||||
"
|
||||
class="item"
|
||||
to="/moderation"
|
||||
>
|
||||
<ModerationIcon class="icon" />
|
||||
<span class="title">Moderation</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink v-if="$auth.user" class="item" to="/notifications">
|
||||
<NotificationIcon class="icon" />
|
||||
<span class="title">Notifications</span>
|
||||
</NuxtLink>
|
||||
<button class="item" @click="changeTheme">
|
||||
<MoonIcon v-if="$colorMode.value === 'light'" class="icon" />
|
||||
<SunIcon v-else class="icon" />
|
||||
<span class="dropdown-item__text">Change theme</span>
|
||||
</button>
|
||||
<a v-if="!$auth.user" :href="authUrl" class="item log-in">
|
||||
<GitHubIcon aria-hidden="true" />
|
||||
Sign in with GitHub</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
@ -224,7 +226,7 @@
|
||||
>
|
||||
</p>
|
||||
<p>modrinth/knossos {{ version }}</p>
|
||||
<p>© Guavy LLC</p>
|
||||
<p>© Rinth, Inc.</p>
|
||||
</div>
|
||||
<div class="links links-1" role="region" aria-label="Legal">
|
||||
<h4 aria-hidden="true">Legal</h4>
|
||||
@ -753,62 +755,68 @@ export default {
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
|
||||
.items-container {
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 2rem;
|
||||
margin-left: 2rem;
|
||||
.mobile-menu-wrapper {
|
||||
overflow-y: auto;
|
||||
|
||||
button {
|
||||
box-sizing: unset;
|
||||
@media screen and (min-height: 605px) {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--size-rounded-md);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
column-gap: 0.25rem;
|
||||
width: calc(100% - 4rem);
|
||||
max-width: 18rem;
|
||||
.items-container {
|
||||
margin: 1rem 2rem;
|
||||
|
||||
&.nuxt-link-exact-active {
|
||||
color: var(--color-button-text-active);
|
||||
svg {
|
||||
color: var(--color-brand);
|
||||
}
|
||||
button {
|
||||
box-sizing: unset;
|
||||
}
|
||||
|
||||
&.log-in {
|
||||
color: var(--color-brand-inverted);
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
|
||||
&.log-out {
|
||||
color: white;
|
||||
background-color: var(--color-badge-red-bg);
|
||||
}
|
||||
|
||||
&.user-item {
|
||||
flex-direction: column;
|
||||
row-gap: 0.5rem;
|
||||
//width: 8rem;
|
||||
.item {
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--size-rounded-md);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
column-gap: 0.25rem;
|
||||
width: calc(100% - 4rem);
|
||||
max-width: 18rem;
|
||||
flex-grow: 0;
|
||||
|
||||
.profile-link {
|
||||
text-align: center;
|
||||
|
||||
.prompt {
|
||||
color: var(--color-text-secondary);
|
||||
&.nuxt-link-exact-active {
|
||||
color: var(--color-button-text-active);
|
||||
svg {
|
||||
color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: var(--size-rounded-max);
|
||||
&.log-in {
|
||||
color: var(--color-brand-inverted);
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
|
||||
&.log-out {
|
||||
color: white;
|
||||
background-color: var(--color-badge-red-bg);
|
||||
}
|
||||
|
||||
&.user-item {
|
||||
flex-direction: column;
|
||||
row-gap: 0.5rem;
|
||||
//width: 8rem;
|
||||
max-width: 18rem;
|
||||
flex-grow: 0;
|
||||
|
||||
.profile-link {
|
||||
text-align: center;
|
||||
|
||||
.prompt {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: var(--size-rounded-max);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
{
|
||||
hid: 'publisher',
|
||||
name: 'publisher',
|
||||
content: 'Guavy LLC',
|
||||
content: 'Rinth, Inc.',
|
||||
},
|
||||
{
|
||||
hid: 'apple-mobile-web-app-title',
|
||||
@ -229,7 +229,7 @@ export default {
|
||||
** See https://axios.nuxtjs.org/options
|
||||
*/
|
||||
axios: {
|
||||
baseURL: 'https://staging-api.modrinth.com/v2/',
|
||||
baseURL: 'https://api.modrinth.com/v2/',
|
||||
headers: {
|
||||
common: {
|
||||
Accept: 'application/json',
|
||||
|
||||
@ -74,11 +74,11 @@
|
||||
<Categories :categories="project.categories" class="categories" />
|
||||
<hr class="card-divider" />
|
||||
<div class="stats">
|
||||
<span class="stat">{{ formatNumber(project.downloads) }}</span>
|
||||
<span class="stat">{{ $formatNumber(project.downloads) }}</span>
|
||||
<span class="label"
|
||||
>download<span v-if="project.downloads !== 1">s</span></span
|
||||
>
|
||||
<span class="stat">{{ formatNumber(project.followers) }}</span>
|
||||
<span class="stat">{{ $formatNumber(project.followers) }}</span>
|
||||
<span class="label"
|
||||
>follower<span v-if="project.followers !== 1">s</span></span
|
||||
>
|
||||
@ -666,9 +666,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatNumber(x) {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
},
|
||||
findPrimary(version) {
|
||||
let file = version.files.find((x) => x.primary)
|
||||
|
||||
|
||||
@ -525,11 +525,17 @@ export default {
|
||||
description: this.newProject.description,
|
||||
body: this.newProject.body,
|
||||
categories: this.newProject.categories,
|
||||
issues_url: this.newProject.issues_url,
|
||||
source_url: this.newProject.source_url,
|
||||
wiki_url: this.newProject.wiki_url,
|
||||
issues_url: this.newProject.issues_url
|
||||
? this.newProject.issues_url
|
||||
: null,
|
||||
source_url: this.newProject.source_url
|
||||
? this.newProject.source_url
|
||||
: null,
|
||||
wiki_url: this.newProject.wiki_url ? this.newProject.wiki_url : null,
|
||||
license_url: this.license_url,
|
||||
discord_url: this.newProject.discord_url,
|
||||
discord_url: this.newProject.discord_url
|
||||
? this.newProject.discord_url
|
||||
: null,
|
||||
license_id: this.license.short,
|
||||
client_side: this.clientSideType.toLowerCase(),
|
||||
server_side: this.serverSideType.toLowerCase(),
|
||||
|
||||
@ -236,7 +236,7 @@
|
||||
</div>
|
||||
<div v-if="mode === 'version'" class="data">
|
||||
<p class="title">Downloads</p>
|
||||
<p class="value">{{ $parent.formatNumber(version.downloads) }}</p>
|
||||
<p class="value">{{ $formatNumber(version.downloads) }}</p>
|
||||
</div>
|
||||
<div class="data">
|
||||
<p class="title">Version number</p>
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
</p>
|
||||
<p></p>
|
||||
<p>
|
||||
<strong>{{ $parent.formatNumber(version.downloads) }}</strong>
|
||||
<strong>{{ $formatNumber(version.downloads) }}</strong>
|
||||
downloads
|
||||
</p>
|
||||
<p>
|
||||
@ -100,7 +100,7 @@
|
||||
</td>
|
||||
<td>
|
||||
<p>
|
||||
<span>{{ $parent.formatNumber(version.downloads) }}</span>
|
||||
<span>{{ $formatNumber(version.downloads) }}</span>
|
||||
downloads
|
||||
</p>
|
||||
<p>
|
||||
@ -176,7 +176,7 @@ table {
|
||||
tr {
|
||||
td:nth-child(2) {
|
||||
padding-right: 2rem;
|
||||
min-width: 13.875rem;
|
||||
min-width: 16rem;
|
||||
.top {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -49,11 +49,7 @@
|
||||
<p>
|
||||
Documentation for the Modrinth API (Labrinth) can be found on the GitHub
|
||||
repository's wiki
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/modrinth/labrinth/wiki/API-Documentation"
|
||||
>here</a
|
||||
>.
|
||||
<a target="_blank" href="https://docs.modrinth.com">here</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -505,7 +505,7 @@
|
||||
>
|
||||
<textarea
|
||||
id="body"
|
||||
v-model="versions[currentVersionIndex].changelog"
|
||||
v-model="versions[currentVersionIndex].version_body"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
@ -513,8 +513,10 @@
|
||||
v-highlightjs
|
||||
class="markdown-body"
|
||||
v-html="
|
||||
versions[currentVersionIndex].changelog
|
||||
? $xss($md.render(versions[currentVersionIndex].changelog))
|
||||
versions[currentVersionIndex].version_body
|
||||
? $xss(
|
||||
$md.render(versions[currentVersionIndex].version_body)
|
||||
)
|
||||
: 'No changelog specified.'
|
||||
"
|
||||
></div>
|
||||
|
||||
355
pages/index.vue
355
pages/index.vue
@ -11,8 +11,9 @@
|
||||
<h1>Discover, Play, and Create Minecraft content</h1>
|
||||
<h3>
|
||||
Find enjoyable and quality content through our open-source modding
|
||||
platform built for the community. Create stuff, get paid*, and deploy
|
||||
your project with our fully documented API!
|
||||
platform built for the community. Create stuff, get
|
||||
paid<sup>WIP</sup>, and deploy your project with our fully documented
|
||||
API!
|
||||
</h3>
|
||||
<form action="/mods">
|
||||
<div class="iconified-input">
|
||||
@ -33,17 +34,173 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="points card">
|
||||
<div class="point">
|
||||
<div class="image">
|
||||
<video
|
||||
v-if="$colorMode.value === 'light'"
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
src="~/assets/images/search.mp4"
|
||||
/>
|
||||
<video
|
||||
v-else
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
src="~/assets/images/search-dark.mp4"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<h3 class="subheader">Fast and Powerful Search</h3>
|
||||
<h1>Find What You Want, Quickly and Easily</h1>
|
||||
<p>
|
||||
We are invested in making it extremely simple to find what you want
|
||||
to play. Our search is adaptable, customizable and easy to use!
|
||||
Whether you're a power user or someone who just discovered the world
|
||||
of Minecraft modding, we've got you covered.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="point left">
|
||||
<div class="text-container">
|
||||
<div>
|
||||
<h3 class="subheader">Packed with Features</h3>
|
||||
<h1>A Constantly Evolving Platform</h1>
|
||||
<p>
|
||||
We are always adding new features and making Modrinth have the
|
||||
best user experience. Right now, we're working on finally paying
|
||||
out creators on our site. If you have any more feature ideas, feel
|
||||
free to join our discord!
|
||||
</p>
|
||||
<div class="features">
|
||||
<div class="feature completed">
|
||||
<CheckIcon />
|
||||
<p>Open Source</p>
|
||||
</div>
|
||||
<div class="feature completed">
|
||||
<CheckIcon />
|
||||
<p>Real-time search</p>
|
||||
</div>
|
||||
<div class="feature completed">
|
||||
<CheckIcon />
|
||||
<p>Project Gallery</p>
|
||||
</div>
|
||||
<div class="feature completed">
|
||||
<CheckIcon />
|
||||
<p>Robust Team Management</p>
|
||||
</div>
|
||||
<div class="feature completed">
|
||||
<CheckIcon />
|
||||
<p>Completely documented API</p>
|
||||
</div>
|
||||
<div class="feature completed">
|
||||
<CheckIcon />
|
||||
<p>Dependency Management</p>
|
||||
</div>
|
||||
<div class="feature completed">
|
||||
<CheckIcon />
|
||||
<p>Modpacks</p>
|
||||
</div>
|
||||
<div class="feature in-progress">
|
||||
<InProgressIcon />
|
||||
<p>Creator Payouts</p>
|
||||
</div>
|
||||
<div class="feature in-progress">
|
||||
<InProgressIcon />
|
||||
<p>More project types</p>
|
||||
</div>
|
||||
<div class="feature in-progress">
|
||||
<InProgressIcon />
|
||||
<p>Creator analytics</p>
|
||||
</div>
|
||||
<div class="feature in-progress">
|
||||
<InProgressIcon />
|
||||
<p>In-house auth</p>
|
||||
</div>
|
||||
<div class="feature in-progress">
|
||||
<InProgressIcon />
|
||||
<p>Comments</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image">
|
||||
<FeaturesIllustration />
|
||||
</div>
|
||||
</div>
|
||||
<div class="point">
|
||||
<div class="image">
|
||||
<div class="terminal">
|
||||
<div class="line-nums">
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
<span>6</span>
|
||||
<span>7</span>
|
||||
<span>8</span>
|
||||
<span>9</span>
|
||||
<span>10</span>
|
||||
<span>11</span>
|
||||
<span>12</span>
|
||||
<span>13</span>
|
||||
<span>14</span>
|
||||
<span>15</span>
|
||||
</div>
|
||||
<div class="text" v-highlightjs>
|
||||
<span class="command">curl</span>
|
||||
<span>https://api.modrinth.com/v2/project/sodium</span>
|
||||
<pre><code class="language-json">
|
||||
{
|
||||
"id": "AANobbMI",
|
||||
"slug": "sodium",
|
||||
"project_type": "mod",
|
||||
"team": "4reLOAKe",
|
||||
"title": "Sodium",
|
||||
"description": "Modern rendering engine and client-side optimization mod for Minecraft",
|
||||
"body": "...",
|
||||
"body_url": "https://cdn.modrinth.com/data/AANobbMI/description.md",
|
||||
"published": "2021-01-03T00:53:34.185936Z",
|
||||
"updated": "2022-01-14T02:35:40.373686Z",
|
||||
...
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<h3 class="subheader">Simple to Integrate</h3>
|
||||
<h1>An Open-Source API for Everyone to Use</h1>
|
||||
<p>
|
||||
We have created an open source modding platform for the community.
|
||||
We're committed to open source so the community can trust us as
|
||||
their modding platform. Our API is
|
||||
<a href="https://docs.modrinth.com">fully documented</a> so anyone
|
||||
can use it. We will never add restrictions on our API!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchIcon from '~/assets/images/utils/search.svg?inline'
|
||||
import CheckIcon from '~/assets/images/utils/check.svg?inline'
|
||||
import InProgressIcon from '~/assets/images/utils/updated.svg?inline'
|
||||
import RightArrowIcon from '~/assets/images/utils/right-arrow.svg?inline'
|
||||
|
||||
import FeaturesIllustration from '~/assets/images/illustrations/features.svg?inline'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchIcon,
|
||||
RightArrowIcon,
|
||||
CheckIcon,
|
||||
InProgressIcon,
|
||||
FeaturesIllustration,
|
||||
},
|
||||
auth: false,
|
||||
data() {
|
||||
@ -62,7 +219,7 @@ export default {
|
||||
img {
|
||||
border-radius: var(--size-rounded-card);
|
||||
width: 100%;
|
||||
height: calc(75vh - var(--size-navbar-height));
|
||||
height: 40rem;
|
||||
object-fit: cover;
|
||||
object-position: 10% 12.5%;
|
||||
|
||||
@ -77,18 +234,13 @@ export default {
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: calc(10vh + var(--size-navbar-height));
|
||||
top: calc(5rem + var(--size-navbar-height));
|
||||
max-width: 30rem;
|
||||
text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
|
||||
padding-left: 6rem;
|
||||
|
||||
color: #fff;
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
margin: 1rem 0;
|
||||
@ -115,8 +267,191 @@ export default {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.points {
|
||||
border-radius: 0;
|
||||
padding: var(--spacing-card-lg);
|
||||
margin-top: 1rem;
|
||||
|
||||
.point {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&.left {
|
||||
flex-direction: column;
|
||||
|
||||
.text-container {
|
||||
padding-left: 3rem;
|
||||
//padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.text-container {
|
||||
//mobile:
|
||||
padding-left: 3rem;
|
||||
max-width: 55%;
|
||||
padding-right: 3rem;
|
||||
|
||||
.subheader {
|
||||
margin: 0;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 1rem;
|
||||
|
||||
.feature {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
min-width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.completed {
|
||||
svg {
|
||||
color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
|
||||
&.in-progress {
|
||||
svg {
|
||||
color: var(--color-badge-yellow-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
display: none;
|
||||
padding: 2rem;
|
||||
|
||||
svg {
|
||||
color: var(--color-brand);
|
||||
width: fit-content;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
border-radius: var(--size-rounded-lg);
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
display: flex;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--size-rounded-lg);
|
||||
background-color: var(--color-code-bg);
|
||||
font-family: monospace;
|
||||
font-size: 80%;
|
||||
line-height: 1.5rem;
|
||||
|
||||
.line-nums {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
color: var(--color-icon);
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 0.5rem;
|
||||
.command {
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: var(--color-code-bg);
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
|
||||
border-radius: 0;
|
||||
background-color: var(--color-code-bg);
|
||||
color: var(--color-code-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.points {
|
||||
.point {
|
||||
.text-container {
|
||||
.features {
|
||||
.feature {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
.points {
|
||||
.point {
|
||||
margin-bottom: 0;
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.points {
|
||||
border-radius: var(--spacing-card-lg);
|
||||
.point {
|
||||
flex-direction: row;
|
||||
|
||||
&.left {
|
||||
flex-direction: row;
|
||||
|
||||
.text-container {
|
||||
padding-left: 3rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.text-container {
|
||||
width: 60%;
|
||||
padding-right: 3rem;
|
||||
|
||||
.features {
|
||||
.feature {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,22 +19,23 @@
|
||||
<p>We are a Data Controller of your information.</p>
|
||||
|
||||
<p>
|
||||
Guavy LLC legal basis for collecting and using the personal information
|
||||
described in this Privacy Policy depends on the Personal Information we
|
||||
collect and the specific context in which we collect the information:
|
||||
Rinth, Inc. legal basis for collecting and using the personal
|
||||
information described in this Privacy Policy depends on the Personal
|
||||
Information we collect and the specific context in which we collect the
|
||||
information:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Guavy LLC needs to perform a contract with you</li>
|
||||
<li>You have given Guavy LLC permission to do so</li>
|
||||
<li>Rinth, Inc. needs to perform a contract with you</li>
|
||||
<li>You have given Rinth, Inc. permission to do so</li>
|
||||
<li>
|
||||
Processing your personal information is in Guavy LLC legitimate
|
||||
Processing your personal information is in Rinth, Inc. legitimate
|
||||
interests
|
||||
</li>
|
||||
<li>Guavy LLC needs to comply with the law</li>
|
||||
<li>Rinth, Inc. needs to comply with the law</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Guavy LLC will retain your personal information only for as long as is
|
||||
Rinth, Inc. will retain your personal information only for as long as is
|
||||
necessary for the purposes set out in this Privacy Policy. We will
|
||||
retain and use your information to the extent necessary to comply with
|
||||
our legal obligations, resolve disputes, and enforce our policies.
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
<p>
|
||||
Permission is granted to temporarily download one copy of the materials
|
||||
on Guavy LLC's Website for personal, non-commercial transitory viewing
|
||||
on Rinth, Inc.'s Website for personal, non-commercial transitory viewing
|
||||
only. This is the grant of a license, not a transfer of title, and under
|
||||
this license you may not:
|
||||
</p>
|
||||
@ -30,7 +30,7 @@
|
||||
display;
|
||||
</li>
|
||||
<li>
|
||||
attempt to reverse engineer any software contained on Guavy LLC's
|
||||
attempt to reverse engineer any software contained on Rinth, Inc.'s
|
||||
Website;
|
||||
</li>
|
||||
<li>
|
||||
@ -44,7 +44,7 @@
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
This will let Guavy LLC to terminate upon violations of any of these
|
||||
This will let Rinth, Inc. to terminate upon violations of any of these
|
||||
restrictions. Upon termination, your viewing right will also be
|
||||
terminated and you should destroy any downloaded materials in your
|
||||
possession whether it is printed or electronic format.
|
||||
@ -53,9 +53,9 @@
|
||||
<h2>3. Disclaimer</h2>
|
||||
|
||||
<p>
|
||||
All the materials on Guavy LLC’s Website are provided "as is". Guavy LLC
|
||||
makes no warranties, may it be expressed or implied, therefore negates
|
||||
all other warranties. Furthermore, Guavy LLC does not make any
|
||||
All the materials on Rinth, Inc.’s Website are provided "as is". Rinth,
|
||||
Inc. makes no warranties, may it be expressed or implied, therefore
|
||||
negates all other warranties. Furthermore, Rinth, Inc. does not make any
|
||||
representations concerning the accuracy or reliability of the use of the
|
||||
materials on its Website or otherwise relating to such materials or any
|
||||
sites linked to this Website.
|
||||
@ -64,39 +64,39 @@
|
||||
<h2>4. Limitations</h2>
|
||||
|
||||
<p>
|
||||
Guavy LLC or its suppliers will not be hold accountable for any damages
|
||||
that will arise with the use or inability to use the materials on Guavy
|
||||
LLC’s Website, even if Guavy LLC or an authorize representative of this
|
||||
Website has been notified, orally or written, of the possibility of such
|
||||
damage. Some jurisdiction does not allow limitations on implied
|
||||
warranties or limitations of liability for incidental damages, these
|
||||
limitations may not apply to you.
|
||||
Rinth, Inc. or its suppliers will not be hold accountable for any
|
||||
damages that will arise with the use or inability to use the materials
|
||||
on Rinth, Inc.’s Website, even if Rinth, Inc. or an authorize
|
||||
representative of this Website has been notified, orally or written, of
|
||||
the possibility of such damage. Some jurisdiction does not allow
|
||||
limitations on implied warranties or limitations of liability for
|
||||
incidental damages, these limitations may not apply to you.
|
||||
</p>
|
||||
|
||||
<h2>5. Revisions and Errata</h2>
|
||||
|
||||
<p>
|
||||
The materials appearing on Guavy LLC’s Website may include technical,
|
||||
typographical, or photographic errors. Guavy LLC will not promise that
|
||||
The materials appearing on Rinth, Inc.’s Website may include technical,
|
||||
typographical, or photographic errors. Rinth, Inc. will not promise that
|
||||
any of the materials in this Website are accurate, complete, or current.
|
||||
Guavy LLC may change the materials contained on its Website at any time
|
||||
without notice. Guavy LLC does not make any commitment to update the
|
||||
materials.
|
||||
Rinth, Inc. may change the materials contained on its Website at any
|
||||
time without notice. Rinth, Inc. does not make any commitment to update
|
||||
the materials.
|
||||
</p>
|
||||
|
||||
<h2>6. Links</h2>
|
||||
|
||||
<p>
|
||||
Guavy LLC has not reviewed all of the sites linked to its Website and is
|
||||
not responsible for the contents of any such linked site. The presence
|
||||
of any link does not imply endorsement by Guavy LLC of the site. The use
|
||||
of any linked website is at the user’s own risk.
|
||||
Rinth, Inc. has not reviewed all of the sites linked to its Website and
|
||||
is not responsible for the contents of any such linked site. The
|
||||
presence of any link does not imply endorsement by Rinth, Inc. of the
|
||||
site. The use of any linked website is at the user’s own risk.
|
||||
</p>
|
||||
|
||||
<h2>7. Site Terms of Use Modifications</h2>
|
||||
|
||||
<p>
|
||||
Guavy LLC may revise these Terms of Use for its Website at any time
|
||||
Rinth, Inc. may revise these Terms of Use for its Website at any time
|
||||
without prior notice. By using this Website, you are agreeing to be
|
||||
bound by the current version of these Terms and Conditions of Use.
|
||||
</p>
|
||||
@ -111,7 +111,7 @@
|
||||
<h2>9. Governing Law</h2>
|
||||
|
||||
<p>
|
||||
Any claim related to Guavy LLC's Website shall be governed by the laws
|
||||
Any claim related to Rinth, Inc.'s Website shall be governed by the laws
|
||||
of us without regards to its conflict of law provisions.
|
||||
</p>
|
||||
|
||||
|
||||
@ -208,9 +208,6 @@ export default {
|
||||
this.previewImage = event.target.result
|
||||
}
|
||||
},
|
||||
formatNumber(x) {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
},
|
||||
sumDownloads() {
|
||||
let sum = 0
|
||||
|
||||
@ -218,7 +215,7 @@ export default {
|
||||
sum += projects.downloads
|
||||
}
|
||||
|
||||
return this.formatNumber(sum)
|
||||
return this.$formatNumber(sum)
|
||||
},
|
||||
sumFollows() {
|
||||
let sum = 0
|
||||
@ -227,7 +224,7 @@ export default {
|
||||
sum += projects.followers
|
||||
}
|
||||
|
||||
return this.formatNumber(sum)
|
||||
return this.$formatNumber(sum)
|
||||
},
|
||||
async changeLayout() {
|
||||
await this.$store.dispatch('cosmetics/save', {
|
||||
|
||||
@ -229,9 +229,6 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
formatNumber(x) {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
},
|
||||
sumDownloads() {
|
||||
let sum = 0
|
||||
|
||||
@ -239,7 +236,7 @@ export default {
|
||||
sum += projects.downloads
|
||||
}
|
||||
|
||||
return this.formatNumber(sum)
|
||||
return this.$formatNumber(sum)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -2,6 +2,16 @@ export default ({ store }, inject) => {
|
||||
inject('user', store.state.user)
|
||||
inject('tag', store.state.tag)
|
||||
inject('auth', store.state.auth)
|
||||
inject('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, ',')
|
||||
}
|
||||
})
|
||||
inject('formatVersion', (versionArray) => {
|
||||
const allVersions = store.state.tag.gameVersions.slice().reverse()
|
||||
const allReleases = allVersions.filter((x) => x.version_type === 'release')
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<InputEncoding>UTF-8</InputEncoding>
|
||||
<Image width="16" height="16" type="image/x-icon">https://modrinth.com/favicon.ico</Image>
|
||||
<Url type="text/html" method="get" template="https://modrinth.com/mods?q={searchTerms}"/>
|
||||
<Developer>Guavy LLC</Developer>
|
||||
<Attribution>Guavy LLC</Attribution>
|
||||
<Developer>Rinth, Inc.</Developer>
|
||||
<Attribution>Rinth, Inc.</Attribution>
|
||||
<moz:SearchForm>https://modrinth.com/mods</moz:SearchForm>
|
||||
</OpenSearchDescription>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user