Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>

static/data/dataHelpers.js

@@ -0,0 +1,18 @@
+function recursiveBuildSidebarData(item) {
+    if ('items' in item) {
+        // is a category
+        return {
+            type: 'category',
+            label: item.label,
+            items: item.items.map(recursiveBuildSidebarData),
+        }
+    } else {
+        return {
+            type: 'doc',
+            label: item.label,
+            id: item.id,
+        }
+    }
+}
+
+exports.recursiveBuildSidebarData = recursiveBuildSidebarData

static/data/featuredGuides.json

@@ -0,0 +1,38 @@
+[
+    {
+        "title": "Pages and Navigation",
+        "description": "Learn how to build navigation systems, browser url’s and more.",
+        "href": "/docs/guides/navigation/basic-navigation",
+        "imageUrl": "/img/featured-content-images/navigation.png"
+    },
+    {
+        "title": "Layout",
+        "description": "Learn about Noodls powerful layout system and how to use it to create responsive UI.",
+        "href": "/docs/guides/user-interfaces/layout",
+        "imageUrl": "/img/featured-content-images/layout.png"
+    },
+    {
+        "title": "UI Controls and Data",
+        "description": "Learn how connect UI Controls to data nodes to create forms and more.",
+        "href": "/docs/guides/data/ui-controls-and-data",
+        "imageUrl": "/img/featured-content-images/list.png"
+    },
+    {
+        "title": "Creating a Backend",
+        "description": "Learn how to set up a backend for your App, to store and read persistant data.",
+        "href": "/docs/guides/cloud-data/creating-a-backend",
+        "imageUrl": "/img/featured-content-images/data.png"
+    },
+    {
+        "title": "Javascript in Noodl",
+        "description": "Learn how to use Javascript in Noodl and combine nodes with code.",
+        "href": "/docs/guides/business-logic/javascript",
+        "imageUrl": "/img/featured-content-images/code.png"
+    },
+    {
+        "title": "Custom UI Components",
+        "description": "Learn how to create your own re-usable components.",
+        "href": "/docs/guides/business-logic/custom-ui-components",
+        "imageUrl": "/img/featured-content-images/list.png"
+    }
+]

static/data/featuredModules.json

@@ -0,0 +1,5 @@
+[
+    "Mapbox",
+    "Chart.js",
+    "GraphQL"
+]

static/data/featuredPrefabs.json

@@ -0,0 +1,8 @@
+[
+  "Table",
+  "Form",
+  "Date Picker",
+  "Popup Modal",
+  "Toast",
+  "Email Verification"
+]

static/data/featuredProjects.json

@@ -0,0 +1,45 @@
+[
+    {
+        "title": "Suatch Google Sheets Example",
+        "description": "A cool color picker that can helps a designer to pick good colors. Uses the Google Sheet Module.",
+        "href": "/library/examples/suatch",
+        "imageUrl": "/library/examples/suatch/suatch_1-1-thumb.png",
+        "project": "/library/examples/suatch/suatch_1-2.zip"
+    },
+    {
+        "title": "Custom Survey App",
+        "description": "This app is a simple user survey. It shows how to work with navigation, visual and interaction states and custom components.",
+        "href": "/library/examples/survey-app",
+        "imageUrl": "/library/examples/survey-app/survey_thumbnail2.png",
+        "project": "/library/examples/survey-app/survey_app_1-4.zip"
+    },
+    {
+        "title": "Modal Wizard",
+        "description": "This example shows how to use a Component Stack in combination with a Popup to create a simple modal wizard-type of form.",
+        "href": "/library/examples/modal-wizard",
+        "imageUrl": "/library/examples/modal-wizard/final-1.png",
+        "project": "/library/examples/modal-wizard/component-stack-1.zip"
+    },
+    {
+        "title": "Task List App",
+        "description": "This example implements a small task list app that stores task in a database.",
+        "href": "/library/examples/task-list-app",
+        "imageUrl": "/library/examples/task-list-app/task_list_thumbnail.png",
+        "project": "/library/examples/task-list-app/task-app-1-2.zip",
+        "backend":"/library/examples/task-list-app/task-app-cf.json"
+    },
+    {
+        "title": "Mapbox Example",
+        "description": "A small app that makes use of the MapBox module to implement a map with markers.",
+        "href": "/library/examples/mapbox",
+        "imageUrl": "/library/examples/mapbox/markers-1.png",
+        "project": "/library/examples/mapbox/markers.zip"
+    },
+    {
+        "title": "Star Rating Component",
+        "description": "A small example that implements an animated interactive star rating component.",
+        "href": "/library/examples/star-rating-component",
+        "imageUrl": "/library/examples/star-rating-component/star-rating-thumb.png",
+        "project": "/library/examples/star-rating-component/star-rating-1-1.zip"
+    }
+]

static/data/featuredVideos.json

@@ -0,0 +1 @@
+["u04KnVju4KU", "zFJLPNCZGV8", "ATyqeK_deu4", "ecas2QPbr0g"]

static/data/frontpage.js

