Merge branch 'dev'

craftcms · Nov 20, 2024 · 2df119e · 2df119e
2 parents 1339e57 + cde9eb5
commit 2df119e
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 68 deletions.
diff --git a/backend/config/project/imageTransforms/hero--0413e9dc-1c8a-4221-b81d-c9f6c0594cbd.yaml b/backend/config/project/imageTransforms/hero--0413e9dc-1c8a-4221-b81d-c9f6c0594cbd.yaml
@@ -0,0 +1,11 @@
+fill: null
+format: webp
+handle: hero
+height: 1080
+interlace: none
+mode: crop
+name: Hero
+position: center-center
+quality: 60
+upscale: true
+width: 2048
diff --git a/backend/config/project/imageTransforms/wide--0922209d-2911-419e-82cf-b05113a35f6e.yaml b/backend/config/project/imageTransforms/wide--0922209d-2911-419e-82cf-b05113a35f6e.yaml
@@ -3,7 +3,7 @@ format: null
 handle: wide
 height: 1080
 interlace: plane
-mode: fit
+mode: crop
 name: Wide
 position: center-center
 quality: 30

diff --git a/backend/config/project/project.yaml b/backend/config/project/project.yaml
@@ -1,4 +1,4 @@
-dateModified: 1732074647
+dateModified: 1732089349
 elementSources:
   craft\elements\Entry:
     -
@@ -149,6 +149,7 @@ meta:
     58ccb571-6c72-449f-8e7b-6f43c5d416b3: 'Starter Nuxt' # Starter Nuxt
     70b2614b-639a-4de2-8c11-3851d36d6f8c: 'Blog categories' # Blog categories
     163c895f-0c05-4845-80e2-043b2346d830: Address # Address
+    0413e9dc-1c8a-4221-b81d-c9f6c0594cbd: Hero # Hero
     697da4c2-e02f-4f49-9d76-e22609ceda25: Page # Page
     998bf681-e007-4f7e-a525-863e01a38560: Blog # Blog
     5358db38-27c0-49b4-b9d3-e68326e79da2: Image # Image

