noodlapp/noodl-docs

The Noodl documentation website (previously https://docs.noodl.net/)

noodl-docs's Issues

Page node URLs cannot contain a "." (dot)

Improve documentation

Describe the problem

The way the Page Router and hosting is currently setup, it is not possible to have a Page with a URL that contains a "." (dot). This can probably be fixed custom self hosting, but would be nice to communicate it somewhere.

Additional context

The reason it is currently not supported is because the way we handle SPA (single index.html file) and file extensions.

Module(simple-tooltips): Update Getting started

Improve documentation

Link

https://docs.noodl.net/2.9/library/modules/simple-tooltips/

Describe the problem

Currently the Getting started section is showing how to use the Tooltip node. From feedback I have heard that the Show Tooltip node is easier to use.

Describe the improvement

Move the current Getting started text to another place and replace it with a guide on how to use the Show Tooltip node instead.

Guide on how to work with Cloud Files

Improve documentation

Describe the problem

Currently there is no dedicated guide on how to best work with Cloud Files and the best practices. I think this would be a great addition to share knowledge to avoid and future scalability issues.

Additional context

Here are some of my notes of things that could be included:

• Recommended to have a dedicated Parse class for files (this can be questioned when scaling the database)
• When another class is using a file, it should be a pointer?
• I want to update an image, then I have to delete the old one and upload the new one. What is the best way to ensure I never lose anything?
• In Parse there is a File type column, that can be connected directly with the Cloud File. https://docs.noodl.net/2.9/nodes/data/cloud-data/upload-file

Incorrect link on Chart.js Module page.

Documentation Bug report

Describe the bug

Incorrect link on Chart.js Module page.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://docs.noodl.net/2.9/library/modules/chartjs/nodes/pie/
2. Click on "Here" which links to https://docs.noodl.net/2.9/library/modules/chartjs/nodes/charts/pie

Expected behavior

A redirect to https://docs.noodl.net/2.9/library/modules/chartjs/charts/pie

Additional context

Incorrect: https://docs.noodl.net/2.9/library/modules/chartjs/nodes/charts/pie
Correct:   https://docs.noodl.net/2.9/library/modules/chartjs/charts/pie

The URL is relative, this is an issue when the URL has "/" at the end.
Where https://docs.noodl.net/2.9/library/modules/chartjs/nodes/pie works.

Document the SEO JavaScript API

Improve documentation

Describe the improvement

Write up the JavaScript reference for the JavaScript SEO API and the reason why it is there.

Improve our Parse Dashboard CSV import/export page

Improve documentation

Link

https://docs.noodl.net/2.9/docs/guides/cloud-data/import-export-csv/

Describe the problem

Right now it is lacking information about how the CSV importer is matching the columns, there are probably more things that we could improve in here. Are we covering all the data types?

Describe the improvement

• Summarize a good understanding of how the CSV import is matching the headers.
• What kind of classes can be imported into? Are some columns ignored?
• How does Export to Import work? Are there any downsides?

Clean up sidebars*.js files

Improve

Describe the problem

Right now there are quite a few sidebars*.js files in the root folder. Is there a better way we can handle this? Like move the files into their respective folders?

Exclude <##output:value-*##> from the outputted HTML

Documentation Bug report

Describe the bug

Right now we have a few unique syntaxes which are used by the editor to highlight text.

<##input:value-*##> is one of them, which can be found here for example:
https://docs.noodl.net/2.9/nodes/component-utilities/parent-component-object/#properties:~:text=Properties-,%3C%23%23input%3Avalue%2D*%23%23%3E,-The%20properties%20to

The editor is only fetching the Markdown files and not the HTML files, the way this is done is by a Docusaurus plugin. A solution would be to remove it from the HTML output, but still include it in the Markdown files used by the editor.
https://github.com/noodlapp/noodl-docs/blob/main/plugins/copy-node-markdowns.js

Expected behavior

To not include <##input:value-*##> in the HTML content on the website.

Markdown corruptions in included sections of help documentation

Documentation Bug report

Describe the bug

Markdown is being corrupted on a number of pages and producing unformatted tables

To Reproduce

Go to:

https://noodlapp.github.io/noodl-docs/nodes/ui-controls/button/
See inputs and outputs

https://noodlapp.github.io/noodl-docs/nodes/ui-controls/checkbox/
See inputs and outputs

https://noodlapp.github.io/noodl-docs/nodes/ui-controls/dropdown/
See inputs and outputs

On forking repo these sections appear to be included from other pages.

Expected behavior

see a properly formatted table

Screenshots

Document the Noodl.Env API

Improve documentation

Describe the improvement

Although the API was added in 2.9.1 this was skipped. Because it will be more relevant in a one of the upcoming releases where it is utilized even more.
I will assign myself to this, and include the future additions.

Document Geopoints

Improve documentation

Describe the problem

Parse Platform has support for Geopoints, and so does Noodl. Right now there is very limited documentation on Geopoints on the docs.

Describe the improvement

Create a page about Geopoint, where and how they can be used.

Additional context

A good place to start is you can query for geopoints in a sphere, this is very nice when working with the Mapbox module.

• https://parseplatform.org/Parse-SDK-JS/api/v1.11.1/Parse.GeoPoint.html

Another interesting note is that some Map providers use different Lng/Lat format, which can be very confusing.
https://support.google.com/maps/answer/18539?hl=en&co=GENIE.Platform%3DDesktop#:~:text=List%20your%20latitude%20coordinates%20before,is%20between%20%2D180%20and%20180

Google Sheets module invalid image URL

Documentation Bug report

Describe the bug

The image URL is invalid, but the image does exist.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://docs.noodl.net/2.9/library/modules/gsheets/guides/setting-up/#summary
2. The image doesn't load.

Expected behavior

The image to load.

Additional context

It seems that the useBaseUrl method is not handling the correct path.

Improve Search by not indexing the Frontpage

Documentation Bug report

Describe the bug

"Creating a Backend" link is going to the frontend providing no value in the search results.

To Reproduce

The link goes to the frontpage.

Expected behavior

To not index the frontpage, there is no reason why you would be searching for it.

Additional context

Right now the search is not perfect, and is quite a big task to improve.
Ideally we should create separate issues for search, but all the issues are very linked together.

Module(Mapbox): Custom Geocoder component

Improve documentation

Link

https://docs.noodl.net/2.9/library/modules/mapbox/guides/geocoder/

Describe the improvement

We should create a page descripting how to create a custom Geocoder / Address search component.

Additional context

Here is an example:
https://mapbox-module-test.sandbox.noodl.app/geocoding-api

Search:

// Define the expected inputs for the script
Script.Inputs = {
  Query: "string",
};

// Define the expected outputs for the script
Script.Outputs = {
  Items: "array",
  Searched: "signal",
};

// Set the endpoint URL for the Mapbox geocoding API
const ENDPOINT = 'https://api.mapbox.com/geocoding/v5/mapbox.places';

// Define an asynchronous function to make the API request
async function makeRequest() {
  // Get the Mapbox access token from Noodl project settings
  const access_token = Noodl.getProjectSettings().mapboxAccessToken;
  
  // Encode the search query to be URL-safe
  const search_text = encodeURIComponent(Script.Inputs.Query);

  // Define query parameters for the API request
  // 
  // Playground by Mapbox to test out all the features:
  // https://docs.mapbox.com/playground/geocoding
  //
  // Here is a list of all the different possible types:
  //  - address
  //  - country
  //  - region
  //  - postcode
  //  - district
  //  - place
  //  - neighborhood
  //  - locality
  //  - poi
  const queryParams = {
    access_token, // Provide the access token
    proximity: [Script.Inputs.lng, Script.Inputs.lat].join(','), // Bias results towards user's location
    limit: 5, // Maximum number of results to return
    // types: ["address"].join(","), // Filter results to include only addresses
    // fuzzyMatch: true // Enable approximate matching
    language: 'en-GB'
  };

  // Construct the query string from the query parameters
  const query = Object.keys(queryParams)
    .filter((key) => !!queryParams[key]) // Filter out empty values
    .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`)
    .join('&');

  // Make the API request and get the response as JSON
  const response = await fetch(`${ENDPOINT}/${search_text}.json?${query}`);
  const json = await response.json();

  // Map the API response to an array of search results
  const items = json.features.map((x) => Noodl.Object.create({
    text: x.text,
    place_name: x.place_name,
    // Convert the array of [latitude, longitude] to a Geopoint
    center: { latitude: x.center[0], longitude: x.center[1] }
  }));

  Script.Outputs.Items = items;
  Script.Outputs.Searched();
}

Script.Signals = {
  Search() {
    makeRequest();
  },
};

Center to the clicked item:

const items = Inputs.Items;
const itemId = Inputs.ItemId;

const item = items.find((x) => x.id === itemId);
if (!item) throw new Error("Cannot find clicked item.");

// The center geopoint of the clicked item.
const geopoint = item.center;

const mapboxObject = Inputs.MapboxObject;
if (!mapboxObject) throw new Error("Mapbox Object is invalid.");

mapboxObject.flyTo({
    center: [geopoint.latitude, geopoint.longitude],
    essential: true,
    zoom: 15
});

The repeater item is just a button that is outputting a Click signal.

Node References links are acting based on relative URL

Documentation Bug report

Describe the bug

The links are acting differently based on relative URL.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://docs.noodl.net/2.9/nodes/overview
2. All the nodes links are working now, like "Group" etc
3. Now go to https://docs.noodl.net/2.9/nodes/overview/ with a slash at the end
4. Now all the links are invalid.

Expected behavior

The links to work the same way.

Additional context

This is related to this file where it fetches the id to be used as links.

noodl-docs/static/data/nodeData.js

Lines 18 to 54 in 53f0d63

	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,
	},
	],