Skip to content

Commit c7f4358

Browse files
vinnymacvinnymac
committed
Add inline run commands
1 parent e534257 commit c7f4358

1 file changed

Lines changed: 100 additions & 105 deletions

File tree

‎app/pages/[...package].vue‎

Lines changed: 100 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -803,125 +803,120 @@ defineOgImageComponent('Package', {
803803
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
804804
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
805805
</div>
806-
<div class="flex items-center gap-2 px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4">
807-
<span class="text-fg-subtle font-mono text-sm select-none">$</span>
808-
<code class="font-mono text-sm"
809-
><ClientOnly
810-
><span
811-
v-for="(part, i) in installCommandParts"
812-
:key="i"
813-
:class="i === 0 ? 'text-fg' : 'text-fg-muted'"
814-
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
815-
><template #fallback
816-
><span class="text-fg">npm</span
817-
><span class="text-fg-muted"> install {{ pkg.name }}</span></template
818-
></ClientOnly
819-
></code
820-
>
821-
</div>
822-
</div>
823-
<button
824-
type="button"
825-
class="absolute top-3 right-3 px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
826-
@click="copyInstallCommand"
827-
>
828-
{{ copied ? 'copied!' : 'copy' }}
829-
</button>
830-
</div>
831-
</section>
832-
833-
<!-- Run command section - only shown for packages with executables -->
834-
<section v-if="executableInfo?.hasExecutable" aria-labelledby="run-heading" class="mb-8">
835-
<h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">Run</h2>
836-
<div class="relative group">
837-
<div class="bg-[#0d0d0d] border border-border rounded-lg overflow-hidden">
838-
<!-- Terminal chrome with interactive green button for multiple commands -->
839-
<div class="flex gap-1.5 px-3 pt-2 sm:px-4 sm:pt-3">
840-
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
841-
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
842-
<ClientOnly>
806+
<div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 space-y-1">
807+
<!-- Install command -->
808+
<div class="flex items-center gap-2 group/installcmd">
809+
<span class="text-fg-subtle font-mono text-sm select-none">$</span>
810+
<code class="font-mono text-sm"
811+
><ClientOnly
812+
><span
813+
v-for="(part, i) in installCommandParts"
814+
:key="i"
815+
:class="i === 0 ? 'text-fg' : 'text-fg-muted'"
816+
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
817+
><template #fallback
818+
><span class="text-fg">npm</span
819+
><span class="text-fg-muted"> install {{ pkg.name }}</span></template
820+
></ClientOnly
821+
></code
822+
>
843823
<button
844-
v-if="executableInfo.commands.length > 1"
845824
type="button"
846-
class="w-2.5 h-2.5 rounded-full transition-colors cursor-pointer"
847-
:class="runExpanded ? 'bg-green-400' : 'bg-green-500 hover:bg-green-400'"
848-
:title="
849-
runExpanded
850-
? 'Show less'
851-
: `Show all ${executableInfo.commands.length} commands`
852-
"
853-
:aria-expanded="runExpanded"
854-
@click="runExpanded = !runExpanded"
855-
/>
856-
<span v-else class="w-2.5 h-2.5 rounded-full bg-[#333]" />
857-
<template #fallback>
858-
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
859-
</template>
860-
</ClientOnly>
861-
</div>
825+
class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
826+
@click.stop="copyInstallCommand"
827+
>
828+
{{ copied ? 'copied!' : 'copy' }}
829+
</button>
830+
</div>
862831

863-
<!-- Primary command (always shown) -->
864-
<div
865-
class="flex items-center gap-2 px-3 pt-2 sm:px-4 sm:pt-3"
866-
:class="runExpanded ? 'pb-2' : 'pb-3 sm:pb-4'"
867-
>
868-
<span class="text-fg-subtle font-mono text-sm select-none">$</span>
869-
<code class="font-mono text-sm flex-1"
870-
><ClientOnly
871-
><span
872-
v-for="(part, i) in runCommandParts"
873-
:key="i"
874-
:class="i === 0 ? 'text-fg' : 'text-fg-muted'"
875-
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
876-
><template #fallback
877-
><span class="text-fg">npx</span>{{ ' '
878-
}}<span class="text-fg-muted">{{
879-
executableInfo?.primaryCommand
880-
}}</span></template
881-
></ClientOnly
882-
></code
883-
>
884-
</div>
832+
<!-- Run commands (only if package has executables) -->
833+
<template v-if="executableInfo?.hasExecutable">
834+
<!-- Comment line -->
835+
<div class="flex items-center gap-2 pt-1">
836+
<span class="text-fg-subtle/50 font-mono text-sm select-none"
837+
># Run {{ executableInfo.commands.length > 1 ? 'commands' : 'command' }}</span
838+
>
839+
</div>
885840

886-
<!-- Additional commands (shown when expanded) -->
887-
<ClientOnly>
888-
<template v-if="runExpanded && executableInfo.commands.length > 1">
889-
<div
890-
v-for="cmd in executableInfo.commands.slice(1)"
891-
:key="cmd"
892-
class="flex items-center gap-2 px-3 py-2 sm:px-4 border-t border-border/50 group/cmd"
893-
>
841+
<!-- Primary run command -->
842+
<div class="flex items-center gap-2 group/runcmd">
894843
<span class="text-fg-subtle font-mono text-sm select-none">$</span>
895-
<code class="font-mono text-sm flex-1"
896-
><span
897-
v-for="(part, i) in getRunParts(cmd)"
898-
:key="i"
899-
:class="i === 0 ? 'text-fg' : 'text-fg-muted'"
900-
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
844+
<code class="font-mono text-sm"
845+
><ClientOnly
846+
><span
847+
v-for="(part, i) in runCommandParts"
848+
:key="i"
849+
:class="i === 0 ? 'text-fg' : 'text-fg-muted'"
850+
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
851+
><button
852+
v-if="!runExpanded && executableInfo.commands.length > 1"
853+
type="button"
854+
class="text-fg-muted hover:underline cursor-pointer ml-1"
855+
:aria-expanded="runExpanded"
856+
@click="runExpanded = true"
857+
>
858+
(+{{ executableInfo.commands.length - 1 }} more)</button
859+
><template #fallback
860+
><span class="text-fg">npx</span>{{ ' '
861+
}}<span class="text-fg-muted">{{
862+
executableInfo?.primaryCommand
863+
}}</span></template
864+
></ClientOnly
901865
></code
902866
>
903867
<button
904868
type="button"
905-
class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
906-
@click="copyRunCommand(cmd)"
869+
class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
870+
@click.stop="copyRunCommand(executableInfo?.primaryCommand)"
907871
>
908-
{{ runCopied && runCopiedCommand === cmd ? 'copied!' : 'copy' }}
872+
{{
873+
runCopied && runCopiedCommand === (executableInfo?.primaryCommand || null)
874+
? 'copied!'
875+
: 'copy'
876+
}}
909877
</button>
910878
</div>
879+
880+
<!-- Additional commands (shown when expanded) -->
881+
<ClientOnly>
882+
<template v-if="runExpanded && executableInfo.commands.length > 1">
883+
<div
884+
v-for="cmd in executableInfo.commands.filter(
885+
c => c !== executableInfo.primaryCommand,
886+
)"
887+
:key="cmd"
888+
class="flex items-center gap-2 group/runcmd"
889+
>
890+
<span class="text-fg-subtle font-mono text-sm select-none">$</span>
891+
<code class="font-mono text-sm"
892+
><span
893+
v-for="(part, i) in getRunParts(cmd)"
894+
:key="i"
895+
:class="i === 0 ? 'text-fg' : 'text-fg-muted'"
896+
>{{ i > 0 ? ' ' : '' }}{{ part }}</span
897+
></code
898+
>
899+
<button
900+
type="button"
901+
class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
902+
@click.stop="copyRunCommand(cmd)"
903+
>
904+
{{ runCopied && runCopiedCommand === cmd ? 'copied!' : 'copy' }}
905+
</button>
906+
</div>
907+
<!-- Collapse button -->
908+
<button
909+
type="button"
910+
class="text-fg-muted hover:underline cursor-pointer font-mono text-sm pl-5"
911+
@click="runExpanded = false"
912+
>
913+
(show less)
914+
</button>
915+
</template>
916+
</ClientOnly>
911917
</template>
912-
</ClientOnly>
918+
</div>
913919
</div>
914-
<button
915-
type="button"
916-
class="absolute top-3 right-3 px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
917-
@click="copyRunCommand(executableInfo?.primaryCommand)"
918-
>
919-
{{
920-
runCopied && runCopiedCommand === (executableInfo?.primaryCommand || null)
921-
? 'copied!'
922-
: 'copy'
923-
}}
924-
</button>
925920
</div>
926921
</section>
927922

0 commit comments

Comments
 (0)