Skip to content

Commit 4dcd4c5

Browse files
jer3m01jer3m01
committed
wip
1 parent ebe4da7 commit 4dcd4c5

File tree

138 files changed

+206
-317
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

138 files changed

+206
-317
lines changed

‎osmium/src/ui/docs-layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const DocsLayout = (props: DocsLayoutProps) => {
4646
</span>
4747
<div class="w-full px-1">{props.children}</div>
4848
<Show when={frontmatter()?.lastUpdated}>
49-
<span class="text-sm">
49+
<span class="mt-2 block w-full text-right text-sm">
5050
Last updated:{" "}
5151
<Show when={!Number.isNaN(pageData()?.lastUpdated)} fallback="?">
5252
{formatter().format(date())}

‎osmium/src/ui/layout/main-navigation.tsx‎

Lines changed: 80 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
1-
import { createEffect, createSignal, For, Show } from "solid-js";
1+
import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
22
import { A, useBeforeLeave, useLocation, useMatch } from "@solidjs/router";
33
import { Icon } from "solid-heroicons";
44
import { chevronDown } from "solid-heroicons/solid";
55
import { setIsOpen } from "./mobile-navigation";
66
import { Dynamic } from "solid-js/web";
7-
import { SidebarItem, useSidebar } from "@kobalte/solidbase/client";
7+
import {
8+
SidebarItem,
9+
SidebarItemLink,
10+
useLocale,
11+
useSidebar,
12+
} from "@kobalte/solidbase/client";
813
import { Collapsible } from "@kobalte/core/collapsible";
914
import { Tabs } from "@kobalte/core/tabs";
15+
import { useRouteConfig, useSolidBaseContext } from "../../utils";
1016

1117
interface Entry {
1218
title: string;
@@ -19,94 +25,67 @@ interface Entry {
1925

2026
interface MainNavigationProps {}
2127

22-
function ListItemLink(props: { item: Entry }) {
28+
function ListItemLink(props: { item: SidebarItemLink; prefix?: string }) {
2329
const location = useLocation();
30+
const locale = useLocale();
31+
2432
const linkStyles = () =>
25-
location.pathname === props.item.path.replace(/\\/g, "/")
33+
location.pathname === props.item.link.replace(/\\/g, "/")
2634
? "font-semibold text-blue-700 before:bg-blue-700 dark:before:bg-blue-200 dark:text-blue-300 before:block"
2735
: "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 ";
2836
return (
29-
<Show when={!props.item.mainNavExclude}>
30-
<li class="relative">
31-
<Dynamic
32-
component={props.item.isTranslated ? A : "a"}
33-
onClick={() => setIsOpen(false)}
34-
href={props.item.path}
35-
class={`block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 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()}`}
36-
>
37-
{props.item.title}
38-
<Show when={props.item.isDeprecated}> (deprecated)</Show>
39-
<Show when={!props.item.isTranslated}>
40-
<span>
41-
<abbr
42-
title="english"
43-
class="relative -top-2 left-2 text-[0.7em] text-neutral-400 no-underline"
44-
>
45-
EN
46-
</abbr>
47-
</span>
48-
</Show>
49-
</Dynamic>
50-
</li>
51-
</Show>
37+
<li class="relative">
38+
<a
39+
onClick={() => setIsOpen(false)}
40+
href={locale.applyPathPrefix(
41+
`${props.prefix === "/" ? "" : (props.prefix ?? "")}${props.item.link === "/" ? "" : props.item.link}`
42+
)}
43+
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()}`}
44+
>
45+
{props.item.title}
46+
</a>
47+
</li>
5248
);
5349
}
5450

55-
function DirList(props: { list: Entry[]; sortAlphabeticaly?: boolean }) {
51+
function DirList(props: { items: SidebarItem[] }) {
5652
return (
57-
<For each={props.list}>
58-
{(item) => {
59-
if (Array.isArray(item.children)) {
53+
<For each={props.items}>
54+
{(child) => {
55+
if ("items" in child) {
6056
return (
61-
<li>
62-
<span class="font-semibold text-slate-800 dark:text-slate-100">
63-
{item.title}
64-
</span>
65-
<ul
66-
role="list"
67-
class="ml-2 mt-2 space-y-3 border-l border-slate-400 lg:border-slate-400 dark:border-slate-700"
68-
>
69-
<For each={item.children}>
70-
{(child) => {
71-
return Array.isArray(child.children) ? (
72-
<>
73-
<li>
74-
<Collapsible defaultOpen={true}>
75-
<Collapsible.Trigger class="group relative flex w-full justify-between pl-3.5 hover:cursor-pointer dark:text-slate-300">
76-
<span class="font-semibold dark:text-slate-100">
77-
{child.title}
78-
</span>
79-
<Icon
80-
aria-hidden="true"
81-
path={chevronDown}
82-
class="my-auto h-4 transition-transform kb-group-closed:rotate-180"
83-
/>
84-
</Collapsible.Trigger>
85-
<Collapsible.Content class="navigation_collapsible">
86-
<ul
87-
role="list"
88-
class="ml-4 mt-3 space-y-3 border-l border-slate-400 dark:border-slate-700 dark:lg:border-slate-700"
89-
>
90-
<DirList
91-
sortAlphabeticaly={props.sortAlphabeticaly}
92-
list={child.children}
93-
/>
94-
</ul>
95-
</Collapsible.Content>
96-
</Collapsible>
97-
</li>
98-
</>
99-
) : (
100-
<ListItemLink item={child} />
101-
);
102-
}}
103-
</For>
104-
</ul>
105-
</li>
57+
<>
58+
<li>
59+
<Collapsible defaultOpen={true}>
60+
<Collapsible.Trigger class="group relative flex w-full justify-between pl-3.5 hover:cursor-pointer dark:text-slate-300">
61+
<span class="font-semibold dark:text-slate-100">
62+
{child.title}
63+
</span>
64+
<Icon
65+
aria-hidden="true"
66+
path={chevronDown}
67+
class="kb-group-closed:rotate-180 my-auto h-4 transition-transform"
68+
/>
69+
</Collapsible.Trigger>
70+
<Collapsible.Content class="navigation_collapsible">
71+
<ul
72+
role="list"
73+
class="mt-3 ml-4 space-y-3 border-l border-slate-400 dark:border-slate-700 dark:lg:border-slate-700"
74+
>
75+
<DirList items={child.items} />
76+
</ul>
77+
</Collapsible.Content>
78+
</Collapsible>
79+
</li>
80+
</>
10681
);
107-
} else {
108-
return <ListItemLink item={item} />;
10982
}
83+
84+
if ("link" in child) {
85+
return <ListItemLink item={child} />;
86+
}
87+
88+
return "";
11089
}}
11190
</For>
11291
);
@@ -122,17 +101,26 @@ interface NavigationItemProps {
122101
}
123102

124103
export function MainNavigation(props: MainNavigationProps) {
125-
const isReference = useMatch(() => "/:project?/reference/*?", {
126-
project: ["solid-router", "solid-meta", "solid-start"],
127-
});
104+
const isReference = useMatch(() => "*/reference/*?");
128105

129106
const initialTab = () => (isReference() ? "reference" : "learn");
130107

131108
const [selectedTab, setSelectedTab] = createSignal(initialTab());
132109

133110
const sidebar = useSidebar();
134111

135-
createEffect(() => console.log(sidebar()));
112+
const sidebarEntries = createMemo(() => {
113+
const projects = useSolidBaseContext().config().themeConfig?.projects ?? [];
114+
const projectNames = projects.map((p) => p.name.replaceAll(" ", ""));
115+
116+
return sidebar().items.filter(
117+
(i) =>
118+
!projectNames.includes(i.title.replaceAll(" ", "")) &&
119+
(!("link" in i) || i.link !== "/")
120+
);
121+
});
122+
123+
createEffect(() => console.log(sidebar(), sidebarEntries()));
136124

137125
/**
138126
* Re-syncs the selected tab with the chosen route.
@@ -142,7 +130,7 @@ export function MainNavigation(props: MainNavigationProps) {
142130

143131
if (to.includes("/reference/")) {
144132
setSelectedTab("reference");
145-
} else if (to.includes("/learn/")) {
133+
} else {
146134
setSelectedTab("learn");
147135
}
148136
});
@@ -169,15 +157,17 @@ export function MainNavigation(props: MainNavigationProps) {
169157
>
170158
Reference
171159
</Tabs.Trigger>
172-
<Tabs.Indicator class="duration-250 absolute bottom-0 h-[2px] bg-blue-500 transition-all dark:bg-blue-500" />
160+
<Tabs.Indicator class="absolute bottom-0 h-[2px] bg-blue-500 transition-all duration-250 dark:bg-blue-500" />
173161
</Tabs.List>
174162
<Tabs.Content value="learn" class="relative mt-5 w-full">
175163
<Show
176164
when={true}
177165
fallback={<p class="text-white">No routes found</p>}
178166
>
179167
<ul role="list" class="space-y-3 px-4">
180-
<DirList list={[]} />
168+
<DirList
169+
items={sidebarEntries().filter((e) => e.title !== "Reference")}
170+
/>
181171
</ul>
182172
</Show>
183173
</Tabs.Content>
@@ -187,7 +177,11 @@ export function MainNavigation(props: MainNavigationProps) {
187177
fallback={<p class="text-white">No routes found</p>}
188178
>
189179
<ul role="list" class="space-y-3 px-4">
190-
<DirList list={[]} />
180+
<DirList
181+
items={sidebarEntries().flatMap((e) =>
182+
e.title === "Reference" && "items" in e ? e.items : []
183+
)}
184+
/>
191185
</ul>
192186
</Show>
193187
</Tabs.Content>

‎osmium/src/ui/layout/table-of-contents.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,8 @@ export const TableOfContents = () => {
5151
<span class="text-base font-semibold text-slate-900 dark:text-white">
5252
On this page
5353
</span>
54-
<ol
55-
role="list"
56-
class="mt-2 flex list-none flex-col space-y-2 p-0 pl-2.5 text-sm"
57-
>
58-
<li class="mb-0 mt-0 pl-0">
54+
<ol role="list" class="mt-2 flex list-none flex-col p-0 pl-2.5 text-sm">
55+
<li class="not-prose mt-0 mb-0 pl-0">
5956
<span>
6057
<a
6158
href="#_top"
@@ -64,15 +61,15 @@ export const TableOfContents = () => {
6461
"text-blue-800 dark:text-blue-300 font-bold hover:text-slate-700 dark:hover:text-slate-200":
6562
currentSection() === undefined,
6663
}}
67-
class="no-underline hover:text-slate-700 dark:hover:text-blue-300"
64+
class="not-prose no-underline hover:text-slate-700 dark:hover:text-blue-300"
6865
>
6966
Overview
7067
</a>
7168
</span>
7269
</li>
7370
<Index each={toc()}>
7471
{(section) => (
75-
<li class="space-y-2 pl-0 pt-0">
72+
<li class="not-prose mt-2 pt-0 pl-0">
7673
<span>
7774
<a
7875
href={section().href}
@@ -81,15 +78,15 @@ export const TableOfContents = () => {
8178
"text-blue-800 dark:text-blue-200 hover:text-slate-700 dark:hover:text-slate-200 font-bold":
8279
currentSection() === section().href,
8380
}}
84-
class="no-underline hover:text-slate-700 dark:hover:text-blue-300"
81+
class="not-prose no-underline hover:text-slate-700 dark:hover:text-blue-300"
8582
>
8683
{section().title}
8784
</a>
8885
</span>
8986
<Show when={section().children.length !== 0}>
9087
<ol
9188
role="list"
92-
class="list-none space-y-2 pl-2.5 font-bold text-slate-500 hover:text-slate-700 active:font-bold active:text-blue-600 dark:text-slate-300 dark:hover:text-blue-200"
89+
class="mt-2 list-none pl-2.5 font-bold text-slate-500 hover:text-slate-700 active:font-bold active:text-blue-600 dark:text-slate-300 dark:hover:text-blue-200"
9390
>
9491
<Index each={section().children}>
9592
{(subSection) => (
@@ -102,7 +99,7 @@ export const TableOfContents = () => {
10299
"text-blue-800 dark:text-blue-200 hover:text-slate-700 dark:hover:text-slate-200 font-bold":
103100
currentSection() === subSection().href,
104101
}}
105-
class="no-underline hover:text-blue-700 dark:hover:text-blue-300"
102+
class="not-prose no-underline hover:text-blue-700 dark:hover:text-blue-300"
106103
>
107104
{subSection().title}
108105
</a>

‎osmium/src/utils.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ export function useCurrentProject() {
3333

3434
return createMemo(() => {
3535
for (const project of projects().filter((p) => p.path !== "/")) {
36-
if (location.pathname.includes(`/${project}/`)) {
36+
if (
37+
location.pathname.includes(`${project.path}/`) ||
38+
location.pathname.endsWith(project.path)
39+
) {
3740
return project;
3841
}
3942
}

‎src/routes/advanced-concepts/data.json‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/routes/advanced-concepts/fine-grained-reactivity.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Fine-grained reactivity
3+
category: Advanced Concepts
34
use_cases: >-
45
optimizing performance, reducing re-renders, understanding solid fundamentals,
56
building efficient apps, custom reactive systems

‎src/routes/concepts/components/basics.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Basics
3+
category: Concepts / Components
34
order: 4
45
use_cases: >-
56
starting new projects, creating components, understanding component structure,

‎src/routes/concepts/components/class-style.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Class and style
3+
category: Concepts / Components
34
order: 2
45
use_cases: >-
56
styling components, dynamic theming, conditional styling, css integration,

‎src/routes/concepts/components/data.json‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/routes/concepts/components/event-handlers.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Event handlers
3+
category: Concepts / Components
34
order: 3
45
use_cases: >-
56
user interactions, click handling, form inputs, keyboard events, custom

0 commit comments

Comments
 (0)