feat: status page with libguides integration on client side

.github/workflows/setup-workspace/action.yml

@@ -1,36 +1,27 @@
 name: Set up Workspace
 description: 'Checks out repository, installs correct version of node and npm dependencies.'
-# inputs:
-#   who-to-greet:  # id of input
-#     description: 'Who to greet'
-#     required: true
-#     default: 'World'
-# outputs:
-#   random-number:
-#     description: "Random number"
-#     value: ${{ steps.random-number-generator.outputs.random-id }}
 runs:
   using: composite
   steps:
-    - uses: pnpm/action-setup@v2
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - uses: pnpm/action-setup@v4
+      name: Install pnpm
       with:
-        version: 8
-        run_install: |
-          - recursive: true
-          - args: [--global, gulp, prettier, typescript]
-    - name: Get pnpm store directory
-      shell: bash
-      run: |
-        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+        version: 9
+        run_install: false
 
-    - uses: actions/cache@v3
-      name: Setup pnpm cache
+    - name: Install Node.js
+      uses: actions/setup-node@v4
       with:
-        path: ${{ env.STORE_PATH }}
-        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-pnpm-store-
+        node-version: 18
+        cache: 'pnpm'
 
     - name: Install dependencies
       shell: bash
-      run: pnpm install
+      run: pnpm install --frozen-lockfile --strict-peer-dependencies
+
+    - name: Install Global Packages
+      shell: bash
+      run: pnpm add -g gulp prettier typescript

netlify/edge-functions/blockUserAgents.js

@@ -1,14 +1,14 @@
-export default async (request, context) => {
-  const blockedUserAgents = [
-    'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])', 'claudebot'
-  ]
+const blockedUserAgents = [
+  'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; [email protected])',
+  'claudebot'
+]
+
+export default (request) => {
+  const userAgent = request.headers.get('user-agent')
 
-  const userAgent = await request.headers.get('user-agent')
   if (blockedUserAgents.includes(userAgent)) {
-    return new Response('Access Denied', {
-      status: 403
-    })
+    return new Response('Access Denied', { status: 403 }) // Forbidden
   }
 
-  return context.next()
+  // Continue with the request as normal
 }

nuxt.config.ts

@@ -91,6 +91,7 @@ export default defineNuxtConfig({
           }
           routes.add('/about/reports')
           routes.add('/help')
+          routes.add('/about/status-updates')
         }
         console.log('prerender:routes ctx.routes', routes)
       }

package.json

@@ -41,5 +41,8 @@
 		"sass": "^1.66.1",
 		"ucla-library-design-tokens": "^5.27.0",
 		"ucla-library-website-components": "^3.31.0"
+	},
+	"engines": {
+		"pnpm": "^9.12.1"
 	}
 }

pages/about/status-updates.vue

@@ -0,0 +1,97 @@
+<script setup>
+// COMPONENTS
+import { NavBreadcrumb, BannerText, PageAnchor, SectionWrapper, DividerWayFinder, FlexibleBlocks } from 'ucla-library-website-components'
+
+const content = ref(null)
+const page = ref({})
+const h2Array = ref([]) // anchor tags
+const { $getHeaders } = useNuxtApp()
+useHead({
+  title: ''
+})
+const bannerSummary = ref('')
+// Define options for formatting
+const options = {
+  weekday: 'long', // Full name of the day
+  year: 'numeric', // Full numeric year
+  month: 'long', // Full name of the month
+  day: 'numeric' // Numeric day of the month
+}
+
+onMounted(async () => {
+  // console.log("fetching data in onmounted from libguides proxy service")
+  try {
+    const response = await $fetch('https://libguides-proxy.library.ucla.edu/api/libguides/library/status/updates/proxy')
+
+    // const response = await $fetch('http://localhost:8888/api/libguides/library/status/updates/proxy')
+    // console.log("Response from libguides proxy:", response)
+    content.value = response
+    page.value.blocks = response
+    const today = new Date()
+    // Format the date with options
+    const formattedDate = today.toLocaleDateString('en-US', options)
+    bannerSummary.value = `Last updated ${formattedDate}.`
+
+    // Call the plugin method to get the .section-header2 and .section-header3 elements
+    h2Array.value = $getHeaders.getHeadersMethod()
+  } catch (error) {
+    console.error('Error fetching libguides content:', error)
+  }
+})
+</script>
+<template>
+  <main
+    id="main"
+    class="page page-general-content"
+  >
+    <NavBreadcrumb
+      title="Library Status Updates"
+      class="breadcrumb"
+      to="/about"
+      parent-title="About Us"
+    />
+
+    <BannerText
+      class="banner-text"
+      title="Library Status Updates"
+      :text="bannerSummary"
+    />
+
+    <SectionWrapper theme="divider">
+      <DividerWayFinder class="divider-way-finder" />
+    </SectionWrapper>
+    <!--div>
+      <h1>Status Updates</h1>
+      <hr>
+      <h3> Remove this later</h3>
+
+      <div v-if="content">
+        <h2>Proxy Content:</h2>
+        <pre class="styled-pre">{{ content }} </pre>
+      </div>
+    </div-->
+
+    <PageAnchor
+      v-if="h2Array.length >= 3"
+      :section-titles="h2Array"
+    />
+
+    <FlexibleBlocks
+      v-if="page && page.blocks"
+      class="flexible-content"
+      :blocks="page.blocks"
+    />
+  </main>
+</template>
+<style scoped>
+.styled-pre {
+  background-color: #f4f4f4;
+  color: #333;
+  padding: 40px;
+  border-radius: 5px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  /* Allows wrapping */
+  font-family: 'Courier New', monospace;
+}
+</style>