From b4090e15ca9da6ec45b36abc291f8f075e777241 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Sat, 17 Feb 2024 18:17:02 +0100 Subject: [PATCH 01/12] feat(blog): add visible RSS feed --- layouts/New/Blog.tsx | 20 +++++++++++++++++--- layouts/New/layouts.module.css | 7 +++++++ 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx index 27f1d3c92d750..50426b3d3517f 100644 --- a/layouts/New/Blog.tsx +++ b/layouts/New/Blog.tsx @@ -1,3 +1,4 @@ +import { RssIcon } from '@heroicons/react/24/solid'; import { getTranslations } from 'next-intl/server'; import type { FC } from 'react'; @@ -5,6 +6,7 @@ import { getClientContext } from '@/client-context'; import WithBlogCategories from '@/components/withBlogCategories'; import WithFooter from '@/components/withFooter'; import WithNavBar from '@/components/withNavBar'; +import { Link } from '@/navigation.mjs'; import getBlogData from '@/next-data/blogData'; import styles from './layouts.module.css'; @@ -34,6 +36,12 @@ const BlogLayout: FC = async () => { })); const blogData = await getBlogCategory(pathname); + // haky way to determine the rss feed + const rssFeed = () => { + if (blogData.category === 'vulnerability') return 'vulnerability'; + if (blogData.category === 'release') return 'releases'; + return 'blog'; + }; return ( <> @@ -41,9 +49,15 @@ const BlogLayout: FC = async () => {
-

{t('layouts.blog.title')}

- -

{t('layouts.blog.subtitle')}

+
+

+ {t('layouts.blog.title')} + + + +

+

{t('layouts.blog.subtitle')}

+
h1 { + @apply inline-flex + w-full + items-center + justify-between; + } + main { @apply max-w-8xl gap-4 From e6f35ca621e370751895a3e724c98048bfd7c26c Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Sat, 17 Feb 2024 23:37:33 +0100 Subject: [PATCH 02/12] fix: rss link --- layouts/New/Blog.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx index 50426b3d3517f..495e9ca517cb9 100644 --- a/layouts/New/Blog.tsx +++ b/layouts/New/Blog.tsx @@ -8,6 +8,7 @@ import WithFooter from '@/components/withFooter'; import WithNavBar from '@/components/withNavBar'; import { Link } from '@/navigation.mjs'; import getBlogData from '@/next-data/blogData'; +import { siteConfig } from '@/next.json.mjs'; import styles from './layouts.module.css'; @@ -36,12 +37,6 @@ const BlogLayout: FC = async () => { })); const blogData = await getBlogCategory(pathname); - // haky way to determine the rss feed - const rssFeed = () => { - if (blogData.category === 'vulnerability') return 'vulnerability'; - if (blogData.category === 'release') return 'releases'; - return 'blog'; - }; return ( <> @@ -52,7 +47,9 @@ const BlogLayout: FC = async () => {

