feat: hide history if its too long

components/pages/home/PageHistory.vue

@@ -6,6 +6,7 @@
   const { pageHistory } = usePageHistory()
 
   function historyPathToTitle(path: string) {
+    // TODO: decodeURIComponent
     return (
       path
         //

components/pages/posts/post/Post.vue

@@ -141,7 +141,7 @@ const tagsAsSingleArray = computed(() => {
           :key='tag.name'
         >
           <button
-            v-on-long-press.stop.prevent="() => emit('clickLongTag', tag.name)"
+            v-on-long-press.prevent.stop="() => emit('clickLongTag', tag.name)"
             :class="{
               'bg-primary-400/20 text-primary-400/90 ring-accent-400/20 hover:bg-primary-400/20': tag.type === 'artist',
               'bg-green-400/20 text-green-400/90 ring-green-400/20 hover:bg-green-400/20': tag.type === 'copyright',

components/shared/ShowMore.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+  import { useToggle } from '@vueuse/core'
+
+  const props = defineProps<{
+    maxHeightInRem: number
+  }>()
+
+  const [isExpanded, toggleExpanded] = useToggle()
+
+  const contentRef = ref<HTMLElement | null>(null)
+
+  function convertRemToPixels(rem: number): number {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
+  }
+
+  const isContentTallerThanMaxHeight = computed(() => {
+    if (!contentRef.value) {
+      return false
+    }
+
+    return contentRef.value.scrollHeight > convertRemToPixels(props.maxHeightInRem)
+  })
+
+  const shouldBeExpanded = computed(() => {
+    return isContentTallerThanMaxHeight.value && !isExpanded.value
+  })
+</script>
+
+<template>
+  <!--  TODO: Animate max height -->
+  <div
+    :style="{ maxHeight: shouldBeExpanded ? `${props.maxHeightInRem}rem` : 'none' }"
+    class="relative overflow-y-hidden"
+  >
+    <!-- Overlay-->
+    <div
+      v-if="shouldBeExpanded"
+      class="pointer-events-none absolute inset-0 z-10 bg-gradient-to-t from-base-1000 via-transparent"
+    />
+
+    <!-- Content -->
+    <div ref="contentRef">
+      <slot />
+    </div>
+  </div>
+
+  <!-- Show more/less button -->
+  <div
+    v-if="isContentTallerThanMaxHeight"
+    class="flex justify-center pt-4"
+  >
+    <button
+      class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util rounded-md bg-base-1000/60 px-2 py-1 text-sm ring-1 ring-base-0/20"
+      type="button"
+      @click="toggleExpanded()"
+    >
+      {{ isExpanded ? 'Show less' : 'Show more' }}
+    </button>
+  </div>
+</template>

pages/index.vue

@@ -135,13 +135,15 @@
       </section>
 
       <!-- History -->
-      <section v-if="false">
+      <section v-if="pageHistory.length">
         <PageHeader as="h2">
           <template #title>History</template>
           <template #text>Continue where you left off</template>
         </PageHeader>
 
-        <LazyPageHistory class="mt-4" />
+        <ShowMore :max-height-in-rem="12">
+          <LazyPageHistory class="mt-4" />
+        </ShowMore>
       </section>
 
       <!-- Featured tags -->