adding stuff

README.md

@@ -1,41 +1,40 @@
-# Website
 
-This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+# Welcome to the FlutterFlow Documentation Repository!
+We're thrilled to have you here! Our documentation is a crucial resource for both new and existing users of FlutterFlow, and it grows and improves with contributions from our community. Whether you're fixing a typo, discussing a new topic, adding a troubleshooting guide, or sharing your experiences in a blog post, your contributions help everyone.
 
-### Installation Test
+Below you'll find guidelines on how you can contribute to different parts of the documentation.
 
-```
-$ yarn
-```
+### A little note on tooling
+Most of our documentation is written in markdown, which means it's super easy edit files. 
+You can choose to edit markdown directly in GitHub, or you can open up the entire reposiitory in StackBlitz.
 
-### Local Development
+Either way, you'll need to open up a pull request, and get an approval from at least one-code owner. 
 
-```
-$ yarn start
-```
+TO DO: add more details
 
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+## 1. Editing Existing Pages
+To make edits to an existing page, you can use the "Edit this page" button that appears at the bottom of each page. 
+That brings you straight to the source of the page in GitHub.
 
-### Build
+## 2. Adding a New Docs Page
+To add a new docs page, simply create a new markdown page in a subdirectory within the docs directory. 
 
-```
-$ yarn build
-```
+To ensure that page shows up on the sidebar, add its path to the docsSidebar object inside the sidebars.ts file.
 
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
+## 3. Adding a Troubleshooting Guide
+To add a new troubleshooting guide, simply create a new mardkown page in the docs/troubleshooting directory. 
 
-### Deployment
+## 4. Adding a Blog
+To add a new blog, simply create a new mardkown page in the blogs directory. 
 
-Using SSH:
+## 5. Generating the Changelog
+TO DO: auto-generating changelog
 
-```
-$ USE_SSH=true yarn deploy
-```
+### Ready to Contribute?
+Your contributions are vital to keeping FlutterFlow's documentation clear, up-to-date, and helpful. We look forward to seeing your pull requests and are excited to welcome you into our community of contributors!
 
-Not using SSH:
+### Top Contributors
 
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
+TO DO: *Perhaps we have some top contributors tabe that's autogenerated*? 
 
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+If you have any questions or need further guidance, don't hesitate to reach out to the documentation team. Happy documenting!

docs/index.md

@@ -25,7 +25,7 @@ import BranchIcon from '@site/static/icons/branch_New.png';
 ### FlutterFlow is a visual development environment that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing quality or features. 
 
 <InfoCards>
-    <InfoCard icon={GearIcon} title="Before You Begin" description="Ensure you meet system requirements and grasp technical concepts for smooth building in FlutterFlow." />
+    <InfoCard icon={GearIcon} title="Before You Begin" description="Ensure you meet system requirements and grasp technical concepts for smooth building in FlutterFlow." pagePath="/intro/before-you-begin/setting-up-flutterflow" />
     <InfoCard icon={DocsIcon}  title="Explore FlutterFlow" description="Dive into the building blocks of the platform: projects, widgets, functions and more." />
     <InfoCard icon={DeviceIcon}  title="Start Building" description="Jump right into a quick start on how to build a simple app." />
     <InfoCard icon={CheckIcon}  title="Troubleshooting Guides" description=" Solutions and tips to solve common FlutterFlow development hurdles." />

docs/intro/app-architecture.md → docs/intro/before-you-begin/app-architecture.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+title: App Architecture
 ---
 
 # App Development

docs/docs/Introduction/intro.md → docs/intro/before-you-begin/setting-up-flutterflow.md

@@ -1,22 +1,14 @@
 ---
-description: Introduction to FlutterFlow.
+title: Setting Up FlutterFlow
+description: Ensure you meet system requirements and grasp technical concepts for smooth building in FlutterFlow.
 ---
 
-# Introduction
-
-Welcome To FlutterFlow Docs!
-
 ## What is FlutterFlow?
 
-FlutterFlow is a low-code builder for developing native mobile applications. You can use our simple drag-and-drop interface to build your app 10x faster than traditional development.
+FlutterFlow is a visual development envirionment for building native mobile and web applications. FlutterFlow helps you build apps faster, without sacfiricing on app quality or features.
 
 <div class="video-container"><iframe src="https://www.youtube.com/embed/GpXjU-ieAKU?si=moIEUUGry24CdSJN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
 
-## New to FlutterFlow?
-
-The [Getting Started](/getting-started/dashboard) section will give you a quick overview of the FlutterFlow interface and guide you on building your first app with FlutterFlow.
-
-If there are any topics you'd like us to add to our documentation, please share your feedback [here](https://flutterflow.typeform.com/to/hxg5nxbo).
 
 ## Create an account
 
@@ -47,20 +39,5 @@ We recommend using the desktop application for improved performance and access t
 
 However, our desktop applications are currently in a preview phase, which may result in some instability. 
 
