-
-### 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..46819fb471 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -2,6 +2,8 @@
import { NO_DEPENDENCY_ID } from '~/composables/usePackageComparison'
import { useRouteQuery } from '@vueuse/router'
import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
+import FacetQuadrantChart from '~/components/Compare/FacetQuadrantChart.vue'
+import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
definePageMeta({
name: 'compare',
@@ -73,10 +75,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 +91,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 +136,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
@@ -330,7 +424,7 @@ useSeoMeta({