diff --git a/frontend/components/image.vue b/frontend/components/image.vue
@@ -0,0 +1,25 @@
+<script setup>
+const props = defineProps({
+  image: {
+    type: String,
+    required: true
+  }
+})
+}
+
+const getPhotoUrl = (photo, width) => {
+  return `${photo.url}?width=${width}`
+}
+</script>
+
+<template>
+  <picture>
+    <source data-sizes="100vw" />
+    <img 
+      :src="image.url"
+      :srcset="image.srcset"
+      :alt="image.alt"
+      sizes="100vw"
+    />
+  </picture>
+</template>
diff --git a/frontend/components/teaser.vue b/frontend/components/teaser.vue
@@ -1,42 +1,47 @@
 <script setup>
 const props = defineProps({
-  id: {
-    type: Number,
-    required: true,
-    default: 0
-  },
-  title: {
-    type: String,
-    required: true
-  },
-  uri: {
-    type: String,
+  entry: {
+    type: Object,
     required: true
   },
-  pageSubheading: {
-    type: String,
-    required: false,
-    default: ''
-  },
-  postDate: {
-    type: String,
-    required: true
+  featured: {
+    type: Boolean,
+    default: false
   }
 });
 </script>
 
 <template>
-  <article class="py-6">
-    <h2 class="text-4xl font-bold">
-      <NuxtLink 
-        :to="`${uri}`" 
-        class="text-red-600 hover:underline focus:underline cursor-pointer"
-      >{{ title }}
-    </NuxtLink>
-    </h2>
-    <p v-if="pageSubheading">{{ pageSubheading }}</p>
-    <p>
-      <time class="text-sm" :datetime="postDate">{{ postDate }}</time>
-    </p>
+  <article class="py-6 mb-12">
+    <figure 
+      v-if="entry.image && entry.image.length > 0"   
+      :class="featured ? '' : 'sm:w-1/3'"
+    >
+      <NuxtLink
+        :to="`/${entry.uri}`" 
+        class="text-red-600 hover:underline focus:underline cursor-pointer block mb-4"
+      >
+        <img 
+          :src="entry.image[0].url" 
+          :alt="entry.image[0].alt" 
+          width="990" 
+          height="540"
+        />
+      </NuxtLink>
+    </figure>
+    <div class="mb-4"å>
+      <h2 class="font-bold mb-2" :class="featured ? 'text-6xl' : 'text-4xl'">
+        <NuxtLink 
+          :to="`/${entry.uri}`" 
+          class="text-red-600 hover:underline focus:underline cursor-pointer"
+        >
+          {{ entry.title }}
+        </NuxtLink>
+      </h2>
+      <p v-if="entry.pageSubheading">{{ entry.pageSubheading }}</p>
+      <p>
+        <time class="text-sm" :datetime="entry.postDate">{{ entry.postDate }}</time>
+      </p>
+    </div>
   </article>
 </template>
diff --git a/frontend/pages/[...slug].vue b/frontend/pages/[...slug].vue
@@ -71,7 +71,7 @@ useHead(() => ({
       <h1 class="font-bold text-4xl sm:text-6xl lg:text-9xl">
         {{ pageData.title }}
       </h1> 
-      <p v-if="pageData.pageSubheading">
+      <p v-if="pageData.pageSubheading" class="mt-4">
         {{ pageData.pageSubheading }}
       </p>
     </header>

diff --git a/frontend/pages/blog/[slug].vue b/frontend/pages/blog/[slug].vue
@@ -9,6 +9,7 @@ import { useHead } from '#imports'
 const route = useRoute()
 const graphql = useGraphQL()
 const { isPreview, previewToken, previewTimestamp } = usePreview()
+const hero = computed(() => currentPost.value?.image && currentPost.value?.image.length > 0)
 
 // Disable SSR for preview mode
 if (isPreview.value) {
@@ -81,30 +82,35 @@ useHead(() => ({
     </div>
     
     <template v-else-if="hasPost">
-      <header class="container mx-auto pt-12 pb-6 px-2 text-2xl">
-        <figure v-if="currentPost.image">
-          <img :src="currentPost.image.url" :alt="currentPost.image.description" />
+      <header class="container mx-auto pt-12 pb-6 px-2 text-2xl relative" :class="hero ? 'aspect-video' : ''">
+        
+        <figure v-if="hero" class="absolute top-0 left-0 w-full h-full">
+          <img :src="currentPost.image[0].url" :alt="currentPost.image[0].alt" />
         </figure>
-        <h1 class="font-bold text-4xl sm:text-6xl lg:text-9xl">{{ currentPost.title }}</h1>
-        <p v-if="currentPost.pageSubheading">{{ currentPost.pageSubheading }}</p>
-        <div class="text-xs mt-4">
-          <p>
-            <span v-if="currentPost.category?.length" class="font-bold">
-              {{ currentPost.category[0].title }}
-            </span>
+
+        <div class=" z-10" :class="hero ? 'text-white bg-black/80 p-4 sm:bottom-0 relative sm:ml-4 sm:max-w-screen-lg sm:absolute sm:rounded' : ''">
+          <h1 class="font-bold text-4xl sm:text-6xl lg:text-9xl">{{ currentPost.title }}</h1>
+          <p v-if="currentPost.pageSubheading" class="mt-4">{{ currentPost.pageSubheading }}</p>
+          <div class="text-xs mt-4">
+            <p>
+              <span v-if="currentPost.category?.length" class="font-bold">
+                {{ currentPost.category[0].title }}
+              </span>
             <template v-if="currentPost.category?.length && currentPost.postDate">
               |
             </template>
             <time v-if="currentPost.postDate" :datetime="currentPost.postDate">
               {{ currentPost.postDate }}
-            </time>
-          </p>
+              </time>
+            </p>
+          </div>
         </div>
+      
       </header>
 
       <section class="page__content">
         <div 
-          class="container mx-auto py-12 px-2 text-balance" 
+          class="container mx-auto py-12 px-2 text-balance prose" 
           v-html="currentPost.pageContent"
         ></div>
       </section>
@@ -113,20 +119,12 @@ useHead(() => ({
         <Teaser 
           v-if="currentPost.prev"
           :key="currentPost.prev.id"
-          :id="currentPost.prev.id"
-          :title="currentPost.prev.title"
-          :uri="currentPost.prev.uri"
-          :pageSubheading="currentPost.prev.pageSubheading"
-          :postDate="currentPost.prev.postDate"
+          :entry="currentPost.prev"
         />
         <Teaser
           v-if="currentPost.next"
           :key="currentPost.next.id"
-          :id="currentPost.next.id"
-          :title="currentPost.next.title"
-          :uri="currentPost.next.uri"
-          :pageSubheading="currentPost.next.pageSubheading"
-          :postDate="currentPost.next.postDate"
+          :entry="currentPost.next"
         />
       </section>
     </template>

diff --git a/frontend/pages/blog/index.vue b/frontend/pages/blog/index.vue
@@ -64,20 +64,17 @@ useHead(() => ({
     <div v-else>
       <header class="container mx-auto pt-12 pb-6 px-2 text-2xl">
         <h1 class="font-bold text-4xl sm:text-6xl lg:text-9xl">{{ content.title }}</h1>
-        <p v-if="content.pageSubheading">{{ content.pageSubheading }}</p>
+        <p v-if="content.pageSubheading" class="mt-4">{{ content.pageSubheading }}</p>
       </header>
       <section class="page__content">
         <div class="container mx-auto py-12 px-2 text-balance" v-html="content.pageContent"></div>
       </section>
       <section class="container mx-auto mb-6 px-2 divide-y divide-slate-300">
         <Teaser 
-          v-for="entry in posts" 
+          v-for="(entry, index) in posts"
+          :featured="index === 0 ? true : false"
           :key="entry.id"
-          :id="entry.id"
-          :title="entry.title"
-          :uri="entry.uri"
-          :pageSubheading="entry.pageSubheading"
-          :postDate="entry.postDate"
+          :entry="entry"
         />
         <Pagination
           v-if="totalPages > 1"

diff --git a/frontend/pages/guestbook.vue b/frontend/pages/guestbook.vue
@@ -92,7 +92,7 @@ useHead(() => ({
     <template v-else>
       <header class="container mx-auto pt-12 pb-6 px-2 text-2xl">
         <h1 class="font-bold text-4xl sm:text-6xl lg:text-9xl">{{ content.title }}</h1>
-        <p v-if="content.pageSubheading">{{ content.pageSubheading }}</p>
+        <p v-if="content.pageSubheading" class="mt-4">{{ content.pageSubheading }}</p>
       </header>
 
       <section class="page__content">

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
@@ -42,7 +42,7 @@ watch([isPreview, previewToken], () => {
       <h1 class="font-bold text-4xl sm:text-6xl lg:text-9xl">
         {{ data?.entries?.[0]?.title }}
       </h1>
-      <p v-if="data?.entries?.[0]?.pageSubheading">
+      <p v-if="data?.entries?.[0]?.pageSubheading" class="mt-4">
         {{ data?.entries?.[0]?.pageSubheading }}
       </p>
     </header>

diff --git a/frontend/queries/blog.mjs b/frontend/queries/blog.mjs
@@ -18,6 +18,10 @@ export const BLOG_QUERY = `
       pageSubheading
       pageContent
       postDate @formatDateTime(format: "F j, Y")
+      image {
+        alt
+        url @transform(handle: "wide")
+      }
     }
   }
   entryCount(section: "blogPosts")

diff --git a/frontend/queries/blogPosts.mjs b/frontend/queries/blogPosts.mjs
@@ -8,14 +8,18 @@ export const BLOG_POSTS_QUERY = `
       pageSubheading
       pageContent
       postDate @formatDateTime(format: "F j, Y")
-      next(section: "article") {
+      image {
+        alt
+        url @transform(handle: "hero")
+      }
+      next(section: "blogPosts") {
         id
         slug
         uri
         title
         postDate @formatDateTime(format: "F j, Y")
       }
-      prev(section: "article") {
+      prev(section: "blogPosts") {
         id
         slug
         uri