Merge branch 'master' into feature/25955-html-attribute-for-buttons-a…

…nd-links
flotiq · Jan 10, 2025 · fe57a2b · fe57a2b
2 parents cd76ac7 + 93561cf
commit fe57a2b
Show file tree

Hide file tree

Showing 111 changed files with 559 additions and 267 deletions.
diff --git a/docs/API/content-type/creating-ctd.md b/docs/API/content-type/creating-ctd.md
diff --git a/docs/API/content-type/updating-ctd.md b/docs/API/content-type/updating-ctd.md
diff --git a/docs/API/images/api-keys-menu.png b/docs/API/images/api-keys-menu.png
diff --git a/docs/API/images/api-keys.png b/docs/API/images/api-keys.png
diff --git a/docs/API/images/api-keys_1.png b/docs/API/images/api-keys_1.png
diff --git a/docs/API/images/api-keys_3.png b/docs/API/images/api-keys_3.png
diff --git a/docs/API/images/api-keys_4.png b/docs/API/images/api-keys_4.png
diff --git a/docs/API/images/frameworkslogos-nodejs.png b/docs/API/images/frameworkslogos-nodejs.png
diff --git a/docs/API/images/frameworkslogos.png b/docs/API/images/frameworkslogos.png
diff --git a/docs/API/search.md b/docs/API/search.md
@@ -28,6 +28,8 @@ You can use the search engine via the `GET /api/v1/search` endpoint to search th
     | order_by               | string | Name of the field to sort results by (they are always primarily sorted by `_score`)                                                                                                                                                                                                                                                                 |
     | order_direction        | string | Direction of sorting (`asc` for ascending or `desc` for descending, default `asc`)                                                                                                                                                                                                                                                                  |
     | random_seed            | number | Seed for random sorting order (overrides `order_by`)                                                                                                                                                                                                                                                                                                |
+!!! Note
+    The Flotiq search endpoint supports querying up to a maximum of 10,000 results.
 
 ## Example: Search for "Flotiq" in posts
 

