Docs - homepage update (#213)

docs/.vitepress/theme/components/DbToolsBundleDatabaseCompare.vue

@@ -0,0 +1,188 @@
+<template>
+  <figure class="image-compare" @mousemove.prevent="onMouseMove" @touchstart="onMouseMove($event, true)" @touchmove="onMouseMove($event, true)" @click="onMouseMove($event, true)">
+    <div class="image-compare-wrapper" :style="{ width: posX + 'px' }">
+      <img :src="withBase('/db-plain.png')" :style="dimensions">
+    </div>
+    <img :src="withBase('/db-anonymized.png')" :style="dimensions">
+    <div class="image-compare-handle" :style="{ left: posX + 'px' }" @mousedown.prevent="onMouseDown">
+      <span class="image-compare-handle-icon left">
+        <img class="light" :src="withBase('/database.svg')"/>
+        <img class="dark" :src="withBase('/database-d.svg')"/>
+        <small>Original</small>
+      </span>
+      <span class="image-compare-handle-icon right">
+        <img class="light" :src="withBase('/anonymize.svg')"/>
+        <img class=" dark" :src="withBase('/anonymize-d.svg')"/>
+        <small>Anonymized</small>
+      </span>
+    </div>
+  </figure>
+</template>
+
+<script>
+import { withBase } from 'vitepress'
+
+export default {
+  data() {
+    return {
+      width: null,
+      height: null,
+      pageX: null,
+      posX: null,
+      isDragging: false,
+      allowNextFrame: true,
+      unwatch: null
+    }
+  },
+  computed: {
+    dimensions() {
+      return {
+        width: `${this.width}px`,
+        height: 'auto'
+      }
+    }
+  },
+  methods: {
+    onResize() {
+      this.width = this.$el.clientWidth;
+      this.height = this.$el.clientHeight;
+    },
+    onMouseDown() {
+			this.isDragging = true;
+    },
+    onMouseUp(event) {
+      event.preventDefault();
+
+      this.isDragging = false;
+    },
+    onMouseMove(event, isDragging = this.isDragging) {
+      if (isDragging && this.allowNextFrame) {
+        this.allowNextFrame = false;
+        this.pageX = event.pageX || event.targetTouches[0].pageX || event.originalEvent.targetTouches[0].pageX;
+
+        window.requestAnimationFrame(this.updatePos);
+      }
+		},
+    updatePos() {
+      let posX = this.pageX - this.$el.getBoundingClientRect().left;
+
+      this.posX = posX;
+      this.allowNextFrame = true;
+    },
+    setInitialPosX() {
+      this.posX = this.width * 3 / 7
+    },
+    withBase
+  },
+  created() {
+    window.addEventListener('mouseup', this.onMouseUp);
+    window.addEventListener('resize', this.onResize);
+  },
+  mounted() {
+    this.onResize();
+    this.setInitialPosX()
+  },
+  beforeDestroy() {
+    this.unwatch();
+    window.removeEventListener('mouseup', this.onMouseUp);
+    window.removeEventListener('resize', this.onResize);
+  }
+};
+</script>
+
+<style>
+.image-compare {
+  position: relative;
+  margin: 0;
+  margin-top: 16px;
+  border-radius: 12px;
+  overflow: hidden;
+
+  img {
+    max-width: none;
+    display: block;
+  }
+}
+
+.image-compare-wrapper,
+.image-compare-handle {
+  bottom: 0;
+  position: absolute;
+  top: 0;
+}
+
+.image-compare-wrapper {
+  left: 0;
+  overflow: hidden;
+  width: 100%;
+  z-index: 1;
+  transform: translateZ(0);
+  will-change: width;
+}
+
+.image-compare-handle {
+  color: var(--vp-c-brand);
+  background-color: currentColor;
+  cursor: ew-resize;
+  transform: translateX(-50%) translateZ(0);
+  width: 4px;
+  z-index: 2;
+  will-change: left;
+}
+
+.image-compare-handle-icon {
+  position: absolute;
+  bottom: -25px;
+  left: 50%;
+  font-size: 2rem;
+  color: currentColor;
+  line-height: normal;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    background-color: color-mix(in srgb, var(--vp-c-bg-soft) 80%, transparent);
+    padding: 3px 3px 0 3px;
+  }
+  small {
+    background-color: color-mix(in srgb, var(--vp-c-bg-soft) 80%, transparent);
+    padding: 2px 4px;
+    font-size: 14px;
+  }
+  &.left {
+    align-items: end;
+    transform: translate(calc(-100% - 2px), -50%);
+    img {
+      border-radius: 8px 0 0 0;
+    }
+    small {
+      border-radius: 8px 0 0 0;
+    }
+  }
+
+  &.right {
+    align-items: start;
+    transform: translate(2px, -50%);
+    img {
+      border-radius: 0 8px 0 0;
+    }
+    small {
+      border-radius: 0 8px 0 0;
+    }
+  }
+
+  img {
+    height: 2rem;
+    width: 2rem;
+  }
+}
+
+html.dark .image-compare-handle .light {
+  display: none;
+}
+
+html:not(.dark) .image-compare-handle .dark {
+  display: none;
+}
+</style>