@@ -0,0 +1,45 @@
+export const FrontpageBlocks = {
+    SearchBar: 'searchbar',
+    Hero: 'hero', // ONLY ONE HERO BLOCK TO MAINTAIN GOOD SEO PLEASE!
+    FeaturedModules: 'featuredmodules',
+    FeaturedGuides: 'featuredguides',
+    FeaturedProjects: 'featuredprojects',
+    FeaturedVideos: 'featuredvideos',
+    FeaturedPrefabs: 'featuredprefabs',
+}
+
+export const frontpageData = [
+    { type: FrontpageBlocks.SearchBar },
+    {
+        type: FrontpageBlocks.Hero,
+        title: 'Get started with Noodl',
+        text: "Noodl is a low code web app builder that will have you creating applications faster and smarter. It's a visual development environment that you don't need any previous coding skills to start learning. It's also great for developers who already know how to code as you can easily mix in JavaScript when appropriate, and Noodl is great for designers too, as it gives full control over the look and feel of your App. In Noodl everything is live and you edit you app while its live. This site contains all you need to get started!",
+        gridItems: [
+            {
+                type: 'youtube',
+                videoId: 'kD-Oz_M-IS4',
+            },
+            {
+                type: 'link',
+                colorVariable: '--doc-color-noodl-orange-20',
+                backgroundImage:
+                    '/img/featured-content-images/noodl-basics.png',
+                label: 'Noodl basics',
+                href: '/docs/getting-started/workflow',
+                playIcon:false,
+            },
+            {
+                type: 'link',
+                colorVariable: '--doc-color-noodl-blue-20',
+                backgroundImage:
+                    '/img/featured-content-images/build-first-app.png',
+                label: 'Intro to cloud services',
+                href: 'https://www.youtube.com/watch?v=ecas2QPbr0g',
+            },
+        ],
+    },
+    { type: FrontpageBlocks.FeaturedGuides },
+    { type: FrontpageBlocks.FeaturedPrefabs,},
+    { type: FrontpageBlocks.FeaturedModules,},
+    { type: FrontpageBlocks.FeaturedVideos },
+]

static/data/guides.js