diff --git a/docs/CLI/images/wordpress-content-types.png b/docs/CLI/images/wordpress-content-types.png
diff --git a/docs/Deep-Dives/images/angular_sdk.png b/docs/Deep-Dives/images/angular_sdk.png
diff --git a/docs/Deep-Dives/images/building-a-banner-rotator/flotiq-api-keys.png b/docs/Deep-Dives/images/building-a-banner-rotator/flotiq-api-keys.png
diff --git a/docs/Deep-Dives/images/building-a-blog-in-3-minutes/3-minute-blog-example-data.png b/docs/Deep-Dives/images/building-a-blog-in-3-minutes/3-minute-blog-example-data.png
diff --git a/docs/Deep-Dives/images/contact-form-flotiq-editor.png b/docs/Deep-Dives/images/contact-form-flotiq-editor.png
diff --git a/...ages/jamstack-recipes-complex-data-structures/flotiq-form-simple-data-model.png b/...ages/jamstack-recipes-complex-data-structures/flotiq-form-simple-data-model.png
diff --git a/...Dives/images/jamstack-recipes-complex-data-structures/flotiq-list-data-type.png b/...Dives/images/jamstack-recipes-complex-data-structures/flotiq-list-data-type.png
diff --git a/docs/Deep-Dives/images/multilingual-content/add-co-1.png b/docs/Deep-Dives/images/multilingual-content/add-co-1.png
diff --git a/docs/Deep-Dives/images/multilingual-content/add-co-2.png b/docs/Deep-Dives/images/multilingual-content/add-co-2.png
diff --git a/docs/Deep-Dives/images/multilingual-content/add-co-3.png b/docs/Deep-Dives/images/multilingual-content/add-co-3.png
diff --git a/docs/Deep-Dives/images/nextjs-react-typescript-openapi/flotiq-setup-prompt.png b/docs/Deep-Dives/images/nextjs-react-typescript-openapi/flotiq-setup-prompt.png
diff --git a/docs/Deep-Dives/images/todomvc-react-headless-cms/todo-ctd.png b/docs/Deep-Dives/images/todomvc-react-headless-cms/todo-ctd.png
diff --git a/docs/Deep-Dives/images/upload-media/example-app.png b/docs/Deep-Dives/images/upload-media/example-app.png
diff --git a/docs/Deep-Dives/images/webstudio/webstudio-adding-data-variable.png b/docs/Deep-Dives/images/webstudio/webstudio-adding-data-variable.png
diff --git a/docs/Deep-Dives/images/webstudio/webstudio-binding-text.gif b/docs/Deep-Dives/images/webstudio/webstudio-binding-text.gif
diff --git a/docs/Deep-Dives/images/webstudio/webstudio-config-collection-item-variable.png b/docs/Deep-Dives/images/webstudio/webstudio-config-collection-item-variable.png
diff --git a/docs/Deep-Dives/images/webstudio/webstudio-creating-overview.gif b/docs/Deep-Dives/images/webstudio/webstudio-creating-overview.gif
diff --git a/docs/Deep-Dives/images/webstudio/webstudio-define-dynamic-path-value.png b/docs/Deep-Dives/images/webstudio/webstudio-define-dynamic-path-value.png
diff --git a/docs/Deep-Dives/images/webstudio/webstudio-graphql-variables.png b/docs/Deep-Dives/images/webstudio/webstudio-graphql-variables.png
diff --git a/docs/Deep-Dives/images/webstudio/webstudio-inspecting-data-variable.png b/docs/Deep-Dives/images/webstudio/webstudio-inspecting-data-variable.png
diff --git a/docs/Deep-Dives/images/webstudio/webstudio-page-configuration.png b/docs/Deep-Dives/images/webstudio/webstudio-page-configuration.png
diff --git a/docs/Deep-Dives/nextjs-react-typescript-openapi.md b/docs/Deep-Dives/nextjs-react-typescript-openapi.md
@@ -27,7 +27,7 @@ Start with a simple content type, for example one that represents a Hero section
 
  ![Content type definition for a Hero section component](images/nextjs-react-typescript-openapi/ctd-preview.png){: .center .border .width75}
 
-once you create the content type definition - go ahead and add some objects too.
+Once you create the content type definition - go ahead and add some objects too.
 
 ## Create NextJS project
 
