feat(docs): migrate sdk guides kg (#64)

Co-authored-by: Kapil Gowru <[email protected]>
Co-authored-by: Kapil Gowru <[email protected]>

Author: 3 people

fern/assets/styles.css

@@ -6,6 +6,10 @@
   appearance: none;
 }
 
+#builtwithfern {
+  display: none !important;
+}
+
 .motivation p {
   max-width: unset !important;
 }
@@ -283,11 +287,10 @@
     left: -24px;
     top: 0;
     height: 100%;
-    width: 1.5rem;
+    width: 1rem;
     opacity: 1;
     pointer-events: none;
     border-right: 1px solid var(--grayscale-5);
-    border-left: 1px solid var(--grayscale-5);
     mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
     -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
   }
@@ -297,21 +300,10 @@
     right: -24px;
     top: 0;
     height: 100%;
-    width: 1.5rem;
+    width: 1rem;
     opacity: 1;
     pointer-events: none;
     border-right: 1px solid var(--grayscale-5);
-    border-left: 1px solid var(--grayscale-5);
-    mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
-    -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
-  }
-
-  .dashed-gradient {
-    height: 100%;
-    width: 100%;
-    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_351_76922)"><rect width="100" height="100" fill="transparent"/><path d="M0 100L100 -7.07537e-07" stroke="%23E0E1E6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_351_76922"><rect width="100" height="100" fill="white"/></clipPath></defs></svg>');
-    background-repeat: repeat;
-    background-size: 12px 12px;
     mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
     -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
   }

fern/footer-dist/output.js

