minor fixes and prettier

Author: alexwpengine

examples/nuxt/template-hierarchy-data-fetching/example-app/assets/scss/components/button.scss

@@ -9,6 +9,7 @@
 
   &.button-primary {
     background-color: $primary-color;
+    border-color: $primary-color;
     &:hover {
       background-color: color.scale($primary-color, $lightness: -15%);
     }

examples/nuxt/template-hierarchy-data-fetching/example-app/assets/scss/components/comments/comment-form.scss

@@ -4,6 +4,7 @@
     gap: 1rem;
     background-color: #f9f9f9;
     padding: 1rem;
+    margin-top: 1rem;
 }
 .message-container {
   margin-bottom: 1rem;

examples/nuxt/template-hierarchy-data-fetching/example-app/assets/scss/components/comments/comment-item.scss

@@ -5,6 +5,10 @@
   border: 1px solid #ccc;
   border-radius: 5px;
   margin-bottom: 10px;
+  background: #f9fafb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
   .comment-header {
     display: flex;
     justify-content: space-between;
@@ -37,3 +41,62 @@
     margin-left: 15px;
   }
 }
+.comment-meta {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+}
+
+.comment-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 0.75rem;
+  flex-shrink: 0;
+}
+
+.comment-info {
+  flex: 1;
+}
+
+.comment-author {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.author-link {
+  color: #3b82f6;
+  text-decoration: none;
+}
+
+.author-link:hover {
+  text-decoration: underline;
+}
+
+.author-name {
+  color: #374151;
+}
+
+.comment-date {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.comment-content {
+  margin-bottom: 0.75rem;
+  line-height: 1.6;
+}
+
+.comment-content :deep(p) {
+  margin-bottom: 0.5rem;
+}
+
+.comment-content :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+.comment-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}

examples/nuxt/template-hierarchy-data-fetching/example-app/assets/scss/components/header/header.scss

@@ -14,7 +14,7 @@
 }
 
 .site-title-wrapper a {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: bold;
   text-decoration: none;
   color: #333;

examples/nuxt/template-hierarchy-data-fetching/example-app/assets/scss/components/post-card.scss

@@ -42,9 +42,7 @@
   }
   .categories-container, .tags-container {
     display: flex;
-
     font-size: 0.75rem;
-    gap: 0.5rem;
     margin-bottom: 0.5rem;
     list-style-type: none;
 
@@ -53,6 +51,7 @@
       font-size: 0.75rem;
       color: #555;
       text-decoration: none;
+      margin-left: .25rem
     }
   }
 .featured-image-container {

examples/nuxt/template-hierarchy-data-fetching/example-app/components/Comments.vue

@@ -89,10 +89,10 @@ const showCommentForm = ref(true);
 // Recursive function to build nested comment structure
 const buildCommentTree = (comments, parentId = null) => {
   return comments
-    .filter(comment => comment.parentId === parentId)
-    .map(comment => ({
+    .filter((comment) => comment.parentId === parentId)
+    .map((comment) => ({
       ...comment,
-      replies: buildCommentTree(comments, comment.id)
+      replies: buildCommentTree(comments, comment.id),
     }));
 };
 
@@ -278,4 +278,4 @@ const handleCommentError = (error) => {
   color: #6b7280;
   font-size: 0.9rem;
 }
-</style>
+</style>

examples/nuxt/template-hierarchy-data-fetching/example-app/components/404.vue renamed to examples/nuxt/template-hierarchy-data-fetching/example-app/components/NotFound.vue

@@ -65,6 +65,9 @@ const loadMorePosts = async () => {
 
       // Update pageInfo
       pageInfo.value = data.posts.pageInfo;
+
+      await nextTick();
+      scrollToNewContent(newPosts.length);
     } else {
       // No new posts found
       pageInfo.value = { ...pageInfo.value, hasNextPage: false };
@@ -77,6 +80,19 @@ const loadMorePosts = async () => {
     emit("loading", false);
   }
 };
+const scrollToNewContent = async (newPostsCount) => {
+  // Wait for the specified delay
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
+  try {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight - window.innerHeight,
+      behavior: "smooth",
+    });
+  } catch (error) {
+    console.warn("Error during scroll:", error);
+  }
+};
 </script>
 
 <template>

examples/nuxt/template-hierarchy-data-fetching/example-app/components/blog/LoadMore.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   replyData: {
     type: Object,
     default: null, // 0 means it's a root comment, not a reply
-  }
+  },
 });
 
 const emit = defineEmits(["submit", "cancel", "success", "error"]);
