docs: added identicons page

.vitepress/theme/components/Identicon.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+import { createIdenticon } from 'identicons-esm'
+import { ref, watch } from 'vue'
+
+const initialValue = 'NQ07 0000 0000 0000 0000 0000 0000 0000 0000'
+const input = useLocalStorage('identicon', initialValue)
+const identicon = ref<string>('')
+
+watch(input, async () => {
+  if (!input.value)
+    return
+  identicon.value = await createIdenticon(input.value, { format: 'image/svg+xml' })
+}, { immediate: true })
+
+watch(input, async () => {
+  if (input.value === 'nimiq') {
+    const { default: confetti } = await import('canvas-confetti')
+    confetti({ particleCount: 300, spread: 360, origin: { y: 0.6 } })
+  }
+})
+</script>
+
+<template>
+  <form nq-mt-32 relative @submit.prevent>
+    <input v-model="input" type="text" placeholder="Enter something..." rounded-full text-lg px-16 w-full mx-auto nq-input-box py-4>
+    <template v-if="input === initialValue">
+      <svg absolute top-0 right--16 op-30 version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 279.15007472985735 165.48889560262165" width="279.15007472985735" height="165.48889560262165" scale-60>
+        <g stroke-linecap="round"><g transform="translate(130.41382362914226 106.16812588849137) rotate(0 -59.645037997946844 -47.79570511661953)"><path d="M0.77 1.07 C-12.46 -3.4, -59.08 -9.78, -79.13 -25.98 C-99.17 -42.19, -112.66 -84.37, -119.52 -96.17 M-0.29 0.58 C-13.17 -3.8, -56.89 -8.78, -76.91 -24.73 C-96.93 -40.69, -113.13 -83.23, -120.41 -95.15" stroke="#1e1e1e" stroke-width="2" fill="none" /></g><g transform="translate(130.41382362914226 106.16812588849137) rotate(0 -59.645037997946844 -47.79570511661953)"><path d="M-119.78 -96.3 L-107.95 -84.02 L-120.85 -78.72 L-118.82 -95.84" stroke="none" stroke-width="0" fill="#1e1e1e" fill-rule="evenodd" /><path d="M-120.41 -95.15 C-115.24 -93.44, -113.47 -89.58, -108.62 -85.88 M-120.41 -95.15 C-117.01 -93.34, -114.79 -90.12, -108.62 -85.88 M-108.62 -85.88 C-109.85 -84.12, -112.19 -82.78, -119.94 -80.16 M-108.62 -85.88 C-111.12 -83.99, -113.6 -82.71, -119.94 -80.16 M-119.94 -80.16 C-120.16 -83.62, -119.06 -87.29, -120.41 -95.15 M-119.94 -80.16 C-120.36 -85.44, -119.42 -89.46, -120.41 -95.15 M-120.41 -95.15 C-120.41 -95.15, -120.41 -95.15, -120.41 -95.15 M-120.41 -95.15 C-120.41 -95.15, -120.41 -95.15, -120.41 -95.15" stroke="#1e1e1e" stroke-width="2" fill="none" /></g></g></svg>
+      <p style="font-family: Segoe Script, Bradley Hand, Comic Sans;" absolute right-0 top-90 rotate--10 text-sm op-80>
+        You can write anything!
+      </p>
+    </template>
+    <p v-if="input === 'nimiq'" absolute right-0 top-36 text-xs op-80>
+      You found the secret word! Take a cookie 🍪
+    </p>
+    <p v-if="input === 'albatross'" absolute right-0 top-36 text-xs op-80 text-right>
+      Nope. Keep trying.
+      <br>
+      Nonetheless, this identicon rocks 🤘
+    </p>
+  </form>
+  <img :src="identicon" alt="Identicon" class="not-zoomable" nq-mt-16 size-180 mx-auto>
+</template>

