add rezepte

docusaurus.config.js

@@ -5,6 +5,17 @@ const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 const remarkFlex = require('./src/plugins/remark-flex');
 const remarkImage = require('./src/plugins/remark-images');
+const remarkDeflist = require('remark-deflist-simple');
+
+const REMARK_PLUGINS = {
+  beforeDefaultRemarkPlugins: [
+    remarkImage
+  ],
+  remarkPlugins: [
+    remarkFlex,
+    remarkDeflist
+  ]
+};
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -24,18 +35,14 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
+          ...REMARK_PLUGINS,
           sidebarPath: require.resolve('./sidebars.js'),
           routeBasePath: 'synopsis',
           // Please change this to your repo.
-          editUrl: 'https://github.com/lebalz/blog/edit/main/',
-          beforeDefaultRemarkPlugins: [
-            remarkImage
-          ],
-          remarkPlugins: [
-            remarkFlex
-          ],
+          editUrl: 'https://github.com/lebalz/blog/edit/main/'
         },
         blog: {
+          ...REMARK_PLUGINS,
           blogTitle: 'Dev Blog',
           routeBasePath: '/',
           showReadingTime: true,
@@ -44,21 +51,10 @@ const config = {
           blogSidebarTitle: 'Posts',
           // Please change this to your repo.
           editUrl:
-            'https://github.com/lebalz/blog/edit/main/',
-          beforeDefaultRemarkPlugins: [
-            remarkImage
-          ],
-          remarkPlugins: [
-            remarkFlex
-          ]
+            'https://github.com/lebalz/blog/edit/main/'
         },
         pages: {
-          beforeDefaultRemarkPlugins: [
-            remarkImage
-          ],
-          remarkPlugins: [
-            remarkFlex
-          ]
+          ...REMARK_PLUGINS
         },
         theme: {
           customCss: [
@@ -89,6 +85,11 @@ const config = {
             position: 'left',
             label: 'Knowledgebase',
           },
+          {
+            to: 'recipes/',
+            position: 'left',
+            label: 'Rezepte',
+          },
           {
             href: 'https://github.com/lebalz/blog',
             position: 'right',
@@ -146,7 +147,18 @@ const config = {
         // /404.html is never indexed
         indexPages: false,
       }
-    ]
+    ],
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        ...REMARK_PLUGINS,
+        id: 'recipes',
+        path: 'recipes',
+        routeBasePath: 'recipes',
+        sidebarPath: require.resolve('./sidebarsRecipes.js'),
+        // ... other options
+      }
+    ],
   ],
   scripts: [
     // Object format.

package.json

@@ -26,6 +26,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-image-gallery": "^1.2.7",
+    "remark-deflist-simple": "^1.0.0",
     "sass": "^1.45.2",
     "url": "^0.11.0"
   },

recipes/backen/schoggi-muffins/index.md

@@ -0,0 +1,42 @@
+# Schoggi Muffins
+
+
+:::cards --class=recipe
+![](images/muffins.jpg)
+
+:::flex --class=step --align-items=center
+200 g
+: schwarze Schoggi
+150 g
+: Butter
+***
+Schmelzen
+:::
+:::flex --class=step --align-items=center
+4
+: Eigelb
+200 g
+: Zucker
+***
+schaumig rühren
+:::
+
+
+:::flex --class=step --align-items=center
+100 g
+: Mehl
+***
+beigeben + geschmolzene Masse auch
+:::
+
+
+:::flex --class=step --align-items=center
+4
+: Eiweiss
+***
+steif schlagen + zum Rest
+:::
+
+
+Papierförmli bis zur Hälfte füllen (ca. 24 Stück) im vorgeheizten Ofen bei 220°C **8-9 min.** backen.
+:::

recipes/index.md

@@ -0,0 +1,3 @@
+# Rezepte
+
+![](images/rezepte.jpg)

sidebarsRecipes.js

@@ -0,0 +1,31 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['hello'],
+    },
+  ],
+   */
+};
+
+module.exports = sidebars;

src/components/DefinitionList/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+export default function DefinitionList(props: Props): JSX.Element {
+  return (
+    <dl className={clsx(styles.dl, 'dl')}>
+      {props.children}
+    </dl>
+  );
+}

src/components/DefinitionList/styles.module.scss

@@ -0,0 +1,48 @@
+
+// Horizontal Definition Lists
+.dl {
+    display: flex;
+    flex-wrap: wrap;
+    width:100%;
+    > * {
+        padding: 1px;
+        padding-top: 0.5em;
+    }
+    dt {
+        width:30%;
+        font-weight: bold;
+        text-align:right;
+        min-height: 1px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        &:last-of-type {
+            padding-bottom: 0.2em;
+        }
+    }
+    dd {
+        overflow-x: auto;
+        width:60%;
+        padding-left:1em;
+        margin-left: 0px;
+        overflow-y: hidden;
+        &:last-of-type {
+            padding-bottom: 0.2em;
+        }
+    }
+    dd + dd {
+        width: 100%;
+        padding-left: calc(30% + 1em);
+        padding-top:4px;
+    }
+    dt + dt {
+        padding-right: 60%;
+    }
+    dt + dt + dd {
+        margin-top: -1.625em; /* own height including padding */
+        padding-left: calc(30% + 1em);
+    }
+
+    dd p, dd ul, dd ol {
+        line-height: inherit;
+    }
+}