-
-### Code Blocks
-
-Pre-formatted code blocks are used for writing about programming or
-markup source code. Rather than forming normal paragraphs, the lines
-of a code block are interpreted literally. Markdown wraps a code block
-in both `` and `` tags.
-
-To produce a code block in Markdown, simply indent every line of the
-block by at least 4 spaces or 1 tab.
-
-This is a normal paragraph:
-
- This is a code block.
-
-Here is an example of AppleScript:
-
- tell application "Foo"
- beep
- end tell
-
-A code block continues until it reaches a line that is not indented
-(or the end of the article).
-
-Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
-are automatically converted into HTML entities. This makes it very
-easy to include example HTML source code using Markdown -- just paste
-it and indent it, and Markdown will handle the hassle of encoding the
-ampersands and angle brackets. For example, this:
-
-
-
-Regular Markdown syntax is not processed within code blocks. E.g.,
-asterisks are just literal asterisks within a code block. This means
-it's also easy to use Markdown to write about Markdown's own syntax.
-
-```
-tell application "Foo"
- beep
-end tell
-```
-
-## Span Elements
-
-### Links
-
-Markdown supports two style of links: _inline_ and _reference_.
-
-In both styles, the link text is delimited by [square brackets].
-
-To create an inline link, use a set of regular parentheses immediately
-after the link text's closing square bracket. Inside the parentheses,
-put the URL where you want the link to point, along with an _optional_
-title for the link, surrounded in quotes. For example:
-
-This is [an example](http://example.com/) inline link.
-
-[This link](http://example.net/) has no title attribute.
-
-### Emphasis
-
-Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
-emphasis. Text wrapped with one `*` or `_` will be wrapped with an
-HTML `` tag; double `*`'s or `_`'s will be wrapped with an HTML
-`` tag. E.g., this input:
-
-_single asterisks_
-
-_single underscores_
-
-**double asterisks**
-
-**double underscores**
-
-### Code
-
-To indicate a span of code, wrap it with backtick quotes (`` ` ``).
-Unlike a pre-formatted code block, a code span indicates code within a
-normal paragraph. For example:
-
-Use the `printf()` function.
-
-
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index 5f9bf00c0f..bf3c62bc65 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -2,6 +2,7 @@
import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
import { useRouteQuery } from '@vueuse/router'
import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
definePageMeta({
name: 'compare',
@@ -73,10 +74,13 @@ function addNoDep() {
// Get loading state for each column
const columnLoading = computed(() => packages.value.map((_, i) => isColumnLoading(i)))
-// Check if we have enough packages to compare
+// FIXME(serhalp): canCompare only checks package count, not whether data has loaded.
+// Copy-markdown and view-switching commands appear as soon as one package loads, even if
+// other packages are still loading. The UI copy button has the same issue.
const canCompare = computed(() => packages.value.length >= 2)
const comparisonView = usePermalink<'table' | 'charts'>('view', 'table')
+const hasChartableFacets = computed(() => selectedFacets.value.some(facet => facet.chartable))
// Extract headers from columns for facet rows
const gridHeaders = computed(() =>
@@ -86,7 +90,7 @@ const gridHeaders = computed(() =>
/*
* Convert the comparison grid data to a Markdown table.
*/
-function exportComparisonDataAsMarkdown() {
+async function exportComparisonDataAsMarkdown() {
const mdData: Array> = []
const headers = [
'',
@@ -131,9 +135,98 @@ function exportComparisonDataAsMarkdown() {
return result
}, '')
- copy(markdown)
+ await copy(markdown)
}
+defineOgImageComponent('Compare', {
+ packages: () => packages.value,
+ emptyDescription: () => $t('compare.packages.meta_description_empty'),
+})
+
+const { announce } = useCommandPalette()
+
+useCommandPaletteContextCommands(
+ computed((): CommandPaletteContextCommandInput[] => {
+ const commands: CommandPaletteContextCommandInput[] = [
+ {
+ id: 'compare-select-all',
+ group: 'actions',
+ label: $t('compare.facets.select_all'),
+ keywords: [$t('compare.packages.section_facets')],
+ iconClass: 'i-lucide:list-checks',
+ action: () => {
+ selectAll()
+ announce($t('command_palette.announcements.facets_all_selected'))
+ },
+ },
+ {
+ id: 'compare-deselect-all',
+ group: 'actions',
+ label: $t('compare.facets.deselect_all'),
+ keywords: [$t('compare.packages.section_facets')],
+ iconClass: 'i-lucide:list-x',
+ action: () => {
+ deselectAll()
+ announce($t('command_palette.announcements.facets_all_deselected'))
+ },
+ },
+ ]
+
+ if (canCompare.value && packagesData.value && packagesData.value.some(p => p !== null)) {
+ commands.push({
+ id: 'compare-copy-markdown',
+ group: 'actions',
+ label: $t('compare.packages.copy_as_markdown'),
+ keywords: [$t('compare.packages.section_comparison')],
+ iconClass: 'i-lucide:copy',
+ action: async () => {
+ await exportComparisonDataAsMarkdown()
+ announce($t('command_palette.announcements.copied_to_clipboard'))
+ },
+ })
+ }
+
+ if (canCompare.value && hasChartableFacets.value) {
+ commands.push(
+ {
+ id: 'compare-view-table',
+ group: 'actions',
+ label: $t('compare.packages.table_view'),
+ keywords: [$t('compare.packages.section_comparison')],
+ iconClass: 'i-lucide:table',
+ active: comparisonView.value === 'table',
+ action: () => {
+ comparisonView.value = 'table'
+ announce(
+ $t('command_palette.announcements.view_switched', {
+ view: $t('compare.packages.table_view'),
+ }),
+ )
+ },
+ },
+ {
+ id: 'compare-view-charts',
+ group: 'actions',
+ label: $t('compare.packages.charts_view'),
+ keywords: [$t('compare.packages.section_comparison')],
+ iconClass: 'i-lucide:chart-bar-decreasing',
+ active: comparisonView.value === 'charts',
+ action: () => {
+ comparisonView.value = 'charts'
+ announce(
+ $t('command_palette.announcements.view_switched', {
+ view: $t('compare.packages.charts_view'),
+ }),
+ )
+ },
+ },
+ )
+ }
+
+ return commands
+ }),
+)
+
useSeoMeta({
title: () =>
packages.value.length > 0
diff --git a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
index 11b96df102..1bc6ac2c94 100644
--- a/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
+++ b/app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
@@ -28,6 +28,25 @@ const toVersion = computed(() => versionRange.value?.to ?? '')
const router = useRouter()
const { data: pkg } = usePackage(packageName)
+const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
+ useCommandPalettePackageVersions(packageName)
+
+const commandPalettePackageContext = computed(() => {
+ const packageData = pkg.value
+ if (!packageData) return null
+
+ return {
+ packageName: packageData.name,
+ resolvedVersion: fromVersion.value || packageData['dist-tags']?.latest || null,
+ latestVersion: packageData['dist-tags']?.latest ?? null,
+ versions: commandPaletteVersions.value ?? Object.keys(packageData.versions ?? {}),
+ }
+})
+
+useCommandPalettePackageContext(commandPalettePackageContext, {
+ onOpen: ensureCommandPaletteVersionsLoaded,
+})
+useCommandPalettePackageCommands(commandPalettePackageContext)
const { data: compare, status: compareStatus } = useFetch(
() => `/api/registry/compare/${packageName.value}/v/${fromVersion.value}...${toVersion.value}`,
@@ -109,6 +128,8 @@ const toVersionUrlPattern = computed(() => {
return normalizeRoutePath(diffRoute(packageName.value, fromVersion.value, '{version}'))
})
+useCommandPaletteVersionCommands(commandPalettePackageContext, fromVersionUrlPattern)
+
useSeoMeta({
title: () => {
if (fromVersion.value && toVersion.value) {
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index 3fbdcfe994..630f4e8d2b 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -1,4 +1,9 @@
@@ -346,113 +440,51 @@ defineOgImageComponent('Default', {