RSS Feed for Releases page (#969)

* Add in Rss feed icon and functionality + add a visually hidden component for screen readers * Limit RSS feed functionality to Releases page only
styled-components · Jun 5, 2024 · dd47900 · dd47900
1 parent ed3f7bc
commit dd47900
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/components/DocsLayout.tsx b/components/DocsLayout.tsx
@@ -3,6 +3,11 @@ import { Container, Content, Title } from './Layout';
 import Nav, { NavProps } from './Nav';
 import Head from './SeoHead';
 import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { RssFeed as FeedIcon } from '@styled-icons/material';
+import Link from './Link';
+import { VisuallyHidden } from './VisuallyHidden';
+import { getReleasesAtomFeedURI } from '../utils/githubApi';
 
 export interface DocsLayoutProps {
  description?: string;
@@ -11,6 +16,21 @@ export interface DocsLayoutProps {
  useDocsSidebarMenu?: boolean;
 }
 
+const TitleRow = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+
+ ${() => FeedLink} {
+ flex-shrink: 0;
+ }
+`;
+
+const FeedLink = styled(Link)`
+ width: 1.5em;
+`;
+
 export default function DocsLayout({
  children,
  title = '',
@@ -22,6 +42,9 @@ export default function DocsLayout({
  const [isSideFolded, setIsSideFolded] = React.useState(true);
  const [isMobileNavFolded, setIsMobileNavFolded] = React.useState(true);
 
+ const feedLink = title === 'Releases' ? getReleasesAtomFeedURI() : null;
+ const prefixedTitle = `styled-components${title ? `: ${title}` : ''}`;
+
  const onSideToggle = React.useCallback(() => {
  setIsMobileNavFolded(true);
  setIsSideFolded(x => !x);
@@ -39,8 +62,9 @@ export default function DocsLayout({
 
  return (
  <Container>
- <Head title={`styled-components${title ? `: ${title}` : ''}`} description={description}>
+ <Head title={prefixedTitle} description={description}>
  <meta name="robots" content="noodp" />
+ {feedLink && <link rel="alternate" type="application/atom+xml" title={prefixedTitle} href={feedLink} />}
  </Head>
 
  <Nav
@@ -53,7 +77,15 @@ export default function DocsLayout({
  />
 
  <Content $moveRight={!isSideFolded} data-e2e-id="content">
- <Title>{title}</Title>
+ <TitleRow>
+ <Title>{title}</Title>
+ {feedLink && (
+ <FeedLink inline href={feedLink} target="_blank">
+ <FeedIcon />
+ <VisuallyHidden>RSS feed</VisuallyHidden>
+ </FeedLink>
+ )}
+ </TitleRow>
 
  {children}
  </Content>

diff --git a/components/VisuallyHidden.tsx b/components/VisuallyHidden.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const VisuallyHidden = styled.div`
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+`;
diff --git a/test/__mocks__/@styled-icons/material.js b/test/__mocks__/@styled-icons/material.js
@@ -9,4 +9,5 @@ module.exports = {
  KeyboardDown: DummyIcon,
  Link: DummyIcon,
  Search: DummyIcon,
+ RssFeed: DummyIcon,
 };
diff --git a/test/components/__snapshots__/DocsLayout.spec.tsx.snap b/test/components/__snapshots__/DocsLayout.spec.tsx.snap
@@ -14,7 +14,7 @@ exports[`DocsLayout renders correctly 1`] = `
  transition: transform 150ms ease-out;
 }
 
-.c28 {
+.c29 {
  text-align: left;
  width: 100%;
  color: rgb(66, 66, 66);
@@ -23,7 +23,7 @@ exports[`DocsLayout renders correctly 1`] = `
  font-family: "Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 }
 
-.c28 +h2 {
+.c29 +h2 {
  margin-top: -0.5em;
 }
 
@@ -281,6 +281,13 @@ exports[`DocsLayout renders correctly 1`] = `
  font-weight: normal;
 }
 
+.c28 {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
 @media (max-width: 62.5em) {
  .c0 {
  padding-left: 0;
@@ -1989,11 +1996,17 @@ exports[`DocsLayout renders correctly 1`] = `
  className="c27"
  data-e2e-id="content"
  >
- <styled.h1>
- <h1
+ <styled.div>
+ <div
  className="c28"
- />
- </styled.h1>
+ >
+ <styled.h1>
+ <h1
+ className="c29"
+ />
+ </styled.h1>
+ </div>
+ </styled.div>
  </div>
  </styled.div>
  </div>

diff --git a/utils/githubApi.ts b/utils/githubApi.ts
@@ -8,3 +8,6 @@ export const getReleases = (
  repo = 'styled-components'
 ): Promise<Endpoints['GET /repos/{owner}/{repo}/releases']['response']['data']> =>
  fetch(`https://api.github.com/repos/styled-components/${repo}/releases?per_page=999`).then(resp => resp.json());
+
+export const getReleasesAtomFeedURI = (repo = 'styled-components') =>
+ `https://github.com/styled-components/${repo}/releases.atom`;