Set up news preview and fix some config issues that were throwing errors

components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
     NavBar: typeof import('./src/components/NavBar.vue')['default']
+    NewsPreview: typeof import('./src/components/NewsPreview.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     StandingsTable: typeof import('./src/components/StandingsTable.vue')['default']

package-lock.json

@@ -9,12 +9,14 @@
       "version": "0.0.0",
       "dependencies": {
         "@popperjs/core": "2.11.8",
+        "@tryghost/content-api": "1.11.16",
         "bootstrap": "5.3.1",
         "vue": "^3.2.45",
         "vue-router": "^4.1.6"
       },
       "devDependencies": {
         "@types/node": "^18.11.12",
+        "@types/tryghost__content-api": "1.3.11",
         "@vicons/fluent": "0.12.0",
         "@vitejs/plugin-vue": "^4.0.0",
         "@vue/tsconfig": "^0.1.3",
@@ -500,6 +502,14 @@
         }
       }
     },
+    "node_modules/@tryghost/content-api": {
+      "version": "1.11.16",
+      "resolved": "https://registry.npmjs.org/@tryghost/content-api/-/content-api-1.11.16.tgz",
+      "integrity": "sha512-sssD96EQj4W8uSZqL9+TlWP/2YS7ysA9jFMLqfAiJXkcXP1+kCsFAWOkZ3DeS5QZ5PKQSti+L69yYGmkMVfzxA==",
+      "dependencies": {
+        "axios": "^1.0.0"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
@@ -533,6 +543,12 @@
       "integrity": "sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==",
       "dev": true
     },
+    "node_modules/@types/tryghost__content-api": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/@types/tryghost__content-api/-/tryghost__content-api-1.3.11.tgz",
+      "integrity": "sha512-Gv8zoIVvIALZKjyZWa1dZT1WUtZgqLkpdH+tK/YlfL1JTEn+oeAEvj5AX/jjX2Scv7oaEc/SlZry4Km2xp+ZEw==",
+      "dev": true
+    },
     "node_modules/@vicons/fluent": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@vicons/fluent/-/fluent-0.12.0.tgz",
@@ -794,6 +810,11 @@
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -806,6 +827,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -930,6 +961,17 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1034,6 +1076,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -1215,6 +1265,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -1224,6 +1293,19 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1803,6 +1885,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2056,6 +2157,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

package.json

@@ -11,12 +11,14 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",
+    "@tryghost/content-api": "1.11.16",
     "bootstrap": "5.3.1",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@types/node": "^18.11.12",
+    "@types/tryghost__content-api": "1.3.11",
     "@vicons/fluent": "0.12.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/tsconfig": "^0.1.3",

src/components/NewsPreview.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="news-preview">
+    <div class="row">
+      <div class="col-sm-12">
+        <h2><a target="_blank" :href="post.url">{{ post.title }}</a></h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-8">
+        <div class="row">
+          <div class="col-sm-12">
+            <div class="news-subtitle">
+              <img v-if="post.primaryAuthor?.profileImage" style="max-height: 25px; padding-right: 10px;"
+                :src="post.primaryAuthor.profileImage">
+              {{ `${post.primaryAuthor?.name ?? 'Anonymous'} • ${postDate} • ${post.readingTime} minute read` }}
+            </div>
+          </div>
+          <div class="col-sm-12">{{ post.customExcerpt ?? post.excerpt }}<a target="_blank" :href="post.url">more
+              &gt;&gt;
+            </a></div>
+        </div>
+      </div>
+      <div class="col-sm-4"><a target="_blank" :href="post.url"><img style="max-height: 225px; max-width: 100%"
+            :src="post.featureImage" :alt="post.featureImageAlt ?? ''"></a></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import type { NewsPost } from '@/services/newsService'
+import type { PropType } from 'vue'
+
+export default {
+  name: "NewsPreview",
+  props: {
+    post: {
+      type: Object as PropType<NewsPost>,
+      required: true,
+    }
+  },
+  computed: {
+    postDate(): string {
+      if (!this.post.publishedAt) return ''
+      return new Date(Date.parse(this.post.publishedAt)).toDateString()
+    }
+  }
+}
+</script>

src/services/newsService.ts

