-
Welcome to Solid's documentation!
-This is the repo for [docs.solidjs.com](https://docs.solidjs.com/). This repo
+This is the repo for [docs.solidjs.com](https://docs.solidjs.com/). This repo
contains all the source code that we use to build our docs.
[](https://gitpod.io/#https://github.com/solidjs/solid-docs-next)
@@ -38,9 +37,9 @@ Have you noticed something is missing, confusing, or is wrong in our
documentation?
Check to see if it has
-[already been mentioned ](https://github.com/solidjs/solid-docs-next/issues)
+[already been mentioned ](https://github.com/solidjs/solid-docs/issues)
and, if not,
-[create an issue](https://github.com/solidjs/solid-docs-next/issues/new/choose)
+[create an issue](https://github.com/solidjs/solid-docs/issues/new/choose)
to bring it to our attention!
## Share an idea
@@ -52,7 +51,7 @@ Discussion threads are where you can offer feedback on things that might not be
problems that need addressing, but are ideas to be explored.
Join us in the
-[Discussions section](https://github.com/solidjs/solid-docs-next/discussions/280)
+[Discussions section](https://github.com/solidjs/solid-docs/discussions/280)
where we can brainstorm these ideas, ask questions, and share goals!
## Suggest a fix or contribute
@@ -63,19 +62,19 @@ If you can see what the problem is, and you know how to fix it, you can make a
PR (pull request) with the change and contribute to the docs repo yourself.
If you're looking to make a larger contribution, please see our
-[CONTRIBUTING.md](https://github.com/solidjs/solid-docs-next/blob/main/CONTRIBUTING.md)
+[CONTRIBUTING.md](https://github.com/solidjs/solid-docs/blob/main/CONTRIBUTING.md)
first!
## Running the Site Locally
At the moment, we recommend running the site locally through either
-[CodeSandbox](https://codesandbox.io/p/github/solidjs/solid-docs-next/),
-[Gitpod](https://gitpod.io/#https://github.com/solidjs/solid-docs-next), or
-[StackBlitz](https://stackblitz.com/github/solidjs/solid-docs-next). These are
+[CodeSandbox](https://codesandbox.io/p/github/solidjs/solid-docs/),
+[Gitpod](https://gitpod.io/#https://github.com/solidjs/solid-docs), or
+[StackBlitz](https://stackblitz.com/github/solidjs/solid-docs). These are
the quickest and easiest way to browse and edit the project files and run the
site locally.
-The app uses [pnpm](https://pnpm.io) as the package manager and it runs on Node.js `v18+`.
+The app uses [pnpm](https://pnpm.io) as the package manager and it runs on Node.js `v22+`.
Install dependencies:
@@ -91,9 +90,8 @@ pnpm dev
This will start your the app at [localhost:3000](http://localhost:3000) or the next available port.
-### Collections and virtual modules
+### Framework and Theme
-The builds an [Astro](https://docs.astro.build/en/guides/content-collections/) inspired collection navigation, it will bring all routes and generate a couple of files at `/.solid`.
-These files are exposed to your app via [Vite virtual modules](https://vitejs.dev/guide/api-plugin#virtual-modules-convention). This task is perform via our `sync` script (`pnpm sync`), ran before every build.
+The docs are built on [SolidBase](https://solidbase.dev) and uses the [Osmium Theme](./osmium).
-If changes are made to the navigation (new entry, or repositioning entry), it is necessary to restart the server for changes to take effect.
+This repo should only contain content as mdx files, features should be implemented upstream and UI changes in the theme.
diff --git a/WRITING.md b/WRITING.md
index f1e371efc5..2f0473a138 100644
--- a/WRITING.md
+++ b/WRITING.md
@@ -188,6 +188,27 @@ Do: Check the [Solid homepage](https://www.solidjs.com)
Don't: Click [here](https://www.solidjs.com) to go to the Solid homepage.
```
+## Reference pages
+
+Reference pages document the API surface.
+Keep them concise and easy to scan.
+
+Include:
+
+- Imports
+- Signatures
+- Parameters
+- Return values
+- Short examples
+
+Avoid:
+
+- Narrative context or “why”
+- Usage guidance (“when to use”, best practices)
+- Long notes
+
+If explanation is needed, link to a guide or how-to page.
+
## Voice and tone
So far, we've dealt with how your contributions should look and function.
diff --git a/app.config.ts b/app.config.ts
deleted file mode 100644
index 24f7049e4e..0000000000
--- a/app.config.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import { defineConfig } from "@solidjs/start/config";
-
-import { createWithSolidBase, defineTheme } from "@kobalte/solidbase/config";
-
-import tree from "./.solid/tree";
-import entries from "./.solid/flat-entries";
-import solidstartEntries from "./.solid/solid-start-flat-entries";
-import solidrouterEntries from "./.solid/solid-router-flat-entries";
-import solidMetaEntries from "./.solid/solid-meta-flat-entries";
-import solidrouterTree from "./.solid/solid-router-tree";
-import solidStartTree from "./.solid/solid-start-tree";
-import solidMetaTree from "./.solid/solid-meta-tree";
-
-function docsData() {
- const virtualModuleId = "solid:collection";
- const resolveVirtualModuleId = "\0" + virtualModuleId;
-
- return {
- name: virtualModuleId,
- resolveId(id: string) {
- if (id === virtualModuleId) {
- return resolveVirtualModuleId;
- }
- },
- async load(id: string) {
- if (id === resolveVirtualModuleId) {
- return `
- export const coreEntries = ${JSON.stringify(entries, null, 2)}
- export const routerEntries = ${JSON.stringify(solidrouterEntries, null, 2)}
- export const startEntries = ${JSON.stringify(solidstartEntries, null, 2)}
- export const metaEntries = ${JSON.stringify(solidMetaEntries, null, 2)}
- export const coreTree = ${JSON.stringify(tree, null, 2)}
- export const routerTree = ${JSON.stringify(solidrouterTree, null, 2)}
- export const startTree = ${JSON.stringify(solidStartTree, null, 2)}
- export const metaTree = ${JSON.stringify(solidMetaTree, null, 2)}
- `;
- }
- },
- };
-}
-
-const theme = defineTheme({
- componentsPath: import.meta.resolve("./src/solidbase-theme"),
-});
-export default defineConfig(
- createWithSolidBase(theme)(
- {
- ssr: true,
- middleware: "src/middleware/index.ts",
- server: {
- preset: "netlify",
- prerender: {
- crawlLinks: true,
- autoSubfolderIndex: false,
- failOnError: true,
- // eslint-disable-next-line no-useless-escape
- ignore: [/\{\getPath}/, /.*?emojiSvg\(.*/],
- },
- },
- vite: {
- plugins: [docsData(), heroCodeSnippet()],
- },
- },
- {
- title: "Solid Docs",
- description:
- "Documentation for SolidJS, the signals-powered UI framework",
- editPath: "https://github.com/solidjs/solid-docs/edit/main/:path",
- markdown: {
- expressiveCode: {
- themes: ["min-light", "material-theme-ocean"],
- themeCssSelector: (theme) => `[data-theme="${theme.type}"]`,
- frames: false,
- styleOverrides: {
- twoSlash: {
- cursorColor: "var(--twoslash-cursor)",
- },
- },
- },
- toc: {
- minDepth: 2,
- },
- packageManagers: {
- presets: {
- npm: {
- install: "npm i :content",
- "install-dev": "npm i :content -D",
- "install-global": "npm i :content -g",
- "install-local": "npm i",
- run: "npm run :content",
- exec: "npx :content",
- create: "npm init :content",
- },
- pnpm: {
- install: "pnpm i :content",
- "install-dev": "pnpm i :content -D",
- "install-global": "pnpm i :content -g",
- "install-local": "pnpm i",
- run: "pnpm :content",
- exec: "pnpx :content",
- create: "pnpm create :content",
- },
- yarn: {
- install: "yarn add :content",
- "install-dev": "yarn add :content -D",
- "install-global": "yarn add :content -g",
- "install-local": "yarn i",
- run: "yarn :content",
- exec: "yarn dlx :content",
- create: "yarn create :content",
- },
- bun: {
- install: "bun i :content",
- "install-dev": "bun i :content -d",
- "install-global": "bun i :content -g",
- "install-local": "bun i",
- run: "bun run :content",
- exec: "bunx :content",
- create: "bun create :content",
- },
- deno: {
- install: "deno add npm::content",
- "install-dev": "deno add npm::content -D",
- "install-global": "deno add npm::content -g",
- "install-local": "deno i",
- run: "deno run :content",
- exec: "dpx :content",
- create: "deno init --npm :content",
- },
- },
- },
- },
- }
- )
-);
-
-import { readFile } from "node:fs/promises";
-import { codeToHtml } from "shiki";
-
-function heroCodeSnippet() {
- const virtualModuleId = "solid:hero-code-snippet";
- const resolveVirtualModuleId = "\0" + virtualModuleId;
-
- return {
- name: virtualModuleId,
- resolveId(id: string) {
- if (id === virtualModuleId) {
- return resolveVirtualModuleId;
- }
- },
- async load(id: string) {
- if (id === resolveVirtualModuleId) {
- const snippet = await readFile(
- "./src/ui/layout/hero-code-snippet.code",
- "utf-8"
- );
-
- const highlightedCode = await codeToHtml(snippet.trim(), {
- lang: "tsx",
- theme: "material-theme-ocean",
- });
-
- return `export const highlightedCode = \`${highlightedCode}\``;
- }
- },
- };
-}
diff --git a/env.d.ts b/env.d.ts
index df07a81008..d92c7e41c0 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -10,17 +10,9 @@ interface ImportMeta {
declare namespace NodeJS {
interface ProcessEnv {
+ readonly ORAMA_PROJECT_ID: string;
+ readonly ORAMA_DATASOURCE_ID: string;
+ readonly ORAMA_PUBLIC_API_KEY: string;
readonly ORAMA_PRIVATE_API_KEY: string;
- readonly ORAMA_PRIVATE_INDEX_ID: string;
}
}
-
-declare module "solid:collection" {
- // eslint-disable-next-line
- const component: any;
- export default component;
-}
-
-declare module "solid:hero-code-snippet" {
- export const highlightedCode: string;
-}
diff --git a/eslint.config.ts b/eslint.config.ts
index 6497c04d0e..2a56d00b79 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -40,6 +40,7 @@ export default tseslint.config(
rules: {
quotes: ["error", "double"],
semi: "warn",
+ "@typescript-eslint/no-empty-object-type": ["off"],
"@typescript-eslint/no-unused-vars": [
"error",
{
diff --git a/global.d.ts b/global.d.ts
deleted file mode 100644
index fd182f46af..0000000000
--- a/global.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-declare module "solid:collection" {
- import coreTree from ".solid/tree";
- import startTree from ".solid/solid-router-tree";
- import routerTree from ".solid/solid-start-tree";
- import metaTree from ".solid/solid-meta-tree";
- import coreEntries from ".solid/flat-entries";
- import routerEntries from ".solid/solid-start-flat-entries";
- import startEntries from ".solid/solid-router-flat-entries";
- import metaEntries from ".solid/solid-meta-flat-entries";
-
- export {
- coreEntries,
- routerEntries,
- startEntries,
- metaEntries,
- coreTree,
- routerTree,
- startTree,
- metaTree,
- };
-}
diff --git a/osmium/README.md b/osmium/README.md
new file mode 100644
index 0000000000..453b8b80fe
--- /dev/null
+++ b/osmium/README.md
@@ -0,0 +1,26 @@
+# Osmium
+
+Official SolidJS docs theme for SolidBase.
+
+## Installation
+
+```sh
+npm i solidbase-osmium
+```
+
+In your `vite.config.ts`:
+
+```ts
+import { osmium } from "solidbase-osmium";
+
+const solidBase = createSolidBase(osmium);
+
+export default defineConfig({
+ ...solidBase.startConfig({
+ ...
+ }),
+ plugins: [solidBase.plugin({ ... })],
+})
+```
+
+More information in the [SolidBase docs for consuming a theme.](https://solidbase.dev/guide/customization/custom-themes#consuming-a-theme)
diff --git a/osmium/package.json b/osmium/package.json
new file mode 100644
index 0000000000..d7bb4025cd
--- /dev/null
+++ b/osmium/package.json
@@ -0,0 +1,50 @@
+{
+ "name": "solidbase-osmium",
+ "version": "0.0.0-dev",
+ "description": "Official SolidJS docs theme for SolidBase.",
+ "type": "module",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "url": "https://github.com/solidjs/solid-docs"
+ },
+ "keywords": [
+ "solid",
+ "solidjs",
+ "solidbase",
+ "theme"
+ ],
+ "files": [
+ "src"
+ ],
+ "exports": {
+ ".": {
+ "solid": "./src/index.ts",
+ "import": "./src/index.ts",
+ "types": "./src/index.ts"
+ },
+ "./style": "./src/index.css"
+ },
+ "license": "MIT",
+ "dependencies": {
+ "@fontsource-variable/geist": "^5.2.8",
+ "@fontsource-variable/geist-mono": "^5.2.8",
+ "@kobalte/core": "^0.13.11",
+ "@kobalte/solidbase": "catalog:",
+ "@kobalte/tailwindcss": "^0.9.0",
+ "@orama/core": "^1.2.19",
+ "@solid-primitives/context": "^0.3.2",
+ "@solid-primitives/event-listener": "^2.4.5",
+ "@solid-primitives/marker": "^0.2.2",
+ "@solid-primitives/platform": "^0.2.1",
+ "@solidjs/router": "0.16.1",
+ "@tailwindcss/typography": "^0.5.19",
+ "solid-heroicons": "^3.2.4",
+ "solid-js": "^1.9.12",
+ "tailwindcss": "^4.3.0"
+ },
+ "peerDependencies": {
+ "tailwindcss": "^4.3.0"
+ }
+}
diff --git a/osmium/src/Layout.tsx b/osmium/src/Layout.tsx
new file mode 100644
index 0000000000..15046315a8
--- /dev/null
+++ b/osmium/src/Layout.tsx
@@ -0,0 +1,25 @@
+import { ErrorBoundary } from "solid-js";
+
+import { Layout } from "./ui/layout";
+import { NotFound } from "./ui/not-found";
+import { SidebarProvider, useThemeListener } from "@kobalte/solidbase/client";
+import { usePace } from "@kobalte/solidbase/default-theme/pace.js";
+import { useRouteConfig } from "./utils";
+import { OsmiumThemeStateProvider } from "./context";
+import { ParentProps } from "solid-js";
+
+export default function (props: ParentProps) {
+ const config = useRouteConfig();
+ useThemeListener();
+ usePace();
+
+ return (
+ + {frontmatter()?.title} +
+{props.children}
+ {props.children}
@@ -104,10 +101,10 @@ export const h1 = (props: ParentProps) => ( export const h2 = (props: ParentProps) => { return ( <> -+
{props.children}
@@ -118,7 +115,7 @@ export const h3 = (props: ParentProps) => { return ({props.children}
@@ -128,7 +125,7 @@ export const h4 = (props: ParentProps) => { return ({props.children}
@@ -138,7 +135,7 @@ export const h5 = (props: ParentProps) => { return ({props.children}
@@ -147,7 +144,7 @@ export const h5 = (props: ParentProps) => { export const h6 = (props: ParentProps) => ({props.children}
@@ -172,23 +169,21 @@ export const a = (props: ParentProps & { href: string }) => { resolvedArray[0].nodeName === "CODE") ) { return ( - {resolved()} - + ); } else { return ( - {resolved()} - + ); } }; @@ -215,17 +210,12 @@ export const ol = (props: ParentProps) => ( export const nav = (props: ParentProps) => ( ); -export const TesterComponent = () => ( -- Remove This Now!!! If you see this it means that markdown custom components - does work -
-); + export const pre = (props: ParentProps) => { return (
{props.children}
@@ -234,7 +224,7 @@ export const pre = (props: ParentProps) => {
export const code = (props: ParentProps) => {
return (
{props.children}
@@ -252,9 +242,6 @@ export const hr = (props: ParentProps) => {
export const response = (props: ParentProps) => {
return {props.children};
};
-// export const void = (props: ParentProps) => {
-// return {props.children};
-// }
export const unknown = (props: ParentProps) => {
return {props.children};
};
diff --git a/src/styles/expressive-code.css b/osmium/src/styles/expressive-code.css
similarity index 96%
rename from src/styles/expressive-code.css
rename to osmium/src/styles/expressive-code.css
index bbb58b687f..947113dfa2 100644
--- a/src/styles/expressive-code.css
+++ b/osmium/src/styles/expressive-code.css
@@ -1,3 +1,5 @@
+@reference "../tailwind.css"
+
.expressive-code-overrides .expressive-code {
@apply my-4 font-mono;
}
@@ -7,7 +9,7 @@
}
.expressive-code-overrides .expressive-code .frame.is-terminal .header {
- @apply border-x-0 border-b border-t-0 border-solid border-slate-600/20;
+ @apply border-x-0 border-t-0 border-b border-solid border-slate-600/20;
}
html .expressive-code-overrides .expressive-code pre {
diff --git a/src/styles/prism.css b/osmium/src/styles/prism.css
similarity index 62%
rename from src/styles/prism.css
rename to osmium/src/styles/prism.css
index e38bc887c9..6dcd53f713 100644
--- a/src/styles/prism.css
+++ b/osmium/src/styles/prism.css
@@ -1,5 +1,7 @@
+@reference "../tailwind.css"
+
pre[class*="language-"] {
- color: theme("colors.slate.50");
+ color: var(--color-slate-50);
}
.token.tag,
@@ -8,7 +10,7 @@ pre[class*="language-"] {
.token.selector .class,
.token.selector.class,
.token.function {
- color: theme("colors.pink.400");
+ color: var(--color-pink-400);
}
.token.attr-name,
@@ -16,32 +18,32 @@ pre[class*="language-"] {
.token.rule,
.token.pseudo-class,
.token.important {
- color: theme("colors.slate.300");
+ color: var(--color-slate-300);
}
.token.module {
- color: theme("colors.pink.400");
+ color: var(--color-pink-400);
}
.token.attr-value,
.token.class,
.token.string,
.token.property {
- color: theme("colors.sky.300");
+ color: var(--color-sky-300);
}
.token.punctuation,
.token.attr-equals {
- color: theme("colors.slate.500");
+ color: var(--color-slate-500);
}
.token.unit,
.language-css .token.function {
- color: theme("colors.teal.200");
+ color: var(--color-teal-200);
}
.token.comment,
.token.operator,
.token.combinator {
- color: theme("colors.slate.400");
+ color: var(--color-slate-400);
}
diff --git a/osmium/src/tailwind.css b/osmium/src/tailwind.css
new file mode 100644
index 0000000000..2816c32676
--- /dev/null
+++ b/osmium/src/tailwind.css
@@ -0,0 +1,61 @@
+@plugin "@tailwindcss/typography";
+@plugin "@kobalte/tailwindcss" {
+ prefix: kb;
+}
+
+@custom-variant dark (&:where([data-theme*='dark'], [data-theme*='dark'] *));
+
+@theme {
+ --text-xs: 0.75rem;
+ --text-xs--line-height: 1rem;
+
+ --text-sm: 0.875rem;
+ --text-sm--line-height: 1.5rem;
+
+ --text-base: 1rem;
+ --text-base--line-height: 2rem;
+
+ --text-lg: 1.125rem;
+ --text-lg--line-height: 1.75rem;
+
+ --text-xl: 1.25rem;
+ --text-xl--line-height: 2rem;
+
+ --text-2xl: 1.5rem;
+ --text-2xl--line-height: 2.5rem;
+
+ --text-3xl: 2rem;
+ --text-3xl--line-height: 2.5rem;
+
+ --text-4xl: 2.5rem;
+ --text-4xl--line-height: 3rem;
+
+ --text-5xl: 3rem;
+ --text-5xl--line-height: 3.5rem;
+
+ --text-6xl: 3.75rem;
+ --text-6xl--line-height: 1;
+
+ --text-7xl: 4.5rem;
+ --text-7xl--line-height: 1;
+
+ --text-8xl: 6rem;
+ --text-8xl--line-height: 1;
+
+ --text-9xl: 8rem;
+ --text-9xl--line-height: 1;
+
+ --font-sans: var(--font-geist);
+ --font-mono: var(--font-geist-mono);
+
+ --font-display: var(--font-geist);
+
+ --container-8xl: 88rem;
+}
+
+@layer utilities {
+ .font-display {
+ font-family: var(--font-geist);
+ font-feature-settings: "ss01";
+ }
+}
diff --git a/src/ui/button-link.tsx b/osmium/src/ui/button-link.tsx
similarity index 68%
rename from src/ui/button-link.tsx
rename to osmium/src/ui/button-link.tsx
index e9058e12d7..fb123291ad 100644
--- a/src/ui/button-link.tsx
+++ b/osmium/src/ui/button-link.tsx
@@ -1,20 +1,21 @@
-import { A, type RouterLinkProps } from "./i18n-anchor";
+import { ComponentProps, splitProps } from "solid-js";
-type ButtonLinkProps = RouterLinkProps & {
+type ButtonLinkProps = ComponentProps<"a"> & {
variant: "primary" | "secondary";
};
export const ButtonLink = (props: ButtonLinkProps) => {
+ const [localProps, otherProps] = splitProps(props, ["variant"]);
+
return (
-
);
};
diff --git a/src/ui/callout.tsx b/osmium/src/ui/callout.tsx
similarity index 95%
rename from src/ui/callout.tsx
rename to osmium/src/ui/callout.tsx
index 9878c4266a..1554e84d73 100644
--- a/src/ui/callout.tsx
+++ b/osmium/src/ui/callout.tsx
@@ -1,4 +1,3 @@
-import { Alert } from "@kobalte/core";
import { Icon } from "solid-heroicons";
import { mergeProps, type JSX, Show, untrack } from "solid-js";
import {
@@ -91,7 +90,7 @@ export function Callout(props: CalloutProps) {
const IconComponent = icons[iconType];
return (
-
{mergedProps.title}
-
+
{mergedProps.children}
-
+
);
}
diff --git a/osmium/src/ui/docs-layout.tsx b/osmium/src/ui/docs-layout.tsx
new file mode 100644
index 0000000000..fadf427fbc
--- /dev/null
+++ b/osmium/src/ui/docs-layout.tsx
@@ -0,0 +1,62 @@
+import { Show, JSX, createMemo } from "solid-js";
+import { Pagination } from "./pagination";
+import { EditPageLink } from "./edit-page-link";
+import { PageIssueLink } from "./page-issue-link";
+import { useOsmiumThemeFrontmatter } from "../frontmatter";
+import { useRouteConfig } from "../utils";
+import { useCurrentPageData } from "@kobalte/solidbase/client";
+
+interface DocsLayoutProps {
+ children: JSX.Element;
+}
+
+export const DocsLayout = (props: DocsLayoutProps) => {
+ const frontmatter = useOsmiumThemeFrontmatter();
+
+ const pageData = useCurrentPageData();
+ const config = useRouteConfig();
+
+ const formatter = createMemo(
+ () => new Intl.DateTimeFormat(undefined, config()?.lastUpdated || undefined)
+ );
+
+ const date = createMemo(
+ () =>
+ new Date(
+ Number.isNaN(pageData()?.lastUpdated)
+ ? 0
+ : (pageData()?.lastUpdated ?? 0)
+ )
+ );
+
+ return (
+
+
+ {(t) => (
+
+ {t()}
+
+ )}
+
+
+
+ Last updated:{" "}
+
+ {formatter().format(date())}
+
+
+
+
+
+ );
+};
diff --git a/src/ui/edit-page-link.tsx b/osmium/src/ui/edit-page-link.tsx
similarity index 61%
rename from src/ui/edit-page-link.tsx
rename to osmium/src/ui/edit-page-link.tsx
index 094d5579bf..a5c64c28bb 100644
--- a/src/ui/edit-page-link.tsx
+++ b/osmium/src/ui/edit-page-link.tsx
@@ -3,22 +3,19 @@ import { Icon } from "solid-heroicons";
import { pencilSquare } from "solid-heroicons/outline";
import { useCurrentPageData } from "@kobalte/solidbase/client";
-import { useI18n } from "~/i18n/i18n-context";
-
export const EditPageLink: Component = () => {
- const i18n = useI18n();
const data = useCurrentPageData();
return (
{(editLink) => (
-
- {i18n.t("contribute.edit")}
+
+ Edit this page
)}
diff --git a/src/ui/eraser-link/eraser-link.css b/osmium/src/ui/eraser-link/eraser-link.css
similarity index 100%
rename from src/ui/eraser-link/eraser-link.css
rename to osmium/src/ui/eraser-link/eraser-link.css
diff --git a/src/ui/eraser-link/index.tsx b/osmium/src/ui/eraser-link/index.tsx
similarity index 88%
rename from src/ui/eraser-link/index.tsx
rename to osmium/src/ui/eraser-link/index.tsx
index 76bdd6f46c..453edf2c98 100644
--- a/src/ui/eraser-link/index.tsx
+++ b/osmium/src/ui/eraser-link/index.tsx
@@ -55,7 +55,7 @@ const EraserLink = (
fallback={
{props.children}
@@ -67,6 +67,7 @@ const EraserLink = (
class="relative inline-block"
target="_blank"
rel="noopener noreferrer"
+ aria-label="View diagram on Eraser.io"
>
setIsLoaded(true)}
/>
{isLoaded() ? (
@@ -100,7 +101,7 @@ export default function EraserOrAnchor(props: ParentProps<{ href: string }>) {
fallback={
{props.children}
diff --git a/src/ui/image-links.tsx b/osmium/src/ui/image-link.tsx
similarity index 60%
rename from src/ui/image-links.tsx
rename to osmium/src/ui/image-link.tsx
index d287ce897d..e878fdcc92 100644
--- a/src/ui/image-links.tsx
+++ b/osmium/src/ui/image-link.tsx
@@ -1,5 +1,5 @@
-import { ParentComponent, Show, untrack } from "solid-js";
-import { A } from "~/ui/i18n-anchor";
+import { useLocale } from "@kobalte/solidbase/client";
+import { ParentComponent, untrack } from "solid-js";
/**
* @todo
@@ -24,19 +24,21 @@ export const logos: { [key: string]: { file: string; style?: string } } = {
uno: { file: "uno.svg" },
};
-export type ImageLinksProps = {
+export type ImageLinkProps = {
title: string;
logo: keyof typeof logos;
href: string;
};
-export const ImageLinks: ParentComponent = (props) => {
+export const ImageLink: ParentComponent = (props) => {
+ const locale = useLocale();
+
const logoImage = untrack(() => props.logo);
const { file, style } = logos[logoImage];
return (
-
+
@@ -49,26 +51,17 @@ export const ImageLinks: ParentComponent = (props) => {
/>
-
-
- {props.title}
-
+
-
-
- {props.title}
-
-
+
+ {props.title}
+
diff --git a/osmium/src/ui/layout.tsx b/osmium/src/ui/layout.tsx
new file mode 100644
index 0000000000..19dfe81a99
--- /dev/null
+++ b/osmium/src/ui/layout.tsx
@@ -0,0 +1,48 @@
+import { ParentComponent, Show } from "solid-js";
+
+import { MainNavigation } from "./layout/main-navigation";
+import { MainHeader } from "./layout/main-header";
+import { Hero } from "./layout/hero";
+import { DocsLayout } from "./docs-layout";
+import { SidePanel } from "./layout/side-panel";
+import { useOsmiumThemeFrontmatter } from "../frontmatter";
+
+export const Layout: ParentComponent<{ isError?: boolean }> = (props) => {
+ const frontmatter = useOsmiumThemeFrontmatter();
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/src/ui/layout/contribute.tsx b/osmium/src/ui/layout/contribute.tsx
similarity index 60%
rename from src/ui/layout/contribute.tsx
rename to osmium/src/ui/layout/contribute.tsx
index ad9ea2d56f..25dcd63e89 100644
--- a/src/ui/layout/contribute.tsx
+++ b/osmium/src/ui/layout/contribute.tsx
@@ -1,27 +1,24 @@
import { Component } from "solid-js";
-import { useI18n } from "~/i18n/i18n-context";
import { EditPageLink } from "../edit-page-link";
import { PageIssueLink } from "../page-issue-link";
export const Contribute: Component = () => {
- const i18n = useI18n();
-
return (
<>
- {i18n.t("contribute.title")}
+ Contribute
-
-
+
-
-
+
diff --git a/osmium/src/ui/layout/hero-code-snippet.tsx b/osmium/src/ui/layout/hero-code-snippet.tsx
new file mode 100644
index 0000000000..cd4e623bed
--- /dev/null
+++ b/osmium/src/ui/layout/hero-code-snippet.tsx
@@ -0,0 +1,3 @@
+export default function CodeSnippet() {
+ return TODO;
+}
diff --git a/osmium/src/ui/layout/hero.tsx b/osmium/src/ui/layout/hero.tsx
new file mode 100644
index 0000000000..78545b5f4c
--- /dev/null
+++ b/osmium/src/ui/layout/hero.tsx
@@ -0,0 +1,5 @@
+import { Component } from "solid-js";
+
+export const Hero: Component = () => {
+ return ;
+};
diff --git a/osmium/src/ui/layout/language-selector.tsx b/osmium/src/ui/layout/language-selector.tsx
new file mode 100644
index 0000000000..845d04f292
--- /dev/null
+++ b/osmium/src/ui/layout/language-selector.tsx
@@ -0,0 +1,60 @@
+import { Component, Show } from "solid-js";
+import { Icon } from "solid-heroicons";
+import { language } from "solid-heroicons/solid";
+import { ResolvedLocale, useLocale } from "@kobalte/solidbase/client";
+import { Select } from "@kobalte/core/select";
+import { OsmiumThemeConfig } from "../..";
+
+export const LanguageSelector: Component = () => {
+ const { locales, currentLocale, setLocale } = useLocale();
+
+ return (
+ 1}>
+ {(_) => {
+ return (
+ >
+ value={currentLocale()}
+ options={locales}
+ optionValue="code"
+ optionTextValue={(v) => v.config.label}
+ allowDuplicateSelectionEvents
+ onChange={(option) => option && setLocale(option)}
+ gutter={8}
+ sameWidth={false}
+ placement="bottom"
+ itemComponent={(props) => (
+
+
+ {props.item.rawValue.config.label}
+
+
+ )}
+ >
+
+
+ > class="prose prose-slate w-16 truncate pl-1 text-sm text-slate-700 dark:text-slate-300">
+ {(state) => state.selectedOption().config.label}
+
+
+
+
+
+
+
+ );
+ }}
+
+ );
+};
diff --git a/osmium/src/ui/layout/main-header.tsx b/osmium/src/ui/layout/main-header.tsx
new file mode 100644
index 0000000000..ccdff88385
--- /dev/null
+++ b/osmium/src/ui/layout/main-header.tsx
@@ -0,0 +1,139 @@
+import {
+ ComponentProps,
+ For,
+ Show,
+ createSignal,
+ onCleanup,
+ onMount,
+} from "solid-js";
+import { isServer } from "solid-js/web";
+
+import { ProjectLogo, GitHubIcon, DiscordIcon } from "../logo";
+import { ThemeSelector } from "./theme-selector";
+import { MobileNavigation } from "./mobile-navigation";
+import { LanguageSelector } from "./language-selector";
+
+import { clientOnly } from "@solidjs/start";
+import { useProject, useRouteConfig } from "../../utils";
+import { useOsmiumThemeState } from "../../context";
+
+const ClientSearch = clientOnly(() =>
+ import("../search").then((m) => ({ default: m.Search }))
+);
+
+interface NavLinkProps extends ComponentProps<"a"> {
+ active?: boolean;
+}
+
+function NavLink(props: NavLinkProps) {
+ return (
+
+ {props.children}
+
+ );
+}
+
+interface MainHeaderProps {}
+
+export function MainHeader(_props: MainHeaderProps) {
+ const [isScrolled, setIsScrolled] = createSignal(false);
+
+ const config = useRouteConfig();
+
+ const project = useProject();
+
+ const { setNavOpen } = useOsmiumThemeState();
+
+ if (!isServer) {
+ const onScroll = () => {
+ setIsScrolled(window.scrollY > 0);
+ };
+
+ onMount(() => {
+ onScroll();
+ window.addEventListener("scroll", onScroll, { passive: true });
+ });
+
+ onCleanup(() => {
+ window.removeEventListener("scroll", onScroll);
+ });
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/osmium/src/ui/layout/main-navigation.tsx b/osmium/src/ui/layout/main-navigation.tsx
new file mode 100644
index 0000000000..5565f89b4a
--- /dev/null
+++ b/osmium/src/ui/layout/main-navigation.tsx
@@ -0,0 +1,167 @@
+import { createMemo, createSignal, For, Show } from "solid-js";
+import { useBeforeLeave, useLocation, useMatch } from "@solidjs/router";
+import { Icon } from "solid-heroicons";
+import { chevronDown } from "solid-heroicons/solid";
+import { setIsOpen } from "./mobile-navigation";
+import {
+ SidebarItem,
+ SidebarItemLink,
+ useLocale,
+ useSidebar,
+} from "@kobalte/solidbase/client";
+import { Collapsible } from "@kobalte/core/collapsible";
+import { Tabs } from "@kobalte/core/tabs";
+import VersionSelector from "./version-selector";
+
+interface MainNavigationProps {}
+
+function ListItemLink(props: { item: SidebarItemLink; prefix?: string }) {
+ const location = useLocation();
+ const locale = useLocale();
+
+ const linkStyles = () =>
+ location.pathname === props.item.link.replace(/\\/g, "/")
+ ? "font-semibold text-blue-700 before:bg-blue-700 dark:before:bg-blue-200 dark:text-blue-300 before:block"
+ : "text-slate-700 before:hidden before:bg-blue-600 before:dark:bg-blue-200 hover:text-blue-700 hover:before:block dark:text-slate-300 ";
+ return (
+ -
+ setIsOpen(false)}
+ href={locale.applyPathPrefix(
+ `${props.prefix === "/" ? "" : (props.prefix ?? "")}${props.item.link === "/" ? "" : props.item.link}`
+ )}
+ class={`block w-full pl-3.5 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full hover:text-blue-700 lg:text-sm dark:hover:text-blue-300 ${linkStyles()}`}
+ >
+ {props.item.title}
+
+
+ );
+}
+
+function DirList(props: { items: SidebarItem[] }) {
+ return (
+
+ {(child) => {
+ if ("items" in child) {
+ return (
+ <>
+ -
+
+
+
+ {child.title}
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ if ("link" in child) {
+ return
+ );
+}
+
+export function MainNavigation(_props: MainNavigationProps) {
+ const isReference = useMatch(() => "*/reference/*?");
+
+ const initialTab = () => (isReference() ? "reference" : "learn");
+
+ const [selectedTab, setSelectedTab] = createSignal(initialTab());
+
+ const sidebar = useSidebar();
+
+ const sidebarEntries = createMemo(() => {
+ return sidebar().items.sort((a, b) => {
+ // @ts-expect-error: shorthand
+ return !!a.items - !!b.items;
+ });
+ });
+
+ /**
+ * Re-syncs the selected tab with the chosen route.
+ */
+ useBeforeLeave(({ to }) => {
+ if (typeof to === "number") return;
+
+ if (to.includes("/reference/")) {
+ setSelectedTab("reference");
+ } else {
+ setSelectedTab("learn");
+ }
+ });
+
+ return (
+
+ );
+}
diff --git a/src/ui/layout/mobile-navigation.tsx b/osmium/src/ui/layout/mobile-navigation.tsx
similarity index 70%
rename from src/ui/layout/mobile-navigation.tsx
rename to osmium/src/ui/layout/mobile-navigation.tsx
index 48c028eec1..fc10c5e331 100644
--- a/src/ui/layout/mobile-navigation.tsx
+++ b/osmium/src/ui/layout/mobile-navigation.tsx
@@ -4,38 +4,28 @@ import { bars_3, xMark } from "solid-heroicons/solid";
import { MainNavigation } from "./main-navigation";
import { createSignal } from "solid-js";
-interface Entry {
- title: string;
- path: string;
- children?: Entry[];
- mainNavExclude: boolean;
- isTranslated?: boolean;
-}
-
-interface NavProps {
- tree: {
- learn: Entry[];
- reference: Entry[];
- };
-}
+interface MobileNavigationProps {}
export const [isOpen, setIsOpen] = createSignal(false);
-export const MobileNavigation = (props: NavProps) => {
+export const MobileNavigation = (_props: MobileNavigationProps) => {
return (
-
-
+
-
-
diff --git a/src/ui/layout/side-panel.tsx b/osmium/src/ui/layout/side-panel.tsx
similarity index 100%
rename from src/ui/layout/side-panel.tsx
rename to osmium/src/ui/layout/side-panel.tsx
diff --git a/src/ui/layout/table-of-contents.tsx b/osmium/src/ui/layout/table-of-contents.tsx
similarity index 81%
rename from src/ui/layout/table-of-contents.tsx
rename to osmium/src/ui/layout/table-of-contents.tsx
index e8181b5036..6b8509de0f 100644
--- a/src/ui/layout/table-of-contents.tsx
+++ b/osmium/src/ui/layout/table-of-contents.tsx
@@ -6,14 +6,10 @@ import {
import { createEventListener } from "@solid-primitives/event-listener";
import { isServer } from "solid-js/web";
-import { useI18n } from "~/i18n/i18n-context";
-
export const TableOfContents = () => {
const data = useCurrentPageData();
const toc = () => data()?.toc;
- const i18n = useI18n();
-
const [currentSection, setCurrentSection] = createSignal();
const [headingElements, setHeadingElements] = createSignal<
@@ -53,13 +49,10 @@ export const TableOfContents = () => {
return (