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/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/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

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..f84eb081 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,61 @@

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 +526,10 @@

One library for your entire Svelte project @@ -524,7 +539,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 +588,22 @@ {#each stepperToUseComponent as step, index (step)} {@const StepIcon = step.icon}
  • - + + + + +
    • - +

    @@ -643,7 +661,7 @@ use:scrollAnimation={{ animation: 'fade-up', delay: 100 }} >
    @@ -660,13 +678,17 @@ {#each enableFeatures as { title, description, icon } (title)}
  • -
    +
    {#if typeof icon === 'string'} - {@html icon} + + {@html icon} + {:else} {@const FeatureIcon = icon} - + + + {/if}
    @@ -680,20 +702,15 @@
    - +
    @@ -705,19 +722,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 +759,20 @@
    -
    -
    + {@html npmIcon} -
    +
    {npmState.downloads || '---'}Monthly downloads

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

    GitHub Stars

    -     +
    - +

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

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

    Followers

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

    Members

    -     +
    @@ -861,7 +888,7 @@

    Go further with Lapikit

    @@ -870,20 +897,23 @@

    - +
    Documentations

    Learn how to install and use Lapikit in your project

    - + + +
    -     - +
    @@ -894,21 +924,29 @@

    - + + +
    -     - + +
    Sponsor

    Become a sponsor to help Lapikit create a strong community

    - + + +
    -     +
    @@ -937,59 +975,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

    - +
    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()] : []) ] }));