From 69f27d304b4a4d2a7422046475380011345736a2 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Tue, 18 Oct 2022 13:32:14 +0200
Subject: [PATCH] docs: add image float css idea

---
 website/src/components/Figure/Figure.tsx        |  7 +++++--
 website/src/components/Figure/styles.module.css | 12 ++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/website/src/components/Figure/Figure.tsx b/website/src/components/Figure/Figure.tsx
index 681a2f4098e..281c5786b30 100644
--- a/website/src/components/Figure/Figure.tsx
+++ b/website/src/components/Figure/Figure.tsx
@@ -67,6 +67,7 @@ import React from 'react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import './styles.module.css';
+import styles from './styles.module.css';
 
 type Props = {
     // An optional alt text, if the caption does not already convey all relevant
@@ -76,11 +77,13 @@ type Props = {
     caption: string;
     // the path to the image, starting with `/img/`. Example: /img/image.png
     img: string;
+    // whether the image should be floated to one side on larger setups
+    float?: boolean;
 };
 
-const Component: React.FC<Props> = ({ img, alt, caption }) => {
+const Component: React.FC<Props> = ({ img, alt, caption, float }) => {
     return (
-        <figure>
+        <figure className={float ? styles.float : ''}>
             <img alt={alt} src={useBaseUrl(img)} />
             <figcaption>{caption}</figcaption>
         </figure>
diff --git a/website/src/components/Figure/styles.module.css b/website/src/components/Figure/styles.module.css
index 80798426569..98a2cecf5e4 100644
--- a/website/src/components/Figure/styles.module.css
+++ b/website/src/components/Figure/styles.module.css
@@ -7,6 +7,12 @@ figure {
     margin-inline: 0;
 }
 
+.float {
+    float: right;
+    max-width: 50%;
+    margin-left: var(--ifm-pre-padding);
+}
+
 figure img {
     box-shadow: none;
     border: none;
@@ -21,3 +27,9 @@ figcaption {
     padding-inline: var(--ifm-pre-padding);
     border-inline-start: 5px solid var(--ifm-color-primary);
 }
+
+
+/* clear floating figures for everything but paragraphs and lists */
+:global(.markdown) :is(:not(p):not(ol):not(ul):not(li)) {
+    clear: both;
+}