From e63b627bed3977e87e30e2e1f8c52fae08967822 Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Sat, 30 May 2026 23:02:27 +0200 Subject: [PATCH 1/4] remove all legacy config lapikit + replace components with lapikit component --- README.md | 20 +- src/lib/@legacy/background-star.svelte | 4 +- src/lib/@legacy/earth-moon-lapikit.svelte | 4 +- src/plugins/lapikit.ts | 18 - src/routes/+page.svelte | 693 ++++++++++------------ vite.config.ts | 4 - 6 files changed, 331 insertions(+), 412 deletions(-) delete mode 100644 src/plugins/lapikit.ts diff --git a/README.md b/README.md index 344005ed..bcb6e84d 100644 --- a/README.md +++ b/README.md @@ -35,14 +35,24 @@ pnpm add -D lapikit bun add -D lapikit ``` +Connect lapikit on your svelte configuration: + +```js +// svelte.config.js +import { lapikitPreprocess } from 'lapikit/labs/preprocess'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + preprocess: [lapikitPreprocess()] +}; + +export default config; +``` + Use your first component: ```svelte - - - +Click me ``` ### Documentation diff --git a/src/lib/@legacy/background-star.svelte b/src/lib/@legacy/background-star.svelte index 563a6d90..dd5abb20 100644 --- a/src/lib/@legacy/background-star.svelte +++ b/src/lib/@legacy/background-star.svelte @@ -45,10 +45,10 @@ .dot { position: absolute; - background: color-mix(in oklab, var(--kit-accent-primary) 80%, transparent); + background: color-mix(in oklab, var(--primary-legacy) 80%, transparent); border-radius: 50%; opacity: 0; - box-shadow: 0 0 6px color-mix(in oklab, var(--kit-accent-primary) 80%, transparent); + box-shadow: 0 0 6px color-mix(in oklab, var(--primary-legacy) 80%, transparent); animation-name: blink; animation-timing-function: ease-in-out; animation-iteration-count: infinite; diff --git a/src/lib/@legacy/earth-moon-lapikit.svelte b/src/lib/@legacy/earth-moon-lapikit.svelte index 9131bd66..4eb34856 100644 --- a/src/lib/@legacy/earth-moon-lapikit.svelte +++ b/src/lib/@legacy/earth-moon-lapikit.svelte @@ -64,12 +64,12 @@ } .planet-svg path { - fill: var(--kit-background-primary); + fill: var(--bg-primary-legacy); } .planet-padding { position: relative; - background-color: var(--kit-background-primary); + background-color: var(--bg-primary-legacy); width: 100%; height: 100px; } diff --git a/src/plugins/lapikit.ts b/src/plugins/lapikit.ts deleted file mode 100644 index f4ac7c18..00000000 --- a/src/plugins/lapikit.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Lapikit - * Library documentation: https://lapikit.dev - */ - -// Styles -import 'lapikit/styles'; -import 'lapikit/themes'; - -// Composables -import createLapikit from 'lapikit'; - -// https://lapikit.dev/docs/getting-started -export default createLapikit({ - theme: { - defaultTheme: 'light' - } -}); diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index cd2cdb1d..ec597ce0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,7 +3,7 @@ import BackgroundStar from '$lib/@legacy/background-star.svelte'; import LapinosaureExpertLapikit from '$lib/@legacy/images/lapinosaure-expert-lapikit.webp?enhanced'; import StarMedium from '$lib/@legacy/images/star-medium.webp?enhanced'; - import { Appbar, Button, Card, Chip, Icon, Separator, Toolbar } from 'lapikit/components'; + import { ArrowRight, Box, @@ -13,6 +13,7 @@ Copy, GraduationCap, Images, + MessageSquareText, Package, PencilRuler, Quote, @@ -31,7 +32,7 @@ import LapikitLikeYou from '$lib/@legacy/images/lapinosaure-like-you.webp?enhanced'; import LapinosaureFace from '$lib/@legacy/images/lapinosaure-face.webp?enhanced'; - import '../plugins/lapikit.ts'; + // import '../plugins/lapikit.ts'; import LazyRepl from '../components/lazy-repl.svelte'; import TypeScriptIcon from '$lib/assets/icons/typescript.svg?raw'; import SvelteIcon from '$lib/assets/icons/svelte.svg?raw'; @@ -209,20 +210,16 @@
-
- +

