feat(components): remove azion-webkit, port all components locally with Tailwind - #2316
Open
isaque-bock-azion wants to merge 2 commits into
Open
feat(components): remove azion-webkit, port all components locally with Tailwind#2316isaque-bock-azion wants to merge 2 commits into
isaque-bock-azion wants to merge 2 commits into
Conversation
… locally
Recreates every component the site imported from azion-webkit@1 (37 SFCs) in
src/components/webkit/, built on native markup + Tailwind CSS v4 instead of
PrimeVue, then rewires all 12 code consumers and 650 content .mdx files to
the local components. azion-webkit is removed from package.json entirely.
Ported components, by group:
- Header widgets: SelectLang, DropdownThemeSwitcher, SystemStatus,
HeaderRightSidebar, HeaderSearchDialog + AlgoliaDialog/AlgoliaInstantSearch/
AlgoliaIndexHit/KeyboardKey, AskAISplitButton
- Navigation: Breadcrumb, ArticleNavigation, TableOfContents(+Item), Community
- Content primitives: Overline, LinkButton, ContentSection(+TitleSection),
CardBase(+Clickable/Title/Description), ReadableContent, Container,
SectionBasicContent
- Homepage hero: HeroHome, HeroBase, HeroButton, ContentLogo, Banner
- Brand: AzionLogo + its 5 SVG variants
Notable fixes made while porting (beyond straight translation):
- HeaderRightSidebar and AlgoliaDialog: their root <Teleport> now renders
only after mount (`v-if="isMounted"`). Astro islands SSR these components,
and a server-rendered teleport has no matching node on the client,
producing hydration mismatches.
- AlgoliaDialog: the original synced its `isDialogActive` prop inside
`onUpdated`, which only worked because the old template happened to
re-render on every prop change. The port's template doesn't, so the prop
update was silently dropped -- replaced with an explicit `watch`.
- AlgoliaDialog: dropped the `<Transition>` wrapper. Its enter/leave depend
on requestAnimationFrame, which can stall in a background/throttled tab --
a stalled enter left the overlay stuck semi-transparent, and a stalled
leave kept the dialog in the DOM after Escape/mask-click.
- AskAISplitButton (pt-br/es menus): "Get page link" now calls
`copyPageLink` instead of `getPageLink` (which never copied), matching the
English menu's behavior -- a latent bug in the original.
CSS: vendored the remaining azion-webkit stylesheets that PrimeVue-era
classes on the page still depend on until the Phase 3 PrimeVue removal
(webkit-v1-{avatar,button,divider}.css), and dropped the Tailwind
@source scan of node_modules/azion-webkit/src (no longer needed).
Build verified: 1494 pages, frontmatter test passing. Manually exercised in
the browser against both the dev server and an `astro preview` production
build: header search (open/close via Escape, mask click, and the visual esc
button; real Algolia results; scroll contained within the dialog panel),
mobile menu drawer, theme switcher (System/Light, localStorage persisted),
language selector, table of contents, breadcrumb, article navigation,
AskAI "Copy page", and the homepage hero -- zero console errors on either
build.
azion-theme's markdown stylesheet forces `.prose a:not(.p-button) { color:
var(--text-color-link) !important }` on every link that isn't a PrimeVue
button, to distinguish inline text links from real buttons. LinkButton lost
the `.p-button` class when it was ported off PrimeVue, so every LinkButton
rendered inside article content (ReadableContent wraps the whole body in
`.prose`) inherited the plain-text link color instead of its own.
Bump every selector to `a[href].wk-button...` (adds the `[href]` attribute
selector, which every LinkButton always has) and mark the `color`
declarations `!important`, so the button's own color wins the specificity
and importance fight against azion-theme's rule.
This was referenced Aug 19, 2026
isaque-bock-azion
force-pushed
the
feat/local-webkit-components
branch
from
August 19, 2026 20:06
93c4a87 to
0c15de4
Compare
isaque-bock-azion
marked this pull request as ready for review
August 19, 2026 22:44
isaque-bock-azion
requested review from
a team,
bruno-andrade-azion,
marcus-souza-azion and
pedro-ribeiro-azion
as code owners
August 19, 2026 22:44
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Third PR in the docs modernization stack (base: #2315). Removes the
azion-webkit@1dependency entirely by recreating every component the site imported from it — 37 SFCs insrc/components/webkit/— using native markup + Tailwind CSS v4 instead of PrimeVue.This corresponds to the "component gap" part of MM-15898 (Phase 2 of the modernization plan), done without waiting on
@aziontech/webkit@4— the primitives are just Tailwind here instead.Scope
.mdxfiles that importedLinkButton/Container/HeroHome/SectionBasicContentdirectly.azion-webkitremoved frompackage.json; the remaining PrimeVue-era CSS the page still depends on (avatar/button/divider) is vendored intosrc/styles/webkit-v1-*.cssuntil the Phase 3 PrimeVue removal.Bugs found and fixed while porting
HeaderRightSidebarandAlgoliaDialogteleport to<body>from their template root. Astro islands SSR these components, so a server-rendered teleport has no matching client node. Fixed by gating the<Teleport>behindv-if="isMounted".isDialogActiveprop insideonUpdated, relying on the old template re-rendering on every prop change to pick it up. The new template doesn't trigger that same re-render path, so opening the dialog did nothing — replaced with an explicitwatch.<Transition>wrapper — its enter/leave hooks depend onrequestAnimationFrame, which stalls in a backgrounded/throttled tab. A stalled enter left the overlay visually semi-transparent; a stalled leave kept the dialog in the DOM after Escape or a mask click.getPageLink(which only returns a string, never copies) instead ofcopyPageLink— now consistent with the English menu.Verification
pnpm run build:local: 1494 pages, frontmatter test passing, zero references toazion-webkitanywhere in the repo.astro devand anastro previewproduction build, zero console errors on either:.azion-light/.azion-darkand persists tolocalStorage, matches production visually.Known notes
Footer.vue/HeaderMenuNav.vue/SidebarPanelMenu.vue) — that removal is Phase 3 of the modernization plan and a separate PR.astro-expressive-codeunknown-language warnings on a few MDX files are pre-existing and out of scope here.🤖 Generated with Claude Code