feat: adds host constants for images

Adds the CMS_HOST and SITE_HOST vars for image paths closes #182
anguspiv · Nov 15, 2022 · e387aa2 · e387aa2
1 parent 70a32a3
commit e387aa2
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 30 deletions.
diff --git a/_posts/hello-world.md b/_posts/hello-world.md
@@ -2,7 +2,8 @@
 title: 'Hello World'
 date: '2020-03-16T05:35:07.322Z'
 excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
-image: 'https://www.angusp.com/img/rounded-avatar.png'
+featuredImage: '/img/posts/hello-world-cover.jpg'
+ogImage: '/img/posts/hello-world.jpg'
 tags:
     - nextjs
     - react

diff --git a/jest.config.js b/jest.config.js
@@ -100,6 +100,9 @@ const config = {
     '^@styles/(.*)$': '<rootDir>/src/styles/$1',
     '^@public/(.*)$': '<rootDir>/public/$1',
     '^@lib/(.*)$': '<rootDir>/src/lib/$1',
+    '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
+    '^@context/(.*)$': '<rootDir>/src/context/$1',
+    '^@constants/(.*)$': '<rootDir>/src/constants/$1',
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

diff --git a/jsconfig.json b/jsconfig.json
@@ -7,7 +7,10 @@
       "@utils/*": ["src/utils/*"],
       "@styles/*": ["src/styles/*"],
       "@public/*": ["public/*"],
-      "@lib/*": ["src/lib/*"]
+      "@lib/*": ["src/lib/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@context/*": ["src/context/*"],
+      "@constants/*": ["src/constants/*"]
     }
   }
 }
