@newskit-render/feed

A package used for the generation of different types of sitemaps or Rss feed. You can see an example here: @newskit-render/core

Getting started

Add it as a dependency:

npm install @newskit-render/feed

yarn add @newskit-render/feed

Create sitemap pages

Under your /pages/api folder create sitemap.ts and news-sitemap.ts files.

update the next.config.js file to add rewrites:

async rewrites() {
  return [
    {
      source: '/sitemap.xml',
      destination: '/api/sitemap',
    },
    {
      source: '/news-sitemap.xml',
      destination: '/api/news-sitemap',
    },
  ]
},

Create Rss page

Under your /pages/api folder create feed.ts file

update the next.config.js file to add rewrites:

async rewrites() {
  return [
    {
      source: '/feed',
      destination: '/api/feed',
    },
  ]
},

see rssFeed funtion

Implementation

genericSitemap

sitemapXml - generic function which is needed by Next.js to resolve page route

genericSitemap - this function will handle the logic for sitemap.xml and sitemap.xml?query=1 routes. It will receive the following parameters:

context (required) - Next.js context object (only needs res and query from context but its easier to destructor as below)

publisher, domain, firstArticleDate, publicationName (required): Required properties for correctly building the sitemap.xml. The domain is the domain of your website. The firstArticleDate is the date of the first article you have published, this will set from when the generic sitemap will produce query sitemaps. publisher is the name of the publisher in the NewsKit API, this string will be used for fetching the articles for the correct publication. publicationName is the name of the publication, used inside the sitemap <news:name>${publicationName}</news:name> tag.

CustomStaticPageCollection (optional): Provides the possibility to manually add a list of static pages, that do not exist in an API. The format of the static page is in the example. Below an example.

import { NextApiRequest, NextApiResponse } from 'next'
import { genericSitemap, PublisherGroup, CustomStaticPage } from '@newskit-render/sitemap'

const defaultCustomStaticPagesCollection: CustomStaticPage[] = [
  {
    channel: 'test-custom-page',
  },
]

const handler = async (req: NextApiRequest, res: NextApiResponse) =>
  genericSitemap({
    res,
    query: req.query,
    publisher: process.env.PUBLISHER as PublisherGroup,
    domain: new URL(process.env.SITE_HOST).host,
    firstArticleDate: process.env.SITEMAP_FIRST_PUBLICATION_DATE,
    publicationName: process.env.SITEMAP_PUBLICATION_NAME,
    customStaticPageCollection: defaultCustomStaticPagesCollection,
  })

export default handler

You will find the env vars in /helm/value-{env}.yaml

example values are:

publisher: 'VIRGIN',
domain: 'virginradio.co.uk',
firstArticleDate: '2016-3-1',
publicationName: 'Virgin Radio',

newsSitemap

newsSitemap - this function will handle the logic for news-sitemap.xml.ts route. It will receive the following parameters:

context (required) - Next.js context object (only needs res from context but its easier to destructor as below)

publisher, domain, publicationName (required): Required properties for correctly building the sitemap.xml. The domain is the domain of your website. publisher is the name of the publisher in the NewsKit API, this string will be used for fetching the articles for the correct publication. publicationName is the name of the publication, used inside the sitemap <news:name>${publicationName}</news:name> tag.

Below an example.

import { NextApiRequest, NextApiResponse } from 'next'
import { newsSitemap, PublisherGroup } from '@newskit-render/sitemap'

const handler = async (req: NextApiRequest, res: NextApiResponse) =>
  newsSitemap({
    res,
    publisher: process.env.PUBLISHER as PublisherGroup,
    domain: new URL(process.env.SITE_HOST).host,
    publicationName: process.env.SITEMAP_PUBLICATION_NAME,
  })

export default handler

rssFeed

rssFeed - this funtion will handle the logic for feed.ts route. It will receive the following parameters:

context (required) - Next.js context object (only needs res from context but its easier to destructor as below)

titeAttributes object with the following attributes:

title - string - title of the rss feed link - string - link of rss feed (example - https://talksport.com/feed/) description - string - describe what the feed is for lastBuildDate - string - date in RFC-822 date-time - denotes last time content of feed was updated language - optional - string - language code of feed - default: en-US updatePeriod - optional - string - indicates how often feed updates so feed users know how often they should pole it. Can be 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' - default: hourly updateFrequency - optional - number - representing the number of times the feed should be refreshed during the updatePeriod - default: 1. logoUrl - string - url to site icon imageSourceSizes - array of string values - images in the <content:endcoded> sections use the <picture> tag with <source> tag. Default widths are provided for these but you can override them with an array ['100', '200', '300', '400', '500']. Only add 5 values to the array.

example

import { NextApiRequest, NextApiResponse } from 'next'
import { rssFeed, UpdatePeriod } from '@newskit-render/feed'

const handler = async (req: NextApiRequest, res: NextApiResponse) =>
  rssFeed({
    res,
    titeAttributes: {
      title: 'Demo Site',
      link: `${process.env.SITE_HOST}/feed`,
      description: 'Newskit Render Demo site',
      lastBuildDate: new Date().toUTCString(),
      language: 'en-US',
      updatePeriod: 'hourly' as UpdatePeriod,
      updateFrequency: 1,
      logoUrl: `${process.env.SITE_HOST}/favicon.ico`,
    },
  })

export default handler

npm