Merge pull request #34 from HyunmoAhn/env/combine-blogs

Env/combine blogs

docusaurus.config.js

@@ -45,7 +45,7 @@ module.exports = {
       },
       hideOnScroll: true,
       items: [
-        { to: '/trouble-shooting', label: 'Trouble Shooting', position: 'left' },
+        { to: '/tags/trouble-shooting', label: 'Trouble Shooting', position: 'left' },
         { to: '/about', label: 'About', position: 'left' },
         {
           type: 'localeDropdown',
@@ -70,28 +70,19 @@ module.exports = {
             },
             {
               label: 'Trouble Shooting',
-              to: '/trouble-shooting',
+              to: '/tags/trouble-shooting',
             },
             {
               label: 'About',
               to: '/about',
             },
             {
-              label: 'GitHub',
-              href: 'https://github.com/HyunmoAhn',
-            },
-          ],
-        },
-        {
-          title: 'Tags',
-          items: [
-            {
-              label: 'Blog',
+              label: 'Tag',
               to: '/tags',
             },
             {
-              label: 'Trouble Shooting',
-              to: '/trouble-shooting/tags',
+              label: 'GitHub',
+              href: 'https://github.com/HyunmoAhn',
             },
           ],
         },
@@ -139,6 +130,7 @@ module.exports = {
           routeBasePath: '/',
           showReadingTime: true,
           authorsMapPath: '../authors.yml',
+          blogSidebarCount: 'ALL',
         },
         theme: {
           customCss: [
@@ -157,15 +149,6 @@ module.exports = {
   ],
   plugins: [
     'docusaurus-plugin-sass',
-    [
-      '@docusaurus/plugin-content-blog',
-      {
-        id: 'trouble-shooting',
-        routeBasePath: 'trouble-shooting',
-        path: './troubleShooting',
-        authorsMapPath: '../authors.yml',
-      },
-    ],
     [
       '@docusaurus/plugin-pwa',
       {

src/css/custom.css

@@ -18,6 +18,8 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --docusaurus-error-code-line-bg: #ffccc080;
   --docusaurus-good-code-line-bg: #25a38940;
+
+  --ifm-container-width-xl: 1520px;
 }
 
 /* If you have a different syntax highlighting theme for dark mode. */

src/theme/BlogTagsPostsPage/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import { PageMetadata, HtmlClassNameProvider, ThemeClassNames } from '@docusaurus/theme-common';
+import { useBlogTagsPostsPageTitle } from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import BlogLayout from '@theme/BlogLayout';
+import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
+import type { Props } from '@theme/BlogTagsPostsPage';
+import BlogPostItems from '@theme/BlogPostItems';
+import Unlisted from '@theme/ContentVisibility/Unlisted';
+import Heading from '@theme/Heading';
+import { getTaggedSideBar } from '../../utils';
+
+function BlogTagsPostsPageMetadata({ tag }: Props): JSX.Element {
+  const title = useBlogTagsPostsPageTitle(tag);
+  return (
+    <>
+      <PageMetadata title={title} description={tag.description} />
+      <SearchMetadata tag="blog_tags_posts" />
+    </>
+  );
+}
+
+function BlogTagsPostsPageContent({ tag, items, sidebar, listMetadata }: Props): JSX.Element {
+  const title = useBlogTagsPostsPageTitle(tag);
+  const taggedSideBar = getTaggedSideBar({ selectTag: tag.label, items, sidebar });
+
+  return (
+    <BlogLayout sidebar={taggedSideBar}>
+      {tag.unlisted && <Unlisted />}
+      <header className="margin-bottom--xl">
+        <Heading as="h1">{title}</Heading>
+        {tag.description && <p>{tag.description}</p>}
+        <Link href={tag.allTagsPath}>
+          <Translate
+            id="theme.tags.tagsPageLink"
+            description="The label of the link targeting the tag list page"
+          >
+            View All Tags
+          </Translate>
+        </Link>
+      </header>
+      <BlogPostItems items={items} />
+      <BlogListPaginator metadata={listMetadata} />
+    </BlogLayout>
+  );
+}
+export default function BlogTagsPostsPage(props: Props): JSX.Element {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(ThemeClassNames.wrapper.blogPages, ThemeClassNames.page.blogTagPostListPage)}
+    >
+      <BlogTagsPostsPageMetadata {...props} />
+      <BlogTagsPostsPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
+}

src/utils.ts

@@ -0,0 +1,25 @@
+import type { PropBlogPostContent, BlogSidebar } from '@docusaurus/plugin-content-blog';
+
+export interface TaggedSideBarParams {
+  items: readonly { readonly content: PropBlogPostContent }[];
+  sidebar: BlogSidebar;
+  selectTag: string;
+}
+
+export const getTaggedSideBar = ({ items, selectTag, sidebar }: TaggedSideBarParams) => {
+  const taggedContents = items.filter((item) =>
+    item.content.metadata.tags.some((tag) => {
+      return tag.label === selectTag;
+    }),
+  );
+
+  return {
+    ...sidebar,
+    title: `"${selectTag}" posts`,
+    items: sidebar.items.filter((item) => {
+      return taggedContents.some((taggedContent) => {
+        return item.permalink === taggedContent.content.metadata.permalink;
+      });
+    }),
+  };
+};