Lapikit

 @@ -234,67 +231,84 @@
- + - +
- +
-
+
-
+
- + {#snippet prepend()} - New 🎉 + + New 🎉 + {/snippet} + Lapikit v0.5 is up! {#snippet append()} - + + + {/snippet} - +

- Simple, optimized components for + Simple, optimized components for Svelte

@@ -308,32 +322,32 @@
- - +
- +
@@ -356,7 +370,7 @@ class="relative z-1" >

Build faster, write cleaner code

@@ -378,60 +392,45 @@

With Lapikit, you write less but build more:

  • - Your code will be cleaner, with simpler and more legible - syntax + + + + Your code will be cleaner, with simpler and more legible syntax
  • - Faster, thanks to reuse components and uniform styling + + + Faster, thanks to reuse components and uniform styling
  • - More consistently, with pre-optimized Svelte + TypeScript - integration + + + More consistently, with pre-optimized Svelte + TypeScript integration
  • - Stop copying and duplicating CSS classes and start shipping - better user interfaces + + + Stop copying and duplicating CSS classes and start shipping better user interfaces

Instead of struggling with redundancy, you focus on the experience you want to offer

- - - - - + +
{#if stepCode === 0} @@ -511,10 +510,10 @@

One library for your entire Svelte project @@ -524,7 +523,7 @@ class="mt-8 grid grid-cols-1 grid-rows-[1fr_100px_max-content] gap-4 lg:grid-cols-[55%_100px_1fr] lg:grid-rows-1" >
-
+
{#if stepTimeline === 0} {#each stepperToUseComponent as step, index (step)} {@const StepIcon = step.icon} - + + + + {/each}
@@ -570,18 +572,22 @@ {#each stepperToUseComponent as step, index (step)} {@const StepIcon = step.icon}
  • - + + + + +
    • - +

    @@ -643,7 +645,7 @@ use:scrollAnimation={{ animation: 'fade-up', delay: 100 }} >
    @@ -660,13 +662,17 @@ {#each enableFeatures as { title, description, icon } (title)}
  • -
    +
    {#if typeof icon === 'string'} - {@html icon} + + {@html icon} + {:else} {@const FeatureIcon = icon} - + + + {/if}
    @@ -680,20 +686,15 @@
    - +
    @@ -705,19 +706,23 @@ use:scrollAnimation={{ animation: 'fade-up', delay: 100 }} >
    - + + +
    -

    +

    Lapikit is designed to simplify and streamline the work of front-end developers by limiting code redundancy, leaving more time for the development of advanced and complex features.

    - + + +
    @@ -738,20 +743,20 @@
    -
    -
    + {@html npmIcon} -
    +
    {npmState.downloads || '---'}Monthly downloads

    -     + -
    -
    + {@html githubIcon} -
    +
    2

    GitHub Stars

    -     +
    - +

    Open Source and built by developers, for developers @@ -795,39 +803,41 @@ Every contribution helps improve the developer experience for the entire Svelte community.

    - +
    -     +
    -
    -
    + {@html instagramIcon} -
    +
    @@ -836,24 +846,25 @@

    Followers

    - + -
    -
    + {@html discordIcon} -
    + +
    2

    Members

    -     +
    @@ -861,7 +872,7 @@

    Go further with Lapikit

    @@ -870,20 +881,23 @@

    - +
    Documentations

    Learn how to install and use Lapikit in your project

    - + + +
    -     - +
    @@ -894,21 +908,29 @@

    - + + +
    -     - + +
    Sponsor

    Become a sponsor to help Lapikit create a strong community

    - + + +
    -     +
    @@ -937,59 +959,57 @@ All donations and sponsorships will be utilized solely to support the development and maintenance of Lapikit

    - - - - + + - + Explore Lapikit roadmap 2026 +
    • -
    +

    Start exploring Lapikit

    Design system, themes, components, all in one lib

    - +
    - +
    - +
    - +
    -
    +
    @@ -1051,39 +1066,48 @@ Lapikit
    -
    - + - {@html npmIcon} - + + {@html npmIcon} + + - - {@html githubIcon} - + + {@html githubIcon} + + - - {@html discordIcon} - + + {@html discordIcon} + +
    @@ -1095,34 +1119,41 @@ {#each sectionValue.items as { key, title, slug, custom, external } (key)} {#if !custom}
  • - +
    • {:else if custom === 'cookie-consent'}
  • - +
    • {/if} {/each} {:else} {#each Object.entries(sectionValue.items as Record) as [key, { title, slug, external }] (key)}
  • - +
    • {/each} {/if} @@ -1130,34 +1161,38 @@ {/each}
    -

    Join our community on Discord

    News, updates, and discussions await you!

    - +
    -     +
    -

    Copyright © {year === 2025 ? year : `2025 - ${year}`} Lapikit - @@ -1171,126 +1206,20 @@

    Developed by - + Nycolaide
    -     +
    diff --git a/vite.config.ts b/vite.config.ts index 8461553d..b94a7c10 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,15 +4,11 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { enhancedImages } from '@sveltejs/enhanced-img'; import { defineConfig } from 'vite'; -// legacy -import { lapikit } from 'lapikit/vite'; - export default defineConfig(({ command }) => ({ plugins: [ tailwindcss(), enhancedImages(), sveltekit(), - lapikit({ config: 'src/plugins/lapikit.ts' }), //legacy ...(command === 'serve' ? [devtoolsJson()] : []) ] })); From 13d473fd9301ef348210c286f0cba4193507984f Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Sat, 30 May 2026 23:14:30 +0200 Subject: [PATCH 2/4] fix alignement --- src/routes/+page.svelte | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ec597ce0..2f9b508e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -421,13 +421,28 @@ classContent="md:justify-start justify-center gap-3" variant="text" > - (stepCode = 0)} active={stepCode === 0} rounded="xl"> + (stepCode = 0)} + active={stepCode === 0} + rounded="xl" + size="sm" + > View Button - (stepCode = 1)} active={stepCode === 1} rounded="xl"> + (stepCode = 1)} + active={stepCode === 1} + rounded="xl" + size="sm" + > Discover Card - (stepCode = 2)} active={stepCode === 2} rounded="xl"> + (stepCode = 2)} + active={stepCode === 2} + rounded="xl" + size="sm" + > Explore Modal From f78ed476c358c9f979d8b2271749a9faaaca6b9c Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Sat, 30 May 2026 23:15:51 +0200 Subject: [PATCH 3/4] add density --- src/routes/+page.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 2f9b508e..f84eb081 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -420,6 +420,7 @@ class="mt-4" classContent="md:justify-start justify-center gap-3" variant="text" + density="compact" > (stepCode = 0)} From 7ce54b43578d45dbb4576c148e9129e938e60654 Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Sat, 30 May 2026 23:46:29 +0200 Subject: [PATCH 4/4] update workflow for dispatch update website with new release lapikit --- .github/workflows/current.yml | 2 ++ src/content/docs/changelog.md | 6 ++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.github/workflows/current.yml b/.github/workflows/current.yml index 55e5848f..7186b41b 100644 --- a/.github/workflows/current.yml +++ b/.github/workflows/current.yml @@ -7,6 +7,8 @@ on: pull_request: branches: - main + repository_dispatch: + types: [lapikit-updated] jobs: build: diff --git a/src/content/docs/changelog.md b/src/content/docs/changelog.md index cf030797..29394e8b 100644 --- a/src/content/docs/changelog.md +++ b/src/content/docs/changelog.md @@ -1,6 +1,8 @@ --- -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.' --- +# Changelog +

    Changelog Content