@@ -384,7 +384,7 @@ paths:
                 client.users.get("user-1234")
 ```
 
-If you're on the Fern Starter plan or higher for SDKs you won't have to worry about manually adding code samples! Our generators do that for you.
+If you're on the Fern Basic plan or higher for SDKs you won't have to worry about manually adding code samples! Our generators do that for you.
 
 ## Availability
 

fern/products/api-definition/pages/openapi/extensions/others.mdx

@@ -12,7 +12,7 @@ navigation:
       - page: Setting up your domain
         path: ./pages/getting-started/setting-up-your-domain.mdx
       - link: Customer Showcase
-        href: https://buildwithfern.com/docs/getting-started/customers
+        href: https://buildwithfern.com/customers
   - section: Component Library
     contents:
       - section: Writing Content
@@ -25,46 +25,62 @@ navigation:
         contents:
           - page: Overview
             path: ./pages/component-library/default-components/overview.mdx
+            icon: fa-regular fa-file
           - page: Accordions
             path: ./pages/component-library/default-components/accordions.mdx
+            icon: fa-regular fa-chevron-down
           - page: Accordion Groups
             path: ./pages/component-library/default-components/accordion-groups.mdx
+            icon: fa-regular fa-chevrons-down
           - page: Aside
             path: ./pages/component-library/default-components/aside.mdx
+            icon: fa-regular fa-comment-dots
           - page: Callouts
             path: ./pages/component-library/default-components/callouts.mdx
+            icon: fa-regular fa-exclamation-triangle
           - page: Cards
             path: ./pages/component-library/default-components/cards.mdx
+            icon: fa-regular fa-id-card
           - page: Card Groups
             path: ./pages/component-library/default-components/card-groups.mdx
+            icon: fa-regular fa-grid-2
           - page: Code Blocks
             path: ./pages/component-library/default-components/code-blocks.mdx
+            icon: fa-regular fa-code
           - page: Embed
             path: ./pages/component-library/default-components/embed.mdx
+            icon: fa-regular fa-window-restore
           - page: Endpoint Request Snippet
             path: ./pages/component-library/default-components/endpoint-request-snippet.mdx
+            icon: fa-regular fa-arrow-up
           - page: Endpoint Response Snippet
             path: ./pages/component-library/default-components/endpoint-response-snippet.mdx
+            icon: fa-regular fa-arrow-down
           - page: Endpoint Schema Snippet
             path: ./pages/component-library/default-components/endpoint-schema-snippet.mdx
+            icon: fa-regular fa-sitemap
           - page: Frames
             path: ./pages/component-library/default-components/frames.mdx
+            icon: fa-regular fa-window-maximize
           - page: Icons
             path: ./pages/component-library/default-components/icons.mdx
+            icon: fa-regular fa-icons
           - page: Parameter Fields
             path: ./pages/component-library/default-components/parameter-fields.mdx
+            icon: fa-regular fa-list
           - page: Steps
             path: ./pages/component-library/default-components/steps.mdx
+            icon: fa-regular fa-list-ol
           - page: Tabs
             path: ./pages/component-library/default-components/tabs.mdx
+            icon: fa-regular fa-folder-open
           - page: Tooltips
             path: ./pages/component-library/default-components/tooltips.mdx
-      - section: Custom Components
-        contents:
-          - page: Reusable Snippets
-            path: ./pages/component-library/custom-components/reusable-snippets.mdx
-          - page: Custom React Components
-            path: ./pages/component-library/custom-components/custom-react-components.mdx
+            icon: fa-regular fa-comment
+      - page: Reusable Snippets
+        path: ./pages/component-library/custom-components/reusable-snippets.mdx
+      - page: Custom React Components
+        path: ./pages/component-library/custom-components/custom-react-components.mdx
   - section: Configuration
     collapsed: true
     contents:
@@ -79,8 +95,6 @@ navigation:
     contents:
       - page: Overview
         path: ./pages/navigation/overview.mdx
-      - page: Tabs
-        path: ./pages/navigation/tabs.mdx
       - page: Versions
         path: ./pages/navigation/versions.mdx
       - page: Products
@@ -136,10 +150,17 @@ navigation:
   - section: Authentication
     collapsed: true
     contents:
+      - page: SSO
+        path: ./pages/authentication/sso.mdx
       - page: RBAC
         path: ./pages/authentication/rbac.mdx
       - page: API Key Injection
         path: ./pages/api-references/autopopulate-api-key.mdx
+  - section: Enterprise
+    collapsed: true
+    contents:
+      - page: Self-hosted
+        path: ./pages/enterprise/self-hosted.mdx
   - section: Integrations
     collapsed: true
     contents:

fern/products/docs/docs.yml

@@ -53,7 +53,7 @@ groups:
 
 <Callout intent='info'>
   SDK snippets automatically populated in your Fern Docs is a paid feature included
-  in the [SDK Starter plan](https://buildwithfern.com/pricing).
+  in the [SDK Basic plan](https://buildwithfern.com/pricing).
 </Callout>
 
 ### Add the package name to your docs configuration

fern/products/docs/pages/api-references/sdk-snippets.mdx

@@ -2,6 +2,6 @@
 title: Single Sign-On
 ---
 
-How to configure Single Sign-On (SSO) for your documentation platform.
+Fern supports SSO so that your docs site is gated for your team and customers.
 
-<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning> 
+<Warning>Docs are coming soon for this page.<br/><br/>Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo) to get set up with this feature. </Warning> 

fern/products/docs/pages/authentication/sso.mdx

@@ -2,6 +2,6 @@
 title: Self-hosted Enterprise
 ---
 
-Information about self-hosted enterprise solutions for your documentation platform.
+Fern supports self-hosting so that you can run your docs site on your own infrastructure.
 
-<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning> 
+<Warning>Docs are coming soon for this page.<br/><br/>Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo) to get set up with this feature. </Warning> 

fern/products/docs/pages/enterprise/self-hosted.mdx

@@ -8,59 +8,148 @@ description: Meet documentation that is stunning by default, AI-ready, and desig
     .fern-card {
       text-decoration: none !important;
     } 
+
+    .docs-homepage {
+      position: relative;
+
+      .dashed-pattern-left {
+        position: absolute;
+        left: -4rem;
+        top: -8.5rem;
+        height: calc(100% + 26rem);
+        width: 1rem;
+        opacity: 1;
+        pointer-events: none;
+        border-right: 1px solid var(--grayscale-5);
+        mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
+        -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
+      }
+
+      .dashed-pattern-right {
+        position: absolute;
+        right: -4rem;
+        top: -8.5rem;
+        height: calc(100% + 26rem);
+        width: 1rem;
+        opacity: 1;
+        pointer-events: none;
+        border-left: 1px solid var(--grayscale-5);
+        mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
+        -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
+      }
+
+
+      .fern-card {
+        border: none !important;
+        padding: 0 !important;
+        box-shadow: none !important;
+        background-color: transparent !important;
+
+        .card-title {
+          display: flex;
+          gap: 0.25rem;
+          align-items: center;
+        }
+
+        img {
+          transition: transform 0.15s ease-in-out;
+        }
+
+        .arrow-right {
+          height: 1rem;
+          opacity: 0;
+          transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
+          transform: translateX(0px);
+        }
+
+        &:hover {
+          img {
+            transform: scale(1.01);
+          }
+
+          .arrow-right {
+            opacity: 1;
+            transform: translateX(2px);
+          }
+        }
+      }
+    }
   `}
 </style>
 
