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`;