mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 14:52:54 +01:00
515 lines
17 KiB
JavaScript
515 lines
17 KiB
JavaScript
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: 'doc',
|
|
label: 'Migrating from Noodl hosted Git',
|
|
id: 'guides/collaboration/migrating-from-noodl-hosted-git',
|
|
imageUrl: '/img/featured-content-images/basic.png',
|
|
description:
|
|
'Projects created with closed source Noodl need to be migrated for collaboration to work',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'category',
|
|
label: 'Deploying and hosting apps',
|
|
link: { type: 'doc', id: 'guides/deploy/overview' },
|
|
items: [
|
|
{
|
|
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);
|
|
};
|