styling and such

Author: leighajarett

docs/changelog/changelog.md

@@ -0,0 +1,3 @@
+---
+sidebar_position: 1
+---

docs/docs/Get Started/deploy-your-site.md

@@ -0,0 +1,25 @@
+---
+title: FlutterFlow Documentation
+hide_title: true
+sidebar_label: Overview
+slug: /
+hide_table_of_contents: true
+
+---
+
+import InfoCard from '@site/src/components/InfoCard';
+import InfoCards from '@site/src/components/InfoCards';
+import FlutterFlowDocsLogo from '@site/src/components/FlutterFlowDocsLogo';
+
+
+<FlutterFlowDocsLogo />
+
+
+# Quickly build beautiful apps, without limitation.
+### Learn how to build mobile, web and desktop apps incredibly fast - without sacrificing on app quality or features.
+
+<InfoCards>
+    <InfoCard icon="🌐" title="Web Apps" description="Build and deploy web apps." />
+    <InfoCard icon="📱" title="Mobile AAA Apps" description="Build native iOS and Android apps for your mobile workforce." />
+    <InfoCard icon="🔗" title="External Web Apps" description="Embed web apps into your existing apps or build dedicated portals for customers." />
+</InfoCards>

docs/docs/Get Started/new-site.mdx

@@ -0,0 +1,43 @@
+---
+sidebar_position: 1
+---
+
+# App Development
+
+Before you jump in and start using FlutterFlow, it's helpful to have an idea of how app development works more broadly. 
+
+Traditionally, developing an app required writing a lot of code. You can think of code as a set of instructions for the computer, or device, executing the code. 
+
+The codebase is usually dividied up into two pieces: instructions for the frontend, and instructions for the backend. 
+
+# Frontend vs Backend
+
+Frontend development deals with creating the parts of an application that users interact with directly. 
+This includes:
+
+- Defining the visual pieces of your app, like text or buttons
+- Figuring out how these pieces should be laid out on the screen
+- Setting up logic for how your app should react to retrieved data and user interactions
+
+Backend usually refers to more complex logic and data storage. This includes:
+
+- Setting up a database that is capabale of storing, sending and retrieving data
+- Leveraging off-the-shelf services, like authentication providers or payment platforms
+- Defining business logic, either by writing code or using a low-code tool
+
+
+The interaction between frontend and backend often occurs through APIs (Application Programming Interfaces). 
+In most cases, the backend exposes endpoints for the frontend to send requests to. 
+The backend handles the request, and sends some data back in response - which the frontend can use to change its visual appearance. 
+
+
+# Where does the code execute?
+
+Backend code runs on a server
+
+When you're dealing with native applications, like 
+
+
+
+# Frontend architecture 
+When it comes to developing the frontend of your application, 

docs/index.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+# FF
+
+When it comes to developing your application in FlutterFlow

docs/intro.md

@@ -3,49 +3,38 @@ import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
-  title: 'My Site',
-  tagline: 'Dinosaurs are cool',
-  favicon: 'img/favicon.ico',
-
-  // Set the production url of your site here
-  url: 'https://your-docusaurus-site.example.com',
-  // Set the /<baseUrl>/ pathname under which your site is served
-  // For GitHub pages deployment, it is often '/<projectName>/'
+  title: 'FlutterFlow Documentation',
+  tagline: 'Learn how to build mobile, web and desktop apps incredibly fast - without sacrificing on app quality or features',
+  url: 'https://docs.flutterflow.io',
   baseUrl: '/',
-
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'facebook', // Usually your GitHub org/user name.
-  projectName: 'docusaurus', // Usually your repo name.
-
-  onBrokenLinks: 'throw',
+  onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',
-
-  // Even if you don't use internationalization, you can use this field to set
-  // useful metadata like html lang. For example, if your site is Chinese, you
-  // may want to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
     locales: ['en'],
   },
-
   presets: [
     [
       'classic',
       {
         docs: {
+          breadcrumbs: false,
+          routeBasePath: '/',
           sidebarPath: './sidebars.ts',
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          // editUrl: '/',
+          // exclude: ['README.md'],
+          // lastVersion: 'current',
+          // versions: {
+          //   current: {
+          //     label: 'v8',
+          //   },
         },
+        // Will be passed to @docusaurus/plugin-google-tag-manager.
+        // googleTagManager: {
+        //   containerId: 'GTM-TKMGCBC',
+        // },
         blog: {
           showReadingTime: true,
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         theme: {
           customCss: './src/css/custom.css',
@@ -54,29 +43,41 @@ const config: Config = {
     ],
   ],
 
+  stylesheets: [
+    {
+      href: 'https://fonts.googleapis.com/css?family=Product+Sans',
+      rel: 'stylesheet',
+    },
+  ],
+
   themeConfig: {
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
     navbar: {
       title: 'FlutterFlow Docs',
       logo: {
         alt: 'FlutterFlow Docs',
-        src: 'img/logo.svg',
+        src: '/logos/logoMark_outlinePrimary_transparent.svg',
       },
       items: [
         {
           type: 'doc',
-          docId: 'docs/Get Started/deploy-your-site', // Adjust this to point to the first document in "Docs"
+          docId: 'troubleshooting/support-articles/create-a-blog-post', // Adjust to the first document in "Troubleshooting"
           position: 'left',
-          label: 'Docs',
+          label: 'Troubleshooting',
         },
         {
           type: 'doc',
-          docId: 'troubleshooting/support-articles/create-a-blog-post', // Adjust to the first document in "Troubleshooting"
+          docId: 'changelog/changelog', // Adjust to the first document in "Changelog"
           position: 'left',
-          label: 'Troubleshooting',
+          label: 'Changelog',
         },
-        
+        // {
+        //   type: 'doc',
+        //   docId: 'documentation/', // Adjust to the first document in "Changelog"
+        //   position: 'left',
+        //   label: 'Docs',
+        // },
         {
           to: '/blog',
           label: 'Blog',

docs/intro/app-architecture.md

@@ -12,9 +12,17 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
  */
 const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  docsSidebar: [{type: 'autogenerated', dirName: 'docs'}], // Example configuration
+  // docsSidebar: [{type: 'autogenerated', dirName: ''}], // Example configuration
+  // introSidebar: [{type: 'autogenerated', dirName: 'intro'}], // Example configuration
   troubleshootingSidebar: [{type: 'autogenerated', dirName: 'troubleshooting'}], // Adjust `dirName` as needed
-
+  docsSidebar : [
+    {
+      type: 'category',
+      label: 'Getting Started',
+      collapsed: false,
+      items: ['index', 'intro/app-architecture'],
+    }
+  ]
   // But you can create a sidebar manually
   /*
   tutorialSidebar: [