feat: mobile support!

onmax · onmax · commit 1e0c7df45730 · 2025-05-19T11:45:47.000+02:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -42,5 +42,6 @@
     "json",
     "jsonc",
     "yaml"
-  ]
+  ],
+  "unocss.include": []
 }
diff --git a/docs/.vitepress/theme/components/IconSet.vue b/docs/.vitepress/theme/components/IconSet.vue
@@ -144,16 +144,16 @@ function selectColor(c: Color) {
 
   <ClientOnly>
     <Teleport to="#widget" defer>
-      <div class="nq-raw" h-full f-pb-md flex="~ col">
-        <header v-if="!selectedIcon" flex="col gap-16 items-start">
+      <div class="nq-raw" h-full f-pb-md flex="~ col" max-md:f-p-xs of-y-auto>
+        <header v-if="!selectedIcon" flex="~ md:col gap-16 items-start">
           <div stack f-p-md rounded-16 outline="dashed 3 offset--3 neutral-300" w-max>
             <div size-64 />
           </div>
-          <p f-mt-sm f-text-xs pl-4 text-neutral-800 font-semibold>
+          <p f-mt-sm f-text-xs pl-4 text-neutral-800 font-semibold shrink-0>
             Select an icon
           </p>
 
-          <div flex="~ items-center gap-12" f-mt-sm>
+          <div flex="~ wrap items-center gap-12" f-mt-sm>
             <button
               v-for="c in colors" :key="c" shrink-0 size-21 rounded-full outline="~ 1 neutral/20"
               :data-active="activeColor === c ? '' : undefined"
@@ -168,7 +168,7 @@ function selectColor(c: Color) {
         </header>
         <template v-else>
           <header
-            flex="col gap-16 items-start"
+            flex="~ md:col gap-16 items-start"
             :style="`--c: rgb(var(--nq-${activeColor}));--c2: rgb(var(--nq-${activeColor}-400));`"
           >
             <div
@@ -182,25 +182,31 @@ function selectColor(c: Color) {
             >
               <Icon :icon="selectedIcon" text="$c" />
             </div>
-            <div flex="~ items-center gap-12" f-mt-sm>
-              <button
-                v-for="c in colors" :key="c" shrink-0 size-21 rounded-full outline="~ 1 neutral/20"
-                :data-active="activeColor === c ? '' : undefined"
-                :class="{ 'op-30 hocus:op-80': c !== activeColor || (isLogo && !isMono) }" transition-colors
-                :style="`background-color: rgba(var(--nq-${c}));`" @click="selectColor(c)"
-              />
-
-              <button v-if="isLogo" stack bg="neutral-500 data-active:neutral" text-neutral-0 size-21 transition-opacity aspect-square rounded-full :data-state="!isMono ? 'active' : ''" @click="rotateLogoIcon">
-                <span block :class="isMono ? 'i-tabler:paint' : isWhite ? 'i-tabler:paint-off' : !hasWhite ? 'i-nimiq:moon' : 'i-tabler:paint-off'" />
-              </button>
+            <div>
+              <div flex="~ items-center wrap gap-12" f-mt-sm>
+                <button
+                  v-for="c in colors" :key="c" shrink-0 size-21 rounded-full outline="~ 1 neutral/20"
+                  :data-active="activeColor === c ? '' : undefined"
+                  :class="{ 'op-30 hocus:op-80': c !== activeColor || (isLogo && !isMono) }" transition-colors
+                  :style="`background-color: rgba(var(--nq-${c}));`" @click="selectColor(c)"
+                />
+
+                <button v-if="isLogo" stack bg="neutral-500 data-active:neutral" text-neutral-0 size-21 transition-opacity aspect-square rounded-full :data-state="!isMono ? 'active' : ''" @click="rotateLogoIcon">
+                  <span block :class="isMono ? 'i-tabler:paint' : isWhite ? 'i-tabler:paint-off' : !hasWhite ? 'i-nimiq:moon' : 'i-tabler:paint-off'" />
+                </button>
+              </div>
+
+              <p md:hidden mt-10 font-semibold>
+                <CodeBlock text-13 :code="`i-${selectedIcon}`" />
+              </p>
             </div>
           </header>
 
           <template v-if="!missingLogoVariant">
             <p f-mt-md nq-label text="9 neutral-700">
               Copy as
             </p>
-            <p mt-4 font-semibold>
+            <p mt-4 font-semibold max-md:hidden>
               <CodeBlock text-13 :code="`i-${selectedIcon}`" />
             </p>
             <div flex="~ items-center gap-$f-gap" f-my-2xs f="$gap $gap-min-8 $gap-max-12">
diff --git a/packages/nimiq-icons/src/flags/icons.json b/packages/nimiq-icons/src/flags/icons.json
@@ -1268,7 +1268,7 @@
 			"body": "<mask id=\"nimiq-flags-zw-hexagon-pbk987\" width=\"32\" height=\"28\" x=\"0\" y=\"2\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"#fff\" d=\"M31.15 14.71 24.707 3.54a2.58 2.58 0 00-2.234-1.29H9.582c-.92 0-1.77.49-2.23 1.29L.907 14.71c-.46.8-.46 1.78 0 2.58l6.445 11.17c.46.8 1.31 1.29 2.23 1.29h12.89c.92 0 1.77-.49 2.23-1.29l6.445-11.17c.464-.8.464-1.78.004-2.58\"/></mask><g fill=\"none\"><g mask=\"url(#nimiq-flags-zw-hexagon-pbk987)\"><path fill=\"#6DA544\" d=\"M1.962 0H32v32H1.962z\"/><path fill=\"#FFDA44\" d=\"M3.613 4.581H32v4.582l-4.069 6.875 4.07 6.875v4.58H3.612z\"/><path fill=\"#D80027\" d=\"M8.25 9.162H32v4.582l-1.687 2.25L32 18.325v4.581H8.25z\"/><path fill=\"#EEE\" d=\"M0 0v32l17.488-16z\"/><path fill=\"#D80027\" d=\"m6.437 11.825 1.032 3.188h3.35l-2.713 1.975 1.038 3.187-2.713-1.969-2.712 1.969 1.037-3.187-2.712-1.976h3.35z\"/><path fill=\"#FFDA44\" d=\"m9.281 16.263-2.7-.957-.212-1.937a1.044 1.044 0 10-2.032.475l-.75.756h1.344c0 1.4-1.044 1.4-1.044 2.794l.575 1.387h3.482l.58-1.387q.086-.198.107-.413c.5-.2.65-.719.65-.719\"/><path fill=\"#333\" d=\"m1.963 0 13.75 13.75H32v4.575H15.638L1.962 32H0l16-16L0 0z\"/><path fill=\"url(#nimiq-flags-zw-hexagon-pbk987)\" d=\"M31.15 14.71 24.707 3.54a2.58 2.58 0 00-2.234-1.29H9.582c-.92 0-1.77.49-2.23 1.29L.907 14.71c-.46.8-.46 1.78 0 2.58l6.445 11.17c.46.8 1.31 1.29 2.23 1.29h12.89c.92 0 1.77-.49 2.23-1.29l6.445-11.17c.464-.8.464-1.78.004-2.58\"/></g><defs><radialGradient id=\"nimiq-flags-zw-hexagon-pbk987\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(30.943 0 0 30.9452 23.829 29.395)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#1D1D1B\" stop-opacity=\".3\"/><stop offset=\"1\" stop-color=\"#E9B213\" stop-opacity=\"0\"/></radialGradient></defs></g>"
 		}
 	},
-	"lastModified": 1747582181,
+	"lastModified": 1747638902,
 	"width": 32,
 	"height": 32
 }
