From f18c25303b42d650ac38e62c56f07570cbb91d94 Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Thu, 16 Jul 2026 21:06:15 +0200 Subject: [PATCH 01/14] WIP refacto code --- src/components/aside/aside.svelte | 8 ++ src/components/breadcrumbs.svelte | 4 +- src/routes/+layout.svelte | 6 +- src/routes/docs/+layout.svelte | 95 +++++++++++++- src/templates/doc.svelte | 197 +++++++++--------------------- 5 files changed, 162 insertions(+), 148 deletions(-) create mode 100644 src/components/aside/aside.svelte diff --git a/src/components/aside/aside.svelte b/src/components/aside/aside.svelte new file mode 100644 index 00000000..1808b80a --- /dev/null +++ b/src/components/aside/aside.svelte @@ -0,0 +1,8 @@ + + + diff --git a/src/components/breadcrumbs.svelte b/src/components/breadcrumbs.svelte index 4264eff4..d7848a5e 100644 --- a/src/components/breadcrumbs.svelte +++ b/src/components/breadcrumbs.svelte @@ -27,7 +27,7 @@ {/if} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 52d8921b..f0576f80 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -77,9 +77,9 @@ -
- {@render children()} -
+ + {@render children()} + diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte index 02a9d3ea..7cc827e1 100644 --- a/src/routes/docs/+layout.svelte +++ b/src/routes/docs/+layout.svelte @@ -1,7 +1,9 @@ -
- - - - -
- - (navOpen = true)} aria-label="open navigation"> - {#snippet prepend()} - - - - {/snippet} - - Menu - - - - - - {#snippet activator({ toggle, open }: ModelDropdownProps)} - toggle(e.currentTarget as HTMLElement)}> - On this page - - {#snippet append()} - - {#if open} - - {:else} - - {/if} - - {/snippet} - - {/snippet} - - - - -
- - -
- {@render children?.()} -
- - - {#if data.prevDoc} - - {#snippet prepend()} - - - - {/snippet} - {capitalize(data.prevDoc.title)} - - {/if} - - {#if data.nextDoc} - - {#snippet append()} - - - - {/snippet} - {capitalize(data.nextDoc.title)} - - {/if} - -
- - -
- - -
+ + nav.toggle()} aria-label="open navigation"> + {#snippet prepend()} + + + + {/snippet} + + Menu + + + +
+ + +
+ {@render children?.()} + +
footer article
+
+ +
From b3f8c453c294415cfa3b8b115bc870f9927d425c Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Fri, 17 Jul 2026 11:12:47 +0200 Subject: [PATCH 02/14] WIP optimisation UI + bugfix to display and refacto code --- src/components/drawer.svelte | 13 +++-- src/components/table-of-content.svelte | 14 +---- src/routes/docs/+layout.svelte | 2 +- src/routes/md.css | 12 ++++- src/routes/theme.css | 26 +++++----- src/templates/doc.svelte | 71 ++++++++++++++++++++++---- src/templates/section.svelte | 67 +++--------------------- 7 files changed, 104 insertions(+), 101 deletions(-) diff --git a/src/components/drawer.svelte b/src/components/drawer.svelte index a1980d95..6546118b 100644 --- a/src/components/drawer.svelte +++ b/src/components/drawer.svelte @@ -17,7 +17,7 @@ {#if open} + + diff --git a/src/components/table-of-content.svelte b/src/components/table-of-content.svelte index 0e8f3cf0..9d64474d 100644 --- a/src/components/table-of-content.svelte +++ b/src/components/table-of-content.svelte @@ -1,7 +1,6 @@ - + nav.toggle()} aria-label="open navigation"> {#snippet prepend()} @@ -79,18 +79,70 @@ Menu + + + + + {#snippet activator({ toggle, open }: ModelDropdownProps)} + toggle(e.currentTarget as HTMLElement)}> + On this page + + {#snippet append()} + + {#if open} + + {:else} + + {/if} + + {/snippet} + + {/snippet} + +
-
+
{@render children?.()} -
footer article
+
+ + {#if data.prevDoc} + + {#snippet prepend()} + + + + {/snippet} + {capitalize(data.prevDoc.title)} + + {/if} + + {#if data.nextDoc} + + {#snippet append()} + + + + {/snippet} + {capitalize(data.nextDoc.title)} + + {/if} + +
-
From 55a5b3aadf2da1ebfce5d53b9d75d487dac79914 Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Fri, 17 Jul 2026 11:13:58 +0200 Subject: [PATCH 03/14] update documentation --- src/content/docs/components/card.md | 30 +++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/content/docs/components/card.md b/src/content/docs/components/card.md index 15d4f872..14c751df 100644 --- a/src/content/docs/components/card.md +++ b/src/content/docs/components/card.md @@ -1,6 +1,6 @@ --- -title: "Card" -description: "Organize and display content in visually coherent blocks. The Lapikit card component is easy to style." +title: 'Card' +description: 'Organize and display content in visually coherent blocks. The Lapikit card component is easy to style.' --- + +{#if type === 'note'} +
+ + + + + {#if text} + {text} + {:else} + {@render props.children?.()} + {/if} +
+{:else} + + {#snippet prepend()} + {#if type === 'info'} + + {:else if type === 'warning'} + + {:else if type === 'important'} + + {:else if type === 'good'} + + {/if} + {/snippet} +
+ {#if text} + {text} + {:else} + {@render props.children?.()} + {/if} +
+ +{/if} + + diff --git a/src/content/docs/breakpoints.md b/src/content/docs/breakpoints.md index d60147bc..376d830f 100644 --- a/src/content/docs/breakpoints.md +++ b/src/content/docs/breakpoints.md @@ -1,6 +1,7 @@ --- layout: "legacy" -title: "breakpoints" -description: "Manage the reactivity of your Lapikit components with customizable breakpoints. Easily adapt to all devices." +head: + title: "breakpoints" + description: "Manage the reactivity of your Lapikit components with customizable breakpoints. Easily adapt to all devices." --- diff --git a/src/content/docs/changelog.md b/src/content/docs/changelog.md index b1de67d0..b80ac8fb 100644 --- a/src/content/docs/changelog.md +++ b/src/content/docs/changelog.md @@ -1,8 +1,9 @@ --- -title: "changelog" -description: "Follow the latest Lapikit developments, updates and fixes. Transparency and continuous improvement for your components." +title: "Changelog" +category: "Release" +head: + title: "changelog" + description: "Follow the latest Lapikit developments, updates and fixes. Transparency and continuous improvement for your components." --- -# Changelog -

Changelog Content

diff --git a/src/content/docs/components/accordion.md b/src/content/docs/components/accordion.md index 4cc11800..cd986545 100644 --- a/src/content/docs/components/accordion.md +++ b/src/content/docs/components/accordion.md @@ -1,6 +1,9 @@ --- -title: "Accordion" -description: "Display expandable content in a seamless interface. The Lapikit accordion component is lightweight, accessible, and customizable." +title: "Accordion component" +category: "Components" +head: + title: "Accordion" + description: "Display expandable content in a seamless interface. The Lapikit accordion component is lightweight, accessible, and customizable." --- -# Accordion component - An `kit:accordion` lets you group content into collapsible sections. It improves legibility and saves space in an interface, while offering precise control over the display of information. It is composed of two parts: `kit:accordion` as the container and `kit:accordion-item` for each collapsible entry. **Role of the Accordion component** diff --git a/src/content/docs/components/alert.md b/src/content/docs/components/alert.md index e255c9de..13077c94 100644 --- a/src/content/docs/components/alert.md +++ b/src/content/docs/components/alert.md @@ -1,6 +1,9 @@ --- -title: "Alert" -description: "Display alert or status messages. Manage variants, densities and info types for effective user feedback." +title: "Alert component" +category: "Components" +head: + title: "Alert" + description: "Display alert or status messages. Manage variants, densities and info types for effective user feedback." --- -# Alert component - The `kit:alert` component displays a contextual message to the user. It supports multiple tones, visual variants, and optional snippets for custom prepend, append, and close content. It is ideal for providing feedback, warnings, or important information in a way that stands out from the rest of the interface. import('$examples/components/alert/preview.svelte?raw')}> diff --git a/src/content/docs/components/appbar.md b/src/content/docs/components/appbar.md index 2ea70660..e8f8ba1c 100644 --- a/src/content/docs/components/appbar.md +++ b/src/content/docs/components/appbar.md @@ -1,6 +1,9 @@ --- -title: "Appbar" -description: "Add an elegant, responsive application bar to your interfaces. Perfect for headers or navigation zones." +title: "Appbar component" +category: "Components" +head: + title: "Appbar" + description: "Add an elegant, responsive application bar to your interfaces. Perfect for headers or navigation zones." --- -# Appbar component - The `kit:appbar` is an essential component for structuring an application's header. It provides a dedicated space for displaying elements such as titles, icons, buttons or menus. Thanks to its many customization options, the `kit:appbar` integrates perfectly into a variety of designs, from minimalist to complex. import('$examples/components/appbar/preview.svelte?raw')}> diff --git a/src/content/docs/components/application.md b/src/content/docs/components/application.md index 745597a6..2b5a8cce 100644 --- a/src/content/docs/components/application.md +++ b/src/content/docs/components/application.md @@ -1,6 +1,9 @@ --- -title: "Application" -description: "The root component of your Svelte projects with Lapikit. The ideal basis for structuring your app with logic and clarity." +title: "Application component" +category: "Components" +head: + title: "Application" + description: "The root component of your Svelte projects with Lapikit. The ideal basis for structuring your app with logic and clarity." --- -# Application component - The `kit:app` component is an root layout for all component Lapikit. It acts as a global provider, initializing and centralizing everything Lapikit needs to function properly. **Role of the App component** diff --git a/src/content/docs/components/aspect-ratio.md b/src/content/docs/components/aspect-ratio.md index 707dd1ed..7b0c46e1 100644 --- a/src/content/docs/components/aspect-ratio.md +++ b/src/content/docs/components/aspect-ratio.md @@ -1,6 +1,9 @@ --- -title: "Aspect Ratio" -description: "Manage the ratios of your images, videos or blocks easily with this ready-to-use Svelte Lapikit component." +title: "Aspect Ratio component" +category: "Components" +head: + title: "Aspect Ratio" + description: "Manage the ratios of your images, videos or blocks easily with this ready-to-use Svelte Lapikit component." --- -# Aspect Ratio component - The `kit:aspect-ratio` component maintains a constant aspect ratio for an element, whatever its content. It is particularly useful for videos, images or any other content requiring a proportional layout. Thanks to its flexible options, it can be easily integrated into different design contexts import('$examples/components/aspect-ratio/preview.svelte?raw')}> diff --git a/src/content/docs/components/avatar.md b/src/content/docs/components/avatar.md index 961fad04..3a5128c2 100644 --- a/src/content/docs/components/avatar.md +++ b/src/content/docs/components/avatar.md @@ -1,6 +1,9 @@ --- -title: "Avatar" -description: "Display profile images, icons or initials in a variety of formats. Perfect for lists, headers or cards." +title: "Avatar component" +category: "Components" +head: + title: "Avatar" + description: "Display profile images, icons or initials in a variety of formats. Perfect for lists, headers or cards." --- -# Avatar component - The `kit:avatar` component is used to display images, icons or initials representing a person or object. It is often used in user interfaces to identify users, profiles or entities. Thanks to its many customization options, the `kit:avatar` component adapts easily to different styles and contexts. import('$examples/components/avatar/preview.svelte?raw')}> diff --git a/src/content/docs/components/button.md b/src/content/docs/components/button.md index cefe9346..24890773 100644 --- a/src/content/docs/components/button.md +++ b/src/content/docs/components/button.md @@ -1,6 +1,9 @@ --- -title: "Button" -description: "Stylish, customizable Svelte buttons with Lapikit. Variants, icons, colors, states: everything's ready." +title: "Button component" +category: "Components" +head: + title: "Button" + description: "Stylish, customizable Svelte buttons with Lapikit. Variants, icons, colors, states: everything's ready." --- -# Button component - The `kit:btn` component is a central component of Lapikit. It allows you to create buttons that are adaptable, accessible and easily customized, either via props or CSS variables. It automatically manages variants, states (`active`, `loading`, etc.), accessibility, colors, sizes, and integrates with icons or additional content (`prepend`, `append`, `load`). diff --git a/src/content/docs/components/card.md b/src/content/docs/components/card.md index e6b50d0b..b281b35b 100644 --- a/src/content/docs/components/card.md +++ b/src/content/docs/components/card.md @@ -1,6 +1,9 @@ --- -title: "Card" -description: "Organize and display content in visually coherent blocks. The Lapikit card component is easy to style." +title: "Card component" +category: "Components" +head: + title: "Card" + description: "Organize and display content in visually coherent blocks. The Lapikit card component is easy to style." --- -# Card component - The `kit:card` component is a versatile container used to group together information or actions in a user interface. It can be used to display content, images, buttons or links, while offering advanced customization to suit various styles and contexts. import('$examples/components/card/preview.svelte?raw')}> diff --git a/src/content/docs/components/chip.md b/src/content/docs/components/chip.md index 7539e5ba..f4f4c52e 100644 --- a/src/content/docs/components/chip.md +++ b/src/content/docs/components/chip.md @@ -1,6 +1,9 @@ --- -title: "Chip" -description: "Small, practical UI elements for filters, tags or status. Supports colors, states, events and variants." +title: "Chip component" +category: "Components" +head: + title: "Chip" + description: "Small, practical UI elements for filters, tags or status. Supports colors, states, events and variants." --- -# Chip component - The `kit:chip` component displays small interactive labels, perfect for representing status, categories, filters or actions. Compact, stylable and highly flexible, it can be clicked, disabled, loaded, closed or enriched with snippets. It supports different variants, states, densities and sizes, to suit all UI contexts. It can be used alone, in groups, or as the basis for a tag or filter system. diff --git a/src/content/docs/components/dialog.md b/src/content/docs/components/dialog.md index 956ee0b6..e9ea334b 100644 --- a/src/content/docs/components/dialog.md +++ b/src/content/docs/components/dialog.md @@ -1,6 +1,9 @@ --- -title: "Dialog" -description: "Create modal dialogs with a fluid UX. Integrated focus, size, density and behavior management." +title: "Dialog component" +category: "Components" +head: + title: "Dialog" + description: "Create modal dialogs with a fluid UX. Integrated focus, size, density and behavior management." --- -# Dialog component - The `kit:dialog` component is a modal window based on the native HTML element ``. Thanks to this foundation, it benefits from accessible and semantic features by default, such as focus management, closing with the Escape key or clicking outside the box (unless persistent is enabled). It can be used to display temporary content above the main interface: messages, forms, confirmations, etc. It is controlled via the prop bindable open, can be customized in position, size, density and style, and adapts easily to all usage contexts. diff --git a/src/content/docs/components/dropdown.md b/src/content/docs/components/dropdown.md index 9ed87a1f..03d16425 100644 --- a/src/content/docs/components/dropdown.md +++ b/src/content/docs/components/dropdown.md @@ -1,6 +1,9 @@ --- -title: "Dropdown" -description: "Flexible drop-down menu for actions or selections. Manages focus, clicks and intelligent positioning." +title: "Dropdown component" +category: "Components" +head: + title: "Dropdown" + description: "Flexible drop-down menu for actions or selections. Manages focus, clicks and intelligent positioning." --- -# Dropdown component - The `kit:dropdown` component displays a menu or contextual content when opened, positioned around a trigger element. It can be opened by clicking or hovering, and closes automatically according to selected parameters (**closeOnClick**, **openOnHover**, etc.). It's designed to offer great flexibility: configurable positioning, customizable appearance, and a customizable activator for total trigger control. diff --git a/src/content/docs/components/icon.md b/src/content/docs/components/icon.md index af72ad81..e74c8a81 100644 --- a/src/content/docs/components/icon.md +++ b/src/content/docs/components/icon.md @@ -1,6 +1,9 @@ --- -title: "Icon" -description: "Insert icons easily with Lapikit. Manage sizes, colors, states and seamless integration into your components." +title: "Icon component" +category: "Components" +head: + title: "Icon" + description: "Insert icons easily with Lapikit. Manage sizes, colors, states and seamless integration into your components." --- -# Icon component - The `kit:icon` component is a sizing and accessibility wrapper for icons. It supports three rendering modes: SVG component via `children`, image via `src`, or CSS icon font via `name`. import('$examples/components/icon/preview.svelte?raw')}> diff --git a/src/content/docs/components/index.md b/src/content/docs/components/index.md index 654b6f15..7c8dbe39 100644 --- a/src/content/docs/components/index.md +++ b/src/content/docs/components/index.md @@ -1,6 +1,9 @@ --- -title: "Components" -description: "Find out more about Lapikit Svelte components." +title: "Discover the Lapikit components" +category: "Components" +head: + title: "Components" + description: "Find out more about Lapikit Svelte components." layout: "section" --- @@ -8,8 +11,6 @@ layout: "section" import ListComponents from "$components/list-components.svelte"; -# Discover the Lapikit components - Components are at the heart of Lapikit. Without them, the library won’t exist. Each component is a reusable block of code that handles an entire user interface element, in perfect alignment with the design system defined by Lapikit. diff --git a/src/content/docs/components/list.md b/src/content/docs/components/list.md index a47e60d2..1ed1a305 100644 --- a/src/content/docs/components/list.md +++ b/src/content/docs/components/list.md @@ -1,6 +1,9 @@ --- -title: "List" -description: "Structure your data with a stylized list. Ideal for menus, hierarchical content or clickable elements." +title: "List component" +category: "Components" +head: + title: "List" + description: "Structure your data with a stylized list. Ideal for menus, hierarchical content or clickable elements." --- -# List component - The `kit:list` and `kit:list-item` components render structured vertical lists. Items are interactive automatically when `onclick` is attached or `href` is set. import('$examples/components/list/preview.svelte?raw')}> diff --git a/src/content/docs/components/modal.md b/src/content/docs/components/modal.md index 0c873b4f..69e26a87 100644 --- a/src/content/docs/components/modal.md +++ b/src/content/docs/components/modal.md @@ -1,6 +1,9 @@ --- -title: "Modal" -description: "Display stacked content in a responsive modal window. Manages position, keyboard interaction and stacking." +title: "Modal component" +category: "Components" +head: + title: "Modal" + description: "Display stacked content in a responsive modal window. Manages position, keyboard interaction and stacking." --- -# Modal component - The `kit:modal` component displays an overlay panel above the main content. It is designed for dialogs, contextual messages, forms or alerts requiring direct interaction. The modal can be centered, fixed at the top or bottom of the screen, and closes in different ways depending on the options activated (outside click, Escape key, etc.). It is a flexible alternative to [`kit:dialog`](/docs/components/dialog) when you need more control over the structure, behavior or styling of the modal content, or when you want to manage the backdrop at the application level. diff --git a/src/content/docs/components/popover.md b/src/content/docs/components/popover.md index 31ff666c..89b0e698 100644 --- a/src/content/docs/components/popover.md +++ b/src/content/docs/components/popover.md @@ -1,6 +1,9 @@ --- -title: "Popover" -description: "Show contextual information on click or hover. Ideal for enhancing your buttons, links or interactive elements." +title: "Popover component" +category: "Components" +head: + title: "Popover" + description: "Show contextual information on click or hover. Ideal for enhancing your buttons, links or interactive elements." --- -# Popover component - The `kit:popover` component displays contextual content above an activator. It is useful for providing additional information, options or secondary actions without overloading the main interface. Popovers open dynamically from an activator and can be positioned in several directions: _top_, bottom, left or right. It is bindable and customizable in terms of theme, density, color, etc. diff --git a/src/content/docs/components/separator.md b/src/content/docs/components/separator.md index af10a9bd..cedb176d 100644 --- a/src/content/docs/components/separator.md +++ b/src/content/docs/components/separator.md @@ -1,6 +1,9 @@ --- -title: "Separator" -description: "Visually separate your UI blocks with customizable lines in size, color, orientation and opacity." +title: "Separator component" +category: "Components" +head: + title: "Separator" + description: "Visually separate your UI blocks with customizable lines in size, color, orientation and opacity." --- -# Separator component - The `kit:separator` component renders a thin horizontal or vertical dividing line. import('$examples/components/separator/preview.svelte?raw')}> diff --git a/src/content/docs/components/textfield.md b/src/content/docs/components/textfield.md index ede7397f..3c16e30e 100644 --- a/src/content/docs/components/textfield.md +++ b/src/content/docs/components/textfield.md @@ -1,6 +1,9 @@ --- -title: "Textfield" -description: "Explore the Textfield component of Lapikit: customizable input fields for Svelte with full styling, validation and theming support to build forms faster." +title: "Textfield component" +category: "Components" +head: + title: "Textfield" + description: "Explore the Textfield component of Lapikit: customizable input fields for Svelte with full styling, validation and theming support to build forms faster." --- -# Textfield component - The `kit:textfield` component provides a versatile input solution for capturing user data. It supports various input types, validation states, and enhanced features like character counting and clearable functionality. Designed for i increase accessibility and user experience in mind in your interphase. Instead of reinventing textfield logic, Lapikit Textfield enables you to focus on behavior and data flow. diff --git a/src/content/docs/components/toolbar.md b/src/content/docs/components/toolbar.md index bb89d71b..3695c9f2 100644 --- a/src/content/docs/components/toolbar.md +++ b/src/content/docs/components/toolbar.md @@ -1,6 +1,9 @@ --- -title: "Toolbar" -description: "Group actions in a compact, coherent space. Ideal for headers, lists or content filters." +title: "Toolbar component" +category: "Components" +head: + title: "Toolbar" + description: "Group actions in a compact, coherent space. Ideal for headers, lists or content filters." --- -# Toolbar component - The `kit:toolbar` component creates a flexible, customizable toolbar, ideal for organizing actions, titles, filters or other navigation content. It is designed to adapt to different contexts thanks to its layout, style and density options. import('$examples/components/toolbar/preview.svelte?raw')}> diff --git a/src/content/docs/components/tooltip.md b/src/content/docs/components/tooltip.md index 32870048..a251d9db 100644 --- a/src/content/docs/components/tooltip.md +++ b/src/content/docs/components/tooltip.md @@ -1,6 +1,9 @@ --- -title: "Tooltip" -description: "Provide additional info without cluttering the UI. Display on hover with intelligent positioning." +title: "Tooltip component" +category: "Components" +head: + title: "Tooltip" + description: "Provide additional info without cluttering the UI. Display on hover with intelligent positioning." --- -# Tooltip component - Display elegant tooltips with `kit:tooltip`. Fine-tuned customization, accessibility and SEO-friendliness for your Svelte components The `kit:tooltip` component can be used to display a tooltip on hover, focus or via a controlled opening. It's designed to provide a simple, accessible way of delivering contextual information to the user, without cluttering up the interface. diff --git a/src/content/docs/customize.md b/src/content/docs/customize.md index 83470834..8ace3e87 100644 --- a/src/content/docs/customize.md +++ b/src/content/docs/customize.md @@ -1,6 +1,9 @@ --- -title: "Customize" -description: "Customize your Svelte Lapikit components via configuration file: themes, styles, breakpoints. Fluid styling guaranteed." +title: "Customize themes and styles in Lapikit" +category: "Essentials" +head: + title: "Customize" + description: "Customize your Svelte Lapikit components via configuration file: themes, styles, breakpoints. Fluid styling guaranteed." keywords: - "customize" - "theming" @@ -15,8 +18,6 @@ keywords: import SStyleComponent from '$examples/started/s-style-component.svelte'; -# Customize themes and styles in Lapikit - ## Theme customization Lapikit is built on custom CSS properties. Colors, surfaces, spacing, radii, typography, and component states are all based on `--kit-*` variables. diff --git a/src/content/docs/environments.md b/src/content/docs/environments.md index b28e9e78..65842f3e 100644 --- a/src/content/docs/environments.md +++ b/src/content/docs/environments.md @@ -1,6 +1,9 @@ --- -title: "environments" -description: "Configure ESLint and TypeScript for Lapikit's custom syntax. Fix false positives, suppress ts(6133) warnings, and set up your editor for the best DX." +title: "Set up TypeScript and the Editor" +category: "Extra Topics" +head: + title: "environments" + description: "Configure ESLint and TypeScript for Lapikit's custom syntax. Fix false positives, suppress ts(6133) warnings, and set up your editor for the best DX." --- -# Set up TypeScript and the Editor - Lapikit uses a custom `` syntax that is transformed into standard Svelte components at build time via its preprocessor. This page explains how to configure your editor and linting tools to work properly with lapikit. ## Configure ESLint with Lapikit diff --git a/src/content/docs/essentials/class-and-style.md b/src/content/docs/essentials/class-and-style.md index 7067d353..b0c278f2 100644 --- a/src/content/docs/essentials/class-and-style.md +++ b/src/content/docs/essentials/class-and-style.md @@ -1,14 +1,15 @@ --- -title: "Class and Style" -description: "Learn how to use s-class and s-style in Lapikit to dynamically manage classes and inline styles on Svelte components with a syntax close to native Svelte directives." +title: "Class and Style binding" +category: "Essentials" +head: + title: "Class and Style" + description: "Learn how to use s-class and s-style in Lapikit to dynamically manage classes and inline styles on Svelte components with a syntax close to native Svelte directives." --- -# Class and Style binding - Lapikit components expose two dedicated props - `s-class` and `s-style` - for dynamically binding class names and inline styles. They are designed to be as close as possible to Svelte's native `class:` and `style:` directives, within the limits of what Svelte's parser allows on components. > Svelte reserves `class:foo={...}` and `style:property={...}` for native HTML elements. Lapikit uses `s-class` and `s-style` as the equivalent for its own components. diff --git a/src/content/docs/essentials/initialize-application.md b/src/content/docs/essentials/initialize-application.md index 05bbd68b..ad669284 100644 --- a/src/content/docs/essentials/initialize-application.md +++ b/src/content/docs/essentials/initialize-application.md @@ -1,14 +1,15 @@ --- -title: "Initialize Application" -description: "Initialize the Lapikit application context in Svelte and SvelteKit projects with the component, including global styles and shared application structure." +title: "Initialize Lapikit application context" +category: "Essentials" +head: + title: "Initialize Application" + description: "Initialize the Lapikit application context in Svelte and SvelteKit projects with the component, including global styles and shared application structure." --- -# Initialize Lapikit application context - Lapikit provides a global application context that can be accessed by all components across your Svelte or SvelteKit application. To initialize this context, wrap your application in the `` component: import('$examples/essentials/use-app-component.svelte?raw')} /> diff --git a/src/content/docs/essentials/template-syntax.md b/src/content/docs/essentials/template-syntax.md index 2567f2ca..d55c55f3 100644 --- a/src/content/docs/essentials/template-syntax.md +++ b/src/content/docs/essentials/template-syntax.md @@ -1,14 +1,15 @@ --- -title: "Template Syntax" -description: "Learn how the Lapikit preprocessor extends Svelte template syntax component system, automatic imports, and dynamic styling helpers for cleaner Svelte and SvelteKit projects." +title: "Understanding the Lapikit template syntax" +category: "Essentials" +head: + title: "Template Syntax" + description: "Learn how the Lapikit preprocessor extends Svelte template syntax component system, automatic imports, and dynamic styling helpers for cleaner Svelte and SvelteKit projects." --- -# Understanding the Lapikit template syntax - ## Using the Lapikit component syntax Lapikit includes a preprocessor that extends Svelte template syntax with shortcuts designed to make Lapikit components as close as possible to native elements. diff --git a/src/content/docs/getting-started.md b/src/content/docs/getting-started.md index ea770c7c..fe45e5c9 100644 --- a/src/content/docs/getting-started.md +++ b/src/content/docs/getting-started.md @@ -1,14 +1,15 @@ --- -title: "quick start" -description: "Get started with Lapikit: installation, CI/CD or manual configuration. Everything you need to get your Svelte projects up and running fast." +title: "Getting Started with Lapikit library for Svelte Projects" +category: "Getting Started" +head: + title: "quick start" + description: "Get started with Lapikit: installation, CI/CD or manual configuration. Everything you need to get your Svelte projects up and running fast." --- -# Getting Started with Lapikit library for Svelte Projects - ## Install Lapikit in your Svelte project **Prerequisites** diff --git a/src/content/docs/hooks/index.md b/src/content/docs/hooks/index.md index d2d69e7e..9f573883 100644 --- a/src/content/docs/hooks/index.md +++ b/src/content/docs/hooks/index.md @@ -1,14 +1,15 @@ --- -title: "Hooks stores and actions" -descriptions: "Built-in stores and actions with Lapikit: connect components and stores in Svelte with minimal boilerplate, manage state, transitions and logic fluent." +title: "Discover the Lapikit hooks" +category: "Stores and Hooks" +head: + title: "Hooks stores and actions" + descriptions: "Built-in stores and actions with Lapikit: connect components and stores in Svelte with minimal boilerplate, manage state, transitions and logic fluent." --- -# Discover the Lapikit hooks - Lapikit hooks integrate additional features directly onto your Svelte workflow. They manage internal states and background logic, allowing you to focus on developing important features. Instead of juggling event listeners or intricate prop chains, Lapikit hooks keep everything responsive and in sync with minimal effort on your part. ## Actions diff --git a/src/content/docs/hooks/store-breakpoints.md b/src/content/docs/hooks/store-breakpoints.md index 2a7a6a8f..51eded8f 100644 --- a/src/content/docs/hooks/store-breakpoints.md +++ b/src/content/docs/hooks/store-breakpoints.md @@ -1,6 +1,7 @@ --- layout: "legacy" -title: "breakpoints stored" -description: "Learn how to use the breakpoints store in Lapikit for responsive design." +head: + title: "breakpoints stored" + description: "Learn how to use the breakpoints store in Lapikit for responsive design." --- diff --git a/src/content/docs/hooks/store-devices.md b/src/content/docs/hooks/store-devices.md index 291bcdfe..64f839d9 100644 --- a/src/content/docs/hooks/store-devices.md +++ b/src/content/docs/hooks/store-devices.md @@ -1,6 +1,7 @@ --- layout: "legacy" -title: "devices stored" -description: "Learn how to use the devices store in Lapikit for responsive design." +head: + title: "devices stored" + description: "Learn how to use the devices store in Lapikit for responsive design." --- diff --git a/src/content/docs/hooks/store-theme.md b/src/content/docs/hooks/store-theme.md index 35367581..5cfdaffd 100644 --- a/src/content/docs/hooks/store-theme.md +++ b/src/content/docs/hooks/store-theme.md @@ -1,6 +1,7 @@ --- layout: "legacy" -title: "theme stored" -description: "Learn how to use the theme store in Lapikit for responsive design." +head: + title: "theme stored" + description: "Learn how to use the theme store in Lapikit for responsive design." --- diff --git a/src/content/docs/hooks/use-accordion.md b/src/content/docs/hooks/use-accordion.md index b3a84993..167f268b 100644 --- a/src/content/docs/hooks/use-accordion.md +++ b/src/content/docs/hooks/use-accordion.md @@ -1,6 +1,9 @@ --- -title: "useAccordion" -description: "Discover the UseAccordion hook from Lapikit: manage expandable sections in Svelte easily, keep state synchronized, and avoid prop drilling or manual event handling." +title: "Learn how to create an accordion" +category: "Stores and Hooks" +head: + title: "useAccordion" + description: "Discover the UseAccordion hook from Lapikit: manage expandable sections in Svelte easily, keep state synchronized, and avoid prop drilling or manual event handling." --- -# Learn how to create an accordion - `useAccordion` is a state hook from `lapikit/actions` that manages the open/close state of a [`kit:accordion`](/docs/components/accordion). It returns a reactive `values` array and a `toggle` function to wire up to your accordion items. ```js diff --git a/src/content/docs/hooks/use-theme.md b/src/content/docs/hooks/use-theme.md index 74d78c53..44a65c17 100644 --- a/src/content/docs/hooks/use-theme.md +++ b/src/content/docs/hooks/use-theme.md @@ -1,6 +1,9 @@ --- -title: "useTheme action" -description: "Learn how the UseTheme hook from Lapikit simplifies theme management in Svelte: switch dark/light modes, sync global state, and keep components in sync effortlessly." +title: "useTheme: Manage theme state in Svelte" +category: "Stores and Hooks" +head: + title: "useTheme action" + description: "Learn how the UseTheme hook from Lapikit simplifies theme management in Svelte: switch dark/light modes, sync global state, and keep components in sync effortlessly." --- -# useTheme: Manage theme state in Svelte - ## Discover the useTheme action in Lapikit The `useTheme` function allows you to dynamically change your application's theme by modifying the CSS class applied to the root HTML element. This makes it easy to implement dark or light themes, thereby improving the user experience. diff --git a/src/content/docs/introduction.md b/src/content/docs/introduction.md index d82ff07e..f2c80ccc 100644 --- a/src/content/docs/introduction.md +++ b/src/content/docs/introduction.md @@ -1,6 +1,9 @@ --- -title: "introduction" -description: "Learn why Lapikit was created: a component library designed by front-end developers for projects built with Svelte." +title: "More about Lapikit Svelte Library" +category: "Getting Started" +head: + title: "introduction" + description: "Learn why Lapikit was created: a component library designed by front-end developers for projects built with Svelte." keywords: - "why lapikit" - "acknowledgements" @@ -15,8 +18,6 @@ keywords: import IntroductionLapikit from '$examples/started/introduction-lapikit.svelte'; -# More about Lapikit Svelte Library - ## What is Lapikit? Lapikit is a mix of the French word lapin (rabbit), lapis lazuli - a deep blue stone - and the word kit, referring to a development toolkit. diff --git a/src/content/docs/migration-guide.md b/src/content/docs/migration-guide.md index 6d525c40..a51c1eba 100644 --- a/src/content/docs/migration-guide.md +++ b/src/content/docs/migration-guide.md @@ -1,6 +1,9 @@ --- title: "Migration Guide" -description: "Migrate from older Lapikit to recent versions. Find all the steps for updating. If necessary, contact the team Lapikit" +category: "Extra Topics" +head: + title: "Migration Guide" + description: "Migrate from older Lapikit to recent versions. Find all the steps for updating. If necessary, contact the team Lapikit" keywords: - "migration" - "upgrade" @@ -8,8 +11,6 @@ keywords: - "breaking changes" --- -# Migration Guide - Learn how to migrate from older Lapikit versions to the latest release. ## Guide to migrating from version from 0.2.x to 0.5 diff --git a/src/content/docs/roadmap.md b/src/content/docs/roadmap.md index eb590c66..57a9bfcd 100644 --- a/src/content/docs/roadmap.md +++ b/src/content/docs/roadmap.md @@ -1,6 +1,9 @@ --- -title: "roadmap" -description: "Discover the future developments and enhancements planned for Lapikit. Stay informed about upcoming features and improvements to our component library." +title: "Roadmap" +category: "Release" +head: + title: "roadmap" + description: "Discover the future developments and enhancements planned for Lapikit. Stay informed about upcoming features and improvements to our component library." --- Lapikit keeps moving forward. This page gives you a clear view of what’s coming next: new components, design updates, and small things that make your workflow smoother. The goal stays the same: keep Lapikit simple, fast, and built for you developers. diff --git a/src/lib/@types/seo.ts b/src/lib/@types/seo.ts index 0b9d1e90..fc76a986 100644 --- a/src/lib/@types/seo.ts +++ b/src/lib/@types/seo.ts @@ -1,5 +1,7 @@ export type SeoEntry = { - title: string; - description: string; + head: { + title: string; + description: string; + }; type?: 'website' | 'article'; }; diff --git a/src/lib/breadcrumbs.ts b/src/lib/breadcrumbs.ts index 78d7e4fd..cee539cd 100644 --- a/src/lib/breadcrumbs.ts +++ b/src/lib/breadcrumbs.ts @@ -75,7 +75,7 @@ function getDocsBreadcrumbs(pathname: string) { function getPathLabel(pathname: string) { return ( - seoByPath[pathname]?.title ?? + seoByPath[pathname]?.head.title ?? formatSegmentLabel(pathname.split('/').filter(Boolean).at(-1) ?? '') ); } diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 364e306c..c2374e5f 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -17,15 +17,26 @@ export const npm_stats_storage_key = '@lapikit/npm-stats'; */ export const seoByPath: Record = { '/': { - title: 'Lapikit', - description: - 'Lapikit is a fast Svelte component library with reusable components, hooks, theming tools and documentation built for speed and discoverability.', + head: { + title: 'Lapikit', + description: + 'Lapikit is a fast Svelte component library with reusable components, hooks, theming tools and documentation built for speed and discoverability.' + }, type: 'website' }, + '/docs': { + head: { + title: 'Documentation', + description: 'Browse Lapikit documentation, including components, hooks and theming resources.' + }, + type: 'article' + }, '/terms': { - title: 'Legal Notices', - description: - 'Review Lapikit legal notices, hosting information, intellectual property and privacy details.', + head: { + title: 'Legal Notices', + description: + 'Review Lapikit legal notices, hosting information, intellectual property and privacy details.' + }, type: 'article' } }; diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts index f9566447..39abdc87 100644 --- a/src/lib/markdown.ts +++ b/src/lib/markdown.ts @@ -39,12 +39,22 @@ export function createRegistry( } function defaultSeoBuilder(doc: T): SeoEntry { - const description = - typeof doc.metadata.description === 'string' && doc.metadata.description.trim() - ? doc.metadata.description - : `Read ${doc.metadata.title}.`; + const head = getDocHead(doc.metadata); + const title = asOptionalString(head?.title) ?? doc.metadata.title; + const description = asOptionalString(head?.description) ?? `Read ${doc.metadata.title}.`; + + return { head: { title, description }, type: 'article' }; +} - return { title: doc.metadata.title, description, type: 'article' }; +function getDocHead(metadata: ContentSummary['metadata']) { + const head = metadata.head; + return typeof head === 'object' && head !== null && !Array.isArray(head) + ? (head as Record) + : undefined; +} + +function asOptionalString(value: unknown): string | undefined { + return typeof value === 'string' && value.trim() ? value.trim() : undefined; } /** @@ -59,18 +69,14 @@ const docModules = import.meta.glob('/src/content/docs/**/*.md', { export const docsMetadata: DocSummary[] = docsMetadataJson as DocSummary[]; -const { paths, byPath, seoByPath, entries, bySlug } = createRegistry( - docsMetadata, - docModules, - (doc) => ({ - title: doc.metadata.title, - description: - typeof doc.metadata.description === 'string' && doc.metadata.description.trim() - ? doc.metadata.description - : `Read ${doc.metadata.title} in the Lapikit documentation.`, - type: 'article' - }) -); +const { paths, byPath, seoByPath, entries, bySlug } = createRegistry(docsMetadata, docModules, (doc) => { + const head = getDocHead(doc.metadata); + const title = asOptionalString(head?.title) ?? doc.metadata.title; + const description = + asOptionalString(head?.description) ?? `Read ${doc.metadata.title} in the Lapikit documentation.`; + + return { head: { title, description }, type: 'article' }; +}); export const docsPaths = paths; export const docsByPath = byPath; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index f0576f80..0aaa4828 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -31,7 +31,7 @@ const seo = $derived(docsSeoByPath[path] ?? seoByPath[path] ?? seoByPath['/']); const canonicalUrl = $derived(`${page.url.origin}${path === '/' ? '' : path}`); const pageTitle = $derived( - `${capitalize(seo.title)} • ${path === '/' ? 'Svelte Components Library' : 'Lapikit Svelte Components'}` + `${capitalize(seo.head.title)} • ${path === '/' ? 'Svelte Components Library' : 'Lapikit Svelte Components'}` ); const breadcrumbs = $derived(getBreadcrumbs(path)); const breadcrumbSchema = $derived(getBreadcrumbStructuredData(breadcrumbs, page.url.origin)); @@ -43,6 +43,10 @@ // eslint-disable-next-line no-useless-escape return ` @@ -50,7 +54,7 @@ - + - + - + @@ -83,3 +87,13 @@ + + diff --git a/src/routes/docs/+page.md b/src/routes/docs/+page.md index 6720a7af..18ed826e 100644 --- a/src/routes/docs/+page.md +++ b/src/routes/docs/+page.md @@ -1,10 +1,3 @@ ---- -title: Documentation -description: Browse Lapikit documentation, including components, hooks and theming resources. ---- - -# Lapikit documentation - Lapikit documentation is organized as simple HTML pages so search engines and users can discover the project quickly. ## Documentation sections diff --git a/src/routes/md.css b/src/routes/md.css index 49eb7a3e..cecd4c98 100644 --- a/src/routes/md.css +++ b/src/routes/md.css @@ -92,6 +92,26 @@ margin-bottom: 0; } + /* ── Heading ──────────────────────────────────────────────── */ + + .kit-prose header { + margin-bottom: 4rem; + } + + .kit-prose .kit-prose-section { + text-transform: uppercase; + color: var(--md-color-muted); + font-size: 13px; + } + + .kit-prose .kit-prose-title { + margin-top: var(--kit-space-comfortable); + } + + .kit-prose .kit-prose-summary { + margin: 4rem 0; + } + /* ── Title h1 – h6 ─────────────────────────────────────────── */ .kit-prose h1, .kit-prose h2, diff --git a/src/templates/doc.svelte b/src/templates/doc.svelte index 4cfe9a5d..f286c31c 100644 --- a/src/templates/doc.svelte +++ b/src/templates/doc.svelte @@ -1,5 +1,7 @@ + nav.toggle()} aria-label="open navigation"> + {#snippet prepend()} + + + + {/snippet} + + Menu + section.pages.map((page) => page.url)); export function entries() { - return docs.map((doc) => ({ slug: doc.slug })); + return docs.map((doc) => ({ slug: doc.path.slug })); } export function load({ params }) { @@ -16,7 +16,7 @@ export function load({ params }) { throw error(404, 'Documentation page not found'); } - const index = navPaths.indexOf(doc.path); + const index = navPaths.indexOf(doc.path.pathname); const prevPath = index > 0 ? navPaths[index - 1] : null; const nextPath = index !== -1 && index < navPaths.length - 1 ? navPaths[index + 1] : null; @@ -26,8 +26,8 @@ export function load({ params }) { return { doc, prevDoc, nextDoc }; } -function toDocLink(path: string) { - const doc = docsByPath.get(path); +function toDocLink(pathname: string) { + const doc = docsByPath.get(pathname); if (!doc) return null; - return { slug: doc.slug, title: doc.metadata.title, path: doc.path }; + return { slug: doc.path.slug, title: doc.title, path: doc.path.pathname }; } diff --git a/src/routes/routes.json b/src/routes/routes.json new file mode 100644 index 00000000..26eb8907 --- /dev/null +++ b/src/routes/routes.json @@ -0,0 +1,9 @@ +{ + "/": { + "title": "Lapikit", + "head": { + "title": "Lapikit", + "description": "Lapikit is a fast Svelte component library with reusable components, hooks, theming tools and documentation built for speed and discoverability." + } + } +} diff --git a/src/routes/sitemap.xml/+server.ts b/src/routes/sitemap.xml/+server.ts index 0e1aa4ec..f7077e18 100644 --- a/src/routes/sitemap.xml/+server.ts +++ b/src/routes/sitemap.xml/+server.ts @@ -1,34 +1,17 @@ -import { docsPaths } from '$lib'; +import manifest from '../../manifest.json'; import { PUBLIC_BASE_URL } from '$env/static/public'; export const prerender = true; -const pageModules = import.meta.glob('/src/routes/**/+page.svelte'); -const markdownModules = import.meta.glob('/src/routes/**/+page.md'); - -function toUrl(path: string) { - const route = path - .replace('/src/routes', '') - .replace(/\/\+page\.(svelte|md)$/, '') - .replace(/\/$/, ''); - - return route || '/'; -} - export async function GET() { const baseUrl = PUBLIC_BASE_URL.replace(/\/$/, ''); - - const routes = [...Object.keys(pageModules), ...Object.keys(markdownModules)] - .map(toUrl) - .filter((route) => !route.includes('[')) - .filter((route) => !route.includes('(')) - .concat(docsPaths); - - const uniqueRoutes = [...new Set(routes)].sort(); + const routes = [ + ...new Set((manifest as { path: { pathname: string } }[]).map((entry) => entry.path.pathname)) + ].sort(); const body = ` -${uniqueRoutes +${routes .map( (route) => ` ${baseUrl}${route} diff --git a/src/routes/terms/+page.md b/src/routes/terms/+page.md index 9cd28254..b7f7ae47 100644 --- a/src/routes/terms/+page.md +++ b/src/routes/terms/+page.md @@ -1,4 +1,10 @@ -# Legal notices Lapikit +--- +title: 'Legal notices Lapikit' +category: 'Terms' +head: + title: 'Legal Notices' + description: 'Review Lapikit legal notices, hosting information, intellectual property and privacy details.' +--- Updated to 31/03/2026 diff --git a/src/templates/doc.svelte b/src/templates/doc.svelte index f286c31c..1435ecb0 100644 --- a/src/templates/doc.svelte +++ b/src/templates/doc.svelte @@ -49,7 +49,7 @@ } let sidebarEl: HTMLDivElement | undefined = $state(); - const nav = getContext<{ open: boolean; toggle: () => void }>('nav'); + // const nav = getContext<{ open: boolean; toggle: () => void }>('nav'); onMount(() => { if (sidebarEl) sidebarEl.scrollTop = sidebarScrollTop; @@ -62,10 +62,14 @@ let { children, summary = [], + title, + category, data }: { children?: Snippet; summary?: MarkdownHeading[]; + title?: string; + category?: string; data: PageData; } = $props(); @@ -73,48 +77,16 @@ const breadcrumbs = $derived(getBreadcrumbs(normalizedPath)); - - nav.toggle()} aria-label="open navigation"> - {#snippet prepend()} - - - - {/snippet} - - Menu - - - - - - {#snippet activator({ toggle, open }: ModelDropdownProps)} - toggle(e.currentTarget as HTMLElement)}> - On this page - - {#snippet append()} - - {#if open} - - {:else} - - {/if} - - {/snippet} - - {/snippet} - - - -
- {#if data?.doc?.metadata?.category} -
{data?.doc?.metadata?.category}
+ + {#if category} +
{category}
{/if} - {#if data?.doc?.metadata?.title} -

{capitalize(data?.doc?.metadata?.title)}

+ {#if title} +

{capitalize(title)}

{/if}
@@ -172,7 +144,7 @@
From c033c91405fe17bbde855adcb3177cef3bf6f709 Mon Sep 17 00:00:00 2001 From: nycolaide Date: Sat, 18 Jul 2026 20:15:51 +0200 Subject: [PATCH 08/14] refacto all structural seo code + WIP ui documentation --- src/components/breadcrumbs.svelte | 12 ++- src/components/drawer.svelte | 4 +- src/components/table-of-content.svelte | 91 ++++++++++++++------ src/content/docs/breakpoints.md | 1 + src/content/docs/hooks/store-breakpoints.md | 1 + src/content/docs/hooks/store-devices.md | 8 +- src/content/docs/hooks/store-theme.md | 1 + src/lib/@types/index.ts | 8 -- src/lib/@types/seo.ts | 7 -- src/lib/breadcrumbs.ts | 2 +- src/lib/constants.ts | 8 +- src/lib/utils/index.ts | 1 + src/lib/utils/slugify.ts | 3 + src/routes/+layout.svelte | 19 +++-- src/routes/docs/+layout.svelte | 62 +++++++------- src/routes/md.css | 4 +- src/templates/doc.svelte | 93 ++++++++++++++------- src/templates/legacy.svelte | 18 +++- src/templates/section.svelte | 18 +++- 19 files changed, 232 insertions(+), 129 deletions(-) delete mode 100644 src/lib/@types/seo.ts create mode 100644 src/lib/utils/slugify.ts diff --git a/src/components/breadcrumbs.svelte b/src/components/breadcrumbs.svelte index 7f222e4c..4acbdc89 100644 --- a/src/components/breadcrumbs.svelte +++ b/src/components/breadcrumbs.svelte @@ -2,7 +2,7 @@ import { resolve } from '$app/paths'; import type { BreadcrumbItem } from '$lib/@types'; import { capitalize } from '$lib/utils'; - import { ChevronRight } from 'lucide-svelte'; + import { ChevronRight, House } from 'lucide-svelte'; let { items = [] }: { items?: BreadcrumbItem[] } = $props(); @@ -15,10 +15,16 @@ {#if index === items.length - 1} {capitalize(item.label)} {:else if item.href} - {capitalize(item.label)} - + {#if item.label === 'Home'} + + + {:else} + {capitalize(item.label)} + + {/if} {:else} {capitalize(item.label)} + {/if} {/each} diff --git a/src/components/drawer.svelte b/src/components/drawer.svelte index 6546118b..5f13b00f 100644 --- a/src/components/drawer.svelte +++ b/src/components/drawer.svelte @@ -17,7 +17,7 @@ {#if open} diff --git a/src/routes/md.css b/src/routes/md.css index cecd4c98..92013228 100644 --- a/src/routes/md.css +++ b/src/routes/md.css @@ -95,7 +95,7 @@ /* ── Heading ──────────────────────────────────────────────── */ .kit-prose header { - margin-bottom: 4rem; + margin-bottom: 24px; } .kit-prose .kit-prose-section { @@ -109,7 +109,7 @@ } .kit-prose .kit-prose-summary { - margin: 4rem 0; + margin: 24px 0; } /* ── Title h1 – h6 ─────────────────────────────────────────── */ diff --git a/src/templates/doc.svelte b/src/templates/doc.svelte index 1435ecb0..33b41a74 100644 --- a/src/templates/doc.svelte +++ b/src/templates/doc.svelte @@ -23,7 +23,7 @@ import TableOfContent from '../components/table-of-content.svelte'; import Breadcrumbs from '../components/breadcrumbs.svelte'; import { ChevronDown, ChevronLeft, ChevronRight, Menu, TextAlignStart } from 'lucide-svelte'; - import { capitalize } from '$lib/utils'; + import { capitalize, slugify } from '$lib/utils'; import Aside from '$components/aside/aside.svelte'; function enhanceEnumChips(node: HTMLElement) { @@ -75,6 +75,10 @@ const normalizedPath = $derived(page.url.pathname.replace(/\/$/, '')); const breadcrumbs = $derived(getBreadcrumbs(normalizedPath)); + + $effect(() => { + console.log('GW1 data', data); + });
@@ -86,7 +90,9 @@
{category}
{/if} {#if title} -

{capitalize(title)}

+

+ {capitalize(title)} +

{/if} @@ -107,7 +113,7 @@ {/snippet} @@ -116,38 +122,36 @@ {#if data.prevDoc || data.nextDoc}
- - {#if data.prevDoc} - - {#snippet prepend()} - - - - {/snippet} - {capitalize(data.prevDoc.title)} - - {/if} - - {#if data.nextDoc} - - {#snippet append()} - - - - {/snippet} - {capitalize(data.nextDoc.title)} - - {/if} - + {#if data.prevDoc} + + {#snippet prepend()} + + + + {/snippet} + {capitalize(data.prevDoc.title)} + + {/if} + + {#if data.nextDoc} + + {#snippet append()} + + + + {/snippet} + {capitalize(data.nextDoc.title)} + + {/if}
{/if} @@ -159,6 +163,7 @@ grid-template-columns: minmax(0, 1fr); margin: var(--lpk-page-padding-top) var(--lpk-page-padding-side) var(--lpk-page-padding-bottom); gap: 1rem 2rem; + max-width: calc(700px + var(--lpk-page-padding-side) * 2 + 20rem); } article { @@ -177,13 +182,37 @@ } main > aside { - display: initial; - position: sticky; - top: 95px; + display: flex; + height: 100%; + width: 100%; + position: relative; } main :global(.kit-prose-summary) { display: none; } + + main :global(.table-of-content-wrapper) { + display: grid; + grid-template-rows: auto 1fr; + max-height: calc( + 100vh - (75px + var(--lpk-page-padding-top) + var(--lpk-page-padding-bottom)) + ); + position: sticky; + top: calc(75px + var(--lpk-page-padding-top)); + height: fit-content; + width: 100%; + } + + main :global(.table-of-content-wrapper .kit-card-content) { + overflow-y: auto; + } + + @media (min-width: 1460px) { + main { + margin-left: auto; + margin-right: auto; + } + } } diff --git a/src/templates/legacy.svelte b/src/templates/legacy.svelte index c7fa47df..953a9962 100644 --- a/src/templates/legacy.svelte +++ b/src/templates/legacy.svelte @@ -8,6 +8,7 @@ import { onMount } from 'svelte'; import type { Snippet } from 'svelte'; import { docsNavigation, getBreadcrumbs } from '$lib'; + import { capitalize } from '$lib/utils'; // Components import Breadcrumbs from '../components/breadcrumbs.svelte'; @@ -26,9 +27,13 @@ }); let { - children + children, + title, + category }: { children?: Snippet; + title?: string; + category?: string; } = $props(); const normalizedPath = $derived(page.url.pathname.replace(/\/$/, '')); @@ -84,7 +89,16 @@
- +
+ + + {#if category} +
{category}
+ {/if} + {#if title} +

{capitalize(title)}

+ {/if} +
diff --git a/src/templates/section.svelte b/src/templates/section.svelte index 92adaf9a..1b0bb6e8 100644 --- a/src/templates/section.svelte +++ b/src/templates/section.svelte @@ -9,6 +9,7 @@ import { onMount } from 'svelte'; import type { Snippet } from 'svelte'; import { getBreadcrumbs } from '$lib'; + import { capitalize } from '$lib/utils'; // Components import Breadcrumbs from '../components/breadcrumbs.svelte'; @@ -25,9 +26,13 @@ }); let { - children + children, + title, + category }: { children?: Snippet; + title?: string; + category?: string; } = $props(); const nav = getContext<{ open: boolean; toggle: () => void }>('nav'); @@ -54,7 +59,16 @@
- +
+ + + {#if category} +
{category}
+ {/if} + {#if title} +

{capitalize(title)}

+ {/if} +
{@render children?.()} From 56c915ca4f7bb679d7271a98936bd6627b853f00 Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Sun, 19 Jul 2026 22:07:31 +0200 Subject: [PATCH 09/14] refacto searchbar + WIP UI --- bun.lock | 4 +- package.json | 2 +- src/components/app-bar.svelte | 42 +++++++ src/components/drawer.svelte | 49 +++++++- src/components/search-v2.svelte | 167 +++++++++++++++++++++++++++ src/components/theme.svelte | 0 src/content/docs/components/index.md | 9 +- src/lib/constants.ts | 2 + src/routes/+layout.svelte | 16 ++- src/routes/docs/+layout.svelte | 57 +++------ src/templates/doc.svelte | 88 ++++++-------- 11 files changed, 329 insertions(+), 107 deletions(-) create mode 100644 src/components/app-bar.svelte create mode 100644 src/components/search-v2.svelte create mode 100644 src/components/theme.svelte diff --git a/bun.lock b/bun.lock index df5bb271..6e07bc1d 100644 --- a/bun.lock +++ b/bun.lock @@ -27,7 +27,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.ccfc239", + "lapikit": "^0.0.0-insiders.531055c", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", @@ -529,7 +529,7 @@ "known-css-properties": ["known-css-properties@0.37.0", "", {}, "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ=="], - "lapikit": ["lapikit@0.0.0-insiders.ccfc239", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-VPDM+uJ3sKHHuf2Cny+PuEPHTwxuug3lp0nfwlr7VQU2JuYFRYYpEGyiZHNSSTdpqqxa6MoHYltXds6SW1vhnA=="], + "lapikit": ["lapikit@0.0.0-insiders.531055c", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-66y1tRWZNKQt8JRfKZCda2yKk6NMEpb9tIMIqAGkDBqUsdczo7GHDLqiPbv6zfRa6lGWNKW7/GyvPCugIOYvbQ=="], "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="], diff --git a/package.json b/package.json index 0d17fff6..3025aa87 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.ccfc239", + "lapikit": "^0.0.0-insiders.531055c", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", diff --git a/src/components/app-bar.svelte b/src/components/app-bar.svelte new file mode 100644 index 00000000..cc8386c0 --- /dev/null +++ b/src/components/app-bar.svelte @@ -0,0 +1,42 @@ + + + + search.toggle()}> + {#snippet prepend()} + + + + {/snippet} + Search + + {#snippet append()} + CTRL + K + {/snippet} + + + + + {@html githubIcon} + + + + + + {@html githubIcon} + + + + + + {@html githubIcon} + + + diff --git a/src/components/drawer.svelte b/src/components/drawer.svelte index 5f13b00f..e7f430d2 100644 --- a/src/components/drawer.svelte +++ b/src/components/drawer.svelte @@ -1,17 +1,18 @@ @@ -28,7 +29,7 @@
- {@render children?.()} + + + + Demo +
diff --git a/src/components/theme.svelte b/src/components/theme.svelte new file mode 100644 index 00000000..e69de29b diff --git a/src/content/docs/components/index.md b/src/content/docs/components/index.md index 7c8dbe39..f0ae8d4c 100644 --- a/src/content/docs/components/index.md +++ b/src/content/docs/components/index.md @@ -1,10 +1,9 @@ --- -title: "Discover the Lapikit components" -category: "Components" +title: 'Discover the Lapikit components' +category: 'Components' head: - title: "Components" - description: "Find out more about Lapikit Svelte components." -layout: "section" + title: 'Components' + description: 'Find out more about Lapikit Svelte components.' --- @@ -95,6 +108,7 @@ + diff --git a/src/components/drawer-release.svelte b/src/components/drawer-release.svelte new file mode 100644 index 00000000..05978a66 --- /dev/null +++ b/src/components/drawer-release.svelte @@ -0,0 +1,82 @@ + + + + + Release + + {npmState.downloads || 0} + + {@html githubIcon} + + + + {#each releases as release (release.key)} + + {#snippet prepend()} + + {#snippet prepend()} + + + + {/snippet} + {release.label} + + {/snippet} + +
+ {release.version} + published {formatPublishDate(release.publish)} +
+ + {/each} + + + + diff --git a/src/components/drawer.svelte b/src/components/drawer.svelte index e7f430d2..c3fbe6e6 100644 --- a/src/components/drawer.svelte +++ b/src/components/drawer.svelte @@ -1,6 +1,10 @@ + + + + Lapikit + + + diff --git a/src/components/search-v2-action.svelte b/src/components/search-v2-action.svelte new file mode 100644 index 00000000..4ff4bda5 --- /dev/null +++ b/src/components/search-v2-action.svelte @@ -0,0 +1,19 @@ + + + search.toggle()}> + {#snippet prepend()} + + + + {/snippet} + Search + + {#snippet append()} + CTRL + K + {/snippet} + diff --git a/src/components/search-v2.svelte b/src/components/search-v2.svelte index e3e03bf6..f931ccae 100644 --- a/src/components/search-v2.svelte +++ b/src/components/search-v2.svelte @@ -22,12 +22,21 @@ // states let query: string = $state(''); let selectedIndex: number = $state(0); + let fieldRef: HTMLElement | null = $state(null); $effect(() => { results; // dépendance selectedIndex = 0; }); + $effect(() => { + if (open) { + requestAnimationFrame(() => { + fieldRef?.querySelector('input')?.focus(); + }); + } + }); + const normalize = (str: string) => str .toLowerCase() @@ -35,7 +44,7 @@ .replace(/[\u0300-\u036f]/g, ''); const searchablePages = manifestPage.filter( - (page) => page.path.pathname !== '/' && page.layout !== 'legacy' + (page) => page.path.pathname !== '/' && page.state !== 'deprecated' ); const results = $derived.by(() => { @@ -52,6 +61,12 @@ }); function handleKeydown(event: KeyboardEvent) { + if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') { + event.preventDefault(); + open = !open; + return; + } + if (!open || results.length === 0) return; switch (event.key) { @@ -95,7 +110,13 @@
- + ESC
diff --git a/src/components/settings.svelte b/src/components/settings.svelte new file mode 100644 index 00000000..bd929f06 --- /dev/null +++ b/src/components/settings.svelte @@ -0,0 +1,37 @@ + + + + {#snippet activator({ toggle }: ModelPopoverProps)} + toggle(e.currentTarget as HTMLElement)}> + + + + + {/snippet} + + + + {#each listTheme as option} + {@const Icon = option?.icon} + useTheme(option.key)}> + + + + + {/each} + + + diff --git a/src/components/theme.svelte b/src/components/theme.svelte deleted file mode 100644 index e69de29b..00000000 diff --git a/src/content/docs/breakpoints.md b/src/content/docs/breakpoints.md index 89738a49..7d8d8e47 100644 --- a/src/content/docs/breakpoints.md +++ b/src/content/docs/breakpoints.md @@ -1,8 +1,7 @@ --- -title: "Breakpoints" -layout: "legacy" +title: 'Breakpoints' +state: 'deprecated' head: - title: "breakpoints" - description: "Manage the reactivity of your Lapikit components with customizable breakpoints. Easily adapt to all devices." + title: 'breakpoints' + description: 'Manage the reactivity of your Lapikit components with customizable breakpoints. Easily adapt to all devices.' --- - diff --git a/src/content/docs/components/index.md b/src/content/docs/components/index.md index f0ae8d4c..49ab57f9 100644 --- a/src/content/docs/components/index.md +++ b/src/content/docs/components/index.md @@ -4,6 +4,7 @@ category: 'Components' head: title: 'Components' description: 'Find out more about Lapikit Svelte components.' +layout: 'section' ---
-
+
- {#if category} -
{category}
- {/if} - {#if title} -

- {capitalize(title)} -

+ {#if data?.doc?.state === 'deprecated'} + + This feature is deprecated and is no longer supported. Check out the new features and + improvements in the documentation. + + {:else} + {#if category} +
{category}
+ {/if} + {#if title} +

+ {capitalize(title)} +

+ {/if} {/if}
@@ -102,10 +109,15 @@ {@render children?.()} - {#if data.prevDoc || data.nextDoc} -
+ {#if data?.doc?.state !== 'deprecated' && (data.prevDoc || data.nextDoc)} + +
{#if data.prevDoc} - + {#snippet prepend()} @@ -114,9 +126,13 @@ {capitalize(data.prevDoc.title)} {/if} - {#if data.nextDoc} - + {#snippet append()} @@ -148,6 +164,9 @@ margin: var(--lpk-page-padding-top) var(--lpk-page-padding-side) var(--lpk-page-padding-bottom); gap: 1rem 2rem; max-width: calc(700px + var(--lpk-page-padding-side) * 2 + 20rem); + min-height: calc( + 100dvh - 64px - var(--lpk-page-padding-top) - var(--lpk-page-padding-bottom) - 88px + ); } article { @@ -183,7 +202,7 @@ 100vh - (75px + var(--lpk-page-padding-top) + var(--lpk-page-padding-bottom)) ); position: sticky; - top: calc(75px + var(--lpk-page-padding-top)); + top: var(--lpk-page-padding-top); height: fit-content; width: 100%; } diff --git a/src/templates/section.svelte b/src/templates/section.svelte index 1b0bb6e8..e0d2389c 100644 --- a/src/templates/section.svelte +++ b/src/templates/section.svelte @@ -1,29 +1,11 @@ - - -
-
- - nav.toggle()} aria-label="open navigation"> - {#snippet prepend()} - - - - {/snippet} +
+
+
+ + + {#if category} +
{category}
+ {/if} + {#if title} +

+ {capitalize(title)} +

+ {/if} +
- Menu - + {@render children?.()} +
+
- - + From 6cc748bfb4f37ce1127198f63761b982fc975863 Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Tue, 21 Jul 2026 21:57:28 +0200 Subject: [PATCH 11/14] Bugfix breadcrumbs and table of content + update templates and new ui for page --- mdsvex.config.js | 5 +- src/components/app-bar-global.svelte | 14 ++ src/components/app-bar.svelte | 25 +-- src/components/breadcrumbs.svelte | 5 +- src/components/drawer-release.svelte | 5 +- src/components/install-modal.svelte | 148 +++++++++++++ src/components/list-components.svelte | 85 +++---- src/components/search-v2-action.svelte | 2 +- src/components/table-of-content.svelte | 14 +- src/content/docs/breakpoints.md | 1 + src/content/docs/changelog.md | 9 +- src/content/docs/components/accordion.md | 9 +- src/content/docs/components/alert.md | 9 +- src/content/docs/components/appbar.md | 9 +- src/content/docs/components/application.md | 9 +- src/content/docs/components/aspect-ratio.md | 9 +- src/content/docs/components/avatar.md | 9 +- src/content/docs/components/button.md | 7 +- src/content/docs/components/card.md | 9 +- src/content/docs/components/chip.md | 9 +- src/content/docs/components/dialog.md | 9 +- src/content/docs/components/dropdown.md | 9 +- src/content/docs/components/icon.md | 9 +- src/content/docs/components/index.md | 2 +- src/content/docs/components/list.md | 9 +- src/content/docs/components/modal.md | 9 +- src/content/docs/components/popover.md | 9 +- src/content/docs/components/separator.md | 9 +- src/content/docs/components/textfield.md | 9 +- src/content/docs/components/toolbar.md | 9 +- src/content/docs/components/tooltip.md | 1 + src/content/docs/customize.md | 17 +- src/content/docs/environments.md | 7 +- .../docs/essentials/class-and-style.md | 9 +- .../docs/essentials/initialize-application.md | 9 +- .../docs/essentials/template-syntax.md | 9 +- src/content/docs/getting-started.md | 9 +- src/content/docs/hooks/index.md | 9 +- src/content/docs/hooks/store-breakpoints.md | 1 + src/content/docs/hooks/store-devices.md | 1 + src/content/docs/hooks/store-theme.md | 1 + src/content/docs/hooks/use-accordion.md | 9 +- src/content/docs/hooks/use-theme.md | 9 +- src/content/docs/introduction.md | 17 +- src/content/docs/migration-guide.md | 17 +- src/content/docs/roadmap.md | 9 +- src/lib/assets/images/components/default.webp | Bin 0 -> 814 bytes src/routes/(app)/+layout.svelte | 9 + src/routes/{ => (app)}/terms/+page.md | 0 src/routes/docs/+layout.svelte | 117 +--------- src/templates/{doc.svelte => doc-page.svelte} | 4 +- .../{section.svelte => doc-section.svelte} | 49 ++++- src/templates/legacy.svelte | 113 ---------- src/templates/page.svelte | 207 ++++++++++-------- 54 files changed, 572 insertions(+), 536 deletions(-) create mode 100644 src/components/app-bar-global.svelte create mode 100644 src/components/install-modal.svelte create mode 100644 src/lib/assets/images/components/default.webp create mode 100644 src/routes/(app)/+layout.svelte rename src/routes/{ => (app)}/terms/+page.md (100%) rename src/templates/{doc.svelte => doc-page.svelte} (98%) rename src/templates/{section.svelte => doc-section.svelte} (56%) delete mode 100644 src/templates/legacy.svelte diff --git a/mdsvex.config.js b/mdsvex.config.js index 120d4c39..09810d7a 100644 --- a/mdsvex.config.js +++ b/mdsvex.config.js @@ -33,8 +33,7 @@ export const mdsvexOptions = { highlight: { highlighter }, layout: { _: dirname(fileURLToPath(import.meta.url)) + '/src/templates/page.svelte', - docs: dirname(fileURLToPath(import.meta.url)) + '/src/templates/doc.svelte', - section: dirname(fileURLToPath(import.meta.url)) + '/src/templates/section.svelte', - legacy: dirname(fileURLToPath(import.meta.url)) + '/src/templates/legacy.svelte' + doc_page: dirname(fileURLToPath(import.meta.url)) + '/src/templates/doc-page.svelte', + doc_section: dirname(fileURLToPath(import.meta.url)) + '/src/templates/doc-section.svelte' } }; diff --git a/src/components/app-bar-global.svelte b/src/components/app-bar-global.svelte new file mode 100644 index 00000000..24f30086 --- /dev/null +++ b/src/components/app-bar-global.svelte @@ -0,0 +1,14 @@ + + + + + + + diff --git a/src/components/app-bar.svelte b/src/components/app-bar.svelte index 44fee267..67734770 100644 --- a/src/components/app-bar.svelte +++ b/src/components/app-bar.svelte @@ -9,9 +9,10 @@ import { CloudDownload, Menu } from 'lucide-svelte'; import SearchV2Action from './search-v2-action.svelte'; import Logo from './logo.svelte'; + import LazyRepl from './lazy-repl.svelte'; + import InstallModal from './install-modal.svelte'; let openModal: boolean = $state(false); - let displayMode: 'cli' | 'manual' = $state('cli'); const nav = getContext<{ open: boolean; toggle: () => void }>('nav'); @@ -61,22 +62,7 @@
- - - Install Lapikit on your project - - {#if displayMode === 'cli'} - CLI install - {:else if displayMode === 'manual'} - Manual install - {/if} - - - - (openModal = false)}>Close - - - + diff --git a/src/components/breadcrumbs.svelte b/src/components/breadcrumbs.svelte index 4acbdc89..e15f07f5 100644 --- a/src/components/breadcrumbs.svelte +++ b/src/components/breadcrumbs.svelte @@ -16,7 +16,10 @@ {capitalize(item.label)} {:else if item.href} {#if item.label === 'Home'} - + + + + {:else} {capitalize(item.label)} diff --git a/src/components/drawer-release.svelte b/src/components/drawer-release.svelte index 05978a66..1124bbe1 100644 --- a/src/components/drawer-release.svelte +++ b/src/components/drawer-release.svelte @@ -1,7 +1,6 @@ + + + + Install Lapikit + + + Lapikit can be installed in your Svelte and SvelteKit projects via your package manager, and + then configured either automatically via the CLI or manually. + + + + (displayMode = 'cli')} + color={displayMode === 'cli' && 'accent'} + > + CLI + + (displayMode = 'manual')} + color={displayMode === 'manual' && 'accent'} + > + Manual + + + + + {#if displayMode === 'cli'} + +

1. Install Lapikit in your project:

+ + +

+ 2. Run the CLI to automatically configure the preprocessor: +

+ + + +

+ If you're using SvelteKit, the CLI detects your configuration and applies it + automatically. For other setups (or if you'd rather retain control), use the instead. +

+ + {:else if displayMode === 'manual'} + + + + + + + import('$examples/started/svelte-config-js.js?raw')} + /> + + + + + + Visit the TypeScript and Linter page to properly configure your environment based on your setup. + + + + + + + + {/if} + + + + + More details + + + (open = false)} background="accent" color="fg-inverse">Close + + + + + diff --git a/src/components/list-components.svelte b/src/components/list-components.svelte index a3739762..c133f93b 100644 --- a/src/components/list-components.svelte +++ b/src/components/list-components.svelte @@ -4,78 +4,51 @@ const components = docsNavigation.find((section) => section.label === 'Components')?.pages ?? []; -
+
{#each components as { label, url, description, image } (label)} - {#if description} - - {#if image} -
- - {label} - -
- {:else} -
- -
{label[0]}
- -
- {/if} -
-

{label}

+ {#if label !== 'All components'} + + + + {label} + + + + + {label} {#if description} -

{description}

+ + {description} + {/if} -
+ {/if} {/each}
diff --git a/src/components/search-v2-action.svelte b/src/components/search-v2-action.svelte index 4ff4bda5..cf6778d6 100644 --- a/src/components/search-v2-action.svelte +++ b/src/components/search-v2-action.svelte @@ -14,6 +14,6 @@ Search {#snippet append()} - CTRL + K + CTRL + K {/snippet} diff --git a/src/components/table-of-content.svelte b/src/components/table-of-content.svelte index 8a7aef48..a4cb48bc 100644 --- a/src/components/table-of-content.svelte +++ b/src/components/table-of-content.svelte @@ -4,7 +4,11 @@ import { capitalize, slugify } from '$lib/utils'; import { page } from '$app/state'; - let { title, summary = [] }: { title?: string; summary?: MarkdownHeading[] } = $props(); + let { + title, + summary = [], + inner = false + }: { title?: string; summary?: MarkdownHeading[]; inner?: boolean } = $props(); const isChangelog = $derived(page.url.pathname.includes('changelog')); const summaryItems = $derived( @@ -49,12 +53,16 @@ }); }; + const scrollTarget: EventTarget = inner + ? (document.querySelector('.layout') ?? window) + : window; + updateActiveSlug(); - window.addEventListener('scroll', onScroll, { passive: true }); + scrollTarget.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { - window.removeEventListener('scroll', onScroll); + scrollTarget.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }); diff --git a/src/content/docs/breakpoints.md b/src/content/docs/breakpoints.md index 7d8d8e47..1035028c 100644 --- a/src/content/docs/breakpoints.md +++ b/src/content/docs/breakpoints.md @@ -4,4 +4,5 @@ state: 'deprecated' head: title: 'breakpoints' description: 'Manage the reactivity of your Lapikit components with customizable breakpoints. Easily adapt to all devices.' +layout: 'doc_page' --- diff --git a/src/content/docs/changelog.md b/src/content/docs/changelog.md index b80ac8fb..46143890 100644 --- a/src/content/docs/changelog.md +++ b/src/content/docs/changelog.md @@ -1,9 +1,10 @@ --- -title: "Changelog" -category: "Release" +title: 'Changelog' +category: 'Release' head: - title: "changelog" - description: "Follow the latest Lapikit developments, updates and fixes. Transparency and continuous improvement for your components." + title: 'changelog' + description: 'Follow the latest Lapikit developments, updates and fixes. Transparency and continuous improvement for your components.' +layout: 'doc_page' ---

Changelog Content

diff --git a/src/content/docs/components/accordion.md b/src/content/docs/components/accordion.md index cd986545..37f4f3e9 100644 --- a/src/content/docs/components/accordion.md +++ b/src/content/docs/components/accordion.md @@ -1,9 +1,10 @@ --- -title: "Accordion component" -category: "Components" +title: 'Accordion component' +category: 'Components' head: - title: "Accordion" - description: "Display expandable content in a seamless interface. The Lapikit accordion component is lightweight, accessible, and customizable." + title: 'Accordion' + description: 'Display expandable content in a seamless interface. The Lapikit accordion component is lightweight, accessible, and customizable.' +layout: 'doc_page' --- + + + +{@render children()} diff --git a/src/routes/terms/+page.md b/src/routes/(app)/terms/+page.md similarity index 100% rename from src/routes/terms/+page.md rename to src/routes/(app)/terms/+page.md diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte index 8cf91afe..e8740c51 100644 --- a/src/routes/docs/+layout.svelte +++ b/src/routes/docs/+layout.svelte @@ -1,34 +1,23 @@ - - -
+
diff --git a/src/templates/doc.svelte b/src/templates/doc-page.svelte similarity index 98% rename from src/templates/doc.svelte rename to src/templates/doc-page.svelte index 0ef1a986..cd1827a3 100644 --- a/src/templates/doc.svelte +++ b/src/templates/doc-page.svelte @@ -101,7 +101,7 @@ {/snippet} @@ -150,7 +150,7 @@ On this page - + diff --git a/src/templates/section.svelte b/src/templates/doc-section.svelte similarity index 56% rename from src/templates/section.svelte rename to src/templates/doc-section.svelte index e0d2389c..569c733c 100644 --- a/src/templates/section.svelte +++ b/src/templates/doc-section.svelte @@ -1,26 +1,32 @@
@@ -39,6 +45,41 @@ {@render children?.()} + + {#if data?.doc?.state !== 'deprecated' && (data.prevDoc || data.nextDoc)} + +
+ {#if data.prevDoc} + + {#snippet prepend()} + + + + {/snippet} + {capitalize(data.prevDoc.title)} + + {/if} + {#if data.nextDoc} + + {#snippet append()} + + + + {/snippet} + {capitalize(data.nextDoc.title)} + + {/if} +
+ {/if}
diff --git a/src/templates/legacy.svelte b/src/templates/legacy.svelte deleted file mode 100644 index 953a9962..00000000 --- a/src/templates/legacy.svelte +++ /dev/null @@ -1,113 +0,0 @@ - - - - -
- - - - -
- - (navOpen = true)} aria-label="open navigation"> - {#snippet prepend()} - - - - {/snippet} - - Menu - - - - - -
-
- - - {#if category} -
{category}
- {/if} - {#if title} -

{capitalize(title)}

- {/if} -
- -
- - This feature is deprecated and is no longer supported. Check out the new features and - improvements in the documentation. - - - {@render children?.()} -
-
-
-
diff --git a/src/templates/page.svelte b/src/templates/page.svelte index 749d5595..5776ab01 100644 --- a/src/templates/page.svelte +++ b/src/templates/page.svelte @@ -1,119 +1,146 @@ - - - - Lapikit - - - - -
- - Documentation - - {@html githubIcon} - -
- - -
-
- - - - - {#snippet activator({ toggle, open }: ModelDropdownProps)} - toggle(e.currentTarget as HTMLElement)}> - On this page - - {#snippet append()} - - {#if open} - - {:else} - - {/if} - - {/snippet} - - {/snippet} - - - - -
+
+
+
-
- {@render children?.()} -
-
- - -
- - -
+ {#if category} +
{category}
+ {/if} + {#if title} +

+ {capitalize(title)} +

+ {/if} + + + {#if summary.length > 0} + + + {#snippet activator()} + + + + + On this page + {/snippet} + + + + + {/if} + + {@render children?.()} +
+ + {#if summary.length > 0} + + {/if} +
From b137c070d484c36e078424c605043f0cb778b6aa Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Tue, 21 Jul 2026 22:29:04 +0200 Subject: [PATCH 12/14] update lapikit insiders --- bun.lock | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/bun.lock b/bun.lock index de4d3922..25d7c8a6 100644 --- a/bun.lock +++ b/bun.lock @@ -27,7 +27,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.5657b37", + "lapikit": "^0.0.0-insiders.aacf580", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", @@ -529,7 +529,7 @@ "known-css-properties": ["known-css-properties@0.37.0", "", {}, "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ=="], - "lapikit": ["lapikit@0.0.0-insiders.5657b37", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-/ZHpDKP1IpzefLNmLjQhHxYKy7BwHw3oNlRYn1TNSLZfby4kABfWrZdKEw5GknF+xIM/CdsOPSTb8mEe1kAxQA=="], + "lapikit": ["lapikit@0.0.0-insiders.aacf580", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-UhqfWnyGiV0MYOzlepcxetL3ZflJWwA4+4FOCNty+0zfr6HimQwNMBZLDEs5paFLKYOLc0v+DcZPJKYehGq6fg=="], "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="], diff --git a/package.json b/package.json index be470f7d..aa5fdbfa 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.5657b37", + "lapikit": "^0.0.0-insiders.aacf580", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", From aca0d0aec376b98ff544019132f26d3d6446f829 Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Wed, 22 Jul 2026 20:42:13 +0200 Subject: [PATCH 13/14] fix position drawer and fix scroll on install modal --- src/components/drawer-release.svelte | 2 +- src/components/drawer.svelte | 7 ++++--- src/components/install-modal.svelte | 22 ++++++++++++++++++++-- src/routes/docs/+layout.svelte | 3 +++ 4 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/components/drawer-release.svelte b/src/components/drawer-release.svelte index 1124bbe1..0093d6bf 100644 --- a/src/components/drawer-release.svelte +++ b/src/components/drawer-release.svelte @@ -28,7 +28,7 @@ -