docs/.vitepress/theme/components/DbToolsBundleFlavorSwitcher.vue

@@ -47,7 +47,7 @@ const id = Math.random().toString(36).substring(2, 6);
   </div>
 </template>
 
-<style scoped>
+<style>
 .flavor-switch {
   font-size: 12px;
   display: flex;
@@ -105,7 +105,7 @@ input[value="symfony"]:checked + label {
 input[value="symfony"]:checked + label > svg {
   fill: #FFFFFF;
 }
-.dark {
+html.dark {
   input[value="symfony"]:checked + label {
     color: #000000;
     background-color: #FFFFFF;

docs/.vitepress/theme/components/MakinaCorpusHorizontal.vue

@@ -27,7 +27,6 @@
 
 <style scoped>
 .makina-corpus-horizontal {
-  padding: 0 64px;
   margin-top: 64px;
 }
 .makina-corpus-horizontal .container {

docs/.vitepress/theme/components/flavor.ts

@@ -27,20 +27,16 @@ export const flavorCombinationList = getCombos(flavorList)
 const flavor = ref('standalone')
 
 export function useFlavor() {
-  watch(() => flavor.value, (flavor) => {
-    const root = document.documentElement
-    flavorCombinationList.forEach(f => {
-      root.style.setProperty('--db-tools-' + f, f.includes(flavor) ? 'unset' : 'none')
-    })
-
-    localStorage.setItem("db-tools-flavor", flavor)
-  }, { immediate: true })
+  watch(() => flavor.value, () => {
+    onFlavorUpdate()
+  })
 
   onMounted(() => {
     const storedFlavor = localStorage.getItem("db-tools-flavor")
     if (storedFlavor) {
       flavor.value = storedFlavor
     }
+    onFlavorUpdate()
 
     // initialize style
     // we display standalone flavor at start
@@ -59,6 +55,15 @@ export function useFlavor() {
     document.head.appendChild(style)
   })
 
+  const onFlavorUpdate = () => {
+    const root = document.documentElement
+    flavorCombinationList.forEach(f => {
+      root.style.setProperty('--db-tools-' + f, f.includes(flavor.value) ? 'unset' : 'none')
+    })
+
+    localStorage.setItem("db-tools-flavor", flavor.value)
+  }
+
   return {
     flavor
   }

docs/.vitepress/theme/index.js

@@ -8,19 +8,21 @@ import DbToolsBundleActions from './components/DbToolsBundleActions.vue'
 import DbToolsBundleHomeImage from './components/DbToolsBundleHomeImage.vue'
 import DbToolsBundleFlavorSwitcherWrapper from './components/DbToolsBundleFlavorSwitcherWrapper.vue'
 import DbToolsBundleFlavorSwitcher from './components/DbToolsBundleFlavorSwitcher.vue'
+import DbToolsBundleDatabaseCompare from './components/DbToolsBundleDatabaseCompare.vue'
 
 export default {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
       'aside-bottom': () => h(MakinaCorpusSquare),
-      'home-features-after': () => h(MakinaCorpusHorizontal),
       'home-hero-actions-after': () => h(DbToolsBundleActions),
       'home-hero-image': () => h(DbToolsBundleHomeImage),
       'sidebar-nav-before': () => h(DbToolsBundleFlavorSwitcherWrapper)
     })
   },
   enhanceApp({ app }) {
     app.component('FlavorSwitcher', DbToolsBundleFlavorSwitcher)
+    app.component('DatabaseCompare', DbToolsBundleDatabaseCompare)
+    app.component('MakinaCorpusHorizontal', MakinaCorpusHorizontal)
   }
 }

docs/content/anonymization/core-anonymizers/address.md

@@ -1,4 +1,4 @@
-## AddressAnonymizer
+## Address
 
 This *Anonymizer* is multicolumn. It let you anonymize, at once, mutiple columns on one table
 that represent different parts of a postal address.

docs/content/anonymization/core-anonymizers/constant.md

@@ -1,4 +1,4 @@
-## ConstantAnonymizer
+## Constant value
 
 Set all value to a constant value.
 Options are:

docs/content/anonymization/core-anonymizers/date.md

@@ -1,4 +1,4 @@
-## DateAnonymizer
+## Date
 
 Anonymize dates by either:
 - randomly choosing an date or datetime in a given range delimited by `min` and `max` options,

docs/content/anonymization/core-anonymizers/email.md

@@ -1,4 +1,4 @@
-## EmailAnonymizer
+## Email address
 
 EmailAnonymizer uses a hash function on the original value to make each unique email
 anonymization reproducible accross tables.

docs/content/anonymization/core-anonymizers/firstname.md

@@ -1,4 +1,4 @@
-## FirstnameAnonymizer
+## Firstname
 
 Works like the StringAnonymizer, but with a provided sample of 1000 worldwide firstnames.
 

docs/content/anonymization/core-anonymizers/float.md

@@ -1,4 +1,4 @@
-## FloatAnonymizer
+## Float
 
 Anonymize float by:
 - randomly choosing an integer in a range delimited by `min` and `max` options

docs/content/anonymization/core-anonymizers/iban-bic.md

@@ -1,4 +1,4 @@
-## IbanBicAnonymizer
+## Iban/Bic
 
 This *Anonymizer* is multicolumn. It let you anonymize, at once, an IBAN and a BIC code.
 You can choose to anonymize either one of IBAN or BIC, or both.

docs/content/anonymization/core-anonymizers/integer.md

@@ -1,4 +1,4 @@
-## IntegerAnonymizer
+## Integer
 
 Anonymize integers by:
 - randomly choosing an integer in a range delimited by 'min' and 'max' options

docs/content/anonymization/core-anonymizers/lastname.md

@@ -1,4 +1,4 @@
-## LastnameAnonymizer
+## Lastname
 
 Works like the StringAnonymizer, but with a provided sample of 1000 worldwide lastnames.
 

docs/content/anonymization/core-anonymizers/lorem-ipsum.md

@@ -1,4 +1,4 @@
-## LoremIpsumAnonymizer
+## Lorem Ipsum
 
 Replace a text with some *lorem ipsum*.
 Default behavior is to generate a single paragraph.

docs/content/anonymization/core-anonymizers/md5.md

@@ -1,4 +1,4 @@
-## Md5Anonymizer
+## Md5 hash
 
 This *Anonymizer* will fill configured column with a md5 hash of the pre-anonymization value.
 

docs/content/anonymization/core-anonymizers/null.md

@@ -1,4 +1,4 @@
-## NullAnonymizer
+## Null
 
 Set all values to `NULL`.
 

docs/content/anonymization/core-anonymizers/password.md

@@ -1,4 +1,4 @@
-## PasswordAnonymizer
+## Password
 
 This *Anonymizer* give you a way to set the same password for each one of your users. It is based on
 the [Symfony PasswordHasher Component](https://symfony.com/doc/current/security/passwords.html).

docs/content/anonymization/core-anonymizers/string.md

@@ -1,4 +1,4 @@
-## StringAnonymizer
+## String
 
 This *Anonymizer* will fill configured column with a random value from a given sample.
 

docs/content/configuration/reference.md

@@ -36,14 +36,20 @@ within.
 
 </div>
 
-<style module>
+<style>
 .toc-inline .table-of-contents ul {
   list-style: none;
   display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
 }
 .toc-inline .table-of-contents li {
-  flex: 1;
+  margin: 2px 4px;
+  padding: 1px 4px;
+  border-radius: 4px;
   display: inline-block;
+  background: var(--vp-code-bg);
+
 }
 </style>