.vitepress/theme/components/IdenticonBuilder.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import type { Colors, Section, Sections } from 'identicons-esm'
+import { useLocalStorage } from '@vueuse/core'
+import { ensambleSvg, formatIdenticon, getIdenticonsParams, colors as identiconColors, identiconFeatures } from 'identicons-esm'
+import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
+import { computed, onMounted, ref } from 'vue'
+import { downloadBlob } from '../composables/icons/pack'
+import PillSelector from './PillSelector.vue'
+
+const initialParams = ref<{ sections: Sections, colors: Colors }>()
+
+interface Svg { path: string, svg: string }
+
+const entries = Object.entries(identiconFeatures)
+const bottom = ref<Svg[]>(entries.filter(([path]) => path.includes('bottom')).map(([path, svg]) => ({ path, svg })))
+const top = ref<Svg[]>(entries.filter(([path]) => path.includes('top')).map(([path, svg]) => ({ path, svg })))
+const face = ref<Svg[]>(entries.filter(([path]) => path.includes('face')).map(([path, svg]) => ({ path, svg })))
+const sides = ref<Svg[]>(entries.filter(([path]) => path.includes('sides')).map(([path, svg]) => ({ path, svg })))
+
+const options = Object.fromEntries(['bottom', 'top', 'face', 'sides', 'colors'].map(value => ([value, { label: value }])))
+const activeSection = useLocalStorage<Section | 'colors'>('active-variant', 'bottom')
+const activeFeatures = computed(() => {
+  if (activeSection.value === 'bottom')
+    return bottom.value
+  if (activeSection.value === 'top')
+    return top.value
+  if (activeSection.value === 'face')
+    return face.value
+  if (activeSection.value === 'sides')
+    return sides.value
+  return []
+})
+const activeBottom = ref('')
+const activeTop = ref('')
+const activeFace = ref('')
+const activeSides = ref('')
+const activeMain = ref('')
+const activeAccent = ref('')
+const activeBackground = ref('')
+const colors = computed(() => ({
+  main: activeMain.value,
+  accent: activeAccent.value,
+  background: activeBackground.value,
+}))
+const sections = computed(() => ({
+  bottom: activeBottom.value,
+  top: activeTop.value,
+  face: activeFace.value,
+  sides: activeSides.value,
+}))
+onMounted(async () => {
+  initialParams.value = await getIdenticonsParams('nimiq')
+  reset()
+})
+
+function reset() {
+  activeBottom.value = initialParams.value?.sections.bottom
+  activeTop.value = initialParams.value?.sections.top
+  activeFace.value = initialParams.value?.sections.face
+  activeSides.value = initialParams.value?.sections.sides
+  activeMain.value = initialParams.value?.colors.main
+  activeAccent.value = initialParams.value?.colors.accent
+  activeBackground.value = initialParams.value?.colors.background
+}
+
+const isDirty = computed(() => {
+  return activeBottom.value !== initialParams.value?.sections.bottom
+    || activeTop.value !== initialParams.value?.sections.top
+    || activeFace.value !== initialParams.value?.sections.face
+    || activeSides.value !== initialParams.value?.sections.sides
+    || activeMain.value !== initialParams.value?.colors.main
+    || activeAccent.value !== initialParams.value?.colors.accent
+    || activeBackground.value !== initialParams.value?.colors.background
+})
+
+const identicon = computed(() => ensambleSvg({ colors: colors.value, sections: sections.value }))
+
+function getSvg(svgContent: string) {
+  const { accent, main } = initialParams.value?.colors || { accent: '#000', main: '#fff' }
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><g fill="${accent}" clip-path="url(#a)" color="${main}">${svgContent}</g></svg>`
+}
+
+function isSelected(svg: string) {
+  switch (activeSection.value) {
+    case 'bottom':
+      return activeBottom.value === svg
+    case 'top':
+      return activeTop.value === svg
+    case 'face':
+      return activeFace.value === svg
+    case 'sides':
+      return activeSides.value === svg
+  }
+}
+
+function select(svg: string) {
+  switch (activeSection.value) {
+    case 'bottom':
+      activeBottom.value = svg
+      break
+    case 'top':
+      activeTop.value = svg
+      break
+    case 'face':
+      activeFace.value = svg
+      break
+    case 'sides':
+      activeSides.value = svg
+      break
+  }
+}
+
+async function downloadSvg() {
+  const svg = await formatIdenticon(identicon.value, { format: 'svg' })
+  downloadBlob(new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }), 'identicon.svg')
+}
+</script>
+
+<template>
+  <div class="nq-no-prose">
+    <div nq-mb-32 flex="~ items-end justify-center wrap gap-x-16" relative>
+      <div nq-mb-32 size-80 v-html="identicon" />
+      <div nq-mb-32 size-128 v-html="identicon" />
+      <div nq-mb-32 size-196 v-html="identicon" />
+      <TooltipProvider>
+        <TooltipRoot>
+          <TooltipTrigger bottom-40 op-80 aria-label="Let's play a game" flex="~ items-center gap-8" absolute right-0>
+            <div i-nimiq:basketball text-16 />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent z-100 side="bottom" :collision-padding="8" :side-offset="4" align="start" bg="gradient-neutral dark:neutral-100" border-subtle-light text-white p-20 pb-12 rounded-8 max-w-360 text-14 border="base white/20" nq-prose-compact>
+              <h3>
+                Let's play a game!
+              </h3>
+
+              <p mt-12>
+                Using the text input on top of this page, you need to find the secret word that creates the identicon.
+              </p>
+
+              <button v-if="isDirty" nq-pill nq-pill-blue px-12 py-2 font-semibold mb-8 nq-mt-24 @click="reset">
+                See identicon
+              </button>
+              <TooltipArrow as-child>
+                <div i-nimiq:tooltip-triangle text-darkblue rotate-180 h-7 />
+              </TooltipArrow>
+            </TooltipContent>
+          </TooltipPortal>
+        </TooltipRoot>
+      </TooltipProvider>
+      <div flex="~ col items-end" absolute top-0 right-0>
+        <span nq-label text-10 hidden sm:block>Download</span>
+        <button nq-ghost-btn mt-8 text-12 px-4 bg-neutral-0 py-2 font-semibold op-80 @click="downloadSvg">
+          SVG
+        </button>
+      </div>
+    </div>
+    <form @submit.prevent="">
+      <PillSelector v-model="activeSection" :options mx-auto />
+      <ul flex="~ gap-x-32 gap-y-64 items-center wrap" list-none nq-mt-12>
+        <li
+          v-for="({ path, svg }) in activeFeatures" :key="path" :class="{ 'bg-neutral-300': isSelected(svg) }"
+          rounded-8
+        >
+          <button group bg-transparent @click="select(svg)">
+            <div size-60 v-html="getSvg(svg)" />
+          </button>
+        </li>
+      </ul>
+      <div v-if="activeSection === 'colors'" w-full nq-mt-32 sm:w-max mx-auto>
+        <div flex="~ col sm:row sm:items-center gap-8" nq-mt-32 w-full block>
+          <span sm:ml-auto sm:mr-16 text-10 nq-label>Main color</span>
+          <div flex="~ wrap gap-8" max-sm:nq-mt-12>
+            <div
+              v-for="color in identiconColors" :key="color"
+              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full transition-colors
+              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeMain, 'op-45 hocus:op-100': color !== activeMain }"
+              @click="activeMain = color"
+            />
+          </div>
+        </div>
+
+        <div flex="~ col sm:row sm:items-center gap-8" nq-mt-32 w-full block>
+          <span sm:ml-auto sm:mr-16 text-10 nq-label>Background color</span>
+          <div flex="~ wrap gap-8" max-sm:nq-mt-12>
+            <div
+              v-for="color in identiconColors" :key="color"
+              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full transition-colors
+              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeBackground, 'op-45 hocus:op-100': color !== activeBackground }"
+              @click="activeBackground = color"
+            />
+          </div>
+        </div>
+
+        <div flex="~ col sm:row sm:items-center gap-8" nq-mt-32 w-full block>
+          <span sm:ml-auto sm:mr-16 text-10 nq-label>Accent color</span>
+          <div flex="~ wrap gap-8" max-sm:nq-mt-12>
+            <div
+              v-for="color in identiconColors" :key="color"
+              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full transition-colors
+              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeAccent, 'op-45 hocus:op-100': color !== activeAccent }"
+              @click="activeAccent = color"
+            />
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>

.vitepress/theme/style.css

@@ -101,7 +101,7 @@ h2 {
 }
 
 .nq-subline {
-  --uno: nq-subline text-neutral-700 mt-24;
+  --uno: nq-subline text-neutral-700 mt-24 text-20|22;
 }
 
 .VPHome {