@@ -0,0 +1,520 @@
+const { recursiveBuildSidebarData } = require('./dataHelpers');
+
+const guides = [
+  {
+    type: 'category',
+    label: 'Building User Interfaces',
+    link: {
+      type: 'doc',
+      id: 'guides/user-interfaces/overview',
+    },
+    items: [
+      {
+        type: 'doc',
+        label: 'Visual nodes',
+        id: 'guides/user-interfaces/basics',
+        imageUrl: '/img/featured-content-images/basic.png',
+        description:
+          'Learn how to to place and edit visual elements using Noodls node model',
+      },
+      {
+        type: 'doc',
+        label: 'Components',
+        id: 'guides/user-interfaces/components',
+        imageUrl: '/img/featured-content-images/basic.png',
+        description: 'Learn how to create visual components that are reusable ',
+      },
+      {
+        type: 'doc',
+        label: 'Layout',
+        id: 'guides/user-interfaces/layout',
+        imageUrl: '/img/featured-content-images/layout.png',
+        description:
+          'Learn how to create layouts and group content using visual nodes',
+      },
+      {
+        type: 'doc',
+        label: 'Responsive Design',
+        id: 'guides/user-interfaces/responsive-design',
+        imageUrl: '/img/featured-content-images/basic.png',
+        description: 'Learn how to to build responsive layouts and components',
+      },
+      {
+        type: 'doc',
+        label: 'Style Variants',
+        id: 'guides/user-interfaces/style-variants',
+        imageUrl: '/img/featured-content-images/layout.png',
+        description: 'Learn how to define style variants for visual elements',
+      },
+      {
+        type: 'doc',
+        label: 'Visual States',
+        id: 'guides/user-interfaces/visual-states',
+        imageUrl: '/img/featured-content-images/layout.png',
+        description:
+          'Learn how to style hover, focused, and other visual states on UI elements',
+      },
+      {
+        type: 'doc',
+        label: 'States Node',
+        id: 'guides/user-interfaces/states',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description:
+          'Learn how to use the States node to create UI states, animations and more',
+      },
+      {
+        type: 'doc',
+        label: 'Scrolling Content',
+        id: 'guides/user-interfaces/scrolling-content',
+        imageUrl: '/img/featured-content-images/layout.png',
+        description: 'Learn how to set up scrolling containers and pages',
+      },
+      {
+        type: 'doc',
+        label: 'Modules and Prefabs',
+        id: 'guides/user-interfaces/modules',
+        imageUrl: '/img/featured-content-images/basic.png',
+        description:
+          'Get pre-made components, third-party-services, and new capabilities with modules',
+      },
+      {
+        type: 'doc',
+        label: 'Figma Plugin',
+        id: 'guides/user-interfaces/figma-plugin',
+        imageUrl: '/img/featured-content-images/basic.png',
+        description: 'Turn designs in Figma into Noodl nodes',
+      },
+    ],
+  },
+
+  {
+    type: 'category',
+    label: 'Working with data',
+    link: { type: 'doc', id: 'guides/data/overview' },
+    items: [
+      {
+        type: 'doc',
+        label: 'Making Connections',
+        id: 'guides/data/making-connections',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description: 'Learn how to make data connections between nodes.',
+      },
+      {
+        type: 'doc',
+        label: 'Variables',
+        id: 'guides/data/variables',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description:
+          'Learn how to store data locally in your app using variables',
+      },
+      {
+        type: 'doc',
+        label: 'Objects',
+        id: 'guides/data/objects',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description: 'Learn how to store objects of data locally in your app',
+      },
+      {
+        type: 'doc',
+        label: 'Arrays',
+        id: 'guides/data/arrays',
+        imageUrl: '/img/featured-content-images/list.png',
+        description: 'Learn how to store multiple objects of data using arrays',
+      },
+      {
+        type: 'doc',
+        label: 'Lists Basics',
+        id: 'guides/data/list-basics',
+        imageUrl: '/img/featured-content-images/list.png',
+        description: 'Learn how to generate lists of UI elements from data',
+      },
+      {
+        type: 'doc',
+        label: 'UI Controls and data',
+        id: 'guides/data/ui-controls-and-data',
+        imageUrl: '/img/featured-content-images/list.png',
+        description:
+          'Learn how connect UI Controls to data nodes to create forms and more',
+      },
+
+      {
+        type: 'doc',
+        label: 'External Data',
+        id: 'guides/data/external-data',
+        imageUrl: '/img/featured-content-images/data.png',
+        description: 'Learn how to work with external data using REST APIs',
+      },
+    ],
+  },
+
+  {
+    type: 'category',
+    label: 'Navigation',
+    link: { type: 'doc', id: 'guides/navigation/overview' },
+    items: [
+      {
+        type: 'doc',
+        label: 'Basic Navigation',
+        id: 'guides/navigation/basic-navigation',
+        imageUrl: '/img/featured-content-images/navigation.png',
+        description:
+          'Learn how to create pages and how to navigate between them',
+      },
+      {
+        type: 'doc',
+        label: 'Multi Level Navigation',
+        id: 'guides/navigation/multi-level-navigation',
+        imageUrl: '/img/featured-content-images/navigation.png',
+        description: 'Learn how to set up a multi-level-navigation system',
+      },
+      {
+        type: 'doc',
+        label: 'Encoding Parameters in URLs',
+        id: 'guides/navigation/encoding-parameters-in-urls',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description:
+          'Learn how to pass parameters in the URL when navigating between page',
+      },
+      {
+        type: 'doc',
+        label: 'Popups',
+        id: 'guides/navigation/popups',
+        imageUrl: '/img/featured-content-images/navigation.png',
+        description: 'Learn how to display popups on user interactions',
+      },
+      {
+        type: 'doc',
+        label: 'Component Stack',
+        id: 'guides/navigation/component-stack',
+        imageUrl: '/img/featured-content-images/navigation.png',
+        description:
+          'Learn how to create a wizard flow using a Component Stack',
+      },
+    ],
+  },
+
+  {
+    type: 'category',
+    label: 'Working with cloud data',
+    link: { type: 'doc', id: 'guides/cloud-data/overview' },
+    items: [
+      {
+        type: 'doc',
+        label: 'Creating a cloud service',
+        id: 'guides/cloud-data/creating-a-backend',
+        imageUrl: '/img/featured-content-images/data.png',
+        description:
+          'Learn how to set up a cloud service for your App, to store and read persistant data',
+      },
+      {
+        type: 'doc',
+        label: 'Creating a class',
+        id: 'guides/cloud-data/creating-a-class',
+        imageUrl: '/img/featured-content-images/data.png',
+        description:
+          'Learn how to create a class for storing data records in a cloud service.',
+      },
+      {
+        type: 'doc',
+        label: 'Creating new database records',
+        id: 'guides/cloud-data/creating-new-database-records',
+        imageUrl: '/img/featured-content-images/data.png',
+        description: 'Learn how to store a data Record in a cloud service.',
+      },
+      {
+        type: 'doc',
+        label: 'Quering records from a database',
+        id: 'guides/cloud-data/quering-records-from-database',
+        imageUrl: '/img/featured-content-images/data.png',
+        description: 'Learn how to query record from a database to your app',
+      },
+      {
+        type: 'doc',
+        label: 'Updating records',
+        id: 'guides/cloud-data/updating-records',
+        imageUrl: '/img/featured-content-images/data.png',
+        description: 'Learn how to update existing records in a database',
+      },
+      {
+        type: 'doc',
+        label: 'Filter database queries',
+        id: 'guides/cloud-data/filtering-database-queries',
+        imageUrl: '/img/featured-content-images/data.png',
+        description: 'Learn how to filter database queries',
+      },
+      {
+        type: 'doc',
+        label: 'Record relations',
+        id: 'guides/cloud-data/record-relations',
+        imageUrl: '/img/featured-content-images/data.png',
+        description:
+          'Learn how to create relations between records in a database',
+      },
+      {
+        type: 'doc',
+        label: 'Access Control',
+        id: 'guides/cloud-data/access-control',
+        imageUrl: '/img/featured-content-images/data.png',
+        description:
+          'learn how to limit access control to records to certain users.',
+      },
+      {
+        type: 'doc',
+        label: 'Importing and exporting data',
+        id: 'guides/cloud-data/import-export-csv',
+        imageUrl: '/img/featured-content-images/data.png',
+        description:
+          'learn how to import and export data to/from your cloud services database.',
+      },
+    ],
+  },
+
+  {
+    type: 'category',
+    label: 'Visualizing Data',
+    link: { type: 'doc', id: 'guides/visualizing-data/overview' },
+    items: [
+      {
+        type: 'doc',
+        label: 'Using the Table component to visualize data',
+        id: 'guides/visualizing-data/table-to-visualize-data',
+        imageUrl: '/img/featured-content-images/data.png',
+        description:
+          'Learn how to use the Table node and Query Records to display data in a table.',
+      },
+      {
+        type: 'doc',
+        label: 'Adding pagination to the Table component',
+        id: 'guides/visualizing-data/table-pagination',
+        imageUrl: '/img/featured-content-images/data.png',
+        description:
+          'Learn how to use the Pages And Rows component to paginate the data in your Table.',
+      },
+      {
+        type: 'doc',
+        label: 'Filter your Table data',
+        id: 'guides/visualizing-data/filter-table-data',
+        imageUrl: '/img/featured-content-images/data.png',
+        description:
+          'Learn how to use the Filter prefab to filter out data from a Query Node and display it in a Table.',
+      },
+      {
+        type: 'doc',
+        label: 'Styling the Table',
+        id: 'guides/visualizing-data/styling-table',
+        imageUrl: '/img/featured-content-images/data.png',
+        description: 'Learn how to make style changes to the Table prefab.',
+      },
+    ],
+  },
+
+  {
+    type: 'category',
+    label: 'Building business logic',
+    link: { type: 'doc', id: 'guides/business-logic/overview' },
+    items: [
+      {
+        type: 'doc',
+        label: 'Client Side Business Logic with Nodes',
+        id: 'guides/business-logic/client-side-biz-logic-nodes',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description: 'Learn how to work with logic nodes for your frontend',
+      },
+      {
+        type: 'doc',
+        label: 'Javascript in Noodl',
+        id: 'guides/business-logic/javascript',
+        imageUrl: '/img/featured-content-images/code.png',
+        description:
+          'Learn how to use Javascript in Noodl and combine nodes with code',
+      },
+      {
+        type: 'doc',
+        label: 'Client Side Business Logic with Javascript',
+        id: 'guides/business-logic/client-side-biz-logic-js',
+        imageUrl: '/img/featured-content-images/code.png',
+        description: 'Learn how to use Javascript for custom logic',
+      },
+      {
+        type: 'doc',
+        label: 'Custom UI Components',
+        id: 'guides/business-logic/custom-ui-components',
+        imageUrl: '/img/featured-content-images/list.png',
+        description: 'Learn how to create your own re-usable components',
+      },
+      {
+        type: 'doc',
+        label: 'Events',
+        id: 'guides/business-logic/events',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description: 'Learn how to work with events in Noodl',
+      },
+      /*  {
+                type: 'doc',
+                label: 'Zapier',
+                id: 'guides/business-logic/zapier',
+                imageUrl: '/img/featured-content-images/logic.png',
+                description:
+                    'Learn how to connect Noodl to Zapier for task automation more',
+            },*/
+      /*{
+                            type: 'doc',
+                            label: 'Webhooks',
+                            id: 'guides/business-logic/webhooks',
+                        },*/
+      /*  {
+                type: 'doc',
+                label: 'User Management',
+                id: 'guides/business-logic/user-management',
+                imageUrl: '/img/featured-content-images/data.png',
+                description:
+                    'Learn how to use Noodls built in User Management nodes to create signup flows and more',
+            },*/
+    ],
+  },
+
+  {
+    type: 'category',
+    label: 'User Management',
+    link: { type: 'doc', id: 'guides/user-management/overview' },
+    items: [
+      {
+        type: 'doc',
+        label: 'Creating users in Noodl',
+        id: 'guides/user-management/creating-users-in-noodl',
+        imageUrl: '/',
+        description: 'Learn how to create user accounts in your app',
+      },
+    ],
+  },
+
+  {
+    type: 'category',
+    label: 'Cloud Functions',
+    link: { type: 'doc', id: 'guides/cloud-logic/overview' },
+    items: [
+      {
+        type: 'doc',
+        label: 'Introduction',
+        id: 'guides/cloud-logic/introduction',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description:
+          'Start learning how to build logic that runs in the cloud.',
+      },
+      {
+        type: 'doc',
+        label: 'Email Verification',
+        id: 'guides/cloud-logic/email-verification',
+        imageUrl: '/img/featured-content-images/data.png',
+        description: 'Learn how create signup flows and more.',
+      },
+      {
+        type: 'doc',
+        label: 'Scheduled Jobs',
+        id: 'guides/cloud-logic/scheduled-jobs',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description: 'How to do scheduled jobs using cloud functions.',
+      },
+      {
+        type: 'doc',
+        label: 'Logging and Debugging',
+        id: 'guides/cloud-logic/logging',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description: 'How to log and debug your cloud functions.',
+      },
+      {
+        type: 'doc',
+        label: 'Javascript',
+        id: 'guides/cloud-logic/javascript',
+        imageUrl: '/img/featured-content-images/logic.png',
+        description: 'How to write Javascript in cloud functions.',
+      },
+    ],
+  },
+  {
+    type: 'category',
+    label: 'Collaboration',
+    link: { type: 'doc', id: 'guides/collaboration/overview' },
+    items: [
+      {
+        type: 'doc',
+        label: 'Version Control',
+        id: 'guides/collaboration/version-control',
+        imageUrl: '/img/featured-content-images/basic.png',
+        description:
+          'Learn how to use Noodls powerful version control features based on Git',
+      },
+    ],
+  },
+  {
+    type: 'category',
+    label: 'Deploying and hosting apps',
+    link: { type: 'doc', id: 'guides/deploy/overview' },
+    items: [
+      {
+        type: 'doc',
+        label: 'Sandbox Deploy',
+        id: 'guides/deploy/deploying-an-app-on-sandbox',
+        imageUrl: '/img/featured-content-images/hosting.png',
+        description: 'Learn how to deploy your app to a Noodl sandbox domain',
+      },
+      {
+        type: 'doc',
+        label: 'Deploying to custom domains',
+        id: 'guides/deploy/deploying-to-custom-domain',
+        imageUrl: '/img/featured-content-images/hosting.png',
+        description: 'Learn how to deploy your app to custom domains ',
+      },
+      {
+        type: 'doc',
+        label: 'Using a self hosted cloud service',
+        id: 'guides/deploy/using-an-external-backend',
+        imageUrl: '/img/featured-content-images/data.png',
+        description:
+          'Learn how to create a self hosted cloud service through a Docker Container',
+      },
+      {
+        type: 'doc',
+        label: 'Deploying to iOS and Android',
+        id: 'guides/deploy/deploying-to-ios-and-android',
+        imageUrl: '/img/featured-content-images/hosting.png',
+        description: 'Learn how to deploy your project as a native app',
+      },
+      {
+        type: 'doc',
+        label: 'Self hosting your Noodl Frontend',
+        id: 'guides/deploy/hosting-frontend',
+        imageUrl: '/img/featured-content-images/hosting.png',
+        description:
+          'Learn how to deploy your project to a local folder for Self Hosting',
+      },
+    ],
+  },
+];
+
+exports.getGuidesSidebarData = function () {
+  return guides.map(recursiveBuildSidebarData);
+};
+
+function recursiveBuildGuideListingData(item) {
+  if ('items' in item) {
+    // is a category
+    return {
+      key: item.label,
+      title: item.label,
+      items: item.items.map(recursiveBuildGuideListingData),
+    };
+  } else {
+    return {
+      key: item.label,
+      title: item.label,
+      description: item.description,
+      href: '/docs/' + item.id,
+      imageUrl: item.imageUrl,
+    };
+  }
+}
+
+exports.getGuideListing = function () {
+  return guides.map(recursiveBuildGuideListingData);
+};

