feat: markdown list and parse apis

example/nextjs/.gitignore → examples/nextjs/.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+/docs

example/nextjs/package.json → examples/nextjs/package.json

@@ -10,20 +10,20 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@raystack/chronicle": "^0.0.1",
-    "@types/node": "20.3.3",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
+    "@raystack/chronicle": "workspace:^",
+    "@types/node": "20.4.4",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
-    "eslint": "8.44.0",
-    "eslint-config-next": "13.4.8",
+    "eslint": "8.45.0",
+    "eslint-config-next": "13.4.12",
     "module-from-string": "^3.3.0",
-    "next": "13.4.8",
+    "next": "13.4.12",
     "openapi-types": "^12.1.3",
-    "postcss": "8.4.24",
+    "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.3.2",
+    "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   }
 }

example/nextjs/pages/_app.tsx → examples/nextjs/pages/_app.tsx

@@ -1,6 +1,6 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
-import "@raystack/chronicle/dist/client/style.css";
+import "@raystack/chronicle/client/style.css";
 
 export default function App({ Component, pageProps }: AppProps) {
     return <Component {...pageProps} />;

examples/nextjs/pages/docs/[...slug].tsx

@@ -0,0 +1,47 @@
+import { Navbar } from "@raystack/chronicle/client";
+import Chronicle from "@raystack/chronicle/node";
+import { FileContent } from "@raystack/chronicle/types";
+
+interface DocPageProps {
+    data: FileContent;
+}
+
+export default function DocPage({ data }: DocPageProps) {
+    return (
+        <div className="flex flex-col">
+            <Navbar.Root logo="Chronicle" className="fixed w-screen bg-black border-b border-white" />
+            <main className={`p-24`}>
+                <div dangerouslySetInnerHTML={{ __html: data.content }} />
+            </main>
+        </div>
+    );
+}
+
+function slugifyFilePaths(paths: string[]) {
+    paths.shift();
+    const fileName = paths.pop() || "";
+    const [name] = fileName?.split(".");
+    return [...paths, name];
+}
+
+export const getStaticPaths = async () => {
+    const chronicle = await Chronicle.initialize({});
+    const files = await chronicle.list();
+    const paths = files.map((doc) => ({
+        params: {
+            slug: slugifyFilePaths(doc.slug),
+        },
+    }));
+    return {
+        paths: paths,
+        fallback: false,
+    };
+};
+
+export const getStaticProps = async ({ params: { slug } }: { params: { slug: string[] } }) => {
+    const chronicle = await Chronicle.initialize({});
+    const data = await chronicle.read(slug);
+    return {
+        props: { data },
+    };
+};

examples/nextjs/pages/docs/index.tsx

@@ -0,0 +1,34 @@
+import Chronicle from "@raystack/chronicle/node";
+import { Navbar } from "@raystack/chronicle/client";
+import { RepoSourceConfig } from "@raystack/chronicle/types";
+import Link from "next/link";
+
+function getRepoIndexLink(repo: RepoSourceConfig) {
+    const [fileName, ext] = repo.config.indexPage.split(".");
+    return `/docs/${repo.name}/${fileName}`;
+}
+
+export const getStaticProps = async () => {
+    const chronicle = await Chronicle.initialize({});
+    const repos = await chronicle.listRepos();
+    return { props: { repos } };
+};
+
+interface DocsListPageProps {
+    repos: RepoSourceConfig[];
+}
+
+export default function DocsListPage({ repos }: DocsListPageProps) {
+    return (
+        <div className="flex flex-col">
+            <Navbar.Root logo="Chronicle" className="fixed w-screen bg-black border-b border-white" />
+            <main className={`p-24`}>
+                {repos.map((repo) => (
+                    <Link key={repo.name} href={getRepoIndexLink(repo)}>
+                        {repo.name}
+                    </Link>
+                ))}
+            </main>
+        </div>
+    );
+}

example/nextjs/pages/index.tsx → examples/nextjs/pages/index.tsx

@@ -1,24 +1,12 @@
-import { OpenApi, Sidebar, Navbar, Toc, utils } from "@raystack/chronicle/client";
-import { readApiYaml } from "../utils/index";
+import { Navbar } from "@raystack/chronicle/client";
 import { Inter } from "next/font/google";
 import { SidebarConfig, readSidebarConfig } from "@/utils/sidebar";
 import Link from "next/link";
 import { OpenAPIV3 } from "openapi-types";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export const getStaticProps = async () => {
-    const file = await readApiYaml();
-    const sidebarConfig = await readSidebarConfig();
-    const schema = await utils.parseSchema(file, "yaml");
-    return { props: { schema, sidebarConfig } };
-};
-
 export default function Home({ schema, sidebarConfig }: { schema: OpenAPIV3.Document; sidebarConfig: SidebarConfig }) {
-    const headingsLink = utils.getApiPaths(schema).map((path) => ({
-        label: path.data.summary || path.data.description || "",
-        href: "#" + path.key,
-    }));
     return (
         <div className="flex flex-col">
             <Navbar.Root
@@ -33,7 +21,7 @@ export default function Home({ schema, sidebarConfig }: { schema: OpenAPIV3.Docu
                     </Link>,
                 ]}
                 rightActionItems={[
-                    <Link href={"#"} key="docs">
+                    <Link href={"/docs"} key="docs">
                         Docs
                     </Link>,
                     <Link href={"#"} key="blogs">
@@ -42,13 +30,7 @@ export default function Home({ schema, sidebarConfig }: { schema: OpenAPIV3.Docu
                 ]}
             />
             <div className="mt-[48px]">
-                <Sidebar.Root items={sidebarConfig.items} className="h-screen border-white border-r fixed" />
-                <main className={`p-24 ${inter.className} mx-[280px] w-[calc(100vw_-_560px)]`}>
-                    <OpenApi.Root schema={schema} />
-                </main>
-                <aside className="h-screen border-white border-l fixed right-0 top-[48px] p-4">
-                    <Toc.Root items={headingsLink} className="w-[240px]" />
-                </aside>
+                <h2>Chronicle</h2>
             </div>
         </div>
     );

example/nextjs/tsconfig.json → examples/nextjs/tsconfig.json

@@ -9,7 +9,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "nodenext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",