Articles > stories URL changes

common/next/next.config.js

@@ -49,6 +49,25 @@ const createConfig =
         }
         return [...rewriteEntries];
       },
+      async redirects() {
+        return [
+          {
+            source: '/articles/:slug',
+            destination: '/stories/:slug',
+            statusCode: 301,
+          },
+          {
+            source: '/articles',
+            destination: '/search/stories',
+            statusCode: 301,
+          },
+          {
+            source: '/stories/comic',
+            destination: '/search/stories?format=W7d_ghAAALWY3Ujc',
+            statusCode: 301,
+          },
+        ];
+      },
       webpack: (config, { isServer, webpack }) => {
         config.plugins.push(
           new webpack.NormalModuleReplacementPlugin(

common/services/prismic/link-resolver.test.ts

@@ -7,7 +7,7 @@ import linkResolver from './link-resolver';
  */
 describe('webcomic edge case', () => {
   test.each([
-    { doc: { type: 'webcomics', uid: '1' }, path: '/articles/1' },
+    { doc: { type: 'webcomics', uid: '1' }, path: '/stories/1' },
     { doc: { type: 'webcomic-series', uid: '1' }, path: '/series/1' },
   ])('$doc resolves to $path', ({ doc, path }) => {
     expect(linkResolver(doc)).toBe(path);
@@ -20,7 +20,7 @@ it('resolves exhibition guides to /guides/exhibitions/{id}', () => {
 });
 
 test.each([
-  { doc: { type: 'articles', uid: '1' }, path: '/articles/1' },
+  { doc: { type: 'articles', uid: '1' }, path: '/stories/1' },
   { doc: { type: 'pages', uid: '1' }, path: '/1' },
   { doc: { type: 'not a thing', uid: '1' }, path: '/' },
 ])('$doc resolves to $path', ({ doc, path }) => {

common/services/prismic/link-resolver.ts

@@ -22,7 +22,8 @@ function linkResolver(doc: Props | DataProps): string {
   const { uid, type } = doc;
 
   if (!uid) return '/';
-  if (type === 'webcomics') return `/articles/${uid}`;
+  if (type === 'articles') return `/stories/${uid}`;
+  if (type === 'webcomics') return `/stories/${uid}`;
   if (type === 'webcomic-series') return `/series/${uid}`;
   if (
     type === 'exhibition-guides' ||

content/webapp/pages/articles/[articleId].tsx → content/webapp/pages/stories/[articleId].tsx

@@ -25,6 +25,7 @@ import ContentPage from '@weco/content/components/ContentPage/ContentPage';
 import PartNumberIndicator from '@weco/content/components/PartNumberIndicator/PartNumberIndicator';
 import SeriesNavigation from '@weco/content/components/SeriesNavigation/SeriesNavigation';
 import { ArticleFormatIds } from '@weco/content/data/content-format-ids';
+import useHotjar from '@weco/content/hooks/useHotjar';
 import { createClient } from '@weco/content/services/prismic/fetch';
 import {
   fetchArticle,
@@ -43,6 +44,7 @@ import {
   getHeroPicture,
 } from '@weco/content/utils/page-header';
 import { setCacheControl } from '@weco/content/utils/setCacheControl';
+
 const ContentTypeWrapper = styled.div`
   display: flex;
   align-items: baseline;
@@ -163,6 +165,7 @@ const HTMLDateWrapper = styled.span.attrs({ className: font('intr', 6) })`
 `;
 
 const ArticlePage: FunctionComponent<Props> = ({ article, jsonLd }) => {
+  useHotjar(true);
   const [listOfSeries, setListOfSeries] = useState<ArticleSeriesList>();
 
   useEffect(() => {
@@ -332,7 +335,7 @@ const ArticlePage: FunctionComponent<Props> = ({ article, jsonLd }) => {
     <PageLayout
       title={article.title}
       description={article.metadataDescription || article.promo?.caption || ''}
-      url={{ pathname: `/articles/${article.uid}` }}
+      url={{ pathname: `/stories/${article.uid}` }}
       jsonLd={jsonLd}
       openGraphType="article"
       siteSection="stories"

content/webapp/pages/stories/index.tsx

@@ -248,7 +248,7 @@ const StoriesPage: FunctionComponent<Props> = ({
           <CardGrid
             items={storiesLanding.stories}
             itemsPerRow={3}
-            links={[{ text: 'More stories', url: '/articles' }]}
+            links={[{ text: 'More stories', url: '/search/stories' }]}
           />
         </SpacingComponent>
       </SpacingSection>
@@ -269,7 +269,9 @@ const StoriesPage: FunctionComponent<Props> = ({
             items={comicSeries}
             itemsPerRow={3}
             itemsHaveTransparentBackground={true}
-            links={[{ text: 'More comics', url: '/stories/comic' }]}
+            links={[
+              { text: 'More comics', url: '/stories?format=W7d_ghAAALWY3Ujc' },
+            ]}
           />
         </SpacingComponent>
       </SpacingSection>
@@ -307,7 +309,7 @@ const StoriesPage: FunctionComponent<Props> = ({
           <CardGrid
             items={articles.slice(5, 11)}
             itemsPerRow={3}
-            links={[{ text: 'More stories', url: '/articles' }]}
+            links={[{ text: 'More stories', url: '/search/stories' }]}
           />
         </SpacingComponent>
       </SpacingSection>