-<CardGroup cols={2}>
-  <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/guides/getting-started/quickstart">
-    <div class="flex items-start flex-col space-y-3">
-      <img class="mx-auto dark:hidden" alt="Quickstart" src="./images/quickstart.png" />
-      <img class="mx-auto hidden dark:block" alt="Quickstart" src="./images/quickstart-dark.png" />
-      <div class="w-full space-y-1 overflow-hidden">
-        <div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Quickstart</div>
-        <div class="text-(color:--grayscale-a11) font-light">
-          <p>Start building beautiful documentation in under 5 minutes.</p>
+<div className="docs-homepage">
+  {/* Dashed Pattern - Left Side */}
+  <div className="dashed-pattern-left"></div>
+
+  {/* Dashed Pattern - Right Side */}
+  <div className="dashed-pattern-right"></div>
+  <CardGroup cols={2}>
+    <a class="fern-card interactive not-prose relative block p-6 text-base" href="/docs/guides/getting-started/quickstart">
+      <div class="flex items-start flex-col space-y-3">
+        <img class="mx-auto dark:hidden" alt="Quickstart" src="./images/quickstart.png" />
+        <img class="mx-auto hidden dark:block" alt="Quickstart" src="./images/quickstart-dark.png" />
+        <div class="w-full space-y-1 overflow-hidden">
+          <div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
+            Quickstart
+            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0" noZoom />
+            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0" noZoom />
+          </div>
+          <div class="text-(color:--grayscale-a11) font-light">
+            <p>Start building beautiful documentation in under 5 minutes.</p>
+          </div>
         </div>
       </div>
-    </div>
-  </a>
-  
-  <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/guides/getting-started/what-is-docs-yml">
-    <div class="flex items-start flex-col space-y-3">
-      <img class="mx-auto dark:hidden" alt="Configure with ease" src="./images/configure.png" />
-      <img class="mx-auto hidden dark:block" alt="Configure with ease" src="./images/configure-dark.png" />
-      <div class="w-full space-y-1 overflow-hidden">
-        <div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Configure with ease</div>
-        <div class="text-(color:--grayscale-a11) font-light">
-          <p>One simple file that can be used to generate documentation that fits your brand.</p>
+    </a>
+    
+    <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/guides/getting-started/what-is-docs-yml">
+      <div class="flex items-start flex-col space-y-3">
+        <img class="mx-auto dark:hidden" alt="Configure with ease" src="./images/configure.png" />
+        <img class="mx-auto hidden dark:block" alt="Configure with ease" src="./images/configure-dark.png" />
+        <div class="w-full space-y-1 overflow-hidden">
+          <div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
+            Configure with ease
+            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0" noZoom />
+            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0" noZoom />
+          </div>
+          <div class="text-(color:--grayscale-a11) font-light">
+            <p>One simple file that can be used to generate documentation that fits your brand.</p>
+          </div>
         </div>
       </div>
-    </div>
-  </a>
-  
-  <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/overview">
-    <div class="flex items-start flex-col space-y-3">
-      <img class="mx-auto dark:hidden" alt="Flexible component library" src="./images/component-library.png" />
-      <img class="mx-auto hidden dark:block" alt="Flexible component library" src="./images/component-library-dark.png" />
-      <div class="w-full space-y-1 overflow-hidden">
-        <div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Flexible component library</div>
-        <div class="text-(color:--grayscale-a11) font-light">
-          <p>Use pre-built or custom React components for a polished look.</p>
+    </a>
+    
+    <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/overview">
+      <div class="flex items-start flex-col space-y-3">
+        <img class="mx-auto dark:hidden" alt="Flexible component library" src="./images/component-library.png" />
+        <img class="mx-auto hidden dark:block" alt="Flexible component library" src="./images/component-library-dark.png" />
+        <div class="w-full space-y-1 overflow-hidden">
+          <div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
+            Flexible component library
+            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0" noZoom />
+            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0" noZoom />
+          </div>
+          <div class="text-(color:--grayscale-a11) font-light">
+            <p>Use pre-built or custom React components for a polished look.</p>
+          </div>
         </div>
       </div>
-    </div>
-  </a>
-  
-  <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/writing-content/visual-editor">
-    <div class="flex items-start flex-col space-y-3">
-      <img class="mx-auto dark:hidden" alt="Visual Editor" src="./images/visual-editor.png" />
-      <img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/visual-editor-dark.png" />
-      <div class="w-full space-y-1 overflow-hidden">
-        <div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Visual Editor</div>
-        <div class="text-(color:--grayscale-a11) font-light">
-          <p>Modify your documentation without touching code and publish to your GitHub.</p>
+    </a>
+    
+    <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/writing-content/visual-editor">
+      <div class="flex items-start flex-col space-y-3">
+        <img class="mx-auto dark:hidden" alt="Visual Editor" src="./images/visual-editor.png" />
+        <img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/visual-editor-dark.png" />
+        <div class="w-full space-y-1 overflow-hidden">
+          <div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
+            Visual Editor
+            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0" noZoom />
+            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0" noZoom />
+          </div>
+          <div class="text-(color:--grayscale-a11) font-light">
+            <p>Modify your documentation without touching code and publish to your GitHub.</p>
+          </div>
         </div>
       </div>
-    </div>
-  </a>
-</CardGroup> 
+    </a>
+  </CardGroup> 
+  </div>