@@ -1,9 +1,69 @@
-// const api = new GhostContentAPI({
+import GhostContentAPI, { type PostsOrPages } from '@tryghost/content-api'
-//   url: 'https://sombaseball.ddns.net/writers',
-//   key: 'cfc331bb02beaebc0c62211b10',
-//   version: "v3"
-// });
-
-export function getPosts() {
 
+export interface NewsPostAuthor {
+  id: string | undefined,
+  name: string | undefined,
+  slug: string | undefined,
+  profileImage: string | undefined,
+  url: string | undefined
 }
+
+export interface NewsPost {
+  id: string,
+  uuid: string | undefined,
+  title: string | undefined,
+  featureImage: string | undefined,
+  featureImageAlt: string | undefined,
+  createdAt: string | undefined,
+  updatedAt: string | undefined,
+  publishedAt: string | undefined,
+  slug: string,
+  url: string | undefined,
+  excerpt: string | undefined,
+  customExcerpt: string | undefined,
+  readingTime: number | undefined,
+  primaryAuthor: NewsPostAuthor | undefined
+}
+
+export async function getPosts() {
+  const newsApi = new GhostContentAPI({
+    url: 'https://sbanews.manticorum.com',
+    key: '37abf30917ce55d6d9155b537d',
+    version: "v5.0"
+  })
+
+  const posts: PostsOrPages = await newsApi.posts.browse({
+    limit: 4,
+    include: ['authors', 'tags'],
+  })
+
+  return makeNewPostsFromPostsOrPages(posts)
+}
+
+function makeNewPostsFromPostsOrPages(posts: PostsOrPages): NewsPost[] {
+  return posts.map(p => {
+    return {
+      id: p.id,
+      uuid: p.uuid,
+      title: p.title,
+      featureImage: p.feature_image ?? undefined,
+      featureImageAlt: p.feature_image_alt ?? undefined,
+      createdAt: p.created_at ?? undefined,
+      updatedAt: p.updated_at ?? undefined,
+      publishedAt: p.published_at ?? undefined,
+      slug: p.slug,
+      url: p.url,
+      excerpt: p.excerpt,
+      customExcerpt: p.custom_excerpt,
+      readingTime: p.reading_time,
+      primaryAuthor: {
+        id: p.primary_author?.id,
+        name: p.primary_author?.name,
+        slug: p.primary_author?.slug,
+        profileImage: p.primary_author?.profile_image ?? undefined,
+        url: p.primary_author?.url ?? undefined
+      }
+    }
+  })
+}
+

src/views/HomeView.vue

@@ -31,7 +31,9 @@
         <div class="col-md-6">
           <h3>Latest News</h3>
           <div id="news-posts">
-            🚧 Coming soon 🚧
+            <div v-for="newsPost, index in newsPosts" :key="index">
+              <NewsPreview :post="newsPost" />
+            </div>
           </div>
         </div>
       </div>
@@ -44,6 +46,7 @@ import StandingsTable from '@/components/StandingsTable.vue'
 import { fetchStandings, type TeamStanding } from '@/services/standingsService'
 import { fetchCurrentLeagueInfo, type LeagueInfo } from '@/services/currentService'
 import { CURRENT_SEASON } from '@/services/utilities'
+import { getPosts, type NewsPost } from '@/services/newsService'
 
 export default {
   name: "HomeView",
@@ -56,7 +59,8 @@ export default {
       nlwTeams: [] as TeamStanding[],
       wildcardTeams: [] as TeamStanding[],
       balTeams: [] as TeamStanding[],
-      fdTeams: [] as TeamStanding[]
+      fdTeams: [] as TeamStanding[],
+      newsPosts: [] as NewsPost[]
     }
   },
   created() {
@@ -76,6 +80,8 @@ export default {
       this.balTeams = this.teamStandings.filter(ts => ts.divisionAbbreviation === 'BAL')
       this.fdTeams = this.teamStandings.filter(ts => ts.divisionAbbreviation === 'FD')
       this.wildcardTeams = this.teamStandings.filter(ts => ts.isWildcardTeam)
+
+      this.newsPosts = await getPosts()
     },
 
   }

tsconfig.config.json

@@ -1,8 +1,16 @@
 {
   "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "playwright.config.*"
+  ],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
+    "types": [
+      "node"
+    ],
+    "ignoreDeprecations": "5.0"
   }
 }

tsconfig.json

@@ -7,13 +7,14 @@
   ],
   "compilerOptions": {
     "baseUrl": ".",
-    "target": "ES6",
+    "target": "ES2022",
     "module": "NodeNext",
     "paths": {
       "@/*": [
         "./src/*"
       ]
-    }
+    },
+    "ignoreDeprecations": "5.0"
   },
   "references": [
     {