Skip to content

feat: package header UI #2035

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

Merged
alexdln merged 29 commits into from
Mar 12, 2026
+1,170 −1,358
Merged

feat: package header UI #2035

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
0bed08a
refactor: move package-header to new component
alexdln Mar 10, 2026
06b5b05
test: add a11y test for package header
alexdln Mar 10, 2026
08cacfb
feat: update package header ui
alexdln Mar 11, 2026
4d57583
chore: update package grid
alexdln Mar 11, 2026
766266e
test: fix package-header a11y test
alexdln Mar 11, 2026
6d9fb40
feat: use version-selector in package-header
alexdln Mar 11, 2026
bcbd1ce
test: fix package-header test
alexdln Mar 11, 2026
5095bf5
i18n: remove extra keys
alexdln Mar 11, 2026
2edb465
a11y: improve a11y for success badge
alexdln Mar 11, 2026
39c2eb5
test: update tests for new package-header
alexdln Mar 11, 2026
f932797
test: update tests for new package-header
alexdln Mar 11, 2026
dc1740e
feat: update package skeleton for new package-header
alexdln Mar 11, 2026
64c37b6
chore: resolve conflicts with main
alexdln Mar 12, 2026
d068685
refactor: configure more shortcuts and move logic to package-header
alexdln Mar 12, 2026
9f55b5d
test: fix types in package-header tests
alexdln Mar 12, 2026
b11869f
test: remove unused code
alexdln Mar 12, 2026
dd49a5a
feat: rename readme tab to main tab
alexdln Mar 12, 2026
ab9b15e
feat: use package header on all package pages
alexdln Mar 12, 2026
897244e
fix: update sticky package header logic
alexdln Mar 12, 2026
425e73c
feat: improve package-header ui
alexdln Mar 12, 2026
e8ed065
feat: improve package main skeleton
alexdln Mar 12, 2026
3899d6d
fix: remove unused translation
alexdln Mar 12, 2026
b4db97e
test: update package-docs tests for new package-header
alexdln Mar 12, 2026
e7fee8b
test: fix ci
alexdln Mar 12, 2026
639d784
fix: apply suggestions and fix version-slector
alexdln Mar 12, 2026
f09c274
fix: update props in a11y test
alexdln Mar 12, 2026
8ce16a1
fix: use dynamic header height in docs
alexdln Mar 12, 2026
4763268
Merge branch 'main' into feat/package-header-ui
graphieros Mar 12, 2026
6b98b05
[autofix.ci] apply automated fixes
autofix-ci[bot] Mar 12, 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
2 changes: 1 addition & 1 deletion app/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@

--badge-blue: oklch(0.579 0.191 252);
--badge-yellow: oklch(0.588 0.183 91);
--badge-green: oklch(0.566 0.202 165);
--badge-green: oklch(0.49 0.15 161.08);
--badge-indigo: oklch(0.457 0.24 277.023);
--badge-purple: oklch(0.495 0.172 295);
--badge-orange: oklch(0.67 0.185 55);
Expand Down
12 changes: 10 additions & 2 deletions app/components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,21 @@ const closeModal = () => modalRef.value?.close?.()
</p>
<ul class="mb-8 flex flex-col gap-2">
<li class="flex gap-2 items-center">
<kbd class="kbd">.</kbd>
<span>{{ $t('shortcuts.open_code_view') }}</span>
<kbd class="kbd">m</kbd>
<span>{{ $t('shortcuts.open_main') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">d</kbd>
<span>{{ $t('shortcuts.open_docs') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">.</kbd>
<span>{{ $t('shortcuts.open_code_view') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">f</kbd>
<span>{{ $t('shortcuts.open_diff') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">c</kbd>
<span>{{ $t('shortcuts.compare_from_package') }}</span>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Code/MobileTreeDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ watch(isOpen, open => (isLocked.value = open))
<!-- Toggle button (mobile only) -->
<ButtonBase
variant="primary"
class="md:hidden fixed bottom-4 inset-ie-4 z-45"
class="md:hidden fixed bottom-9 inset-ie-4 z-45"
:aria-label="$t('code.toggle_tree')"
@click="isOpen = !isOpen"
:classicon="isOpen ? 'i-lucide:x' : 'i-lucide:folder'"
Expand Down
2 changes: 1 addition & 1 deletion app/components/Link/Base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
<kbd
v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
data-kbd-hint
class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
class="ms-2 hidden sm:inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
aria-hidden="true"
>
{{ ariaKeyshortcuts }}
Expand Down
Loading
Loading