wip new structure

docs/cloud/index.md

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 0
 ---
-# Overview
+# Introduction
 
 :::info
 This new documentation center is currently work in progress

docs/firmware/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "Device Firmware",
+  "label": "Firmware",
   "position": 1,
   "collapsed": true
 }

docs/firmware/index.md

@@ -2,7 +2,7 @@
 sidebar_position: 0
 ---
 
-# Overview
+# Introduction
 
 :::info
 This new documentation center is currently work in progress

docs/hardware/addons/_category_.json → docs/hardware/extension-modules/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "Addon Modules",
+  "label": "Extension Modules",
   "position": 2,
   "collapsed": false
 }

docs/hardware/housings/index.md

@@ -5,3 +5,4 @@ sidebar_position: 1
 # Device Housings
 
 
+<Image alt='a Housing' img={require('./IMG_0368.jpg')} style={{width:'57%'}}/>

docs/hardware/index.md

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 0
 ---
-# Overview
+# Introduction
 
 :::info
 This new documentation center is currently work in progress

docs/index.md

@@ -1,23 +1,21 @@
 ---
 sidebar_position: 0
 ---
+
 # Lobaro Documentation
 
 :::info
 This new documentation center is currently work in progress
 :::
 
+<Image img={require('./IMG_0368.jpg')} style={{width:'50%',alt:'Girl in a jacket'}}/>
+
 * [ ] ddd
 * [ ] d
 * [ ] d
 * [ ] d
 * [ ] d
-  Däny
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-
+
 <Tabs>
   <TabItem value="apple" label="Apple" default>
     This is an apple 🍎

docs/knowledge-base/doc-playground/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Doc Playground",
+  "position": 99
+}

docs/knowledge-base/doc-playground/index.md