diff --git a/public/img/posts/hello-world-cover.jpg b/public/img/posts/hello-world-cover.jpg
diff --git a/public/img/posts/hello-world.jpg b/public/img/posts/hello-world.jpg
diff --git a/src/components/molecules/PageHeader/PageHeader.test.jsx b/src/components/molecules/PageHeader/PageHeader.test.jsx
@@ -17,13 +17,7 @@ describe('<PageHeader />', () => {
         location={location}
         publishDate="Dec. 2, 2010"
         readingTime={10}
-        tags={[
-          {
-            label: 'Test Tag',
-            slug: 'test-tag',
-            color: '#ff0000',
-          },
-        ]}
+        tags={['Test Tag']}
         excerpt={excerpt}
         featuredImage="https://via.placeholder.com/300"
       />,
@@ -59,13 +53,7 @@ describe('<PageHeader />', () => {
         location={location}
         publishDate="Dec. 2, 2010"
         readingTime={10}
-        tags={[
-          {
-            label: 'Test Tag',
-            slug: 'test-tag',
-            color: '#ff0000',
-          },
-        ]}
+        tags={['Test Tag']}
         excerpt={excerpt}
         featuredImage="https://via.placeholder.com/300"
         variant="imageTop"

diff --git a/src/components/organisms/SEO/SEO.jsx b/src/components/organisms/SEO/SEO.jsx
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { SITE_HOST } from '@constants/hosts';
 
 export function SEO({ description, image, title }) {
   const { asPath, isReady } = useRouter();
-  const DEPLOY_URL = process.env.DEPLOY_URL || 'http://localhost:3000';
 
   return (
     <Head>
@@ -25,7 +25,7 @@ export function SEO({ description, image, title }) {
 
       {/* Open Graph */}
       <meta property="og:type" content="website" key="og:type" />
-      {isReady && <meta property="og:url" content={`${DEPLOY_URL}${asPath}`} key="og:url" />}
+      {isReady && <meta property="og:url" content={`${SITE_HOST}${asPath}`} key="og:url" />}
 
       {/* Twitter */}
       <meta name="twitter:card" content="summary" key="twitter:card" />

diff --git a/src/components/organisms/SEO/SEO.test.jsx b/src/components/organisms/SEO/SEO.test.jsx
@@ -13,6 +13,12 @@ jest.mock('next/router', () => ({
   useRouter: jest.fn(),
 }));
 
+jest.mock('@constants/hosts', () => ({
+  __esModule: true,
+  SITE_HOST: 'http://www.example.com',
+  CMS_HOST: 'http://www.example.com',
+}));
+
 const getMetaByNameQuery = (container, name) => container.querySelector(`meta[name="${name}"]`);
 
 const getMetaByPropertyQuery = (container, property) =>
@@ -42,11 +48,9 @@ describe('<SEO />', () => {
 
     setup();
 
-    process.env.DEPLOY_URL = 'https://example.com';
-
     const title = 'Test Title';
     const description = 'Test Description';
-    const image = 'https://example.com/image.png';
+    const image = '/image.png';
 
     useRouter.mockReturnValue({
       asPath: '/test',
@@ -65,7 +69,7 @@ describe('<SEO />', () => {
     expect(getMetaByProperty('og:image')).toHaveAttribute('content', image);
     expect(getMetaByName('twitter:image')).toHaveAttribute('content', image);
     expect(getMetaByProperty('og:type')).toHaveAttribute('content', 'website');
-    expect(getMetaByProperty('og:url')).toHaveAttribute('content', 'https://example.com/test');
+    expect(getMetaByProperty('og:url')).toHaveAttribute('content', 'http://www.example.com/test');
     expect(getMetaByName('twitter:card')).toHaveAttribute('content', 'summary');
     expect(getMetaByName('twitter:site')).toHaveAttribute('content', '@angusp');
     expect(getMetaByName('twitter:creator')).toHaveAttribute('content', '@angusp');
@@ -87,7 +91,7 @@ describe('<SEO />', () => {
 
     const { getMetaByProperty } = setupSEO();
 
-    expect(getMetaByProperty('og:url')).toHaveAttribute('content', 'http://localhost:3000/test');
+    expect(getMetaByProperty('og:url')).toHaveAttribute('content', 'http://www.example.com/test');
 
     teardown();
   });

diff --git a/src/constants/hosts.js b/src/constants/hosts.js
@@ -0,0 +1,25 @@
+let siteHost = 'http://localhost:3000';
+
+const CONTEXT = process.env.CONTEXT || 'dev';
+
+switch (CONTEXT) {
+  case 'production':
+    siteHost = process.env.URL;
+    break;
+  case 'deploy-preview':
+    siteHost = process.env.DEPLOY_PRIME_URL;
+    break;
+  case 'branch-deploy':
+    siteHost = process.env.DEPLOY_PRIME_URL;
+    break;
+  default:
+    siteHost = process.env.URL || 'http://localhost:3000';
+}
+
+export const CMS_HOST = siteHost;
+export const SITE_HOST = siteHost;
+
+export default {
+  CMS_HOST,
+  SITE_HOST,
+};
diff --git a/src/constants/index.js b/src/constants/index.js
@@ -0,0 +1 @@
+export * from './hosts';
diff --git a/src/pages/posts/[slug].jsx b/src/pages/posts/[slug].jsx
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import ErrorPage from 'next/error';
+import { CMS_HOST } from '@constants/hosts';
 import { getPostBySlug, getAllPosts } from '@lib/api';
 import { markdownToHtml } from '@lib/markdownToHtml';
 import { SEO } from '@components/organisms/SEO';
@@ -13,12 +14,17 @@ export default function Post({ post }) {
     return <ErrorPage statusCode={404} />;
   }
 
-  const { title, date, content, tags, excerpt } = post;
+  const { title, date, content, tags, excerpt, featuredImage, ogImage } = post;
 
   return (
     <article>
-      <SEO title={title} description={excerpt} />
-      <PageHeader title={title} publishDate={date} tags={tags} />
+      <SEO title={title} description={excerpt} image={`${CMS_HOST}${ogImage}`} />
+      <PageHeader
+        title={title}
+        publishDate={date}
+        tags={tags}
+        featuredImage={`${CMS_HOST}${featuredImage}`}
+      />
       <Container>
         {/* eslint-disable-next-line react/no-danger */}
         <div dangerouslySetInnerHTML={{ __html: content }} />
@@ -33,9 +39,10 @@ Post.propTypes = {
     slug: PropTypes.string.isRequired,
     date: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
-    image: PropTypes.string.isRequired,
-    tags: PropTypes.arrayOf(PropTypes.string).isRequired,
-    excerpt: PropTypes.string.isRequired,
+    featuredImage: PropTypes.string,
+    ogImage: PropTypes.string,
+    tags: PropTypes.arrayOf(PropTypes.string),
+    excerpt: PropTypes.string,
   }).isRequired,
 };
 
@@ -46,7 +53,8 @@ export async function getStaticProps({ params }) {
     'slug',
     'content',
     'excerpt',
-    'image',
+    'featuredImage',
+    'ogImage',
     'tags',
   ]);
   const content = await markdownToHtml(post.content || '');