feat: APPS-2948 Add article/blog route and query and fragments

error.vue

@@ -1,5 +1,9 @@
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+>
 import type { NuxtError } from '#app'
+import { SectionWrapper } from 'ucla-library-website-components'
 
 const props = defineProps({
   error: Object as () => NuxtError
@@ -14,53 +18,80 @@ const isDevelopment = computed(() => process.env.NODE_ENV === 'development')
       id="main"
       class="page page-error"
     >
-      <p class="error">
-        {{ error?.statusCode }}
-      </p>
-      <pre v-if="isDevelopment">
-        {{ error?.message }}
-        <br>
-        {{ error }}
-      </pre>
-      <divider-way-finder />
+      <SectionWrapper>
+        <p class="error">
+          {{ error?.statusCode }}
+        </p>
 
-      <rich-text
-        class="
-        error-text"
-      >
-        <h1
-          v-if="error?.statusCode === 404"
-          class="error-title"
+        <h2
+          v-if="isDevelopment"
+          class="actual-error"
+        >
+          Error Mesage
+        </h2>
+        <h3 class="actual-error">
+          <pre>{{ error?.message }}</pre>
+          <br>
+        </h3>
+
+        <divider-way-finder />
+
+        <h2
+          v-if="isDevelopment"
+          class="error-message"
         >
-          Page not found
-        </h1>
-        <h1
-          v-else
-          class="error-title"
+          Error
+        </h2>
+        <h3
+          v-if="isDevelopment"
+          class="error-message"
         >
-          An error occurred
-        </h1>
+          <pre>{{ error }}</pre>
+        </h3>
 
-        <p>
-          We can’t find the page you are looking for, but we're here to help. <nuxt-link to="/">
-            Go back to home
-            page
-          </nuxt-link> or try these regularly visited links:
-        </p>
-        <ul>
-          <li><a href="https://library.ucla.edu">UCLA Library Home</a></li>
-          <li><a href="https://www.library.ucla.edu/research-teaching-support/research-help">Research Help</a></li>
-          <li>
-            <a href="https://www.library.ucla.edu/use/access-privileges/disability-resources">Accessibility
-              Resources</a>
-          </li>
-        </ul>
-      </rich-text>
+        <divider-way-finder />
+
+        <rich-text
+          class="
+        error-text"
+        >
+          <h1
+            v-if="error?.statusCode === 404"
+            class="error-title"
+          >
+            Page not found
+          </h1>
+          <h1
+            v-else
+            class="error-title"
+          >
+            An error occurred
+          </h1>
+
+          <p>
+            We can’t find the page you are looking for, but we're here to help. <nuxt-link to="/">
+              Go back to home
+              page
+            </nuxt-link> or try these regularly visited links:
+          </p>
+          <ul>
+            <li><a href="https://library.ucla.edu">UCLA Library Home</a></li>
+            <li><a href="https://www.library.ucla.edu/research-teaching-support/research-help">Research Help</a></li>
+            <li>
+              <a href="https://www.library.ucla.edu/use/access-privileges/disability-resources">Accessibility
+                Resources</a>
+            </li>
+          </ul>
+        </rich-text>
+      </SectionWrapper>
     </main>
   </NuxtLayout>
 </template>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 .page-error {
   padding: var(--space-3xl) var(--unit-gutter);
 
@@ -93,6 +124,11 @@ const isDevelopment = computed(() => process.env.NODE_ENV === 'development')
     }
   }
 
+  pre {
+    white-space: pre-wrap;
+    overflow-x: auto;
+  }
+
   @media #{$small} {
     .error {
       font-size: 128px;

gql/fragments/BlockContactInfoFragment.gql

@@ -0,0 +1,10 @@
+fragment BlockContactInfoFragment on ElementInterface {
+    id
+    typeHandle
+    contactInfo {
+        ... on contactInfo_contactInfo_BlockType {
+            id
+            title
+        }
+    }
+}

gql/fragments/BlockHorizontalDividerFragment.gql

@@ -0,0 +1,5 @@
+fragment BlockHorizontalDividerFragment on ElementInterface {
+    id
+    typeHandle
+    horizontalDivider
+}

gql/fragments/BlockTextColumnsFragment.gql

@@ -0,0 +1,10 @@
+fragment BlockTextColumnsFragment on ElementInterface {
+    id
+    typeHandle
+    sectionTitle: titleGeneral
+    sectionSummary: summary
+    textColumns {
+      titleHeading
+      mainText
+    }
+}

gql/fragments/collections/AllFtvaFpb.gql

@@ -0,0 +1,54 @@
+#import "../gql/fragments/Image.gql"
+#import "../gql/fragments/MediaAsset.gql"
+#import "../gql/fragments/BlockCallToActionFragment.gql"
+#import "../gql/fragments/BlockContactInfoFragment.gql"
+#import "../gql/fragments/BlockFormFragment.gql"
+#import "../gql/fragments/BlockHorizontalDividerFragment.gql"
+#import "../gql/fragments/BlockImpactNumberCardsFragment.gql"
+#import "../gql/fragments/BlockMediaGalleryFragment.gql"
+#import "../gql/fragments/BlockMediaWithTextFragment.gql"
+#import "../gql/fragments/BlockPullQuoteFragment.gql"
+#import "../gql/fragments/BlockRichTextFragment.gql"
+#import "../gql/fragments/BlockSimpleCardsFragment.gql"
+#import "../gql/fragments/BlockTextColumnsFragment.gql"
+
+fragment AllFtvaFpb on ElementInterface {
+    blocks: allFtvaFpb {
+        id
+        typeHandle
+
+        ... on allFtvaFpb_callToAction_BlockType {
+            ...BlockCallToActionFragment
+        }
+        ... on allFtvaFpb_contactInfo_BlockType {
+            ...BlockContactInfoFragment
+        }
+        ... on allFtvaFpb_form_BlockType {
+            ...BlockFormFragment
+        }
+        ... on allFtvaFpb_horizontalDivider_BlockType {
+            ...BlockHorizontalDividerFragment
+        }
+        ... on allFtvaFpb_impactNumberCards_BlockType {
+            ...BlockImpactNumberCardsFragment
+        }
+        ... on allFtvaFpb_mediaGallery_BlockType {
+            ...BlockMediaGalleryFragment
+        }
+        ... on allFtvaFpb_mediaWithText_BlockType {
+            ...BlockMediaWithTextFragment
+        }
+        ... on allFtvaFpb_pullQuote_BlockType {
+            ...BlockPullQuoteFragment
+        }
+        ... on allFtvaFpb_richText_BlockType {
+            ...BlockRichTextFragment
+        }
+        ...on allFtvaFpb_simpleCards_BlockType {
+            ...BlockSimpleCardsFragment
+        }
+        ...on allFtvaFpb_textColumns_BlockType {
+            ...BlockTextColumnsFragment
+        }
+    }
+}

gql/queries/FTVAArticleDetail.gql

@@ -0,0 +1,59 @@
+#import "../gql/fragments/Image.gql"
+#import "../gql/fragments/collections/AllFtvaFpb.gql"
+
+query FTVAArticleDetail($slug: [String!]) {
+  ftvaArticle: entry(section: "ftvaArticle", slug: $slug)  {
+    id
+    typeHandle
+    postDate
+    slug
+    title
+    uri
+
+    imageCarousel {
+      ... on imageCarousel_imageCarousel_BlockType {
+        image {
+          ...Image
+        }
+        creditText
+      }
+    }
+
+    # CardMeta
+    articleCategories {
+      title
+    }
+    contributors {
+      ... on contributors_externalContributor_BlockType {
+        byline
+        contributor
+      }
+      externalContributor {
+        id
+        byline
+        contributor
+      }
+    }
+    aboutTheAuthor
+
+    # FTVA Flexible Page Block Collection (FPBs)
+    ...AllFtvaFpb
+  }
+  # SectionTeaserCard (Recent posts)
+  ftvaRecentPosts: entries( section: "ftvaArticle", limit: 3, orderBy: "postDate ASC") {
+    id
+    title
+    to: slug
+    articleCategories {
+      title
+    }
+    imageCarousel {
+      ... on imageCarousel_imageCarousel_BlockType {
+        image {
+          ...Image
+        }
+      }
+    }
+    postDate @formatDateTime(format: "mm d, Y", timezone: "America/Los_Angeles")
+  }
+}

gql/queries/FTVAArticleList.gql

@@ -0,0 +1,9 @@
+query FTVAArticleList {
+  entries(section: ["ftvaArticle"], orderBy: "postDate") {
+    typeHandle
+    id
+    title
+    to: slug
+    text: summary
+  }
+}

package.json

@@ -39,6 +39,6 @@
 		"nuxt-graphql-request": "^7.0.5",
 		"sass": "^1.66.1",
 		"ucla-library-design-tokens": "^5.22.0",
-		"ucla-library-website-components": "3.18.0"
+		"ucla-library-website-components": "3.22.0"
 	}
-}
+}