@newskit-render/core 1.5.2 → 1.6.0

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.5.7...@newskit-render/core@1.6.0) (2021-12-15)
+
+
+### Features
+
+* **PPDSR-520:** Add SEO Component ([#539](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/539)) ([f9a7103](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/f9a71034e9e7224975d785fb47c68b907b4e5935))
+
+
+
+
+
+## [1.5.7](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.5.6...@newskit-render/core@1.5.7) (2021-12-14)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.5.6](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.5.5...@newskit-render/core@1.5.6) (2021-12-13)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.5.5](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.5.4...@newskit-render/core@1.5.5) (2021-12-13)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.5.4](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.5.3...@newskit-render/core@1.5.4) (2021-12-10)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.5.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.5.2...@newskit-render/core@1.5.3) (2021-12-08)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 ## [1.5.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.5.1...@newskit-render/core@1.5.2) (2021-12-03)
 
 **Note:** Version bump only for package @newskit-render/core

package/components/article/index.tsx

@@ -13,13 +13,13 @@ import {
   TextBlock,
   Divider,
 } from 'newskit'
+import { SEOComponent } from '@newskit-render/shared-components'
 import MetaBoxComponent from './MetaBox'
 import Ad from '../ad'
 import Highlights from './Highlights'
 import RelatedArticles from './RelatedArticles'
 import RelatedTopics from './RelatedTopics'
 import ShareBarComponent from './ShareBarComponent'
-import SEOComponent from '../seo'
 import {
   URL,
   Slug,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -28,13 +28,13 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@newskit-render/api": "^0.4.1",
-    "@newskit-render/auth": "^0.22.1",
-    "@newskit-render/checkout": "^0.6.2",
-    "@newskit-render/my-account": "^0.110.2",
-    "@newskit-render/shared-components": "^0.14.0",
-    "@newskit-render/sitemap": "^0.25.1",
-    "@newskit-render/validation": "^0.26.1",
+    "@newskit-render/api": "^0.4.2",
+    "@newskit-render/auth": "^0.22.2",
+    "@newskit-render/checkout": "^0.7.0",
+    "@newskit-render/my-account": "^0.114.2",
+    "@newskit-render/shared-components": "^0.18.0",
+    "@newskit-render/sitemap": "^0.25.2",
+    "@newskit-render/validation": "^0.26.2",
     "cross-fetch": "^3.1.4",
     "graphql": "^15.6.0",
     "newrelic": "^7.1.0",
@@ -43,8 +43,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "7.8.4",
-    "striptags": "^3.1.1"
+    "react-hook-form": "7.8.4"
   },
   "devDependencies": {
     "@apollo/react-testing": "^4.0.0",

package/components/seo/index.test.tsx

@@ -1,106 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import SEOComponent, { limitString } from './index'
-
-const getMeta = (metaName: string) => {
-  const metas = document.getElementsByTagName('meta')
-  for (let i = 0; i < metas.length; i += 1) {
-    if (
-      metas[i].getAttribute('name') === metaName ||
-      metas[i].getAttribute('property') === metaName
-    ) {
-      return metas[i].getAttribute('content')
-    }
-  }
-  return false
-}
-
-const getLink = (linkRel: string, attr: string) => {
-  const link = document.getElementsByTagName('link')
-  for (let i = 0; i < link.length; i += 1) {
-    if (link[i].getAttribute('rel') === linkRel) {
-      return link[i].getAttribute(attr)
-    }
-  }
-  return false
-}
-
-jest.mock('next/head', () => {
-  return {
-    __esModule: true,
-    default: ({ children }: { children: Array<React.ReactElement> }) => {
-      return <>{children}</>
-    },
-  }
-})
-
-describe('SEOComponent tests', () => {
-  const Props = {
-    title: 'test title for SEOComponent',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt blandit orci vel elementum. Integer malesuada quam in ullamcorper condimentum. Integer sollicitudin non enim sed posuere.',
-    url: 'https://test-url/test',
-    siteHost: 'https://siteHost.co.uk',
-    fbType: 'article',
-    fbImageUrl: 'https://test-uri/image',
-  }
-
-  test('SEOComponent with mandatory props', () => {
-    render(<SEOComponent {...Props} />, {
-      container: document.head,
-    })
-    expect(document.title).toBe(Props.title)
-    expect(getMeta('description')).toBe(limitString(Props.description, 155))
-    expect(getMeta('robots')).toBe('max-image-preview:large')
-    expect(getMeta('og:title')).toBe(Props.title)
-    expect(getMeta('og:type')).toBe(Props.fbType)
-    expect(getMeta('og:url')).toBe(Props.url)
-    expect(getMeta('twitter:card')).toBe('summary')
-    expect(getMeta('twitter:title')).toBe(Props.title)
-    expect(getMeta('twitter:site')).toBe(false)
-    expect(getMeta('twitter:description')).toBe(false)
-    expect(getMeta('twitter:image')).toBe(false)
-    expect(getMeta('twitter:image:alt')).toBe(false)
-    expect(getLink('canonical', 'href')).toBe(Props.url)
-    expect(getLink('alternate', 'href')).toBe(Props.siteHost)
-    expect(getLink('alternate', 'hreflang')).toBe('en')
-  })
-
-  test('SEOComponent with optional props', () => {
-    const extraProps = {
-      ...Props,
-      gscId: 'asfdrtsdvs',
-      fbTitle: 'test facebook title',
-      twUsername: '@username',
-      twTitle: 'test twitter title',
-      twDescription:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt blandit orci vel elementum. Integer malesuada quam in ullamcorper condimentum.',
-      twImageUrl: 'https://test-uri/image-twitter',
-      twImageAlt: 'test alt',
-      hrefLang: 'en-GB',
-      maxImagePreview: 'standard' as 'none' | 'standard' | 'large',
-    }
-    render(<SEOComponent {...extraProps} />, {
-      container: document.head,
-    })
-    expect(document.title).toBe(extraProps.title)
-    expect(getMeta('description')).toBe(
-      limitString(extraProps.description, 155)
-    )
-    expect(getMeta('robots')).toBe(
-      `max-image-preview:${extraProps.maxImagePreview}`
-    )
-    expect(getMeta('og:title')).toBe(extraProps.fbTitle)
-    expect(getMeta('og:type')).toBe(extraProps.fbType)
-    expect(getMeta('og:url')).toBe(extraProps.url)
-    expect(getMeta('twitter:card')).toBe('summary')
-    expect(getMeta('twitter:title')).toBe(extraProps.twTitle)
-    expect(getMeta('twitter:site')).toBe(extraProps.twUsername)
-    expect(getMeta('twitter:description')).toBe(extraProps.twDescription)
-    expect(getMeta('twitter:image')).toBe(extraProps.twImageUrl)
-    expect(getMeta('twitter:image:alt')).toBe(extraProps.twImageAlt)
-    expect(getLink('canonical', 'href')).toBe(extraProps.url)
-    expect(getLink('alternate', 'href')).toBe(extraProps.siteHost)
-    expect(getLink('alternate', 'hreflang')).toBe(extraProps.hrefLang)
-  })
-})

package/components/seo/index.tsx

@@ -1,89 +0,0 @@
-import React from 'react'
-import Head from 'next/head'
-import striptags from 'striptags'
-
-export const limitString = (text: string, limit: number) =>
-  text.length > limit ? text.substr(0, limit) : text
-
-type Props = {
-  title: string
-  description: string
-  url: string
-  siteHost: string
-  hrefLang?: string
-  maxImagePreview?: 'none' | 'standard' | 'large'
-  gscId?: string
-  fbTitle?: string
-  fbType: string
-  fbImageUrl: string
-  twUsername?: string
-  twTitle?: string
-  twDescription?: string
-  twImageUrl?: string
-  twImageAlt?: string
-}
-
-const SEOComponent: React.FC<Props> = ({
-  title,
-  description,
-  url,
-  siteHost,
-  hrefLang = 'en',
-  maxImagePreview = 'large',
-  gscId,
-  fbTitle,
-  fbType,
-  fbImageUrl,
-  twUsername,
-  twTitle,
-  twDescription,
-  twImageUrl,
-  twImageAlt,
-}) => (
-  <Head>
-    <title>{title}</title>
-    <meta
-      name="description"
-      content={limitString(striptags(description), 155)}
-      key="description"
-    />
-    <link rel="canonical" href={url} />
-    <link rel="alternate" href={siteHost} hrefLang={hrefLang} />
-    <meta
-      name="robots"
-      content={`max-image-preview:${maxImagePreview}`}
-      key="max-image-preview"
-    />
-    {gscId && <meta name="google-site-verification" content={gscId} />}
-
-    <meta property="og:title" content={fbTitle || title} key="ogtitle" />
-    <meta property="og:type" content={fbType} key="ogtype" />
-    <meta property="og:url" content={url} key="ogurl" />
-    <meta property="og:image" content={fbImageUrl} key="ogimage" />
-
-    <meta name="twitter:card" content="summary" key="twcard" />
-    <meta
-      name="twitter:title"
-      content={limitString(twTitle || title, 70)}
-      key="twtitle"
-    />
-    {twUsername && (
-      <meta name="twitter:site" content={twUsername} key="twsite" />
-    )}
-    {twDescription && (
-      <meta
-        name="twitter:description"
-        content={limitString(striptags(twDescription), 200)}
-        key="twdescription"
-      />
-    )}
-    {twImageUrl && (
-      <meta name="twitter:image" content={twImageUrl} key="twImage" />
-    )}
-    {twImageAlt && (
-      <meta name="twitter:image:alt" content={twImageAlt} key="twImageAlt" />
-    )}
-  </Head>
-)
-
-export default SEOComponent