-## Need Help?
-
-To contact us directly, email [support@flutterflow.io](mailto:support@flutterflow.io). Thank you for being a part of the FlutterFlow journey!
-
-[Community Forum](https://community.flutterflow.io/)
-
-[YouTube](https://www.youtube.com/channel/UC5LueiosDVInA6yXE_38i9Q)
-
-[FAQs](https://docs.flutterflow.io/troubleshooting/basic-troubleshooting-guide)
-
-[Blog](https://blog.flutterflow.io/)
-
----
 
-[Next: Dashboard](/getting-started/dashboard)
 
-Last updated 6 days ago

docs/troubleshooting/create-a-blog-post.md

@@ -0,0 +1,34 @@
+---
+slug: push-notifications
+title: Push Notification Issues
+authors:
+  - name: Barry
+    title: FlutterFlow Support Team
+    # url: https://github.com/JoelMarcey
+    image_url: https://github.com/JoelMarcey.png
+tags: []
+---
+
+Push notifications play a vital role in mobile apps, letting you connect with your audience and update them on key developments. But, there are instances when push notifications fail to deliver. In this guide, we'll explore some typical problems that hinder push notifications in FlutterFlow and offer detailed instructions on how to fix them.
+
+
+![Alt text](image.png)
+
+:::tip Using CodeMagic? [Skip ahead!](https://mdxjs.com/playground/)
+
+:::
+
+### Without CodeMagic 
+
+#### 1. Ensure your subscription status hasn't changed.
+Head to the [Firebase Console](https://console.firebase.google.com/) and select Project Settings > Usage & Billing > Details & Settings. 
+
+![Alt text](image-1.png)
+
+If you see Spark listed, you will need to select Modify Plan and upgrade to a Blaze Plan. 
+
+[Click here](https://firebase.google.com/docs/projects/billing/firebase-pricing-plansoject) for more information on Firebase pricing plans.
+
+#### 2. Ensure your subscription status hasn't changed.
+
+

docs/troubleshooting/overview.md

@@ -0,0 +1,4 @@
+---
+title: Troubleshooting Guides Overview
+sidebar_position: 1
+---

docusaurus.config.ts

@@ -21,7 +21,7 @@ const config: Config = {
           breadcrumbs: false,
           routeBasePath: '/',
           sidebarPath: './sidebars.ts',
-          // editUrl: '/',
+          editUrl: 'https://github.com/FlutterFlow/flutterflow-documentation/edit/main/',
           // exclude: ['README.md'],
           // lastVersion: 'current',
           // versions: {
@@ -62,7 +62,7 @@ const config: Config = {
       items: [
         {
           type: 'doc',
-          docId: 'troubleshooting/support-articles/create-a-blog-post', // Adjust to the first document in "Troubleshooting"
+          docId: 'troubleshooting/overview', // Adjust to the first document in "Troubleshooting"
           position: 'left',
           label: 'Troubleshooting',
         },

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@docusaurus/core": "3.1.1",
+    "@docusaurus/plugin-content-docs": "^3.2.1",
     "@docusaurus/plugin-google-gtag": "^3.2.0",
     "@docusaurus/preset-classic": "3.1.1",
     "@mdx-js/react": "^3.0.0",

sidebars.ts

@@ -20,21 +20,11 @@ const sidebars: SidebarsConfig = {
       type: 'category',
       label: 'Getting Started',
       collapsed: false,
-      items: ['index', 'intro/app-architecture'],
+      items: ['index', {type: 'category', label: "Before You Begin", items: [
+        'intro/before-you-begin/setting-up-flutterflow', 'intro/before-you-begin/app-architecture'
+    ]}],
     }
   ]
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
-    'intro',
-    'hello',
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
-    },
-  ],
-   */
 };
 
 export default sidebars;

src/components/InfoCard/index.module.css

@@ -3,8 +3,14 @@
   border-radius: 4px;
   padding: 30px;
   transition: background-color 0.3s;
+  box-sizing: border-box; /* Ensures padding is included in width/height */
 }
 
+@media (max-width: 768px) { /* For landscape phones and smaller tablets */
+  .infoCard {
+      padding: 20px; /* Smaller padding on smaller screens */
+  }
+}
 
 .infoCard:hover {
   border: var(--selected-border);
@@ -21,7 +27,7 @@
   font-size: 20px;
 }
 
-.container {
+.titleContainer {
   display: flex;
   align-items: center;
   padding-bottom: 20px;
@@ -33,3 +39,12 @@
   width: auto; /* Maintain the aspect ratio of the image */
 }
 
+.infoCardLink {
+  display: flex;
+  color: var(--primary-texr); 
+}
+
+.infoCardLink:hover {
+  color: var(--primary-texr); 
+  text-decoration: none;
+}

src/components/InfoCard/index.tsx

@@ -3,15 +3,17 @@ import React from 'react';
 import styles from './index.module.css';
 
 
-const InfoCard = ({ icon, title, description }) => {
+const InfoCard = ({ icon, title, description, pagePath })=> {
   return (
+    <a href={pagePath} className={styles.infoCardLink}> {/* Link the card */}
     <div className={styles.infoCard}> 
-      <div className={styles.container}>
+      <div className={styles.titleContainer}>
         <img src={icon} alt={`${title} Logo`} className={styles.logo} />
         <div className={styles.infoCardTitle}>{title}</div>
       </div>
       <div className={styles.infoCardDescription}>{description}</div>
     </div>
+    </a>
   );
 };
 

src/components/InfoCards/index.module.css

@@ -1,6 +1,22 @@
+
 .cardContainer {
     padding-top: 20px;
     display: grid;
-    grid-template-columns: repeat(3, 1fr); /* Creates three columns of equal width */
-    gap: 40px; 
+    grid-template-columns: repeat(3, 1fr); /* Default to three columns */
+    grid-auto-rows: 1fr; /* Each row has equal height, adjusting to content */
+    gap: 20px;
+}
+
+
+/* Responsive adjustments */
+@media (max-width: 1024px) { /* For tablets and smaller desktops */
+    .cardContainer {
+      grid-template-columns: repeat(2, 1fr); /* Two columns */
+    }
+  }
+
+@media (max-width: 768px) { /* For landscape phones and smaller tablets */
+.cardContainer {
+    grid-template-columns: 1fr; /* Single column for small devices */
+}
 }