Merge pull request #24 from Zeragamba/main

Deploy to stable
Zeragamba · May 26, 2024 · 0a1a606 · 0a1a606
2 parents 26f102f + 0ce6db4
commit 0a1a606
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 56 deletions.
diff --git a/client/src/Themes/ZeraDark/AppRouter.tsx b/client/src/Themes/ZeraDark/AppRouter.tsx
@@ -5,14 +5,14 @@ import { MainLayout } from './Layouts'
 import { LatestPostPage, ViewPostPage } from './Posts'
 import {
   AboutPage,
-  AdminLayout,
-  AllPostsGalleryPage,
+  AdminLayout, AllPostsGalleryPage,
   ArchivePage,
   EditAboutPage,
   EditPostPage,
   EditPostsPage,
   EditSocialsPage,
   EditTagsPage,
+  FeaturedPostsGallery,
   LoginPage,
   MetricsPage,
   NewPostPage,
@@ -25,8 +25,9 @@ export const appRouter = createBrowserRouter([
     path: '/',
     element: <MainLayout />,
     children: [
-      { path: '/', element: <AllPostsGalleryPage /> },
+      { path: '/', element: <FeaturedPostsGallery /> },
 
+      { path: 'all', element: <AllPostsGalleryPage /> },
       { path: 'latest', element: <LatestPostPage /> },
       { path: 'archive', element: <ArchivePage /> },
 

diff --git a/client/src/Themes/ZeraDark/Components/Sidebar/Sidebar.tsx b/client/src/Themes/ZeraDark/Components/Sidebar/Sidebar.tsx
@@ -130,12 +130,12 @@ export const Sidebar: FC<SidebarProps> = ({
             <>
               <SidebarGroup>
                 <NavItem
-                  label={'All'}
+                  label={'Featured'}
                   to={'/'}
                 />
                 <NavItem
-                  label={'Featured'}
-                  to={'/tag/featured'}
+                  label={'All'}
+                  to={'/all'}
                 />
                 <NavItem
                   label={'Latest'}

diff --git a/og-injector/src/App.ts b/og-injector/src/App.ts
@@ -3,7 +3,7 @@ import 'express-async-errors'
 
 import { CLIENT_DIR, CLIENT_URL, LOG_DIR, NODE_ENV, PORT, SERVER_URL } from '../config'
 import { getIndexHtml } from './Client'
-import { injectMeta, injectPostMeta } from './Injector'
+import { injectMeta, injectPostMeta, injectTagMeta } from './Injector'
 import { getLatestPost } from './ServerApi'
 import { logger } from './Logger'
 
@@ -32,6 +32,15 @@ app.get([
   res.send(updatedHtml)
 })
 
+app.get([
+  '/tag/:tagId',
+], async (req, res) => {
+  logger.info('Request received for tag')
+  const indexHtml = await getIndexHtml()
+  const updatedHtml = await injectTagMeta(indexHtml, req.params.tagId)
+  res.send(updatedHtml)
+})
+
 app.get('*', async (req, res) => {
   logger.info('Request received')
   const indexHtml = await getIndexHtml()

diff --git a/og-injector/src/Injector.ts b/og-injector/src/Injector.ts
@@ -1,8 +1,9 @@
 import { CLIENT_URL } from '../config'
 import { PostData } from './models/PostData'
-import { getPost } from './ServerApi'
+import { getPost, getTag, getTaggedPosts } from './ServerApi'
 import { getAppManifest } from './Client'
 import { logger } from './Logger'
+import { TagData } from './models/TagData'
 
 type OpenGraphData = {
   type?: string
@@ -34,64 +35,86 @@ export const injectPostMeta = async (html: string, postId: PostData['id']) => {
   })
 }
 
-export const injectMeta = async (html: string, metadata: OpenGraphData): Promise<string> => {
-  try {
+export const injectTagMeta = async (html: string, tagId: TagData['id']) => {
+  const tag = await getTag(tagId)
+
+  logger.info(`Injecting Tag data: ${JSON.stringify(tag)}`)
+  const metaData: OpenGraphData = {
+    title: `Tag: ${tag.name}`,
+    description: `Posts tagged ${tag.name}`,
+    url: `${CLIENT_URL}/tag/${tag.slug}`,
+  }
 
-    logger.info(`Injecting OG data: ${JSON.stringify(metadata)}`)
-    if (!html.includes('</head>')) throw new Error('</head> not found')
+  const posts = await getTaggedPosts(tagId)
+  const firstPost = posts[0]
 
-    const manifest = await getAppManifest()
-    let metaTags: string[] = []
+  if (firstPost) {
+    logger.info(`Injecting Post data: ${JSON.stringify(firstPost)}`)
+    const image = firstPost.images[0]
 
-    logger.info(`Updating metadata`)
-    if (metadata.title) {
-      metadata.title = `${manifest.name} | ${metadata.title}`
-    } else {
-      metadata.title = manifest.name
+    metaData.image = {
+      url: image.srcs.high,
+      type: image.mime_type,
+      height: image.height,
+      width: image.width,
     }
+  }
 
-    logger.info(`Applying defaults`)
-    metadata.description ||= manifest.description
-    metadata.url ||= CLIENT_URL
+  return await injectMeta(html, metaData)
+}
 
-    logger.info(`Trimming base meta tags`)
-    metadata.title = trimString(metadata.title || '', 70)
-    metadata.description = trimString(metadata.description || '', 200)
+export const injectMeta = async (html: string, metadata: OpenGraphData): Promise<string> => {
+  logger.info(`Injecting OG data: ${JSON.stringify(metadata)}`)
+  if (!html.includes('</head>')) throw new Error('</head> not found')
 
-    logger.info(`Injecting base meta tags`)
-    metaTags = [
-      ...metaTags,
-      `<meta name="og:type" content="${metadata.type || 'website'}"/>`,
+  const manifest = await getAppManifest()
+  let metaTags: string[] = []
 
-      `<meta name="og:url" content="${metadata.url}"/>`,
-      `<meta name="og:title" content="${metadata.title}"/>`,
-      `<meta name="og:description" content="${metadata.description}"/>`,
+  logger.info(`Updating metadata`)
+  if (metadata.title) {
+    metadata.title = `${manifest.name} | ${metadata.title}`
+  } else {
+    metadata.title = manifest.name
+  }
 
-      `<meta name="twitter:card" content="${metadata.image ? 'summary_large_image' : 'summary'}"/>`,
-      `<meta name="twitter:url" content="${metadata.url}"/>`,
-      `<meta name="twitter:title" content="${metadata.title}"/>`,
-      `<meta name="twitter:description" content="${metadata.description}"/>`,
-    ]
+  logger.info(`Applying defaults`)
+  metadata.description ||= manifest.description
+  metadata.url ||= CLIENT_URL
 
-    if (metadata.image) {
-      logger.info(`Injecting image meta tags`)
-      metaTags = [
-        ...metaTags,
-        `<meta name="og:image" content="${metadata.image.url}"/>`,
-        `<meta name="og:image:type" content="${metadata.image.type}"/>`,
-        `<meta name="og:image:height" content="${metadata.image.height}"/>`,
-        `<meta name="og:image:width" content="${metadata.image.width}"/>`,
-
-        `<meta name="twitter:image" content="${metadata.image.url}"/>`,
-      ]
-    }
+  logger.info(`Trimming base meta tags`)
+  metadata.title = trimString(metadata.title || '', 70)
+  metadata.description = trimString(metadata.description || '', 200)
+
+  logger.info(`Injecting base meta tags`)
+  metaTags = [
+    ...metaTags,
+    `<meta name="og:type" content="${metadata.type || 'website'}"/>`,
+
+    `<meta name="og:url" content="${metadata.url}"/>`,
+    `<meta name="og:title" content="${metadata.title}"/>`,
+    `<meta name="og:description" content="${metadata.description}"/>`,
 
-    logger.info(`Injecting meta tags`, { tags: metaTags })
-    return html.replace('</head>', `${metaTags.join('')} </head>`)
-  } catch (err) {
-    logger.error(`Error injecting tags`, { err: String(err) })
-    return html
+    `<meta name="twitter:card" content="${metadata.image ? 'summary_large_image' : 'summary'}"/>`,
+    `<meta name="twitter:url" content="${metadata.url}"/>`,
+    `<meta name="twitter:title" content="${metadata.title}"/>`,
+    `<meta name="twitter:description" content="${metadata.description}"/>`,
+  ]
+
+  if (metadata.image) {
+    logger.info(`Injecting image meta tags`)
+    metaTags = [
+      ...metaTags,
+      `<meta name="og:image" content="${metadata.image.url}"/>`,
+      `<meta name="og:image:type" content="${metadata.image.type}"/>`,
+      `<meta name="og:image:height" content="${metadata.image.height}"/>`,
+      `<meta name="og:image:width" content="${metadata.image.width}"/>`,
+
+      `<meta name="twitter:image" content="${metadata.image.url}"/>`,
+    ]
   }
+
+  logger.info(`Injecting meta tags`, { tags: metaTags })
+  return html.replace('</head>', `${metaTags.join('')} </head>`)
 }
 
 function trimString(str: string, maxLength: number) {

diff --git a/og-injector/src/ServerApi.ts b/og-injector/src/ServerApi.ts
@@ -2,6 +2,7 @@ import axios, { AxiosRequestConfig, Method } from 'axios'
 import { SERVER_URL } from '../config'
 import { PostData } from './models/PostData'
 import { logger } from './Logger'
+import { TagData } from './models/TagData'
 
 const apiClient = axios.create({
   baseURL: SERVER_URL,
@@ -21,6 +22,19 @@ export function getPost(postId: string): Promise<PostData> {
     .then(res => res.post)
 }
 
+export function getTag(tagId: string): Promise<TagData> {
+  type Response = { tag: TagData }
+
+  return request<Response>('GET', `/tag/${tagId}`)
+    .then(res => res.tag)
+}
+
+export function getTaggedPosts(tagId: string): Promise<PostData[]> {
+  type Response = { posts: PostData[] }
+
+  return request<Response>('GET', `/tag/${tagId}/posts`)
+    .then(res => res.posts)
+}
 
 export function getFirstPost(): Promise<PostData> {
   type Response = { post: PostData }
@@ -29,11 +43,9 @@ export function getFirstPost(): Promise<PostData> {
     .then(res => res.post)
 }
 
-
 export function getLatestPost(): Promise<PostData> {
   type Response = { post: PostData }
 
   return request<Response>('GET', `/post/latest`)
     .then(res => res.post)
 }
-
diff --git a/server/config/environment.rb b/server/config/environment.rb
@@ -16,6 +16,7 @@
 IMAGES_DIR = PROJECT_ROOT.join(ENV.fetch("IMAGES_DIR"))
 
 Rails.application.config.hosts << APP_HOST
+Rails.application.config.hosts << "server" # docker hostname used by OG-Injector
 
 # Initialize the Rails application.
 Rails.application.initialize!