Merge branch 'master' into feature/24862-mass-edit

docs/API/index.md

@@ -53,7 +53,11 @@ You can authenticate your requests by `X-AUTH-TOKEN` header, or by the query par
 
 An example query request with endpoint:
 
-`https://api.flotiq.com/api/v1/content/your_content_name?auth_token=YOUR_AUTH_TOKEN`:
+!!! Example
+    <pre class="h-3em">
+    <code class="hljs plaintext">https://api.flotiq.com/api/v1/content/your_content_name?auth_token=YOUR_AUTH_TOKEN
+    </code>
+    </pre>
 
 Or an example queries with `X-AUTH-TOKEN` header:
 

docs/Deep-Dives/nextjs-react-typescript-openapi.md

@@ -37,60 +37,56 @@ cd flotiq-component-demo
 
 Read more about [create-next-app here](https://nextjs.org/docs/api-reference/create-next-app).
 
-## Export Flotiq API and build the API package
-
-When the Next.js project is already up and running you will now connect it to your Flotiq API. Start by exporting the API definition into a file. You will need your read-only API key to do this - [here’s how to get it](https://flotiq.com/docs/API/?h=api+key#application-api-keys).
-
-```bash
-export FLOTIQ_RO_API_KEY=<YOUR_RO_API_KEY_HERE>
-curl -X GET "https://api.flotiq.com/api/v1/open-api-schema.json?hydrate=1" -H "X-Auth-Token: ${FLOTIQ_RO_API_KEY}" > oas.json
-```
-{ data-search-exclude }
-
-This command will save your OpenAPI definition into a file called `oas.json` in your current directory. Next - you will process that file with `openapi-generator` to build the API client:
+## 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:
 
 ```bash
-docker run --rm -it -v "${PWD}:/tmp" \
-       --workdir /tmp openapitools/openapi-generator-cli \
-       generate -i /tmp/oas.json -g typescript-node -o /tmp/flotiq-api \
-       --additional-properties=modelPropertyNaming=original,paramNaming=original,withNodeImports=true,supportsES6=true,npmName=component-api,npmVersion=0.1.0
+npx flotiq-codegen-ts generate 
 ```
 { data-search-exclude }
 
-This will save the API in `flotiq-api` directory, so you now have to move the built API into its proper location (note that the target path will change if you are not using NextJS `src` and `app` directories):
-
-```bash
-mv flotiq-api ./src/app/flotiq
-```
-{ data-search-exclude }
+!!! note 
+    If you make any changes (additions or deletions) to the content type definitions in your Flotiq account,
+    you will need to rerun npx `flotiq-codegen-ts generate` command
 
+!!! note 
+    You can use the `flotiq-codegen-ts generate --watch` to enable automatic detection of changes to your 
+    `Content definitions` by `Flotiq Codegen TS`. This will automatically regenerate the SDK to reflect the current 
+    state of your `Content definitons`.
 
 ## Use the API
 
 We’re almost done! Now you have to edit 2 files in the NextJS repo: 1. `src/app/page.tsx` and 2. `src/app/components/hero.tsx` (new file) to start using the API.
 
 Let’s start with `page.tsx`. First, we need to connect to Flotiq API, add the following lines to your file
 
-```bash
+```javascript
 // add this at the beginning of the file, with other imports
-import { ContentHeroApi, ContentHeroApiApiKeys, HeroList } from './flotiq/api'
-
-
-const FLOTIQ_API_URL = "https://api.flotiq.com";
-const FLOTIQ_API_KEY = "<YOUR_RO_API_KEY_HERE>"; // RO
-
-
-
-async function getData() : HeroList {
-
-  const heroApi = new ContentHeroApi(FLOTIQ_API_URL);
+import { FlotiqApi } from '../flotiqApi/index'
+
+const apiKey = process.env.FLOTIQ_API_KEY
+
+async function getData(
+    page = 1,
+    limit = 10,
+    filters = undefined,
+    direction = 'asc',
+    orderBy = 'date'
+) : HeroList {
+  const api = new FlotiqApi(apiKey);
   heroApi.setApiKey(ContentHeroApiApiKeys.HeaderApiKeyAuth, FLOTIQ_API_KEY);
 
   // let's fetch all sections and make sure we hydrate them 
-  const {body: list} = await heroApi.listHero(undefined, undefined, undefined, undefined, 1)
-  
-  return list;
-
+  return await api.hero.list({
+      page,
+      limit,
+      filters,
+      order_by: orderBy,
+      order_direction: direction,
+      hydrate:1
+  })
+
 }
 ```
 { data-search-exclude }
@@ -103,10 +99,9 @@ export default async function Home() {
   return (
     <main>
       <div className="bg-white py-24 sm:py-32">
-          {list.data?.map(function(section, index){
-  
+          {list.data?.map((section, index)=>{
               return <HeroComponent hero={section}></HeroComponent>
-            })
+            });
           }
           </div>
     </main>
@@ -118,7 +113,7 @@ export default async function Home() {
 now, let’s create that HeroComponent in the `src/app/components/hero.tsx` file:
 
 ```bash
-import { Hero } from "../flotiq/api";
+import { Hero } from "../../../flotiqApi/src";
 
 interface HeroProps {
   hero: Hero
@@ -141,4 +136,3 @@ export default function HeroComponent({hero} : HeroProps){
 That’s it! Start using TypeScript with Flotiq data. By now you probably noticed how convenient it is to have explicit typing and code completion in your editor:
 
  ![IDE autocompleting property names of your objects](images/nextjs-react-typescript-openapi/ide-code-completion.png){: .center .border}
-

docs/css/flotiq.css

@@ -256,6 +256,10 @@ pre::before {
   border: 0;
 }
 
+.h-3em {
+  height: 3em;
+}
+
 .flotiq-form .mat-fab.mat-primary, .flotiq-form .mat-flat-button.mat-primary, .flotiq-form .mat-mini-fab.mat-primary, .flotiq-form .mat-raised-button.mat-primary[type="submit"] {
   background-color: #0083FC;
 }

docs/panel/Plugins/Custom-links.md

@@ -34,7 +34,7 @@ Next, fill in the details and click `Save changes` to complete your plugin setup
 
 You're done. Now you will see `Example page` in Content Objects forms with `http://example.com/` link.
 
-![Custom links button in Flotiq editor](images/custom-links/simple-link-co-form.png){: .center .width100 .border}
+![Custom links button in Flotiq editor](images/custom-links/simple-link-co-form.png){: .center .width75 .border}
 
 
 ## Examples
@@ -47,9 +47,9 @@ One of the most common use cases for using this plugin is to add a direct link t
 
 if you use this configuration with an object similar to this
 
-![Content object with category and slug](images/custom-links/simple-routing-co-form.png){: .center .width100 .border}
+![Content object with category and slug](images/custom-links/simple-routing-co-form.png){: .center .width75 .border}
 
-you will see the `first-page` link that will lead you to `https://my-blog/post/first-page`.
+you will see the `green-plant` link that will lead you to `https://my-product.com/product/green-plant`.
 
 ### Creating links to pages using complex routing
 
@@ -59,6 +59,6 @@ Here's a bit more complex example, where the page routing requires to provide a
 
 if you use this configuration with an object similar to this
 
-![Content object with category and slug](images/custom-links/complex-routing-co-form.png){: .center .width100 .border}
+![Content object with category and slug](images/custom-links/complex-routing-co-form.png){: .center .width75 .border}
 
-you will see a preview link that will lead you to `https://my-site.com/office/best-office-chair`.
+you will see a preview link that will lead you to `https://my-site.com/green-plant/15`.

docs/panel/Plugins/Netlify-integration.md

@@ -77,11 +77,11 @@ For example, if you're using the [Gatsby and Snipcart starter](https://github.co
 
 To obtain the Flotiq API key - in your Flotiq account, Find in the right sidebar panel `Api keys` and select:
 
-![Access Flotiq API keys](images/netlify/api-keys-1.png){: .center .width25 .border}
+![Access Flotiq API keys](../../API/images/api-keys-menu.png){: .center .width25 .border}
 
 You can either select the application-wide read-only key:
 
-![Use global read-only](images/netlify/api-keys-2.png){: .center .width75 .border}
+![Use global read-only](../../API/images/api-keys_1.png){: .center .width75 .border}
 
 Or as a safer option, create a scoped read-only API key that will only be used for the purpose of Netlify build, read more about [Flotiq API access](https://flotiq.com/docs/API/).
 
@@ -96,15 +96,15 @@ Find in the right sidebar panel `Plugins` and select
 
 ![Flotiq plugins](images/sidebar-plugins.png){: .center .width25 .border}
 
-On the next screen, click the plus next to `Netlify Build` to add a plugin.
+On the next screen, click the plus next to `Netlify Build` to install the plugin.
 
 ![Adding Netlify Build plugin to Flotiq](images/netlify/plugins-screen-netlify.png){: .center .width75 .border}
 
 Once the plugin is enabled, click `Manage` to open the modal with the form.
 
 ![Manage Netlify](images/netlify/manage.png){: .center .width75 .border}
 
-After the modal is opened, click `Add new`. Next - fill in the details from your Netlify account and click `Save changes` to finish your Netlify Build setup.
+After the modal is opened, click `Add item`. Next - fill in the details from your Netlify account and click `Save changes` to finish your Netlify Build setup.
 
 ![Setting up Netlify Build in Flotiq](images/netlify/settings.png){: .center .width75 .border}
 

docs/panel/PluginsDevelopment/plugin-examples.md

@@ -28,7 +28,7 @@ FlotiqPlugins.add(
 
 Result:
 
-![img](img/sidebar-info-text.png)
+![img](img/sidebar-info-text.png){: .border}
 
 ## Add preview link to edit form
 
@@ -59,7 +59,6 @@ FlotiqPlugins.add(
         // Style panel to look a bit better.
         div.style.background = `white`;
         div.style.padding = `1rem`;
-        div.style.margin = '0 0 2rem 0';
         div.style.borderRadius = '1rem';
         div.style.textAlign = 'center';
 
@@ -73,7 +72,7 @@ FlotiqPlugins.add(
 
 Result:
 
-![Sidebar preview button](img/sidebar-preview-button.png)
+![Sidebar preview button](img/sidebar-preview-button.png){: .border}
 
 ## Preview image in the grid
 
@@ -127,7 +126,7 @@ FlotiqPlugins.add(
 
 Result:
 
-![Grid media preview](img/grid-media-preview.png)
+![Grid media preview](img/grid-media-preview.png){: .border}
 
 
 ## Modify input config
@@ -167,7 +166,7 @@ FlotiqPlugins.add(
 
 Result:
 
-![Modified input styles in object form](img/input-styles.png)
+![Modified input styles in object form](img/input-styles.png){: .border}
 
 ## Access parent HTML element
 
@@ -208,7 +207,7 @@ FlotiqPlugins.add(
 
 Result:
 
-![Title width added to the object data table](img/title-width-plugin.png)
+![Title width added to the object data table](img/title-width-plugin.png){: .border}
 
 ## Clear global counter after element is detached
 
@@ -311,7 +310,7 @@ FlotiqPlugins.add(
 
 Result:
 
-<video src="../img/custom-modal-html.mp4" controls=""><a href="../img/custom-modal-html.mp4">Open custom modal</a></video>
+<video class="border" src="../img/custom-modal-html.mp4" controls=""><a href="../img/custom-modal-html.mp4">Open custom modal</a></video>
 
 ## Open modal with form 
 
@@ -390,7 +389,7 @@ FlotiqPlugins.add(
 { data-search-exclude }
 
 Result:
-<video src="../img/custom-modal-ctd-schema.mp4" controls=""><a href="../img/custom-modal-ctd-schema.mp4">Form defined with a schema that
+<video class="border" src="../img/custom-modal-ctd-schema.mp4" controls=""><a href="../img/custom-modal-ctd-schema.mp4">Form defined with a schema that
 returns data</a></video>
 
 ### Form with custom submit and button labels
@@ -484,5 +483,5 @@ FlotiqPlugins.add(
 
 Result:
 
-<video src="../img/custom-modal-ctd-schema-async-return.mp4" controls=""><a href="../img/custom-modal-ctd-schema-async-return.mp4">Form
+<video class="border" src="../img/custom-modal-ctd-schema-async-return.mp4" controls=""><a href="../img/custom-modal-ctd-schema-async-return.mp4">Form
 with custom submit and button labels</a></video>