Compare commits

..
Author SHA1 Message Date
Josiah GlossonandAlejandro González ee9d4fad33 Add quotes around $env:JAVA_HOME_11_X64
Co-authored-by: Alejandro González <7822554+AlexTMjugador@users.noreply.github.com>
Signed-off-by: Josiah Glosson <soujournme@gmail.com>
2025-06-27 10:29:10 -05:00
Josiah Glosson 140b4060e6 Set JAVA_HOME to JAVA_HOME_11_X64 on Windows for theseus-release 2025-06-26 16:51:46 -05:00
416 changed files with 2338 additions and 15870 deletions

No files matched your search

-34
View File
@@ -1,35 +1 @@
* text=auto eol=lf
# SQLx calculates a checksum of migration scripts at build time to compare
# it with the checksum of the applied migration for the same version at
# runtime, to know if the migration script has been changed, and thus the
# DB schema went out of sync with the code.
#
# However, such checksum treats the script as a raw byte stream, taking
# into account inconsequential differences like different line endings
# in different OSes. When combined with Git's EOL conversion and mixed
# native and cross-compilation scenarios, this leads to existing
# migrations that didn't change having potentially different checksums
# according to the environment they were built in, which can break the
# migration system when deploying the Modrinth App, rendering it
# unusable.
#
# The gitattribute above ensures that all text files are checked out
# with LF line endings, but widely deployed app versions were built
# without this attribute set, which left such line endings variable to
# the platform. Thus, there is no perfect solution to this problem:
# forcing CRLF here would break Linux and macOS users, forcing LF
# breaks Windows users, and leaving it unspecified may still lead to
# line ending differences when cross-compiling from Linux to Windows
# or vice versa, or having Git configured with different line
# conversion settings. Moreover, there is no `eol=native` attribute,
# and using CI-only scripts to convert line endings would make the
# builds differ between CI and most local environments. So, let's pick
# the least bad option: let Git handle line endings using its
# configuration by leaving it unspecified, which works fine as long as
# people don't mess with Git's line ending settings, which is the vast
# majority of cases.
/packages/app-lib/migrations/20240711194701_init.sql !eol
/packages/app-lib/migrations/20240813205023_drop-active-unique.sql !eol
/packages/app-lib/migrations/20240930001852_disable-personalized-ads.sql !eol
/packages/app-lib/migrations/20241222013857_feature-flags.sql !eol
-151
View File
@@ -1,151 +0,0 @@
name: Modrinth App build
on:
push:
branches:
- main
tags:
- 'v*'
paths:
- .github/workflows/theseus-build.yml
- 'apps/app/**'
- 'apps/app-frontend/**'
- 'packages/app-lib/**'
- 'packages/app-macros/**'
- 'packages/assets/**'
- 'packages/ui/**'
- 'packages/utils/**'
workflow_dispatch:
inputs:
sign-windows-binaries:
description: Sign Windows binaries
type: boolean
default: true
required: false
jobs:
build:
name: Build
strategy:
fail-fast: false
matrix:
platform: [macos-latest, windows-latest, ubuntu-22.04]
include:
- platform: macos-latest
artifact-target-name: universal-apple-darwin
- platform: windows-latest
artifact-target-name: x86_64-pc-windows-msvc
- platform: ubuntu-22.04
artifact-target-name: x86_64-unknown-linux-gnu
runs-on: ${{ matrix.platform }}
steps:
- name: 📥 Check out code
uses: actions/checkout@v4
with:
fetch-depth: 2
- name: 🧰 Setup Rust toolchain
uses: actions-rust-lang/setup-rust-toolchain@v1
with:
rustflags: ''
target: ${{ startsWith(matrix.platform, 'macos') && 'x86_64-apple-darwin' || '' }}
- name: 🧰 Install pnpm
uses: pnpm/action-setup@v4
- name: 🧰 Setup Node.js
uses: actions/setup-node@v4
with:
node-version-file: .nvmrc
cache: pnpm
- name: 🧰 Install Linux build dependencies
if: startsWith(matrix.platform, 'ubuntu')
run: |
sudo apt-get update
sudo apt-get install -yq libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
- name: 🧰 Setup Dasel
uses: jaxxstorm/action-install-gh-release@v2.1.0
with:
repo: TomWright/dasel
tag: v2.8.1
extension-matching: disable
rename-to: ${{ startsWith(matrix.platform, 'windows') && 'dasel.exe' || 'dasel' }}
chmod: 0755
- name: ⚙️ Set application version
shell: bash
env:
APP_VERSION: ${{ startsWith(github.ref, 'refs/tags/v') && github.ref_name || format('v1.0.0-canary+{0}', github.sha) }}
run: |
dasel put -f apps/app/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
dasel put -f packages/app-lib/Cargo.toml -t string -v "${APP_VERSION#v}" 'package.version'
dasel put -f apps/app-frontend/package.json -t string -v "${APP_VERSION#v}" 'version'
- name: 💨 Setup Turbo cache
uses: rharkor/caching-for-turbo@v1.8
- name: 🧰 Install dependencies
run: pnpm install
- name: ✍️ Set up Windows code signing
if: startsWith(matrix.platform, 'windows')
shell: bash
run: |
if [ '${{ startsWith(github.ref, 'refs/tags/v') || inputs.sign-windows-binaries }}' = 'true' ]; then
choco install jsign --ignore-dependencies # GitHub runners come with a global Java installation already
else
dasel delete -f apps/app/tauri-release.conf.json 'bundle.windows.signCommand'
fi
- name: 🗑️ Clean up cached bundles
shell: bash
run: |
rm -rf target/release/bundle
rm -rf target/*/release/bundle || true
- name: 🔨 Build macOS app
run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json
if: startsWith(matrix.platform, 'macos')
env:
ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
APPLE_ID: ${{ secrets.APPLE_ID }}
APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
- name: 🔨 Build Linux app
run: pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json
if: startsWith(matrix.platform, 'ubuntu')
env:
TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
- name: 🔨 Build Windows app
run: |
[System.Convert]::FromBase64String("$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64") | Set-Content -Path signer-client-cert.p12 -AsByteStream
$env:DIGICERT_ONE_SIGNER_CREDENTIALS = "$env:DIGICERT_ONE_SIGNER_API_KEY|$PWD\signer-client-cert.p12|$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD"
$env:JAVA_HOME = "$env:JAVA_HOME_11_X64"
pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles 'nsis,updater'
Remove-Item -Path signer-client-cert.p12 -ErrorAction SilentlyContinue
if: startsWith(matrix.platform, 'windows')
env:
TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
DIGICERT_ONE_SIGNER_API_KEY: ${{ secrets.DIGICERT_ONE_SIGNER_API_KEY }}
DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64 }}
DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD }}
- name: 📤 Upload app bundles
uses: actions/upload-artifact@v4
with:
name: App bundle (${{ matrix.artifact-target-name }})
path: |
target/release/bundle/**
target/*/release/bundle/**
+170 -102
View File
@@ -1,118 +1,186 @@
name: Modrinth App release
name: 'Modrinth App build'
on:
push:
branches:
- main
tags:
- 'v*'
paths:
- .github/workflows/theseus-release.yml
- 'apps/app/**'
- 'apps/app-frontend/**'
- 'packages/app-lib/**'
- 'packages/app-macros/**'
- 'packages/assets/**'
- 'packages/ui/**'
- 'packages/utils/**'
workflow_dispatch:
inputs:
version-tag:
description: Version tag to release to the wide public
type: string
required: true
release-notes:
description: Release notes to include in the Tauri version manifest
default: A new release of the Modrinth App is available!
type: string
required: true
sign-windows-binaries:
description: Sign Windows binaries
type: boolean
default: true
required: false
jobs:
release:
name: Release Modrinth App
runs-on: ubuntu-latest
build:
strategy:
fail-fast: false
matrix:
platform: [macos-latest, windows-latest, ubuntu-22.04]
env:
LINUX_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-unknown-linux-gnu)
WINDOWS_X64_BUNDLE_ARTIFACT_NAME: App bundle (x86_64-pc-windows-msvc)
MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME: App bundle (universal-apple-darwin)
LAUNCHER_FILES_BUCKET_BASE_URL: https://launcher-files.modrinth.com
runs-on: ${{ matrix.platform }}
steps:
- name: 📥 Download Modrinth App artifacts
uses: dawidd6/action-download-artifact@v11
- uses: actions/checkout@v4
- name: Rust setup (mac)
if: startsWith(matrix.platform, 'macos')
uses: actions-rust-lang/setup-rust-toolchain@v1
with:
workflow: theseus-build.yml
workflow_conclusion: success
event: push
branch: ${{ inputs.version-tag }}
use_unzip: true
rustflags: ''
target: x86_64-apple-darwin
- name: 🛠️ Generate version manifest
env:
VERSION_TAG: ${{ inputs.version-tag }}
RELEASE_NOTES: ${{ inputs.release-notes }}
- name: Rust setup
if: "!startsWith(matrix.platform, 'macos')"
uses: actions-rust-lang/setup-rust-toolchain@v1
with:
rustflags: ''
- name: Setup rust cache
uses: actions/cache@v4
with:
path: |
target/**
!target/*/release/bundle/*/*.dmg
!target/*/release/bundle/*/*.app.tar.gz
!target/*/release/bundle/*/*.app.tar.gz.sig
!target/release/bundle/*/*.dmg
!target/release/bundle/*/*.app.tar.gz
!target/release/bundle/*/*.app.tar.gz.sig
!target/release/bundle/appimage/*.AppImage
!target/release/bundle/appimage/*.AppImage.tar.gz
!target/release/bundle/appimage/*.AppImage.tar.gz.sig
!target/release/bundle/deb/*.deb
!target/release/bundle/rpm/*.rpm
!target/release/bundle/msi/*.msi
!target/release/bundle/msi/*.msi.zip
!target/release/bundle/msi/*.msi.zip.sig
!target/release/bundle/nsis/*.exe
!target/release/bundle/nsis/*.nsis.zip
!target/release/bundle/nsis/*.nsis.zip.sig
key: ${{ runner.os }}-rust-target-${{ hashFiles('**/Cargo.lock') }}
restore-keys: |
${{ runner.os }}-rust-target-
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version-file: .nvmrc
- name: Install pnpm via corepack
shell: bash
run: |
# Reference: https://tauri.app/plugin/updater/#server-support
jq -nc \
--arg versionTag "${VERSION_TAG#v}" \
--arg releaseNotes "$RELEASE_NOTES" \
--rawfile macOsAarch64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
--rawfile macOsX64UpdateArtifactSignature "${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/macos/Modrinth App.app.tar.gz.sig" \
--rawfile linuxX64UpdateArtifactSignature "${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/appimage/Modrinth App_${VERSION_TAG#v}_amd64.AppImage.tar.gz.sig" \
--rawfile windowsX64UpdateArtifactSignature "${WINDOWS_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/nsis/Modrinth App_${VERSION_TAG#v}_x64-setup.nsis.zip.sig" \
'{
"version": $versionTag,
"notes": $releaseNotes,
"pub_date": now | todateiso8601,
"platforms": {
"darwin-aarch64": {
"signature": $macOsAarch64UpdateArtifactSignature,
"url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App.app.tar.gz")",
"install_urls": [@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App_" + $versionTag + "_universal.dmg")"]
},
"darwin-x86_64": {
"signature": $macOsX64UpdateArtifactSignature,
"url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App.app.tar.gz")",
"install_urls": [@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/macos/\("Modrinth App_" + $versionTag + "_universal.dmg")"]
},
"linux-x86_64": {
"signature": $linuxX64UpdateArtifactSignature,
"url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App_" + $versionTag + "_amd64.AppImage.tar.gz")",
"install_urls": [
@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App_" + $versionTag + "_amd64.deb")",
@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App_" + $versionTag + "_amd64.AppImage")",
@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/linux/\("Modrinth App_" + $versionTag + "-1.x86_64.rpm")"
]
},
"windows-x86_64": {
"signature": $windowsX64UpdateArtifactSignature,
"url": @uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/windows/\("Modrinth App_" + $versionTag + "_x64-setup.nsis.zip")",
"install_urls": [@uri "${{ env.LAUNCHER_FILES_BUCKET_BASE_URL }}/versions/\($versionTag)/windows/\("Modrinth App_" + $versionTag + "_x64-setup.exe")"]
}
}
}' > updates.json
corepack enable
corepack prepare --activate
echo "Generated manifest for version ${VERSION_TAG}:"
cat updates.json
- name: 📤 Upload release artifacts
env:
VERSION_TAG: ${{ inputs.version-tag }}
AWS_ACCESS_KEY_ID: ${{ secrets.LAUNCHER_FILES_BUCKET_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.LAUNCHER_FILES_BUCKET_SECRET_ACCESS_KEY }}
AWS_BUCKET: ${{ secrets.LAUNCHER_FILES_BUCKET_NAME }}
AWS_REGION: ${{ secrets.LAUNCHER_FILES_BUCKET_REGION }}
AWS_ENDPOINT_URL: ${{ secrets.LAUNCHER_FILES_BUCKET_ENDPOINT_URL }}
AWS_PAGER: ''
# Work around incompatible checksum behavior with some S3-like object storage providers,
# such as Cloudflare R2. See:
# - https://developers.cloudflare.com/r2/examples/aws/aws-cli/
# - https://developers.cloudflare.com/r2/examples/aws/aws-sdk-java/
AWS_REQUEST_CHECKSUM_CALCULATION: when_required
AWS_RESPONSE_CHECKSUM_VALIDATION: when_required
- name: Get pnpm store directory
id: pnpm-cache
shell: bash
run: |
for macosBundleType in 'macos' 'dmg'; do
aws s3 cp --recursive \
"${MACOS_UNIVERSAL_BUNDLE_ARTIFACT_NAME}/universal-apple-darwin/release/bundle/${macosBundleType}" \
"s3://${AWS_BUCKET}/versions/${VERSION_TAG#v}/macos"
done
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
for linuxBundleType in 'appimage' 'deb' 'rpm'; do
aws s3 cp --recursive \
"${LINUX_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/${linuxBundleType}" \
"s3://${AWS_BUCKET}/versions/${VERSION_TAG#v}/linux"
done
- name: Setup pnpm cache
uses: actions/cache@v4
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
for windowsBundleType in 'nsis'; do
aws s3 cp --recursive \
"${WINDOWS_X64_BUNDLE_ARTIFACT_NAME}/release/bundle/${windowsBundleType}" \
"s3://${AWS_BUCKET}/versions/${VERSION_TAG#v}/windows"
done
- name: install dependencies (ubuntu only)
if: startsWith(matrix.platform, 'ubuntu')
run: |
sudo apt-get update
sudo apt-get install -y libwebkit2gtk-4.1-dev build-essential curl wget file libxdo-dev libssl-dev pkg-config libayatana-appindicator3-dev librsvg2-dev
aws s3 cp updates.json "s3://${AWS_BUCKET}"
- name: Install code signing client (Windows only)
if: startsWith(matrix.platform, 'windows')
run: choco install jsign --ignore-dependencies # GitHub runners come with a global Java installation already
- name: Install frontend dependencies
run: pnpm install
- name: Disable Windows code signing for non-final release builds
if: ${{ startsWith(matrix.platform, 'windows') && !startsWith(github.ref, 'refs/tags/v') && !inputs.sign-windows-binaries }}
run: |
jq 'del(.bundle.windows.signCommand)' apps/app/tauri-release.conf.json > apps/app/tauri-release.conf.json.new
Move-Item -Path apps/app/tauri-release.conf.json.new -Destination apps/app/tauri-release.conf.json -Force
- name: build app (macos)
run: pnpm --filter=@modrinth/app run tauri build --target universal-apple-darwin --config tauri-release.conf.json
if: startsWith(matrix.platform, 'macos')
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
APPLE_ID: ${{ secrets.APPLE_ID }}
APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
- name: build app (Linux)
run: pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json
if: startsWith(matrix.platform, 'ubuntu')
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
- name: build app (Windows)
run: |
[System.Convert]::FromBase64String("$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64") | Set-Content -Path signer-client-cert.p12 -AsByteStream
$env:DIGICERT_ONE_SIGNER_CREDENTIALS = "$env:DIGICERT_ONE_SIGNER_API_KEY|$PWD\signer-client-cert.p12|$env:DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD"
$env:JAVA_HOME = "$env:JAVA_HOME_11_X64"
pnpm --filter=@modrinth/app run tauri build --config tauri-release.conf.json --verbose --bundles 'nsis,updater'
Remove-Item -Path signer-client-cert.p12
if: startsWith(matrix.platform, 'windows')
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
DIGICERT_ONE_SIGNER_API_KEY: ${{ secrets.DIGICERT_ONE_SIGNER_API_KEY }}
DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_BASE64 }}
DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD: ${{ secrets.DIGICERT_ONE_SIGNER_CLIENT_CERTIFICATE_PASSWORD }}
- name: upload ${{ matrix.platform }}
uses: actions/upload-artifact@v4
with:
name: ${{ matrix.platform }}
path: |
target/*/release/bundle/*/*.dmg
target/*/release/bundle/*/*.app.tar.gz
target/*/release/bundle/*/*.app.tar.gz.sig
target/release/bundle/*/*.dmg
target/release/bundle/*/*.app.tar.gz
target/release/bundle/*/*.app.tar.gz.sig
target/release/bundle/*/*.AppImage
target/release/bundle/*/*.AppImage.tar.gz
target/release/bundle/*/*.AppImage.tar.gz.sig
target/release/bundle/*/*.deb
target/release/bundle/*/*.rpm
target/release/bundle/msi/*.msi
target/release/bundle/msi/*.msi.zip
target/release/bundle/msi/*.msi.zip.sig
target/release/bundle/nsis/*.exe
target/release/bundle/nsis/*.nsis.zip
target/release/bundle/nsis/*.nsis.zip.sig
Generated
+203 -410
View File
File diff suppressed because it is too large. Load diff
+17 -23
View File
@@ -25,7 +25,7 @@ actix-ws = "0.3.0"
argon2 = { version = "0.5.3", features = ["std"] }
ariadne = { path = "packages/ariadne" }
async_zip = "0.0.17"
async-compression = { version = "0.4.25", default-features = false }
async-compression = { version = "0.4.24", default-features = false }
async-recursion = "1.1.1"
async-stripe = { version = "0.41.0", default-features = false, features = [
"runtime-tokio-hyper-rustls",
@@ -37,7 +37,6 @@ async-tungstenite = { version = "0.29.1", default-features = false, features = [
async-walkdir = "2.1.0"
base64 = "0.22.1"
bitflags = "2.9.1"
bytemuck = "1.23.0"
bytes = "1.10.1"
censor = "0.3.0"
chardetng = "0.1.17"
@@ -48,7 +47,6 @@ color-thief = "0.2.2"
console-subscriber = "0.4.1"
daedalus = { path = "packages/daedalus" }
dashmap = "6.1.0"
data-url = "0.3.1"
deadpool-redis = "0.21.1"
dirs = "6.0.0"
discord-rich-presence = "0.2.5"
@@ -63,7 +61,6 @@ fs4 = { version = "0.13.1", default-features = false }
futures = { version = "0.3.31", default-features = false }
futures-util = "0.3.31"
hashlink = "0.10.0"
heck = "0.5.0"
hex = "0.4.3"
hickory-resolver = "0.25.2"
hmac = "0.12.1"
@@ -93,7 +90,6 @@ notify = { version = "8.0.0", default-features = false }
notify-debouncer-mini = { version = "0.6.0", default-features = false }
p256 = "0.13.2"
paste = "1.0.15"
png = "0.17.16"
prometheus = "0.14.0"
quartz_nbt = "0.2.9"
quick-xml = "0.37.5"
@@ -101,9 +97,8 @@ rand = "=0.8.5" # Locked on 0.8 until argon2 and p256 update to 0.9
rand_chacha = "=0.3.1" # Locked on 0.3 until we can update rand to 0.9
redis = "=0.31.0" # Locked on 0.31 until deadpool-redis updates to 0.32
regex = "1.11.1"
reqwest = { version = "0.12.20", default-features = false }
rgb = "0.8.50"
rust_decimal = { version = "1.37.2", features = [
reqwest = { version = "0.12.19", default-features = false }
rust_decimal = { version = "1.37.1", features = [
"serde-with-float",
"serde-with-str",
] }
@@ -114,7 +109,7 @@ rust-s3 = { version = "0.35.1", default-features = false, features = [
"tokio-rustls-tls",
] }
rusty-money = "0.4.1"
sentry = { version = "0.41.0", default-features = false, features = [
sentry = { version = "0.38.1", default-features = false, features = [
"backtrace",
"contexts",
"debug-images",
@@ -122,13 +117,13 @@ sentry = { version = "0.41.0", default-features = false, features = [
"reqwest",
"rustls",
] }
sentry-actix = "0.41.0"
sentry-actix = "0.38.1"
serde = "1.0.219"
serde_bytes = "0.11.17"
serde_cbor = "0.11.2"
serde_ini = "0.2.0"
serde_json = "1.0.140"
serde_with = "3.13.0"
serde_with = "3.12.0"
serde-xml-rs = "0.8.1" # Also an XML (de)serializer, consider dropping yaserde in favor of this
sha1 = "0.10.6"
sha1_smol = { version = "1.0.1", features = ["std"] }
@@ -137,19 +132,18 @@ spdx = "0.10.8"
sqlx = { version = "0.8.6", default-features = false }
sysinfo = { version = "0.35.2", default-features = false }
tar = "0.4.44"
tauri = "2.6.1"
tauri-build = "2.3.0"
tauri-plugin-deep-link = "2.4.0"
tauri-plugin-dialog = "2.3.0"
tauri-plugin-http = "2.5.0"
tauri-plugin-opener = "2.4.0"
tauri-plugin-os = "2.3.0"
tauri-plugin-single-instance = "2.3.0"
tauri-plugin-updater = { version = "2.9.0", default-features = false, features = [
tauri = "2.5.1"
tauri-build = "2.2.0"
tauri-plugin-deep-link = "2.3.0"
tauri-plugin-dialog = "2.2.2"
tauri-plugin-opener = "2.2.7"
tauri-plugin-os = "2.2.1"
tauri-plugin-single-instance = "2.2.4"
tauri-plugin-updater = { version = "2.7.1", default-features = false, features = [
"rustls-tls",
"zip",
] }
tauri-plugin-window-state = "2.3.0"
tauri-plugin-window-state = "2.2.2"
tempfile = "3.20.0"
theseus = { path = "packages/app-lib" }
thiserror = "2.0.12"
@@ -172,7 +166,7 @@ whoami = "1.6.0"
winreg = "0.55.0"
woothee = "0.13.0"
yaserde = "0.12.0"
zip = { version = "4.2.0", default-features = false, features = [
zip = { version = "4.0.0", default-features = false, features = [
"bzip2",
"deflate",
"deflate64",
@@ -219,7 +213,7 @@ wildcard_dependencies = "warn"
warnings = "deny"
[patch.crates-io]
wry = { git = "https://github.com/modrinth/wry", rev = "21db186" }
wry = { git = "https://github.com/modrinth/wry", rev = "cafdaa9" }
# Optimize for speed and reduce size on release builds
[profile.release]
-1
View File
@@ -1,2 +1 @@
**/dist
*.gltf
+1 -5
View File
@@ -1,7 +1,7 @@
{
"name": "@modrinth/app-frontend",
"private": true,
"version": "1.0.0-local",
"version": "0.9.5",
"type": "module",
"scripts": {
"dev": "vite",
@@ -20,20 +20,16 @@
"@sentry/vue": "^8.27.0",
"@tauri-apps/api": "^2.5.0",
"@tauri-apps/plugin-dialog": "^2.2.1",
"@tauri-apps/plugin-http": "^2.5.0",
"@tauri-apps/plugin-opener": "^2.2.6",
"@tauri-apps/plugin-os": "^2.2.1",
"@tauri-apps/plugin-updater": "^2.7.1",
"@tauri-apps/plugin-window-state": "^2.2.2",
"@types/three": "^0.172.0",
"@vintl/vintl": "^4.4.1",
"@vueuse/core": "^11.1.0",
"dayjs": "^1.11.10",
"floating-vue": "^5.2.2",
"ofetch": "^1.3.4",
"pinia": "^2.1.7",
"posthog-js": "^1.158.2",
"three": "^0.172.0",
"vite-svg-loader": "^5.1.0",
"vue": "^3.5.13",
"vue-multiselect": "3.0.0",
+37 -49
View File
@@ -1,9 +1,8 @@
<script setup>
import { computed, onMounted, onUnmounted, ref, watch, provide } from 'vue'
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'
import {
ArrowBigUpDashIcon,
ChangeSkinIcon,
CompassIcon,
DownloadIcon,
HomeIcon,
@@ -19,7 +18,6 @@ import {
SettingsIcon,
WorldIcon,
XIcon,
NewspaperIcon,
} from '@modrinth/assets'
import {
Avatar,
@@ -27,7 +25,7 @@ import {
ButtonStyled,
Notifications,
OverflowMenu,
NewsArticleCard,
useRelativeTime,
} from '@modrinth/ui'
import { useLoading, useTheming } from '@/store/state'
import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
@@ -64,13 +62,14 @@ import NavButton from '@/components/ui/NavButton.vue'
import { get as getCreds, login, logout } from '@/helpers/mr_auth.js'
import { get_user } from '@/helpers/cache.js'
import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
import dayjs from 'dayjs'
import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
import FriendsList from '@/components/ui/friends/FriendsList.vue'
import { openUrl } from '@tauri-apps/plugin-opener'
import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
import { get_available_capes, get_available_skins } from './helpers/skins'
import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
const formatRelativeTime = useRelativeTime()
const themeStore = useTheming()
@@ -178,7 +177,6 @@ async function setupApp() {
'criticalAnnouncements',
true,
)
.then((response) => response.json())
.then((res) => {
if (res && res.header && res.body) {
criticalErrorMessage.value = res
@@ -190,35 +188,15 @@ async function setupApp() {
)
})
useFetch(`https://modrinth.com/news/feed/articles.json`, 'news', true)
.then((response) => response.json())
.then((res) => {
if (res && res.articles) {
// Format expected by NewsArticleCard component.
news.value = res.articles
.map((article) => ({
...article,
path: article.link,
thumbnail: article.thumbnail,
title: article.title,
summary: article.summary,
date: article.date,
}))
.slice(0, 4)
}
})
useFetch(`https://modrinth.com/blog/news.json`, 'news', true).then((res) => {
if (res && res.articles) {
news.value = res.articles
}
})
get_opening_command().then(handleCommand)
checkUpdates()
fetchCredentials()
try {
const skins = (await get_available_skins()) ?? []
const capes = (await get_available_capes()) ?? []
generateSkinPreviews(skins, capes)
} catch (error) {
console.warn('Failed to generate skin previews in app setup.', error)
}
}
const stateFailed = ref(false)
@@ -326,7 +304,6 @@ onMounted(() => {
})
const accounts = ref(null)
provide('accountsCard', accounts)
command_listener(handleCommand)
async function handleCommand(e) {
@@ -422,9 +399,6 @@ function handleAuxClick(e) {
>
<CompassIcon />
</NavButton>
<NavButton v-tooltip.right="'Skins (Beta)'" to="/skins">
<ChangeSkinIcon />
</NavButton>
<NavButton
v-tooltip.right="'Library'"
to="/library"
@@ -605,20 +579,34 @@ function handleAuxClick(e) {
<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
</suspense>
</div>
<div v-if="news && news.length > 0" class="pt-4 flex flex-col items-center">
<h3 class="px-4 text-lg m-0 text-left w-full">News</h3>
<div class="px-4 pt-2 space-y-4 flex flex-col items-center w-full">
<NewsArticleCard
v-for="(item, index) in news"
:key="`news-${index}`"
:article="item"
<div v-if="news && news.length > 0" class="pt-4 flex flex-col">
<h3 class="px-4 text-lg m-0">News</h3>
<template v-for="(item, index) in news" :key="`news-${index}`">
<a
:class="`flex flex-col outline-offset-[-4px] hover:bg-[--brand-gradient-border] focus:bg-[--brand-gradient-border] px-4 transition-colors ${index === 0 ? 'pt-2 pb-4' : 'py-4'}`"
:href="item.link"
target="_blank"
rel="external"
>
<img
:src="item.thumbnail"
alt="News thumbnail"
aria-hidden="true"
class="w-full aspect-[3/1] object-cover rounded-2xl border-[1px] border-solid border-[--brand-gradient-border]"
/>
<h4 class="mt-2 mb-0 text-sm leading-none text-contrast font-semibold">
{{ item.title }}
</h4>
<p class="my-1 text-sm text-secondary leading-tight">{{ item.summary }}</p>
<p class="text-right text-sm text-secondary opacity-60 leading-tight m-0">
{{ formatRelativeTime(dayjs(item.date).toISOString()) }}
</p>
</a>
<hr
v-if="index !== news.length - 1"
class="h-px my-[-2px] mx-4 border-0 m-0 bg-[--brand-gradient-border]"
/>
<ButtonStyled color="brand" size="large">
<a href="https://modrinth.com/news" target="_blank" class="my-4">
<NewspaperIcon /> View all news
</a>
</ButtonStyled>
</div>
</template>
</div>
</div>
</div>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

@@ -9,11 +9,13 @@
<Avatar
size="36px"
:src="
selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
selectedAccount
? `https://mc-heads.net/avatar/${selectedAccount.id}/128`
: 'https://launcher-files.modrinth.com/assets/steve_head.png'
"
/>
<div class="flex flex-col w-full">
<span>{{ selectedAccount ? selectedAccount.profile.name : 'Select account' }}</span>
<span>{{ selectedAccount ? selectedAccount.username : 'Select account' }}</span>
<span class="text-secondary text-xs">Minecraft account</span>
</div>
<DropdownIcon class="w-5 h-5 shrink-0" />
@@ -26,40 +28,28 @@
:class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
>
<div v-if="selectedAccount" class="selected account">
<Avatar size="xs" :src="avatarUrl" />
<Avatar size="xs" :src="`https://mc-heads.net/avatar/${selectedAccount.id}/128`" />
<div>
<h4>{{ selectedAccount.profile.name }}</h4>
<h4>{{ selectedAccount.username }}</h4>
<p>Selected</p>
</div>
<Button
v-tooltip="'Log out'"
icon-only
color="raised"
@click="logout(selectedAccount.profile.id)"
>
<Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.id)">
<TrashIcon />
</Button>
</div>
<div v-else class="logged-out account">
<h4>Not signed in</h4>
<Button
v-tooltip="'Log in'"
:disabled="loginDisabled"
icon-only
color="primary"
@click="login()"
>
<LogInIcon v-if="!loginDisabled" />
<SpinnerIcon v-else class="animate-spin" />
<Button v-tooltip="'Log in'" icon-only color="primary" @click="login()">
<LogInIcon />
</Button>
</div>
<div v-if="displayAccounts.length > 0" class="account-group">
<div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
<div v-for="account in displayAccounts" :key="account.id" class="account-row">
<Button class="option account" @click="setAccount(account)">
<Avatar :src="getAccountAvatarUrl(account)" class="icon" />
<p>{{ account.profile.name }}</p>
<Avatar :src="`https://mc-heads.net/avatar/${account.id}/128`" class="icon" />
<p>{{ account.username }}</p>
</Button>
<Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
<Button v-tooltip="'Log out'" icon-only @click="logout(account.id)">
<TrashIcon />
</Button>
</div>
@@ -73,7 +63,7 @@
</template>
<script setup>
import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon, SpinnerIcon } from '@modrinth/assets'
import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon } from '@modrinth/assets'
import { Avatar, Button, Card } from '@modrinth/ui'
import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
import {
@@ -87,8 +77,6 @@ import { handleError } from '@/store/state.js'
import { trackEvent } from '@/helpers/analytics'
import { process_listener } from '@/helpers/events'
import { handleSevereError } from '@/store/error.js'
import { get_available_skins } from '@/helpers/skins'
import { getPlayerHeadUrl } from '@/helpers/rendering/batch-skin-renderer.ts'
defineProps({
mode: {
@@ -101,86 +89,32 @@ defineProps({
const emit = defineEmits(['change'])
const accounts = ref({})
const loginDisabled = ref(false)
const defaultUser = ref()
const equippedSkin = ref(null)
const headUrlCache = ref(new Map())
async function refreshValues() {
defaultUser.value = await get_default_user().catch(handleError)
accounts.value = await users().catch(handleError)
try {
const skins = await get_available_skins()
equippedSkin.value = skins.find((skin) => skin.is_equipped)
if (equippedSkin.value) {
try {
const headUrl = await getPlayerHeadUrl(equippedSkin.value)
headUrlCache.value.set(equippedSkin.value.texture_key, headUrl)
} catch (error) {
console.warn('Failed to get head render for equipped skin:', error)
}
}
} catch {
equippedSkin.value = null
}
}
function setLoginDisabled(value) {
loginDisabled.value = value
}
defineExpose({
refreshValues,
setLoginDisabled,
loginDisabled,
})
await refreshValues()
const displayAccounts = computed(() =>
accounts.value.filter((account) => defaultUser.value !== account.profile.id),
accounts.value.filter((account) => defaultUser.value !== account.id),
)
const avatarUrl = computed(() => {
if (equippedSkin.value?.texture_key) {
const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
if (cachedUrl) {
return cachedUrl
}
return `https://mc-heads.net/avatar/${equippedSkin.value.texture_key}/128`
}
if (selectedAccount.value?.profile?.id) {
return `https://mc-heads.net/avatar/${selectedAccount.value.profile.id}/128`
}
return 'https://launcher-files.modrinth.com/assets/steve_head.png'
})
function getAccountAvatarUrl(account) {
if (
account.profile.id === selectedAccount.value?.profile?.id &&
equippedSkin.value?.texture_key
) {
const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
if (cachedUrl) {
return cachedUrl
}
}
return `https://mc-heads.net/avatar/${account.profile.id}/128`
}
const selectedAccount = computed(() =>
accounts.value.find((account) => account.profile.id === defaultUser.value),
accounts.value.find((account) => account.id === defaultUser.value),
)
async function setAccount(account) {
defaultUser.value = account.profile.id
await set_default_user(account.profile.id).catch(handleError)
defaultUser.value = account.id
await set_default_user(account.id).catch(handleError)
emit('change')
}
async function login() {
loginDisabled.value = true
const loggedIn = await login_flow().catch(handleSevereError)
if (loggedIn) {
@@ -189,7 +123,6 @@ async function login() {
}
trackEvent('AccountLogIn')
loginDisabled.value = false
}
const logout = async (id) => {
@@ -92,7 +92,7 @@ async function loginMinecraft() {
const loggedIn = await login_flow()
if (loggedIn) {
await set_default_user(loggedIn.profile.id).catch(handleError)
await set_default_user(loggedIn.id).catch(handleError)
}
await trackEvent('AccountLogIn', { source: 'ErrorModal' })
@@ -219,8 +219,8 @@ async function copyToClipboard(text) {
<template v-else-if="metadata.notEnoughSpace">
<h3>Not enough space</h3>
<p>
It looks like there is not enough space on the disk containing the directory you
selected. Please free up some space and try again or cancel the directory change.
It looks like there is not enough space on the disk containing the dirctory you
selected Please free up some space and try again or cancel the directory change.
</p>
</template>
<template v-else>
@@ -19,6 +19,7 @@ import { showProfileInFolder } from '@/helpers/utils.js'
import { handleSevereError } from '@/store/error.js'
import { trackEvent } from '@/helpers/analytics'
import dayjs from 'dayjs'
import { formatCategory } from '@modrinth/utils'
const formatRelativeTime = useRelativeTime()
@@ -172,10 +173,7 @@ onUnmounted(() => unlisten())
<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
<TimerIcon />
<span class="text-sm">
<template v-if="instance.last_played">
Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
</template>
<template v-else> Never played </template>
Played {{ formatRelativeTime(dayjs(instance.last_played).toISOString()) }}
</span>
</div>
</div>
@@ -239,8 +237,8 @@ onUnmounted(() => unlisten())
</p>
<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold mt-auto">
<GameIcon class="shrink-0" />
<span class="text-sm capitalize">
{{ instance.loader }} {{ instance.game_version }}
<span class="text-sm">
{{ formatCategory(instance.loader) }} {{ instance.game_version }}
</span>
</div>
</div>
@@ -32,33 +32,8 @@ function updateAdPosition() {
<template>
<div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
<a
href="https://modrinth.gg?from=app-placeholder"
target="_blank"
class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
>
<img
src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-light.webp"
alt="Host your next server with Modrinth Servers"
class="hidden light-image rounded-[inherit]"
/>
<img
src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
alt="Host your next server with Modrinth Servers"
class="dark-image rounded-[inherit]"
/>
</a>
<div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
<p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
</div>
</div>
</template>
<style lang="scss" scoped>
.light,
.light-mode {
.dark-image {
display: none;
}
.light-image {
display: block;
}
}
</style>
@@ -30,7 +30,7 @@ const getInstances = async () => {
return dateB - dateA
})
.slice(0, 3)
.slice(0, 4)
}
await getInstances()
@@ -5,7 +5,7 @@ import {
ShieldIcon,
SettingsIcon,
GaugeIcon,
PaintbrushIcon,
PaintBrushIcon,
GameIcon,
CoffeeIcon,
} from '@modrinth/assets'
@@ -41,7 +41,7 @@ const tabs = [
id: 'app.settings.tabs.appearance',
defaultMessage: 'Appearance',
}),
icon: PaintbrushIcon,
icon: PaintBrushIcon,
content: AppearanceSettings,
},
{
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { ref } from 'vue'
import { NewModal as Modal } from '@modrinth/ui'
import { show_ads_window, hide_ads_window } from '@/helpers/ads.js'
import { useTheming } from '@/store/theme.ts'
@@ -26,16 +26,16 @@ const props = defineProps({
default: true,
},
})
const modal = useTemplateRef('modal')
const modal = ref(null)
defineExpose({
show: (e: MouseEvent) => {
show: () => {
hide_ads_window()
modal.value?.show(e)
modal.value.show()
},
hide: () => {
onModalHide()
modal.value?.hide()
modal.value.hide()
},
})
@@ -56,17 +56,9 @@ watch(
/>
</div>
<div class="mt-4 flex items-center justify-between">
<div>
<h2 class="m-0 text-lg font-extrabold text-contrast">Hide nametag</h2>
<p class="m-0 mt-1">Disables the nametag above your player on the skins page.</p>
</div>
<Toggle id="hide-nametag-skins-page" v-model="settings.hide_nametag_skins_page" />
</div>
<div v-if="os !== 'MacOS'" class="mt-4 flex items-center justify-between gap-4">
<div>
<h2 class="m-0 text-lg font-extrabold text-contrast">Native decorations</h2>
<h2 class="m-0 text-lg font-extrabold text-contrast">Native Decorations</h2>
<p class="m-0 mt-1">Use system window frame (app restart required).</p>
</div>
<Toggle id="native-decorations" v-model="settings.native_decorations" />
@@ -1,412 +0,0 @@
<template>
<UploadSkinModal ref="uploadModal" />
<ModalWrapper ref="modal" @on-hide="resetState">
<template #title>
<span class="text-lg font-extrabold text-contrast">
{{ mode === 'edit' ? 'Editing skin' : 'Adding a skin' }}
</span>
</template>
<div class="flex flex-col md:flex-row gap-6">
<div class="max-h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
<div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
<SkinPreviewRenderer
:variant="variant"
:texture-src="previewSkin || ''"
:cape-src="selectedCapeTexture"
:scale="1.4"
:fov="50"
:initial-rotation="Math.PI / 8"
class="h-full w-full"
/>
</div>
</div>
<div class="flex flex-col gap-4 w-full min-h-[20rem]">
<section>
<h2 class="text-base font-semibold mb-2">Texture</h2>
<Button @click="openUploadSkinModal"> <UploadIcon /> Replace texture </Button>
</section>
<section>
<h2 class="text-base font-semibold mb-2">Arm style</h2>
<RadioButtons v-model="variant" :items="['CLASSIC', 'SLIM']">
<template #default="{ item }">
{{ item === 'CLASSIC' ? 'Wide' : 'Slim' }}
</template>
</RadioButtons>
</section>
<section>
<h2 class="text-base font-semibold mb-2">Cape</h2>
<div class="flex gap-2">
<CapeButton
v-if="defaultCape"
:id="defaultCape.id"
:texture="defaultCape.texture"
:name="undefined"
:selected="!selectedCape"
faded
@select="selectCape(undefined)"
>
<span>Use default cape</span>
</CapeButton>
<CapeLikeTextButton v-else :highlighted="!selectedCape" @click="selectCape(undefined)">
<span>Use default cape</span>
</CapeLikeTextButton>
<CapeButton
v-for="cape in visibleCapeList"
:id="cape.id"
:key="cape.id"
:texture="cape.texture"
:name="cape.name || 'Cape'"
:selected="selectedCape?.id === cape.id"
@select="selectCape(cape)"
/>
<CapeLikeTextButton
v-if="(capes?.length ?? 0) > 2"
tooltip="View more capes"
@mouseup="openSelectCapeModal"
>
<template #icon><ChevronRightIcon /></template>
<span>More</span>
</CapeLikeTextButton>
</div>
</section>
</div>
</div>
<div class="flex gap-2 mt-12">
<ButtonStyled color="brand" :disabled="disableSave || isSaving">
<button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
<SpinnerIcon v-if="isSaving" class="animate-spin" />
<CheckIcon v-else-if="mode === 'new'" />
<SaveIcon v-else />
{{ mode === 'new' ? 'Add skin' : 'Save skin' }}
</button>
</ButtonStyled>
<Button :disabled="isSaving" @click="hide"><XIcon />Cancel</Button>
</div>
</ModalWrapper>
<SelectCapeModal
ref="selectCapeModal"
:capes="capes || []"
@select="handleCapeSelected"
@cancel="handleCapeCancel"
/>
</template>
<script setup lang="ts">
import { ref, computed, watch, useTemplateRef } from 'vue'
import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
import {
SkinPreviewRenderer,
Button,
RadioButtons,
CapeButton,
CapeLikeTextButton,
ButtonStyled,
} from '@modrinth/ui'
import {
add_and_equip_custom_skin,
remove_custom_skin,
unequip_skin,
type Skin,
type Cape,
type SkinModel,
get_normalized_skin_texture,
} from '@/helpers/skins.ts'
import { handleError } from '@/store/notifications'
import {
UploadIcon,
CheckIcon,
SaveIcon,
XIcon,
ChevronRightIcon,
SpinnerIcon,
} from '@modrinth/assets'
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
const modal = useTemplateRef('modal')
const selectCapeModal = useTemplateRef('selectCapeModal')
const mode = ref<'new' | 'edit'>('new')
const currentSkin = ref<Skin | null>(null)
const shouldRestoreModal = ref(false)
const isSaving = ref(false)
const uploadedTextureUrl = ref<string | null>(null)
const previewSkin = ref<string>('')
const variant = ref<SkinModel>('CLASSIC')
const selectedCape = ref<Cape | undefined>(undefined)
const props = defineProps<{ capes?: Cape[]; defaultCape?: Cape }>()
const selectedCapeTexture = computed(() => selectedCape.value?.texture)
const visibleCapeList = ref<Cape[]>([])
const sortedCapes = computed(() => {
return [...(props.capes || [])].sort((a, b) => {
const nameA = (a.name || '').toLowerCase()
const nameB = (b.name || '').toLowerCase()
return nameA.localeCompare(nameB)
})
})
function initVisibleCapeList() {
if (!props.capes || props.capes.length === 0) {
visibleCapeList.value = []
return
}
if (visibleCapeList.value.length === 0) {
if (selectedCape.value) {
const otherCape = getSortedCapeExcluding(selectedCape.value.id)
visibleCapeList.value = otherCape ? [selectedCape.value, otherCape] : [selectedCape.value]
} else {
visibleCapeList.value = getSortedCapes(2)
}
}
}
function getSortedCapes(count: number): Cape[] {
if (!sortedCapes.value || sortedCapes.value.length === 0) return []
return sortedCapes.value.slice(0, count)
}
function getSortedCapeExcluding(excludeId: string): Cape | undefined {
if (!sortedCapes.value || sortedCapes.value.length <= 1) return undefined
return sortedCapes.value.find((cape) => cape.id !== excludeId)
}
async function loadPreviewSkin() {
if (uploadedTextureUrl.value) {
previewSkin.value = uploadedTextureUrl.value
} else if (currentSkin.value) {
try {
previewSkin.value = await get_normalized_skin_texture(currentSkin.value)
} catch (error) {
console.error('Failed to load skin texture:', error)
previewSkin.value = '/src/assets/skins/steve.png'
}
} else {
previewSkin.value = '/src/assets/skins/steve.png'
}
}
const hasEdits = computed(() => {
if (mode.value !== 'edit') return true
if (uploadedTextureUrl.value) return true
if (!currentSkin.value) return false
if (variant.value !== currentSkin.value.variant) return true
if ((selectedCape.value?.id || null) !== (currentSkin.value.cape_id || null)) return true
return false
})
const disableSave = computed(
() =>
(mode.value === 'new' && !uploadedTextureUrl.value) ||
(mode.value === 'edit' && !hasEdits.value),
)
const saveTooltip = computed(() => {
if (isSaving.value) return 'Saving...'
if (mode.value === 'new' && !uploadedTextureUrl.value) return 'Upload a skin first!'
if (mode.value === 'edit' && !hasEdits.value) return 'Make an edit to the skin first!'
return undefined
})
function resetState() {
mode.value = 'new'
currentSkin.value = null
uploadedTextureUrl.value = null
previewSkin.value = ''
variant.value = 'CLASSIC'
selectedCape.value = undefined
visibleCapeList.value = []
shouldRestoreModal.value = false
isSaving.value = false
}
async function show(e: MouseEvent, skin?: Skin) {
mode.value = skin ? 'edit' : 'new'
currentSkin.value = skin ?? null
if (skin) {
variant.value = skin.variant
selectedCape.value = props.capes?.find((c) => c.id === skin.cape_id)
} else {
variant.value = 'CLASSIC'
selectedCape.value = undefined
}
visibleCapeList.value = []
initVisibleCapeList()
await loadPreviewSkin()
modal.value?.show(e)
}
async function showNew(e: MouseEvent, skinTextureUrl: string) {
mode.value = 'new'
currentSkin.value = null
uploadedTextureUrl.value = skinTextureUrl
variant.value = 'CLASSIC'
selectedCape.value = undefined
visibleCapeList.value = []
initVisibleCapeList()
await loadPreviewSkin()
modal.value?.show(e)
}
async function restoreWithNewTexture(skinTextureUrl: string) {
uploadedTextureUrl.value = skinTextureUrl
await loadPreviewSkin()
if (shouldRestoreModal.value) {
setTimeout(() => {
modal.value?.show()
shouldRestoreModal.value = false
}, 0)
}
}
function hide() {
modal.value?.hide()
setTimeout(() => resetState(), 250)
}
function selectCape(cape: Cape | undefined) {
if (cape && selectedCape.value?.id !== cape.id) {
const isInVisibleList = visibleCapeList.value.some((c) => c.id === cape.id)
if (!isInVisibleList && visibleCapeList.value.length > 0) {
visibleCapeList.value.splice(0, 1, cape)
if (visibleCapeList.value.length > 1 && visibleCapeList.value[1].id === cape.id) {
const otherCape = getSortedCapeExcluding(cape.id)
if (otherCape) {
visibleCapeList.value.splice(1, 1, otherCape)
}
}
}
}
selectedCape.value = cape
}
function handleCapeSelected(cape: Cape | undefined) {
selectCape(cape)
if (shouldRestoreModal.value) {
setTimeout(() => {
modal.value?.show()
shouldRestoreModal.value = false
}, 0)
}
}
function handleCapeCancel() {
if (shouldRestoreModal.value) {
setTimeout(() => {
modal.value?.show()
shouldRestoreModal.value = false
}, 0)
}
}
function openSelectCapeModal(e: MouseEvent) {
if (!selectCapeModal.value) return
shouldRestoreModal.value = true
modal.value?.hide()
setTimeout(() => {
selectCapeModal.value?.show(
e,
currentSkin.value?.texture_key,
selectedCape.value,
previewSkin.value,
variant.value,
)
}, 0)
}
function openUploadSkinModal(e: MouseEvent) {
shouldRestoreModal.value = true
modal.value?.hide()
emit('open-upload-modal', e)
}
function restoreModal() {
if (shouldRestoreModal.value) {
setTimeout(() => {
const fakeEvent = new MouseEvent('click')
modal.value?.show(fakeEvent)
shouldRestoreModal.value = false
}, 500)
}
}
async function save() {
isSaving.value = true
try {
let textureUrl: string
if (uploadedTextureUrl.value) {
textureUrl = uploadedTextureUrl.value
} else {
textureUrl = currentSkin.value!.texture
}
await unequip_skin()
const bytes: Uint8Array = new Uint8Array(await (await fetch(textureUrl)).arrayBuffer())
if (mode.value === 'new') {
await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
emit('saved')
} else {
await add_and_equip_custom_skin(bytes, variant.value, selectedCape.value)
await remove_custom_skin(currentSkin.value!)
emit('saved')
}
hide()
} catch (err) {
handleError(err)
} finally {
isSaving.value = false
}
}
watch([uploadedTextureUrl, currentSkin], async () => {
await loadPreviewSkin()
})
watch(
() => props.capes,
() => {
initVisibleCapeList()
},
{ immediate: true },
)
const emit = defineEmits<{
(event: 'saved'): void
(event: 'deleted', skin: Skin): void
(event: 'open-upload-modal', mouseEvent: MouseEvent): void
}>()
defineExpose({
show,
showNew,
restoreWithNewTexture,
hide,
shouldRestoreModal,
restoreModal,
})
</script>
@@ -1,140 +0,0 @@
<script setup lang="ts">
import { useTemplateRef, ref, computed } from 'vue'
import type { Cape, SkinModel } from '@/helpers/skins.ts'
import {
ButtonStyled,
ScrollablePanel,
CapeButton,
CapeLikeTextButton,
SkinPreviewRenderer,
} from '@modrinth/ui'
import { CheckIcon, XIcon } from '@modrinth/assets'
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
const modal = useTemplateRef('modal')
const emit = defineEmits<{
(e: 'select', cape: Cape | undefined): void
(e: 'cancel'): void
}>()
const props = defineProps<{
capes: Cape[]
}>()
const sortedCapes = computed(() => {
return [...props.capes].sort((a, b) => {
const nameA = (a.name || '').toLowerCase()
const nameB = (b.name || '').toLowerCase()
return nameA.localeCompare(nameB)
})
})
const currentSkinId = ref<string | undefined>()
const currentSkinTexture = ref<string | undefined>()
const currentSkinVariant = ref<SkinModel>('CLASSIC')
const currentCapeTexture = computed<string | undefined>(() => currentCape.value?.texture)
const currentCape = ref<Cape | undefined>()
function show(
e: MouseEvent,
skinId?: string,
selected?: Cape,
skinTexture?: string,
variant?: SkinModel,
) {
currentSkinId.value = skinId
currentSkinTexture.value = skinTexture
currentSkinVariant.value = variant || 'CLASSIC'
currentCape.value = selected
modal.value?.show(e)
}
function select() {
emit('select', currentCape.value)
hide()
}
function hide() {
modal.value?.hide()
emit('cancel')
}
function updateSelectedCape(cape: Cape | undefined) {
currentCape.value = cape
}
function onModalHide() {
emit('cancel')
}
defineExpose({
show,
hide,
})
</script>
<template>
<ModalWrapper ref="modal" @on-hide="onModalHide">
<template #title>
<div class="flex flex-col">
<span class="text-lg font-extrabold text-heading">Change cape</span>
</div>
</template>
<div class="flex flex-col md:flex-row gap-6">
<div class="max-h-[25rem] h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
<div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
<SkinPreviewRenderer
v-if="currentSkinTexture"
:cape-src="currentCapeTexture"
:texture-src="currentSkinTexture"
:variant="currentSkinVariant"
:scale="1.4"
:fov="50"
:initial-rotation="Math.PI + Math.PI / 8"
class="h-full w-full"
/>
</div>
</div>
<div class="flex flex-col gap-4 w-full my-auto">
<ScrollablePanel class="max-h-[20rem] max-w-[30rem] mb-5 h-full">
<div class="flex flex-wrap gap-2 justify-center content-start overflow-y-auto h-full">
<CapeLikeTextButton
tooltip="No Cape"
:highlighted="!currentCape"
@click="updateSelectedCape(undefined)"
>
<template #icon>
<XIcon />
</template>
<span>None</span>
</CapeLikeTextButton>
<CapeButton
v-for="cape in sortedCapes"
:id="cape.id"
:key="cape.id"
:name="cape.name"
:texture="cape.texture"
:selected="currentCape?.id === cape.id"
@select="updateSelectedCape(cape)"
/>
</div>
</ScrollablePanel>
</div>
</div>
<div class="flex gap-2 items-center">
<ButtonStyled color="brand">
<button @click="select">
<CheckIcon />
Select
</button>
</ButtonStyled>
<ButtonStyled>
<button @click="hide">
<XIcon />
Cancel
</button>
</ButtonStyled>
</div>
</ModalWrapper>
</template>
@@ -1,140 +0,0 @@
<template>
<ModalWrapper ref="modal" @on-hide="hide(true)">
<template #title>
<span class="text-lg font-extrabold text-contrast"> Upload skin texture </span>
</template>
<div class="relative">
<div
class="border-2 border-dashed border-highlight-gray rounded-xl h-[173px] flex flex-col items-center justify-center p-8 cursor-pointer bg-button-bg hover:bg-button-hover transition-colors relative"
@click="triggerFileInput"
>
<p class="mx-auto mb-0 text-primary font-bold text-lg text-center flex items-center gap-2">
<UploadIcon /> Select skin texture file
</p>
<p class="mx-auto mt-0 text-secondary text-sm text-center">
Drag and drop or click here to browse
</p>
<input
ref="fileInput"
type="file"
accept="image/png"
class="hidden"
@change="handleInputFileChange"
/>
</div>
</div>
</ModalWrapper>
</template>
<script setup lang="ts">
import { ref, onBeforeUnmount, watch } from 'vue'
import { UploadIcon } from '@modrinth/assets'
import { useNotifications } from '@/store/state'
import { getCurrentWebview } from '@tauri-apps/api/webview'
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
import { get_dragged_skin_data } from '@/helpers/skins'
const notifications = useNotifications()
const modal = ref()
const fileInput = ref<HTMLInputElement>()
const unlisten = ref<() => void>()
const modalVisible = ref(false)
const emit = defineEmits<{
(e: 'uploaded', data: ArrayBuffer): void
(e: 'canceled'): void
}>()
function show(e?: MouseEvent) {
modal.value?.show(e)
modalVisible.value = true
setupDragDropListener()
}
function hide(emitCanceled = false) {
modal.value?.hide()
modalVisible.value = false
cleanupDragDropListener()
resetState()
if (emitCanceled) {
emit('canceled')
}
}
function resetState() {
if (fileInput.value) fileInput.value.value = ''
}
function triggerFileInput() {
fileInput.value?.click()
}
async function handleInputFileChange(e: Event) {
const files = (e.target as HTMLInputElement).files
if (!files || files.length === 0) {
return
}
const file = files[0]
const buffer = await file.arrayBuffer()
await processData(buffer)
}
async function setupDragDropListener() {
try {
if (modalVisible.value) {
await cleanupDragDropListener()
unlisten.value = await getCurrentWebview().onDragDropEvent(async (event) => {
if (event.payload.type !== 'drop') {
return
}
if (!event.payload.paths || event.payload.paths.length === 0) {
return
}
const filePath = event.payload.paths[0]
try {
const data = await get_dragged_skin_data(filePath)
await processData(data.buffer)
} catch (error) {
notifications.addNotification({
title: 'Error processing file',
text: error instanceof Error ? error.message : 'Failed to read the dropped file.',
type: 'error',
})
}
})
}
} catch (error) {
console.error('Failed to set up drag and drop listener:', error)
}
}
async function cleanupDragDropListener() {
if (unlisten.value) {
unlisten.value()
unlisten.value = undefined
}
}
async function processData(buffer: ArrayBuffer) {
emit('uploaded', buffer)
hide()
}
watch(modalVisible, (isVisible) => {
if (isVisible) {
setupDragDropListener()
} else {
cleanupDragDropListener()
}
})
onBeforeUnmount(() => {
cleanupDragDropListener()
})
defineExpose({ show, hide })
</script>
@@ -1,5 +1,4 @@
<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import {
EyeIcon,
@@ -43,7 +42,6 @@ const emit = defineEmits<{
const props = defineProps<{
instance: GameInstance
last_played: Dayjs
}>()
const loadingModpack = ref(!!props.instance.linked_data)
@@ -149,12 +147,12 @@ onUnmounted(() => {
: null
"
class="w-fit shrink-0"
:class="{ 'cursor-help smart-clickable:allow-pointer-events': last_played }"
:class="{ 'cursor-help smart-clickable:allow-pointer-events': instance.last_played }"
>
<template v-if="last_played">
<template v-if="instance.last_played">
{{
formatMessage(commonMessages.playedLabel, {
time: formatRelativeTime(last_played.toISOString?.()),
time: formatRelativeTime(instance.last_played.toISOString()),
})
}}
</template>
@@ -84,7 +84,7 @@ async function populateJumpBackIn() {
worldItems.push({
type: 'world',
last_played: dayjs(world.last_played ?? 0),
last_played: dayjs(world.last_played),
world: world,
instance: instance,
})
@@ -138,13 +138,13 @@ async function populateJumpBackIn() {
instanceItems.push({
type: 'instance',
last_played: dayjs(instance.last_played ?? 0),
last_played: dayjs(instance.last_played),
instance: instance,
})
}
const items: JumpBackInItem[] = [...worldItems, ...instanceItems]
items.sort((a, b) => dayjs(b.last_played ?? 0).diff(dayjs(a.last_played ?? 0)))
items.sort((a, b) => dayjs(b.last_played).diff(dayjs(a.last_played)))
jumpBackInItems.value = items
.filter((item, index) => index < MIN_JUMP_BACK_IN || item.last_played.isAfter(TWO_WEEKS_AGO))
.slice(0, MAX_JUMP_BACK_IN)
@@ -291,7 +291,7 @@ onUnmounted(() => {
"
@stop="() => stopInstance(item.instance.path)"
/>
<InstanceItem v-else :instance="item.instance" :last_played="item.last_played" />
<InstanceItem v-else :instance="item.instance" />
</template>
</div>
</div>
+3 -3
View File
@@ -1,12 +1,12 @@
import { fetch } from '@tauri-apps/plugin-http'
import { ofetch } from 'ofetch'
import { handleError } from '@/store/state.js'
import { getVersion } from '@tauri-apps/api/app'
export const useFetch = async (url, item, isSilent) => {
try {
const version = await getVersion()
return await fetch(url, {
method: 'GET',
return await ofetch(url, {
headers: { 'User-Agent': `modrinth/theseus/${version} (support@modrinth.com)` },
})
} catch (err) {
@@ -1,354 +0,0 @@
import * as THREE from 'three'
import type { Skin, Cape } from '../skins'
import { get_normalized_skin_texture, determineModelType } from '../skins'
import { reactive } from 'vue'
import { setupSkinModel, disposeCaches } from '@modrinth/utils'
import { skinPreviewStorage } from '../storage/skin-preview-storage'
import { CapeModel, ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
export interface RenderResult {
forwards: string
backwards: string
}
class BatchSkinRenderer {
private renderer: THREE.WebGLRenderer
private readonly scene: THREE.Scene
private readonly camera: THREE.PerspectiveCamera
private currentModel: THREE.Group | null = null
constructor(width: number = 360, height: number = 504) {
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
this.renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true,
preserveDrawingBuffer: true,
})
this.renderer.outputColorSpace = THREE.SRGBColorSpace
this.renderer.toneMapping = THREE.NoToneMapping
this.renderer.toneMappingExposure = 10.0
this.renderer.setClearColor(0x000000, 0)
this.renderer.setSize(width, height)
this.scene = new THREE.Scene()
this.camera = new THREE.PerspectiveCamera(20, width / height, 0.4, 1000)
const ambientLight = new THREE.AmbientLight(0xffffff, 2)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2)
directionalLight.castShadow = true
directionalLight.position.set(2, 4, 3)
this.scene.add(ambientLight)
this.scene.add(directionalLight)
}
public async renderSkin(
textureUrl: string,
modelUrl: string,
capeUrl?: string,
capeModelUrl?: string,
): Promise<RenderResult> {
await this.setupModel(modelUrl, textureUrl, capeModelUrl, capeUrl)
const headPart = this.currentModel!.getObjectByName('Head')
let lookAtTarget: [number, number, number]
if (headPart) {
const headPosition = new THREE.Vector3()
headPart.getWorldPosition(headPosition)
lookAtTarget = [headPosition.x, headPosition.y - 0.3, headPosition.z]
} else {
throw new Error("Failed to find 'Head' object in model.")
}
const frontCameraPos: [number, number, number] = [-1.3, 1, 6.3]
const backCameraPos: [number, number, number] = [-1.3, 1, -2.5]
const forwards = await this.renderView(frontCameraPos, lookAtTarget)
const backwards = await this.renderView(backCameraPos, lookAtTarget)
return { forwards, backwards }
}
private async renderView(
cameraPosition: [number, number, number],
lookAtPosition: [number, number, number],
): Promise<string> {
this.camera.position.set(...cameraPosition)
this.camera.lookAt(...lookAtPosition)
this.renderer.render(this.scene, this.camera)
return new Promise<string>((resolve, reject) => {
this.renderer.domElement.toBlob((blob) => {
if (blob) {
const url = URL.createObjectURL(blob)
resolve(url)
} else {
reject(new Error('Failed to create blob from canvas'))
}
}, 'image/png')
})
}
private async setupModel(
modelUrl: string,
textureUrl: string,
capeModelUrl?: string,
capeUrl?: string,
): Promise<void> {
if (this.currentModel) {
this.scene.remove(this.currentModel)
}
const { model } = await setupSkinModel(modelUrl, textureUrl, capeModelUrl, capeUrl)
const group = new THREE.Group()
group.add(model)
group.position.set(0, 0.3, 1.95)
group.scale.set(0.8, 0.8, 0.8)
this.scene.add(group)
this.currentModel = group
}
public dispose(): void {
this.renderer.dispose()
disposeCaches()
}
}
function getModelUrlForVariant(variant: string): string {
switch (variant) {
case 'SLIM':
return SlimPlayerModel
case 'CLASSIC':
case 'UNKNOWN':
default:
return ClassicPlayerModel
}
}
export const map = reactive(new Map<string, RenderResult>())
export const headMap = reactive(new Map<string, string>())
const DEBUG_MODE = false
export async function cleanupUnusedPreviews(skins: Skin[]): Promise<void> {
const validKeys = new Set<string>()
const validHeadKeys = new Set<string>()
for (const skin of skins) {
const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
const headKey = `${skin.texture_key}-head`
validKeys.add(key)
validHeadKeys.add(headKey)
}
try {
await skinPreviewStorage.cleanupInvalidKeys(validKeys)
await skinPreviewStorage.cleanupInvalidKeys(validHeadKeys)
} catch (error) {
console.warn('Failed to cleanup unused skin previews:', error)
}
}
export async function generatePlayerHeadBlob(skinUrl: string, size: number = 64): Promise<Blob> {
return new Promise((resolve, reject) => {
const img = new Image()
img.crossOrigin = 'anonymous'
img.onload = () => {
try {
const sourceCanvas = document.createElement('canvas')
const sourceCtx = sourceCanvas.getContext('2d')
if (!sourceCtx) {
throw new Error('Could not get 2D context from source canvas')
}
sourceCanvas.width = img.width
sourceCanvas.height = img.height
sourceCtx.drawImage(img, 0, 0)
const outputCanvas = document.createElement('canvas')
const outputCtx = outputCanvas.getContext('2d')
if (!outputCtx) {
throw new Error('Could not get 2D context from output canvas')
}
outputCanvas.width = size
outputCanvas.height = size
outputCtx.imageSmoothingEnabled = false
const headImageData = sourceCtx.getImageData(8, 8, 8, 8)
const headCanvas = document.createElement('canvas')
const headCtx = headCanvas.getContext('2d')
if (!headCtx) {
throw new Error('Could not get 2D context from head canvas')
}
headCanvas.width = 8
headCanvas.height = 8
headCtx.putImageData(headImageData, 0, 0)
outputCtx.drawImage(headCanvas, 0, 0, 8, 8, 0, 0, size, size)
const hatImageData = sourceCtx.getImageData(40, 8, 8, 8)
const hatCanvas = document.createElement('canvas')
const hatCtx = hatCanvas.getContext('2d')
if (!hatCtx) {
throw new Error('Could not get 2D context from hat canvas')
}
hatCanvas.width = 8
hatCanvas.height = 8
hatCtx.putImageData(hatImageData, 0, 0)
const hatPixels = hatImageData.data
let hasHat = false
for (let i = 3; i < hatPixels.length; i += 4) {
if (hatPixels[i] > 0) {
hasHat = true
break
}
}
if (hasHat) {
outputCtx.drawImage(hatCanvas, 0, 0, 8, 8, 0, 0, size, size)
}
outputCanvas.toBlob((blob) => {
if (blob) {
resolve(blob)
} else {
reject(new Error('Failed to create blob from canvas'))
}
}, 'image/png')
} catch (error) {
reject(error)
}
}
img.onerror = () => {
reject(new Error('Failed to load skin texture image'))
}
img.src = skinUrl
})
}
async function generateHeadRender(skin: Skin): Promise<string> {
const headKey = `${skin.texture_key}-head`
if (headMap.has(headKey)) {
if (DEBUG_MODE) {
const url = headMap.get(headKey)!
URL.revokeObjectURL(url)
headMap.delete(headKey)
} else {
return headMap.get(headKey)!
}
}
try {
const cached = await skinPreviewStorage.retrieve(headKey)
if (cached && typeof cached === 'string') {
headMap.set(headKey, cached)
return cached
}
} catch (error) {
console.warn('Failed to retrieve cached head render:', error)
}
const skinUrl = await get_normalized_skin_texture(skin)
const headBlob = await generatePlayerHeadBlob(skinUrl, 64)
const headUrl = URL.createObjectURL(headBlob)
headMap.set(headKey, headUrl)
try {
// @ts-expect-error - skinPreviewStorage.store expects a RenderResult, but we are storing a string url.
await skinPreviewStorage.store(headKey, headUrl)
} catch (error) {
console.warn('Failed to store head render in persistent storage:', error)
}
return headUrl
}
export async function getPlayerHeadUrl(skin: Skin): Promise<string> {
return await generateHeadRender(skin)
}
export async function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promise<void> {
const renderer = new BatchSkinRenderer()
try {
for (const skin of skins) {
const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
if (map.has(key)) {
if (DEBUG_MODE) {
const result = map.get(key)!
URL.revokeObjectURL(result.forwards)
URL.revokeObjectURL(result.backwards)
map.delete(key)
} else continue
}
try {
const cached = await skinPreviewStorage.retrieve(key)
if (cached) {
map.set(key, cached)
continue
}
} catch (error) {
console.warn('Failed to retrieve cached skin preview:', error)
}
let variant = skin.variant
if (variant === 'UNKNOWN') {
try {
variant = await determineModelType(skin.texture)
} catch (error) {
console.error(`Failed to determine model type for skin ${key}:`, error)
variant = 'CLASSIC'
}
}
const modelUrl = getModelUrlForVariant(variant)
const cape: Cape | undefined = capes.find((_cape) => _cape.id === skin.cape_id)
const renderResult = await renderer.renderSkin(
await get_normalized_skin_texture(skin),
modelUrl,
cape?.texture,
CapeModel,
)
map.set(key, renderResult)
try {
await skinPreviewStorage.store(key, renderResult)
} catch (error) {
console.warn('Failed to store skin preview in persistent storage:', error)
}
await generateHeadRender(skin)
}
} finally {
renderer.dispose()
await cleanupUnusedPreviews(skins)
}
}
@@ -37,7 +37,6 @@ export type AppSettings = {
theme: ColorTheme
default_page: 'home' | 'library'
collapsed_navigation: boolean
hide_nametag_skins_page: boolean
advanced_rendering: boolean
native_decorations: boolean
toggle_sidebar: boolean
-167
View File
@@ -1,167 +0,0 @@
import { invoke } from '@tauri-apps/api/core'
import { handleError } from '@/store/notifications'
import { arrayBufferToBase64 } from '@modrinth/utils'
export interface Cape {
id: string
name: string
texture: string
is_default: boolean
is_equipped: boolean
}
export type SkinModel = 'CLASSIC' | 'SLIM' | 'UNKNOWN'
export type SkinSource = 'default' | 'custom_external' | 'custom'
export interface Skin {
texture_key: string
name?: string
variant: SkinModel
cape_id?: string
texture: string
source: SkinSource
is_equipped: boolean
}
export const DEFAULT_MODEL_SORTING = ['Steve', 'Alex'] as string[]
export const DEFAULT_MODELS: Record<string, SkinModel> = {
Steve: 'CLASSIC',
Alex: 'SLIM',
Zuri: 'CLASSIC',
Sunny: 'CLASSIC',
Noor: 'SLIM',
Makena: 'SLIM',
Kai: 'CLASSIC',
Efe: 'SLIM',
Ari: 'CLASSIC',
}
export function filterSavedSkins(list: Skin[]) {
const customSkins = list.filter((s) => s.source !== 'default')
fixUnknownSkins(customSkins).catch(handleError)
return customSkins
}
export async function determineModelType(texture: string): Promise<'SLIM' | 'CLASSIC'> {
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
if (!context) {
return reject(new Error('Failed to create canvas rendering context.'))
}
const image = new Image()
image.crossOrigin = 'anonymous'
image.src = texture
image.onload = () => {
canvas.width = image.width
canvas.height = image.height
context.drawImage(image, 0, 0)
const armX = 44
const armY = 16
const armWidth = 4
const armHeight = 12
const imageData = context.getImageData(armX, armY, armWidth, armHeight).data
for (let y = 0; y < armHeight; y++) {
const alphaIndex = (3 + y * armWidth) * 4 + 3
if (imageData[alphaIndex] !== 0) {
resolve('CLASSIC')
return
}
}
canvas.remove()
resolve('SLIM')
}
image.onerror = () => {
canvas.remove()
reject(new Error('Failed to load the image.'))
}
})
}
export async function fixUnknownSkins(list: Skin[]) {
const unknownSkins = list.filter((s) => s.variant === 'UNKNOWN')
for (const unknownSkin of unknownSkins) {
unknownSkin.variant = await determineModelType(unknownSkin.texture)
}
}
export function filterDefaultSkins(list: Skin[]) {
return list
.filter(
(s) =>
s.source === 'default' &&
(!s.name || !(s.name in DEFAULT_MODELS) || s.variant === DEFAULT_MODELS[s.name]),
)
.sort((a, b) => {
const aIndex = a.name ? DEFAULT_MODEL_SORTING.indexOf(a.name) : -1
const bIndex = b.name ? DEFAULT_MODEL_SORTING.indexOf(b.name) : -1
return (aIndex === -1 ? Infinity : aIndex) - (bIndex === -1 ? Infinity : bIndex)
})
}
export async function get_available_capes(): Promise<Cape[]> {
return invoke('plugin:minecraft-skins|get_available_capes', {})
}
export async function get_available_skins(): Promise<Skin[]> {
return invoke('plugin:minecraft-skins|get_available_skins', {})
}
export async function add_and_equip_custom_skin(
textureBlob: Uint8Array,
variant: SkinModel,
capeOverride?: Cape,
): Promise<void> {
await invoke('plugin:minecraft-skins|add_and_equip_custom_skin', {
textureBlob,
variant,
capeOverride,
})
}
export async function set_default_cape(cape?: Cape): Promise<void> {
await invoke('plugin:minecraft-skins|set_default_cape', {
cape,
})
}
export async function equip_skin(skin: Skin): Promise<void> {
await invoke('plugin:minecraft-skins|equip_skin', {
skin,
})
}
export async function remove_custom_skin(skin: Skin): Promise<void> {
await invoke('plugin:minecraft-skins|remove_custom_skin', {
skin,
})
}
export async function get_normalized_skin_texture(skin: Skin): Promise<string> {
const data = await normalize_skin_texture(skin.texture)
const base64 = arrayBufferToBase64(data)
return `data:image/png;base64,${base64}`
}
export async function normalize_skin_texture(texture: Uint8Array | string): Promise<Uint8Array> {
return await invoke('plugin:minecraft-skins|normalize_skin_texture', { texture })
}
export async function unequip_skin(): Promise<void> {
await invoke('plugin:minecraft-skins|unequip_skin')
}
export async function get_dragged_skin_data(path: string): Promise<Uint8Array> {
const data = await invoke('plugin:minecraft-skins|get_dragged_skin_data', { path })
return new Uint8Array(data)
}
@@ -1,118 +0,0 @@
import type { RenderResult } from '../rendering/batch-skin-renderer'
interface StoredPreview {
forwards: Blob
backwards: Blob
timestamp: number
}
export class SkinPreviewStorage {
private dbName = 'skin-previews'
private version = 1
private db: IDBDatabase | null = null
async init(): Promise<void> {
return new Promise((resolve, reject) => {
const request = indexedDB.open(this.dbName, this.version)
request.onerror = () => reject(request.error)
request.onsuccess = () => {
this.db = request.result
resolve()
}
request.onupgradeneeded = () => {
const db = request.result
if (!db.objectStoreNames.contains('previews')) {
db.createObjectStore('previews')
}
}
})
}
async store(key: string, result: RenderResult): Promise<void> {
if (!this.db) await this.init()
const forwardsBlob = await fetch(result.forwards).then((r) => r.blob())
const backwardsBlob = await fetch(result.backwards).then((r) => r.blob())
const transaction = this.db!.transaction(['previews'], 'readwrite')
const store = transaction.objectStore('previews')
const storedPreview: StoredPreview = {
forwards: forwardsBlob,
backwards: backwardsBlob,
timestamp: Date.now(),
}
return new Promise((resolve, reject) => {
const request = store.put(storedPreview, key)
request.onsuccess = () => resolve()
request.onerror = () => reject(request.error)
})
}
async retrieve(key: string): Promise<RenderResult | null> {
if (!this.db) await this.init()
const transaction = this.db!.transaction(['previews'], 'readonly')
const store = transaction.objectStore('previews')
return new Promise((resolve, reject) => {
const request = store.get(key)
request.onsuccess = () => {
const result = request.result as StoredPreview | undefined
if (!result) {
resolve(null)
return
}
const forwards = URL.createObjectURL(result.forwards)
const backwards = URL.createObjectURL(result.backwards)
resolve({ forwards, backwards })
}
request.onerror = () => reject(request.error)
})
}
async cleanupInvalidKeys(validKeys: Set<string>): Promise<number> {
if (!this.db) await this.init()
const transaction = this.db!.transaction(['previews'], 'readwrite')
const store = transaction.objectStore('previews')
let deletedCount = 0
return new Promise((resolve, reject) => {
const request = store.openCursor()
request.onsuccess = (event) => {
const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result
if (cursor) {
const key = cursor.primaryKey as string
if (!validKeys.has(key)) {
const deleteRequest = cursor.delete()
deleteRequest.onsuccess = () => {
deletedCount++
}
deleteRequest.onerror = () => {
console.warn('Failed to delete invalid entry:', key)
}
}
cursor.continue()
} else {
resolve(deletedCount)
}
}
request.onerror = () => reject(request.error)
})
}
}
export const skinPreviewStorage = new SkinPreviewStorage()
-1
View File
@@ -220,7 +220,6 @@ async function refreshSearch() {
}
}
results.value = rawResults.result
currentPage.value = Math.max(1, Math.min(pageCount.value, currentPage.value))
const persistentParams: LocationQuery = {}
+8 -11
View File
@@ -10,7 +10,6 @@ import dayjs from 'dayjs'
import { get_search_results } from '@/helpers/cache.js'
import type { SearchResult } from '@modrinth/utils'
import RecentWorldsList from '@/components/ui/world/RecentWorldsList.vue'
import type { GameInstance } from '@/helpers/types'
const route = useRoute()
const breadcrumbs = useBreadcrumbs()
@@ -83,15 +82,13 @@ async function refreshFeaturedProjects() {
await fetchInstances()
await refreshFeaturedProjects()
const unlistenProfile = await profile_listener(
async (e: { event: string; profile_path_id: string }) => {
await fetchInstances()
const unlistenProfile = await profile_listener(async (e) => {
await fetchInstances()
if (e.event === 'added' || e.event === 'created' || e.event === 'removed') {
await refreshFeaturedProjects()
}
},
)
if (e.event === 'added' || e.event === 'created' || e.event === 'removed') {
await refreshFeaturedProjects()
}
})
onUnmounted(() => {
unlistenProfile()
@@ -100,8 +97,8 @@ onUnmounted(() => {
<template>
<div class="p-6 flex flex-col gap-2">
<h1 v-if="recentInstances?.length > 0" class="m-0 text-2xl font-extrabold">Welcome back!</h1>
<h1 v-else class="m-0 text-2xl font-extrabold">Welcome to Modrinth App!</h1>
<h1 v-if="recentInstances" class="m-0 text-2xl">Welcome back!</h1>
<h1 v-else class="m-0 text-2xl">Welcome to Modrinth App!</h1>
<RecentWorldsList :recent-instances="recentInstances" />
<RowDisplay
v-if="hasFeaturedProjects"
-521
View File
@@ -1,521 +0,0 @@
<script setup lang="ts">
import {
EditIcon,
ExcitedRinthbot,
LogInIcon,
PlusIcon,
SpinnerIcon,
TrashIcon,
UpdatedIcon,
} from '@modrinth/assets'
import {
Button,
ButtonStyled,
ConfirmModal,
SkinButton,
SkinLikeTextButton,
SkinPreviewRenderer,
} from '@modrinth/ui'
import { computedAsync } from '@vueuse/core'
import type { Ref } from 'vue'
import { computed, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
import { handleError, useNotifications } from '@/store/notifications'
import type { Cape, Skin } from '@/helpers/skins.ts'
import {
normalize_skin_texture,
equip_skin,
filterDefaultSkins,
filterSavedSkins,
get_available_capes,
get_available_skins,
get_normalized_skin_texture,
remove_custom_skin,
set_default_cape,
} from '@/helpers/skins.ts'
import { get as getSettings } from '@/helpers/settings.ts'
import { get_default_user, login as login_flow, users } from '@/helpers/auth'
import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
import { generateSkinPreviews, map } from '@/helpers/rendering/batch-skin-renderer.ts'
import { handleSevereError } from '@/store/error'
import { trackEvent } from '@/helpers/analytics'
import type AccountsCard from '@/components/ui/AccountsCard.vue'
import { arrayBufferToBase64 } from '@modrinth/utils'
const editSkinModal = useTemplateRef('editSkinModal')
const selectCapeModal = useTemplateRef('selectCapeModal')
const uploadSkinModal = useTemplateRef('uploadSkinModal')
const notifications = useNotifications()
const settings = ref(await getSettings())
const skins = ref<Skin[]>([])
const capes = ref<Cape[]>([])
const accountsCard = inject('accountsCard') as Ref<typeof AccountsCard>
const currentUser = ref(undefined)
const currentUserId = ref<string | undefined>(undefined)
const username = computed(() => currentUser.value?.profile?.name ?? undefined)
const selectedSkin = ref<Skin | null>(null)
const defaultCape = ref<Cape>()
const originalSelectedSkin = ref<Skin | null>(null)
const originalDefaultCape = ref<Cape>()
const savedSkins = computed(() => filterSavedSkins(skins.value))
const defaultSkins = computed(() => filterDefaultSkins(skins.value))
const currentCape = computed(() => {
if (selectedSkin.value?.cape_id) {
const overrideCape = capes.value.find((c) => c.id === selectedSkin.value?.cape_id)
if (overrideCape) {
return overrideCape
}
}
return defaultCape.value
})
const skinTexture = computedAsync(async () => {
if (selectedSkin.value?.texture) {
return await get_normalized_skin_texture(selectedSkin.value)
} else {
return ''
}
})
const capeTexture = computed(() => currentCape.value?.texture)
const skinVariant = computed(() => selectedSkin.value?.variant)
const skinNametag = computed(() =>
settings.value.hide_nametag_skins_page ? undefined : username.value,
)
let userCheckInterval: number | null = null
const deleteSkinModal = ref()
const skinToDelete = ref<Skin | null>(null)
function confirmDeleteSkin(skin: Skin) {
skinToDelete.value = skin
deleteSkinModal.value?.show()
}
async function deleteSkin() {
if (!skinToDelete.value) return
await remove_custom_skin(skinToDelete.value).catch(handleError)
await loadSkins()
skinToDelete.value = null
}
async function loadCapes() {
try {
capes.value = (await get_available_capes()) ?? []
defaultCape.value = capes.value.find((c) => c.is_equipped)
originalDefaultCape.value = defaultCape.value
} catch (error) {
if (currentUser.value) {
handleError(error)
}
}
}
async function loadSkins() {
try {
skins.value = (await get_available_skins()) ?? []
generateSkinPreviews(skins.value, capes.value)
selectedSkin.value = skins.value.find((s) => s.is_equipped) ?? null
originalSelectedSkin.value = selectedSkin.value
} catch (error) {
if (currentUser.value) {
handleError(error)
}
}
}
async function changeSkin(newSkin: Skin) {
const previousSkin = selectedSkin.value
const previousSkinsList = [...skins.value]
skins.value = skins.value.map((skin) => {
return {
...skin,
is_equipped: skin.texture_key === newSkin.texture_key,
}
})
selectedSkin.value = skins.value.find((s) => s.texture_key === newSkin.texture_key) || null
try {
await equip_skin(newSkin)
if (accountsCard.value) {
await accountsCard.value.refreshValues()
}
} catch (error) {
selectedSkin.value = previousSkin
skins.value = previousSkinsList
if ((error as { message?: string })?.message?.includes('429 Too Many Requests')) {
notifications.addNotification({
type: 'error',
title: 'Slow down!',
text: "You're changing your skin too frequently. Mojang's servers have temporarily blocked further requests. Please wait a moment before trying again.",
})
} else {
handleError(error)
}
}
}
async function handleCapeSelected(cape: Cape | undefined) {
const previousDefaultCape = defaultCape.value
const previousCapesList = [...capes.value]
capes.value = capes.value.map((c) => ({
...c,
is_equipped: cape ? c.id === cape.id : false,
}))
defaultCape.value = cape ? capes.value.find((c) => c.id === cape.id) : undefined
try {
await set_default_cape(cape)
} catch (error) {
defaultCape.value = previousDefaultCape
capes.value = previousCapesList
if ((error as { message?: string })?.message?.includes('429 Too Many Requests')) {
notifications.addNotification({
type: 'error',
title: 'Slow down!',
text: "You're changing your cape too frequently. Mojang's servers have temporarily blocked further requests. Please wait a moment before trying again.",
})
} else {
handleError(error)
}
}
}
async function onSkinSaved() {
await Promise.all([loadCapes(), loadSkins()])
}
async function loadCurrentUser() {
try {
const defaultId = await get_default_user()
currentUserId.value = defaultId
const allAccounts = await users()
currentUser.value = allAccounts.find((acc) => acc.profile.id === defaultId)
} catch (e) {
handleError(e)
currentUser.value = undefined
currentUserId.value = undefined
}
}
function getBakedSkinTextures(skin: Skin): RenderResult | undefined {
const key = `${skin.texture_key}+${skin.variant}+${skin.cape_id ?? 'no-cape'}`
return map.get(key)
}
async function login() {
accountsCard.value.setLoginDisabled(true)
const loggedIn = await login_flow().catch(handleSevereError)
if (loggedIn && accountsCard) {
await accountsCard.value.refreshValues()
}
trackEvent('AccountLogIn')
accountsCard.value.setLoginDisabled(false)
}
function openUploadSkinModal(e: MouseEvent) {
uploadSkinModal.value?.show(e)
}
function onSkinFileUploaded(buffer: ArrayBuffer) {
const fakeEvent = new MouseEvent('click')
normalize_skin_texture(`data:image/png;base64,` + arrayBufferToBase64(buffer)).then(
(skinTextureNormalized: Uint8Array) => {
const skinTexUrl = `data:image/png;base64,` + arrayBufferToBase64(skinTextureNormalized)
if (editSkinModal.value && editSkinModal.value.shouldRestoreModal) {
editSkinModal.value.restoreWithNewTexture(skinTexUrl)
} else {
editSkinModal.value?.showNew(fakeEvent, skinTexUrl)
}
},
)
}
function onUploadCanceled() {
editSkinModal.value?.restoreModal()
}
watch(
() => selectedSkin.value?.cape_id,
() => {},
)
onMounted(() => {
userCheckInterval = window.setInterval(checkUserChanges, 250)
})
onUnmounted(() => {
if (userCheckInterval !== null) {
window.clearInterval(userCheckInterval)
}
})
async function checkUserChanges() {
try {
const defaultId = await get_default_user()
if (defaultId !== currentUserId.value) {
await loadCurrentUser()
await loadCapes()
await loadSkins()
}
} catch (error) {
if (currentUser.value) {
handleError(error)
}
}
}
await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
</script>
<template>
<EditSkinModal
ref="editSkinModal"
:capes="capes"
:default-cape="defaultCape"
@saved="onSkinSaved"
@deleted="() => loadSkins()"
@open-upload-modal="openUploadSkinModal"
/>
<SelectCapeModal ref="selectCapeModal" :capes="capes" @select="handleCapeSelected" />
<UploadSkinModal
ref="uploadSkinModal"
@uploaded="onSkinFileUploaded"
@canceled="onUploadCanceled"
/>
<ConfirmModal
ref="deleteSkinModal"
title="Are you sure you want to delete this skin?"
description="This will permanently delete the selected skin. This action cannot be undone."
proceed-label="Delete"
@proceed="deleteSkin"
/>
<div v-if="currentUser" class="p-4 skin-layout">
<div class="preview-panel">
<h1 class="m-0 text-2xl font-bold flex items-center gap-2">
Skins
<span class="text-sm font-bold px-2 bg-brand-highlight text-brand rounded-full">Beta</span>
</h1>
<div class="preview-container">
<SkinPreviewRenderer
:cape-src="capeTexture"
:texture-src="skinTexture || ''"
:variant="skinVariant"
:nametag="skinNametag"
:initial-rotation="Math.PI / 8"
>
<template #subtitle>
<ButtonStyled :disabled="!!selectedSkin?.cape_id">
<button
v-tooltip="
selectedSkin?.cape_id
? 'The equipped skin is overriding the default cape.'
: undefined
"
:disabled="!!selectedSkin?.cape_id"
@click="
(e: MouseEvent) =>
selectCapeModal?.show(
e,
selectedSkin?.texture_key,
currentCape,
skinTexture,
skinVariant,
)
"
>
<UpdatedIcon />
Change cape
</button>
</ButtonStyled>
</template>
</SkinPreviewRenderer>
</div>
</div>
<div class="skins-container">
<section class="flex flex-col gap-2 mt-1">
<h2 class="text-lg font-bold m-0 text-primary">Saved skins</h2>
<div class="skin-card-grid">
<SkinLikeTextButton class="skin-card" @click="openUploadSkinModal">
<template #icon>
<PlusIcon class="size-8" />
</template>
<span>Add a skin</span>
</SkinLikeTextButton>
<SkinButton
v-for="skin in savedSkins"
:key="`saved-skin-${skin.texture_key}`"
class="skin-card"
:forward-image-src="getBakedSkinTextures(skin)?.forwards"
:backward-image-src="getBakedSkinTextures(skin)?.backwards"
:selected="selectedSkin === skin"
@select="changeSkin(skin)"
>
<template #overlay-buttons>
<Button
color="green"
aria-label="Edit skin"
class="pointer-events-auto"
@click.stop="(e) => editSkinModal?.show(e, skin)"
>
<EditIcon /> Edit
</Button>
<Button
v-show="!skin.is_equipped"
v-tooltip="'Delete skin'"
aria-label="Delete skin"
color="red"
class="!rounded-[100%] pointer-events-auto"
icon-only
@click.stop="() => confirmDeleteSkin(skin)"
>
<TrashIcon />
</Button>
</template>
</SkinButton>
</div>
</section>
<section class="flex flex-col gap-2 mt-6">
<h2 class="text-lg font-bold m-0 text-primary">Default skins</h2>
<div class="skin-card-grid">
<SkinButton
v-for="skin in defaultSkins"
:key="`default-skin-${skin.texture_key}`"
class="skin-card"
:forward-image-src="getBakedSkinTextures(skin)?.forwards"
:backward-image-src="getBakedSkinTextures(skin)?.backwards"
:selected="selectedSkin === skin"
:tooltip="skin.name"
@select="changeSkin(skin)"
/>
</div>
</section>
</div>
</div>
<div v-else class="flex items-center justify-center min-h-[50vh] pt-[25%]">
<div
class="bg-bg-raised rounded-lg p-7 flex flex-col gap-5 shadow-md relative max-w-xl w-full mx-auto"
>
<img
:src="ExcitedRinthbot"
alt="Excited Modrinth Bot"
class="absolute -top-28 right-8 md:right-20 h-28 w-auto"
/>
<div
class="absolute top-0 left-0 w-full h-[1px] opacity-40 bg-gradient-to-r from-transparent via-green-500 to-transparent"
style="
background: linear-gradient(
to right,
transparent 2rem,
var(--color-green) calc(100% - 13rem),
var(--color-green) calc(100% - 5rem),
transparent calc(100% - 2rem)
);
"
></div>
<div class="flex flex-col gap-5">
<h1 class="text-3xl font-extrabold m-0">Please sign-in</h1>
<p class="text-lg m-0">
Please sign into your Minecraft account to use the skin management features of the
Modrinth app.
</p>
<ButtonStyled v-show="accountsCard" color="brand" :disabled="accountsCard.loginDisabled">
<button :disabled="accountsCard.loginDisabled" @click="login">
<LogInIcon v-if="!accountsCard.loginDisabled" />
<SpinnerIcon v-else class="animate-spin" />
Sign In
</button>
</ButtonStyled>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
$skin-card-width: 155px;
$skin-card-gap: 4px;
.skin-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
gap: 2.5rem;
@media (max-width: 700px) {
grid-template-columns: 1fr;
}
}
.preview-panel {
top: 1.5rem;
position: sticky;
align-self: start;
padding: 0.5rem;
padding-top: 0;
}
.preview-container {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
margin-left: calc((2.5rem / 2));
@media (max-width: 700px) {
height: 50vh;
}
}
.skins-container {
padding-top: 0.5rem;
}
.skin-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: $skin-card-gap;
width: 100%;
@media (min-width: 1300px) {
grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 1750px) {
grid-template-columns: repeat(5, 1fr);
}
@media (min-width: 2050px) {
grid-template-columns: repeat(6, 1fr);
}
}
.skin-card {
aspect-ratio: 0.95;
border-radius: 10px;
box-sizing: border-box;
width: 100%;
min-width: 0;
}
</style>
+1 -2
View File
@@ -1,6 +1,5 @@
import Index from './Index.vue'
import Browse from './Browse.vue'
import Worlds from './Worlds.vue'
import Skins from './Skins.vue'
export { Index, Browse, Worlds, Skins }
export { Index, Browse, Worlds }
-8
View File
@@ -34,14 +34,6 @@ export default new createRouter({
breadcrumb: [{ name: 'Discover content' }],
},
},
{
path: '/skins',
name: 'Skins',
component: Pages.Skins,
meta: {
breadcrumb: [{ name: 'Skins' }],
},
},
{
path: '/library',
name: 'Library',
-1
View File
@@ -41,7 +41,6 @@ export default {
green: 'var(--color-green-highlight)',
blue: 'var(--color-blue-highlight)',
purple: 'var(--color-purple-highlight)',
gray: 'var(--color-gray-highlight)',
},
divider: {
DEFAULT: 'var(--color-divider)',
-1
View File
@@ -10,7 +10,6 @@
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"resolveJsonModule": true,
"strict": true
},
+3 -20
View File
@@ -4,8 +4,6 @@ import svgLoader from 'vite-svg-loader'
import vue from '@vitejs/plugin-vue'
import tauriConf from '../app/tauri.conf.json'
const projectRootDir = resolve(__dirname)
// https://vitejs.dev/config/
@@ -43,32 +41,17 @@ export default defineConfig({
server: {
port: 1420,
strictPort: true,
headers: {
'content-security-policy': Object.entries(tauriConf.app.security.csp)
.map(([directive, sources]) => {
// An additional websocket connect-src is required for Vite dev tools to work
if (directive === 'connect-src') {
sources = Array.isArray(sources) ? sources : [sources]
sources.push('ws://localhost:1420')
}
return Array.isArray(sources)
? `${directive} ${sources.join(' ')}`
: `${directive} ${sources}`
})
.join('; '),
},
},
// to make use of `TAURI_ENV_DEBUG` and other env variables
// https://v2.tauri.app/reference/environment-variables/#tauri-cli-hook-commands
envPrefix: ['VITE_', 'TAURI_'],
build: {
// Tauri supports es2021
target: process.env.TAURI_ENV_PLATFORM == 'windows' ? 'chrome105' : 'safari13', // eslint-disable-line turbo/no-undeclared-env-vars
target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13', // eslint-disable-line turbo/no-undeclared-env-vars
// don't minify for debug builds
minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false, // eslint-disable-line turbo/no-undeclared-env-vars
minify: !process.env.TAURI_DEBUG ? 'esbuild' : false, // eslint-disable-line turbo/no-undeclared-env-vars
// produce sourcemaps for debug builds
sourcemap: !!process.env.TAURI_ENV_DEBUG, // eslint-disable-line turbo/no-undeclared-env-vars
sourcemap: !!process.env.TAURI_DEBUG, // eslint-disable-line turbo/no-undeclared-env-vars
commonjsOptions: {
esmExternals: true,
},
+1 -4
View File
@@ -27,10 +27,7 @@ pub async fn authenticate_run() -> theseus::Result<Credentials> {
let credentials = minecraft_auth::finish_login(&input, login).await?;
println!(
"Logged in user {}.",
credentials.maybe_online_profile().await.name
);
println!("Logged in user {}.", credentials.username);
Ok(credentials)
}
+4
View File
@@ -1,2 +1,6 @@
# Generated by Cargo
# will have compiled files and executables
/target/
# Generated by tauri, metadata generated at compile time
/gen/
+7 -8
View File
@@ -1,6 +1,6 @@
[package]
name = "theseus_gui"
version = "1.0.0-local" # The actual version is set by the theseus-build workflow on tagging
version = "0.9.5"
description = "The Modrinth App is a desktop application for managing your Minecraft mods"
license = "GPL-3.0-only"
repository = "https://github.com/modrinth/code/apps/app/"
@@ -17,14 +17,13 @@ serde = { workspace = true, features = ["derive"] }
serde_with.workspace = true
tauri = { workspace = true, features = ["devtools", "macos-private-api", "protocol-asset"] }
tauri-plugin-deep-link.workspace = true
tauri-plugin-dialog.workspace = true
tauri-plugin-http.workspace = true
tauri-plugin-opener.workspace = true
tauri-plugin-os.workspace = true
tauri-plugin-single-instance.workspace = true
tauri-plugin-updater.workspace = true
tauri-plugin-window-state.workspace = true
tauri-plugin-deep-link.workspace = true
tauri-plugin-os.workspace = true
tauri-plugin-opener.workspace = true
tauri-plugin-dialog.workspace = true
tauri-plugin-updater.workspace = true
tauri-plugin-single-instance.workspace = true
tokio = { workspace = true, features = ["time"] }
thiserror.workspace = true
-20
View File
@@ -18,25 +18,5 @@
<string>A Minecraft mod wants to access your camera.</string>
<key>NSMicrophoneUsageDescription</key>
<string>A Minecraft mod wants to access your microphone.</string>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>asset.localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
<key>NSIncludesSubdomains</key>
<true/>
</dict>
<key>textures.minecraft.net</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
<key>NSIncludesSubdomains</key>
<true/>
</dict>
</dict>
</dict>
</dict>
</plist>
+1 -18
View File
@@ -99,24 +99,6 @@ fn main() {
DefaultPermissionRule::AllowAllCommands,
),
)
.plugin(
"minecraft-skins",
InlinedPlugin::new()
.commands(&[
"get_available_capes",
"get_available_skins",
"add_and_equip_custom_skin",
"set_default_cape",
"equip_skin",
"remove_custom_skin",
"unequip_skin",
"normalize_skin_texture",
"get_dragged_skin_data",
])
.default_permission(
DefaultPermissionRule::AllowAllCommands,
),
)
.plugin(
"mr-auth",
InlinedPlugin::new()
@@ -169,6 +151,7 @@ fn main() {
"profile_update_managed_modrinth_version",
"profile_repair_managed_modrinth",
"profile_run",
"profile_run_credentials",
"profile_kill",
"profile_edit",
"profile_edit_icon",
-9
View File
@@ -19,21 +19,12 @@
"window-state:default",
"window-state:allow-restore-state",
"window-state:allow-save-window-state",
{
"identifier": "http:default",
"allow": [
{ "url": "https://modrinth.com/*" },
{ "url": "https://*.modrinth.com/*" }
]
},
"auth:default",
"import:default",
"jre:default",
"logs:default",
"metadata:default",
"minecraft-skins:default",
"mr-auth:default",
"profile-create:default",
"pack:default",
-104
View File
@@ -1,104 +0,0 @@
use crate::api::Result;
use std::path::Path;
use theseus::minecraft_skins::{
self, Bytes, Cape, MinecraftSkinVariant, Skin, UrlOrBlob,
};
pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
tauri::plugin::Builder::new("minecraft-skins")
.invoke_handler(tauri::generate_handler![
get_available_capes,
get_available_skins,
add_and_equip_custom_skin,
set_default_cape,
equip_skin,
remove_custom_skin,
unequip_skin,
normalize_skin_texture,
get_dragged_skin_data,
])
.build()
}
/// `invoke('plugin:minecraft-skins|get_available_capes')`
///
/// See also: [minecraft_skins::get_available_capes]
#[tauri::command]
pub async fn get_available_capes() -> Result<Vec<Cape>> {
Ok(minecraft_skins::get_available_capes().await?)
}
/// `invoke('plugin:minecraft-skins|get_available_skins')`
///
/// See also: [minecraft_skins::get_available_skins]
#[tauri::command]
pub async fn get_available_skins() -> Result<Vec<Skin>> {
Ok(minecraft_skins::get_available_skins().await?)
}
/// `invoke('plugin:minecraft-skins|add_and_equip_custom_skin', texture_blob, variant, cape_override)`
///
/// See also: [minecraft_skins::add_and_equip_custom_skin]
#[tauri::command]
pub async fn add_and_equip_custom_skin(
texture_blob: Bytes,
variant: MinecraftSkinVariant,
cape_override: Option<Cape>,
) -> Result<()> {
Ok(minecraft_skins::add_and_equip_custom_skin(
texture_blob,
variant,
cape_override,
)
.await?)
}
/// `invoke('plugin:minecraft-skins|set_default_cape', cape)`
///
/// See also: [minecraft_skins::set_default_cape]
#[tauri::command]
pub async fn set_default_cape(cape: Option<Cape>) -> Result<()> {
Ok(minecraft_skins::set_default_cape(cape).await?)
}
/// `invoke('plugin:minecraft-skins|equip_skin', skin)`
///
/// See also: [minecraft_skins::equip_skin]
#[tauri::command]
pub async fn equip_skin(skin: Skin) -> Result<()> {
Ok(minecraft_skins::equip_skin(skin).await?)
}
/// `invoke('plugin:minecraft-skins|remove_custom_skin', skin)`
///
/// See also: [minecraft_skins::remove_custom_skin]
#[tauri::command]
pub async fn remove_custom_skin(skin: Skin) -> Result<()> {
Ok(minecraft_skins::remove_custom_skin(skin).await?)
}
/// `invoke('plugin:minecraft-skins|unequip_skin')`
///
/// See also: [minecraft_skins::unequip_skin]
#[tauri::command]
pub async fn unequip_skin() -> Result<()> {
Ok(minecraft_skins::unequip_skin().await?)
}
/// `invoke('plugin:minecraft-skins|normalize_skin_texture')`
///
/// See also: [minecraft_skins::normalize_skin_texture]
#[tauri::command]
pub async fn normalize_skin_texture(texture: UrlOrBlob) -> Result<Bytes> {
Ok(minecraft_skins::normalize_skin_texture(&texture).await?)
}
/// `invoke('plugin:minecraft-skins|get_dragged_skin_data', path)`
///
/// See also: [minecraft_skins::get_dragged_skin_data]
#[tauri::command]
pub async fn get_dragged_skin_data(path: String) -> Result<Bytes> {
let path = Path::new(&path);
Ok(minecraft_skins::get_dragged_skin_data(path).await?)
}
-1
View File
@@ -7,7 +7,6 @@ pub mod import;
pub mod jre;
pub mod logs;
pub mod metadata;
pub mod minecraft_skins;
pub mod mr_auth;
pub mod pack;
pub mod process;
+17
View File
@@ -28,6 +28,7 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
profile_update_managed_modrinth_version,
profile_repair_managed_modrinth,
profile_run,
profile_run_credentials,
profile_kill,
profile_edit,
profile_edit_icon,
@@ -255,6 +256,22 @@ pub async fn profile_run(path: &str) -> Result<ProcessMetadata> {
Ok(process)
}
// Run Minecraft using a profile using chosen credentials
// Returns the UUID, which can be used to poll
// for the actual Child in the state.
// invoke('plugin:profile|profile_run_credentials', {path, credentials})')
#[tauri::command]
pub async fn profile_run_credentials(
path: &str,
credentials: Credentials,
) -> Result<ProcessMetadata> {
let process =
profile::run_credentials(path, &credentials, &QuickPlayType::None)
.await?;
Ok(process)
}
#[tauri::command]
pub async fn profile_kill(path: &str) -> Result<()> {
profile::kill(path).await?;
-2
View File
@@ -183,7 +183,6 @@ fn main() {
let _ = win.set_focus();
}
}))
.plugin(tauri_plugin_http::init())
.plugin(tauri_plugin_os::init())
.plugin(tauri_plugin_dialog::init())
.plugin(tauri_plugin_deep_link::init())
@@ -249,7 +248,6 @@ fn main() {
.plugin(api::logs::init())
.plugin(api::jre::init())
.plugin(api::metadata::init())
.plugin(api::minecraft_skins::init())
.plugin(api::pack::init())
.plugin(api::process::init())
.plugin(api::profile::init())
+3 -3
View File
@@ -41,7 +41,7 @@
]
},
"productName": "Modrinth App",
"version": "../app-frontend/package.json",
"version": "0.9.5",
"mainBinaryName": "Modrinth App",
"identifier": "ModrinthApp",
"plugins": {
@@ -86,9 +86,9 @@
"capabilities": ["ads", "core", "plugins"],
"csp": {
"default-src": "'self' customprotocol: asset:",
"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs 'self' data: blob:",
"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs",
"font-src": ["https://cdn-raw.modrinth.com/fonts/"],
"img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost http://textures.minecraft.net blob: data:",
"img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost blob: data:",
"style-src": "'unsafe-inline' 'self'",
"script-src": "https://*.posthog.com 'self'",
"frame-src": "https://www.youtube.com https://www.youtube-nocookie.com https://discord.com 'self'",
+1 -1
View File
@@ -1,4 +1,4 @@
FROM rust:1.88.0 AS build
FROM rust:1.87.0 AS build
ENV PKG_CONFIG_ALLOW_CROSS=1
WORKDIR /usr/src/daedalus
+1 -1
View File
@@ -68,7 +68,7 @@
Support: https://support.modrinth.com
Status page: https://status.modrinth.com
Roadmap: https://roadmap.modrinth.com
Blog and newsletter: https://modrinth.com/news
Blog and newsletter: https://blog.modrinth.com/subscribe?utm_medium=social&utm_source=discord&utm_campaign=welcome
API documentation: https://docs.modrinth.com
Modrinth source code: https://github.com/modrinth
Help translate Modrinth: https://crowdin.com/project/modrinth
+1 -2
View File
@@ -40,9 +40,7 @@
"@modrinth/assets": "workspace:*",
"@modrinth/ui": "workspace:*",
"@modrinth/utils": "workspace:*",
"@modrinth/blog": "workspace:*",
"@pinia/nuxt": "^0.5.1",
"@types/three": "^0.172.0",
"@vintl/vintl": "^4.4.1",
"@vueuse/core": "^11.1.0",
"ace-builds": "^1.36.2",
@@ -61,6 +59,7 @@
"qrcode.vue": "^3.4.0",
"semver": "^7.5.4",
"three": "^0.172.0",
"@types/three": "^0.172.0",
"vue-multiselect": "3.0.0-alpha.2",
"vue-typed-virtual-list": "^1.0.10",
"vue3-ace-editor": "^2.2.4",
@@ -1,20 +1,15 @@
<template>
<div class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
<nuxt-link
to="/servers"
class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
>
<img
src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-light.webp"
alt="Host your next server with Modrinth Servers"
class="light-image hidden rounded-[inherit]"
/>
<img
src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
alt="Host your next server with Modrinth Servers"
class="dark-image rounded-[inherit]"
/>
</nuxt-link>
<div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
<p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
<nuxt-link to="/plus" class="mt-auto items-center gap-1 text-purple hover:underline">
<span>
Support creators and Modrinth ad-free with
<span class="font-bold">Modrinth+</span>
</span>
<ChevronRightIcon class="relative top-[3px] h-5 w-5" />
</nuxt-link>
</div>
<div
class="absolute top-0 flex items-center justify-center overflow-hidden rounded-2xl bg-bg-raised"
>
@@ -23,6 +18,8 @@
</div>
</template>
<script setup>
import { ChevronRightIcon } from "@modrinth/assets";
useHead({
script: [
// {
@@ -140,16 +137,3 @@ iframe[id^="google_ads_iframe"] {
}
}
</style>
<style lang="scss" scoped>
.light,
.light-mode {
.dark-image {
display: none;
}
.light-image {
display: block;
}
}
</style>
@@ -9,7 +9,7 @@
</h1>
<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
<button v-tooltip="`Exit moderation`" @click="exitModeration">
<XIcon />
<CrossIcon />
</button>
</ButtonStyled>
<ButtonStyled circular>
@@ -306,7 +306,7 @@
<div class="flex items-center gap-2">
<ButtonStyled v-if="!done">
<button aria-label="Skip" @click="goToNextProject">
<XIcon aria-hidden="true" />
<ExitIcon aria-hidden="true" />
<template v-if="futureProjects.length > 0">Skip</template>
<template v-else>Exit</template>
</button>
@@ -335,7 +335,7 @@
<div class="joined-buttons">
<ButtonStyled color="red">
<button @click="sendMessage('rejected')">
<XIcon aria-hidden="true" /> Reject
<CrossIcon aria-hidden="true" /> Reject
</button>
</ButtonStyled>
<ButtonStyled color="red">
@@ -373,8 +373,9 @@ import {
UpdatedIcon,
CheckIcon,
DropdownIcon,
XIcon as CrossIcon,
EyeOffIcon,
XIcon,
ExitIcon,
ScaleIcon,
} from "@modrinth/assets";
import { ButtonStyled, MarkdownEditor, OverflowMenu, Collapsible } from "@modrinth/ui";
@@ -1,51 +0,0 @@
<script setup lang="ts">
import { ButtonStyled } from "@modrinth/ui";
import { MailIcon, CheckIcon } from "@modrinth/assets";
import { ref, watchEffect } from "vue";
import { useBaseFetch } from "~/composables/fetch.js";
const auth = await useAuth();
const showSubscriptionConfirmation = ref(false);
const subscribed = ref(false);
async function checkSubscribed() {
if (auth.value?.user) {
try {
const { data } = await useBaseFetch("auth/email/subscribe", {
method: "GET",
});
subscribed.value = data?.subscribed || false;
} catch {
subscribed.value = false;
}
}
}
watchEffect(() => {
checkSubscribed();
});
async function subscribe() {
try {
await useBaseFetch("auth/email/subscribe", {
method: "POST",
});
showSubscriptionConfirmation.value = true;
} catch {
} finally {
setTimeout(() => {
showSubscriptionConfirmation.value = false;
subscribed.value = true;
}, 2500);
}
}
</script>
<template>
<ButtonStyled v-if="auth?.user && !subscribed" color="brand" type="outlined">
<button v-tooltip="`Subscribe to the Modrinth newsletter`" @click="subscribe">
<template v-if="!showSubscriptionConfirmation"> <MailIcon /> Subscribe </template>
<template v-else> <CheckIcon /> Subscribed! </template>
</button>
</ButtonStyled>
</template>
@@ -1,86 +0,0 @@
<template>
<div class="flex gap-2">
<ButtonStyled circular>
<a
v-tooltip="`Share on Bluesky`"
:href="`https://bsky.app/intent/compose?text=${encodedUrl}`"
target="_blank"
>
<BlueskyIcon />
</a>
</ButtonStyled>
<ButtonStyled circular>
<a
v-tooltip="`Share on Mastodon`"
:href="`https://tootpick.org/#text=${encodedUrl}`"
target="_blank"
>
<MastodonIcon />
</a>
</ButtonStyled>
<ButtonStyled circular>
<a
v-tooltip="`Share on X`"
:href="`https://www.x.com/intent/post?url=${encodedUrl}`"
target="_blank"
>
<TwitterIcon />
</a>
</ButtonStyled>
<ButtonStyled circular>
<a
v-tooltip="`Share via email`"
:href="`mailto:${encodedTitle ? `?subject=${encodedTitle}&` : `?`}body=${encodedUrl}`"
target="_blank"
>
<MailIcon />
</a>
</ButtonStyled>
<ButtonStyled circular>
<button
v-tooltip="copied ? `Copied to clipboard` : `Copy link`"
:disabled="copied"
class="relative grid place-items-center overflow-hidden"
@click="copyToClipboard(url)"
>
<CheckIcon
class="absolute transition-all ease-in-out"
:class="copied ? 'translate-y-0' : 'translate-y-7'"
/>
<LinkIcon
class="absolute transition-all ease-in-out"
:class="copied ? '-translate-y-7' : 'translate-y-0'"
/>
</button>
</ButtonStyled>
</div>
</template>
<script setup lang="ts">
import {
BlueskyIcon,
CheckIcon,
LinkIcon,
MailIcon,
MastodonIcon,
TwitterIcon,
} from "@modrinth/assets";
import { ButtonStyled } from "@modrinth/ui";
const props = defineProps<{
title?: string;
url: string;
}>();
const copied = ref(false);
const encodedUrl = computed(() => encodeURIComponent(props.url));
const encodedTitle = computed(() => (props.title ? encodeURIComponent(props.title) : undefined));
async function copyToClipboard(text: string) {
await navigator.clipboard.writeText(text);
copied.value = true;
setTimeout(() => {
copied.value = false;
}, 3000);
}
</script>
@@ -1,49 +0,0 @@
<template>
<div class="mx-2 p-4 !py-8 sm:mx-8 sm:p-32">
<div class="my-8 flex items-center justify-between">
<h2 class="m-0 mx-auto text-3xl font-extrabold sm:text-4xl">Latest news from Modrinth</h2>
</div>
<div v-if="latestArticles" class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
<div
v-for="(article, index) in latestArticles"
:key="article.slug"
:class="{ 'max-xl:hidden': index === 2 }"
>
<NewsArticleCard :article="article" />
</div>
</div>
<div class="mx-2 my-8 flex w-full items-center justify-center">
<ButtonStyled color="brand" size="large">
<nuxt-link to="/news">
<NewspaperIcon />
View all news
</nuxt-link>
</ButtonStyled>
</div>
</div>
</template>
<script setup lang="ts">
import { NewspaperIcon } from "@modrinth/assets";
import { articles as rawArticles } from "@modrinth/blog";
import { ButtonStyled, NewsArticleCard } from "@modrinth/ui";
import { ref, computed } from "vue";
const articles = ref(
rawArticles
.map((article) => ({
...article,
path: `/news/article/${article.slug}/`,
thumbnail: article.thumbnail
? `/news/article/${article.slug}/thumbnail.webp`
: `/news/default.webp`,
title: article.title,
summary: article.summary,
date: article.date,
}))
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
);
const latestArticles = computed(() => articles.value.slice(0, 3));
</script>
@@ -2,7 +2,7 @@
<NewModal ref="modModal" :header="`Editing ${type.toLocaleLowerCase()} version`">
<template #title>
<div class="flex min-w-full items-center gap-2 md:w-[calc(420px-5.5rem)]">
<Avatar :src="modDetails?.icon_url" size="48px" :alt="`${modDetails?.name} Icon`" />
<UiAvatar :src="modDetails?.icon_url" size="48px" :alt="`${modDetails?.name} Icon`" />
<span class="truncate text-xl font-extrabold text-contrast">{{ modDetails?.name }}</span>
</div>
</template>
@@ -185,7 +185,7 @@
Something went wrong trying to load versions for this {{ type.toLocaleLowerCase() }}.
Please try again later or contact support if the issue persists.
</span>
<CopyCode class="!mt-2 !break-all" :text="versionsError" />
<LazyUiCopyCode class="!mt-2 !break-all" :text="versionsError" />
</div>
</Admonition>
@@ -236,7 +236,7 @@ import {
GameIcon,
ExternalIcon,
} from "@modrinth/assets";
import { Admonition, Avatar, ButtonStyled, CopyCode, NewModal } from "@modrinth/ui";
import { Admonition, ButtonStyled, NewModal } from "@modrinth/ui";
import TagItem from "@modrinth/ui/src/components/base/TagItem.vue";
import { ref, computed } from "vue";
import { formatCategory, formatVersionsForDisplay, type Mod, type Version } from "@modrinth/utils";
@@ -1,176 +1,124 @@
<template>
<NewModal ref="mrpackModal" header="Uploading mrpack" :closable="!isLoading" @show="onShow">
<NewModal ref="mrpackModal" header="Uploading mrpack" @hide="onHide" @show="onShow">
<div class="flex flex-col gap-4 md:w-[600px]">
<Transition
enter-active-class="transition-all duration-300 ease-out"
enter-from-class="opacity-0 max-h-0"
enter-to-class="opacity-100 max-h-20"
leave-active-class="transition-all duration-200 ease-in"
leave-from-class="opacity-100 max-h-20"
leave-to-class="opacity-0 max-h-0"
<p
v-if="isMrpackModalSecondPhase"
:style="{
lineHeight: isMrpackModalSecondPhase ? '1.5' : undefined,
marginBottom: isMrpackModalSecondPhase ? '-12px' : '0',
marginTop: isMrpackModalSecondPhase ? '-4px' : '-2px',
}"
>
<div v-if="isLoading" class="w-full">
<div class="mb-2 flex justify-between text-sm">
<Transition name="phrase-fade" mode="out-in">
<span :key="currentPhrase" class="text-lg font-medium text-contrast">{{
currentPhrase
}}</span>
</Transition>
<div class="flex flex-col items-end">
<span class="text-secondary">{{ Math.round(uploadProgress) }}%</span>
<span class="text-xs text-secondary"
>{{ formatBytes(uploadedBytes) }} / {{ formatBytes(totalBytes) }}</span
>
</div>
</div>
<div class="h-2 w-full rounded-full bg-divider">
<div
class="h-2 animate-pulse rounded-full bg-brand transition-all duration-300 ease-out"
:style="{ width: `${uploadProgress}%` }"
></div>
</div>
</div>
</Transition>
<Transition
enter-active-class="transition-all duration-300 ease-out"
enter-from-class="opacity-0 max-h-0"
enter-to-class="opacity-100 max-h-20"
leave-active-class="transition-all duration-200 ease-in"
leave-from-class="opacity-100 max-h-20"
leave-to-class="opacity-0 max-h-0"
>
<div v-if="!isLoading" class="flex flex-col gap-4">
<p
v-if="isMrpackModalSecondPhase"
:style="{
lineHeight: isMrpackModalSecondPhase ? '1.5' : undefined,
marginBottom: isMrpackModalSecondPhase ? '-12px' : '0',
marginTop: isMrpackModalSecondPhase ? '-4px' : '-2px',
}"
This will reinstall your server and erase all data. You may want to back up your server
before proceeding. Are you sure you want to continue?
</p>
<div v-if="!isMrpackModalSecondPhase" class="flex flex-col gap-4">
<div class="mx-auto flex flex-row items-center gap-4">
<div
class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
>
This will reinstall your server and erase all data. You may want to back up your server
before proceeding. Are you sure you want to continue?
</p>
<div v-if="!isMrpackModalSecondPhase" class="flex flex-col gap-4">
<div class="mx-auto flex flex-row items-center gap-4">
<div
class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
>
<UploadIcon class="size-10" />
</div>
<ArrowBigRightDashIcon class="size-10" />
<div
class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
>
<ServerIcon class="size-10" />
</div>
</div>
<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
<div class="text-sm font-bold text-contrast">Upload mrpack</div>
<input
type="file"
accept=".mrpack"
class=""
:disabled="isLoading"
@change="uploadMrpack"
/>
</div>
<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
<div class="flex w-full flex-row items-center justify-between">
<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
Erase all data
</label>
<input
id="hard-reset"
v-model="hardReset"
class="switch stylized-toggle shrink-0"
type="checkbox"
/>
</div>
<div>
Removes all data on your server, including your worlds, mods, and configuration
files, then reinstalls it with the selected version.
</div>
<div class="font-bold">
This does not affect your backups, which are stored off-site.
</div>
</div>
<BackupWarning :backup-link="`/servers/manage/${props.server?.serverId}/backups`" />
<UploadIcon class="size-10" />
</div>
<div class="mt-4 flex justify-start gap-4">
<ButtonStyled :color="isDangerous ? 'red' : 'brand'">
<button
v-tooltip="backupInProgress ? backupInProgress.tooltip : undefined"
:disabled="canInstall || !!backupInProgress"
@click="handleReinstall"
>
<RightArrowIcon />
{{
isMrpackModalSecondPhase
? "Erase and install"
: loadingServerCheck
? "Loading..."
: isDangerous
? "Erase and install"
: "Install"
}}
</button>
</ButtonStyled>
<ButtonStyled>
<button
:disabled="isLoading"
@click="
() => {
if (isMrpackModalSecondPhase) {
isMrpackModalSecondPhase = false;
} else {
hide();
}
}
"
>
<XIcon />
{{ isMrpackModalSecondPhase ? "Go back" : "Cancel" }}
</button>
</ButtonStyled>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-10"
>
<path d="M5 9v6" />
<path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
</svg>
<div
class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
>
<ServerIcon class="size-10" />
</div>
</div>
</Transition>
<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
<div class="text-sm font-bold text-contrast">Upload mrpack</div>
<input
type="file"
accept=".mrpack"
class=""
:disabled="isLoading"
@change="uploadMrpack"
/>
</div>
<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
<div class="flex w-full flex-row items-center justify-between">
<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
Erase all data
</label>
<input
id="hard-reset"
v-model="hardReset"
class="switch stylized-toggle shrink-0"
type="checkbox"
/>
</div>
<div>
Removes all data on your server, including your worlds, mods, and configuration files,
then reinstalls it with the selected version.
</div>
<div class="font-bold">This does not affect your backups, which are stored off-site.</div>
</div>
<BackupWarning :backup-link="`/servers/manage/${props.server?.serverId}/backups`" />
</div>
<div class="mt-4 flex justify-start gap-4">
<ButtonStyled :color="isDangerous ? 'red' : 'brand'">
<button
v-tooltip="backupInProgress ? formatMessage(backupInProgress.tooltip) : undefined"
:disabled="canInstall || backupInProgress"
@click="handleReinstall"
>
<RightArrowIcon />
{{
isMrpackModalSecondPhase
? "Erase and install"
: loadingServerCheck
? "Loading..."
: isDangerous
? "Erase and install"
: "Install"
}}
</button>
</ButtonStyled>
<ButtonStyled>
<button
:disabled="isLoading"
@click="
() => {
if (isMrpackModalSecondPhase) {
isMrpackModalSecondPhase = false;
} else {
hide();
}
}
"
>
<XIcon />
{{ isMrpackModalSecondPhase ? "Go back" : "Cancel" }}
</button>
</ButtonStyled>
</div>
</div>
</NewModal>
</template>
<script setup lang="ts">
import { BackupWarning, ButtonStyled, NewModal } from "@modrinth/ui";
import {
UploadIcon,
RightArrowIcon,
XIcon,
ServerIcon,
ArrowBigRightDashIcon,
} from "@modrinth/assets";
import { formatBytes, ModrinthServersFetchError } from "@modrinth/utils";
import { onMounted, onUnmounted } from "vue";
import { UploadIcon, RightArrowIcon, XIcon, ServerIcon } from "@modrinth/assets";
import { ModrinthServersFetchError } from "@modrinth/utils";
import type { BackupInProgressReason } from "~/pages/servers/manage/[id].vue";
import type { ModrinthServer } from "~/composables/servers/modrinth-servers";
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
if (isLoading.value) {
event.preventDefault();
return "Upload in progress. Are you sure you want to leave?";
}
};
onMounted(() => {
window.addEventListener("beforeunload", handleBeforeUnload);
});
onUnmounted(() => {
window.removeEventListener("beforeunload", handleBeforeUnload);
});
import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
const props = defineProps<{
server: ModrinthServer;
@@ -187,49 +135,6 @@ const hardReset = ref(false);
const isLoading = ref(false);
const loadingServerCheck = ref(false);
const mrpackFile = ref<File | null>(null);
const uploadProgress = ref(0);
const uploadedBytes = ref(0);
const totalBytes = ref(0);
const uploadPhrases = [
"Removing Herobrine...",
"Feeding parrots...",
"Teaching villagers new trades...",
"Convincing creepers to be friendly...",
"Polishing diamonds...",
"Training wolves to fetch...",
"Building pixel art...",
"Explaining redstone to beginners...",
"Collecting all the cats...",
"Negotiating with endermen...",
"Planting suspicious stew ingredients...",
"Calibrating TNT blast radius...",
"Teaching chickens to fly...",
"Sorting inventory alphabetically...",
"Convincing iron golems to smile...",
];
const currentPhrase = ref("Uploading...");
let phraseInterval: NodeJS.Timeout | null = null;
const usedPhrases = ref(new Set<number>());
const getNextPhrase = () => {
if (usedPhrases.value.size >= uploadPhrases.length) {
const currentPhraseIndex = uploadPhrases.indexOf(currentPhrase.value);
usedPhrases.value.clear();
if (currentPhraseIndex !== -1) {
usedPhrases.value.add(currentPhraseIndex);
}
}
const availableIndices = uploadPhrases
.map((_, index) => index)
.filter((index) => !usedPhrases.value.has(index));
const randomIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)];
usedPhrases.value.add(randomIndex);
return uploadPhrases[randomIndex];
};
const isDangerous = computed(() => hardReset.value);
const canInstall = computed(() => !mrpackFile.value || isLoading.value || loadingServerCheck.value);
@@ -248,46 +153,18 @@ const handleReinstall = async () => {
return;
}
if (!mrpackFile.value) {
addNotification({
group: "server",
title: "No file selected",
text: "Choose a .mrpack file before installing.",
type: "error",
});
return;
}
isLoading.value = true;
uploadProgress.value = 0;
uploadProgress.value = 0;
uploadedBytes.value = 0;
totalBytes.value = mrpackFile.value.size;
currentPhrase.value = getNextPhrase();
phraseInterval = setInterval(() => {
currentPhrase.value = getNextPhrase();
}, 4500);
const { onProgress, promise } = props.server.general.reinstallFromMrpack(
mrpackFile.value,
hardReset.value,
);
onProgress(({ loaded, total, progress }) => {
uploadProgress.value = progress;
uploadedBytes.value = loaded;
totalBytes.value = total;
if (phraseInterval && progress >= 100) {
clearInterval(phraseInterval);
phraseInterval = null;
currentPhrase.value = "Installing modpack...";
}
});
try {
await promise;
if (!mrpackFile.value) {
throw new Error("No mrpack file selected");
}
const mrpack = new File([mrpackFile.value], mrpackFile.value.name, {
type: mrpackFile.value.type,
});
await props.server.general?.reinstallFromMrpack(mrpack, hardReset.value);
emit("reinstall", {
loader: "mrpack",
@@ -299,44 +176,36 @@ const handleReinstall = async () => {
window.scrollTo(0, 0);
hide();
} catch (error) {
if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
if (error instanceof ModrinthServersFetchError && error?.statusCode === 429) {
addNotification({
group: "server",
title: "Cannot upload and install modpack to server",
title: "Cannot reinstall server",
text: "You are being rate limited. Please try again later.",
type: "error",
});
} else {
addNotification({
group: "server",
title: "Modpack upload and install failed",
text: "An unexpected error occurred while uploading/installing. Please try again later.",
title: "Reinstall Failed",
text: "An unexpected error occurred while reinstalling. Please try again later.",
type: "error",
});
}
} finally {
isLoading.value = false;
if (phraseInterval) {
clearInterval(phraseInterval);
phraseInterval = null;
}
}
};
const onShow = () => {
hardReset.value = false;
isMrpackModalSecondPhase.value = false;
loadingServerCheck.value = false;
isLoading.value = false;
mrpackFile.value = null;
uploadProgress.value = 0;
uploadedBytes.value = 0;
totalBytes.value = 0;
currentPhrase.value = "Uploading...";
usedPhrases.value.clear();
if (phraseInterval) {
clearInterval(phraseInterval);
phraseInterval = null;
}
};
const onHide = () => {
onShow();
};
const show = () => mrpackModal.value?.show();
@@ -349,14 +218,4 @@ defineExpose({ show, hide });
.stylized-toggle:checked::after {
background: var(--color-accent-contrast) !important;
}
.phrase-fade-enter-active,
.phrase-fade-leave-active {
transition: opacity 0.3s ease;
}
.phrase-fade-enter-from,
.phrase-fade-leave-to {
opacity: 0;
}
</style>
@@ -33,7 +33,7 @@
v-if="projectData?.title"
class="m-0 flex flex-row items-center gap-2 text-sm font-medium text-secondary"
>
<Avatar
<UiAvatar
:src="iconUrl"
no-shadow
style="min-height: 20px; min-width: 20px; height: 20px; width: 20px"
@@ -74,7 +74,7 @@
<UiServersIconsPanelErrorIcon class="!size-5" /> Your server has been suspended. Please
update your billing information or contact Modrinth Support for more information.
</div>
<CopyCode :text="`${props.server_id}`" class="ml-auto" />
<UiCopyCode :text="`${props.server_id}`" class="ml-auto" />
</div>
</NuxtLink>
</template>
@@ -83,7 +83,6 @@
import { ChevronRightIcon, LockIcon, SparklesIcon } from "@modrinth/assets";
import type { Project, Server } from "@modrinth/utils";
import { useModrinthServers } from "~/composables/servers/modrinth-servers.ts";
import { Avatar, CopyCode } from "@modrinth/ui";
const props = defineProps<Partial<Server>>();
@@ -50,7 +50,9 @@
</ClientOnly>
</div>
</div>
<nuxt-link
<component
:is="loading ? 'div' : 'NuxtLink'"
:to="loading ? undefined : `/servers/manage/${serverId}/files`"
class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
:class="loading ? '' : 'transition-transform duration-100 hover:scale-105 active:scale-100'"
@@ -62,17 +64,16 @@
</div>
<h3 class="text-base font-normal text-secondary">Storage usage</h3>
<FolderOpenIcon class="absolute right-10 top-10 size-8" />
</nuxt-link>
</component>
</div>
</template>
<script setup lang="ts">
import { ref, computed, shallowRef } from "vue";
import { FolderOpenIcon, CpuIcon, DatabaseIcon, IssuesIcon } from "@modrinth/assets";
import { FolderOpenIcon, CPUIcon, DatabaseIcon, IssuesIcon } from "@modrinth/assets";
import { useStorage } from "@vueuse/core";
import type { Stats } from "@modrinth/utils";
const flags = useFeatureFlags();
const route = useNativeRoute();
const serverId = route.params.id;
const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
@@ -126,7 +127,7 @@ const metrics = computed(() => {
title: "CPU usage",
value: "0.00%",
max: "100%",
icon: CpuIcon,
icon: CPUIcon,
data: cpuData.value,
showGraph: false,
warning: null,
@@ -157,21 +158,17 @@ const metrics = computed(() => {
title: "CPU usage",
value: `${cpuPercent.toFixed(2)}%`,
max: "100%",
icon: CpuIcon,
icon: CPUIcon,
data: cpuData.value,
showGraph: true,
warning: cpuPercent >= 90 ? "CPU usage is very high" : null,
},
{
title: "Memory usage",
value:
userPreferences.value.ramAsNumber || flags.developerMode
? formatBytes(stats.value.ram_usage_bytes)
: `${ramPercent.toFixed(2)}%`,
max:
userPreferences.value.ramAsNumber || flags.developerMode
? formatBytes(stats.value.ram_total_bytes)
: "100%",
value: userPreferences.value.ramAsNumber
? formatBytes(stats.value.ram_usage_bytes)
: `${ramPercent.toFixed(2)}%`,
max: userPreferences.value.ramAsNumber ? formatBytes(stats.value.ram_total_bytes) : "100%",
icon: DatabaseIcon,
data: ramData.value,
showGraph: true,
+12 -20
View File
@@ -1,26 +1,18 @@
const formatters = new WeakMap<object, Intl.NumberFormat>();
import { createFormatter, type Formatter } from "@vintl/compact-number";
import type { IntlController } from "@vintl/vintl/controller";
export function useCompactNumber(truncate = false, fractionDigits = 2, locale?: string) {
const context = {};
const formatters = new WeakMap<IntlController<any>, Formatter>();
let formatter = formatters.get(context);
export function useCompactNumber(): Formatter {
const vintl = useVIntl();
if (!formatter) {
formatter = new Intl.NumberFormat(locale, {
notation: "compact",
maximumFractionDigits: fractionDigits,
});
formatters.set(context, formatter);
let formatter = formatters.get(vintl);
if (formatter == null) {
const formatterRef = computed(() => createFormatter(vintl.intl));
formatter = (value, options) => formatterRef.value(value, options);
formatters.set(vintl, formatter);
}
function format(value: number): string {
let formattedValue = value;
if (truncate) {
const scale = Math.pow(10, fractionDigits);
formattedValue = Math.floor(value * scale) / scale;
}
return formatter!.format(formattedValue);
}
return format;
return formatter;
}
@@ -31,7 +31,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
projectBackground: false,
searchBackground: false,
advancedDebugInfo: false,
showProjectPageDownloadModalServersPromo: false,
showProjectPageDownloadModalServersPromo: true,
showProjectPageCreateServersTooltip: true,
showProjectPageQuickServerButton: false,
// advancedRendering: true,
@@ -98,67 +98,28 @@ export class GeneralModule extends ServerModule implements ServerGeneral {
}
}
reinstallFromMrpack(
mrpack: File,
hardReset: boolean = false,
): {
promise: Promise<void>;
onProgress: (cb: (p: { loaded: number; total: number; progress: number }) => void) => void;
} {
async reinstallFromMrpack(mrpack: File, hardReset: boolean = false): Promise<void> {
const hardResetParam = hardReset ? "true" : "false";
const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/reinstallFromMrpack`);
const progressSubject = new EventTarget();
const formData = new FormData();
formData.append("file", mrpack);
const uploadPromise = (async () => {
try {
const auth = await useServersFetch<JWTAuth>(`servers/${this.serverId}/reinstallFromMrpack`);
const response = await fetch(
`https://${auth.url}/reinstallMrpackMultiparted?hard=${hardResetParam}`,
{
method: "POST",
headers: {
Authorization: `Bearer ${auth.token}`,
},
body: formData,
signal: AbortSignal.timeout(30 * 60 * 1000),
},
);
await new Promise<void>((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", (e) => {
if (e.lengthComputable) {
progressSubject.dispatchEvent(
new CustomEvent("progress", {
detail: {
loaded: e.loaded,
total: e.total,
progress: (e.loaded / e.total) * 100,
},
}),
);
}
});
xhr.onload = () =>
xhr.status >= 200 && xhr.status < 300
? resolve()
: reject(new Error(`[pyroservers] XHR error status: ${xhr.status}`));
xhr.onerror = () => reject(new Error("[pyroservers] .mrpack upload failed"));
xhr.onabort = () => reject(new Error("[pyroservers] .mrpack upload cancelled"));
xhr.ontimeout = () => reject(new Error("[pyroservers] .mrpack upload timed out"));
xhr.timeout = 30 * 60 * 1000;
xhr.open("POST", `https://${auth.url}/reinstallMrpackMultiparted?hard=${hardResetParam}`);
xhr.setRequestHeader("Authorization", `Bearer ${auth.token}`);
const formData = new FormData();
formData.append("file", mrpack);
xhr.send(formData);
});
} catch (err) {
console.error("Error reinstalling from mrpack:", err);
throw err;
}
})();
return {
promise: uploadPromise,
onProgress: (cb: (p: { loaded: number; total: number; progress: number }) => void) =>
progressSubject.addEventListener("progress", ((e: CustomEvent) =>
cb(e.detail)) as EventListener),
};
if (!response.ok) {
throw new Error(`[pyroservers] native fetch err status: ${response.status}`);
}
}
async suspend(status: boolean): Promise<void> {
+8 -8
View File
@@ -142,7 +142,7 @@
"
>
<nuxt-link to="/resourcepacks">
<PaintbrushIcon aria-hidden="true" /> Resource Packs
<PaintBrushIcon aria-hidden="true" /> Resource Packs
</nuxt-link>
</ButtonStyled>
<ButtonStyled
@@ -221,7 +221,7 @@
v-if="route.name === 'search-mods' || route.path.startsWith('/mod/')"
aria-hidden="true"
/>
<PaintbrushIcon
<PaintBrushIcon
v-else-if="
route.name === 'search-resourcepacks' || route.path.startsWith('/resourcepack/')
"
@@ -250,7 +250,7 @@
<template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
<template #resourcepacks>
<PaintbrushIcon aria-hidden="true" /> Resource Packs
<PaintBrushIcon aria-hidden="true" /> Resource Packs
</template>
<template #datapacks> <BracesIcon aria-hidden="true" /> Data Packs </template>
<template #plugins> <PlugIcon aria-hidden="true" /> Plugins </template>
@@ -696,14 +696,14 @@ import {
CurrencyIcon,
BracesIcon,
GlassesIcon,
PaintbrushIcon,
PaintBrushIcon,
PackageOpenIcon,
DiscordIcon,
BlueskyIcon,
TumblrIcon,
TwitterIcon,
MastodonIcon,
GithubIcon,
GitHubIcon,
ScaleIcon,
} from "@modrinth/assets";
import {
@@ -1202,7 +1202,7 @@ const socialLinks = [
defineMessage({ id: "layout.footer.social.github", defaultMessage: "GitHub" }),
),
href: "https://github.com/modrinth",
icon: GithubIcon,
icon: GitHubIcon,
},
];
@@ -1211,9 +1211,9 @@ const footerLinks = [
label: formatMessage(defineMessage({ id: "layout.footer.about", defaultMessage: "About" })),
links: [
{
href: "/news",
href: "https://blog.modrinth.com",
label: formatMessage(
defineMessage({ id: "layout.footer.about.news", defaultMessage: "News" }),
defineMessage({ id: "layout.footer.about.blog", defaultMessage: "Blog" }),
),
},
{
+2 -2
View File
@@ -383,8 +383,8 @@
"layout.footer.about": {
"message": "About"
},
"layout.footer.about.news": {
"message": "News"
"layout.footer.about.blog": {
"message": "Blog"
},
"layout.footer.about.careers": {
"message": "Careers"
+6 -1
View File
@@ -762,7 +762,12 @@
:tags="tags"
class="card flex-card experimental-styles-within"
/>
<AdPlaceholder v-if="!auth.user && tags.approvedStatuses.includes(project.status)" />
<AdPlaceholder
v-if="
(!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus) &&
tags.approvedStatuses.includes(project.status)
"
/>
<ProjectSidebarLinks
:project="project"
:link-target="$external()"
@@ -50,7 +50,7 @@
Listed in search results
</li>
<li v-else>
<XIcon class="bad" />
<ExitIcon class="bad" />
Not listed in search results
</li>
<li v-if="isListed(project)">
@@ -58,11 +58,11 @@
Listed on the profiles of members
</li>
<li v-else>
<XIcon class="bad" />
<ExitIcon class="bad" />
Not listed on the profiles of members
</li>
<li v-if="isPrivate(project)">
<XIcon class="bad" />
<ExitIcon class="bad" />
Not accessible with a direct link
</li>
<li v-else>
@@ -92,7 +92,7 @@
</div>
</template>
<script setup>
import { XIcon, CheckIcon, IssuesIcon } from "@modrinth/assets";
import { ExitIcon, CheckIcon, IssuesIcon } from "@modrinth/assets";
import { Badge } from "@modrinth/ui";
import ConversationThread from "~/components/ui/thread/ConversationThread.vue";
import {
@@ -7,14 +7,14 @@
{{ formatProjectType(project.project_type).toLowerCase() }}. You may choose one from our
list or provide a custom license. You may also provide a custom URL to your chosen license;
otherwise, the license text will be displayed. See our
<nuxt-link
to="/news/article/licensing-guide/"
<a
href="https://blog.modrinth.com/licensing-guide/"
target="_blank"
rel="noopener"
class="text-link"
>
licensing guide
</nuxt-link>
</a>
for more information.
</p>
@@ -153,7 +153,10 @@
{{ dayjs(charge.due).format("MMMM D, YYYY [at] h:mma") }}
<span class="text-secondary">({{ formatRelativeTime(charge.due) }}) </span>
</span>
<div class="flex w-full items-center gap-1 text-xs text-secondary">
<div
v-if="flags.developerMode"
class="flex w-full items-center gap-1 text-xs text-secondary"
>
{{ charge.status }}
⋅
{{ charge.type }}
@@ -216,6 +219,7 @@ import dayjs from "dayjs";
import { products } from "~/generated/state.json";
import ModrinthServersIcon from "~/components/ui/servers/ModrinthServersIcon.vue";
const flags = useFeatureFlags();
const route = useRoute();
const data = useNuxtApp();
const vintl = useVIntl();
@@ -285,13 +289,13 @@ const selectedCharge = ref(null);
const refundType = ref("full");
const refundTypes = ref(["full", "partial", "none"]);
const refundAmount = ref(0);
const unprovision = ref(true);
const unprovision = ref(false);
function showRefundModal(charge) {
selectedCharge.value = charge;
refundType.value = "full";
refundAmount.value = 0;
unprovision.value = true;
unprovision.value = false;
refundModal.value.show();
}
+150 -105
View File
@@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup>
import {
TrashIcon,
SearchIcon,
@@ -13,129 +13,79 @@ import LogoAnimated from "~/components/brand/LogoAnimated.vue";
import PrismIcon from "~/assets/images/external/prism.svg?component";
import ATLauncher from "~/assets/images/external/atlauncher.svg?component";
import CurseForge from "~/assets/images/external/curseforge.svg?component";
import LatestNewsRow from "~/components/ui/news/LatestNewsRow.vue";
import { homePageProjects } from "~/generated/state.json";
interface LauncherPlatform {
install_urls: string[];
}
interface LauncherUpdates {
platforms: {
"darwin-aarch64": LauncherPlatform;
"windows-x86_64": LauncherPlatform;
"linux-x86_64": LauncherPlatform;
};
}
type OSType = "Mac" | "Windows" | "Linux" | null;
const downloadWindows = ref<HTMLAnchorElement | null>(null);
const downloadLinux = ref<HTMLAnchorElement | null>(null);
const downloadSection = ref<HTMLElement | null>(null);
const windowsLink = ref<string | null>(null);
const linuxLinks = reactive({
appImage: null as string | null,
deb: null as string | null,
rpm: null as string | null,
const os = ref(null);
const downloadWindows = ref(null);
const downloadLinux = ref(null);
const downloadSection = ref(null);
const windowsLink = ref(null);
const linuxLinks = {
appImage: null,
deb: null,
rpm: null,
thirdParty: "https://support.modrinth.com/en/articles/9298760",
});
};
const macLinks = {
universal: null,
};
const macLinks = reactive({
universal: null as string | null,
});
let downloadLauncher;
const newProjects = homePageProjects.slice(0, 40);
const val = Math.ceil(newProjects.length / 6);
const rows = [
const rows = ref([
newProjects.slice(0, val),
newProjects.slice(val, val * 2),
newProjects.slice(val * 2, val * 3),
newProjects.slice(val * 3, val * 4),
newProjects.slice(val * 4, val * 5),
];
]);
const { data: launcherUpdates } = await useFetch<LauncherUpdates>(
"https://launcher-files.modrinth.com/updates.json",
{
server: false,
getCachedData(key, nuxtApp) {
const cached = (nuxtApp.ssrContext?.cache as any)?.[key] || nuxtApp.payload.data[key];
if (!cached) return;
const [{ data: launcherUpdates }] = await Promise.all([
await useAsyncData("launcherUpdates", () =>
$fetch("https://launcher-files.modrinth.com/updates.json"),
),
]);
const now = Date.now();
const cacheTime = cached._cacheTime || 0;
const maxAge = 5 * 60 * 1000;
macLinks.universal = launcherUpdates.value.platforms["darwin-aarch64"].install_urls[0];
windowsLink.value = launcherUpdates.value.platforms["windows-x86_64"].install_urls[0];
linuxLinks.appImage = launcherUpdates.value.platforms["linux-x86_64"].install_urls[1];
linuxLinks.deb = launcherUpdates.value.platforms["linux-x86_64"].install_urls[0];
linuxLinks.rpm = launcherUpdates.value.platforms["linux-x86_64"].install_urls[2];
if (now - cacheTime > maxAge) {
return null;
}
onMounted(() => {
os.value = navigator?.platform.toString();
os.value = os.value?.includes("Mac")
? "Mac"
: os.value?.includes("Win")
? "Windows"
: os.value?.includes("Linux")
? "Linux"
: null;
return cached;
},
transform(data) {
return {
...data,
_cacheTime: Date.now(),
};
},
},
);
const platform = computed<string>(() => {
if (import.meta.server) {
const headers = useRequestHeaders();
return headers["user-agent"] || "";
} else {
return navigator.userAgent || "";
}
});
const os = computed<OSType>(() => {
if (platform.value.includes("Mac")) {
return "Mac";
} else if (platform.value.includes("Win")) {
return "Windows";
} else if (platform.value.includes("Linux")) {
return "Linux";
} else {
return null;
}
});
const downloadLauncher = computed(() => {
if (os.value === "Windows") {
return () => {
downloadWindows.value?.click();
downloadLauncher = () => {
downloadWindows.value.click();
};
} else if (os.value === "Linux") {
return () => {
downloadLinux.value?.click();
downloadLauncher = () => {
downloadLinux.value.click();
};
} else {
return () => {
downloadLauncher = () => {
scrollToSection();
};
}
});
onBeforeMount(() => {
if (launcherUpdates.value?.platforms) {
macLinks.universal = launcherUpdates.value.platforms["darwin-aarch64"]?.install_urls[0] || null;
windowsLink.value = launcherUpdates.value.platforms["windows-x86_64"]?.install_urls[0] || null;
linuxLinks.appImage = launcherUpdates.value.platforms["linux-x86_64"]?.install_urls[1] || null;
linuxLinks.deb = launcherUpdates.value.platforms["linux-x86_64"]?.install_urls[0] || null;
linuxLinks.rpm = launcherUpdates.value.platforms["linux-x86_64"]?.install_urls[2] || null;
}
});
const scrollToSection = () => {
nextTick(() => {
if (downloadSection.value) {
window.scrollTo({
top: downloadSection.value.offsetTop,
behavior: "smooth",
});
}
window.scrollTo({
top: downloadSection.value.offsetTop,
behavior: "smooth",
});
});
};
@@ -534,7 +484,7 @@ useSeoMeta({
class="project button-animation gradient-border"
:to="`/${project.project_type}/${project.slug ? project.slug : project.id}`"
>
<Avatar :src="project.icon_url!" :alt="project.title" size="sm" />
<Avatar :src="project.icon_url" :alt="project.title" size="sm" loading="lazy" />
<div class="project-info">
<span class="title">
{{ project.title }}
@@ -645,7 +595,9 @@ useSeoMeta({
</div>
<div class="description">
Modrinth’s launcher is fully open source. You can view the source code on our
<a href="https://github.com/modrinth/theseus" rel="noopener" target="_blank">GitHub</a>!
<a href="https://github.com/modrinth/theseus" rel="noopener" :target="$external()"
>GitHub</a
>!
</div>
</div>
<div class="point">
@@ -835,7 +787,7 @@ useSeoMeta({
Windows
</div>
<div class="description">
<a ref="downloadWindows" :href="windowsLink || undefined" download="">
<a ref="downloadWindows" :href="windowsLink" download="">
<DownloadIcon />
<span> Download the beta </span>
</a>
@@ -859,7 +811,7 @@ useSeoMeta({
Mac
</div>
<div class="description apple">
<a :href="macLinks.universal || undefined" download="">
<a :href="macLinks.universal" download="">
<DownloadIcon />
<span> Download the beta </span>
</a>
@@ -896,19 +848,19 @@ useSeoMeta({
Linux
</div>
<div class="description apple">
<a ref="downloadLinux" :href="linuxLinks.appImage || undefined" download="">
<a ref="downloadLinux" :href="linuxLinks.appImage" download="">
<DownloadIcon />
<span> Download the AppImage </span>
</a>
<a :href="linuxLinks.deb || undefined" download="">
<a :href="linuxLinks.deb" download="">
<DownloadIcon />
<span> Download the DEB </span>
</a>
<a :href="linuxLinks.rpm || undefined" download="">
<a :href="linuxLinks.rpm" download="">
<DownloadIcon />
<span> Download the RPM </span>
</a>
<a :href="linuxLinks.thirdParty || undefined" download="">
<a :href="linuxLinks.thirdParty" download="">
<LinkIcon />
<span> Third-party packages </span>
</a>
@@ -921,8 +873,101 @@ useSeoMeta({
<nuxt-link to="/legal/privacy">Privacy Policy.</nuxt-link>
</p>
</div>
<div class="bg-[var(--landing-raw-bg)]">
<LatestNewsRow />
<div class="logo-banner">
<svg
v-if="$theme.active === 'light'"
viewBox="0 0 865 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="light-height"
>
<g clip-path="url(#clip0_419_237)">
<rect x="176" width="512" height="512" fill="url(#paint0_linear_419_237)" />
<g opacity="0.5">
<path
d="M176 274.069H219.65C221.89 299.001 228.25 322.42 238.87 345.249C245.4 342.033 251.37 338.016 257.52 334.3C263.76 330.534 270.07 326.908 276.62 323.061C276.21 321.669 275.95 320.216 275.37 318.914C271.05 309.378 268.47 299.251 266.32 289.114C265.03 283.054 264.41 276.743 263.73 270.513C262.89 262.86 262.94 255.257 263.11 247.654C263.26 241.083 264.11 234.482 265.21 227.991C266.88 218.064 269.39 208.308 272.94 198.852C276.79 188.594 281.19 178.588 287.21 169.382C291.19 163.292 294.97 157.021 299.53 151.382C306.3 142.998 313.75 135.214 322.12 128.273C330.05 121.692 338.16 115.421 347.18 110.483C354.15 106.676 361.39 103.341 368.66 100.115C379.13 95.4674 390.24 92.873 401.39 90.4289C410.67 88.4055 430.03 87.3237 438.96 88.6158C438.51 95.9282 436.63 103.05 435.44 110.262C434.26 117.394 432.94 124.496 431.6 132.109C428.15 132.44 424.73 132.7 421.32 133.121C416.25 133.752 411.15 134.263 406.15 135.265C395.4 137.428 385.13 141.044 375.33 145.973C366.85 150.23 358.98 155.398 351.89 161.709C348.8 164.464 345.52 167.048 342.67 170.033C335.77 177.225 329.99 185.279 324.68 193.713C320.48 200.364 317.45 207.536 314.8 214.839C312.05 222.422 310.33 230.315 308.95 238.308C307.43 247.093 307.9 255.898 308.2 264.653C308.48 272.867 310.18 281 312.49 288.934C313.45 292.239 314.44 295.535 315.62 299.481C332.06 289.705 348.08 280.169 364.47 270.422C361.92 263.631 359.46 257.16 357.05 250.669C354.63 244.178 352.26 237.667 349.78 230.926C352.79 227.871 355.71 224.936 358.6 221.971C369.97 210.291 381.46 198.712 392.6 186.821C395.77 183.436 399.36 181.913 403.66 181.062C414.16 178.978 424.63 176.734 435.11 174.541C441.87 173.128 448.62 171.686 455.69 170.193C461.36 177.175 467.08 184.217 472.94 191.439C471.8 192.671 470.85 193.783 469.82 194.815C463 201.656 455.97 208.308 449.41 215.4C446.18 218.896 442.34 220.709 438.01 221.961C433.09 223.383 428.16 224.745 423.25 226.198C422.5 226.418 421.73 226.909 421.19 227.48C416.62 232.298 412.15 237.216 407.55 241.995C405.9 243.697 405.89 245.31 406.67 247.424C408.91 253.474 410.92 259.604 413.12 265.674C413.5 266.716 414.27 267.668 415.04 268.499C419.55 273.377 424.05 278.266 428.73 282.974C429.48 283.725 431.24 284.055 432.33 283.775C438.57 282.182 444.72 280.289 450.94 278.636C453.49 277.955 455.32 276.443 457.01 274.559C460.1 271.094 463.55 267.898 466.27 264.172C469.55 259.684 473.91 257.901 479.09 256.82C483.44 255.908 487.58 254.045 491.83 252.673C496.23 251.25 500.69 249.998 505.07 248.495C507.08 247.804 508.18 248.305 508.99 250.198C512.16 257.671 515.4 265.114 518.76 272.917C515.97 276.342 513.04 279.918 510.13 283.515C505.45 289.304 500.81 295.124 496.12 300.904C492.16 305.782 487.86 310.42 484.26 315.549C481.66 319.255 478.09 320.717 474.16 321.959C462.33 325.716 450.52 329.502 438.69 333.268C431.61 335.522 424.51 337.756 416.91 340.16C415.33 338.648 413.45 337.055 411.81 335.232C407.16 330.053 402.62 324.794 398.03 319.565C395.63 316.831 393.3 314.006 390.79 311.382C388.08 308.557 387.52 308.557 384.41 310.42C377.88 314.337 371.33 318.243 364.82 322.19C356.32 327.328 347.85 332.507 339.09 337.836C341.26 341.482 344.39 344.257 347.49 346.811C353.22 351.539 359.26 355.907 365.37 360.144C376.53 367.867 388.92 372.815 402.07 376.081C409.82 378.004 417.59 379.286 425.6 379.076C426.74 379.046 427.88 379.446 429.02 379.516C430.64 379.617 432.27 379.667 433.88 379.587C435.19 379.526 436.48 379.106 437.79 379.076C442.03 378.966 442.07 378.996 443.29 383.443C446.74 396.014 450.16 408.585 453.58 421.167C453.7 421.597 453.65 422.068 453.7 422.88C449 423.28 444.42 423.781 439.83 424.022C436.17 424.212 432.5 423.961 428.83 424.092C414.81 424.593 401.08 422.469 387.69 418.733C366.28 412.763 346.56 403.216 328.88 389.523C320.7 383.183 313.41 375.95 306.16 368.648C304.89 367.366 303.97 365.743 302.78 364.371C300.52 361.746 299.87 361.526 296.85 363.189C292.49 365.583 288.24 368.167 283.98 370.722C277.72 374.458 271.49 378.234 265.25 382.001C264.56 382.421 263.91 382.902 263.18 383.403C263.7 387.54 267.09 389.654 269.19 392.448C272.55 396.946 276.45 401.113 280.58 404.939C286.77 410.669 293.38 415.938 299.77 421.457C306.94 427.658 314.86 432.756 322.98 437.604C332.25 443.144 341.84 448.092 351.94 451.808C361.7 455.394 371.65 458.54 381.69 461.244C388.49 463.077 395.62 463.678 402.56 465.061C414.21 467.385 425.99 467.224 437.75 466.924C444.49 466.754 451.21 465.622 457.94 465.071C465.69 464.44 473.25 462.767 480.79 461.014C492.41 458.319 503.64 454.453 514.64 449.795C530.77 442.963 545.63 433.968 559.65 423.601C570.63 415.477 580.59 406.061 589.5 395.774C598.25 385.667 606.72 375.209 612.97 363.219C615.56 358.241 618.38 353.382 621.25 348.184C635.52 353.322 649.65 358.411 664.03 363.59C663.75 364.691 663.65 365.663 663.26 366.484C655.92 381.77 647.35 396.285 636.95 409.727C628.93 420.105 620.71 430.292 611.17 439.307C604.8 445.327 598.41 451.358 591.25 456.496C584.53 461.314 578.16 466.653 571.24 471.151C556.34 480.857 540.49 488.721 523.9 495.262C508.29 501.412 492.07 505.198 475Line truncated
fill="#05CE45"
/>
<path
d="M688 277.074C687.69 277.615 687.11 278.136 687.09 278.686C686.56 293.612 683.03 308.016 679.73 322.45C675.99 322.05 642.32 309.939 636.41 306.894C637.6 300.173 638.85 293.431 639.97 286.66C641.13 279.648 641.76 272.606 642.1 265.484C642.43 258.563 642.1 251.691 642.02 244.789C641.94 237.858 641.47 231.006 639.48 223.784C625.94 227.39 612.76 230.896 599.27 234.492C599.19 235.964 598.74 237.507 599.09 238.839C600.63 244.749 599.88 250.739 599.99 256.699C600.43 280.079 595.08 302.226 585.83 323.592C580.73 335.372 574.24 346.311 566.66 356.598C559.95 365.713 552.43 374.228 543.81 381.53C534.36 389.543 524.76 397.497 513.41 402.896C508.18 405.39 503.03 408.045 497.83 410.599C497.43 410.799 496.9 410.759 496.49 410.819C494.33 407.514 486.2 378.274 484.59 368.177C533.62 341.532 557.58 300.664 554.95 244.639C548.26 194.314 521.33 159.555 474.14 139.752C476.69 125.278 479.28 110.593 481.96 95.3973C486 96.7796 489.75 97.8414 493.32 99.3439C504.19 103.932 514.89 108.93 524.68 115.541C537.67 124.316 549.44 134.653 559.65 146.473C570.52 159.055 579.39 173.078 585.96 188.434C587.1 191.099 587.3 191.279 589.95 190.578C602.53 187.272 615.11 183.917 628.08 180.481C627.53 178.608 627.18 176.845 626.5 175.232C618.95 157.262 609.28 140.493 597.33 125.107C590.3 116.052 582.71 107.398 574.08 99.8448C561.23 88.6058 547.51 78.599 532.54 70.1948C521.76 64.1446 510.5 59.3665 498.93 55.3798C488.2 51.6836 477.17 48.8788 465.88 46.9756C450.75 44.4313 435.58 43.7201 420.33 44.221C414.75 44.4013 409.21 45.6033 403.63 46.004C394.2 46.6851 385.07 48.979 375.97 51.2128C367.14 53.3764 358.57 56.4516 350.19 60.0276C346.54 61.5903 342.73 62.8324 339.19 64.6053C333.26 67.5804 327.36 70.6455 321.67 74.0713C316.29 77.3068 311.08 80.8628 306.03 84.5991C300.85 88.4255 295.84 92.5124 290.96 96.7195C286.31 100.726 281.67 104.793 277.47 109.261C267.13 120.259 257.6 131.919 250.05 145.061C246.17 151.812 242.21 158.564 238.88 165.596C231.64 180.881 226.13 196.788 222.94 213.466C222.13 217.674 220.91 221.79 220.92 226.148C220.92 227.36 220.13 228.582 219.6 230.084H176C176 229.083 176 228.081 176 227.089C176.32 226.548 176.92 226.008 176.9 225.477C176.77 220.298 178.02 215.33 178.92 210.291C181.03 198.581 183.94 187.072 187.69 175.803C189.88 169.212 192.51 162.771 195.06 156.31C199.14 145.933 204.4 136.146 210.05 126.57C215.44 117.444 221.43 108.74 227.82 100.265C233.72 92.4423 240.04 84.9797 246.83 77.9879C253.05 71.5771 260.16 66.0378 266.65 59.8774C274.64 52.3046 283.78 46.2644 292.92 40.3544C303.06 33.8034 313.58 27.8033 324.82 23.0953C335.82 18.4876 346.77 13.8598 358.24 10.4941C373.31 6.07663 388.68 3.1517 404.23 1.2585C411.77 0.336948 419.45 0.136611 427.06 0.206729C436.84 0.296881 446.65 -0.714826 456.41 1.05816C463.53 2.35034 470.77 2.98141 477.92 4.14337C489.5 6.02654 500.81 9.12177 511.97 12.6778C521.29 15.6428 530.2 19.6796 539.17 23.5661C548.81 27.7432 557.74 33.1222 566.71 38.4312C572.54 41.877 577.86 46.1642 583.55 49.8705C592.62 55.7704 600.49 63.1529 608.47 70.325C615 76.1949 620.72 82.9663 626.72 89.4172C628.86 91.7211 630.91 94.1352 632.73 96.6794C638.01 104.082 643.32 111.474 648.31 119.057C655.9 130.577 662.42 142.737 667.58 155.519C673.71 170.684 679.37 186.06 682.52 202.197C683.75 208.498 685.02 214.799 685.94 221.149C686.6 225.717 686.7 230.365 687.12 234.973C687.16 235.373 687.69 235.724 687.99 236.095V277.084L688 277.074Z"
fill="#05CE45"
/>
</g>
</g>
<rect y="194" width="865" height="318" fill="url(#paint1_linear_419_237)" />
<defs>
<linearGradient
id="paint0_linear_419_237"
x1="432"
y1="0"
x2="432"
y2="512"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E7FFEF" />
<stop offset="0.678759" stop-color="white" />
</linearGradient>
<linearGradient
id="paint1_linear_419_237"
x1="432.5"
y1="194"
x2="432.5"
y2="315.861"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F9FFFB" stop-opacity="0" />
<stop offset="1" stop-color="#F9FFFB" />
</linearGradient>
<clipPath id="clip0_419_237">
<rect x="176" width="512" height="512" rx="256" fill="white" />
</clipPath>
</defs>
</svg>
<svg v-else viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_127_331)">
<rect width="512" height="512" fill="url(#paint0_linear_127_331)" />
<g style="mix-blend-mode: overlay">
<g opacity="0.5">
<path
d="M0 274.069H43.65C45.89 299.001 52.25 322.42 62.87 345.249C69.4 342.033 75.37 338.016 81.52 334.3C87.76 330.534 94.07 326.908 100.62 323.061C100.21 321.669 99.95 320.216 99.37 318.914C95.05 309.378 92.47 299.251 90.32 289.114C89.03 283.054 88.41 276.743 87.73 270.513C86.89 262.86 86.94 255.257 87.11 247.654C87.26 241.083 88.11 234.482 89.21 227.991C90.88 218.064 93.39 208.308 96.94 198.852C100.79 188.594 105.19 178.588 111.21 169.382C115.19 163.292 118.97 157.021 123.53 151.382C130.3 142.998 137.75 135.214 146.12 128.273C154.05 121.692 162.16 115.421 171.18 110.483C178.15 106.676 185.39 103.341 192.66 100.115C203.13 95.4674 214.24 92.873 225.39 90.4289C234.67 88.4055 254.03 87.3237 262.96 88.6158C262.51 95.9282 260.63 103.05 259.44 110.262C258.26 117.394 256.94 124.496 255.6 132.109C252.15 132.44 248.73 132.7 245.32 133.121C240.25 133.752 235.15 134.263 230.15 135.265C219.4 137.428 209.13 141.044 199.33 145.973C190.85 150.23 182.98 155.398 175.89 161.709C172.8 164.464 169.52 167.048 166.67 170.033C159.77 177.225 153.99 185.279 148.68 193.713C144.48 200.364 141.45 207.536 138.8 214.839C136.05 222.422 134.33 230.315 132.95 238.308C131.43 247.093 131.9 255.898 132.2 264.653C132.48 272.867 134.18 281 136.49 288.934C137.45 292.239 138.44 295.535 139.62 299.481C156.06 289.705 172.08 280.169 188.47 270.422C185.92 263.631 183.46 257.16 181.05 250.669C178.63 244.178 176.26 237.667 173.78 230.926C176.79 227.871 179.71 224.936 182.6 221.971C193.97 210.291 205.46 198.712 216.6 186.821C219.77 183.436 223.36 181.913 227.66 181.062C238.16 178.978 248.63 176.734 259.11 174.541C265.87 173.128 272.62 171.686 279.69 170.193C285.36 177.175 291.08 184.217 296.94 191.439C295.8 192.671 294.85 193.783 293.82 194.815C287 201.656 279.97 208.308 273.41 215.4C270.18 218.896 266.34 220.709 262.01 221.961C257.09 223.383 252.16 224.745 247.25 226.198C246.5 226.418 245.73 226.909 245.19 227.48C240.62 232.298 236.15 237.216 231.55 241.995C229.9 243.697 229.89 245.31 230.67 247.424C232.91 253.474 234.92 259.604 237.12 265.674C237.5 266.716 238.27 267.668 239.04 268.499C243.55 273.377 248.05 278.266 252.73 282.974C253.48 283.725 255.24 284.055 256.33 283.775C262.57 282.182 268.72 280.289 274.94 278.636C277.49 277.955 279.32 276.443 281.01 274.559C284.1 271.094 287.55 267.898 290.27 264.172C293.55 259.684 297.91 257.901 303.09 256.82C307.44 255.908 311.58 254.045 315.83 252.673C320.23 251.25 324.69 249.998 329.07 248.495C331.08 247.804 332.18 248.305 332.99 250.198C336.16 257.671 339.4 265.114 342.76 272.917C339.97 276.342 337.04 279.919 334.13 283.515C329.45 289.304 324.81 295.124 320.12 300.904C316.16 305.782 311.86 310.42 308.26 315.549C305.66 319.255 302.09 320.717 298.16 321.959C286.33 325.716 274.52 329.502 262.69 333.268C255.61 335.522 248.51 337.756 240.91 340.16C239.33 338.648 237.45 337.055 235.81 335.232C231.16 330.053 226.62 324.794 222.03 319.565C219.63 316.831 217.3 314.006 214.79 311.382C212.08 308.557 211.52 308.557 208.41 310.42C201.88 314.337 195.33 318.243 188.82 322.19C180.32 327.328 171.85 332.507 163.09 337.836C165.26 341.482 168.39 344.257 171.49 346.811C177.22 351.539 183.26 355.907 189.37 360.144C200.53 367.867 212.92 372.815 226.07 376.081C233.82 378.004 241.59 379.286 249.6 379.076C250.74 379.046 251.88 379.446 253.02 379.516C254.64 379.617 256.27 379.667 257.88 379.587C259.19 379.526 260.48 379.106 261.79 379.076C266.03 378.966 266.07 378.996 267.29 383.443C270.74 396.014 274.16 408.585 277.58 421.167C277.7 421.597 277.65 422.068 277.7 422.88C273 423.28 268.42 423.781 263.83 424.022C260.17 424.212 256.5 423.961 252.83 424.092C238.81 424.592 225.08 422.469 211.69 418.733C190.28 412.763 170.56 403.216 152.88 389.523C144.7 383.183 137.41 375.95 130.16 368.648C128.89 367.366 127.97 365.743 126.78 364.371C124.52 361.746 123.87 361.526 120.85 363.189C116.49 365.583 112.24 368.167 107.98 370.722C101.72 374.458 95.49 378.234 89.25 382.001C88.56 382.421 87.91 382.902 87.18 383.403C87.7 387.54 91.09 389.654 93.19 392.448C96.55 396.946 100.45 401.113 104.58 404.939C110.77 410.669 117.38 415.938 123.77 421.457C130.94 427.658 138.86 432.756 146.98 437.604C156.25 443.144 165.84 448.092 175.94 451.808C185.7 455.394 195.65 458.54 205.69 461.244C212.49 463.077 219.62 463.678 226.56 465.061C238.21 467.385 249.99 467.224 261.75 466.924C268.49 466.754 275.21 465.622 281.94 465.071C289.69 464.44 297.25 462.767 304.79 461.014C316.41 458.319 327.64 454.453 338.64 449.795C354.77 442.964 369.63 433.968 383.65 423.601C394.63 415.477 404.59 406.061 413.5 395.774C422.25 385.667 430.72 375.209 436.97 363.219C439.56 358.241 442.38 353.382 445.25 348.184C459.52 353.322 473.65 358.411 488.03 363.59C487.75 364.691 487.65 365.663 487.26 366.484C479.92 381.77 471.35 396.285 460.95 409.727C452.93 420.105 444.71 430.292 435.17 439.307C428.8 445.327 422.41 451.358 415.25 456.496C408.53 461.314 402.16 466.653 395.24 471.151C380.34 480.857 364.49 488.721 347.9 495.262C332.29 501.412 316.07 505.198 299.79 508.774C292.91 510.287 285.7 51Line truncated
fill="white"
/>
<path
d="M512 277.074C511.69 277.615 511.11 278.136 511.09 278.686C510.56 293.612 507.03 308.016 503.73 322.45C499.99 322.05 466.32 309.939 460.41 306.894C461.6 300.173 462.85 293.431 463.97 286.66C465.13 279.648 465.76 272.606 466.1 265.484C466.43 258.563 466.1 251.691 466.02 244.789C465.94 237.858 465.47 231.006 463.48 223.784C449.94 227.39 436.76 230.896 423.27 234.492C423.19 235.964 422.74 237.507 423.09 238.839C424.63 244.749 423.88 250.739 423.99 256.699C424.43 280.079 419.08 302.226 409.83 323.592C404.73 335.372 398.24 346.311 390.66 356.598C383.95 365.713 376.43 374.228 367.81 381.53C358.36 389.543 348.76 397.497 337.41 402.896C332.18 405.39 327.03 408.045 321.83 410.599C321.43 410.799 320.9 410.759 320.49 410.819C318.33 407.514 310.2 378.274 308.59 368.177C357.62 341.532 381.58 300.664 378.95 244.639C372.26 194.314 345.33 159.555 298.14 139.752C300.69 125.278 303.28 110.593 305.96 95.3973C310 96.7796 313.75 97.8414 317.32 99.3439C328.19 103.932 338.89 108.93 348.68 115.541C361.67 124.316 373.44 134.654 383.65 146.473C394.52 159.055 403.39 173.078 409.96 188.434C411.1 191.099 411.3 191.279 413.95 190.578C426.53 187.272 439.11 183.917 452.08 180.481C451.53 178.608 451.18 176.845 450.5 175.232C442.95 157.262 433.28 140.493 421.33 125.107C414.3 116.052 406.71 107.398 398.08 99.8448C385.23 88.6058 371.51 78.599 356.54 70.1948C345.76 64.1446 334.5 59.3665 322.93 55.3798C312.2 51.6836 301.17 48.8788 289.88 46.9756C274.75 44.4313 259.58 43.7201 244.33 44.221C238.75 44.4013 233.21 45.6033 227.63 46.004C218.2 46.6851 209.07 48.979 199.97 51.2128C191.14 53.3764 182.57 56.4516 174.19 60.0276C170.54 61.5903 166.73 62.8324 163.19 64.6053C157.26 67.5804 151.36 70.6455 145.67 74.0713C140.29 77.3068 135.08 80.8628 130.03 84.5991C124.85 88.4255 119.84 92.5124 114.96 96.7195C110.31 100.726 105.67 104.793 101.47 109.261C91.13 120.259 81.6 131.919 74.05 145.061C70.17 151.812 66.21 158.564 62.88 165.596C55.64 180.881 50.13 196.788 46.94 213.466C46.13 217.674 44.91 221.79 44.92 226.148C44.92 227.36 44.13 228.582 43.6 230.084H0C0 229.083 0 228.081 0 227.089C0.32 226.548 0.92 226.008 0.9 225.477C0.77 220.298 2.02 215.33 2.92 210.291C5.03 198.581 7.94 187.072 11.69 175.803C13.88 169.212 16.51 162.771 19.06 156.31C23.14 145.933 28.4 136.146 34.05 126.57C39.44 117.444 45.43 108.74 51.82 100.265C57.72 92.4423 64.04 84.9797 70.83 77.9879C77.05 71.5771 84.16 66.0378 90.65 59.8774C98.64 52.3046 107.78 46.2644 116.92 40.3544C127.06 33.8034 137.58 27.8033 148.82 23.0953C159.82 18.4876 170.77 13.8598 182.24 10.4941C197.31 6.07663 212.68 3.1517 228.23 1.2585C235.77 0.336948 243.45 0.136611 251.06 0.206729C260.84 0.296881 270.65 -0.714826 280.41 1.05816C287.53 2.35034 294.77 2.98141 301.92 4.14337C313.5 6.02654 324.81 9.12177 335.97 12.6778C345.29 15.6428 354.2 19.6796 363.17 23.5661C372.81 27.7432 381.74 33.1222 390.71 38.4312C396.54 41.877 401.86 46.1642 407.55 49.8705C416.62 55.7705 424.49 63.1529 432.47 70.325C439 76.1949 444.72 82.9663 450.72 89.4172C452.86 91.7211 454.91 94.1352 456.73 96.6795C462.01 104.082 467.32 111.474 472.31 119.057C479.9 130.577 486.42 142.737 491.58 155.519C497.71 170.684 503.37 186.06 506.52 202.197C507.75 208.498 509.02 214.799 509.94 221.149C510.6 225.717 510.7 230.365 511.12 234.973C511.16 235.373 511.69 235.724 511.99 236.095V277.084L512 277.074Z"
fill="white"
/>
</g>
</g>
</g>
<defs>
<linearGradient
id="paint0_linear_127_331"
x1="256"
y1="0"
x2="256"
y2="512"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#05CE45" />
<stop offset="0.678759" stop-color="#051F10" />
</linearGradient>
<clipPath id="clip0_127_331">
<rect width="512" height="512" rx="256" fill="white" />
</clipPath>
</defs>
</svg>
<div class="overlay">
<h2 class="main-header">
Read more about <br />
<strong class="main-header-strong">Modrinth</strong>
</h2>
<a
href="https://blog.modrinth.com/?utm_source=website&utm_source=homepage&utm_campaign=newsletter"
class="iconified-button brand-button"
>
Visit the blog
</a>
</div>
</div>
</div>
</template>
+4 -1
View File
@@ -248,7 +248,9 @@
</div>
</template>
</div>
<AdPlaceholder v-if="!auth.user" />
<AdPlaceholder
v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus"
/>
</div>
<div class="normal-page__content">
<nav class="navigation-card">
@@ -490,6 +492,7 @@ const route = useNativeRoute();
const auth = await useAuth();
const cosmetics = useCosmetics();
const tags = useTags();
const flags = useFeatureFlags();
const isEditing = ref(false);
@@ -146,7 +146,7 @@
/>
<div class="push-right input-group">
<button class="iconified-button" @click="$refs.editLinksModal.hide()">
<XIcon />
<CrossIcon />
Cancel
</button>
<button class="iconified-button brand-button" @click="bulkEditLinks()">
@@ -199,8 +199,8 @@
class="square-button"
@click="updateDescending()"
>
<SortDescIcon v-if="descending" />
<SortAscIcon v-else />
<DescendingIcon v-if="descending" />
<AscendingIcon v-else />
</button>
</div>
</div>
@@ -306,12 +306,12 @@ import {
SettingsIcon,
TrashIcon,
PlusIcon,
XIcon,
XIcon as CrossIcon,
IssuesIcon,
EditIcon,
SaveIcon,
SortAscIcon,
SortDescIcon,
SortAscendingIcon as AscendingIcon,
SortDescendingIcon as DescendingIcon,
} from "@modrinth/assets";
import {
Avatar,
@@ -337,15 +337,15 @@ export default defineNuxtComponent({
Checkbox,
IssuesIcon,
PlusIcon,
XIcon,
CrossIcon,
EditIcon,
SaveIcon,
Modal,
ModalCreation,
Multiselect,
CopyCode,
SortAscIcon,
SortDescIcon,
AscendingIcon,
DescendingIcon,
},
async setup() {
const { formatMessage } = useVIntl();
+104 -4
View File
@@ -419,8 +419,109 @@
</div>
</div>
</div>
<div class="bg-[var(--landing-raw-bg)]">
<LatestNewsRow />
<div class="logo-banner">
<svg
v-if="$theme.active === 'light'"
viewBox="0 0 865 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="light-height modrinth-icon"
>
<g clip-path="url(#clip0_419_237)">
<rect x="176" width="512" height="512" fill="url(#paint0_linear_419_237)" />
<g opacity="0.5">
<path
d="M176 274.069H219.65C221.89 299.001 228.25 322.42 238.87 345.249C245.4 342.033 251.37 338.016 257.52 334.3C263.76 330.534 270.07 326.908 276.62 323.061C276.21 321.669 275.95 320.216 275.37 318.914C271.05 309.378 268.47 299.251 266.32 289.114C265.03 283.054 264.41 276.743 263.73 270.513C262.89 262.86 262.94 255.257 263.11 247.654C263.26 241.083 264.11 234.482 265.21 227.991C266.88 218.064 269.39 208.308 272.94 198.852C276.79 188.594 281.19 178.588 287.21 169.382C291.19 163.292 294.97 157.021 299.53 151.382C306.3 142.998 313.75 135.214 322.12 128.273C330.05 121.692 338.16 115.421 347.18 110.483C354.15 106.676 361.39 103.341 368.66 100.115C379.13 95.4674 390.24 92.873 401.39 90.4289C410.67 88.4055 430.03 87.3237 438.96 88.6158C438.51 95.9282 436.63 103.05 435.44 110.262C434.26 117.394 432.94 124.496 431.6 132.109C428.15 132.44 424.73 132.7 421.32 133.121C416.25 133.752 411.15 134.263 406.15 135.265C395.4 137.428 385.13 141.044 375.33 145.973C366.85 150.23 358.98 155.398 351.89 161.709C348.8 164.464 345.52 167.048 342.67 170.033C335.77 177.225 329.99 185.279 324.68 193.713C320.48 200.364 317.45 207.536 314.8 214.839C312.05 222.422 310.33 230.315 308.95 238.308C307.43 247.093 307.9 255.898 308.2 264.653C308.48 272.867 310.18 281 312.49 288.934C313.45 292.239 314.44 295.535 315.62 299.481C332.06 289.705 348.08 280.169 364.47 270.422C361.92 263.631 359.46 257.16 357.05 250.669C354.63 244.178 352.26 237.667 349.78 230.926C352.79 227.871 355.71 224.936 358.6 221.971C369.97 210.291 381.46 198.712 392.6 186.821C395.77 183.436 399.36 181.913 403.66 181.062C414.16 178.978 424.63 176.734 435.11 174.541C441.87 173.128 448.62 171.686 455.69 170.193C461.36 177.175 467.08 184.217 472.94 191.439C471.8 192.671 470.85 193.783 469.82 194.815C463 201.656 455.97 208.308 449.41 215.4C446.18 218.896 442.34 220.709 438.01 221.961C433.09 223.383 428.16 224.745 423.25 226.198C422.5 226.418 421.73 226.909 421.19 227.48C416.62 232.298 412.15 237.216 407.55 241.995C405.9 243.697 405.89 245.31 406.67 247.424C408.91 253.474 410.92 259.604 413.12 265.674C413.5 266.716 414.27 267.668 415.04 268.499C419.55 273.377 424.05 278.266 428.73 282.974C429.48 283.725 431.24 284.055 432.33 283.775C438.57 282.182 444.72 280.289 450.94 278.636C453.49 277.955 455.32 276.443 457.01 274.559C460.1 271.094 463.55 267.898 466.27 264.172C469.55 259.684 473.91 257.901 479.09 256.82C483.44 255.908 487.58 254.045 491.83 252.673C496.23 251.25 500.69 249.998 505.07 248.495C507.08 247.804 508.18 248.305 508.99 250.198C512.16 257.671 515.4 265.114 518.76 272.917C515.97 276.342 513.04 279.918 510.13 283.515C505.45 289.304 500.81 295.124 496.12 300.904C492.16 305.782 487.86 310.42 484.26 315.549C481.66 319.255 478.09 320.717 474.16 321.959C462.33 325.716 450.52 329.502 438.69 333.268C431.61 335.522 424.51 337.756 416.91 340.16C415.33 338.648 413.45 337.055 411.81 335.232C407.16 330.053 402.62 324.794 398.03 319.565C395.63 316.831 393.3 314.006 390.79 311.382C388.08 308.557 387.52 308.557 384.41 310.42C377.88 314.337 371.33 318.243 364.82 322.19C356.32 327.328 347.85 332.507 339.09 337.836C341.26 341.482 344.39 344.257 347.49 346.811C353.22 351.539 359.26 355.907 365.37 360.144C376.53 367.867 388.92 372.815 402.07 376.081C409.82 378.004 417.59 379.286 425.6 379.076C426.74 379.046 427.88 379.446 429.02 379.516C430.64 379.617 432.27 379.667 433.88 379.587C435.19 379.526 436.48 379.106 437.79 379.076C442.03 378.966 442.07 378.996 443.29 383.443C446.74 396.014 450.16 408.585 453.58 421.167C453.7 421.597 453.65 422.068 453.7 422.88C449 423.28 444.42 423.781 439.83 424.022C436.17 424.212 432.5 423.961 428.83 424.092C414.81 424.593 401.08 422.469 387.69 418.733C366.28 412.763 346.56 403.216 328.88 389.523C320.7 383.183 313.41 375.95 306.16 368.648C304.89 367.366 303.97 365.743 302.78 364.371C300.52 361.746 299.87 361.526 296.85 363.189C292.49 365.583 288.24 368.167 283.98 370.722C277.72 374.458 271.49 378.234 265.25 382.001C264.56 382.421 263.91 382.902 263.18 383.403C263.7 387.54 267.09 389.654 269.19 392.448C272.55 396.946 276.45 401.113 280.58 404.939C286.77 410.669 293.38 415.938 299.77 421.457C306.94 427.658 314.86 432.756 322.98 437.604C332.25 443.144 341.84 448.092 351.94 451.808C361.7 455.394 371.65 458.54 381.69 461.244C388.49 463.077 395.62 463.678 402.56 465.061C414.21 467.385 425.99 467.224 437.75 466.924C444.49 466.754 451.21 465.622 457.94 465.071C465.69 464.44 473.25 462.767 480.79 461.014C492.41 458.319 503.64 454.453 514.64 449.795C530.77 442.963 545.63 433.968 559.65 423.601C570.63 415.477 580.59 406.061 589.5 395.774C598.25 385.667 606.72 375.209 612.97 363.219C615.56 358.241 618.38 353.382 621.25 348.184C635.52 353.322 649.65 358.411 664.03 363.59C663.75 364.691 663.65 365.663 663.26 366.484C655.92 381.77 647.35 396.285 636.95 409.727C628.93 420.105 620.71 430.292 611.17 439.307C604.8 445.327 598.41 451.358 591.25 456.496C584.53 461.314 578.16 466.653 571.24 471.151C556.34 480.857 540.49 488.721 523.9 495.262C508.29 501.412 492.07 505.198 475Line truncated
fill="#05CE45"
/>
<path
d="M688 277.074C687.69 277.615 687.11 278.136 687.09 278.686C686.56 293.612 683.03 308.016 679.73 322.45C675.99 322.05 642.32 309.939 636.41 306.894C637.6 300.173 638.85 293.431 639.97 286.66C641.13 279.648 641.76 272.606 642.1 265.484C642.43 258.563 642.1 251.691 642.02 244.789C641.94 237.858 641.47 231.006 639.48 223.784C625.94 227.39 612.76 230.896 599.27 234.492C599.19 235.964 598.74 237.507 599.09 238.839C600.63 244.749 599.88 250.739 599.99 256.699C600.43 280.079 595.08 302.226 585.83 323.592C580.73 335.372 574.24 346.311 566.66 356.598C559.95 365.713 552.43 374.228 543.81 381.53C534.36 389.543 524.76 397.497 513.41 402.896C508.18 405.39 503.03 408.045 497.83 410.599C497.43 410.799 496.9 410.759 496.49 410.819C494.33 407.514 486.2 378.274 484.59 368.177C533.62 341.532 557.58 300.664 554.95 244.639C548.26 194.314 521.33 159.555 474.14 139.752C476.69 125.278 479.28 110.593 481.96 95.3973C486 96.7796 489.75 97.8414 493.32 99.3439C504.19 103.932 514.89 108.93 524.68 115.541C537.67 124.316 549.44 134.653 559.65 146.473C570.52 159.055 579.39 173.078 585.96 188.434C587.1 191.099 587.3 191.279 589.95 190.578C602.53 187.272 615.11 183.917 628.08 180.481C627.53 178.608 627.18 176.845 626.5 175.232C618.95 157.262 609.28 140.493 597.33 125.107C590.3 116.052 582.71 107.398 574.08 99.8448C561.23 88.6058 547.51 78.599 532.54 70.1948C521.76 64.1446 510.5 59.3665 498.93 55.3798C488.2 51.6836 477.17 48.8788 465.88 46.9756C450.75 44.4313 435.58 43.7201 420.33 44.221C414.75 44.4013 409.21 45.6033 403.63 46.004C394.2 46.6851 385.07 48.979 375.97 51.2128C367.14 53.3764 358.57 56.4516 350.19 60.0276C346.54 61.5903 342.73 62.8324 339.19 64.6053C333.26 67.5804 327.36 70.6455 321.67 74.0713C316.29 77.3068 311.08 80.8628 306.03 84.5991C300.85 88.4255 295.84 92.5124 290.96 96.7195C286.31 100.726 281.67 104.793 277.47 109.261C267.13 120.259 257.6 131.919 250.05 145.061C246.17 151.812 242.21 158.564 238.88 165.596C231.64 180.881 226.13 196.788 222.94 213.466C222.13 217.674 220.91 221.79 220.92 226.148C220.92 227.36 220.13 228.582 219.6 230.084H176C176 229.083 176 228.081 176 227.089C176.32 226.548 176.92 226.008 176.9 225.477C176.77 220.298 178.02 215.33 178.92 210.291C181.03 198.581 183.94 187.072 187.69 175.803C189.88 169.212 192.51 162.771 195.06 156.31C199.14 145.933 204.4 136.146 210.05 126.57C215.44 117.444 221.43 108.74 227.82 100.265C233.72 92.4423 240.04 84.9797 246.83 77.9879C253.05 71.5771 260.16 66.0378 266.65 59.8774C274.64 52.3046 283.78 46.2644 292.92 40.3544C303.06 33.8034 313.58 27.8033 324.82 23.0953C335.82 18.4876 346.77 13.8598 358.24 10.4941C373.31 6.07663 388.68 3.1517 404.23 1.2585C411.77 0.336948 419.45 0.136611 427.06 0.206729C436.84 0.296881 446.65 -0.714826 456.41 1.05816C463.53 2.35034 470.77 2.98141 477.92 4.14337C489.5 6.02654 500.81 9.12177 511.97 12.6778C521.29 15.6428 530.2 19.6796 539.17 23.5661C548.81 27.7432 557.74 33.1222 566.71 38.4312C572.54 41.877 577.86 46.1642 583.55 49.8705C592.62 55.7704 600.49 63.1529 608.47 70.325C615 76.1949 620.72 82.9663 626.72 89.4172C628.86 91.7211 630.91 94.1352 632.73 96.6794C638.01 104.082 643.32 111.474 648.31 119.057C655.9 130.577 662.42 142.737 667.58 155.519C673.71 170.684 679.37 186.06 682.52 202.197C683.75 208.498 685.02 214.799 685.94 221.149C686.6 225.717 686.7 230.365 687.12 234.973C687.16 235.373 687.69 235.724 687.99 236.095V277.084L688 277.074Z"
fill="#05CE45"
/>
</g>
</g>
<rect y="194" width="865" height="318" fill="url(#paint1_linear_419_237)" />
<defs>
<linearGradient
id="paint0_linear_419_237"
x1="432"
y1="0"
x2="432"
y2="512"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#E7FFEF" />
<stop offset="0.678759" stop-color="white" />
</linearGradient>
<linearGradient
id="paint1_linear_419_237"
x1="432.5"
y1="194"
x2="432.5"
y2="315.861"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F9FFFB" stop-opacity="0" />
<stop offset="1" stop-color="#F9FFFB" />
</linearGradient>
<clipPath id="clip0_419_237">
<rect x="176" width="512" height="512" rx="256" fill="white" />
</clipPath>
</defs>
</svg>
<svg
v-else
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="modrinth-icon"
>
<g clip-path="url(#clip0_127_331)">
<rect width="512" height="512" fill="url(#paint0_linear_127_331)" />
<g style="mix-blend-mode: overlay">
<g opacity="0.5">
<path
d="M0 274.069H43.65C45.89 299.001 52.25 322.42 62.87 345.249C69.4 342.033 75.37 338.016 81.52 334.3C87.76 330.534 94.07 326.908 100.62 323.061C100.21 321.669 99.95 320.216 99.37 318.914C95.05 309.378 92.47 299.251 90.32 289.114C89.03 283.054 88.41 276.743 87.73 270.513C86.89 262.86 86.94 255.257 87.11 247.654C87.26 241.083 88.11 234.482 89.21 227.991C90.88 218.064 93.39 208.308 96.94 198.852C100.79 188.594 105.19 178.588 111.21 169.382C115.19 163.292 118.97 157.021 123.53 151.382C130.3 142.998 137.75 135.214 146.12 128.273C154.05 121.692 162.16 115.421 171.18 110.483C178.15 106.676 185.39 103.341 192.66 100.115C203.13 95.4674 214.24 92.873 225.39 90.4289C234.67 88.4055 254.03 87.3237 262.96 88.6158C262.51 95.9282 260.63 103.05 259.44 110.262C258.26 117.394 256.94 124.496 255.6 132.109C252.15 132.44 248.73 132.7 245.32 133.121C240.25 133.752 235.15 134.263 230.15 135.265C219.4 137.428 209.13 141.044 199.33 145.973C190.85 150.23 182.98 155.398 175.89 161.709C172.8 164.464 169.52 167.048 166.67 170.033C159.77 177.225 153.99 185.279 148.68 193.713C144.48 200.364 141.45 207.536 138.8 214.839C136.05 222.422 134.33 230.315 132.95 238.308C131.43 247.093 131.9 255.898 132.2 264.653C132.48 272.867 134.18 281 136.49 288.934C137.45 292.239 138.44 295.535 139.62 299.481C156.06 289.705 172.08 280.169 188.47 270.422C185.92 263.631 183.46 257.16 181.05 250.669C178.63 244.178 176.26 237.667 173.78 230.926C176.79 227.871 179.71 224.936 182.6 221.971C193.97 210.291 205.46 198.712 216.6 186.821C219.77 183.436 223.36 181.913 227.66 181.062C238.16 178.978 248.63 176.734 259.11 174.541C265.87 173.128 272.62 171.686 279.69 170.193C285.36 177.175 291.08 184.217 296.94 191.439C295.8 192.671 294.85 193.783 293.82 194.815C287 201.656 279.97 208.308 273.41 215.4C270.18 218.896 266.34 220.709 262.01 221.961C257.09 223.383 252.16 224.745 247.25 226.198C246.5 226.418 245.73 226.909 245.19 227.48C240.62 232.298 236.15 237.216 231.55 241.995C229.9 243.697 229.89 245.31 230.67 247.424C232.91 253.474 234.92 259.604 237.12 265.674C237.5 266.716 238.27 267.668 239.04 268.499C243.55 273.377 248.05 278.266 252.73 282.974C253.48 283.725 255.24 284.055 256.33 283.775C262.57 282.182 268.72 280.289 274.94 278.636C277.49 277.955 279.32 276.443 281.01 274.559C284.1 271.094 287.55 267.898 290.27 264.172C293.55 259.684 297.91 257.901 303.09 256.82C307.44 255.908 311.58 254.045 315.83 252.673C320.23 251.25 324.69 249.998 329.07 248.495C331.08 247.804 332.18 248.305 332.99 250.198C336.16 257.671 339.4 265.114 342.76 272.917C339.97 276.342 337.04 279.919 334.13 283.515C329.45 289.304 324.81 295.124 320.12 300.904C316.16 305.782 311.86 310.42 308.26 315.549C305.66 319.255 302.09 320.717 298.16 321.959C286.33 325.716 274.52 329.502 262.69 333.268C255.61 335.522 248.51 337.756 240.91 340.16C239.33 338.648 237.45 337.055 235.81 335.232C231.16 330.053 226.62 324.794 222.03 319.565C219.63 316.831 217.3 314.006 214.79 311.382C212.08 308.557 211.52 308.557 208.41 310.42C201.88 314.337 195.33 318.243 188.82 322.19C180.32 327.328 171.85 332.507 163.09 337.836C165.26 341.482 168.39 344.257 171.49 346.811C177.22 351.539 183.26 355.907 189.37 360.144C200.53 367.867 212.92 372.815 226.07 376.081C233.82 378.004 241.59 379.286 249.6 379.076C250.74 379.046 251.88 379.446 253.02 379.516C254.64 379.617 256.27 379.667 257.88 379.587C259.19 379.526 260.48 379.106 261.79 379.076C266.03 378.966 266.07 378.996 267.29 383.443C270.74 396.014 274.16 408.585 277.58 421.167C277.7 421.597 277.65 422.068 277.7 422.88C273 423.28 268.42 423.781 263.83 424.022C260.17 424.212 256.5 423.961 252.83 424.092C238.81 424.592 225.08 422.469 211.69 418.733C190.28 412.763 170.56 403.216 152.88 389.523C144.7 383.183 137.41 375.95 130.16 368.648C128.89 367.366 127.97 365.743 126.78 364.371C124.52 361.746 123.87 361.526 120.85 363.189C116.49 365.583 112.24 368.167 107.98 370.722C101.72 374.458 95.49 378.234 89.25 382.001C88.56 382.421 87.91 382.902 87.18 383.403C87.7 387.54 91.09 389.654 93.19 392.448C96.55 396.946 100.45 401.113 104.58 404.939C110.77 410.669 117.38 415.938 123.77 421.457C130.94 427.658 138.86 432.756 146.98 437.604C156.25 443.144 165.84 448.092 175.94 451.808C185.7 455.394 195.65 458.54 205.69 461.244C212.49 463.077 219.62 463.678 226.56 465.061C238.21 467.385 249.99 467.224 261.75 466.924C268.49 466.754 275.21 465.622 281.94 465.071C289.69 464.44 297.25 462.767 304.79 461.014C316.41 458.319 327.64 454.453 338.64 449.795C354.77 442.964 369.63 433.968 383.65 423.601C394.63 415.477 404.59 406.061 413.5 395.774C422.25 385.667 430.72 375.209 436.97 363.219C439.56 358.241 442.38 353.382 445.25 348.184C459.52 353.322 473.65 358.411 488.03 363.59C487.75 364.691 487.65 365.663 487.26 366.484C479.92 381.77 471.35 396.285 460.95 409.727C452.93 420.105 444.71 430.292 435.17 439.307C428.8 445.327 422.41 451.358 415.25 456.496C408.53 461.314 402.16 466.653 395.24 471.151C380.34 480.857 364.49 488.721 347.9 495.262C332.29 501.412 316.07 505.198 299.79 508.774C292.91 510.287 285.7 51Line truncated
fill="white"
/>
<path
d="M512 277.074C511.69 277.615 511.11 278.136 511.09 278.686C510.56 293.612 507.03 308.016 503.73 322.45C499.99 322.05 466.32 309.939 460.41 306.894C461.6 300.173 462.85 293.431 463.97 286.66C465.13 279.648 465.76 272.606 466.1 265.484C466.43 258.563 466.1 251.691 466.02 244.789C465.94 237.858 465.47 231.006 463.48 223.784C449.94 227.39 436.76 230.896 423.27 234.492C423.19 235.964 422.74 237.507 423.09 238.839C424.63 244.749 423.88 250.739 423.99 256.699C424.43 280.079 419.08 302.226 409.83 323.592C404.73 335.372 398.24 346.311 390.66 356.598C383.95 365.713 376.43 374.228 367.81 381.53C358.36 389.543 348.76 397.497 337.41 402.896C332.18 405.39 327.03 408.045 321.83 410.599C321.43 410.799 320.9 410.759 320.49 410.819C318.33 407.514 310.2 378.274 308.59 368.177C357.62 341.532 381.58 300.664 378.95 244.639C372.26 194.314 345.33 159.555 298.14 139.752C300.69 125.278 303.28 110.593 305.96 95.3973C310 96.7796 313.75 97.8414 317.32 99.3439C328.19 103.932 338.89 108.93 348.68 115.541C361.67 124.316 373.44 134.654 383.65 146.473C394.52 159.055 403.39 173.078 409.96 188.434C411.1 191.099 411.3 191.279 413.95 190.578C426.53 187.272 439.11 183.917 452.08 180.481C451.53 178.608 451.18 176.845 450.5 175.232C442.95 157.262 433.28 140.493 421.33 125.107C414.3 116.052 406.71 107.398 398.08 99.8448C385.23 88.6058 371.51 78.599 356.54 70.1948C345.76 64.1446 334.5 59.3665 322.93 55.3798C312.2 51.6836 301.17 48.8788 289.88 46.9756C274.75 44.4313 259.58 43.7201 244.33 44.221C238.75 44.4013 233.21 45.6033 227.63 46.004C218.2 46.6851 209.07 48.979 199.97 51.2128C191.14 53.3764 182.57 56.4516 174.19 60.0276C170.54 61.5903 166.73 62.8324 163.19 64.6053C157.26 67.5804 151.36 70.6455 145.67 74.0713C140.29 77.3068 135.08 80.8628 130.03 84.5991C124.85 88.4255 119.84 92.5124 114.96 96.7195C110.31 100.726 105.67 104.793 101.47 109.261C91.13 120.259 81.6 131.919 74.05 145.061C70.17 151.812 66.21 158.564 62.88 165.596C55.64 180.881 50.13 196.788 46.94 213.466C46.13 217.674 44.91 221.79 44.92 226.148C44.92 227.36 44.13 228.582 43.6 230.084H0C0 229.083 0 228.081 0 227.089C0.32 226.548 0.92 226.008 0.9 225.477C0.77 220.298 2.02 215.33 2.92 210.291C5.03 198.581 7.94 187.072 11.69 175.803C13.88 169.212 16.51 162.771 19.06 156.31C23.14 145.933 28.4 136.146 34.05 126.57C39.44 117.444 45.43 108.74 51.82 100.265C57.72 92.4423 64.04 84.9797 70.83 77.9879C77.05 71.5771 84.16 66.0378 90.65 59.8774C98.64 52.3046 107.78 46.2644 116.92 40.3544C127.06 33.8034 137.58 27.8033 148.82 23.0953C159.82 18.4876 170.77 13.8598 182.24 10.4941C197.31 6.07663 212.68 3.1517 228.23 1.2585C235.77 0.336948 243.45 0.136611 251.06 0.206729C260.84 0.296881 270.65 -0.714826 280.41 1.05816C287.53 2.35034 294.77 2.98141 301.92 4.14337C313.5 6.02654 324.81 9.12177 335.97 12.6778C345.29 15.6428 354.2 19.6796 363.17 23.5661C372.81 27.7432 381.74 33.1222 390.71 38.4312C396.54 41.877 401.86 46.1642 407.55 49.8705C416.62 55.7705 424.49 63.1529 432.47 70.325C439 76.1949 444.72 82.9663 450.72 89.4172C452.86 91.7211 454.91 94.1352 456.73 96.6795C462.01 104.082 467.32 111.474 472.31 119.057C479.9 130.577 486.42 142.737 491.58 155.519C497.71 170.684 503.37 186.06 506.52 202.197C507.75 208.498 509.02 214.799 509.94 221.149C510.6 225.717 510.7 230.365 511.12 234.973C511.16 235.373 511.69 235.724 511.99 236.095V277.084L512 277.074Z"
fill="white"
/>
</g>
</g>
</g>
<defs>
<linearGradient
id="paint0_linear_127_331"
x1="256"
y1="0"
x2="256"
y2="512"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#05CE45" />
<stop offset="0.678759" stop-color="#051F10" />
</linearGradient>
<clipPath id="clip0_127_331">
<rect width="512" height="512" rx="256" fill="white" />
</clipPath>
</defs>
</svg>
<div class="overlay">
<h2 class="main-header">
Read more about <br />
<strong class="main-header-strong">Modrinth</strong>
</h2>
<ButtonStyled color="brand">
<a
href="https://blog.modrinth.com/?utm_source=website&utm_source=homepage&utm_campaign=newsletter"
>
<NewspaperIcon />
Visit the blog
</a>
</ButtonStyled>
</div>
</div>
</div>
</template>
@@ -431,15 +532,14 @@ import {
CompassIcon,
LogInIcon,
DashboardIcon,
NewspaperIcon,
SearchIcon,
CalendarIcon,
ModrinthIcon,
} from "@modrinth/assets";
import { ref } from "vue";
import PrismLauncherLogo from "~/assets/images/external/prism.svg?component";
import ATLauncherLogo from "~/assets/images/external/atlauncher.svg?component";
import ProjectCard from "~/components/ui/ProjectCard.vue";
import LatestNewsRow from "~/components/ui/news/LatestNewsRow.vue";
import { homePageProjects, homePageSearch, homePageNotifs } from "~/generated/state.json";
+5 -5
View File
@@ -147,9 +147,9 @@
<tbody>
<tr v-for="item in platformRevenueData" :key="item.time">
<td>{{ formatDate(dayjs.unix(item.time)) }}</td>
<td>{{ formatMoney(Number(item.revenue) + Number(item.creator_revenue)) }}</td>
<td>{{ formatMoney(Number(item.creator_revenue)) }}</td>
<td>{{ formatMoney(Number(item.revenue)) }}</td>
<td>{{ formatMoney(item.revenue) }}</td>
<td>{{ formatMoney(item.creator_revenue) }}</td>
<td>{{ formatMoney(item.revenue - item.creator_revenue) }}</td>
</tr>
</tbody>
</table>
@@ -187,6 +187,6 @@ const { data: transparencyInformation } = await useAsyncData("payout/platform_re
}),
);
const platformRevenue = (transparencyInformation.value as any)?.all_time;
const platformRevenueData = (transparencyInformation.value as any)?.data?.slice(0, 5) ?? [];
const platformRevenue = transparencyInformation.value.all_time;
const platformRevenueData = transparencyInformation.value.data.slice(0, 5);
</script>
+2 -2
View File
@@ -122,8 +122,8 @@
<h3>Creator Monetization Program data</h3>
<p>
When you sign up for our
<nuxt-link to="/news/article/creator-monetization-beta">
Creator Monetization Program</nuxt-link
<a href="https://blog.modrinth.com/p/creator-monetization-beta">
Creator Monetization Program</a
>
(the "CMP"), we collect:
</p>
@@ -8,11 +8,11 @@
:format-label="(x) => (x === 'all' ? 'All' : formatProjectType(x) + 's')"
/>
<button v-if="oldestFirst" class="iconified-button push-right" @click="oldestFirst = false">
<SortDescIcon />
<SortDescendingIcon />
Sorting by oldest
</button>
<button v-else class="iconified-button push-right" @click="oldestFirst = true">
<SortAscIcon />
<SortAscendingIcon />
Sorting by newest
</button>
<button
@@ -109,8 +109,8 @@ import { Avatar, ProjectStatusBadge, Chips, useRelativeTime } from "@modrinth/ui
import {
UnknownIcon,
EyeIcon,
SortAscIcon,
SortDescIcon,
SortAscendingIcon,
SortDescendingIcon,
IssuesIcon,
ScaleIcon,
} from "@modrinth/assets";
@@ -1,264 +0,0 @@
<script setup lang="ts">
import { ButtonStyled } from "@modrinth/ui";
import { RssIcon, GitGraphIcon } from "@modrinth/assets";
import dayjs from "dayjs";
import { articles as rawArticles } from "@modrinth/blog";
import { computed } from "vue";
import ShareArticleButtons from "~/components/ui/ShareArticleButtons.vue";
import NewsletterButton from "~/components/ui/NewsletterButton.vue";
const config = useRuntimeConfig();
const route = useRoute();
const rawArticle = rawArticles.find((article) => article.slug === route.params.slug);
if (!rawArticle) {
throw createError({
fatal: true,
statusCode: 404,
message: "The requested article could not be found.",
});
}
const html = await rawArticle.html();
const article = computed(() => ({
...rawArticle,
path: `/news/${rawArticle.slug}`,
thumbnail: rawArticle.thumbnail
? `/news/article/${rawArticle.slug}/thumbnail.webp`
: `/news/default.webp`,
title: rawArticle.title,
summary: rawArticle.summary,
date: rawArticle.date,
html,
}));
const articleTitle = computed(() => article.value.title);
const articleUrl = computed(() => `https://modrinth.com/news/article/${route.params.slug}`);
const thumbnailPath = computed(() =>
article.value.thumbnail
? `${config.public.siteUrl}${article.value.thumbnail}`
: `${config.public.siteUrl}/news/default.jpg`,
);
const dayjsDate = computed(() => dayjs(article.value.date));
useSeoMeta({
title: () => `${articleTitle.value} - Modrinth News`,
ogTitle: () => articleTitle.value,
description: () => article.value.summary,
ogDescription: () => article.value.summary,
ogType: "article",
ogImage: () => thumbnailPath.value,
articlePublishedTime: () => dayjsDate.value.toISOString(),
twitterCard: "summary_large_image",
twitterImage: () => thumbnailPath.value,
});
</script>
<template>
<div class="page experimental-styles-within py-6">
<div
class="flex flex-wrap items-center justify-between gap-4 border-0 border-b-[1px] border-solid border-divider px-6 pb-6"
>
<nuxt-link :to="`/news`">
<h1 class="m-0 text-3xl font-extrabold hover:underline">News</h1>
</nuxt-link>
<div class="flex gap-2">
<NewsletterButton />
<ButtonStyled circular>
<a v-tooltip="`RSS feed`" aria-label="RSS feed" href="/news/feed/rss.xml" target="_blank">
<RssIcon />
</a>
</ButtonStyled>
<ButtonStyled circular icon-only>
<a v-tooltip="`Changelog`" href="/news/changelog" aria-label="Changelog">
<GitGraphIcon />
</a>
</ButtonStyled>
</div>
</div>
<article class="mt-6 flex flex-col gap-4 px-6">
<h2 class="m-0 text-2xl font-extrabold leading-tight sm:text-4xl">{{ article.title }}</h2>
<p class="m-0 text-base leading-tight sm:text-lg">{{ article.summary }}</p>
<div class="mt-auto text-sm text-secondary sm:text-base">
Posted on {{ dayjsDate.format("MMMM D, YYYY") }}
</div>
<ShareArticleButtons :title="article.title" :url="articleUrl" />
<img
:src="article.thumbnail"
class="aspect-video w-full rounded-xl border-[1px] border-solid border-button-border object-cover sm:rounded-2xl"
:alt="article.title"
/>
<div class="markdown-body" v-html="article.html" />
<h3
class="mb-0 mt-4 border-0 border-t-[1px] border-solid border-divider pt-4 text-base font-extrabold sm:text-lg"
>
Share this article
</h3>
<ShareArticleButtons :title="article.title" :url="articleUrl" />
</article>
</div>
</template>
<style lang="scss" scoped>
.page {
> *:not(.full-width-bg),
> .full-width-bg > * {
max-width: 56rem;
margin-inline: auto;
}
}
.brand-gradient-bg {
background: var(--brand-gradient-bg);
border-color: var(--brand-gradient-border);
}
@media (max-width: 640px) {
.page {
padding-top: 1rem;
padding-bottom: 1rem;
}
article {
gap: 1rem;
}
}
:deep(.markdown-body) {
h1,
h2 {
border-bottom: none;
padding: 0;
}
ul > li:not(:last-child) {
margin-bottom: 0.5rem;
}
ul,
ol {
p {
margin-bottom: 0.5rem;
}
}
ul,
ol {
strong {
color: var(--color-contrast);
font-weight: 600;
}
}
h1,
h2,
h3 {
margin-bottom: 0.25rem;
}
h1 {
font-size: 1.5rem;
@media (min-width: 640px) {
font-size: 2rem;
}
}
h2 {
font-size: 1.25rem;
@media (min-width: 640px) {
font-size: 1.5rem;
}
}
h3 {
font-size: 1.125rem;
@media (min-width: 640px) {
font-size: 1.25rem;
}
}
p {
margin-bottom: 1.25rem;
font-size: 0.875rem;
@media (min-width: 640px) {
font-size: 1rem;
}
}
a {
color: var(--color-brand);
font-weight: 600;
&:hover {
text-decoration: underline;
}
}
h1,
h2 {
a {
font-weight: 800;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
a {
color: var(--color-contrast);
}
}
img {
border: 1px solid var(--color-button-border);
border-radius: var(--radius-md);
@media (min-width: 640px) {
border-radius: var(--radius-lg);
}
}
> img,
> :has(img:first-child:last-child) {
display: flex;
justify-content: center;
}
@media (max-width: 640px) {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 0.5rem;
}
p {
margin-bottom: 1rem;
}
ul,
ol {
padding-left: 1.25rem;
}
pre {
overflow-x: auto;
font-size: 0.75rem;
}
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
}
</style>
@@ -6,21 +6,6 @@
</div>
</template>
<script lang="ts" setup>
const config = useRuntimeConfig();
useSeoMeta({
title: "Modrinth Changelog",
ogTitle: "Modrinth Changelog",
description: "Keep up-to-date on what's new with Modrinth.",
ogDescription: "Keep up-to-date on what's new with Modrinth.",
ogType: "website",
ogImage: () => `${config.public.siteUrl}/news/changelog.webp`,
twitterCard: "summary_large_image",
twitterImage: () => `${config.public.siteUrl}/news/changelog.webp`,
});
</script>
<style lang="scss" scoped>
.page {
padding: 1rem;
-161
View File
@@ -1,161 +0,0 @@
<script setup lang="ts">
import { ButtonStyled, NewsArticleCard } from "@modrinth/ui";
import { ChevronRightIcon, RssIcon, GitGraphIcon } from "@modrinth/assets";
import dayjs from "dayjs";
import { articles as rawArticles } from "@modrinth/blog";
import { computed, ref } from "vue";
import NewsletterButton from "~/components/ui/NewsletterButton.vue";
const articles = ref(
rawArticles
.map((article) => ({
...article,
path: `/news/article/${article.slug}/`,
thumbnail: article.thumbnail
? `/news/article/${article.slug}/thumbnail.webp`
: `/news/default.webp`,
title: article.title,
summary: article.summary,
date: article.date,
}))
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
);
const featuredArticle = computed(() => articles.value?.[0]);
const config = useRuntimeConfig();
useSeoMeta({
title: "Modrinth News",
ogTitle: "Modrinth News",
description: "Keep up-to-date on the latest news from Modrinth.",
ogDescription: "Keep up-to-date on the latest news from Modrinth.",
ogType: "website",
ogImage: () => `${config.public.siteUrl}/news/thumbnail.webp`,
twitterCard: "summary_large_image",
twitterImage: () => `${config.public.siteUrl}/news/thumbnail.webp`,
});
</script>
<template>
<div class="page experimental-styles-within py-6">
<div class="flex flex-wrap items-center justify-between gap-4 px-6">
<div>
<h1 class="m-0 text-3xl font-extrabold">News</h1>
</div>
<div class="flex gap-2">
<NewsletterButton />
<ButtonStyled circular>
<a v-tooltip="`RSS feed`" aria-label="RSS feed" href="/news/feed/rss.xml" target="_blank">
<RssIcon />
</a>
</ButtonStyled>
<ButtonStyled circular icon-only>
<a v-tooltip="`Changelog`" href="/news/changelog" aria-label="Changelog">
<GitGraphIcon />
</a>
</ButtonStyled>
</div>
</div>
<template v-if="articles && articles.length">
<div
v-if="featuredArticle"
class="full-width-bg brand-gradient-bg mt-6 border-0 border-y-[1px] border-solid py-4"
>
<nuxt-link
:to="`${featuredArticle.path}`"
class="active:scale-[0.99]! group flex cursor-pointer transition-all ease-in-out hover:brightness-125"
>
<article class="featured-article px-6">
<div class="featured-image-container">
<img
:src="featuredArticle.thumbnail"
class="aspect-video w-full rounded-2xl border-[1px] border-solid border-button-border object-cover"
/>
</div>
<div class="featured-content">
<p class="m-0 font-bold">Featured article</p>
<h3 class="m-0 text-3xl leading-tight group-hover:underline">
{{ featuredArticle?.title }}
</h3>
<p class="m-0 text-lg leading-tight">{{ featuredArticle?.summary }}</p>
<div class="mt-auto text-secondary">
{{ dayjs(featuredArticle?.date).format("MMMM D, YYYY") }}
</div>
</div>
</article>
</nuxt-link>
</div>
<div class="mt-6 px-6">
<div class="group flex w-fit items-center gap-1">
<h2 class="m-0 text-xl font-extrabold">More articles</h2>
<ChevronRightIcon
v-if="false"
class="ml-0 h-6 w-6 transition-all group-hover:ml-1 group-hover:text-brand"
/>
</div>
<div class="mt-4 grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
<NewsArticleCard
v-for="article in articles.slice(1)"
:key="article.path"
:article="article"
/>
</div>
</div>
</template>
<div v-else class="pt-4">Error: Articles could not be loaded.</div>
</div>
</template>
<style lang="scss" scoped>
.page {
> *:not(.full-width-bg),
> .full-width-bg > * {
max-width: 56rem;
margin-inline: auto;
}
}
.brand-gradient-bg {
background: var(--brand-gradient-bg);
border-color: var(--brand-gradient-border);
}
.featured-article {
display: flex;
flex-wrap: wrap;
gap: 1rem;
width: 100%;
}
.featured-image-container {
flex: 1;
min-width: 0;
}
.featured-content {
flex: 1;
min-width: 16rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
@media (max-width: 640px) {
.featured-article {
flex-direction: column;
}
.featured-image-container {
order: 1;
}
.featured-content {
order: 2;
min-width: 0;
}
}
</style>
@@ -98,10 +98,7 @@
{{ formatCompactNumber(projects?.length || 0) }}
projects
</div>
<div
v-tooltip="sumDownloads.toLocaleString()"
class="flex items-center gap-2 font-semibold"
>
<div class="flex items-center gap-2 font-semibold">
<DownloadIcon class="h-6 w-6 text-secondary" />
{{ formatCompactNumber(sumDownloads) }}
downloads
@@ -149,7 +146,9 @@
</ContentPageHeader>
</div>
<div class="normal-page__sidebar">
<AdPlaceholder v-if="!auth.user" />
<AdPlaceholder
v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus"
/>
<div class="card flex-card">
<h2>Members</h2>
@@ -285,13 +284,14 @@ import NavTabs from "~/components/ui/NavTabs.vue";
const vintl = useVIntl();
const { formatMessage } = vintl;
const formatCompactNumber = useCompactNumber(true);
const formatCompactNumber = useCompactNumber();
const auth = await useAuth();
const user = await useUser();
const cosmetics = useCosmetics();
const route = useNativeRoute();
const tags = useTags();
const flags = useFeatureFlags();
const config = useRuntimeConfig();
let orgId = useRouteId();
@@ -201,8 +201,8 @@
icon-only
@click="updateDescending()"
>
<SortDescIcon v-if="descending" />
<SortAscIcon v-else />
<SortDescendingIcon v-if="descending" />
<SortAscendingIcon v-else />
</Button>
</div>
</div>
@@ -308,8 +308,8 @@ import {
XIcon,
EditIcon,
SaveIcon,
SortAscIcon,
SortDescIcon,
SortAscendingIcon,
SortDescendingIcon,
} from "@modrinth/assets";
import { Button, Modal, Avatar, CopyCode, Badge, Checkbox, commonMessages } from "@modrinth/ui";
+2 -2
View File
@@ -73,7 +73,7 @@
<SparklesIcon class="h-8 w-8 text-purple" />
<span class="text-lg font-bold">Remove all ads</span>
<span class="leading-5 text-secondary">
Never see an advertisement again on the Modrinth app.
Never see an advertisement again on the Modrinth app or the website.
</span>
</div>
<div class="flex flex-col gap-4 rounded-xl bg-bg-raised p-4">
@@ -82,7 +82,7 @@
<span class="leading-5 text-secondary">Get an exclusive badge on your user page.</span>
</div>
</div>
<span class="mt-4 text-secondary">...and much more coming soon™!</span>
<span class="mt-4 text-secondary">...and much more coming soon!</span>
</div>
</template>
<script setup>
@@ -55,7 +55,12 @@
}"
aria-label="Filters"
>
<AdPlaceholder v-if="!auth.user && !server" />
<AdPlaceholder
v-if="
(!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus) &&
!server
"
/>
<div v-if="filtersMenuOpen" class="fixed inset-0 z-40 bg-bg"></div>
<div
class="flex flex-col gap-3"
@@ -136,7 +136,7 @@
class="flex min-w-0 flex-1 items-center gap-2 rounded-xl p-2"
draggable="false"
>
<Avatar
<UiAvatar
:src="mod.icon_url"
size="sm"
alt="Server Icon"
@@ -349,7 +349,7 @@ import {
FileIcon,
IssuesIcon,
} from "@modrinth/assets";
import { Avatar, ButtonStyled } from "@modrinth/ui";
import { ButtonStyled } from "@modrinth/ui";
import { ref, computed, watch, onMounted, onUnmounted } from "vue";
import type { Mod } from "@modrinth/utils";
import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
@@ -104,7 +104,7 @@
<tr v-for="property in properties" :key="property.name">
<td v-if="property.value !== 'Unknown'" class="py-3">{{ property.name }}</td>
<td v-if="property.value !== 'Unknown'" class="px-4">
<CopyCode :text="property.value" />
<UiCopyCode :text="property.value" />
</td>
</tr>
</tbody>
@@ -115,10 +115,13 @@
</template>
<script setup lang="ts">
import { ButtonStyled, CopyCode } from "@modrinth/ui";
import { ButtonStyled } from "@modrinth/ui";
import { CopyIcon, ExternalIcon, EyeIcon, EyeOffIcon } from "@modrinth/assets";
import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
const route = useNativeRoute();
const serverId = route.params.id as string;
const props = defineProps<{
server: ModrinthServer;
}>();
@@ -144,8 +147,8 @@ const copyToClipboard = (name: string, textToCopy?: string) => {
};
const properties = [
{ name: "Server ID", value: props.server.serverId ?? "Unknown" },
{ name: "Node", value: data.value?.node?.instance ?? "Unknown" },
{ name: "Server ID", value: serverId ?? "Unknown" },
{ name: "Node", value: data.value?.datacenter ?? "Unknown" },
{ name: "Kind", value: data.value?.upstream?.kind ?? data.value?.loader ?? "Unknown" },
{ name: "Project ID", value: data.value?.upstream?.project_id ?? "Unknown" },
{ name: "Version ID", value: data.value?.upstream?.version_id ?? "Unknown" },
@@ -194,7 +194,7 @@
Primary allocation
</span>
<CopyCode :text="`${serverIP}:${serverPrimaryPort}`" />
<UiCopyCode :text="`${serverIP}:${serverPrimaryPort}`" />
</div>
</div>
@@ -228,7 +228,7 @@
</div>
<div class="flex w-full flex-row items-center gap-2 sm:w-auto">
<CopyCode :text="`${serverIP}:${allocation.port}`" />
<UiCopyCode :text="`${serverIP}:${allocation.port}`" />
<ButtonStyled icon-only>
<button
class="!w-full sm:!w-auto"
@@ -273,7 +273,7 @@ import {
UploadIcon,
IssuesIcon,
} from "@modrinth/assets";
import { ButtonStyled, NewModal, ConfirmModal, CopyCode } from "@modrinth/ui";
import { ButtonStyled, NewModal, ConfirmModal } from "@modrinth/ui";
import { ref, computed, nextTick } from "vue";
import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
@@ -35,7 +35,7 @@
<li v-if="fetchError" class="text-red">
<p>Error details:</p>
<CopyCode
<UiCopyCode
:text="(fetchError as ModrinthServersFetchError).message || 'Unknown error'"
:copyable="false"
:selectable="false"
@@ -120,7 +120,7 @@
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import Fuse from "fuse.js";
import { HammerIcon, PlusIcon, SearchIcon } from "@modrinth/assets";
import { ButtonStyled, CopyCode } from "@modrinth/ui";
import { ButtonStyled } from "@modrinth/ui";
import type { Server, ModrinthServersFetchError } from "@modrinth/utils";
import { reloadNuxtApp } from "#app";
import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
+2 -2
View File
@@ -12,7 +12,7 @@
link="/settings"
:label="formatMessage(commonSettingsMessages.appearance)"
>
<PaintbrushIcon />
<PaintBrushIcon />
</NavStackItem>
<NavStackItem
v-if="isStaging"
@@ -82,7 +82,7 @@
import {
ServerIcon,
GridIcon,
PaintbrushIcon,
PaintBrushIcon,
UserIcon,
ShieldIcon,
KeyIcon,
+2 -2
View File
@@ -422,7 +422,7 @@ import {
} from "@modrinth/assets";
import QrcodeVue from "qrcode.vue";
import { ConfirmModal } from "@modrinth/ui";
import GithubIcon from "assets/icons/auth/sso-github.svg";
import GitHubIcon from "assets/icons/auth/sso-github.svg";
import MicrosoftIcon from "assets/icons/auth/sso-microsoft.svg";
import GoogleIcon from "assets/icons/auth/sso-google.svg";
import SteamIcon from "assets/icons/auth/sso-steam.svg";
@@ -583,7 +583,7 @@ const authProviders = [
{
id: "github",
display: "GitHub",
icon: GithubIcon,
icon: GitHubIcon,
},
{
id: "gitlab",
+5 -3
View File
@@ -80,7 +80,6 @@
projects
</div>
<div
v-tooltip="sumDownloads.toLocaleString()"
class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
>
<DownloadIcon class="h-6 w-6 text-secondary" />
@@ -330,7 +329,9 @@
</div>
</div>
</div>
<AdPlaceholder v-if="!auth.user" />
<AdPlaceholder
v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus"
/>
</div>
</div>
</div>
@@ -385,12 +386,13 @@ const route = useNativeRoute();
const auth = await useAuth();
const cosmetics = useCosmetics();
const tags = useTags();
const flags = useFeatureFlags();
const config = useRuntimeConfig();
const vintl = useVIntl();
const { formatMessage } = vintl;
const formatCompactNumber = useCompactNumber(true);
const formatCompactNumber = useCompactNumber();
const formatRelativeTime = useRelativeTime();
Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

Loaded 100 of 416 files, more files were not shown because too many files have changed in this diff. Show more