diff --git a/.gitignore b/.gitignore index 0956b154..34a09ff9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ - node_modules build dist @@ -24,6 +23,13 @@ lerna-debug.log # solid .solid .vinxi +.netlify +.output + +# kobalte dev +packages/core/dev/App.tsx +packages/core/dev/index.css +packages/core/NOTICE.txt # VSC Settings .vscode/settings.json diff --git a/.husky/commit-msg b/.husky/commit-msg deleted file mode 100755 index e8511eae..00000000 --- a/.husky/commit-msg +++ /dev/null @@ -1,4 +0,0 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -npx --no-install commitlint --edit $1 diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100755 index 36af2198..00000000 --- a/.husky/pre-commit +++ /dev/null @@ -1,4 +0,0 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -npx lint-staged diff --git a/.prettierignore b/.prettierignore index 98477740..807d8220 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,4 +4,4 @@ *.tsx *.json *.cjs -pnpm-lock.json \ No newline at end of file +pnpm-lock.yaml \ No newline at end of file diff --git a/NOTICE.txt b/NOTICE.txt index f225b7d9..a500894c 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -229,3 +229,11 @@ This codebase contains a modified portion of code from the TC39 Temporal proposa LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + +------------------------------------------------------------------------------- +This codebase contains a modified portion of code from Corvu which can be obtained at: + * SOURCE: + * https://github.com/corvudev/corvu/blob/main/packages/corvu/ + + * LICENSE: + * https://github.com/corvudev/corvu/blob/main/LICENSE \ No newline at end of file diff --git a/apps/docs/package.json b/apps/docs/package.json index 146cd52d..c0c3ea8b 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -1,71 +1,72 @@ { - "name": "@kobalte/docs", - "private": true, - "description": "Documentation website of Kobalte.", - "keywords": [ - "solid", - "solidjs", - "ui", - "library", - "design-system", - "components", - "headless", - "unstyled", - "aria" - ], - "homepage": "https://github.com/kobaltedev/kobalte/tree/main/apps/docs#readme", - "bugs": { - "url": "https://github.com/kobaltedev/kobalte/issues" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/kobaltedev/kobalte.git" - }, - "license": "MIT", - "author": "Fabien Marie-Louise ", - "type": "module", - "scripts": { - "build": "vinxi build", - "clean": "rm -rf .solid && rm -rf netlify && rm -rf .turbo && rm -rf node_modules && rm -rf dist", - "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.29.3", - "@solidjs/router": "0.10.6", - "@tanstack/solid-virtual": "3.0.0-beta.6", - "clsx": "2.0.0", - "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": "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.12.3", - "remark-shiki-twoslash": "3.1.3", - "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": "5.0.12", - "@vinxi/plugin-mdx": "3.7.1" - }, - "engines": { - "node": ">=18" - } + "name": "@kobalte/docs", + "private": true, + "description": "Documentation website of Kobalte.", + "keywords": [ + "solid", + "solidjs", + "ui", + "library", + "design-system", + "components", + "headless", + "unstyled", + "aria" + ], + "homepage": "https://github.com/kobaltedev/kobalte/tree/main/apps/docs#readme", + "bugs": { + "url": "https://github.com/kobaltedev/kobalte/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/kobaltedev/kobalte.git" + }, + "license": "MIT", + "author": "Fabien Marie-Louise ", + "type": "module", + "scripts": { + "build": "NODE_OPTIONS=\"--max-old-space-size=8192\" vinxi build", + "build:dev": "NODE_OPTIONS=\"--max-old-space-size=8192\" DEVELOPMENT=1 vinxi build", + "clean": "rm -rf .solid && rm -rf netlify && rm -rf .turbo && rm -rf node_modules && rm -rf dist", + "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.29.3", + "@solidjs/router": "0.12.4", + "@tanstack/solid-virtual": "3.0.0-beta.6", + "clsx": "2.0.0", + "solid-js": "1.8.15", + "@solidjs/start": "0.5.10", + "vinxi": "0.3.3", + "undici": "5.23.0" + }, + "devDependencies": { + "@kobalte/tailwindcss": "0.9.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.12.3", + "remark-shiki-twoslash": "3.1.3", + "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": "5.1.4", + "@vinxi/plugin-mdx": "3.7.1" + }, + "engines": { + "node": ">=18" + } } diff --git a/apps/docs/src/app.tsx b/apps/docs/src/app.tsx index 4ac4e18f..a5c68d3a 100644 --- a/apps/docs/src/app.tsx +++ b/apps/docs/src/app.tsx @@ -19,22 +19,22 @@ import { getCookie } from "vinxi/server"; import toastStyles from "./examples/toast.module.css"; import { mdxComponents } from "./mdx-components"; -export const mods = /*#__PURE__*/ import.meta.glob< - true, - string, - { - getHeadings: () => { - depth: number; - text: string; - slug: string; - }[]; - } ->("./routes/docs/**/*.{md,mdx}", { - eager: true, - query: { - meta: "", - }, -}); +//export const mods = /*#__PURE__*/ import.meta.glob< +// true, +// string, +// { +// getHeadings: () => { +// depth: number; +// text: string; +// slug: string; +// }[]; +// } +//>("./routes/docs/**/*.{md,mdx}", { +// eager: true, +// query: { +// meta: "", +// }, +//}); function getServerCookies() { "use server"; @@ -52,28 +52,26 @@ export default function App() { return ( ( - - - Kobalte - - - - {props.children} + + Kobalte + + + + {props.children} - - - - - - - - - - - - + + + + + + + + + + + )} > diff --git a/apps/docs/src/components/table-of-contents.tsx b/apps/docs/src/components/table-of-contents.tsx index 33f1478c..b3426769 100644 --- a/apps/docs/src/components/table-of-contents.tsx +++ b/apps/docs/src/components/table-of-contents.tsx @@ -6,8 +6,10 @@ import { Suspense, createEffect, createSignal, + on, onCleanup, } from "solid-js"; +import { isServer } from "solid-js/web"; import { mods } from "../app"; interface TocItem { @@ -79,22 +81,74 @@ function useCurrentSection(tableOfContents: Accessor) { return currentSection; } -const getTOC = cache(async (pathname: string) => { - "use server"; - - const mod = mods[`./routes${pathname}.mdx`] ?? mods[`./routes${pathname}.md`]; - return !mod - ? [] - : mod.getHeadings().filter((h) => h.depth > 1 && h.depth <= 3); -}, "toc"); +//const getTOC = cache(async (pathname: string) => { +// "use server"; +// +// const mod = mods[`./routes${pathname}.mdx`] ?? mods[`./routes${pathname}.md`]; +// return !mod +// ? [] +// : mod.getHeadings().filter((h) => h.depth > 1 && h.depth <= 3); +//}, "toc"); + +function updateHeadings(setter: Setter) { + if (document.getElementsByTagName("article").length === 0) { + setTimeout(() => updateHeadings(setter), 1); + return; + } + + console.log("update"); + + setter( + [ + ...document + .getElementsByTagName("article")[0] + .querySelectorAll("h1, h2, h3, h4, h5, h6"), + ].map((element) => ({ + depth: Number(element.tagName.substr(1)), + text: element.textContent!, + slug: element.id, + })), + ); +} export function TableOfContents() { const path = useLocation(); - const toc = createAsync(() => getTOC(path.pathname)); + // const toc = createAsync(() => getTOC(path.pathname)); + + const [toc, setToc] = createSignal([]); + + createEffect( + on( + () => path.pathname, + (pathname) => { + if (isServer) return; + + updateHeadings(setToc); + }, + ), + ); const currentSection = useCurrentSection(toc); + createEffect( + on( + () => currentSection(), + (currentSection) => { + if (isServer) return; + + const element = document.querySelector( + `a[data-toc-slug="${currentSection}"]`, + ); + + element?.scrollIntoView({ + behavior: "smooth", + block: "nearest", + }); + }, + ), + ); + return (