@@ -179,7 +179,9 @@ const cancelReply = () => {
 <template>
   <div id="comment-form" class="comment-form">
     <h3 class="text-center">
-      {{ replyData ? `Reply to "${replyData.author}" comment` : "Leave a Comment" }}
+      {{
+        replyData ? `Reply to "${replyData.author}" comment` : "Leave a Comment"
+      }}
     </h3>
     <!-- Success/Error Message -->
     <div v-if="showMessage" class="message-container">
@@ -242,7 +244,7 @@ const cancelReply = () => {
         ></textarea>
       </div>
 
-      <div class="gap-4 flex justify-end">
+      <div class="">
         <button
           type="submit"
           class="button button-primary"

examples/nuxt/template-hierarchy-data-fetching/example-app/components/templates/comments/CommentForm.vue

@@ -1,39 +1,26 @@
 <script setup>
-import { computed } from 'vue';
-
+import { computed } from "vue";
+import { formatDate } from "~/lib/utils";
 const props = defineProps({
   comment: {
     type: Object,
-    required: true
-  }
+    required: true,
+  },
 });
 
-defineEmits(['reply']);
-
-// Format the comment date
-const formattedDate = computed(() => {
-  if (!props.comment.date) return '';
-  return new Date(props.comment.date).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  });
-});
+defineEmits(["reply"]);
 
-// Get avatar URL with fallback
 const avatarUrl = computed(() => {
-  return props.comment.author?.node?.avatar?.url || 
-         `https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y`;
+  return (
+    props.comment.author?.node?.avatar?.url ||
+    `https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y`
+  );
 });
 
-// Get author name with fallback
 const authorName = computed(() => {
-  return props.comment.author?.node?.name || 'Anonymous';
+  return props.comment.author?.node?.name || "Anonymous";
 });
 
-// Get author URL
 const authorUrl = computed(() => {
   return props.comment.author?.node?.url;
 });
@@ -42,17 +29,17 @@ const authorUrl = computed(() => {
 <template>
   <article class="comment-item">
     <div class="comment-meta">
-      <img 
-        :src="avatarUrl" 
+      <img
+        :src="avatarUrl"
         :alt="`${authorName}'s avatar`"
         class="comment-avatar"
       />
       <div class="comment-info">
         <div class="comment-author">
-          <a 
-            v-if="authorUrl" 
-            :href="authorUrl" 
-            target="_blank" 
+          <a
+            v-if="authorUrl"
+            :href="authorUrl"
+            target="_blank"
             rel="noopener noreferrer"
             class="author-link"
           >
@@ -61,17 +48,17 @@ const authorUrl = computed(() => {
           <span v-else class="author-name">{{ authorName }}</span>
         </div>
         <time class="comment-date" :datetime="comment.date">
-          {{ formattedDate }}
+          {{ formatDate(comment.date) }}
         </time>
       </div>
     </div>
-    
+
     <div class="comment-content" v-html="comment.content"></div>
-    
+
     <div class="comment-actions">
-      <button 
+      <button
         @click="$emit('reply', comment)"
-        class="reply-button"
+        class="button button-secondary button-small reply-button"
       >
         Reply
       </button>
@@ -80,82 +67,5 @@ const authorUrl = computed(() => {
 </template>
 
 <style scoped>
-.comment-item {
-  background: #f9fafb;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.comment-meta {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 0.75rem;
-}
-
-.comment-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  margin-right: 0.75rem;
-  flex-shrink: 0;
-}
-
-.comment-info {
-  flex: 1;
-}
-
-.comment-author {
-  font-weight: 600;
-  margin-bottom: 0.25rem;
-}
-
-.author-link {
-  color: #3b82f6;
-  text-decoration: none;
-}
-
-.author-link:hover {
-  text-decoration: underline;
-}
-
-.author-name {
-  color: #374151;
-}
-
-.comment-date {
-  color: #6b7280;
-  font-size: 0.875rem;
-}
-
-.comment-content {
-  margin-bottom: 0.75rem;
-  line-height: 1.6;
-}
-
-.comment-content :deep(p) {
-  margin-bottom: 0.5rem;
-}
-
-.comment-content :deep(p:last-child) {
-  margin-bottom: 0;
-}
-
-.comment-actions {
-  display: flex;
-  gap: 1rem;
-}
-
-.reply-button {
-  background: none;
-  border: none;
-  color: #3b82f6;
-  cursor: pointer;
-  font-size: 0.875rem;
-  padding: 0.25rem 0;
-}
-
-.reply-button:hover {
-  text-decoration: underline;
-}
-</style>
+@import "/assets/scss/components/comments/comment-item.scss";
+</style>