diff --git a/packages/nimiq-icons/src/icons/icons.json b/packages/nimiq-icons/src/icons/icons.json
@@ -1567,7 +1567,7 @@
 			"hidden": true
 		}
 	},
-	"lastModified": 1747582181,
+	"lastModified": 1747638902,
 	"width": 12,
 	"height": 12
 }
diff --git a/packages/nimiq-vitepress-theme/package.json b/packages/nimiq-vitepress-theme/package.json
@@ -77,6 +77,7 @@
     "minisearch": "catalog:",
     "nimiq-icons": "workspace:*",
     "reka-ui": "catalog:",
+    "vaul-vue": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
   },
diff --git a/packages/nimiq-vitepress-theme/src/components/NqGrid.vue b/packages/nimiq-vitepress-theme/src/components/NqGrid.vue
@@ -17,7 +17,7 @@ function getSpan({ span, bgColor }: NqCardInGrid): CardSpan | undefined {
 </script>
 
 <template>
-  <ul v-if="cards.length > 0" grid="~ cols-6 gap-16" class="nq-grid nq-raw" f-my-md>
+  <ul v-if="cards.length > 0" grid="~ cols-2 md:cols-6 gap-8 md:gap-16" class="nq-grid nq-raw" f-my-md>
     <slot>
       <li v-for="(card, index) in cards" :key="index" :data-span="getSpan(card)">
         <component :is="largeCards ? NqLargeCard : NqCard" v-bind="card" />
@@ -29,11 +29,11 @@ function getSpan({ span, bgColor }: NqCardInGrid): CardSpan | undefined {
 <style scoped>
 ul.nq-grid {
   [data-span='full'] {
-    --uno: 'col-span-6';
+    --uno: 'md:col-span-6';
   }
 
   [data-span='half'] {
-    --uno: 'col-span-3';
+    --uno: 'md:col-span-3';
   }
 
   [data-span='default'] {
diff --git a/packages/nimiq-vitepress-theme/src/composables/useBreadcrumbs.ts b/packages/nimiq-vitepress-theme/src/composables/useBreadcrumbs.ts
@@ -24,6 +24,9 @@ export function useBreadcrumbs() {
   const breadcrumbs = computed<Breadcrumb[]>(() => {
     const items: Breadcrumb[] = []
 
+    if (!currentDocModule.value)
+      return items
+
     // 1. Add module info with link
     items.push({
       text: currentDocModule.value.text,
diff --git a/packages/nimiq-vitepress-theme/src/composables/useCurrentModule.ts b/packages/nimiq-vitepress-theme/src/composables/useCurrentModule.ts
@@ -8,8 +8,8 @@ export const useCurrentModule = createSharedComposable(() => {
 
   const route = useRoute()
 
-  const currentDocModule = computed<NimiqVitepressThemeNav>(() => {
-    const module = theme.value.modules.find(module => route.path.startsWith(withBase(`/${module.subpath}`))) || theme.value.modules[0]
+  const currentDocModule = computed<NimiqVitepressThemeNav | undefined>(() => {
+    const module = theme.value.modules.find(module => route.path.startsWith(withBase(`/${module.subpath}`)))
     return module
   })
 
diff --git a/packages/nimiq-vitepress-theme/src/layout/Layout.vue b/packages/nimiq-vitepress-theme/src/layout/Layout.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { useBreakpoints } from '@vueuse/core'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
 import { useSecondarySidebar } from '../composables/useSecondarySidebar'
+import MobileNav from './MobileNav.vue'
 import PageContent from './PageContent.vue'
 import SecondarySidebar from './SecondarySidebar.vue'
 import Sidebar from './Sidebar.vue'
@@ -17,36 +19,34 @@ const showSidebar = computed(() => {
 })
 
 const { showSecondarySidebar } = useSecondarySidebar()
+
+const breakpoints = useBreakpoints({ md: 768 })
+const isMobile = breakpoints.smaller('md')
 </script>
 
 <template>
-  <div id="viewport" class="flex">
+  <div id="viewport" flex relative var:nq-sidebar-width:100vw md:var:--nq-sidebar-width:288px>
     <!-- TODO Add skip -->
-    <Sidebar v-if="showSidebar" />
-
-    <main
-      :class="{
-        'mx-$nq-sidebar-width': !showSidebar && !showSecondarySidebar,
-        'ml-$nq-sidebar-width': showSidebar,
-      }" class="min-h-screen"
-    >
-      <PageContent />
-    </main>
-    <SecondarySidebar v-if="showSecondarySidebar" />
+    <template v-if="!isMobile">
+      <Sidebar v-if="showSidebar" w="$nq-sidebar-width" shrink-0 />
+      <main
+        min-h-screen flex-1 :class="{
+          'md:max-w-1220 md:mx-auto': !showSidebar && !showSecondarySidebar,
+          'md:ml-$nq-sidebar-width': showSidebar,
+        }"
+      >
+        <PageContent />
+      </main>
+
+      <SecondarySidebar v-if="showSecondarySidebar" />
+    </template>
+    <template v-else>
+      <main min-h-screen w-full mb-56>
+        <PageContent />
+      </main>
+
+      <!-- <SecondarySidebar v-if="showSecondarySidebar" /> -->
+      <MobileNav fixed bottom-0 />
+    </template>
   </div>
 </template>
-
-<style>
-:root {
-  --nq-sidebar-width: 288px;
-}
-
-aside {
-  width: var(--nq-sidebar-width);
-  flex-shrink: 0;
-}
-
-main {
-  flex: 1;
-}
-</style>
diff --git a/packages/nimiq-vitepress-theme/src/layout/MobileNav.vue b/packages/nimiq-vitepress-theme/src/layout/MobileNav.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { watchDebounced } from '@vueuse/core'
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+import { useRouter, withBase } from 'vitepress'
+import { ref, watch } from 'vue'
+import { useSecondarySidebar } from '../composables/useSecondarySidebar'
+import SecondarySidebar from './SecondarySidebar.vue'
+import Sidebar from './Sidebar.vue'
+
+const open = ref(false)
+const openSecondarySidebar = ref(false)
+
+const shouldTeleport = ref(false)
+watchDebounced(
+  () => openSecondarySidebar.value,
+  (val) => {
+    shouldTeleport.value = val
+  },
+  { debounce: 200 },
+)
+
+const { showSecondarySidebar } = useSecondarySidebar()
+
+const { route } = useRouter()
+
+watch(route, () => {
+  open.value = false
+  openSecondarySidebar.value = false
+})
+
+const { showWidget } = useSecondarySidebar()
+</script>
+
+<template>
+  <div>
+    <div v-if="showWidget" id="widget" fixed bottom-64 rounded-4 outline="~ 1.5 offset--1.5 neutral-400" h-20vh bg-neutral-50 shadow w="[calc(100vw-16px)]" inset-x-8 />
+    <nav w-screen border="t neutral-300" nq-raw bg-neutral-0 z-10 :data-sidebar="open ? '' : undefined">
+      <ul grid="~ items-center" :class="showSecondarySidebar ? 'cols-4' : 'cols-3'" children:children:h-56>
+        <li>
+          <a :href="withBase('')" stack>
+            <div i-tabler:home text-20 />
+          </a>
+        </li>
+
+        <li v-if="showSecondarySidebar">
+          <DrawerRoot v-model:open="openSecondarySidebar">
+            <DrawerTrigger stack bg-transparent>
+              <div i-nimiq:widget text-18 />
+            </DrawerTrigger>
+            <DrawerPortal>
+              <DrawerOverlay fixed inset-0 bg-neutral bg-opacity-20 />
+              <DrawerContent mt-24 max-h="96%" h-80vh fixed bottom-56 left-0 right-0>
+                <SecondarySidebar :with-widget="false" bg-neutral-100 w-screen f-pt-sm rounded-t-12 />
+              </DrawerContent>
+            </DrawerPortal>
+          </DrawerRoot>
+        </li>
+
+        <li px-8>
+          <a :href="withBase('')" nq-pill-blue nq-pill-lg h-48="!" w-full outline="~ 1.5 offset--1.5 white/8">
+            <div i-nimiq:magnifying-glass />
+          </a>
+        </li>
+
+        <li>
+          <DrawerRoot v-model:open="open">
+            <DrawerTrigger stack bg-transparent>
+              <div i-tabler:menu-2 text-20 />
+            </DrawerTrigger>
+            <DrawerPortal>
+              <DrawerOverlay fixed inset-0 bg-neutral bg-opacity-20 />
+              <DrawerContent mt-24 max-h="96%" h-80vh fixed bottom-56 left-0 right-0>
+                <Sidebar :search="false" w-screen f-pt-sm rounded-t-12 />
+              </DrawerContent>
+            </DrawerPortal>
+          </DrawerRoot>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<style scoped>
+nav:not([data-sidebar]) {
+  box-shadow:
+    0px -18px 38px rgba(var(--nq-neutral) / 0.07),
+    0px -7px 8.5px rgba(var(--nq-neutral) / 0.04),
+    0px -2px 2.5px rgba(var(--nq-neutral) / 0.02);
+}
+</style>
diff --git a/packages/nimiq-vitepress-theme/src/layout/ModulePill.vue b/packages/nimiq-vitepress-theme/src/layout/ModulePill.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NimiqVitepressThemeNav } from '../types'
+import { withBase } from 'vitepress'
+
+defineProps<{ item: NimiqVitepressThemeNav, component: 'a' | 'div' }>()
+</script>
+
+<template>
+  <component
+    :is="component" :href="withBase(item.defaultPageLink)" f-text-xs py-6 pl-12 pr-16 w-full hocus:bg-neutral-300
+    transition-colors :class="{ 'grid-cols-[max-content_1fr]': !!item.icon }" grid="~ rows-2 gap-x-12 items-center"
+  >
+    <div v-if="item.icon" :class="item.icon" block size-28 row-span-full />
+    <p flex-1 text-left>
+      {{ item.text }}
+    </p>
+    <p v-if="item.description" text="left f-xs" text-neutral-800>
+      {{ item.description }}
+    </p>
+  </component>
+</template>
diff --git a/packages/nimiq-vitepress-theme/src/layout/PageContent.vue b/packages/nimiq-vitepress-theme/src/layout/PageContent.vue
@@ -14,7 +14,7 @@ import '../assets/github-callouts.css'
 const { page } = useData<NimiqVitepressThemeConfig>()
 const { breadcrumbs, showBreadcrumbs } = useBreadcrumbs()
 
-const { secondarySidebar } = useSecondarySidebar()
+const { showSecondarySidebar } = useSecondarySidebar()
 
 const { repoURL, showChangelog } = useChangelog()
 const editUrl = useEditUrl(page.value.relativePath)
@@ -29,7 +29,7 @@ function useEditUrl(relativePath: string): string {
 </script>
 
 <template>
-  <div :class="secondarySidebar ? 'f-pr-xs f-pl-xl' : 'f-px-xl'" f-pt-sm f="$px $px-min-48 $px-max-72" f-pb-sm flex="~ gap-16" relative h-full>
+  <div :class="showSecondarySidebar ? 'md:f-pr-xs md:f-pl-xl' : 'md:f-px-xl'" f-pt-sm f="$px $px-min-48 $px-max-72" pb="f-xl md:sm" flex="~ gap-16" relative h-full>
     <div flex="~ col" h-full flex-1 w="[calc(100vw-2*var(--nq-sidebar-width)-2*var(--f-px))]">
       <ul v-if="showBreadcrumbs" px-32 f-pb-lg flex="~ items-center gap-12">
         <li v-for="({ text, icon }, i) in breadcrumbs" :key="text" contents w-max>
@@ -39,11 +39,11 @@ function useEditUrl(relativePath: string): string {
         </li>
       </ul>
 
-      <article flex-1 class="nq-prose" f-pb-3xl var:nq-prose-max-width:none>
+      <article flex-1 class="nq-prose" f-pb="lg md:3xl" var:nq-prose-max-width:none>
         <Content max-w-none />
         <Changelog v-if="showChangelog" />
       </article>
-      <div flex="~ wrap justify-between gap-8" f-mt-xs f-text-xs>
+      <div flex="~ wrap justify-between gap-8" f-mt-xs f-text-xs px-32>
         <a :href="editUrl" target="_blank" rel="noopener" op-70 nq-arrow>
           Suggest changes on this page
         </a>
diff --git a/packages/nimiq-vitepress-theme/src/layout/SecondarySidebar.vue b/packages/nimiq-vitepress-theme/src/layout/SecondarySidebar.vue
diff --git a/packages/nimiq-vitepress-theme/src/layout/Sidebar.vue b/packages/nimiq-vitepress-theme/src/layout/Sidebar.vue
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -42,5 +42,6 @@`
`42`	`42`	`"json",`
`43`	`43`	`"jsonc",`
`44`	`44`	`"yaml"`
`45`		`- ]`
	`45`	`+ ],`
	`46`	`+ "unocss.include": []`
`46`	`47`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1268,7 +1268,7 @@`
`1268`	`1268`	"body": "<mask id=\"nimiq-flags-zw-hexagon-pbk987\" width=\"32\" height=\"28\" x=\"0\" y=\"2\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"#fff\" d=\"M31.15 14.71 24.707 3.54a2.58 2.58 0 00-2.234-1.29H9.582c-.92 0-1.77.49-2.23 1.29L.907 14.71c-.46.8-.46 1.78 0 2.58l6.445 11.17c.46.8 1.31 1.29 2.23 1.29h12.89c.92 0 1.77-.49 2.23-1.29l6.445-11.17c.464-.8.464-1.78.004-2.58\"/></mask><g fill=\"none\"><g mask=\"url(#nimiq-flags-zw-hexagon-pbk987)\"><path fill=\"#6DA544\" d=\"M1.962 0H32v32H1.962z\"/><path fill=\"#FFDA44\" d=\"M3.613 4.581H32v4.582l-4.069 6.875 4.07 6.875v4.58H3.612z\"/><path fill=\"#D80027\" d=\"M8.25 9.162H32v4.582l-1.687 2.25L32 18.325v4.581H8.25z\"/><path fill=\"#EEE\" d=\"M0 0v32l17.488-16z\"/><path fill=\"#D80027\" d=\"m6.437 11.825 1.032 3.188h3.35l-2.713 1.975 1.038 3.187-2.713-1.969-2.712 1.969 1.037-3.187-2.712-1.976h3.35z\"/><path fill=\"#FFDA44\" d=\"m9.281 16.263-2.7-.957-.212-1.937a1.044 1.044 0 10-2.032.475l-.75.756h1.344c0 1.4-1.044 1.4-1.044 2.794l.575 1.387h3.482l.58-1.387q.086-.198.107-.413c.5-.2.65-.719.65-.719\"/><path fill=\"#333\" d=\"m1.963 0 13.75 13.75H32v4.575H15.638L1.962 32H0l16-16L0 0z\"/><path fill=\"url(#nimiq-flags-zw-hexagon-pbk987)\" d=\"M31.15 14.71 24.707 3.54a2.58 2.58 0 00-2.234-1.29H9.582c-.92 0-1.77.49-2.23 1.29L.907 14.71c-.46.8-.46 1.78 0 2.58l6.445 11.17c.46.8 1.31 1.29 2.23 1.29h12.89c.92 0 1.77-.49 2.23-1.29l6.445-11.17c.464-.8.464-1.78.004-2.58\"/></g><defs><radialGradient id=\"nimiq-flags-zw-hexagon-pbk987\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(30.943 0 0 30.9452 23.829 29.395)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#1D1D1B\" stop-opacity=\".3\"/><stop offset=\"1\" stop-color=\"#E9B213\" stop-opacity=\"0\"/></radialGradient></defs></g>"
`1269`	`1269`	`}`
`1270`	`1270`	`},`
`1271`		`- "lastModified": 1747582181,`
	`1271`	`+ "lastModified": 1747638902,`
`1272`	`1272`	`"width": 32,`
`1273`	`1273`	`"height": 32`
`1274`	`1274`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1567,7 +1567,7 @@`
`1567`	`1567`	`"hidden": true`
`1568`	`1568`	`}`
`1569`	`1569`	`},`
`1570`		`- "lastModified": 1747582181,`
	`1570`	`+ "lastModified": 1747638902,`
`1571`	`1571`	`"width": 12,`
`1572`	`1572`	`"height": 12`
`1573`	`1573`	`}`