Viewtransitionapi

assets/css/main.sass

@@ -65,22 +65,6 @@ html
 //   margin: 0 -50vw !important
 //   padding: 1rem 50vw !important
 
-.prose
-  --fg: #701AC7
-  --fg-deep: #222
-  --fg-deeper: #000
-
-  color: var(--fg)
-
-html.dark .prose
-  --fg: #e6deff
-  --fg-deep: #ddd
-  --fg-deeper: #fff
-
-.prose main a
-  font-weight: inherit
-  text-decoration: none
-  border-bottom: 1.5px solid rgba(125, 125, 125, 0.7)
-  transition: border 0.2s ease-in-out
-  &:hover
-    border-bottom: 1.7px solid var(--fg)
+// missing reset
+dl, dt, dd
+  margin: 0

assets/css/text.sass

@@ -1,3 +1,23 @@
 .prose h1, h2, h3, h4, h5
   font-family: "Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
   font-weight: 800
+
+.prose
+  --fg: #701AC7
+  --fg-deep: #222
+  --fg-deeper: #000
+
+  color: var(--fg)
+
+html.dark .prose
+  --fg: #e6deff
+  --fg-deep: #ddd
+  --fg-deeper: #fff
+
+.prose main a
+  font-weight: inherit
+  text-decoration: none
+  border-bottom: 1.5px solid rgba(125, 125, 125, 0.7)
+  transition: border 0.2s ease-in-out
+  &:hover
+    border-bottom: 1.7px solid var(--fg)

components/TravelPostItem.vue

@@ -0,0 +1,76 @@
+<script setup lang='ts'>
+interface Post {
+  title?: string
+  date: string
+  _path: string
+  description?: string
+  imageUrl?: string
+  readingTime?: {
+    text: string
+  }
+}
+
+const props = defineProps<{ post: Post }>()
+
+const { cleanString: cleanTitle, metaDesc } = useCleanString(props.post.title!)
+</script>
+
+<template>
+  <NuxtLink
+    :to="props.post._path"
+    class="border-none!"
+  >
+    <nuxt-img
+      :src="props.post.imageUrl"
+      class="my-0 h-52 w-full xs:rounded-lg object-cover"
+      alt="blog post cover image"
+      width="300"
+    />
+  </NuxtLink>
+  <header class="flex flex-1 flex-col justify-between pb-6 text-left">
+    <NuxtLink :to="post._path" class="border-none!">
+      <h2 class="mt-0 font-mont text-xl font-semibold">
+        {{ post.title }}
+      </h2>
+    </NuxtLink>
+    <p class="mb-0 mt-3 text-sm">
+      {{ post.description }}
+    </p>
+    <dl class="mt-1 flex text-xs uppercase flex-row gap-2">
+      <div class="flex flex-row gap3">
+        <dt>
+          Published
+        </dt>
+        <dd class="font-semibold">
+          <NuxtTime
+            :datetime="post.date"
+            day="numeric"
+            month="short"
+            year="numeric"
+            class="dd"
+          />
+        </dd>
+      </div>
+      <dd class="inline-block">
+        &middot;
+      </dd>
+      <div class="flex flex-row gap3">
+        <dt>
+          Reading time
+        </dt>
+        <dd class="font-semibold">
+          {{ post.readingTime?.text.substring(0, 5) }}
+        </dd>
+      </div>
+    </dl>
+  </header>
+</template>
+
+<style scoped>
+header > a > h2  {
+  view-transition-name: v-bind('cleanTitle');
+}
+header > dl {
+  view-transition-name: v-bind('metaDesc');
+}
+</style>

components/content/CustomList.vue

@@ -3,19 +3,6 @@ const props = defineProps<{
   items: string[]
   icon: string
 }>()
-
-const iconIsEmoji = computed(() => {
-  // https://unicode.org/Public/emoji/13.1/emoji-sequences.txt
-  const regex = /[\u{1F600}-\u{1F64F}|\u{1F300}-\u{1F5FF}|\u{1F680}-\u{1F6FF}|\u{1F1E0}-\u{1F1FF}|\u{2600}-\u{26FF}|\u{2700}-\u{27BF}]/gu
-  return regex.test(props.icon)
-})
-
-const iconWithPrefix = computed(() => {
-  if (props.icon.startsWith('i-'))
-    return props.icon
-
-  return `i-${props.icon}`
-})
 </script>
 
 <template>
