feat: add meteor docs platform#1170
Draft
Fabian Hüske (fabianhueske) wants to merge 46 commits into
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Replace the fragile runtime regex pipeline with build-time example source extraction served via a prerendered API route, modeled on Nuxt UI v4 docs: - collect example sources once in the component-meta module, strip library imports there (single transform shared by app and server), and refresh templates on example file changes in dev - serve sources via /api/component-example/:name.json with payload caching and prerendering - ComponentExample.vue fetches prepared source, renders it once via MDC, supports a #code slot for hand-written examples and a layout prop for preview arrangement - raw markdown/llms export reuses the same sources and honors #code overrides - pre-bundle meteor component library and shiki deps to fix dev server freezes
- Fix MDCSlot unwrap="ul" returning empty by removing the outer ul wrapper and letting MDCSlot render slot content directly; contentClass descendant selectors handle ul/li styling - Convert banner.md plain ## Do / ## Don't headings to ::do-dont component with #do and #dont slots, matching button.md format - Add meteor-device-helper client plugin to provide $device.onResize and removeResizeListener without importing the full library entry (avoids loading index.css which conflicts with the docs theme)
Remove all custom behavior additions and reduce content to two example pages so the platform can be evaluated and rebuilt on a stable foundation. Removed: - Custom plugins (meteor-device-helper, meteor-i18n) - Custom content components (ComponentExample, ComponentImport, PropsTable, DoDont, ColorPalette, TokenBrowser, TypographyScale, ElevationSurfaces, InteractionStates) - All example Vue components (button, banner, card) - Custom composables (useComponentExampleSource, useTokenDictionary) - Custom Nuxt module (component-meta) and all server utilities/routes - All content pages except index.md - Unused dependencies (vue-component-meta, vue-i18n) Kept: - Docus slot components (AppHeaderLogo, DocsAsideLeftBody, DocsAsideRightBottom, DocsPageHeaderLinks) - CSS token mappings (app.css, assets/css/main.css) - App config, page templates, and docus layer Added: - content/1.getting-started/1.introduction.md (example docs page) - content/2.components/1.button.md (example component docs page)
- drop page and component forks that only carried the unused meteor frontmatter feature or duplicated docus defaults - move useful-resources links into app.config toc.bottom - slim AppHeaderLogo to the minimal fork needed for the h-7 logo - move .agents/.claude skills and skills-lock.json into apps/docs
- merge app/app.config.ts shim into single app/app.config.ts - delete root app.config.ts re-export - delete app/pages/index.vue (Docus default landing template takes over) - delete content.config.ts (Docus default content collections take over)
Adds a :component-props MDC component that renders prop tables extracted from the component library SFCs via nuxt-component-meta (incl. JSDoc descriptions and defaults), replacing hand-written tables that drift out of sync. For the markdown exports the dynamic component is converted server-side into real GFM tables: a custom /raw/[...slug].md route replaces the built-in one, and a nitro plugin hooks llms-full.txt generation. The transform emits raw strings for the minimark stringifier and table AST nodes for the @nuxt/content stringifier, matching their inverse serialization behavior.
- comment out most --ui-* token mappings while iterating on the theme - remove the AppHeaderLogo fork in favor of the docus default
- drop ineffective eslint-disable (the docs app has no eslint) - remove resolved TODO comment on llms.domain - polish token mapping comment wording
…oggle Examples are SFCs under app/components/content/examples; their source is the displayed code (single source of truth). A #code slot allows manual overrides. The raw/llms exports replace the component with a real vue code block via the extended transformMeteorMdc. Examples import components via package subpaths (e.g. .../MtButton) so only component-scoped CSS loads, keeping the library's global stylesheet out of the docs page.
Port the Storybook icon browser to an IconBrowser MDC component: search, regular/solid tabs with counts, a paginated icon grid, empty state, and click-to-copy with snackbar feedback. The icon list comes from the icon kit's meta.json. Add IconCommonUsages (the common-usage reference grid) and migrate the foundations/icons page using both, plus the icon mode/size/color examples.
- Sidebar: order Getting Started / Foundations / Components with section icons; pill variant + highlight via app.config; collapse the Tokens and Content sub-sections on load via .navigation.yml defaultOpen. - Components sort alphabetically by dropping the numeric file prefixes (no more manual renumbering). - Contributing page renders the repo-root CONTRIBUTING.md (single source). - DoDont: side-by-side by default, `vertical` opt-in; pages with >2 bullets or very long points use vertical. - Rebuild the icon browser, token browser, and color palette chrome on Nuxt UI (UInput/UTabs/UPagination/useToast) instead of meteor components; token browser shows a single theme-following swatch and font-family shows only the primary family. - Elevation surfaces rewritten with fixed primitive (zinc) Tailwind classes. - Cross-link component mentions now that all component pages exist.
- Reorganize foundations content into top-level Design, Content, and Components sections. - Render every dynamic content component to real markdown in the /raw/*.md route and llms/MCP export (previously empty <tag></tag>): color palette, typography scale, token browser, elevation surfaces, interaction states, and common icon usages emit tables; the icon browser and contributing guide emit a descriptive note/link. - Extract shared token and icon-usage data modules so the components and the export draw from one source. - Add the avatar example image (public/avatar.svg) and point the "with image" example at it to fix a 404.
- Align tokens and typography tables visually (shared margins, row padding, font-size tokens, adaptive swatch border) - Make ElevationSurfaces responsive via container query (stacks panels on narrow containers) - Icon browser: link-mode tabs, 20px icons, secondary-hover on cards - Rewrite duplicative page intros that restated the description - Rename design/overview to design/tokens
…k, controlled state)
…ent, filtering, wrapper)
…ions, and validation reference
…plates The stripExampleCode regex unwrapped the outer <template> with a non-greedy match, so any example with nested slot templates was truncated at the first inner </template>. Drop the utility and display the full SFC source (script + template), trimmed.
The design tokens page was renamed from overview to tokens; update the six internal links that still pointed at the old path.
…add visually-hidden util - Left-align component preview content and the show/hide code toggle - Replace UButton with a native button: leading chevron that rotates 90deg when open, no hover background, hover underline + primary text color - Speed up chevron and collapsible animations to 100ms - Add the .visually-hidden utility to docs CSS so component a11y labels (e.g. mt-pagination) stay hidden, since the library styles.css is not loaded
- Add a copy-code button to the right of the code toggle row, with copied feedback (check icon + "Copied" label) - Hide the code block's built-in copy button by default via new inlineCopyButton prop, since the toggle row now provides one - Simplify the toggle label to just "Code"
- Use a strong custom ease-out curve (--ease-out) instead of the weak built-in easings for the code toggle's chevron and collapsible - Make the collapsible reveal asymmetric: 200ms enter, 150ms exit - Respect prefers-reduced-motion (drop the movement animations)
- Add fullWidth prop to ComponentExample to stretch the rendered example to the preview width; roll it out across block-level examples (fields, cards, tables, banners, selects, datepicker, slider, progress-bar, text-editor, etc.) - Size the loader examples with a positioned wrapper so the absolutely positioned mt-loader actually renders - Show all four directions in the tooltip placement example - Lay out the text sizes example vertically - Carry over the v-tooltip directive styles so docs tooltips (e.g. the text-editor toolbar) render with a background instead of bare text
Move the library globals the docs re-provide (dark color-scheme, .visually-hidden, .mt-tooltip directive styles) out of main.css into a dedicated meteor-globals.css with a documented charter and source pointers. main.css now holds just the theme bridge and docs-only tokens.
- Render token tables (ColorPalette, TokenBrowser, TypographyScale) SSR-safe via a shared useResolvedTokens composable; previews come from var(--token) directly and resolved values are progressive enhancement - Add useCopyToClipboard composable, replacing 3 hand-rolled clipboard+toast implementations with consistent success/error feedback - Add shared exampleKey() helper used by the API route, markdown transform, and ComponentExample so the lookup key can't desync - Extract addPrerenderHint() and align the lazy policy across the fetch composables - IconBrowser: count modes in a single pass; TokenBrowser: memoize row badges - formatType: handle escaped backslashes in string literals - tokens.ts: replace any/Json with a typed TokenTree model - transformMeteorMdc: merge walkInPlace/walkChildren into one function - Remove dead listComponentExamples export and its _index.json machinery
Replace the per-comparison "X vs Y" subsections (heading + factor sentence + two bullets) with a single bullet list: one bullet per related component, linked, with a brief note on when to use that component instead. Stops restating when to use the current component on its own page. Updates DOCS_STANDARD.md and all 31 component pages.
- Document Floating UI (ported from Storybook): usage, basic + multiple-anchor examples, working API reference, do/don't, behavior, accessibility - Let the component-meta parser include mt-floating-ui (it lives under _internal but is publicly exported) so :component-api renders - Add a concise Inset page documenting its CSS-variable API - Link Inset from the Card page, and link Floating UI from the Popover and Action Menu pages now that both have pages
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.
No description provided.