static/data/nodeData.js

@@ -0,0 +1,684 @@
+const { recursiveBuildSidebarData } = require('./dataHelpers');
+
+const NodeType = {
+  Visual: 'is-visual',
+  Data: 'is-data',
+  Custom: 'is-custom',
+  Logic: 'is-logic',
+  Connection: 'is-connection',
+};
+
+const nodeData = [
+  {
+    label: 'UI Elements',
+    description: `These nodes make up all of the visuals of your app. Put them in your node tree whenever you want to render an element on the screen. These nodes also support <a href="/2.7/docs/guides/user-interfaces/style-variants">Variants</a> and <a href="/2.7/docs/guides/user-interfaces/visual-states">States</a>.`,
+    items: [
+      {
+        label: 'Basic Elements',
+        items: [
+          {
+            label: 'Group',
+            id: 'basic-elements/group',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Columns',
+            id: 'basic-elements/columns',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Text',
+            id: 'basic-elements/text',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Image',
+            id: 'basic-elements/image',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Video',
+            id: 'basic-elements/video',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Circle',
+            id: 'basic-elements/circle',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Icon',
+            id: 'basic-elements/icon',
+            nodeType: NodeType.Visual,
+          },
+        ],
+      },
+
+      {
+        label: 'UI Controls',
+        items: [
+          {
+            label: 'Button',
+            id: 'ui-controls/button',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Checkbox',
+            id: 'ui-controls/checkbox',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Dropdown',
+            id: 'ui-controls/dropdown',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Radio Button',
+            id: 'ui-controls/radio-button',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Radio Button Group',
+            id: 'ui-controls/radio-button-group',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Slider',
+            id: 'ui-controls/slider',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Text Input',
+            id: 'ui-controls/text-input',
+            nodeType: NodeType.Visual,
+          },
+        ],
+      },
+    ],
+  },
+
+  {
+    label: 'Navigation & Popups',
+    description:
+      'These nodes cover all your navigation needs, everyting from URL and hash based navigation to component replacement. You can either use them to reroute the user to a different views or render content on top of the current view in modals.',
+    items: [
+      {
+        label: 'Navigation',
+        items: [
+          {
+            label: 'Page Router',
+            id: 'navigation/page-router',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Navigate',
+            id: 'navigation/navigate',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Page Inputs',
+            id: 'navigation/page-inputs',
+            nodeType: NodeType.Connection,
+          },
+          {
+            label: 'External Link',
+            id: 'navigation/external-link',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Navigate To Path',
+            id: 'navigation/navigate-to-path',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Page',
+            id: 'navigation/page',
+            nodeType: NodeType.Visual,
+          },
+        ],
+      },
+
+      {
+        label: 'Component Stack',
+        items: [
+          {
+            label: 'Component Stack',
+            id: 'component-stack/component-stack-node',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Push Component To Stack',
+            id: 'component-stack/push-component',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Pop Component Stack',
+            id: 'component-stack/pop-component',
+            nodeType: NodeType.Logic,
+          },
+        ],
+      },
+
+      {
+        label: 'Popups',
+        items: [
+          {
+            label: 'Show Popup',
+            id: 'popups/show-popup',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Close Popup',
+            id: 'popups/close-popup',
+            nodeType: NodeType.Logic,
+          },
+        ],
+      },
+    ],
+  },
+
+  {
+    label: 'Logic & Utilities',
+    description:
+      'Most of the meat in an app comes from logic and data processing. This is your toolbox for working with most logic, data and user interactions, big and small.',
+    items: [
+      {
+        label: 'General Utils',
+        items: [
+          {
+            label: 'States',
+            id: 'utilities/logic/states',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Value Changed',
+            id: 'logic/value-changed',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Delay',
+            id: 'utilities/delay',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Color Blend',
+            id: 'utilities/color-blend',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Number Remapper',
+            id: 'math/number-remapper',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Counter',
+            id: 'math/counter',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Drag',
+            id: 'utilities/drag',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Animate To Value',
+            id: 'logic/animate-to-value',
+            nodeType: NodeType.Logic,
+          },
+        ],
+      },
+
+      {
+        label: 'Logic',
+        items: [
+          {
+            label: 'Boolean To String',
+            id: 'utilities/boolean-to-string',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Switch',
+            id: 'logic/switch',
+            nodeType: NodeType.Logic,
+          },
+          { label: 'And', id: 'logic/and', nodeType: NodeType.Logic },
+          { label: 'Or', id: 'logic/or', nodeType: NodeType.Logic },
+          {
+            label: 'Condition',
+            id: 'utilities/logic/condition',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Inverter',
+            id: 'logic/inverter',
+            nodeType: NodeType.Logic,
+          },
+        ],
+      },
+
+      {
+        label: 'Events',
+        items: [
+          {
+            label: 'Send Event',
+            id: 'events/send-event',
+            nodeType: NodeType.Connection,
+          },
+          {
+            label: 'Receive Event',
+            id: 'events/receive-event',
+            nodeType: NodeType.Connection,
+          },
+        ],
+      },
+
+      {
+        label: 'String Manipulation',
+        items: [
+          {
+            label: 'Substring',
+            id: 'string-manipulation/substring',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'String Mapper',
+            id: 'string-manipulation/string-mapper',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'String Format',
+            id: 'string-manipulation/string-format',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Date To String',
+            id: 'utilities/date-to-string',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Unique Id',
+            id: 'utilities/unique-id',
+            nodeType: NodeType.Logic,
+          },
+        ],
+      },
+
+      {
+        label: 'System',
+        items: [
+          {
+            label: 'Open File Picker',
+            id: 'utilities/open-file-picker',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Screen Resolution',
+            id: 'utilities/screen-resolution',
+            nodeType: NodeType.Logic,
+          },
+        ],
+      },
+
+      {
+        label: 'Variables',
+        items: [
+          {
+            label: 'String',
+            id: 'data/string',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Boolean',
+            id: 'data/boolean',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Color',
+            id: 'data/color',
+            nodeType: NodeType.Logic,
+          },
+          {
+            label: 'Number',
+            id: 'data/number',
+            nodeType: NodeType.Logic,
+          },
+        ],
+      },
+    ],
+  },
+
+  {
+    label: 'Component Utilities',
+    description:
+      'One of the core concepts in Noodl is the ability to create your own reusable components. Here are nodes that help you manage how data passes through them.',
+    items: [
+      {
+        label: 'Component Inputs',
+        id: 'component-utilities/component-inputs',
+        nodeType: NodeType.Connection,
+      },
+      {
+        label: 'Component Outputs',
+        id: 'component-utilities/component-outputs',
+        nodeType: NodeType.Connection,
+      },
+      {
+        label: 'Component Children',
+        id: 'component-utilities/component-children',
+        nodeType: NodeType.Connection,
+      },
+      {
+        label: 'Component Object',
+        id: 'component-utilities/component-object',
+        nodeType: NodeType.Connection,
+      },
+      {
+        label: 'Parent Component Object',
+        id: 'component-utilities/parent-component-object',
+        nodeType: NodeType.Connection,
+      },
+      {
+        label: 'Set Component Object Properties',
+        id: 'component-utilities/set-component-object-properties',
+        nodeType: NodeType.Connection,
+      },
+      {
+        label: 'Set Parent Component Object Properties',
+        id: 'component-utilities/set-parent-component-object-properties',
+        nodeType: NodeType.Connection,
+      },
+    ],
+  },
+
+  {
+    label: 'Read & Write Data',
+    description:
+      'No app is complete without content. These are nodes that help you work with dynamic data defined in the app, a Noodl Cloud Service or from any backend of your choice.',
+    items: [
+      {
+        label: 'Variables & Objects',
+        items: [
+          {
+            label: 'Repeater',
+            id: 'ui-controls/repeater',
+            nodeType: NodeType.Visual,
+          },
+          {
+            label: 'Repeater Item',
+            id: 'ui-controls/repeater-item',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Object',
+            id: 'data/object/object-node',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Set Object Properties',
+            id: 'data/object/set-object-properties',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Create New Object',
+            id: 'data/object/create-new-object',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Set Variable',
+            id: 'data/variable/set-variable',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Variable',
+            id: 'data/variable/variable-node',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Run Tasks',
+            id: 'data/run-tasks',
+            nodeType: NodeType.Data,
+          },
+        ],
+      },
+
+      {
+        label: 'Arrays',
+        items: [
+          {
+            label: 'Array',
+            id: 'data/array/array-node',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Create New Array',
+            id: 'data/array/create-new-array',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Remove Object From Array',
+            id: 'data/array/remove-from-array',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Clear Array',
+            id: 'data/array/clear-array',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Insert Object Into Array',
+            id: 'data/array/insert-into-array',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Array Filter',
+            id: 'data/array/array-filter',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Array Map',
+            id: 'data/array/array-map',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Static Array',
+            id: 'data/array/static-array',
+            nodeType: NodeType.Data,
+          },
+        ],
+      },
+
+      {
+        label: 'Cloud Data',
+        items: [
+          {
+            label: 'Record',
+            id: 'data/cloud-data/record',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Create New Record',
+            id: 'data/cloud-data/create-new-record',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Filter Records',
+            id: 'data/cloud-data/filter-records',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Set Record Properties',
+            id: 'data/cloud-data/set-record-properties',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Query Records',
+            id: 'data/cloud-data/query-records',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Delete Record',
+            id: 'data/cloud-data/delete-record',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Add Record Relation',
+            id: 'data/cloud-data/add-record-relation',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Remove Record Relation',
+            id: 'data/cloud-data/remove-record-relation',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Cloud File',
+            id: 'data/cloud-data/cloud-file',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Upload File',
+            id: 'data/cloud-data/upload-file',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Cloud Function',
+            id: 'data/cloud-data/cloud-function',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Config',
+            id: 'data/cloud-data/config',
+            nodeType: NodeType.Data,
+          },
+        ],
+      },
+
+      {
+        label: 'User',
+        items: [
+          {
+            label: 'Log In',
+            id: 'data/user/log-in',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Log Out',
+            id: 'data/user/log-out',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Sign Up',
+            id: 'data/user/sign-up',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'User',
+            id: 'data/user/user-node',
+            nodeType: NodeType.Data,
+          },
+          {
+            label: 'Set User Properties',
+            id: 'data/user/set-user-properties',
+            nodeType: NodeType.Data,
+          },
+        ],
+      },
+
+      {
+        label: 'External Data',
+        items: [{ label: 'REST', id: 'data/rest', nodeType: NodeType.Data }],
+      },
+    ],
+  },
+
+  {
+    label: 'Custom Code',
+    description:
+      "Even though most problems can be solved with Noodl's built in base nodes, it's nice to have options for those specific situations that require code. After all, text based coding is quite fun too.",
+    items: [
+      {
+        label: 'Expression',
+        id: 'math/expression',
+        nodeType: NodeType.Custom,
+      },
+      {
+        label: 'Function',
+        id: 'javascript/function',
+        nodeType: NodeType.Custom,
+      },
+      {
+        label: 'Script',
+        id: 'javascript/script',
+        nodeType: NodeType.Custom,
+      },
+      {
+        label: 'CSS Definition',
+        id: 'utilities/css-definition',
+        nodeType: NodeType.Custom,
+      },
+    ],
+  },
+
+  {
+    label: 'Cloud Functions',
+    items: [
+      {
+        label: 'Request',
+        id: 'cloud-functions/request',
+        nodeType: NodeType.Data,
+      },
+      {
+        label: 'Response',
+        id: 'cloud-functions/response',
+        nodeType: NodeType.Data,
+      },
+      {
+        label: 'Cloud Data',
+        items: [
+          {
+            label: 'Aggregate Records',
+            id: 'cloud-functions/cloud-data/aggregate-records',
+            nodeType: NodeType.Data,
+          },
+        ]
+      }
+    ],
+  },
+];
+
+function recursiveBuildNodeOverviewData(item) {
+  if ('items' in item) {
+    // is a category
+    return {
+      title: item.label,
+      description: item.description,
+      items: item.items.map(recursiveBuildNodeOverviewData),
+      key: item.label,
+    };
+  } else {
+    return {
+      label: item.label,
+      docUrl: item.id,
+      nodeType: item.nodeType,
+      key: item.label,
+    };
+  }
+}
+
+exports.getNodePageData = function () {
+  return nodeData.map(recursiveBuildNodeOverviewData).map((category) => {
+    const flatItems = category.items.reduce((r, child) => {
+      if ('items' in child) {
+        return [...r, ...child.items];
+      } else {
+        return [...r, child];
+      }
+    }, []);
+
+    return { ...category, items: flatItems };
+  });
+};
+
+exports.getNodeSidebarData = function () {
+  return nodeData.map(recursiveBuildSidebarData);
+};

