mirror of
https://github.com/BeamMP/Docs.git
synced 2026-10-25 13:40:06 +00:00
New VitePress and design look + little work on update to work with.
This commit is contained in:
Starystars67 committed
1 parent
0ed2597186
commit
97a7aaf643
141 files changed
+4356
-539
No files matched your search
@@ -0,0 +1,234 @@
|
||||
import { defineConfig, type DefaultTheme } from 'vitepress'
|
||||
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
|
||||
import container from 'markdown-it-container'
|
||||
import type Token from 'markdown-it/lib/token.mjs'
|
||||
import enTranslations from '../en/nav-translations.json'
|
||||
import deTranslations from '../de/nav-translations.json'
|
||||
import frTranslations from '../fr/nav-translations.json'
|
||||
import esTranslations from '../es/nav-translations.json'
|
||||
import itTranslations from '../it/nav-translations.json'
|
||||
import ruTranslations from '../ru/nav-translations.json'
|
||||
import zhTranslations from '../zh/nav-translations.json'
|
||||
|
||||
type LocaleKey = 'root' | 'de' | 'fr' | 'es' | 'it' | 'ru' | 'zh'
|
||||
|
||||
type NavItem = {
|
||||
text: string
|
||||
link?: string
|
||||
items?: NavItem[]
|
||||
}
|
||||
|
||||
type TranslationMap = Record<string, string>
|
||||
|
||||
const localeBasePath: Record<LocaleKey, string> = {
|
||||
root: '',
|
||||
de: '/de/',
|
||||
fr: '/fr/',
|
||||
es: '/es/',
|
||||
it: '/it/',
|
||||
ru: '/ru/',
|
||||
zh: '/zh/'
|
||||
}
|
||||
|
||||
const translations: Record<LocaleKey, TranslationMap> = {
|
||||
root: enTranslations as TranslationMap,
|
||||
de: deTranslations as TranslationMap,
|
||||
fr: frTranslations as TranslationMap,
|
||||
es: esTranslations as TranslationMap,
|
||||
it: itTranslations as TranslationMap,
|
||||
ru: ruTranslations as TranslationMap,
|
||||
zh: zhTranslations as TranslationMap
|
||||
}
|
||||
|
||||
const localizeLink = (locale: LocaleKey, link?: string) => {
|
||||
if (!link || link.startsWith('http')) {
|
||||
return link
|
||||
}
|
||||
|
||||
if (locale === 'root') {
|
||||
return `/en/${link === '/' ? '' : link.replace(/^\//, '')}`
|
||||
}
|
||||
|
||||
return `${localeBasePath[locale]}${link === '/' ? '' : link.replace(/^\//, '')}`
|
||||
}
|
||||
|
||||
const localizeItems = (locale: LocaleKey, items: NavItem[]): DefaultTheme.NavItem[] => {
|
||||
return items.map((item) => {
|
||||
const localized: Record<string, unknown> = {
|
||||
text: translations[locale][item.text] ?? item.text
|
||||
}
|
||||
|
||||
if (item.link) {
|
||||
localized.link = localizeLink(locale, item.link)
|
||||
}
|
||||
|
||||
if (item.items) {
|
||||
localized.items = localizeItems(locale, item.items)
|
||||
}
|
||||
|
||||
return localized as unknown as DefaultTheme.NavItem
|
||||
})
|
||||
}
|
||||
|
||||
const baseNav: NavItem[] = [
|
||||
{ text: 'Home', link: '/' },
|
||||
{
|
||||
text: 'Support',
|
||||
items: [
|
||||
{ text: 'Playing BeamMP', link: '/game/getting-started' },
|
||||
{ text: 'Running a BeamMP-Server', link: '/server/create-a-server' },
|
||||
{ text: 'Mod & Resource Creation', link: '/guides/mod-creation/server/getting-started' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'FAQ',
|
||||
items: [
|
||||
{ text: 'How to check for CGNAT?', link: '/FAQ/How-to-check-for-CGNAT' },
|
||||
{ text: 'Where can I find my IP address?', link: '/FAQ/where-to-find-my-IP' },
|
||||
{ text: 'How to remove mods?', link: '/FAQ/Clearing-mods' },
|
||||
{ text: 'Manually updating the Launcher', link: '/FAQ/Update-launcher' },
|
||||
{ text: 'Changing the Launcher port', link: '/FAQ/Change-launcher-port' },
|
||||
{ text: 'Creating Exclusions (Defender)', link: '/FAQ/Defender-exclusions' },
|
||||
{ text: 'Player FAQ', link: '/FAQ/player-faq' },
|
||||
{ text: 'Game FAQ', link: '/FAQ/game-faq' },
|
||||
{ text: 'Server FAQ', link: '/FAQ/server-faq' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Development Guides',
|
||||
items: [
|
||||
{ text: 'Development Environment Setup', link: '/guides/beammp-dev/beammp-dev' },
|
||||
{
|
||||
text: 'Mod Creation',
|
||||
items: [{ text: 'Client Scripting Reference', link: '/scripting/mod-reference' }]
|
||||
},
|
||||
{
|
||||
text: 'Resource Creation',
|
||||
items: [{ text: 'Server Resources', link: '/guides/mod-creation/server/getting-started' }]
|
||||
},
|
||||
{
|
||||
text: 'Scripting Reference',
|
||||
items: [
|
||||
{ text: 'Mod (In-Game)', link: '/scripting/mod-reference' },
|
||||
{
|
||||
text: 'Server',
|
||||
link: '/scripting/server/latest-server-reference',
|
||||
items: [
|
||||
{ text: 'Version 3.X (Latest)', link: '/scripting/server/latest-server-reference' },
|
||||
{ text: 'Version 2.X (Deprecated)', link: '/scripting/server/v2-server-reference' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'BeamNG Documentation',
|
||||
items: [
|
||||
{
|
||||
text: 'Content Development',
|
||||
items: [
|
||||
{ text: 'Introduction', link: '/beamng/dev/index' },
|
||||
{
|
||||
text: 'Programming',
|
||||
items: [
|
||||
{ text: 'UI Apps (HTML)', link: '/beamng/dev/modding/ui-apps' },
|
||||
{ text: 'ImGui Window Tutorial', link: '/beamng/dev/modding/imgui-window-tutorial' },
|
||||
{ text: 'Lua Mods (Scripts)', link: '/beamng/dev/modding/lua-mods' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Content',
|
||||
items: [
|
||||
{ text: 'Maps', link: '/beamng/dev/content/maps' },
|
||||
{ text: 'Props', link: '/beamng/dev/content/props' },
|
||||
{ text: 'Vehicles', link: '/beamng/dev/content/vehicles' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{ text: 'Lua Code Snippets', link: '/beamng/lua-snippets' },
|
||||
{ text: 'CSS Code Snippets', link: '/beamng/css-snippets' },
|
||||
{ text: 'ImGui Code Snippets', link: '/beamng/imgui-snippets' },
|
||||
{ text: 'CEF Code Snippets', link: '/beamng/cef-snippets' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Community',
|
||||
items: [
|
||||
{ text: 'General Information', link: '/community/index' },
|
||||
{ text: 'Rules', link: '/community/rules' },
|
||||
{ text: 'Contributing', link: '/contributing' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const localeNav = (locale: LocaleKey) => localizeItems(locale, baseNav)
|
||||
|
||||
const localeSidebar = (locale: LocaleKey) => localizeItems(locale, baseNav)
|
||||
|
||||
const makeLocale = (locale: LocaleKey, label: string, lang: string, link?: string) => ({
|
||||
label,
|
||||
lang,
|
||||
...(link ? { link } : {}),
|
||||
themeConfig: {
|
||||
nav: localeNav(locale) as DefaultTheme.NavItem[],
|
||||
sidebar: localeSidebar(locale) as DefaultTheme.SidebarItem[]
|
||||
}
|
||||
})
|
||||
|
||||
// https://vitepress.dev/reference/site-config
|
||||
export default defineConfig({
|
||||
title: 'BeamMP Docs',
|
||||
description:
|
||||
'This website serves as the new BeamMP Documentation site for general self serve support, guides and documentation.',
|
||||
lastUpdated: true,
|
||||
locales: {
|
||||
root: makeLocale('root', 'English', 'en', '/en/'),
|
||||
de: makeLocale('de', 'Deutsch', 'de', '/de/'),
|
||||
fr: makeLocale('fr', 'Français', 'fr', '/fr/'),
|
||||
es: makeLocale('es', 'Español', 'es', '/es/'),
|
||||
it: makeLocale('it', 'Italiano', 'it', '/it/'),
|
||||
ru: makeLocale('ru', 'Pусский', 'ru', '/ru/'),
|
||||
zh: makeLocale('zh', '中文', 'zh', '/zh/')
|
||||
},
|
||||
markdown: {
|
||||
config(md) {
|
||||
md.use(tabsMarkdownPlugin)
|
||||
|
||||
const makeContainer = (type: string, defaultTitle: string) => [
|
||||
container,
|
||||
type,
|
||||
{
|
||||
render(tokens: Token[], idx: number) {
|
||||
const token = tokens[idx]
|
||||
const info = token.info.trim().slice(type.length).trim()
|
||||
const title = info || defaultTitle
|
||||
if (token.nesting === 1) {
|
||||
return `<div class="custom-block ${type}"><p class="custom-block-title">${title}</p>\n`
|
||||
}
|
||||
return '</div>\n'
|
||||
}
|
||||
}
|
||||
] as const
|
||||
|
||||
md.use(...makeContainer('note', 'NOTE'))
|
||||
md.use(...makeContainer('quote', 'QUOTE'))
|
||||
},
|
||||
},
|
||||
sitemap: {
|
||||
hostname: 'https://example.com'
|
||||
},
|
||||
themeConfig: {
|
||||
editLink: {
|
||||
pattern: 'https://github.com/beammp/docs/edit/main/docs/:path'
|
||||
},
|
||||
logo: {
|
||||
light: '/assets/core/beammp_dark.png',
|
||||
dark: '/assets/core/beammp_light.png'
|
||||
},
|
||||
search: {
|
||||
provider: 'local'
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,146 @@
|
||||
<script setup lang="ts">
|
||||
import { Github, Facebook, Instagram, createLucideIcon } from 'lucide-vue-next'
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
const XIcon = createLucideIcon('X', [
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z',
|
||||
stroke: 'none',
|
||||
fill: 'currentColor'
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
const BlueskyIcon = createLucideIcon('Bluesky', [
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026',
|
||||
stroke: 'none',
|
||||
fill: 'currentColor'
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
const RedditIcon = createLucideIcon('Reddit', [
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z',
|
||||
stroke: 'none',
|
||||
fill: 'currentColor'
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
const DiscordIcon = createLucideIcon('Discord', [
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z',
|
||||
stroke: 'none',
|
||||
fill: 'currentColor'
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
const YouTubeIcon = createLucideIcon('YouTube', [
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z',
|
||||
stroke: 'none',
|
||||
fill: 'currentColor'
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
const TikTokIcon = createLucideIcon('TikTok', [
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
|
||||
stroke: 'none',
|
||||
fill: 'currentColor'
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
const socials = [
|
||||
{ label: 'GitHub', href: 'https://github.com/BeamMP', icon: Github },
|
||||
{ label: 'Discord', href: 'https://discord.gg/beammp', icon: DiscordIcon },
|
||||
{ label: 'YouTube', href: 'https://www.youtube.com/@beammpofficial', icon: YouTubeIcon },
|
||||
{ label: 'X', href: 'https://x.com/beammpofficial', icon: XIcon },
|
||||
{ label: 'Reddit', href: 'https://www.reddit.com/r/BeamMP', icon: RedditIcon },
|
||||
{ label: 'Bluesky', href: 'https://bsky.app/profile/beammp.com', icon: BlueskyIcon },
|
||||
{ label: 'Instagram', href: 'https://www.instagram.com/beammpofficial', icon: Instagram },
|
||||
{ label: 'TikTok', href: 'https://www.tiktok.com/@beammpofficial', icon: TikTokIcon },
|
||||
{ label: 'Facebook', href: 'https://www.facebook.com/BeamMPTeam', icon: Facebook }
|
||||
] as const
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="bm-footer">
|
||||
<div class="bm-footer__inner">
|
||||
<div class="bm-footer__socials">
|
||||
<a
|
||||
v-for="social in socials"
|
||||
:key="social.label"
|
||||
:href="social.href"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
:aria-label="social.label"
|
||||
class="bm-footer__social-link"
|
||||
>
|
||||
<component :is="social.icon" aria-hidden="true" />
|
||||
</a>
|
||||
<span class="bm-footer__divider" aria-hidden="true">|</span>
|
||||
<a
|
||||
href="https://www.patreon.com/BeamMP"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="bm-footer__patreon"
|
||||
>
|
||||
Support on Patreon
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bm-footer__legal">
|
||||
<p class="bm-footer__copyright">
|
||||
© 2019 - {{ currentYear }} | BeamMP Mod Team All Rights Reserved
|
||||
</p>
|
||||
<div class="bm-footer__links">
|
||||
<a
|
||||
href="https://beammp.com/about"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="bm-footer__legal-link"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
<span aria-hidden="true">·</span>
|
||||
<a
|
||||
href="https://forum.beammp.com/topic/95/privacy-policy-v1-0"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="bm-footer__legal-link"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
<span aria-hidden="true">·</span>
|
||||
<a
|
||||
href="https://forum.beammp.com/topic/94/terms-of-use-v1-0"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="bm-footer__legal-link"
|
||||
>
|
||||
Terms & Conditions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
@@ -0,0 +1,407 @@
|
||||
:root {
|
||||
/* BeamMP brand tokens */
|
||||
--beammp-orange: #F36D24;
|
||||
--beammp-orange-hover: #c7571a;
|
||||
--beammp-white: #FFFFFF;
|
||||
--beammp-black: #000000;
|
||||
--beammp-gray: #333333;
|
||||
--beammp-green: #1D9749;
|
||||
--beammp-blue: #4470B6;
|
||||
--beammp-neutral: #6B7280;
|
||||
|
||||
/* Radius scale */
|
||||
--radius: 0.5rem;
|
||||
--radius-lg: var(--radius);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
|
||||
/* Semantic HSL tokens (values only) */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 12%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 12%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 12%;
|
||||
--primary: 23 90% 55%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 220 43% 49%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
--muted: 0 0% 96%;
|
||||
--muted-foreground: 0 0% 35%;
|
||||
--accent: 139 67% 35%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 0 0% 88%;
|
||||
--input: 0 0% 88%;
|
||||
--ring: 23 90% 55%;
|
||||
|
||||
--chart-1: 23 90% 55%;
|
||||
--chart-2: 217 45% 49%;
|
||||
--chart-3: 139 67% 35%;
|
||||
--chart-4: 32 95% 53%;
|
||||
--chart-5: 262 83% 58%;
|
||||
|
||||
/* Mapped color aliases from requested theme object */
|
||||
--color-background: hsl(var(--background));
|
||||
--color-foreground: hsl(var(--foreground));
|
||||
--color-card: hsl(var(--card));
|
||||
--color-card-foreground: hsl(var(--card-foreground));
|
||||
--color-popover: hsl(var(--popover));
|
||||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||||
--color-primary: hsl(var(--primary));
|
||||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||
--color-secondary: hsl(var(--secondary));
|
||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||
--color-muted: hsl(var(--muted));
|
||||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||||
--color-accent: hsl(var(--accent));
|
||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||
--color-destructive: hsl(var(--destructive));
|
||||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||||
--color-border: hsl(var(--border));
|
||||
--color-input: hsl(var(--input));
|
||||
--color-ring: hsl(var(--ring));
|
||||
--color-chart-1: hsl(var(--chart-1));
|
||||
--color-chart-2: hsl(var(--chart-2));
|
||||
--color-chart-3: hsl(var(--chart-3));
|
||||
--color-chart-4: hsl(var(--chart-4));
|
||||
--color-chart-5: hsl(var(--chart-5));
|
||||
|
||||
/* VitePress theme mapping */
|
||||
--vp-c-brand-1: var(--beammp-orange);
|
||||
--vp-c-brand-2: var(--beammp-orange);
|
||||
--vp-c-brand-3: var(--beammp-orange-hover);
|
||||
|
||||
--vp-c-bg: var(--color-background);
|
||||
--vp-c-bg-alt: var(--color-card);
|
||||
--vp-c-bg-elv: var(--color-popover);
|
||||
--vp-c-text-1: var(--color-foreground);
|
||||
--vp-c-text-2: var(--color-muted-foreground);
|
||||
--vp-c-text-3: hsl(0 0% 50%);
|
||||
--vp-c-border: var(--color-border);
|
||||
--vp-c-divider: var(--color-border);
|
||||
|
||||
--vp-button-brand-bg: var(--beammp-orange);
|
||||
--vp-button-brand-hover-bg: var(--beammp-orange-hover);
|
||||
--vp-button-brand-active-bg: var(--beammp-orange-hover);
|
||||
--vp-button-brand-text: var(--beammp-white);
|
||||
--vp-button-brand-border: transparent;
|
||||
|
||||
/* Custom block border colours (bg & title overridden by direct CSS below) */
|
||||
--vp-custom-block-tip-border: var(--beammp-blue);
|
||||
--vp-custom-block-warning-border: var(--beammp-orange);
|
||||
--vp-custom-block-danger-border: hsl(var(--destructive));
|
||||
|
||||
--vp-nav-height: 64px;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--beammp-neutral: #9CA3AF;
|
||||
--background: 0 0% 7%;
|
||||
--foreground: 0 0% 96%;
|
||||
--card: 0 0% 10%;
|
||||
--card-foreground: 0 0% 96%;
|
||||
--popover: 0 0% 10%;
|
||||
--popover-foreground: 0 0% 96%;
|
||||
--muted: 0 0% 15%;
|
||||
--muted-foreground: 0 0% 70%;
|
||||
--border: 0 0% 22%;
|
||||
--input: 0 0% 22%;
|
||||
|
||||
--vp-c-bg: var(--color-background);
|
||||
--vp-c-bg-alt: var(--color-card);
|
||||
--vp-c-bg-elv: var(--color-popover);
|
||||
--vp-c-text-1: var(--color-foreground);
|
||||
--vp-c-text-2: var(--color-muted-foreground);
|
||||
--vp-c-border: var(--color-border);
|
||||
--vp-c-divider: var(--color-border);
|
||||
}
|
||||
|
||||
.VPButton.medium.brand,
|
||||
.VPButton.brand {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.VPDoc .VPDocAside .content,
|
||||
.VPDoc .VPDocOutlineDropdown,
|
||||
.vp-doc div[class*='language-'] {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Admonitions / Custom Blocks — MkDocs Material style
|
||||
============================================================ */
|
||||
|
||||
/* Strip default VitePress padding; layout is managed per-element */
|
||||
.vp-doc .custom-block {
|
||||
padding: 0;
|
||||
border-left-width: 4px;
|
||||
border-left-style: solid;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header band */
|
||||
.vp-doc .custom-block .custom-block-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
margin: 0;
|
||||
padding: 0.45rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Icon via ::before mask */
|
||||
.vp-doc .custom-block .custom-block-title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
/* Body: pad all direct children that aren't the title */
|
||||
.vp-doc .custom-block > *:not(.custom-block-title) {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block > .custom-block-title + * {
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block > *:not(.custom-block-title):last-child {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* details: hide native disclosure triangle; animate chevron icon */
|
||||
.vp-doc .custom-block.details > summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.details > summary::-webkit-details-marker,
|
||||
.vp-doc .custom-block.details > summary::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.details > summary.custom-block-title::before {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.details[open] > summary.custom-block-title::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* ---- info (blue) ---- */
|
||||
.vp-doc .custom-block.info {
|
||||
border-color: var(--beammp-blue);
|
||||
background-color: color-mix(in srgb, var(--beammp-blue) 5%, transparent);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.info .custom-block-title {
|
||||
background-color: color-mix(in srgb, var(--beammp-blue) 14%, transparent);
|
||||
color: var(--beammp-blue);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.info .custom-block-title::before {
|
||||
background-color: var(--beammp-blue);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ---- tip (green) ---- */
|
||||
.vp-doc .custom-block.tip {
|
||||
border-color: var(--beammp-green);
|
||||
background-color: color-mix(in srgb, var(--beammp-green) 5%, transparent);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.tip .custom-block-title {
|
||||
background-color: color-mix(in srgb, var(--beammp-green) 14%, transparent);
|
||||
color: var(--beammp-green);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.tip .custom-block-title::before {
|
||||
background-color: var(--beammp-green);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ---- warning (orange) ---- */
|
||||
.vp-doc .custom-block.warning {
|
||||
border-color: var(--beammp-orange);
|
||||
background-color: color-mix(in srgb, var(--beammp-orange) 5%, transparent);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.warning .custom-block-title {
|
||||
background-color: color-mix(in srgb, var(--beammp-orange) 14%, transparent);
|
||||
color: var(--beammp-orange);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.warning .custom-block-title::before {
|
||||
background-color: var(--beammp-orange);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2L1 21z'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2L1 21z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ---- danger (red) ---- */
|
||||
.vp-doc .custom-block.danger {
|
||||
border-color: hsl(var(--destructive));
|
||||
background-color: color-mix(in srgb, hsl(var(--destructive)) 5%, transparent);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.danger .custom-block-title {
|
||||
background-color: color-mix(in srgb, hsl(var(--destructive)) 14%, transparent);
|
||||
color: hsl(var(--destructive));
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.danger .custom-block-title::before {
|
||||
background-color: hsl(var(--destructive));
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ---- details (neutral, collapsible) ---- */
|
||||
.vp-doc .custom-block.details {
|
||||
border-color: var(--vp-c-border);
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.details .custom-block-title {
|
||||
background-color: var(--vp-c-bg-elv);
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.details .custom-block-title::before {
|
||||
background-color: var(--vp-c-text-2);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42z'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ---- note (gray) ---- */
|
||||
.vp-doc .custom-block.note {
|
||||
border-color: var(--beammp-neutral);
|
||||
background-color: color-mix(in srgb, var(--beammp-neutral) 5%, transparent);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.note .custom-block-title {
|
||||
background-color: color-mix(in srgb, var(--beammp-neutral) 14%, transparent);
|
||||
color: var(--beammp-neutral);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.note .custom-block-title::before {
|
||||
background-color: var(--beammp-neutral);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM6 20V4h5v7h7v9H6z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ---- quote (gray) ---- */
|
||||
.vp-doc .custom-block.quote {
|
||||
border-color: var(--beammp-neutral);
|
||||
background-color: color-mix(in srgb, var(--beammp-neutral) 5%, transparent);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.quote .custom-block-title {
|
||||
background-color: color-mix(in srgb, var(--beammp-neutral) 14%, transparent);
|
||||
color: var(--beammp-neutral);
|
||||
}
|
||||
|
||||
.vp-doc .custom-block.quote .custom-block-title::before {
|
||||
background-color: var(--beammp-neutral);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bm-footer {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.bm-footer__inner {
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.bm-footer__socials {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bm-footer__social-link {
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.bm-footer__social-link:hover {
|
||||
color: var(--beammp-blue);
|
||||
}
|
||||
|
||||
.bm-footer__social-link svg {
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bm-footer__divider {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.bm-footer__patreon {
|
||||
color: var(--beammp-orange);
|
||||
font-size: 0.8rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bm-footer__patreon:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--beammp-orange-hover);
|
||||
}
|
||||
|
||||
.bm-footer__legal {
|
||||
margin-top: 0.85rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.bm-footer__copyright {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bm-footer__links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.bm-footer__legal-link {
|
||||
color: var(--vp-c-text-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bm-footer__legal-link:hover {
|
||||
color: var(--beammp-blue);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import type { Theme } from 'vitepress'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import { h } from 'vue'
|
||||
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
|
||||
import AppFooter from './components/AppFooter.vue'
|
||||
import './custom.css'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
Layout: () => {
|
||||
return h(DefaultTheme.Layout, null, {
|
||||
'layout-bottom': () => h(AppFooter)
|
||||
})
|
||||
},
|
||||
enhanceApp({ app }) {
|
||||
enhanceAppWithTabs(app)
|
||||
},
|
||||
} satisfies Theme
|
||||
Reference in new issue
Block a user