+ {frontmatter()?.title} +
+ +{props.children}
+ - 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 +223,7 @@ export const pre = (props: ParentProps) => {
export const code = (props: ParentProps) => {
return (
{props.children}
@@ -252,9 +241,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 bbb58b687..947113dfa 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 e38bc887c..6dcd53f71 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 000000000..2816c3267
--- /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 82%
rename from src/ui/button-link.tsx
rename to osmium/src/ui/button-link.tsx
index 5bfe0d0b5..fb123291a 100644
--- a/src/ui/button-link.tsx
+++ b/osmium/src/ui/button-link.tsx
@@ -1,7 +1,6 @@
-import { splitProps } from "solid-js";
-import { A, type RouterLinkProps } from "./i18n-anchor";
+import { ComponentProps, splitProps } from "solid-js";
-type ButtonLinkProps = RouterLinkProps & {
+type ButtonLinkProps = ComponentProps<"a"> & {
variant: "primary" | "secondary";
};
@@ -9,8 +8,7 @@ export const ButtonLink = (props: ButtonLinkProps) => {
const [localProps, otherProps] = splitProps(props, ["variant"]);
return (
- {
+ 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()}
+
+ )}
+
+
+ {frontmatter()?.title}
+
+
+
+
+ Last updated:{" "}
+
+ {formatter().format(date())}
+
+
+
+
+
+ );
+};
diff --git a/src/ui/edit-page-link.tsx b/osmium/src/ui/edit-page-link.tsx
similarity index 71%
rename from src/ui/edit-page-link.tsx
rename to osmium/src/ui/edit-page-link.tsx
index 094d5579b..89005d98c 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 100%
rename from src/ui/eraser-link/index.tsx
rename to osmium/src/ui/eraser-link/index.tsx
diff --git a/osmium/src/ui/layout.tsx b/osmium/src/ui/layout.tsx
new file mode 100644
index 000000000..9776235f9
--- /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 86%
rename from src/ui/layout/contribute.tsx
rename to osmium/src/ui/layout/contribute.tsx
index ad9ea2d56..e17f35bfb 100644
--- a/src/ui/layout/contribute.tsx
+++ b/osmium/src/ui/layout/contribute.tsx
@@ -1,15 +1,12 @@
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
TODO;
+}
diff --git a/src/ui/layout/hero.tsx b/osmium/src/ui/layout/hero.tsx
similarity index 68%
rename from src/ui/layout/hero.tsx
rename to osmium/src/ui/layout/hero.tsx
index 5f0b7ef94..5142a8921 100644
--- a/src/ui/layout/hero.tsx
+++ b/osmium/src/ui/layout/hero.tsx
@@ -1,8 +1,6 @@
-import { Component, Index, Match, Switch, createMemo } from "solid-js";
+import { Component, Match, Switch, createMemo } from "solid-js";
import { ButtonLink } from "../button-link";
-import { snippetLines } from "./hero-code-snippet";
import { useMatch } from "@solidjs/router";
-import { useI18n } from "~/i18n/i18n-context";
import RenderedCode from "./hero-code-snippet";
const TrafficLightsIcon: Component<{ class: string }> = (props) => {
@@ -20,6 +18,8 @@ export const Hero: Component = () => {
const isRouter = useMatch(() => "/solid-router/*");
const isMeta = useMatch(() => "/solid-meta/*");
+ const i18n = { t: (s: string) => s };
+
const buttonHref = createMemo(() => {
if (isStart()) {
return "solid-start/getting-started";
@@ -33,15 +33,13 @@ export const Hero: Component = () => {
return "/quick-start";
});
- const i18n = useI18n();
-
return (
-
+
SolidStart
@@ -76,15 +74,15 @@ export const Hero: Component = () => {
-
-
+
+
-
-
+
+
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 000000000..74da4bae0
--- /dev/null
+++ b/osmium/src/ui/layout/main-header.tsx
@@ -0,0 +1,147 @@
+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 { useMatch } from "@solidjs/router";
+import { LanguageSelector } from "./language-selector";
+
+import { clientOnly } from "@solidjs/start";
+import { useCurrentProject, useRouteConfig } from "../../utils";
+import { useLocale } from "@kobalte/solidbase/client";
+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 Entry {
+ title: string;
+ path: string;
+ children?: Entry[];
+ mainNavExclude: boolean;
+ isTranslated?: boolean;
+}
+
+interface MainHeaderProps {}
+
+export function MainHeader(props: MainHeaderProps) {
+ const [isScrolled, setIsScrolled] = createSignal(false);
+
+ const config = useRouteConfig();
+ const locale = useLocale();
+
+ const project = useCurrentProject();
+
+ 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 000000000..853264a69
--- /dev/null
+++ b/osmium/src/ui/layout/main-navigation.tsx
@@ -0,0 +1,191 @@
+import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
+import { A, useBeforeLeave, useLocation, useMatch } from "@solidjs/router";
+import { Icon } from "solid-heroicons";
+import { chevronDown } from "solid-heroicons/solid";
+import { setIsOpen } from "./mobile-navigation";
+import { Dynamic } from "solid-js/web";
+import {
+ SidebarItem,
+ SidebarItemLink,
+ useLocale,
+ useSidebar,
+} from "@kobalte/solidbase/client";
+import { Collapsible } from "@kobalte/core/collapsible";
+import { Tabs } from "@kobalte/core/tabs";
+import { useRouteConfig, useSolidBaseContext } from "../../utils";
+
+interface Entry {
+ title: string;
+ path: string;
+ children?: Entry[];
+ mainNavExclude: boolean;
+ isTranslated?: boolean;
+ isDeprecated?: boolean;
+}
+
+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
+ );
+}
+
+interface NavigationProps {
+ sidebar: { prefix: string; items: SidebarItem[] };
+}
+interface NavigationItemProps {
+ prefix: string;
+ item: SidebarItem;
+ depth?: number;
+}
+
+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(() => {
+ const projects = useSolidBaseContext().config().themeConfig?.projects ?? [];
+ const projectNames = projects.map((p) => p.name.replaceAll(" ", ""));
+
+ return sidebar().items.filter(
+ (i) =>
+ !projectNames.includes(i.title.replaceAll(" ", "")) &&
+ (!("link" in i) || i.link !== "/")
+ );
+ });
+
+ createEffect(() => console.log(sidebar(), sidebarEntries()));
+
+ /**
+ * 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 89%
rename from src/ui/layout/mobile-navigation.tsx
rename to osmium/src/ui/layout/mobile-navigation.tsx
index e1714da87..3d65a31ba 100644
--- a/src/ui/layout/mobile-navigation.tsx
+++ b/osmium/src/ui/layout/mobile-navigation.tsx
@@ -12,16 +12,11 @@ interface Entry {
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 e8181b503..6b8509de0 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 (