static/data/projects.json

@@ -0,0 +1,95 @@
+[
+    {
+        "title": "Task List App",
+        "description": "This example implements a small task list app that stores task in a database.",
+        "href": "/library/examples/task-list-app",
+        "imageUrl": "/library/examples/task-list-app/task_list_thumbnail.png",
+        "project": "/library/examples/task-list-app/task-app-1-2.zip",
+        "backend": "/library/examples/task-list-app/task-app-cf.json"
+    },
+    {
+        "title": "Custom Survey App",
+        "description": "This app is a simple user survey. It shows how to work with navigation, visual and interaction states and custom components.",
+        "href": "/library/examples/survey-app",
+        "imageUrl": "/library/examples/survey-app/survey_thumbnail2.png",
+        "project": "/library/examples/survey-app/survey_app_1-4.zip"
+    },
+    {
+        "title": "Star Rating Component",
+        "description": "A small example that implements an animated interactive star rating component.",
+        "href": "/library/examples/star-rating-component",
+        "imageUrl": "/library/examples/star-rating-component/star-rating-thumb.png",
+        "project": "/library/examples/star-rating-component/star-rating-1-1.zip"
+    },
+    {
+        "title": "Navigation with URL encoded parameters",
+        "description": "This example demonstrated how to use **Multiple levels of navigation stacks** and how to **Encode Parameters in the URL** to pass values between pages.",
+        "href": "/library/examples/navigation-url-encoding",
+        "imageUrl": "/library/examples/navigation-url-encoding/show-products-page-4.png",
+        "project": "/library/examples/navigation-url-encoding/param-encoding-url.zip"
+    },
+    {
+        "title": "Suatch Google Sheets Example",
+        "description": "A cool color picker that can helps a designer to pick good colors. Uses the Google Sheet Module.",
+        "href": "/library/examples/suatch",
+        "imageUrl": "/library/examples/suatch/suatch_1-1-thumb.png",
+        "project": "/library/examples/suatch/suatch_1-2.zip"
+    },
+    {
+        "title": "Travel App",
+        "description": "This app for travelers shows a number of destinations in a card like **horizontal list**. It also includes a simple **Navigation** system..",
+        "href": "/library/examples/travel-app",
+        "imageUrl": "/library/examples/travel-app/travel_app_thumbnail.png",
+        "project": "/library/examples/travel-app/travel_app_1-2.zip"
+    },
+    {
+        "title": "Mapbox Example",
+        "description": "A small app that makes use of the MapBox module to implement a map with markers.",
+        "href": "/library/examples/mapbox",
+        "imageUrl": "/library/examples/mapbox/markers-1.png",
+        "project": "/library/examples/mapbox/markers.zip"
+    },
+    {
+        "title": "Recipe App",
+        "description": "A small app that makes use of the MapBox module to implement a map with markers.",
+        "href": "/library/examples/recipe-app",
+        "imageUrl": "/library/examples/recipe-app/thumbnail-1.png",
+        "project": "/library/examples/recipe-app/arrays.zip"
+    },
+    {
+        "title": "Modal Wizard",
+        "description": "This example shows how to use a Component Stack in combination with a Popup to create a simple modal wizard-type of form.",
+        "href": "/library/examples/modal-wizard",
+        "imageUrl": "/library/examples/modal-wizard/final-1.png",
+        "project": "/library/examples/modal-wizard/component-stack-1.zip"
+    },
+    {
+        "title": "CRUD Form",
+        "description": "An example of a CRUD form. CRUD stands for Create, Read, Update and Delete, and the example shows how to do these actions using the Noodl data nodes.",
+        "href": "/library/examples/crud-form",
+        "imageUrl": "/library/examples/crud-form/final-crud-thumb.png",
+        "project": "/library/examples/crud-form/final-crud-1.zip"
+    },
+    {
+        "title": "Conditional Form",
+        "description": "An example of a form using Noodl logical nodes to change contents depending on what options the user picks in the form.",
+        "href": "/library/examples/conditional-form",
+        "imageUrl": "/library/examples/conditional-form/final-2.png",
+        "project": "/library/examples/conditional-form/conditional-form-1.zip"
+    },
+    {
+        "title": "Javascript Example",
+        "description": "An example that shows how you can mix and match nodes with Javascript in Noodl. It implements a multi select list with a couple of operations on the list, such as batch delete and copy.",
+        "href": "/library/examples/javascript-example",
+        "imageUrl": "/library/examples/javascript-example/final-1.png",
+        "project": "/library/examples/javascript-example/biz-logic-js.zip"
+    },
+    {
+        "title": "Sign Up / Sign In Form",
+        "description": "This app includes a simple Sign Up / Sign In form, including buttons for requesting a new password and validating your email.",
+        "href": "/library/examples/sign-up",
+        "imageUrl": "/library/examples/sign-up/signup_thumbnail.png",
+        "project": "/library/examples/sign-up/signuptemplate-1-2.zip",
+        "backend": "/library/examples/sign-up/signup-app-cf.json"
+    }
+]

static/data/youtubeVideos.json

@@ -0,0 +1,32 @@
+[
+    {
+        "videoId": "titAgD6L6no",
+        "title": "Using the Noodl Figma plugin",
+        "description": "This video shows how to use the Noodl Figma plugin.",
+        "videoLength": "06.56"
+    },
+    {
+        "videoId": "u04KnVju4KU",
+        "title": "Building AirBnB Clone",
+        "description": "Casually building an AirBnB clone and testing some new upcoming features of 2.8.2",
+        "videoLength": "2:09:22"
+    },
+    {
+        "videoId": "zFJLPNCZGV8",
+        "title": "Noodl 2.8 release overview",
+        "description": "A look at the new features of 2.8 most norably cloud functions.",
+        "videoLength": "04:15"
+    },
+    {
+        "videoId": "ATyqeK_deu4",
+        "title": "Noodl Basics - Visual States",
+        "description": "Learn how to use Noodl visual interaction states.",
+        "videoLength": "1:54"
+    },
+    {
+        "videoId": "ecas2QPbr0g",
+        "title": "Intro to cloud services",
+        "description": "Continue the learning journey from the intro lessons in this video guide.",
+        "videoLength": "22:08"
+    }
+]