Skip to content

Commit

Permalink
chore: update to latest solid and solid start (#300)
Browse files Browse the repository at this point in the history 
Co-authored-by: Fabien MARIE-LOUISE <[email protected]>
  • Loading branch information
@jer3m01 @fabien-ml
jer3m01 and fabien-ml authored Feb 1, 2024
1 parent 0de5151 commit 457bbf0
Show file tree
Hide file tree
Showing 28 changed files with 4,492 additions and 1,745 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ lerna-debug.log

# solid
.solid
.vinxi

# VSC Settings
.vscode/settings.json
Expand Down
36 changes: 18 additions & 18 deletions apps/docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,45 +25,45 @@
"author": "Fabien Marie-Louise <[email protected]>",
"type": "module",
"scripts": {
"build": "solid-start build",
"build": "vinxi build",
"clean": "rm -rf .solid && rm -rf netlify && rm -rf .turbo && rm -rf node_modules && rm -rf dist",
"dev": "solid-start dev --host",
"start": "solid-start start"
"dev": "vinxi dev --host",
"start": "vinxi start"
},
"dependencies": {
"@docsearch/css": "3.5.2",
"@docsearch/js": "3.5.2",
"@kobalte/core": "0.12.1",
"@solidjs/meta": "0.28.6",
"@solidjs/router": "0.8.3",
"@solidjs/meta": "0.29.3",
"@solidjs/router": "0.10.6",
"@tanstack/solid-virtual": "3.0.0-beta.6",
"clsx": "2.0.0",
"solid-js": "1.7.11",
"solid-start": "0.3.4",
"solid-js": "1.8.8",
"@solidjs/start": "0.4.11",
"vinxi": "0.1.10",
"undici": "5.23.0"
},
"devDependencies": {
"@kobalte/tailwindcss": "0.9.0",
"@mdx-js/mdx": "2.3.0",
"@mdx-js/rollup": "2.3.0",
"@mdx-js/mdx": "3.0.0",
"@mdx-js/rollup": "3.0.0",
"@tailwindcss/typography": "0.5.9",
"acorn": "8.10.0",
"autoprefixer": "10.4.15",
"github-slugger": "2.0.0",
"postcss": "8.4.28",
"rehype-pretty-code": "0.10.0",
"rehype-raw": "6.1.1",
"rehype-slug": "5.1.0",
"remark-gfm": "3.0.1",
"rehype-pretty-code": "0.12.3",
"remark-shiki-twoslash": "3.1.3",
"shiki": "0.14.3",
"solid-mdx": "0.0.6",
"solid-start-netlify": "0.3.4",
"solid-start-node": "0.3.4",
"rehype-raw": "7.0.0",
"rehype-slug": "6.0.0",
"remark-gfm": "4.0.0",
"shiki": "0.14.7",
"solid-mdx": "0.0.7",
"tailwindcss": "3.3.3",
"typescript": "4.9.5",
"unist-util-visit": "5.0.0",
"vite": "3.2.7"
"vite": "5.0.12",
"@vinxi/plugin-mdx": "3.7.1"
},
"engines": {
"node": ">=18"
Expand Down
81 changes: 28 additions & 53 deletions apps/docs/src/root.tsx → apps/docs/src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,14 @@ import {
Toast,
cookieStorageManagerSSR,
} from "@kobalte/core";
import { Suspense, useContext } from "solid-js";
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
import { Suspense } from "solid-js";
import { Portal, isServer } from "solid-js/web";
import { MDXProvider } from "solid-mdx";
import {
Body,
ErrorBoundary,
FileRoutes,
Head,
Html,
Link,
Meta,
Routes,
Scripts,
ServerContext,
Title,
} from "solid-start";

import { getCookie } from "vinxi/server";
import toastStyles from "./examples/toast.module.css";
import { mdxComponents } from "./mdx-components";

Expand All @@ -45,47 +36,30 @@ export const mods = /*#__PURE__*/ import.meta.glob<
},
});