@@ -41,6 +41,39 @@ cd flotiq-component-demo
 
 Read more about [create-next-app here](https://nextjs.org/docs/api-reference/create-next-app).
 
+## Get Flotiq API Key
+To access your Flotiq data in your app, you need to obtain your Flotiq API key.
+There are two ways of doing that:
+
+### Flotiq Setup
+We can use `flotiq-setup` to import API keys to variable files like `.env`.
+
+Simply run `npx flotiq-setup` to automatically import your API keys to variable files.
+After running the `flotiq-setup` script, your browser will pop-up with a prompt to select which space the app will be able to access.
+ ![](images/nextjs-react-typescript-openapi/flotiq-setup-prompt.png)
+
+
+### Flotiq Dashboard
+
+If you want to manually get your API key for your application, you can do so by visiting Flotiq Dashboard.
+API Keys can be accessed via the API Keys page in the Flotiq Panel.
+For our purpose, the Read-only key is sufficient.
+![](/docs/API/images/api-keys-menu.png){: .center .width25 .border}
+![](/docs/API/images/api-keys_1.png){: .center .border}
+
+
+After you obtain your API key, you need to provide it to Codegen and your app.
+To do so, just create `.env` file in the app folder with following content:
+```
+FLOTIQ_API_KEY=<YOUR_API_KEY>
+```
+{ data-search-exclude }
+
+Now that you added the API key, you can proceed with next steps.
+
+!!! note
+    You can read more about [API Keys here.](/docs/API/)
+
 ## Flotiq Codegen TS 
 This package simplifies Typescript Fetch API integration for your Flotiq project, tailored to your Flotiq account data.
 To build your customized API package, just run this command:

diff --git a/docs/Deep-Dives/webstudio.md b/docs/Deep-Dives/webstudio.md
@@ -0,0 +1,162 @@
+---
+tags:
+  - Content Creator
+  - Developer
+---
+
+title: Flotiq Webstudio integration | Flotiq docs
+description: Integrate Flotiq with Webstudio to jump-start your project code-free
+
+# Using Flotiq with Webstudio to build a headless website code free
+
+In this deepdive you will learn how to easily integrate Flotiq with Webstudio to build a website code-free with all the advantages of a headless workflow.
+
+## Prerequisites
+
+1. Flotiq account [Register a Flotiq account here](https://editor.flotiq.com/register.html){:target="_blank"}.
+2. Flotiq API Key [More about Flotiq API Keys](https://flotiq.com/docs/API/){:target="_blank"}.
+3. Webstudio account [Register a Webstudio account here](https://webstudio.is/){:target="_blank"}.
+
+!!! Note
+    Webstudio requires [Pro tier plan](https://webstudio.is/pricing){:target="_blank"} in order to use the [Resource Feature](https://docs.webstudio.is/university/foundations/variables#resource){:target="_blank"}.
+    If you don't yet own this plan tier in Webstudio, you can use 14-days trial, or use Divhunt that also allows for building code-free website with headless workflow, but offers API features in free tier.
+    You can also check our [guide for integrating Flotiq with Divhunt](https://flotiq.com/docs/Deep-Dives/divhunt/).
+
+    Flotiq doesn't require a paid plan for integration with any of the tools mentioned above.
+
+# Integrating Flotiq with Webstudio
+
+## Flotiq Setup
+
+To create dynamic pages you will need a [content type](https://flotiq.com/docs/API/content-type/creating-ctd/){:target="_blank"} that individual pages will get their content from.
+In this guide we are using Flotiq's blogpost template, that contains `title`, `slug`, `excerpt`, `content` and `header image` fields that we will use in the dynamically generated pages later on.
+
+After creating the content type, add a few example posts and proceed to Webstudio setup.
+
+## Webstudio Setup
+
+### Creating a project
+
+Start by going to [Webstudio dashboard](https://apps.webstudio.is/dashboard){:target="_blank"} and edit your project or create a new one. You can use either an existing template, or create an empty project. Then select your newly created project and proceed to either [creating dynamic content on your page](#embed-data-from-flotiq-to-webstudio-page) or [creating dynamic pages](#defining-a-dynamic-page).
+
+### Defining a dynamic page
+
+With Flotiq and Webstudio you can automate the process of creating pages, which is ideal in uses like blog or portfolio.
+With this integration you can easily create dynamic pages for your site.
+
+When setting up Webstudio for dynamic pages, start off by creating a new page with dynamic path, as presented in the image below.
+
+ ![Configure dynamic page in Webstudio](images/webstudio/webstudio-page-configuration.png){: .center .border}
+
+Pay attention to the last part of the `Dynamic Path` being `:slug`.
+It defines the variable that will be used as a unique path to each page generated, so it should use a unique text field from your content type, be it slug, title, or something else.
+Don't forget the colon `:`, which indicates to Webstudio that this part is a variable.
+
+Once you create the dynamic path variable, define its value in the `Toggle dynamic page address` setting in Webstudio.
+Assign a value from one of the objects you added in Flotiq.
+
+ ![Define dynamic path value in Webstudio](images/webstudio/webstudio-define-dynamic-path-value.png){: .center .border}
+
+### Adding data variable
+
+After you've defined the dynamic page, you have to create a data variable, that Webstudio will use to get the content from Flotiq.
+Data variables are a tool that allow you to fetch external content and save it in your project.
+In order to add a data variable select your page settings; there you will find a section called `Data Variables` with an option to add new data variable.
+
+ ![Add data variable in Webstudio](images/webstudio/webstudio-adding-data-variable.png){: .center .border}
+
+In the data variable configuration, you have to define the following properties:
+
+* Name - a name for the variable of your choice,
+* Type - the type of the variable, in this guide we use GraphQL, although the `resource` type could also be used (mind that both variable types require a Pro Webstudio account),
+* URL - if you are using GraphQL type, it should always be `https://api.flotiq.com/api/graphql`. For resource type this value will differ, depending on your contenttype name,
+* Headers - the headers for the request to Flotiq. Here, you have to add a header with `X-Auth-Token` in the title [Flotiq API Key](https://flotiq.com/docs/API/){:target="_blank"} as a value,
+* Query - here you have to define a Query for fetching data from Flotiq in GraphQL. It should fetch the custom field, that you've selected as your dynamic page identifier earlier,
+        using the [content object GraphQL fetch with custom field](https://flotiq.com/docs/API/graph-ql/#__tabbed_2_2), so in this case we use `slug`. Whole query for fetching the content of blogpost from Flotiq BlogPost template is presented below:
+  ```graphql
+  query Post($slug: String = "") {
+    blogpost(field: "slug", value: $slug) {
+      id
+      title
+      slug
+      excerpt
+      headerImage {
+          alt
+          url
+      }
+    }
+  }
+  ```
+  { data-search-exclude }
+
+* GraphQL Variables - here you have to bind the value of your dynamic path (the one you defined in the dynamic page configuration) to the field that you query your Flotiq data by. The expression will look like this:
+  ```json
+  {
+    "<your graphql query value variable>": system.params.<webstudio dynamic path variable>
+  }
+  ```
+  { data-search-exclude }
+
+ ![Adding GraphQL Variables to data variable in Webstudio](images/webstudio/webstudio-graphql-variables.png){: .center .border}
+
+Once you add the data variable, you will be able to inspect it. If all properties were defined properly, you will see the content of your Flotiq content object with the slug (or other field you use as page identifier) as the inspect value.
+
+ ![Inspecting data variable](images/webstudio/webstudio-inspecting-data-variable.png){: .center .border}
+
+### Embed data from Flotiq to Webstudio page
+
+Now that your Flotiq data is fetched and saved in the Webstudio data variable, you can embed it in components on your page.
+To do so, add a new component to your page in Webstudio, and open it's settings.
+There you can edit the properties of the selected component and assign them values from your content objects data fetched from Flotiq,
+for example for a text field, edit the `Text Content` property, open Expression editor (accessed by clicking the blue "plus" button),
+type in the data variable name that you defined earlier, and select the values from your fields, for example: `VariableName.data.data.blogpost.title`.
+
+ ![Binding text in Webstudio](images/webstudio/webstudio-binding-text.gif){: .center .border}
+
+Different content fields may require embedding them in different components. For example in order to insert an image from Flotiq, you should add `image` component to your page,
+open expression editor for `Source` property, and provide the URL value from the media link from your content object, with Flotiq's base url at the start of the expression, like so:
+
+  `"https://api.flotiq.com/" + VariableName.data.data.blogpost.headerImage[0].url`.
+
+### Creating pages overview
+
+With Webstudio you can create an overview of all your objects fetched from Flotiq. This way you can create a collection of blogposts, events on other on your main page.
+Start by going to home page or whatever page you want to include the overview. Then [add new data variable](#adding-data-variable), which will look similarly to the one for dynamic pages,
+but this one will use the endpoint for listing all content objects from your Flotiq content type, not a specific one. To do this, append `List` to the API name of the type.
+For Flotiq's blog post template it will look like this:
+
+```graphql
+query Posts {
+  blogpostList {
+    id
+    title
+    slug
+    excerpt
+    headerImage {
+        alt
+        url
+    }
+  }
+}
+```
+{ data-search-exclude }
+
+After you have your data variable working correctly, add a `Collection` component to your page in Webstudio, select it, and edit it's `data` property with an expression,
+similarly to how it's done for [embedding data to dynamic page](#embed-data-from-flotiq-to-webstudio-page), however this time you will use the whole array of objects,
+so the expression will look more or less like this:
+
+`<Data Variable Name>.data.data.<Content Type API name>List`, in my case it will be `Post List.data.data.blogpostList`.
+
+If the data is fetched correctly, Webstudio will create a placeholder for all your content objects from the selected content type, however for now it will be only raw data in JSON format.
+If you click on the collection component on the sidebar, you will notice a new data variable being `Collection Item`. It represents every item from the array of objects.
+You may edit it by giving it a custom name of your choice.
+
+ ![Editing variable for collection items](images/webstudio/webstudio-config-collection-item-variable.png){: .center .border}
+
+Once you have a collection item with items from our Flotiq's content list, you can edit the collection by adding new components to the collection items. Mind that editing one item will automatically edit all of them. Now you can create the custom card using the data from your content object, similarly to [embedding data to dynamic page](#embed-data-from-flotiq-to-webstudio-page) but now you are going to use the `Collection Item` variable.
+
+ ![Editing variable for collection items](images/webstudio/webstudio-creating-overview.gif){: .center .border .width90}
+
+## Conclusion
+
+Integrating Flotiq with Webstudio enables the seamless creation of dynamic, content-driven websites using a headless workflow without the need for coding. This combination empowers users to manage and deliver content efficiently while focusing on design and functionality. By simplifying the process, it ensures both developers and non-technical users can achieve professional results effortlessly.
diff --git a/docs/Universe/images/gatsby/gatsby-starters.png b/docs/Universe/images/gatsby/gatsby-starters.png
diff --git a/docs/Universe/images/n8n/add-email-ctd.png b/docs/Universe/images/n8n/add-email-ctd.png
diff --git a/docs/Universe/images/n8n/defined_key.png b/docs/Universe/images/n8n/defined_key.png
diff --git a/docs/Universe/images/n8n/flotiq_errors.png b/docs/Universe/images/n8n/flotiq_errors.png
diff --git a/docs/Universe/images/nextjs/nextjs-starters.png b/docs/Universe/images/nextjs/nextjs-starters.png
diff --git a/docs/Universe/images/pabbly/pabbly-add-ctd-mailing-list.png b/docs/Universe/images/pabbly/pabbly-add-ctd-mailing-list.png
diff --git a/docs/panel/Plugins/images/custom-links/complex-routing-co-form.png b/docs/panel/Plugins/images/custom-links/complex-routing-co-form.png
diff --git a/docs/panel/Plugins/images/custom-links/install.png b/docs/panel/Plugins/images/custom-links/install.png
diff --git a/docs/panel/Plugins/images/custom-links/manage.png b/docs/panel/Plugins/images/custom-links/manage.png
diff --git a/docs/panel/Plugins/images/custom-links/simple-link-co-form.png b/docs/panel/Plugins/images/custom-links/simple-link-co-form.png
diff --git a/docs/panel/Plugins/images/custom-links/simple-routing-co-form.png b/docs/panel/Plugins/images/custom-links/simple-routing-co-form.png
diff --git a/docs/panel/Plugins/images/netlify/manage.png b/docs/panel/Plugins/images/netlify/manage.png
diff --git a/docs/panel/Plugins/images/netlify/netlify-build-in-editor-key.png b/docs/panel/Plugins/images/netlify/netlify-build-in-editor-key.png
diff --git a/docs/panel/Plugins/images/netlify/netlify-build-in-editor.png b/docs/panel/Plugins/images/netlify/netlify-build-in-editor.png
diff --git a/docs/panel/Plugins/images/netlify/plugins-screen-netlify.png b/docs/panel/Plugins/images/netlify/plugins-screen-netlify.png
diff --git a/docs/panel/Plugins/images/sidebar-plugins.png b/docs/panel/Plugins/images/sidebar-plugins.png
diff --git a/docs/panel/Plugins/images/slug/install.png b/docs/panel/Plugins/images/slug/install.png
diff --git a/docs/panel/Plugins/images/slug/manage.png b/docs/panel/Plugins/images/slug/manage.png
diff --git a/docs/panel/Plugins/images/slug/outcome.png b/docs/panel/Plugins/images/slug/outcome.png
diff --git a/docs/panel/PluginsDevelopment/img/adding-plugin-to-organization.png b/docs/panel/PluginsDevelopment/img/adding-plugin-to-organization.png
diff --git a/docs/panel/PluginsDevelopment/img/input-styles.png b/docs/panel/PluginsDevelopment/img/input-styles.png
diff --git a/docs/panel/PluginsDevelopment/img/sidebar-info-text.png b/docs/panel/PluginsDevelopment/img/sidebar-info-text.png
diff --git a/docs/panel/PluginsDevelopment/img/sidebar-preview-button.png b/docs/panel/PluginsDevelopment/img/sidebar-preview-button.png
diff --git a/docs/panel/content-objects.md b/docs/panel/content-objects.md
@@ -30,7 +30,7 @@ From the grid, the users can go to the form that allows them to edit particular
 
 ![Flotiq Object Editor](images/EditObject.png){: .center .width75 .border}
 
-There are 15 types of controls in the dashboard, all described in detail below:
+There are 16 types of controls in the dashboard, all described in detail below:
 
 * [Text](#text)
 * [Long text](#long-text)
@@ -47,6 +47,7 @@ There are 15 types of controls in the dashboard, all described in detail below:
 * [Geo](#geo)
 * [Date](#date)
 * [Block](#block)
+* [Simple list](#simple-list)
 
 All required fields are marked with a red asterisk - *.
 You can save Content Object only when you insert values in all required fields.
@@ -157,22 +158,22 @@ Second row:
 * Image - add image by providing image URL
 * Media library - opens Media Library, where you can add new files or select the ones already added
 
-* Link object - opens modal with existing objects. Once object is selected a new span is embeded into the editor HTML. The span contains following attributes:
+* Link object - opens modal with existing objects. Once object is selected a new span is embedded into the editor HTML. The span contains following attributes:
     * `data-relation-object-id` - object id
     * `data-relation-object-type` - object type
     * `data-relation-url` - object data url
 
-    Note that the span is empty and its up to you to handle it on your page programatically.
+    Note that the span is empty and its up to you to handle it on your page programmatically.
 
 * Display source - shows editable HTML markup of field contents; please change it with caution.
 
 #### Image options
 
-After image is added, you can double click to format it. You can add alternative text, change the dimensions, position and border of the image. You can also add a hyperlink to it by switching to the `Link` tab.
+After image is added, you can double-click to format it. You can add alternative text, change the dimensions, position and border of the image. You can also add a hyperlink to it by switching to the `Link` tab.
 
 ![](images/co-form/richtext/ImageProperties.png){: .center .border .width50}
 
-You can make the editor bigger by dragging the grey arrow on the bottom right corner of the control.
+You can make the editor bigger by dragging the grey arrow in the bottom right corner of the control.
 
 ### Email
 
@@ -192,7 +193,7 @@ Standard checkbox control.
 
 ### Select
 
-Standard select control. You can choose only one option.
+Standard select control. Depending on `multiple` meta property you can choose only one or many options.
 
 ### Relation
 
@@ -312,7 +313,7 @@ remove the block (`X` button) and move the block down (`arrow down` button).
     After you choose this block, the `Media library` button will appear.
     To choose an image, video or text file, you need to click that button and find the file you need to attach to the block.
 
-    You can add a border, stretch or add background to the file in the tunes menu.
+    You can add a border, stretch or add background to the file in the tunes' menu.
 
     ![](images/co-form/block/MediaTunes.png){: .border .width25 .center}
 
@@ -332,6 +333,10 @@ remove the block (`X` button) and move the block down (`arrow down` button).
 
     The tunes allow adding information whether the table has header or not.
 
+### Simple list
+
+Array of standard text inputs wit possibility of choosing the order, in other places referred as Options control.
+
 ## Deleting content
 
 You can delete the object either by clicking the `Delete` button on the edit object page (in the top right corner):