Skip to content

Improved responsiveness #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rcodyp wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Improved responsiveness #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a15e9c4
navlinked
rcodyp Apr 14, 2026
ecee7c4
Merge branch 'main' of https://github.com/rcodyp/mesh-lang
rcodyp Apr 14, 2026
c9f44d8
improved reponsivness
rcodyp Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions website/docs/.vitepress/theme/components/NavBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ const { isDark } = useData()
const mobileMenuOpen = ref(false)

const navLinks = [
{ text: 'Docs', href: '/docs/getting-started/' },
{ text: 'Packages', href: '/packages/' },
{ text: 'GitHub', href: 'https://github.com/hyperpush-org/mesh-lang' },
{ text: 'Docs', href: '/docs/getting-started/', target: '_self' },
{ text: 'Packages', href: 'https://packages.meshlang.dev', target: '_blank' },
{ text: 'GitHub', href: 'https://github.com/hyperpush-org/mesh-lang', target: '_blank' },
]
</script>

Expand Down Expand Up @@ -66,6 +66,7 @@ const navLinks = [
</a>
<a
href="https://github.com/hyperpush-org/mesh-lang"
target="_blank"
class="pointer-events-auto rounded-md px-3 py-1.5 text-muted-foreground transition-colors hover:text-foreground hover:bg-accent"
>
GitHub
Expand All @@ -89,6 +90,7 @@ const navLinks = [
v-for="link in navLinks"
:key="link.href"
:href="link.href"
:target="link.target"
class="flex items-center rounded-md px-3 py-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground hover:bg-accent"
@click="mobileMenuOpen = false"
>
Expand Down
28 changes: 26 additions & 2 deletions website/docs/.vitepress/theme/components/docs/MobileSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,37 @@ defineProps<{
}>()

const { isOpen } = useSidebar()

const quickLinks = [
{ text: 'Main Page', href: '/', target: '_self' },
{ text: 'Packages', href: 'https://packages.meshlang.dev', target: '_blank' },
{ text: 'GitHub', href: 'https://github.com/hyperpush-org/mesh-lang', target: '_blank' },
]
</script>

<template>
<Sheet v-model:open="isOpen">
<SheetContent side="left" class="w-72 p-0">
<SheetContent side="left" class="flex h-full w-72 flex-col overflow-hidden p-0">
<SheetTitle class="sr-only">Navigation</SheetTitle>
<DocsSidebar :items="items" />
<div class="border-b border-border px-4 py-4">
<div class="text-[11px] font-mono uppercase tracking-wider text-muted-foreground">Quick Links</div>
<nav class="mt-2 flex flex-col gap-1">
<a
v-for="link in quickLinks"
:key="link.href"
:href="link.href"
:target="link.target"
:rel="link.target === '_blank' ? 'noreferrer noopener' : undefined"
class="rounded-md px-2.5 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
@click="isOpen = false"
>
{{ link.text }}
</a>
</nav>
</div>
<div class="min-h-0 flex-1">
<DocsSidebar :items="items" />
</div>
</SheetContent>
</Sheet>
</template>
48 changes: 24 additions & 24 deletions website/docs/.vitepress/theme/components/landing/BenchmarkSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,27 +84,27 @@ onMounted(() => {
</div>

<!-- Tab switcher -->
<div class="mt-12 flex items-center justify-center">
<div class="inline-flex rounded-lg border border-border bg-card p-1 gap-1">
<div class="mt-10 flex items-center justify-center sm:mt-12">
<div class="grid w-full max-w-md grid-cols-3 rounded-lg border border-border bg-card p-1 gap-1">
<button
@click="activeTab = 'throughput'"
class="flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-all duration-200"
class="flex items-center justify-center gap-1 rounded-md px-2 py-2 text-xs font-medium transition-all duration-200 sm:gap-1.5 sm:px-4 sm:text-sm"
:class="activeTab === 'throughput' ? 'bg-foreground text-background shadow-sm' : 'text-muted-foreground hover:text-foreground'"
>
<Server class="size-3.5" />
Throughput
</button>
<button
@click="activeTab = 'latency'"
class="flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-all duration-200"
class="flex items-center justify-center gap-1 rounded-md px-2 py-2 text-xs font-medium transition-all duration-200 sm:gap-1.5 sm:px-4 sm:text-sm"
:class="activeTab === 'latency' ? 'bg-foreground text-background shadow-sm' : 'text-muted-foreground hover:text-foreground'"
>
<Clock class="size-3.5" />
Latency
</button>
<button
@click="activeTab = 'memory'"
class="flex items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-all duration-200"
class="flex items-center justify-center gap-1 rounded-md px-2 py-2 text-xs font-medium transition-all duration-200 sm:gap-1.5 sm:px-4 sm:text-sm"
:class="activeTab === 'memory' ? 'bg-foreground text-background shadow-sm' : 'text-muted-foreground hover:text-foreground'"
>
<Cpu class="size-3.5" />
Expand All @@ -114,7 +114,7 @@ onMounted(() => {
</div>

<!-- Throughput chart -->
<div v-show="activeTab === 'throughput'" class="mt-10">
<div v-show="activeTab === 'throughput'" class="mt-8 sm:mt-10">
<div class="rounded-xl border border-border bg-card p-6 md:p-8 shadow-lg">
<div class="flex items-baseline justify-between mb-8">
<div>
Expand All @@ -128,10 +128,10 @@ onMounted(() => {

<div class="space-y-5">
<div v-for="(item, index) in throughputData" :key="item.lang" class="group">
<div class="flex items-center gap-4">
<div class="w-16 shrink-0 text-right">
<div class="flex items-center gap-2 sm:gap-4">
<div class="w-12 shrink-0 text-right sm:w-16">
<span
class="text-sm font-semibold"
class="text-xs font-semibold sm:text-sm"
:class="item.highlight ? 'text-foreground' : 'text-muted-foreground'"
>{{ item.lang }}</span>
</div>
Expand Down Expand Up @@ -161,9 +161,9 @@ onMounted(() => {
/>
</div>

<div class="w-20 shrink-0 text-right">
<div class="w-16 shrink-0 text-right sm:w-20">
<span
class="text-sm font-mono font-bold tabular-nums"
class="text-xs font-mono font-bold tabular-nums sm:text-sm"
:class="[
item.highlight ? 'text-foreground' : 'text-muted-foreground',
barsVisible ? 'counter-animated' : 'opacity-0',
Expand All @@ -178,7 +178,7 @@ onMounted(() => {
</div>

<!-- Latency chart -->
<div v-show="activeTab === 'latency'" class="mt-10">
<div v-show="activeTab === 'latency'" class="mt-8 sm:mt-10">
<div class="rounded-xl border border-border bg-card p-6 md:p-8 shadow-lg">
<div class="flex items-baseline justify-between mb-8">
<div>
Expand All @@ -192,21 +192,21 @@ onMounted(() => {

<div class="space-y-6">
<div v-for="item in latencyData" :key="item.lang" class="group">
<div class="flex items-center gap-4 mb-1.5">
<div class="w-16 shrink-0 text-right">
<div class="mb-1.5 flex items-center gap-2 sm:gap-4">
<div class="w-12 shrink-0 text-right sm:w-16">
<span
class="text-sm font-semibold"
class="text-xs font-semibold sm:text-sm"
:class="item.highlight ? 'text-foreground' : 'text-muted-foreground'"
>{{ item.lang }}</span>
</div>
<div class="flex-1" />
<div class="shrink-0 flex items-center gap-4 text-xs font-mono tabular-nums">
<div class="shrink-0 flex items-center gap-2 text-[11px] font-mono tabular-nums sm:gap-4 sm:text-xs">
<span class="text-muted-foreground">p50 <strong :style="{ color: item.highlight ? 'var(--foreground)' : item.textColor }">{{ item.p50 }}ms</strong></span>
<span class="text-muted-foreground">p99 <strong :style="{ color: item.highlight ? 'var(--foreground)' : item.textColor }">{{ item.p99 }}ms</strong></span>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-16 shrink-0" />
<div class="flex items-center gap-2 sm:gap-4">
<div class="w-12 shrink-0 sm:w-16" />
<div class="flex-1 relative h-3 rounded-full bg-muted/50 overflow-hidden">
<!-- p99 bar (background) -->
<div
Expand All @@ -233,7 +233,7 @@ onMounted(() => {
</div>

<!-- Memory chart -->
<div v-show="activeTab === 'memory'" class="mt-10">
<div v-show="activeTab === 'memory'" class="mt-8 sm:mt-10">
<div class="rounded-xl border border-border bg-card p-6 md:p-8 shadow-lg">
<div class="flex items-baseline justify-between mb-8">
<div>
Expand All @@ -247,10 +247,10 @@ onMounted(() => {

<div class="space-y-5">
<div v-for="item in memoryData" :key="item.lang" class="group">
<div class="flex items-center gap-4">
<div class="w-16 shrink-0 text-right">
<div class="flex items-center gap-2 sm:gap-4">
<div class="w-12 shrink-0 text-right sm:w-16">
<span
class="text-sm font-semibold"
class="text-xs font-semibold sm:text-sm"
:class="item.highlight ? 'text-foreground' : 'text-muted-foreground'"
>{{ item.lang }}</span>
</div>
Expand All @@ -266,9 +266,9 @@ onMounted(() => {
/>
</div>

<div class="w-16 shrink-0 text-right">
<div class="w-14 shrink-0 text-right sm:w-16">
<span
class="text-sm font-mono font-bold tabular-nums"
class="text-xs font-mono font-bold tabular-nums sm:text-sm"
:class="item.highlight ? 'text-foreground' : 'text-muted-foreground'"
>{{ item.value }} MB</span>
</div>
Expand Down
8 changes: 4 additions & 4 deletions website/docs/.vitepress/theme/components/landing/FeatureShowcase.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ onMounted(async () => {
class="reveal grid items-center gap-10 lg:grid-cols-2 lg:gap-16"
>
<!-- Text -->
<div :class="{ 'lg:order-last': index % 2 === 1 }">
<div class="min-w-0" :class="{ 'lg:order-last': index % 2 === 1 }">
<div class="flex items-center gap-3">
<div class="font-mono text-sm font-bold text-muted-foreground/50">{{ feature.number }}</div>
<div
Expand All @@ -150,7 +150,7 @@ onMounted(async () => {
</div>

<!-- Code block -->
<div v-if="!feature.visual" class="group overflow-hidden rounded-xl border border-border bg-card shadow-lg transition-shadow duration-300 hover:shadow-xl ring-1 ring-foreground/[0.03]">
<div v-if="!feature.visual" class="group min-w-0 w-full max-w-full overflow-hidden rounded-xl border border-border bg-card shadow-lg transition-shadow duration-300 hover:shadow-xl ring-1 ring-foreground/[0.03]">
<!-- Terminal chrome -->
<div class="flex items-center gap-2 border-b border-border px-4 py-3 bg-muted/30">
<div class="flex gap-1.5">
Expand All @@ -163,11 +163,11 @@ onMounted(async () => {
<div
v-if="highlighted[index]"
v-html="highlighted[index]"
class="vp-code [&_pre]:p-5 [&_pre]:!bg-transparent [&_pre]:text-sm [&_pre]:leading-relaxed"
class="vp-code w-full max-w-full [&_pre]:max-w-full [&_pre]:overflow-x-auto [&_pre]:p-4 sm:[&_pre]:p-5 [&_pre]:!bg-transparent [&_pre]:text-xs sm:[&_pre]:text-sm [&_pre]:leading-relaxed"
/>
<pre
v-else
class="overflow-x-auto p-5 text-sm leading-relaxed text-foreground font-mono"
class="max-w-full overflow-x-auto p-4 text-xs leading-relaxed text-foreground font-mono sm:p-5 sm:text-sm"
><code>{{ feature.code }}</code></pre>
</div>

Expand Down
14 changes: 7 additions & 7 deletions website/docs/.vitepress/theme/components/landing/GetStartedCTA.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,17 @@ onMounted(() => {
<h2 class="text-3xl font-bold tracking-tight text-foreground sm:text-4xl lg:text-5xl">
Start building your distributed system
</h2>
<p class="mt-4 text-lg text-muted-foreground">
<p class="mt-4 text-base text-muted-foreground sm:text-lg">
Install Mesh in seconds. Works on macOS, Linux, and Windows.
</p>

<!-- Install command -->
<div class="mx-auto mt-8 flex max-w-xl items-center gap-3 rounded-xl border border-border bg-card px-5 py-4 font-mono text-sm shadow-lg ring-1 ring-foreground/[0.03]">
<div class="mx-auto mt-8 flex max-w-xl flex-col items-start gap-3 rounded-xl border border-border bg-card px-4 py-4 font-mono text-sm shadow-lg ring-1 ring-foreground/[0.03] sm:flex-row sm:items-center sm:px-5">
<span class="text-emerald-500 select-none font-bold">$</span>
<code class="flex-1 text-left text-foreground truncate">{{ installCommand }}</code>
<code class="flex-1 text-left text-foreground break-all sm:truncate">{{ installCommand }}</code>
<button
@click="copyCommand"
class="shrink-0 rounded-md p-1.5 text-muted-foreground transition-all hover:bg-muted hover:text-foreground"
class="shrink-0 self-end rounded-md p-1.5 text-muted-foreground transition-all hover:bg-muted hover:text-foreground sm:self-auto"
:title="copied ? 'Copied!' : 'Copy to clipboard'"
>
<Check v-if="copied" class="size-4 text-emerald-500" />
Expand All @@ -59,12 +59,12 @@ onMounted(() => {
</div>

<!-- CTA buttons -->
<div class="mt-8 flex items-center justify-center gap-3">
<Button as="a" href="/docs/getting-started/" size="lg" class="h-12 px-8 rounded-lg text-base font-semibold shadow-md hover:shadow-lg transition-shadow">
<div class="mt-8 flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:items-center">
<Button as="a" href="/docs/getting-started/" size="lg" class="h-12 w-full px-8 rounded-lg text-base font-semibold shadow-md hover:shadow-lg transition-shadow sm:w-auto">
Get Started
<ArrowRight class="ml-1.5 size-4" />
</Button>
<Button as="a" href="/docs/distributed/" variant="outline" size="lg" class="h-12 px-8 rounded-lg text-base font-semibold">
<Button as="a" href="/docs/distributed/" variant="outline" size="lg" class="h-12 w-full px-8 rounded-lg text-base font-semibold sm:w-auto">
Distributed Docs
</Button>
</div>
Expand Down
Loading
Loading