@@ -0,0 +1,119 @@
+# Docusaurus
+
+Location to showcase features and examples for writing content in this doc with is based on Docusaurus.
+
+* [**Official Docs**](https://docusaurus.io/docs)
+
+<Image alt='Docusaurus'
+img={require('@site/static/img/docusaurus.png')}
+style={{width:'10%',paddingTop:'10px',paddingBottom:'20px'}}
+/>
+
+```jsx title="Include images with absolute paths and CamelCase css styles"
+<Image alt='Docusaurus' 
+       img={require('@site/static/img/docusaurus.png')} 
+       style={{width:'10%',paddingTop:'10px',paddingBottom:'20px'}} />
+```
+## Images
+
+<Image alt='A dangerous plant'
+img={require('./img/plant.jpg')}
+style={{width:'75%',padding:'20px'}} />
+
+```jsx title="Include images with relative paths"
+<Image alt='A dangerous plant' 
+       img={require('./img/plant.jpg')} 
+       style={{width:'85%',padding:'10px'}} />
+```
+
+:::info
+Images get automatically resized by Docusaurus and must not resized manually to support faster loading of the static
+page. The original plant image is 4.5 MB in size, Docusaurus' ideal-image plugin reduced the size to 272 kB. This
+mechanism also depends on the requested width.
+:::
+
+## Code Blocks
+* [Docusaurus Doc](https://docusaurus.io/docs/markdown-features/code-blocks)
+* [Supported Languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts#L9-L23)
+
+````md title="Code block for plant image"
+```jsx title="Include images with relative paths"
+<Image alt='A dangerous plant' 
+       img={require('./img/plant.jpg')} 
+       style={{width:'85%',padding:'10px'}} /> 
+```
+````
+
+## Admonitions
+
+:::note
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+:::
+
+:::tip
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+:::
+
+:::info
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+:::
+
+:::warning
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+:::
+
+:::danger
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+:::
+
+```markdown title="Admonitions"
+:::note
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+:::
+
+:::tip
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+:::
+
+:::info
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+:::
+
+:::warning
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+:::
+
+:::danger
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+:::
+```
+
+## Tabs
+<Tabs>
+    <TabItem value="apple" label="Apple" default>
+        This is an apple 🍎
+    </TabItem>
+    <TabItem value="orange" label="Orange">
+        This is an orange 🍊
+    </TabItem>
+    <TabItem value="banana" label="Banana">
+        This is a banana 🍌
+    </TabItem>
+</Tabs>
+
+```jsx title="Tabs"
+<Tabs>
+    <TabItem value="apple" label="Apple" default>
+        This is an apple 🍎
+    </TabItem>
+    <TabItem value="orange" label="Orange">
+        This is an orange 🍊
+    </TabItem>
+    <TabItem value="banana" label="Banana">
+        This is a banana 🍌
+    </TabItem>
+</Tabs>
+```
+
+
+

docs/products/index.md

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 0
 ---
-# Overview
+# Introduction
 
 :::info
 This new documentation center is currently work in progress

docusaurus.config.ts

@@ -29,6 +29,20 @@ const config: Config = {
     locales: ['en'],
   },
 
+  plugins: [
+    [
+      '@docusaurus/plugin-ideal-image',
+      {
+        name: 'assets/images/ideal-img/[name].[hash:hex:7].[width].[ext]',
+        quality: 85,
+        max: 1000, // max resized image's size.
+        min: 600, // min resized image's size. if original is lower, use that size.
+        steps: 2, // the max number of images generated between min and max (inclusive)
+        disableInDev: false,
+      },
+    ],
+  ],
+
   presets: [
     [
       'classic',
@@ -41,13 +55,6 @@ const config: Config = {
           editUrl: 'https://github.com/lobaro/iot/tree/master',
         },
         blog: false,
-       /* blog: {
-          showReadingTime: true,
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
-        },*/
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -75,56 +82,6 @@ const config: Config = {
         width: '120px'
       },
       items: [
-          /*
-        {
-          type: 'docSidebar',
-          sidebarId: 'productsSidebar',
-          position: 'left',
-          label: 'All Products',
-        },*/
-         /*
-        {
-          type: 'dropdown',
-          label: 'Community',
-          position: 'right',
-          items: [
-            {
-              label: 'Facebook',
-              href: 'https://www.facebook.com',
-            },
-            {
-              type: 'doc',
-              label: 'Modbus',
-              docId: 'knowledge-base/modbus',
-            },
-            // ... more items
-          ],
-        },
-        {
-          type: 'html',
-          position: 'right',
-          value: '<button>Give feedback</button>',
-        },*/
-          /*
-        {
-          type: 'dropdown',
-          label: 'Products',
-          position: 'left',
-          items: [
-            {
-              type: 'doc',
-              label: 'Metering Gateways',
-              docId: 'products/metering-gateways/index',
-            },
-            {
-              type: 'doc',
-              label: 'Sensor Gateways',
-              docId: 'products/sensor-gateways/index',
-            },
-            // ... more items
-          ],
-        },
-          */
         {
           type: 'docSidebar',
           sidebarId: 'productsSidebar',
@@ -176,11 +133,12 @@ const config: Config = {
       ],
     },
     footer: {
-      copyright: `Copyright © <a href="https://www.lobaro.de" target="_blank">Lobaro GmbH</a> ${new Date().getFullYear()} | Stadtdeich 7 | D-20097 Hamburg | Germany | <a href="mailto:[email protected]">[email protected]</a> | <a href="https://www.lobaro.com/en/contact/" target="_blank">Legal Disclosure</a>`
+      copyright: `<div style="font-size: small">Copyright © <a href="https://www.lobaro.de" target="_blank">Lobaro GmbH</a> ${new Date().getFullYear()} | Stadtdeich 7 | D-20097 Hamburg | Germany | <a href="mailto:[email protected]">[email protected]</a> | <a href="https://www.lobaro.com/en/contact/" target="_blank">Legal Disclosure</a></div>`
     },
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
+     // additionalLanguages: ['js','c'], // https://prismjs.com/#supported-languages
     },
   } satisfies Preset.ThemeConfig,
 };