From b43ea0d0b36f6edb023c89934ecf2dcdb0b55b74 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Tue, 29 Oct 2024 11:20:41 +0100
Subject: [PATCH 01/11] docs: added identicons page

---
 .vitepress/theme/components/Identicon.vue     |  21 +++
 .../theme/components/IdenticonBuilder.vue     | 138 ++++++++++++++++
 .vitepress/theme/style.css                    |   2 +-
 build/ui/identicons.md                        | 152 ++++++++++++++++++
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   8 +
 6 files changed, 321 insertions(+), 1 deletion(-)
 create mode 100644 .vitepress/theme/components/Identicon.vue
 create mode 100644 .vitepress/theme/components/IdenticonBuilder.vue
 create mode 100644 build/ui/identicons.md

diff --git a/.vitepress/theme/components/Identicon.vue b/.vitepress/theme/components/Identicon.vue
new file mode 100644
index 0000000..1af7708
--- /dev/null
+++ b/.vitepress/theme/components/Identicon.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+import { createIdenticon } from 'identicons-esm'
+import { ref, watch } from 'vue'
+
+const input = useLocalStorage('identicon', 'NQ07 0000 0000 0000 0000 0000 0000 0000 0000')
+const identicon = ref<string>('')
+
+watch(input, async () => {
+  if (!input.value)
+    return
+  identicon.value = await createIdenticon(input.value, { format: 'image/svg+xml' })
+}, { immediate: true })
+</script>
+
+<template>
+  <form nq-mt-32 @submit.prevent>
+    <input v-model="input" type="text" placeholder="Enter something..." rounded-full text-lg px-16 w-full mx-auto nq-input-box>
+  </form>
+  <img :src="identicon" alt="Identicon" nq-mt-16 size-180 mx-auto>
+</template>
diff --git a/.vitepress/theme/components/IdenticonBuilder.vue b/.vitepress/theme/components/IdenticonBuilder.vue
new file mode 100644
index 0000000..6acb781
--- /dev/null
+++ b/.vitepress/theme/components/IdenticonBuilder.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import type { Colors, Section, Sections } from 'identicons-esm'
+import { useLocalStorage } from '@vueuse/core'
+import { ensambleSvg, getIdenticonsFeatures, getIdenticonsParams, colors as identiconColors } from 'identicons-esm'
+import { computed, onMounted, ref } from 'vue'
+import PillSelector from './PillSelector.vue'
+
+const initialParams = ref<{ sections: Sections, colors: Colors }>()
+
+interface Svg { path: string, svg: string }
+
+const features = await getIdenticonsFeatures()
+const entries = Object.entries(features)
+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')
+  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
+  }
+}
+</script>
+
+<template>
+  <div class="nq-no-prose">
+    <div nq-mb-32 flex="~ items-end justify-center gap-16">
+      <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" />
+    </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>
+        <label flex="~ items-center gap-8">
+          <span mr-auto text-10 nq-label>Main color</span>
+          <div v-for="color in identiconColors" :key="color">
+            <div :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeMain }" @click="activeMain = color" />
+          </div>
+        </label>
+
+        <label flex="~ items-center gap-8" nq-mt-32>
+          <span mr-auto text-10 nq-label>Background color</span>
+          <div v-for="color in identiconColors" :key="color">
+            <div :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeBackground }" @click="activeBackground = color" />
+          </div>
+        </label>
+
+        <label flex="~ items-center gap-8" nq-mt-32>
+          <span mr-auto text-10 nq-label>Accent color</span>
+          <div v-for="color in identiconColors" :key="color">
+            <div :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeAccent }" @click="activeAccent = color" />
+          </div>
+        </label>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 9cd9d65..75da832 100644
--- a/.vitepress/theme/style.css
+++ b/.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 {
diff --git a/build/ui/identicons.md b/build/ui/identicons.md
new file mode 100644
index 0000000..3b6d6dc
--- /dev/null
+++ b/build/ui/identicons.md
@@ -0,0 +1,152 @@
+# Nimiq Identicons
+
+<div flex="~ items-baseline gap-16 justify-start" mt-20 nq-mb-48 class="nq-raw">
+    <a href="https://www.nimiq.com/blog/nimiq-identicons/" nq-pill-tertiary nq-pill-sm cursor-pointer nq-arrow flex="~ gap-8 items-center" un-text="neutral-900">
+      <div i-nimiq:info op-80 />
+      Blog Post
+    </a>
+    <a href="https://github.com/onmax/identicons" nq-pill-tertiary nq-pill-sm cursor-pointer nq-arrow flex="~ gap-8 items-center" un-text="neutral-900">
+      <div i-nimiq:logos-github op-80 />
+      Source code
+    </a>
+  </div>
+
+A simple, visually recognizable way to verify addresses.{.nq-subline}
+
+<Identicon />
+
+## More than 9 Million Identicons!
+
+Each Identicon is a unique combination of colors and shapes based on an account's hash, providing instant visual confirmation.
+
+<Suspense>
+  <IdenticonBuilder mt-16 />
+</Suspense>
+
+## Installation
+
+To start using Nimiq Identicons in your project, run:
+
+::: code-group
+
+```bash [npm]
+npm install identicons-esm
+```
+
+```bash [yarn]
+yarn add identicons-esm
+```
+
+```bash [pnpm]
+pnpm add identicons-esm
+```
+
+```bash [bun]
+bun add identicons-esm
+```
+:::
+
+## Basic Usage
+
+Import and create an identicon using `createIdenticon`:
+
+```ts
+import { createIdenticon } from 'identicons-esm'
+
+const input = 'Your input here'
+const svg = await createIdenticon(input)
+```
+
+## Customization
+
+For specific colors or sections of the identicon, use `getIdenticonsParams`:
+
+```ts
+import { getIdenticonsParams } from 'identicons-esm'
+
+const input = 'Your input here'
+const { colors, sections } = await getIdenticonsParams(input)
+
+// colors.background, colors.main, colors.accent
+// sections.top, sections.bottom, sections.sides, sections.face (SVG paths)
+```
+
+## Migration from Legacy
+
+This module has updated performance and packaging over the legacy version.
+
+<details>
+
+<summary>
+
+### Generating a SVG {.nq-no-prose}
+
+</summary>
+
+<div px-20>
+
+#### Old {.mt-0}
+
+```js
+import Identicons from '@nimiq/identicons/dist/identicons.min.js'
+IdenticonsLegacy.svgPath = '@nimiq/identicons/dist/identicons.min.svg'
+
+const input = 'Your input here'
+const svg = await Identicons.svg(input)
+```
+
+#### New {.mt-0}
+
+```js
+import { createIdenticon } from 'identicons-esm'
+
+const input = 'Your input here'
+const svg = await createIdenticon(input)
+```
+
+</div>
+
+</details>
+
+<details>
+
+<summary>
+
+### Generating a Data URI {.nq-no-prose}
+
+</summary>
+
+<div px-20>
+
+#### Old {.mt-0}
+
+```js
+import Identicons from '@nimiq/identicons/dist/identicons.min.js'
+IdenticonsLegacy.svgPath = '@nimiq/identicons/dist/identicons.min.svg'
+
+const input = 'Your input here'
+const svg = await Identicons.toDataUri(input)
+```
+
+#### New {.mt-0}
+
+```ts
+import { createIdenticon } from 'identicons-esm'
+
+const input = 'Your input here'
+const svg = await createIdenticon(input, { format: 'image/svg+xml' })
+```
+
+</div>
+
+</details>
+
+### Discontiuned functions
+
+There are functions in the original library that are not included in this implementation due to lack of use. These functions are:
+
+- `makeLetterHash`
+- `wordsByEntropy`
+- `Identicons.render`
+- `Identicons.image`
+- `Identicons.placeholder`
diff --git a/package.json b/package.json
index 6da6fdb..ea8af58 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@unocss/reset": "^0.63.6",
     "@vueuse/core": "^11.1.0",
     "iconify-icon": "^2.1.0",
+    "identicons-esm": "^0.0.3",
     "json2md": "^2.0.1",
     "jszip": "^3.10.1",
     "markdown-it-mathjax3": "^4.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9cb72ef..08c2262 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       iconify-icon:
         specifier: ^2.1.0
         version: 2.1.0
+      identicons-esm:
+        specifier: ^0.0.3
+        version: 0.0.3
       json2md:
         specifier: ^2.0.1
         version: 2.0.1
@@ -2696,6 +2699,9 @@ packages:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
+  identicons-esm@0.0.3:
+    resolution: {integrity: sha512-/YlnqD6tM93r4+ZaU2dWz1zA996vuuL+QSKBBD9ST1JDvAKqmwlQt3yvEOKe6K4XemAid9J/KyqCj7zL46/GbQ==}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -7425,6 +7431,8 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  identicons-esm@0.0.3: {}
+
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}

