From dd47900eb1e3757ffe1ed7c91dae1587cb203e51 Mon Sep 17 00:00:00 2001 From: angad-sethi <58194895+angad-sethi@users.noreply.github.com> Date: Thu, 6 Jun 2024 01:43:23 +1000 Subject: [PATCH] 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 --- components/DocsLayout.tsx | 36 +++++++++++++++++-- components/VisuallyHidden.tsx | 11 ++++++ test/__mocks__/@styled-icons/material.js | 1 + .../__snapshots__/DocsLayout.spec.tsx.snap | 25 +++++++++---- utils/githubApi.ts | 3 ++ 5 files changed, 68 insertions(+), 8 deletions(-) create mode 100644 components/VisuallyHidden.tsx diff --git a/components/DocsLayout.tsx b/components/DocsLayout.tsx index 6cff92843..271bc6590 100644 --- 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 ( - + + {feedLink && }