aziz/AstralRinth
0
0
Fork 0
forked from xxxOFFxxx/AstralRinth
Code Pull Requests Activity

Update app download page to use flathub (#5188)

Browse Source
This commit is contained in:
Prospector
2026-01-22 11:36:56 -08:00
committed by GitHub
parent 86b0de3cee
commit 772e0ee220
5 changed files with 73 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/frontend/src/locales/en-US/index.json
View File

@@ -23,6 +23,9 @@
"app-marketing.download.download-rpm": {
"message": "Download the RPM"
},
"app-marketing.download.flathub": {
"message": "Get it on Flathub"
},
"app-marketing.download.linux": {
"message": "Linux"
},
@@ -38,9 +41,6 @@
"app-marketing.download.terms": {
"message": "By downloading Modrinth App you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
},
"app-marketing.download.third-party-packages": {
"message": "Third-party packages"
},
"app-marketing.download.title": {
"message": "Download Modrinth App (Beta)"
},
@@ -197,6 +197,15 @@
"app-marketing.hero.more-download-options": {
"message": "More Download Options"
},
"app-marketing.hide-other-packages": {
"message": "Hide other packages"
},
"app-marketing.not-recommended": {
"message": "We don't recommend you use these unless you know what you're doing."
},
"app-marketing.show-other-packages": {
"message": "Show other packages"
},
"auth.authorize.action.authorize": {
"message": "Authorize"
},

72
apps/frontend/src/pages/app.vue
View File

@@ -3,12 +3,14 @@ import {
BoxIcon,
DownloadIcon,
EditIcon,
LinkIcon,
FlathubIcon,
IssuesIcon,
SearchIcon,
SendIcon,
TrashIcon,
} from '@modrinth/assets'
import {
Accordion,
Avatar,
Badge,
Checkbox,
@@ -452,6 +454,22 @@ const messages = defineMessages({
id: 'app-marketing.download.download-beta',
defaultMessage: 'Download the beta',
},
getItOnFlathub: {
id: 'app-marketing.download.flathub',
defaultMessage: 'Get it on Flathub',
},
showOtherPackages: {
id: 'app-marketing.show-other-packages',
defaultMessage: 'Show other packages',
},
hideOtherPackages: {
id: 'app-marketing.hide-other-packages',
defaultMessage: 'Hide other packages',
},
notRecommended: {
id: 'app-marketing.not-recommended',
defaultMessage: `We don't recommend you use these unless you know what you're doing.`,
},
downloadTheAppImage: {
id: 'app-marketing.download.download-appimage',
defaultMessage: 'Download the AppImage',
@@ -464,10 +482,6 @@ const messages = defineMessages({
id: 'app-marketing.download.download-rpm',
defaultMessage: 'Download the RPM',
},
thirdPartyPackages: {
id: 'app-marketing.download.third-party-packages',
defaultMessage: 'Third-party packages',
},
downloadTerms: {
id: 'app-marketing.download.terms',
defaultMessage:
@@ -1156,22 +1170,34 @@ useSeoMeta({
</div>
</div>
<div class="description apple">
<a :href="linuxLinks.appImage || undefined" download="">
<DownloadIcon />
<span>{{ formatMessage(messages.downloadTheAppImage) }}</span>
</a>
<a :href="linuxLinks.deb || undefined" download="">
<DownloadIcon />
<span>{{ formatMessage(messages.downloadTheDEB) }}</span>
</a>
<a :href="linuxLinks.rpm || undefined" download="">
<DownloadIcon />
<span>{{ formatMessage(messages.downloadTheRPM) }}</span>
</a>
<a :href="linuxLinks.thirdParty || undefined" download="">
<LinkIcon />
<span>{{ formatMessage(messages.thirdPartyPackages) }}</span>
<a href="https://flathub.org/en/apps/com.modrinth.ModrinthApp" target="_blank">
<FlathubIcon />
<span>{{ formatMessage(messages.getItOnFlathub) }}</span>
</a>
<Accordion
class="mt-2 flex flex-col"
content-class="flex flex-col items-start gap-2 mt-2 text-sm"
button-class="text-sm text-secondary bg-transparent p-0 w-fit text-left m-0 active:scale-[0.98] transition-transform"
>
<template #title="{ open }">
{{ formatMessage(open ? messages.hideOtherPackages : messages.showOtherPackages) }}
</template>
<span class="grid grid-cols-[auto_1fr] gap-2 text-left text-orange"
><IssuesIcon class="mt-1" /> {{ formatMessage(messages.notRecommended) }}</span
>
<a :href="linuxLinks.appImage || undefined" download="" class="text-primary">
<DownloadIcon />
<span>{{ formatMessage(messages.downloadTheAppImage) }}</span>
</a>
<a :href="linuxLinks.deb || undefined" download="" class="text-primary">
<DownloadIcon />
<span>{{ formatMessage(messages.downloadTheDEB) }}</span>
</a>
<a :href="linuxLinks.rpm || undefined" download="" class="text-primary">
<DownloadIcon />
<span>{{ formatMessage(messages.downloadTheRPM) }}</span>
</a>
</Accordion>
</div>
</div>
</div>
@@ -2148,13 +2174,17 @@ useSeoMeta({
a {
display: flex;
align-items: flex-start;
align-items: center;
gap: var(--gap-sm);
justify-content: center;
&:hover {
cursor: pointer;
}
span {
text-align: left;
}
}
&.apple {

7
packages/assets/external/flathub.svg vendored Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.04 -1.13 62.99 60.24">
<g fill="currentColor" stroke-width="1.123" transform="matrix(1.56993 0 0 1.56993 -247.445 -135.95)">
<circle cx="166.69" cy="95.647" r="9.048"/>
<rect width="15.875" height="15.875" x="158.75" y="108.33" rx="4.233" ry="4.233"/>
<path d="m195.534 93.49-1.622-.938-9.339-5.391a2.572 2.572 0 0 0-3.857 2.227v12.657a2.572 2.572 0 0 0 3.858 2.227l10.96-6.328a2.572 2.572 0 0 0 0-4.455zM194.99 116.31c0 .88-.708 1.587-1.587 1.587h-12.7c-.88 0-1.588-.708-1.588-1.587 0-.88.708-1.588 1.587-1.588h12.7c.88 0 1.588.709 1.588 1.588zm-7.938-7.938c.88 0 1.588.709 1.588 1.588v12.7c0 .88-.708 1.587-1.587 1.587-.88 0-1.588-.708-1.588-1.587v-12.7c0-.88.708-1.587 1.587-1.587z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 759 B

2
packages/assets/index.ts
View File

@@ -39,6 +39,7 @@ import _VenmoColorIcon from './external/color/venmo.svg?component'
import _CurseForgeIcon from './external/curseforge.svg?component'
import _DiscordIcon from './external/discord.svg?component'
import _FacebookIcon from './external/facebook.svg?component'
import _FlathubIcon from './external/flathub.svg?component'
import _GithubIcon from './external/github.svg?component'
import _MinecraftServerIcon from './external/illustrations/minecraft_server_icon.png?url'
import _InstagramIcon from './external/instagram.svg?component'
@@ -93,6 +94,7 @@ export const GithubIcon = _GithubIcon
export const CurseForgeIcon = _CurseForgeIcon
export const DiscordIcon = _DiscordIcon
export const FacebookIcon = _FacebookIcon
export const FlathubIcon = _FlathubIcon
export const InstagramIcon = _InstagramIcon
export const SnapchatIcon = _SnapchatIcon
export const ReelsIcon = _ReelsIcon

2
packages/ui/src/components/base/Accordion.vue
View File

@@ -7,7 +7,7 @@
>
<slot name="button" :open="isOpen">
<div class="flex items-center gap-1 w-full">
<slot name="title" />
<slot name="title" :open="isOpen" />
<DropdownIcon
v-if="!forceOpen"
class="ml-auto size-5 transition-transform duration-300 shrink-0"