From 35eed39b38bcf6b9149e45386fcda14b0dd17556 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Tue, 29 Oct 2024 11:34:37 +0100
Subject: [PATCH 02/11] ui: added hint for identicon hash

---
 .vitepress/theme/components/Identicon.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/.vitepress/theme/components/Identicon.vue b/.vitepress/theme/components/Identicon.vue
index 1af7708..9ff5885 100644
--- a/.vitepress/theme/components/Identicon.vue
+++ b/.vitepress/theme/components/Identicon.vue
@@ -3,7 +3,8 @@ import { useLocalStorage } from '@vueuse/core'
 import { createIdenticon } from 'identicons-esm'
 import { ref, watch } from 'vue'
 
-const input = useLocalStorage('identicon', 'NQ07 0000 0000 0000 0000 0000 0000 0000 0000')
+const initialValue = 'NQ07 0000 0000 0000 0000 0000 0000 0000 0000'
+const input = useLocalStorage('identicon', initialValue)
 const identicon = ref<string>('')
 
 watch(input, async () => {
@@ -14,8 +15,15 @@ watch(input, async () => {
 </script>
 
 <template>
-  <form nq-mt-32 @submit.prevent>
+  <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>
+    <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>
   </form>
   <img :src="identicon" alt="Identicon" nq-mt-16 size-180 mx-auto>
 </template>

From db948a5db25ca97734d1ead1e01b5fd0bfe63d77 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Tue, 29 Oct 2024 12:37:56 +0100
Subject: [PATCH 03/11] docs: improved identicons

---
 .vitepress/theme/components/Identicon.vue     | 10 +++
 .../theme/components/IdenticonBuilder.vue     | 80 +++++++++++++++++--
 build/ui/identicons.md                        |  2 +-
 package.json                                  |  3 +-
 pnpm-lock.yaml                                | 18 +++--
 5 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/.vitepress/theme/components/Identicon.vue b/.vitepress/theme/components/Identicon.vue
index 9ff5885..8ed1621 100644
--- a/.vitepress/theme/components/Identicon.vue
+++ b/.vitepress/theme/components/Identicon.vue
@@ -12,6 +12,13 @@ watch(input, async () => {
     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>
@@ -24,6 +31,9 @@ watch(input, async () => {
         You can write anything!
       </p>
     </template>
+    <p v-if="input === 'nimiq'" absolute right-0 top-32 text-xs op-80>
+      You found a secret! Take a cookie 🍪
+    </p>
   </form>
   <img :src="identicon" alt="Identicon" nq-mt-16 size-180 mx-auto>
 </template>
diff --git a/.vitepress/theme/components/IdenticonBuilder.vue b/.vitepress/theme/components/IdenticonBuilder.vue
index 6acb781..d911c54 100644
--- a/.vitepress/theme/components/IdenticonBuilder.vue
+++ b/.vitepress/theme/components/IdenticonBuilder.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { Colors, Section, Sections } from 'identicons-esm'
 import { useLocalStorage } from '@vueuse/core'
-import { ensambleSvg, getIdenticonsFeatures, getIdenticonsParams, colors as identiconColors } from 'identicons-esm'
+import { ensambleSvg, formatIdenticon, getIdenticonsFeatures, getIdenticonsParams, colors as identiconColors } 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 }>()
@@ -49,6 +51,10 @@ const sections = computed(() => ({
 }))
 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
@@ -56,7 +62,8 @@ onMounted(async () => {
   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) {
@@ -93,19 +100,68 @@ function select(svg: string) {
       break
   }
 }
+
+async function downloadSvg() {
+  const svg = await formatIdenticon(identicon.value, { format: 'svg', size: 160 })
+  downloadBlob(new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }), 'identicon.svg')
+}
+
+async function downloadPng() {
+  // eslint-disable-next-line no-alert
+  const size = prompt('Please enter the size of the PNG image:', '160')
+  const png = await formatIdenticon(identicon.value, { format: 'image/png', size: Number(size) })
+  downloadBlob(new Blob([png], { type: 'image/png' }), 'identicon.png')
+}
 </script>
 
 <template>
   <div class="nq-no-prose">
-    <div nq-mb-32 flex="~ items-end justify-center gap-16">
+    <div nq-mb-32 flex="~ items-end justify-center gap-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">
+            <div i-nimiq:info text-16 />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent z-100 side="bottom" :side-offset="5" :collision-padding="8" 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 initial identicon. Good luck!
+              </p>
+
+              <button nq-pill nq-pill-blue px-12 py-2 font-semibold mb-8 nq-mt-24 @click="reset">
+                Reset 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>Download</span>
+        <button nq-ghost-btn mt-8 text-12 px-4 py-2 font-semibold op-80 @click="downloadSvg">
+          SVG
+        </button>
+        <button nq-ghost-btn mt-8 text-12 px-4 py-2 font-semibold op-80 @click="downloadPng">
+          PNG
+        </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>
+        <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>
@@ -115,21 +171,31 @@ function select(svg: string) {
         <label flex="~ items-center gap-8">
           <span mr-auto text-10 nq-label>Main color</span>
           <div v-for="color in identiconColors" :key="color">
-            <div :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeMain }" @click="activeMain = color" />
+            <div
+              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full
+              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeMain }" @click="activeMain = color"
+            />
           </div>
         </label>
 
         <label flex="~ items-center gap-8" nq-mt-32>
           <span mr-auto text-10 nq-label>Background color</span>
           <div v-for="color in identiconColors" :key="color">
-            <div :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeBackground }" @click="activeBackground = color" />
+            <div
+              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full
+              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeBackground }"
+              @click="activeBackground = color"
+            />
           </div>
         </label>
 
         <label flex="~ items-center gap-8" nq-mt-32>
           <span mr-auto text-10 nq-label>Accent color</span>
           <div v-for="color in identiconColors" :key="color">
-            <div :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeAccent }" @click="activeAccent = color" />
+            <div
+              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full
+              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeAccent }" @click="activeAccent = color"
+            />
           </div>
         </label>
       </div>
diff --git a/build/ui/identicons.md b/build/ui/identicons.md
index 3b6d6dc..fadf29d 100644
--- a/build/ui/identicons.md
+++ b/build/ui/identicons.md
@@ -15,7 +15,7 @@ A simple, visually recognizable way to verify addresses.{.nq-subline}
 
 <Identicon />
 
-## More than 9 Million Identicons!
+## More than 9 Million combintations!
 
 Each Identicon is a unique combination of colors and shapes based on an account's hash, providing instant visual confirmation.
 
diff --git a/package.json b/package.json
index ea8af58..556fc3e 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,9 @@
     "@unhead/vue": "^1.11.10",
     "@unocss/reset": "^0.63.6",
     "@vueuse/core": "^11.1.0",
+    "canvas-confetti": "^1.9.3",
     "iconify-icon": "^2.1.0",
-    "identicons-esm": "^0.0.3",
+    "identicons-esm": "^0.0.6",
     "json2md": "^2.0.1",
     "jszip": "^3.10.1",
     "markdown-it-mathjax3": "^4.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08c2262..c549996 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,12 +23,15 @@ importers:
       '@vueuse/core':
         specifier: ^11.1.0
         version: 11.1.0(vue@3.5.12(typescript@5.6.3))
+      canvas-confetti:
+        specifier: ^1.9.3
+        version: 1.9.3
       iconify-icon:
         specifier: ^2.1.0
         version: 2.1.0
       identicons-esm:
-        specifier: ^0.0.3
-        version: 0.0.3
+        specifier: ^0.0.6
+        version: 0.0.6
       json2md:
         specifier: ^2.0.1
         version: 2.0.1
@@ -1688,6 +1691,9 @@ packages:
   caniuse-lite@1.0.30001669:
     resolution: {integrity: sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==}
 
+  canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
+
   caseless@0.12.0:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
 
@@ -2699,8 +2705,8 @@ packages:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
-  identicons-esm@0.0.3:
-    resolution: {integrity: sha512-/YlnqD6tM93r4+ZaU2dWz1zA996vuuL+QSKBBD9ST1JDvAKqmwlQt3yvEOKe6K4XemAid9J/KyqCj7zL46/GbQ==}
+  identicons-esm@0.0.6:
+    resolution: {integrity: sha512-dENh3JdQKm9wrKc1Ui4zBy4VHQY06MTBiqT+88H2+IRct149o6UKA43x58EU2obVhJZ70mTYkGrhtkprOmLEtg==}
 
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
@@ -6228,6 +6234,8 @@ snapshots:
 
   caniuse-lite@1.0.30001669: {}
 
+  canvas-confetti@1.9.3: {}
+
   caseless@0.12.0: {}
 
   ccount@2.0.1: {}
@@ -7431,7 +7439,7 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  identicons-esm@0.0.3: {}
+  identicons-esm@0.0.6: {}
 
   ieee754@1.2.1: {}
 

From d55c81edb421d87f4290bbd662e4607c2326b311 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Tue, 29 Oct 2024 12:42:17 +0100
Subject: [PATCH 04/11] chore: small but necessary comment

---
 .vitepress/theme/components/Identicon.vue        | 7 ++++++-
 .vitepress/theme/components/IdenticonBuilder.vue | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/.vitepress/theme/components/Identicon.vue b/.vitepress/theme/components/Identicon.vue
index 8ed1621..577766d 100644
--- a/.vitepress/theme/components/Identicon.vue
+++ b/.vitepress/theme/components/Identicon.vue
@@ -32,7 +32,12 @@ watch(input, async () => {
       </p>
     </template>
     <p v-if="input === 'nimiq'" absolute right-0 top-32 text-xs op-80>
-      You found a secret! Take a cookie 🍪
+      You found the secret word! Take a cookie 🍪
+    </p>
+    <p v-if="input === 'albatross'" absolute right-0 top-30 text-xs op-80 text-right>
+      Nope. Keep trying.
+      <br>
+      Nonetheless, this identicon rocks 🤘
     </p>
   </form>
   <img :src="identicon" alt="Identicon" nq-mt-16 size-180 mx-auto>
diff --git a/.vitepress/theme/components/IdenticonBuilder.vue b/.vitepress/theme/components/IdenticonBuilder.vue
index d911c54..983bc9e 100644
--- a/.vitepress/theme/components/IdenticonBuilder.vue
+++ b/.vitepress/theme/components/IdenticonBuilder.vue
@@ -132,11 +132,11 @@ async function downloadPng() {
               </h3>
 
               <p mt-12>
-                Using the text input on top of this page, you need to find the secret word that creates the initial identicon. Good luck!
+                Using the text input on top of this page, you need to find the secret word that creates the identicon.
               </p>
 
               <button nq-pill nq-pill-blue px-12 py-2 font-semibold mb-8 nq-mt-24 @click="reset">
-                Reset identicon
+                See identicon
               </button>
               <TooltipArrow as-child>
                 <div i-nimiq:tooltip-triangle text-darkblue rotate-180 h-7 />

From 2964873a537a782776cbc103e3a4c23c1e5bc22d Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Tue, 29 Oct 2024 12:48:38 +0100
Subject: [PATCH 05/11] chore: improved ux for gaem

---
 .vitepress/theme/components/IdenticonBuilder.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/.vitepress/theme/components/IdenticonBuilder.vue b/.vitepress/theme/components/IdenticonBuilder.vue
index 983bc9e..903b2c7 100644
--- a/.vitepress/theme/components/IdenticonBuilder.vue
+++ b/.vitepress/theme/components/IdenticonBuilder.vue
@@ -64,6 +64,16 @@ function reset() {
   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) {
@@ -135,7 +145,7 @@ async function downloadPng() {
                 Using the text input on top of this page, you need to find the secret word that creates the identicon.
               </p>
 
-              <button nq-pill nq-pill-blue px-12 py-2 font-semibold mb-8 nq-mt-24 @click="reset">
+              <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>

From 84703a5003af4dea61910fd1a789ae5ecea9f32d Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Tue, 29 Oct 2024 15:23:00 +0100
Subject: [PATCH 06/11] docs: fix identicons link

---
 build/ui/identicons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/ui/identicons.md b/build/ui/identicons.md
index fadf29d..8d1452c 100644
--- a/build/ui/identicons.md
+++ b/build/ui/identicons.md
@@ -5,7 +5,7 @@
       <div i-nimiq:info op-80 />
       Blog Post
     </a>
-    <a href="https://github.com/onmax/identicons" nq-pill-tertiary nq-pill-sm cursor-pointer nq-arrow flex="~ gap-8 items-center" un-text="neutral-900">
+    <a href="https://github.com/onmax/nimiq-identicons" nq-pill-tertiary nq-pill-sm cursor-pointer nq-arrow flex="~ gap-8 items-center" un-text="neutral-900">
       <div i-nimiq:logos-github op-80 />
       Source code
     </a>

From 7ee5606372a0b66bf22fc911a16b0a3e23b05298 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Tue, 29 Oct 2024 15:30:16 +0100
Subject: [PATCH 07/11] fix: added py to input box

---
 .vitepress/theme/components/Identicon.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vitepress/theme/components/Identicon.vue b/.vitepress/theme/components/Identicon.vue
index 577766d..0529b3b 100644
--- a/.vitepress/theme/components/Identicon.vue
+++ b/.vitepress/theme/components/Identicon.vue
@@ -23,7 +23,7 @@ watch(input, async () => {
 
 <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>
+    <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>

From bd3a0bb09e86dbc07cd5db267976ebcec90ab5f0 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Tue, 29 Oct 2024 15:39:34 +0100
Subject: [PATCH 08/11] chore: updated dependency

---
 .vitepress/theme/components/IdenticonBuilder.vue |  6 +++---
 package.json                                     |  2 +-
 pnpm-lock.yaml                                   | 10 +++++-----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/.vitepress/theme/components/IdenticonBuilder.vue b/.vitepress/theme/components/IdenticonBuilder.vue
index 903b2c7..fda63d7 100644
--- a/.vitepress/theme/components/IdenticonBuilder.vue
+++ b/.vitepress/theme/components/IdenticonBuilder.vue
@@ -132,11 +132,11 @@ async function downloadPng() {
       <div nq-mb-32 size-196 v-html="identicon" />
       <TooltipProvider>
         <TooltipRoot>
-          <TooltipTrigger bottom-40 op-80 aria-label="Let's play a game">
-            <div i-nimiq:info text-16 />
+          <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" :side-offset="5" :collision-padding="8" 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>
+            <TooltipContent z-100 side="bottom" :collision-padding="8" 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>
diff --git a/package.json b/package.json
index 556fc3e..82284a5 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@vueuse/core": "^11.1.0",
     "canvas-confetti": "^1.9.3",
     "iconify-icon": "^2.1.0",
-    "identicons-esm": "^0.0.6",
+    "identicons-esm": "^0.0.8",
     "json2md": "^2.0.1",
     "jszip": "^3.10.1",
     "markdown-it-mathjax3": "^4.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c549996..f37a253 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ importers:
         specifier: ^2.1.0
         version: 2.1.0
       identicons-esm:
-        specifier: ^0.0.6
-        version: 0.0.6
+        specifier: ^0.0.8
+        version: 0.0.8
       json2md:
         specifier: ^2.0.1
         version: 2.0.1
@@ -2705,8 +2705,8 @@ packages:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
-  identicons-esm@0.0.6:
-    resolution: {integrity: sha512-dENh3JdQKm9wrKc1Ui4zBy4VHQY06MTBiqT+88H2+IRct149o6UKA43x58EU2obVhJZ70mTYkGrhtkprOmLEtg==}
+  identicons-esm@0.0.8:
+    resolution: {integrity: sha512-j9ZkKKIwovySRfa6Xmp2DrtWijkSOjGRt14mBl4WZQ+yWZrN3KnAuC1wLRatQ9WXkRt7QSdyZnpdp6RyBZgWsQ==}
 
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
@@ -7439,7 +7439,7 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  identicons-esm@0.0.6: {}
+  identicons-esm@0.0.8: {}
 
   ieee754@1.2.1: {}
 

From e737b795f07582293242ab7d5ea06de1a9cb59ec Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Tue, 29 Oct 2024 15:44:33 +0100
Subject: [PATCH 09/11] chore: more customization

---
 build/ui/identicons.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/build/ui/identicons.md b/build/ui/identicons.md
index 8d1452c..154b3ba 100644
--- a/build/ui/identicons.md
+++ b/build/ui/identicons.md
@@ -62,13 +62,20 @@ const svg = await createIdenticon(input)
 For specific colors or sections of the identicon, use `getIdenticonsParams`:
 
 ```ts
-import { getIdenticonsParams } from 'identicons-esm'
+import { ensambleSvg, formatIdenticon, getIdenticonsParams } from 'identicons-esm'
 
 const input = 'Your input here'
 const { colors, sections } = await getIdenticonsParams(input)
 
+// You can modify any parameter as you wish
 // colors.background, colors.main, colors.accent
 // sections.top, sections.bottom, sections.sides, sections.face (SVG paths)
+
+// Generate SVG string
+const customSvg = ensambleSvg({ colors, sections })
+
+// Also possible to change the Identicon format
+const formatted = formatIdenticon(customSvg, { format: 'image/svg+xml' })
 ```
 
 ## Migration from Legacy

From d7f79e6d19682e23c68abea630aeddb59a6d4846 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Wed, 30 Oct 2024 09:42:23 +0100
Subject: [PATCH 10/11] chore: updated mobile design

---
 .vitepress/theme/components/Identicon.vue     |  6 +-
 .../theme/components/IdenticonBuilder.vue     | 68 +++++++++----------
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 +--
 4 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/.vitepress/theme/components/Identicon.vue b/.vitepress/theme/components/Identicon.vue
index 0529b3b..ada63e4 100644
--- a/.vitepress/theme/components/Identicon.vue
+++ b/.vitepress/theme/components/Identicon.vue
@@ -31,14 +31,14 @@ watch(input, async () => {
         You can write anything!
       </p>
     </template>
-    <p v-if="input === 'nimiq'" absolute right-0 top-32 text-xs op-80>
+    <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-30 text-xs op-80 text-right>
+    <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" nq-mt-16 size-180 mx-auto>
+  <img :src="identicon" alt="Identicon" class="not-zoomable" nq-mt-16 size-180 mx-auto>
 </template>
diff --git a/.vitepress/theme/components/IdenticonBuilder.vue b/.vitepress/theme/components/IdenticonBuilder.vue
index fda63d7..5d8f085 100644
--- a/.vitepress/theme/components/IdenticonBuilder.vue
+++ b/.vitepress/theme/components/IdenticonBuilder.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Colors, Section, Sections } from 'identicons-esm'
 import { useLocalStorage } from '@vueuse/core'
-import { ensambleSvg, formatIdenticon, getIdenticonsFeatures, getIdenticonsParams, colors as identiconColors } from 'identicons-esm'
+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'
@@ -11,8 +11,7 @@ const initialParams = ref<{ sections: Sections, colors: Colors }>()
 
 interface Svg { path: string, svg: string }
 
-const features = await getIdenticonsFeatures()
-const entries = Object.entries(features)
+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 })))
@@ -112,21 +111,14 @@ function select(svg: string) {
 }
 
 async function downloadSvg() {
-  const svg = await formatIdenticon(identicon.value, { format: 'svg', size: 160 })
+  const svg = await formatIdenticon(identicon.value, { format: 'svg' })
   downloadBlob(new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }), 'identicon.svg')
 }
-
-async function downloadPng() {
-  // eslint-disable-next-line no-alert
-  const size = prompt('Please enter the size of the PNG image:', '160')
-  const png = await formatIdenticon(identicon.value, { format: 'image/png', size: Number(size) })
-  downloadBlob(new Blob([png], { type: 'image/png' }), 'identicon.png')
-}
 </script>
 
 <template>
   <div class="nq-no-prose">
-    <div nq-mb-32 flex="~ items-end justify-center gap-16" relative>
+    <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" />
@@ -136,7 +128,7 @@ async function downloadPng() {
             <div i-nimiq:basketball text-16 />
           </TooltipTrigger>
           <TooltipPortal>
-            <TooltipContent z-100 side="bottom" :collision-padding="8" 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>
+            <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>
@@ -156,13 +148,10 @@ async function downloadPng() {
         </TooltipRoot>
       </TooltipProvider>
       <div flex="~ col items-end" absolute top-0 right-0>
-        <span nq-label text-10>Download</span>
-        <button nq-ghost-btn mt-8 text-12 px-4 py-2 font-semibold op-80 @click="downloadSvg">
+        <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>
-        <button nq-ghost-btn mt-8 text-12 px-4 py-2 font-semibold op-80 @click="downloadPng">
-          PNG
-        </button>
       </div>
     </div>
     <form @submit.prevent="">
@@ -177,37 +166,42 @@ async function downloadPng() {
           </button>
         </li>
       </ul>
-      <div v-if="activeSection === 'colors'" w-full nq-mt-32>
-        <label flex="~ items-center gap-8">
-          <span mr-auto text-10 nq-label>Main color</span>
-          <div v-for="color in identiconColors" :key="color">
+      <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
-              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full
-              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeMain }" @click="activeMain = color"
+              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>
-        </label>
+        </div>
 
-        <label flex="~ items-center gap-8" nq-mt-32>
-          <span mr-auto text-10 nq-label>Background color</span>
-          <div v-for="color in identiconColors" :key="color">
+        <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
-              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full
-              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeBackground }"
+              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>
-        </label>
+        </div>
 
-        <label flex="~ items-center gap-8" nq-mt-32>
-          <span mr-auto text-10 nq-label>Accent color</span>
-          <div v-for="color in identiconColors" :key="color">
+        <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
-              :style="`--c: ${color}; background: ${color}`" size-20 cursor-pointer rounded-full
-              :class="{ 'ring-2.5 ring-offset-2 ring-$c': color === activeAccent }" @click="activeAccent = color"
+              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>
-        </label>
+        </div>
       </div>
     </form>
   </div>
diff --git a/package.json b/package.json
index 82284a5..042d0f6 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@vueuse/core": "^11.1.0",
     "canvas-confetti": "^1.9.3",
     "iconify-icon": "^2.1.0",
-    "identicons-esm": "^0.0.8",
+    "identicons-esm": "^0.0.9",
     "json2md": "^2.0.1",
     "jszip": "^3.10.1",
     "markdown-it-mathjax3": "^4.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f37a253..d10b73c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ importers:
         specifier: ^2.1.0
         version: 2.1.0
       identicons-esm:
-        specifier: ^0.0.8
-        version: 0.0.8
+        specifier: ^0.0.9
+        version: 0.0.9
       json2md:
         specifier: ^2.0.1
         version: 2.0.1
@@ -2705,8 +2705,8 @@ packages:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
-  identicons-esm@0.0.8:
-    resolution: {integrity: sha512-j9ZkKKIwovySRfa6Xmp2DrtWijkSOjGRt14mBl4WZQ+yWZrN3KnAuC1wLRatQ9WXkRt7QSdyZnpdp6RyBZgWsQ==}
+  identicons-esm@0.0.9:
+    resolution: {integrity: sha512-X3ltGKmsAVnruBUZ80Px0cSizNvGJLSFsEBd9194ODTclYQuZhfXX0J5/qR62dj87fcfMS+9YJRvGGzC/WXxZQ==}
 
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
@@ -7439,7 +7439,7 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  identicons-esm@0.0.8: {}
+  identicons-esm@0.0.9: {}
 
   ieee754@1.2.1: {}
 

From bb983dd03ca1a9c7d28571e114125cecb0e591eb Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Sat, 16 Nov 2024 22:32:39 -0600
Subject: [PATCH 11/11] docs: update identicons documentation to include
 optional SVG parameters

---
 build/ui/identicons.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/ui/identicons.md b/build/ui/identicons.md
index 154b3ba..c2cca57 100644
--- a/build/ui/identicons.md
+++ b/build/ui/identicons.md
@@ -72,7 +72,7 @@ const { colors, sections } = await getIdenticonsParams(input)
 // sections.top, sections.bottom, sections.sides, sections.face (SVG paths)
 
 // Generate SVG string
-const customSvg = ensambleSvg({ colors, sections })
+const customSvg = ensambleSvg({ colors, sections, /* Other optional values to overwrite default backgroundShape, innerShadow, circleShape */ })
 
 // Also possible to change the Identicon format
 const formatted = formatIdenticon(customSvg, { format: 'image/svg+xml' })