start new website + layouts lib

.agents/skills/figma-mcp/SKILL.md

@@ -14,7 +14,7 @@ Read `packages/ui/AGENTS.md` in full.
 3. Treat the result as reference code and adapt it to the Modrinth codebase.
 4. Map Figma color variables to the applicable `surface-*` and `text-*` tokens. Do not use aliased Figma names directly.
 5. Reuse applicable components from `packages/ui/src/components/` before creating new ones. Also refer to `standards/frontend/COMPONENT_STRUCTURE.md`
-6. Read `packages/assets/styles/variables.scss` when Figma does not supply a required token.
+6. Read `packages/assets/styles/variables.css` when Figma does not supply a required token.
 7. Use exact spacing values from the design.
 8. Implement the result as a Vue SFC with Tailwind classes and the existing component library.
 

.vscode/settings.json

@@ -35,6 +35,8 @@
 	"i18n-ally.localesPaths": [
 		"packages/ui/src/locales",
 		"apps/frontend/src/locales",
+		"apps/website/src/locales",
+		"packages/layouts/src/locales",
 		"packages/moderation/src/locales"
 	],
 	"i18n-ally.pathMatcher": "{locale}/index.{ext}",

apps/app-frontend/src/assets/stylesheets/global.scss

@@ -184,7 +184,7 @@ img {
 	}
 }
 
-@import '@modrinth/assets/omorphia.scss';
+@import '@modrinth/assets/omorphia.css';
 
 input {
 	border-radius: var(--size-rounded-sm);

apps/docs/astro.config.mjs

@@ -25,8 +25,8 @@ export default defineConfig({
 				replacesTitle: true,
 			},
 			customCss: [
-				'@modrinth/assets/styles/variables.scss',
-				'@modrinth/assets/styles/inter.scss',
+				'@modrinth/assets/styles/variables.css',
+				'@modrinth/assets/styles/inter.css',
 				'./src/styles/modrinth.css',
 			],
 			plugins: [

apps/frontend/src/assets/styles/global.scss

@@ -1,4 +1,4 @@
-@import '@modrinth/assets/styles/reset.scss';
+@import '@modrinth/assets/styles/reset.css';
 
 html {
 	--dark-color-text: #b0bac5;

apps/website/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

apps/website/.prettierignore

@@ -0,0 +1,7 @@
+**/.nuxt
+**/dist
+**/.output
+**/.data
+**/.wrangler
+src/locales/**
+src/assets/**/*.svg

apps/website/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

apps/website/eslint.config.mjs

@@ -0,0 +1,9 @@
+import config from '@modrinth/tooling-config/eslint/nuxt.mjs'
+export default config.append([
+	{
+		rules: {
+			'import/no-unresolved': 'off',
+			'no-undef': 'off',
+		},
+	},
+])

apps/website/nuxt.config.ts

@@ -0,0 +1,28 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+	srcDir: 'src/',
+	compatibilityDate: '2025-07-15',
+	devtools: { enabled: true },
+	devServer: {
+		port: 42069,
+	},
+	app: {
+		head: {
+			title: 'Modrinth 2',
+			htmlAttrs: {
+				lang: 'en',
+			},
+			link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+		},
+	},
+	future: {
+		compatibilityVersion: 5,
+	},
+	css: ['~/assets/styles/styles.css'],
+	postcss: {
+		plugins: {
+			tailwindcss: {},
+			autoprefixer: {},
+		},
+	},
+})

apps/website/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "@modrinth/website",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"build": "nuxt build",
+		"dev": "nuxt dev",
+		"generate": "nuxt generate",
+		"preview": "nuxt preview",
+		"postinstall": "nuxt prepare",
+		"lint": "eslint . && prettier --check .",
+		"fix": "eslint . --fix && prettier --write .",
+		"intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
+		"intl:prune-local": "pnpm -w scripts i18n-icu-contract prune-local --scope apps/website"
+	},
+	"dependencies": {
+		"@modrinth/assets": "workspace:*",
+		"@modrinth/layouts": "workspace:*",
+		"@modrinth/ui": "workspace:*",
+		"intl-messageformat": "^10.7.7",
+		"lru-cache": "^11.2.4",
+		"nuxt": "^4.5.2",
+		"vue": "^3.5.41",
+		"vue-router": "^5.2.0"
+	},
+	"devDependencies": {
+		"@formatjs/cli": "^6.2.12",
+		"@modrinth/tooling-config": "workspace:*",
+		"autoprefixer": "^10.5.4",
+		"postcss": "^8.5.26",
+		"tailwindcss": "^3.4.19",
+		"vite-tsconfig-paths": "^6.1.1"
+	}
+}

apps/website/src/app.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { NuxtModrinthClient } from '@modrinth/api-client'
+import { provideModrinthClient, providePageContext } from '@modrinth/ui'
+
+provideModrinthClient(
+	new NuxtModrinthClient({
+		labrinthBaseUrl: 'https://api.modrinth.com',
+	}),
+)
+
+providePageContext({
+	hierarchicalSidebarAvailable: ref(false),
+	showAds: ref(false),
+	adConsentAvailable: ref(false),
+	floatingActionBarOffsets: {
+		left: ref(0),
+		right: ref(0),
+	},
+})
+</script>
+<template>
+	<div class="page-layout">
+		<NuxtPage />
+	</div>
+</template>
+<style scoped>
+.page-layout {
+	@apply max-w-[min(80rem,100%-1.5rem)] mx-auto h-[100dvh] pt-6;
+
+	&:has(#page-sidebar:not(:empty)) {
+		@apply grid grid-cols-[1fr_300px];
+		grid-template-areas: 'anything sidebar';
+	}
+}
+</style>
+<style>
+#page-sidebar {
+	@apply pl-4 border-l border-surface-5;
+	grid-area: sidebar;
+}
+</style>