export default function Root() {
const event = useContext(ServerContext);
function getServerCookies() {
"use server";

const colorMode = getCookie("kb-color-mode");

return colorMode ? `kb-color-mode=${colorMode}` : "";
}

export default function App() {
const storageManager = cookieStorageManagerSSR(
isServer ? event?.request.headers.get("cookie") ?? "" : document.cookie,
isServer ? getServerCookies() : document.cookie,
);

return (
<Html lang="en">
<Head>
<Title>Kobalte</Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
<Link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<Link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<Link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<Link rel="manifest" href="/site.webmanifest" />
</Head>
<Body>
<ErrorBoundary>
<ColorModeScript storageType={storageManager.type} />
<Suspense>
<Router
root={(props) => (
<Suspense>
<MetaProvider>
<Title>Kobalte</Title>
<ColorModeScript storageType={storageManager.type} />
<ColorModeProvider storageManager={storageManager}>
<MDXProvider components={mdxComponents}>
<Routes>
<FileRoutes />
</Routes>
{props.children}

<Portal>
<Toast.Region>
<Toast.List class={toastStyles.toast__list} />
Expand All @@ -98,10 +72,11 @@ export default function Root() {
</Portal>
</MDXProvider>
</ColorModeProvider>
</Suspense>
</ErrorBoundary>
<Scripts />
</Body>
</Html>
</MetaProvider>
</Suspense>
)}
>
<FileRoutes />
</Router>
);
}
6 changes: 2 additions & 4 deletions apps/docs/src/components/footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { Link } from "@solidjs/router";

import {
DiscordIcon,
GitHubIcon,
Expand All @@ -14,13 +12,13 @@ export function Footer() {
<div class="flex flex-col sm:flex-row items-baseline justify-between gap-4 py-8 md:py-12">
<div>
<div class="mb-2">
<Link
<a
class="inline-block font-semibold font-display text-xl"
href="/"
>
Kobalte
<span class="text-3xl text-sky-600 leading-[0]">.</span>
</Link>
</a>
</div>
<div class="text-sm text-gray-600">
<span class="text-sm text-zinc-700 mr-4 dark:text-zinc-400">
Expand Down
18 changes: 9 additions & 9 deletions apps/docs/src/components/header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import docsearch from "@docsearch/js";
import { Link, useMatch } from "@solidjs/router";
import { useMatch } from "@solidjs/router";
import { clsx } from "clsx";
import { onMount } from "solid-js";

Expand Down Expand Up @@ -38,13 +38,13 @@ export function Header(props: HeaderProps) {
<MobileNavigation sections={props.navSections} />
</div>
<div class="relative flex flex-grow basis-0 items-center space-x-2">
<Link
<a
class="text-zinc-800 dark:text-white/90 font-medium font-display text-xl leading-none"
href="/"
>
Kobalte
<span class="text-3xl leading-[0] text-sky-600">.</span>
</Link>
</a>
<span class="rounded bg-zinc-100 px-1.5 py-1 text-sm leading-none dark:bg-zinc-800 dark:text-zinc-300">
{LATEST_CORE_VERSION_NAME}
</span>
Expand All @@ -53,7 +53,7 @@ export function Header(props: HeaderProps) {
<div class="relative flex basis-0 justify-end md:flex-grow items-center py-2">
<div id="docsearch" class="mx-3.5 flex items-center justify-center" />
<div class="hidden lg:flex lg:space-x-1.5 text-sm">
<Link
<a
href="/docs/core/overview/introduction"
class={clsx(
"px-3 py-2 rounded-md flex items-center justify-center transition",
Expand All @@ -63,8 +63,8 @@ export function Header(props: HeaderProps) {
)}
>
Components
</Link>
<Link
</a>
<a
href={LATEST_CORE_CHANGELOG_URL}
class={clsx(
"px-3 py-2 rounded-md flex items-center justify-center transition",
Expand All @@ -74,17 +74,17 @@ export function Header(props: HeaderProps) {
)}
>
Changelog
</Link>
</a>
</div>
<Link
<a
href="https://github.com/kobaltedev/kobalte"
target="_blank"
rel="noopener noreferrer"
class="p-2.5 mx-2 rounded-md flex items-center justify-center transition rounded text-zinc-700 hover:text-zinc-800 dark:text-zinc-300 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800"
aria-label="GitHub"
>
<GitHubIcon class="h-5 w-5" />
</Link>
</a>
<ThemeSelector />
</div>
</header>
Expand Down
10 changes: 5 additions & 5 deletions apps/docs/src/components/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Link, useLocation } from "@solidjs/router";
import { useLocation } from "@solidjs/router";
import { ParentProps, Show } from "solid-js";

import { NavSection } from "../model/navigation";
Expand Down Expand Up @@ -41,15 +41,15 @@ export function Layout(props: LayoutProps) {
Previous
</dt>
<dd class="mt-1">
<Link
<a
href={previousPage().href}
class="text-base font-semibold text-zinc-500 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-300"
>
<span aria-hidden="true" class="mr-1">
&larr;
</span>
<span>{previousPage().title}</span>
</Link>
</a>
</dd>
</dl>
</Show>
Expand All @@ -59,15 +59,15 @@ export function Layout(props: LayoutProps) {
Next
</dt>
<dd class="mt-1">
<Link
<a
href={nextPage().href}
class="text-base font-semibold text-zinc-500 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-300"
>
<span>{nextPage().title}</span>
<span aria-hidden="true" class="ml-1">
&rarr;
</span>
</Link>
</a>
</dd>
</dl>
</Show>
Expand Down
14 changes: 7 additions & 7 deletions apps/docs/src/components/mobile-navigation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Dialog, Separator, createDisclosureState } from "@kobalte/core";
import { Link, useIsRouting, useMatch } from "@solidjs/router";
import { useIsRouting, useMatch } from "@solidjs/router";
import { clsx } from "clsx";
import { ComponentProps, createComputed, splitProps } from "solid-js";

Expand Down Expand Up @@ -47,13 +47,13 @@ export function MobileNavigation(props: MobileNavigationProps) {
<Dialog.Content class="fixed inset-0 z-50 min-h-full overflow-y-auto w-full max-w-xs bg-white px-4 pt-5 pb-12 dark:bg-zinc-900 sm:px-6">
<div class="flex items-center">
<div class="relative flex flex-grow basis-0 items-center space-x-2">
<Link
<a
class="text-zinc-800 dark:text-white/90 font-medium font-display text-xl leading-none"
href="/"
>
Kobalte
<span class="text-3xl leading-[0] text-sky-600">.</span>
</Link>
</a>
<span class="rounded bg-zinc-100 px-1.5 py-1 text-sm leading-none dark:bg-zinc-800 dark:text-zinc-300">
{LATEST_CORE_VERSION_NAME}
</span>
Expand All @@ -68,7 +68,7 @@ export function MobileNavigation(props: MobileNavigationProps) {
</button>
</div>
<div class="flex flex-col items-start lg:hidden pt-4 pb-2 text-sm">
<Link
<a
href="/docs/core/overview/introduction"
class={clsx(
"block w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
Expand All @@ -78,8 +78,8 @@ export function MobileNavigation(props: MobileNavigationProps) {
)}
>
Components
</Link>
<Link
</a>
<a
href={LATEST_CORE_CHANGELOG_URL}
class={clsx(
"block w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
Expand All @@ -89,7 +89,7 @@ export function MobileNavigation(props: MobileNavigationProps) {
)}
>
Changelog
</Link>
</a>
</div>
<Separator.Root class="lg:hidden" />
<Navigation sections={local.sections} class="mt-5 px-1" />
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/src/components/navigation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Link, useLocation } from "@solidjs/router";
import { useLocation } from "@solidjs/router";
import { clsx } from "clsx";
import { ComponentProps, For, Match, Switch, splitProps } from "solid-js";

Expand Down Expand Up @@ -26,7 +26,7 @@ export function Navigation(props: NavigationProps) {
<For each={section.links}>
{(link) => (
<li class="relative group">
<Link
<a
href={link.href}
class={clsx(
"flex items-center justify-between w-full font-sans transition font-normal rounded px-3 py-2 hover:bg-sky-50 dark:hover:bg-sky-900/20",
Expand All @@ -48,7 +48,7 @@ export function Navigation(props: NavigationProps) {
</span>
</Match>
</Switch>
</Link>
</a>
</li>
)}
</For>
Expand Down
Loading

0 comments on commit 457bbf0

Please sign in to comment.