{t('layouts.blog.title')} - + item.blogCategory === blogData.category)?.file ?? 'blog.xml'}`} + >

From 0e7d191d5174c0c1eaf566ad9bb22451125bf4da Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Sat, 17 Feb 2024 23:58:42 +0100 Subject: [PATCH 03/12] fix Signed-off-by: Augustin Mauroy --- layouts/New/Blog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx index 495e9ca517cb9..2260131505340 100644 --- a/layouts/New/Blog.tsx +++ b/layouts/New/Blog.tsx @@ -6,7 +6,7 @@ import { getClientContext } from '@/client-context'; import WithBlogCategories from '@/components/withBlogCategories'; import WithFooter from '@/components/withFooter'; import WithNavBar from '@/components/withNavBar'; -import { Link } from '@/navigation.mjs'; +import Link from '@/components/Link'; import getBlogData from '@/next-data/blogData'; import { siteConfig } from '@/next.json.mjs'; From 52390cc4e60b52f1af317dcab340c93b7070bc99 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Sun, 18 Feb 2024 00:35:44 +0100 Subject: [PATCH 04/12] fix: rss link logic --- layouts/New/Blog.tsx | 4 ++-- types/features.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx index 2260131505340..daf1bbdb01077 100644 --- a/layouts/New/Blog.tsx +++ b/layouts/New/Blog.tsx @@ -3,10 +3,10 @@ import { getTranslations } from 'next-intl/server'; import type { FC } from 'react'; import { getClientContext } from '@/client-context'; +import Link from '@/components/Link'; import WithBlogCategories from '@/components/withBlogCategories'; import WithFooter from '@/components/withFooter'; import WithNavBar from '@/components/withNavBar'; -import Link from '@/components/Link'; import getBlogData from '@/next-data/blogData'; import { siteConfig } from '@/next.json.mjs'; @@ -48,7 +48,7 @@ const BlogLayout: FC = async () => {

{t('layouts.blog.title')} item.blogCategory === blogData.category)?.file ?? 'blog.xml'}`} + href={`/feed/${siteConfig.rssFeeds.find(item => item.category === blogData.category)?.file ?? ''}`} > diff --git a/types/features.ts b/types/features.ts index 54fdbf1bfa04f..94c2df4a0963d 100644 --- a/types/features.ts +++ b/types/features.ts @@ -1,7 +1,7 @@ export interface RSSFeed { file: string; title: string; - blogCategory: string; + category: string; description?: string; } From ca1a89b83adc8a8e20af0fb96ef2dc774f3d02fa Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Sun, 18 Feb 2024 00:50:56 +0100 Subject: [PATCH 05/12] fix: generic blog when category didn't exist --- layouts/New/Blog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx index daf1bbdb01077..fc03d3b4735b7 100644 --- a/layouts/New/Blog.tsx +++ b/layouts/New/Blog.tsx @@ -48,7 +48,7 @@ const BlogLayout: FC = async () => {

{t('layouts.blog.title')} item.category === blogData.category)?.file ?? ''}`} + href={`/feed/${siteConfig.rssFeeds.find(item => item.category === blogData.category)?.file ?? 'blog.xml'}`} > From 7e2989b1d37e84d610f5d83c5e0125af599b5977 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Sun, 18 Feb 2024 01:01:11 +0100 Subject: [PATCH 06/12] design: add hover effect --- layouts/New/Blog.tsx | 2 +- layouts/New/layouts.module.css | 31 ++++++++++++++++++++++++++----- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx index fc03d3b4735b7..dce7ad5bafdd3 100644 --- a/layouts/New/Blog.tsx +++ b/layouts/New/Blog.tsx @@ -50,7 +50,7 @@ const BlogLayout: FC = async () => { item.category === blogData.category)?.file ?? 'blog.xml'}`} > - +

{t('layouts.blog.subtitle')}

diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css index 10eb1b2eeeff7..7a41b0054fe09 100644 --- a/layouts/New/layouts.module.css +++ b/layouts/New/layouts.module.css @@ -147,11 +147,32 @@ xs:bg-none xs:dark:bg-none; - header > h1 { - @apply inline-flex - w-full - items-center - justify-between; + header { + h1 { + @apply inline-flex + w-full + items-center + justify-between; + + a { + @apply inline-flex + size-9 + items-center + justify-center + rounded-md + p-2; + + &:hover { + @apply bg-neutral-100 + dark:bg-neutral-900; + } + } + + svg { + @apply size-6 + text-neutral-500; + } + } } main { From c0e4cd90ae8cea2fe638ffc4f6c6e1362b39c9a6 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Sun, 18 Feb 2024 11:37:40 +0100 Subject: [PATCH 07/12] feat(blog): introduce blogHeader --- .../BlogHeader/__tests__/index.test.mjs | 29 +++++++++++ components/Common/BlogHeader/index.module.css | 34 +++++++++++++ .../Common/BlogHeader/index.stories.tsx | 23 +++++++++ components/Common/BlogHeader/index.tsx | 35 +++++++++++++ layouts/New/Blog.tsx | 45 ++++++----------- layouts/New/layouts.module.css | 50 +++---------------- 6 files changed, 141 insertions(+), 75 deletions(-) create mode 100644 components/Common/BlogHeader/__tests__/index.test.mjs create mode 100644 components/Common/BlogHeader/index.module.css create mode 100644 components/Common/BlogHeader/index.stories.tsx create mode 100644 components/Common/BlogHeader/index.tsx diff --git a/components/Common/BlogHeader/__tests__/index.test.mjs b/components/Common/BlogHeader/__tests__/index.test.mjs new file mode 100644 index 0000000000000..2e0a00e420029 --- /dev/null +++ b/components/Common/BlogHeader/__tests__/index.test.mjs @@ -0,0 +1,29 @@ +import { render, screen } from '@testing-library/react'; + +import BlogHeader from '@/components/Common/BlogHeader'; + +describe('BlogHeader', () => { + it('should have correct href when category is all', () => { + render(); + const link = screen.getByRole('link'); + expect(link).toHaveAttribute('href', '/feed/blog.xml'); + }); + + it('should have correct href when category is release', () => { + render(); + const link = screen.getByRole('link'); + expect(link).toHaveAttribute('href', '/feed/releases.xml'); + }); + + it('should have correct href when category is vulnerability', () => { + render(); + const link = screen.getByRole('link'); + expect(link).toHaveAttribute('href', '/feed/vulnerability.xml'); + }); + + it('should have correct href when category is random', () => { + render(); + const link = screen.getByRole('link'); + expect(link).toHaveAttribute('href', '/feed/blog.xml'); + }); +}); diff --git a/components/Common/BlogHeader/index.module.css b/components/Common/BlogHeader/index.module.css new file mode 100644 index 0000000000000..b7a0764768f5f --- /dev/null +++ b/components/Common/BlogHeader/index.module.css @@ -0,0 +1,34 @@ +.blogHeader { + h1 { + @apply inline-flex + w-full + items-center + justify-between; + + a { + @apply inline-flex + size-9 + items-center + justify-center + rounded-md + p-2; + + &:hover { + @apply bg-neutral-100 + dark:bg-neutral-900; + } + } + + svg { + @apply size-6 + text-neutral-500; + } + } + + p { + @apply text-lg + font-medium + text-neutral-800 + dark:text-neutral-200; + } +} diff --git a/components/Common/BlogHeader/index.stories.tsx b/components/Common/BlogHeader/index.stories.tsx new file mode 100644 index 0000000000000..ba7e9bac865c2 --- /dev/null +++ b/components/Common/BlogHeader/index.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +import BlogHeader from '@/components/Common/BlogHeader'; + +type Story = StoryObj; +type Meta = MetaObj; + +export const Default: Story = { + args: { + // See `@/site.json` for the `rssFeeds` object + category: 'all', + }, + decorators: [ + // We need to wrap to allow global styles to be applied (markdown styles) + Story => ( +
+ +
+ ), + ], +}; + +export default { component: BlogHeader } as Meta; diff --git a/components/Common/BlogHeader/index.tsx b/components/Common/BlogHeader/index.tsx new file mode 100644 index 0000000000000..487ad642f8751 --- /dev/null +++ b/components/Common/BlogHeader/index.tsx @@ -0,0 +1,35 @@ +'use client'; + +import { RssIcon } from '@heroicons/react/24/solid'; +import { useTranslations } from 'next-intl'; +import type { FC } from 'react'; + +import Link from '@/components/Link'; +import { siteConfig } from '@/next.json.mjs'; + +import styles from './index.module.css'; + +type BlogHeaderProps = { + category: string; +}; + +const BlogHeader: FC = ({ category }) => { + const t = useTranslations(); + const currentFile = + siteConfig.rssFeeds.find(item => item.category === category)?.file ?? + 'blog.xml'; + + return ( +
+

+ {t('layouts.blog.title')} + + + +

+

{t('layouts.blog.subtitle')}

+
+ ); +}; + +export default BlogHeader; diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx index dce7ad5bafdd3..ed1d968305b9a 100644 --- a/layouts/New/Blog.tsx +++ b/layouts/New/Blog.tsx @@ -1,14 +1,12 @@ -import { RssIcon } from '@heroicons/react/24/solid'; import { getTranslations } from 'next-intl/server'; import type { FC } from 'react'; import { getClientContext } from '@/client-context'; -import Link from '@/components/Link'; +import BlogHeader from '@/components/Common/BlogHeader'; import WithBlogCategories from '@/components/withBlogCategories'; import WithFooter from '@/components/withFooter'; import WithNavBar from '@/components/withNavBar'; import getBlogData from '@/next-data/blogData'; -import { siteConfig } from '@/next.json.mjs'; import styles from './layouts.module.css'; @@ -41,34 +39,19 @@ const BlogLayout: FC = async () => { return ( <> - -
-
-
-

- {t('layouts.blog.title')} - item.category === blogData.category)?.file ?? 'blog.xml'}`} - > - - -

-

{t('layouts.blog.subtitle')}

-
- - -
-
- +
+ + +
); diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css index 7a41b0054fe09..64b77edadbf71 100644 --- a/layouts/New/layouts.module.css +++ b/layouts/New/layouts.module.css @@ -141,55 +141,17 @@ .blogLayout { @apply flex w-full + max-w-8xl justify-center + gap-4 bg-gradient-subtle + px-4 + py-12 dark:bg-gradient-subtle-dark + md:px-14 + lg:px-28 xs:bg-none xs:dark:bg-none; - - header { - h1 { - @apply inline-flex - w-full - items-center - justify-between; - - a { - @apply inline-flex - size-9 - items-center - justify-center - rounded-md - p-2; - - &:hover { - @apply bg-neutral-100 - dark:bg-neutral-900; - } - } - - svg { - @apply size-6 - text-neutral-500; - } - } - } - - main { - @apply max-w-8xl - gap-4 - px-4 - py-12 - md:px-14 - lg:px-28; - - p { - @apply text-lg - font-medium - text-neutral-800 - dark:text-neutral-200; - } - } } .contentLayout { From a370e9ead705a1553ec92829f0920fd93af61d7b Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Mon, 19 Feb 2024 08:55:03 +0100 Subject: [PATCH 08/12] move component to right folder --- components/{Common => Blog}/BlogHeader/__tests__/index.test.mjs | 0 components/{Common => Blog}/BlogHeader/index.module.css | 0 components/{Common => Blog}/BlogHeader/index.stories.tsx | 2 +- components/{Common => Blog}/BlogHeader/index.tsx | 0 layouts/New/Blog.tsx | 2 +- 5 files changed, 2 insertions(+), 2 deletions(-) rename components/{Common => Blog}/BlogHeader/__tests__/index.test.mjs (100%) rename components/{Common => Blog}/BlogHeader/index.module.css (100%) rename components/{Common => Blog}/BlogHeader/index.stories.tsx (89%) rename components/{Common => Blog}/BlogHeader/index.tsx (100%) diff --git a/components/Common/BlogHeader/__tests__/index.test.mjs b/components/Blog/BlogHeader/__tests__/index.test.mjs similarity index 100% rename from components/Common/BlogHeader/__tests__/index.test.mjs rename to components/Blog/BlogHeader/__tests__/index.test.mjs diff --git a/components/Common/BlogHeader/index.module.css b/components/Blog/BlogHeader/index.module.css similarity index 100% rename from components/Common/BlogHeader/index.module.css rename to components/Blog/BlogHeader/index.module.css diff --git a/components/Common/BlogHeader/index.stories.tsx b/components/Blog/BlogHeader/index.stories.tsx similarity index 89% rename from components/Common/BlogHeader/index.stories.tsx rename to components/Blog/BlogHeader/index.stories.tsx index ba7e9bac865c2..0e29b475119bc 100644 --- a/components/Common/BlogHeader/index.stories.tsx +++ b/components/Blog/BlogHeader/index.stories.tsx @@ -1,6 +1,6 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react'; -import BlogHeader from '@/components/Common/BlogHeader'; +import BlogHeader from '@/components/Blog/BlogHeader'; type Story = StoryObj; type Meta = MetaObj; diff --git a/components/Common/BlogHeader/index.tsx b/components/Blog/BlogHeader/index.tsx similarity index 100% rename from components/Common/BlogHeader/index.tsx rename to components/Blog/BlogHeader/index.tsx diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx index ed1d968305b9a..cd4f9648c27e4 100644 --- a/layouts/New/Blog.tsx +++ b/layouts/New/Blog.tsx @@ -2,7 +2,7 @@ import { getTranslations } from 'next-intl/server'; import type { FC } from 'react'; import { getClientContext } from '@/client-context'; -import BlogHeader from '@/components/Common/BlogHeader'; +import BlogHeader from '@/components/Blog/BlogHeader'; import WithBlogCategories from '@/components/withBlogCategories'; import WithFooter from '@/components/withFooter'; import WithNavBar from '@/components/withNavBar'; From f003c0528ea35d8c5eca11af778b19405788f4fa Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Mon, 19 Feb 2024 14:41:23 +0100 Subject: [PATCH 09/12] fix: test --- components/Blog/BlogHeader/__tests__/index.test.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Blog/BlogHeader/__tests__/index.test.mjs b/components/Blog/BlogHeader/__tests__/index.test.mjs index 2e0a00e420029..ec47f6c1f043b 100644 --- a/components/Blog/BlogHeader/__tests__/index.test.mjs +++ b/components/Blog/BlogHeader/__tests__/index.test.mjs @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; -import BlogHeader from '@/components/Common/BlogHeader'; +import BlogHeader from '@/components/Blog/BlogHeader'; describe('BlogHeader', () => { it('should have correct href when category is all', () => { From be1937d899d3ef4d16d5c39a501e6b9b6c9f25ba Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Mon, 19 Feb 2024 17:24:42 +0100 Subject: [PATCH 10/12] fix: remove useless `max-w-8xl` --- layouts/New/layouts.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css index 64b77edadbf71..ea4a5b3c64b0e 100644 --- a/layouts/New/layouts.module.css +++ b/layouts/New/layouts.module.css @@ -141,7 +141,6 @@ .blogLayout { @apply flex w-full - max-w-8xl justify-center gap-4 bg-gradient-subtle From 6ea828d66a256c47494cd66410c1e82ecbc18eb3 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Mon, 19 Feb 2024 17:38:02 +0100 Subject: [PATCH 11/12] revert --- layouts/New/Blog.tsx | 28 +++++++++++++++------------- layouts/New/layouts.module.css | 14 +++++++++----- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx index cd4f9648c27e4..1ee913371d7b3 100644 --- a/layouts/New/Blog.tsx +++ b/layouts/New/Blog.tsx @@ -39,19 +39,21 @@ const BlogLayout: FC = async () => { return ( <> -
- - -
+
+
+ + +
+
); diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css index ea4a5b3c64b0e..470af0beb2447 100644 --- a/layouts/New/layouts.module.css +++ b/layouts/New/layouts.module.css @@ -142,15 +142,19 @@ @apply flex w-full justify-center - gap-4 bg-gradient-subtle - px-4 - py-12 dark:bg-gradient-subtle-dark - md:px-14 - lg:px-28 xs:bg-none xs:dark:bg-none; + + main { + @apply max-w-8xl + gap-4 + px-4 + py-12 + md:px-14 + lg:px-28; + } } .contentLayout { From c7093bb1af7304c472c4935e908daeda516eb877 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Mon, 19 Feb 2024 21:16:43 +0100 Subject: [PATCH 12/12] re-add extra space --- layouts/New/Blog.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/layouts/New/Blog.tsx b/layouts/New/Blog.tsx index 1ee913371d7b3..1b3e1084e8191 100644 --- a/layouts/New/Blog.tsx +++ b/layouts/New/Blog.tsx @@ -39,9 +39,11 @@ const BlogLayout: FC = async () => { return ( <> +
+ { />
+ );