Mobile (#167)

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

Author: 4 people

card-group-example.mdx

@@ -39,8 +39,16 @@
 
 /*** START -- PRODUCT SELECTOR STYLING ***/
 @media (min-width: 1024px) {
+  div[data-testid="product-dropdown-content"] {
+    border-radius: 1.5rem !important;
+  }
+
   .fern-product-selector {
-    transform: translate(-2px, 4px);
+    transform: translate(-2px, 2px);;
+  }
+
+  .product-item-title {
+   font-size: 1.25rem;
   }
 
   div:has(> .fern-product-selector-radio-group) {
@@ -165,6 +173,20 @@
   }
 }
 
+@media (max-width: 640px) {
+  .fern-product-selector-radio-group {
+    width: 100%;
+  }
+  
+  div[data-testid="product-dropdown-content"] {
+    width: calc(100vw - 2rem) !important;
+  }
+
+  div.fern-scroll-area-viewport.group\/sidebar.mask-grad-y-3.sticky.overscroll-contain > div > div {
+    border-top-width: 0px !important;
+  }
+}
+
 :is(.dark) .fern-product-selector-radio-group a[href*="home"] img {
   content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-home-dark.png") !important;
 }
@@ -279,10 +301,6 @@ a[href*="changelog"] svg {
 .sdks-homepage {
   position: relative;
 
-  .fern-card {
-    text-decoration: none !important;
-  } 
-
   .dashed-pattern-left {
     position: absolute;
     left: -4rem;
@@ -309,11 +327,16 @@ a[href*="changelog"] svg {
     -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%);
   }
 
+  .card-group {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+
   .fern-card {
     border: none !important;
     padding: 0 !important;
     box-shadow: none !important;
     background-color: transparent !important;
+    text-decoration: none !important;
 
     .external-link-icon {
       display: none !important;
@@ -389,7 +412,6 @@ a[href*="changelog"] svg {
   width: 800px;
   height: 600px;
   position: fixed;
-  filter: hue-rotate(30deg);
   transform: translate(-60%, 50%) rotate(-30deg);
   background-image: radial-gradient(farthest-side, var(--blue-3), transparent);
 }
@@ -410,11 +432,16 @@ a[href*="changelog"] svg {
   height: 600px;
   position: fixed;
   right: 0;
-  filter: hue-rotate(30deg);
   transform: translate(60%, 50%) rotate(30deg);
   background-image: radial-gradient(farthest-side, var(--blue-3), transparent);
 }
 
+@media (max-width: 640px) {
+  .bg-gradient-blue-left, .bg-gradient-green-right, .bg-gradient-blue-right, .bg-gradient-green-left {
+    display: none;
+  }
+}
+
 .lp-page-container {
   min-height: 100vh;
   position: relative;
@@ -693,7 +720,7 @@ a[href*="changelog"] svg {
   /* Responsive Design - Mobile First */
   @media (max-width: 640px) {
     .main-content {
-      padding: 2rem 1.5rem;
+      padding: 2rem 1rem;
     }
 
     .dashed-pattern-left {
@@ -709,7 +736,7 @@ a[href*="changelog"] svg {
     }
 
     .hero-title-container {
-      padding: 0 1.5rem;
+      padding: 0 1rem;
     }
 
     .feature-grid {
@@ -719,18 +746,18 @@ a[href*="changelog"] svg {
     }
 
     .sdks-card {
-      padding: 1.5rem;
+      padding: 1rem;
     }
 
     .docs-card {
-      padding: 1.5rem;
+      padding: 1rem;
       border-left: none;
       grid-column: 1;
       grid-row: auto;
     }
 
     .ai-search-card {
-      padding: 1.5rem;
+      padding: 1rem;
     }
 
     .card-title {

fern/assets/styles.css

@@ -8,7 +8,11 @@ instances:
         repo: docs
         branch: main
 
-title: Fern
+title: Fern Documentation
+
+metadata:
+  og:image: https://fern-docs.s3.us-east-2.amazonaws.com/fern-docs-og_image-compressed.png
+  twitter:image: https://fern-docs.s3.us-east-2.amazonaws.com/fern-docs-og_image-compressed.png
 
 products:
   - display-name: Home

fern/docs.yml

@@ -87,12 +87,12 @@ In this guide, we'll show you how to get started with Fern in under 5 minutes.
 
   </AccordionGroup>
 
-### Update your docs
+  ### Update your docs
 
-<Note>
-  We provide a white-glove migration service as part of our Enterprise plan. Interested? Request it
-  [here](https://buildwithfern.com/contact).
-</Note>
+  <Note>
+    We provide a white-glove migration service as part of our Enterprise plan. Interested? Request it
+    [here](https://buildwithfern.com/contact).
+  </Note>
 
   <AccordionGroup toc={true}>
     <Accordion title='Add content' >
@@ -166,9 +166,24 @@ In this guide, we'll show you how to get started with Fern in under 5 minutes.
 
   </AccordionGroup>
 
-### Publish to production
+  ### Preview your docs
+  <AccordionGroup toc={true}>
+    <Accordion title='Preview your docs locally'>
+      You can preview your docs locally for testing purposes by following the instructions [here](/docs/preview-publish/previewing-changes-locally).
+    </Accordion>
+    <Accordion title='Preview your docs in a PR'>
+      `PR previews` offer a way to preview changes from pull requests (PRs) before merging code to a production branch. Learn more [here](/docs/preview-publish/previewing-changes-in-a-pr).
+    </Accordion>
+  </AccordionGroup>
+  
+  ### Publish to production
 
   <AccordionGroup toc={true}>
+    <Accordion title='Publishing your docs'>
+      When you are ready for your docs to be publicly accessible, you can publish them using the Fern CLI.
+
+      [Read more.](/learn/docs/preview-publish/publishing-your-docs)
+    </Accordion>
     <Accordion title='Host on a custom domain'>
       Fern supports hosting your docs website on a custom domain or on a 
       custom subpath (e.g. https://domain.com/docs).
@@ -185,67 +200,4 @@ In this guide, we'll show you how to get started with Fern in under 5 minutes.
 
 </Steps>
 
-Below are some examples of documentation websites that have been published using Fern:
-
-<CardGroup cols={3}>
-  <Card
-    title="Hume"
-    href="https://dev.hume.ai/intro"
-    icon={<img src="https://www.hume.ai/icons/icon-144x144.png" alt="Hume logo" />}
-  />
-  <Card
-    title="Primer"
-    href="https://primer.io/docs/api"
-    icon={
-      <img
-        src="https://assets-global.website-files.com/65bcc4714739c54deeb9bac7/65d7663e0ceca67e8b5709c5_favicon.png"
-        alt="Primer logo"
-      />
-    }
-  />
-  <Card
-    title="AssemblyAI"
-    href="https://www.assemblyai.com/docs/api-reference"
-    icon={<img src="https://www.assemblyai.com/favicon.png" alt="AssemblyAI logo" />}
-  />
-  <Card
-    title="SuperAgent"
-    href="https://docs.superagent.sh/"
-    icon={<img src="https://framerusercontent.com/images/P75NaYul3IVsoMqx4RMALvngO4.png" alt="SuperAgent logo" />}
-  />
-  <Card
-    title="MultiOn"
-    href="https://docs.multion.ai/"
-    icon={<img src="https://cdn.prod.website-files.com/67be56277f6d514dcad939e2/67e48a0c27c90b3f0b51d7ad_logo-agi.png" alt="MultiOn logo" />}
-  />
-  <Card
-    title="Coactive"
-    href="https://docs.coactive.ai/"
-    icon={
-      <img
-        src="https://images.prismic.io/coactive/6d31b17f-cabb-492d-93ef-a9f42e03aaa2_coactive-logo-home.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max"
-        alt="Coactive logo"
-      />
-    }
-  />
-  <Card
-    title="Zep"
-    href="https://help.getzep.com/"
-    icon={
-      <img
-        src="https://assets-global.website-files.com/660b1c076d13b7e2967a499d/660c6dc329d8b16a8468f5ba_Asset%2017.png"
-        alt="Zep logo"
-      />
-    }
-  />
-  <Card
-    title="Rightbrain"
-    href="https://docs.rightbrain.ai/intro"
-    icon={
-      <img
-        src="https://fdr-prod-docs-files-public.s3.amazonaws.com/https://rightbrain.docs.buildwithfern.com/2024-08-05T10:16:06.892Z/docs/assets/Logo.png"
-        alt="Rightbrain logo"
-      />
-    }
-  />
-</CardGroup> 
+[View examples of documentation websites](https://buildwithfern.com/customers) that have been published using Fern.

fern/products/docs/pages/getting-started/quickstart.mdx

@@ -1,6 +1,6 @@
 ---
-title: The Fern Platform
-description: Input OpenAPI. Output SDKs and Docs.
+title: Build with Fern
+description: Explore our guides for how to generate SDKs and Docs with Fern.
 slug: /
 hide-toc: true
 layout: custom

fern/products/home/pages/welcome.mdx

@@ -13,7 +13,7 @@ description: Generate idiomatic SDKs in multiple programming languages
   <div className="dashed-pattern-right">
     {/* <div className="dashed-gradient"></div> */}
   </div>
-  <CardGroup cols={2}>
+  <div className="card-group my-6 grid gap-4 first:mt-0 sm:gap-6">
     <a class="fern-card interactive not-prose relative block p-6 text-base" href="/sdks/generators/typescript/quickstart">
       <div class="flex items-start flex-col space-y-3">
         <img class="mx-auto dark:hidden" alt="TypeScript" src="./images/typescript-card.png" />
@@ -171,5 +171,5 @@ description: Generate idiomatic SDKs in multiple programming languages
         </div>
       </div>
     </a>
-  </CardGroup> 
-  </div>
+  </div> 
+</div>