@@ -25,12 +12,9 @@ const iconWithPrefix = computed(() => {
       class="flex items-center gap2"
     >
       <span
-        :class="iconWithPrefix"
         class="flex items-center"
       >
-        <template v-if="iconIsEmoji">
-          {{ props.icon }}
-        </template>
+        {{ props.icon }}
       </span>
       {{ item }}
     </li>

composables/useCleanString.ts

@@ -0,0 +1,12 @@
+export function useCleanString(str: MaybeRef<string>) {
+  const _str = toValue(str)
+  const cleanString = ref()
+
+  cleanString.value = _str.replace(/[^a-zA-Z0-9]/g, '')
+  const metaDesc = computed(() => `${cleanString.value}-meta`)
+
+  return {
+    cleanString,
+    metaDesc,
+  }
+}

content/travel/5.taiwan.md

@@ -1,5 +1,5 @@
 ---
-title: 'Taiwan (台灣)'
+title: 'Taiwan'
 description: 'Ein Roadtrip durch Taiwan.'
 imageUrl: '/travel/taiwan/taipei_sunsetview_edited_diwwcg.png'
 date: '2023-05-09'

content/travel/6.still-alive.md

@@ -40,7 +40,7 @@ unseren Standard-Filtern nach Unterkünften:
 ::CustomList
 ---
 items: ['<25 Euro/Nacht', 'Bewertung 8+', 'Doppelbett', 'Privates Bad']
-icon: "i-fluent-emoji-high-contrast:sleeping-face"
+icon: "😴"
 ---
 ::
 
@@ -126,7 +126,7 @@ nächstes gehen. Das Spiel beginnt von vorne:
 ::CustomList
 ---
 items: ['<25 Euro/Nacht', 'Bewertung 8+', 'Doppelbett', 'Privates Bad']
-icon: "i-fluent-emoji-high-contrast:sleeping-face"
+icon: "😴"
 ---
 ::
 ...
@@ -238,7 +238,7 @@ Singapur hätte ich fast vergessen:
 ::CustomList
 ---
 items: ['Stadt', 'heiß', 'teuer', 'künstlich', 'crazy Flughafen']
-icon: "i-emojione-monotone:flag-for-singapore"
+icon: "🇸🇬"
 ---
 ::
 

layouts/articles.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="articles-layout prose prose-zinc px-3 py-10 m-auto dark:prose-invert sm:pt-14">
+  <div class="articles-layout prose prose-zinc m-auto px-3 py-10 dark:prose-invert sm:pt-14">
     <slot />
   </div>
 </template>

nuxt.config.ts

@@ -49,7 +49,7 @@ export default defineNuxtConfig({
     payloadExtraction: true,
     typedPages: true,
     headNext: true,
-    // viewTransition: true,
+    viewTransition: true,
     // componentIslands: true,
   },
   htmlValidator: {

package.json

@@ -15,7 +15,7 @@
     "types": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.6.1",
+    "@antfu/eslint-config": "2.6.3",
     "@fawmi/vue-google-maps": "0.9.72",
     "@iconify/json": "2.2.165",
     "@iconify/vue": "4.1.1",
@@ -25,7 +25,7 @@
     "@nuxtjs/html-validator": "1.6.0",
     "@nuxtjs/plausible": "0.2.4",
     "@nuxtjs/robots": "3.0.0",
-    "@stylistic/eslint-plugin": "1.5.3",
+    "@stylistic/eslint-plugin": "1.5.4",
     "@types/node": "20.10.6",
     "@unocss/eslint-config": "0.58.3",
     "@unocss/nuxt": "0.58.3",

pages/articles/[...article].vue

@@ -40,9 +40,3 @@ const locale = currentPost.data.value?._locale
     </article>
   </main>
 </template>
-
-<!-- <style scoped>
-h1 {
-  view-transition-name: header;
-}
-</style> -->

pages/articles/index.vue

@@ -5,9 +5,9 @@ useHead({
   title: 'Articles - Patrik Bird',
 })
 
-definePageMeta({
-  layout: 'articles',
-})
+// definePageMeta({
+//   layout: 'articles',
+// })
 
 const postsLatestQuery = useLazyAsyncData(
   'articles-latest-data',
@@ -83,7 +83,7 @@ const allArticles = computed(() => {
 </template>
 
 <style scoped>
-/* h1 {
-  view-transition-name: header;
-} */
+main > h1 {
+  view-transition-name: headline;
+}
 </style>

pages/index.vue

@@ -41,15 +41,8 @@ useHead({
   </main>
 </template>
 
-<!-- <style scoped>
-h1 {
-  view-transition-name: header;
+<style scoped>
+main > h1 {
+  view-transition-name: headline;
 }
 </style>
-
-<style>
-::view-transition-old(header),
-::view-transition-new(header) {
-  width: auto;
-}
-</style> -->