Add v7/v6 docs separation

docs/src/components/LeftSidebar/LeftSidebar.astro

@@ -4,102 +4,258 @@ type Props = {
 };
 
 const { currentPage } = Astro.props;
-const currentPageMatch = currentPage.endsWith("/") ? currentPage.slice(1, -1) : currentPage.slice(1);
 
-interface Link {
-  url: string;
-  text: string;
+const base = Astro.site?.pathname ?? "/";
+
+const pathname = currentPage.endsWith("/")
+  ? currentPage.slice(0, -1)
+  : currentPage;
+
+function isCurrentPage(url: string) {
+  return `/${url}` === pathname ? "page" : undefined;
 }
 
-const sidebar: Record<string, Link[]> = {
-  "openapi-typescript": [
-    { text: "Introduction", url: "introduction" },
-    { text: "CLI", url: "cli" },
-    { text: "Node.js API", url: "node" },
-    { text: "Advanced", url: "advanced" },
-    { text: "About", url: "about" },
-  ],
-  "openapi-fetch": [
-    { text: "Introduction", url: "openapi-fetch" },
-    { text: "API", url: "openapi-fetch/api" },
-    { text: "Examples", url: "openapi-fetch/examples" },
-    { text: "About", url: "openapi-fetch/about" },
-  ],
+const v = pathname.includes("/v6") ? 6 : 7;
+
+const url = {
+  introduction: `${v === 6 ? "v6/" : ""}introduction`,
+  cli: `${v === 6 ? "v6/" : ""}cli`,
+  node: `${v === 6 ? "v6/" : ""}node`,
+  advanced: `${v === 6 ? "v6/" : ""}advanced`,
+  about: `${v === 6 ? "v6/" : ""}about`,
 };
 ---
 
 <nav aria-labelledby="grid-left">
   <ul class="nav-groups">
-    {
-      Object.entries(sidebar).map(([header, children]) => (
-        <li class="nav-group">
-          <h2 class="nav-group-title">{header}</h2>
-          <ul class="nav-group-subnav">
-            {children.map((child) => {
-              const url = Astro.site?.pathname + child.url;
-              return (
-                <li class="nav-link">
-                  <a class="link" href={url} aria-current={currentPageMatch === child.url ? "page" : false}>
-                    {child.text}
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
+    <li class="nav-group">
+      <h2 class="nav-group-title">openapi-typescript</h2>
+      <fieldset class="version-switcher">
+        <label
+          class="version"
+          for="v6"
+        >
+          <input
+            id="v6"
+            checked={v === 6 || undefined}
+            name="version"
+            type="radio"
+          />
+           v6
+        </label>
+        <label
+          class="version"
+          for="v7"
+        >
+          <input
+            id="v7"
+            checked={v === 7 || undefined}
+            name="version"
+            type="radio"
+          />
+           v7 (beta)</label
+        >
+      </fieldset>
+      <ul class="nav-group-subnav">
+        <li class="nav-link">
+          <a
+            class="link"
+            href={`${base}${url.introduction}`}
+            aria-current={isCurrentPage(url.introduction)}
+          >
+            Introduction
+          </a>
         </li>
-      ))
-    }
+        <li class="nav-link">
+          <a
+            class="link"
+            href={`${base}${url.cli}`}
+            aria-current={isCurrentPage(url.cli)}
+          >
+            CLI
+          </a>
+        </li>
+        <li class="nav-link">
+          <a
+            class="link"
+            href={`${base}${url.node}`}
+            aria-current={isCurrentPage(url.node)}
+          >
+            Node.js API
+          </a>
+        </li>
+        <li class="nav-link">
+          <a
+            class="link"
+            href={`${base}${url.advanced}`}
+            aria-current={isCurrentPage(url.advanced)}
+          >
+            Advanced
+          </a>
+        </li>
+        <li class="nav-link">
+          <a
+            class="link"
+            href={`${base}migration-guide`}
+            aria-current={isCurrentPage("/migration-guide")}
+          >
+            Migrating
+          </a>
+        </li>
+        <li class="nav-link">
+          <a
+            class="link"
+            href={`${base}${url.about}`}
+            aria-current={isCurrentPage(url.about)}
+          >
+            About
+          </a>
+        </li>
+      </ul>
+    </li>
+    <li class="nav-group">
+      <h2 class="nav-group-title">openapi-fetch</h2>
+      <ul class="nav-group-subnav">
+        <li class="nav-link">
+          <a
+            class="link"
+            href={`${base}openapi-fetch`}
+            aria-current={isCurrentPage("/openapi-fetch")}
+          >
+            Introduction
+          </a>
+        </li>
+        <li class="nav-link">
+          <a
+            class="link"
+            href={`${base}openapi-fetch/api`}
+            aria-current={isCurrentPage("/openapi-fetch/api")}
+          >
+            API
+          </a>
+        </li>
+        <li class="nav-link">
+          <a
+            class="link"
+            href={`${base}openapi-fetch/examples`}
+            aria-current={isCurrentPage("/openapi-fetch/examples")}
+          >
+            Examples
+          </a>
+        </li>
+        <li class="nav-link">
+          <a
+            class="link"
+            href={`${base}openapi-fetch/about`}
+            aria-current={isCurrentPage("/openapi-fetch/about")}
+          >
+            About
+          </a>
+        </li>
+      </ul>
+    </li>
   </ul>
-</nav>
 
-<script is:inline>
-window.addEventListener("DOMContentLoaded", () => {
-  var target = document.querySelector('[aria-current="page"]');
-  if (target && target.offsetTop > window.innerHeight - 100) {
-    document.querySelector(".nav-groups").scrollTop = target.offsetTop;
-  }
-});
-</script>
-
-<style lang="scss">
-  @use '../../tokens' as *;
-
-  nav {
-    padding-top: 1rem;
-    width: 100%;
-  }
-
-  .nav-groups {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    height: 100%;
-    margin: 0;
-    max-height: 100vh;
-    overflow-y: auto;
-    padding: 0;
-
-    @media (min-width: 50em) {
+  <script is:inline>
+    window.addEventListener("DOMContentLoaded", () => {
+      var target = document.querySelector('[aria-current="page"]');
+      if (target && target.offsetTop > window.innerHeight - 100) {
+        document.querySelector(".nav-groups").scrollTop = target.offsetTop;
+      }
+    });
+
+    document.getElementById("v6").addEventListener("change", (evt) => {
+      if (window.location.pathname === "/migration-guide") {
+        return; // no /v6 version
+      }
+      if (evt.target.checked) {
+        window.location.href = "/v6" + window.location.pathname;
+      }
+    });
+
+    document.getElementById("v7").addEventListener("change", (evt) => {
+      if (evt.target.checked) {
+        window.location.href = window.location.pathname.replace("/v6/", "/");
+      }
+    });
+  </script>
+
+  <style lang="scss">
+    @use "../../tokens" as *;
+    @use "../../styles/util" as *;
+
+    nav {
+      padding-top: 1rem;
+      width: 100%;
+    }
+
+    .nav-groups {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      height: 100%;
+      margin: 0;
+      max-height: 100vh;
+      overflow-y: auto;
       padding: 0;
+
+      @media (min-width: 50em) {
+        padding: 0;
+      }
     }
-  }
 
-  .nav-link {
-    margin: 0;
-  }
+    .nav-link {
+      margin: 0;
+    }
 
-  .nav-group {
-    margin-top: 1rem;
+    .nav-group {
+      margin-top: 1rem;
 
-    &:first-of-type {
-      margin-top: 0;
+      &:first-of-type {
+        margin-top: 0;
+      }
     }
-  }
 
-  .nav-group-subnav {
-    margin-top: 0.5rem;
-  }
+    .nav-group-subnav {
+      margin-top: 0.5rem;
+    }
 
+    .nav-group-title {
+      align-items: center;
+      display: flex;
+      gap: 0.5rem;
+      white-space: nowrap;
+    }
 
-</style>
+    .version {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      font-size: 0.875rem;
+      gap: 0.25rem;
 
+      input,
+      label {
+        cursor: pointer;
+      }
+
+      &:hover,
+      &:focus-within {
+        background-color: token("color.blue.95");
+
+        @include darkMode {
+          background-color: token("color.blue.25");
+        }
+      }
+    }
+
+    .version-switcher {
+      align-items: center;
+      border: none;
+      display: flex;
+      gap: 0.5rem;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</nav>

docs/src/content/docs/about.md

@@ -18,6 +18,7 @@ description: Additional info about this project
 - [**Relevance AI**](https://github.com/RelevanceAI/relevance-js-sdk): build and deploy AI chains
 - [**Revolt**](https://github.com/revoltchat/api): open source user-first chat platform
 - [**Spacebar**](https://github.com/spacebarchat): a free, open source, self-hostable Discord-compatible chat/voice/video platform
+- [\*\*Supabase](https://github.com/supabase/supabase): The open source Firebase alternative.
 - [**Twitter API**](https://github.com/twitterdev/twitter-api-typescript-sdk): Official SDK for the Twitter API
 
 ## Project goals

docs/src/content/docs/introduction.md

@@ -27,7 +27,7 @@ _Note: OpenAPI 2.x is supported with versions `5.x` and previous_
 This library requires the latest version of <a href="https://nodejs.org/en" target="_blank" rel="noopener noreferrer">Node.js</a> installed (20.x or higher recommended). With that present, run the following in your project:
 
 ```bash
-npm i -D openapi-typescript
+npm i -D openapi-typescript@next
 ```
 
 > **Highly recommended**: enable [noUncheckedIndexedAccess](https://www.typescriptlang.org/tsconfig#noUncheckedIndexedAccess) in your `tsconfig.json` ([docs](/advanced#enable-nouncheckedindexaccess-in-your-tsconfigjson))

docs/src/content/docs/migration-guide.md

@@ -0,0 +1,35 @@
+---
+title: Migration Guide
+description: Migrating between openapi-typescript versions
+---
+
+## v6 → v7
+
+The v7 release only has a few minor breaking changes to be aware of:
+
+### TypeScript AST
+
+v7 introduces the TypeScript AST rather than simple string transformations. This applies to the core Node.js API, which now returns a TypeScript AST, as well as the options `transform()` and `postTransform()`. [The Node.js API docs have been updated with relevant examples to help](./node).
+
+### Globbing replaced with Redocly config
+
+v7 can still generate multiple schemas at once, but rather than globbing, a `redocly.config.yaml` file must be created instead that lists out every input schema, and where the output types should be saved. [See the updated docs for more info](./cli#redoc-config).
+
+### Node.js API input types
+
+Input types were made more predictable in v7. Inputting a partial filepath as a string was removed because it was somewhat nondeterministic—it would either succeed or fail based on where the Node.js API was called from. Now, to load a schema from a filepath or remote URL, use a proper `URL` like so:
+
+```diff
+- openapiTS('./path/to/schema.json');
++ openapiTS(new URL('./path/to/schema.json', import.meta.url'));
+```
+
+_Note: `import.meta.url` is only needed for local files; you can simply point to a URL for remote schemas_
+
+This is more predictable, and works in more environments.
+
+In addition, the `string` input is now more robust. v6 didn’t support inputting a full YAML spec as a string, but v7 can handle a dynamic YAML and/or JSON string just fine (JSON in object form is still accepted, too).
+
+[See the updated docs for more info](./node#usage).
+
+[See the full CHANGELOG](https://github.com/drwpow/openapi-typescript/blob/6.x/packages/openapi-typescript/CHANGELOG.md)

docs/src/content/docs/node.md

@@ -8,7 +8,7 @@ The Node API may be useful if dealing with dynamically-created schemas, or you
 ## Setup
 
 ```bash
-npm i --save-dev openapi-typescript
+npm i --save-dev openapi-typescript@next
 ```
 
 > **Recommended**: For the best experience, use Node ESM by adding `"type": "module"` to `package.json` ([docs](https://nodejs.org/api/esm.html#enabling))