diff --git a/docusaurus.config.js b/docusaurus.config.js index f5f41c91..e7b0c94a 100644 --- a/docusaurus.config.js +++ b/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. diff --git a/package.json b/package.json index cff25131..7b3f7f1e 100644 --- a/package.json +++ b/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" }, diff --git a/recipes/backen/schoggi-muffins/images/muffins.jpg b/recipes/backen/schoggi-muffins/images/muffins.jpg new file mode 100644 index 00000000..37f1658c Binary files /dev/null and b/recipes/backen/schoggi-muffins/images/muffins.jpg differ diff --git a/recipes/backen/schoggi-muffins/index.md b/recipes/backen/schoggi-muffins/index.md new file mode 100644 index 00000000..a0777d98 --- /dev/null +++ b/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. +::: \ No newline at end of file diff --git a/recipes/images/rezepte.jpg b/recipes/images/rezepte.jpg new file mode 100644 index 00000000..37f1658c Binary files /dev/null and b/recipes/images/rezepte.jpg differ diff --git a/recipes/index.md b/recipes/index.md new file mode 100644 index 00000000..e036733e --- /dev/null +++ b/recipes/index.md @@ -0,0 +1,3 @@ +# Rezepte + +![](images/rezepte.jpg) \ No newline at end of file diff --git a/sidebarsRecipes.js b/sidebarsRecipes.js new file mode 100644 index 00000000..fd342f2c --- /dev/null +++ b/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; diff --git a/src/components/DefinitionList/index.tsx b/src/components/DefinitionList/index.tsx new file mode 100644 index 00000000..4f07fc6c --- /dev/null +++ b/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 ( +
+ {props.children} +
+ ); +} diff --git a/src/components/DefinitionList/styles.module.scss b/src/components/DefinitionList/styles.module.scss new file mode 100644 index 00000000..4dd3ea6a --- /dev/null +++ b/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; + } +} diff --git a/src/css/custom.scss b/src/css/custom.scss index ae5df685..a24eda02 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -45,21 +45,23 @@ h3, h4, h5, h6 { - .footnote-ref { - font-size: 50%; - } + .footnote-ref { + font-size: 50%; + } } .footnote-ref { font-size: 75%; + &::before { - content: '['; - margin-right: 3px; + content: '['; + margin-right: 3px; } + &::after { - content: ']'; - margin-left: 3px; + content: ']'; + margin-left: 3px; } } @@ -69,21 +71,20 @@ h6 { &:hover { opacity: 0.6; } + &:before { content: ''; width: 24px; height: 24px; display: flex; - background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; } } html[data-theme='dark'] .header-github-link { &:before { - background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; } } @@ -91,6 +92,7 @@ html[data-theme='dark'] .header-github-link { h2 { font-size: var(--ifm-h2-font-size); } + article[itemprop="blogPost"] { border-radius: var(--ifm-card-border-radius); box-shadow: var(--ifm-global-shadow-lw); @@ -101,9 +103,87 @@ html[data-theme='dark'] .header-github-link { .dsla-search-wrapper { --aa-search-input-height: 34px; + .dsla-search-field { .aa-DetachedSearchButton { border-radius: 20px; } } +} + + +div.flex { + display: flex; + flex-wrap: wrap; + gap: 0.4em; + margin-bottom: 1em; + + p { + &:first-child { + &:last-child { + margin-bottom: 0; + } + } + } + + >div.item { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 10px; + + &.noFlex { + flex-grow: unset; + flex-shrink: unset; + flex-basis: unset; + } + + .card__image { + :first-child { + margin: 0; + margin-left: auto; + margin-right: auto; + } + + figure { + margin: 0; + line-height: 0; + flex-grow: 1; + + >* { + line-height: normal; + } + + figcaption { + margin: 0.4em 1em; + } + } + + &.code__card { + padding: 0; + } + } + } + + &.recipe { + .step { + /* card props*/ + border-color: red; + border-width: 1px; + background-color: var(--ifm-card-background-color); + border-radius: var(--ifm-card-border-radius); + box-shadow: var(--ifm-global-shadow-lw); + padding: 0 var(--ifm-spacing-horizontal); + >.item { + &:first-of-type { + border-top-right-radius: var(--ifm-alert-border-radius); + border-bottom-right-radius: var(--ifm-alert-border-radius); + border-right: 2px solid var(--ifm-color-primary); + } + dl.dl { + margin-block-start: 0.1em; + margin-block-end: 0.1em; + } + } + } + } } \ No newline at end of file diff --git a/src/theme/MDXComponents.tsx b/src/theme/MDXComponents.tsx new file mode 100644 index 00000000..2483eebe --- /dev/null +++ b/src/theme/MDXComponents.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +// Import the original mapper +import MDXComponents from '@theme-original/MDXComponents'; +import DefinitionList from '../components/DefinitionList'; + +export default { + // Re-use the default mapping + ...MDXComponents, + dl: DefinitionList +}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index b7526b22..1519c3ea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7500,6 +7500,13 @@ relateurl@^0.2.7: resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk= +remark-deflist-simple@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/remark-deflist-simple/-/remark-deflist-simple-1.0.0.tgz#b9c61584507f5fe0dbf5dd5dac24eddb0608c344" + integrity sha512-1yZMovfjDgn4HgBSpiBeRn1wqbhJmTMAQPboEXWxS7M1pr9nLHspdKS0W3UtgF1B2tBTTbZ3baRG71qzW9oepw== + dependencies: + unist-util-visit "^2.0.3" + remark-emoji@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.2.0.tgz#1c702090a1525da5b80e15a8f963ef2c8236cac7"