feat: blog repository

.eslintignore

 node_modules/
 build
 public
+blog
+/blog.3/authors.yml

blog/2021-08-01-mdx-blog-post.mdx

----
-slug: mdx-blog-post
-title: MDX Blog Post
-authors: [slorber]
-tags: [docusaurus]
----
-
-Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
-
-:::tip
-
-Use the power of React to create interactive blog posts.
-
-```js
-<button onClick={() => alert('button clicked!')}>Click me!</button>
-```
-
-<button onClick={() => alert('button clicked!')}>Click me!</button>
-
-:::

blog/2021-08-26-welcome/index.md

----
-slug: welcome
-title: Welcome
-authors: [slorber, yangshun]
-tags: [facebook, hello, docusaurus]
----
-
-[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
-
-Simply add Markdown files (or folders) to the `blog` directory.
-
-Regular blog authors can be added to `authors.yml`.
-
-The blog post date can be extracted from filenames, such as:
-
-- `2019-05-30-welcome.md`
-- `2019-05-30-welcome/index.md`
-
-A blog post folder can be convenient to co-locate blog post images:
-
-![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
-
-The blog supports tags as well!
-
-**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

blog/2023-05-28-first-blog-post.md

+---
+slug: Second-blog-post
+title: Second Blog Post
+authors:
+  name: Gao Wei
+  title: Docusaurus Core Team
+  url: https://github.com/wgao19
+  image_url: https://github.com/wgao19.png
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

src/theme/BlogLayout/index.js

+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import BlogSidebar from '@theme/BlogSidebar';
+export default function BlogLayout(props) {
+  const {sidebar, toc, children, ...layoutProps} = props;
+  const hasSidebar = sidebar && sidebar.items.length > 0;
+  return (
+    <Layout {...layoutProps}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          LOL
+          <BlogSidebar sidebar={sidebar} />
+          <main
+            className={clsx('col', {
+              'col--7': hasSidebar,
+              'col--9 col--offset-1': !hasSidebar,
+            })}
+            itemScope
+            itemType="http://schema.org/Blog">
+              lol
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </Layout>
+  );
+}

src/theme/BlogListPage/index.js

+import React from 'react';
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import BlogLayout from '@theme/BlogLayout';
+import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
+import BlogPostItems from '@theme/BlogPostItems';
+function BlogListPageMetadata(props) {
+  const {metadata} = props;
+  const {
+    siteConfig: {title: siteTitle},
+  } = useDocusaurusContext();
+  const {blogDescription, blogTitle, permalink} = metadata;
+  const isBlogOnlyMode = permalink === '/';
+  const title = isBlogOnlyMode ? siteTitle : blogTitle;
+  return (
+    <>
+      <PageMetadata title={title} description={blogDescription} />
+      <SearchMetadata tag="blog_posts_list" />
+    </>
+  );
+}
+function BlogListPageContent(props) {
+  const {metadata, items, sidebar} = props;
+  return (
+    <>
+    lol
+    <BlogLayout sidebar={sidebar}>
+      <BlogPostItems items={items} />
+      <BlogListPaginator metadata={metadata} />
+    </BlogLayout>
+    </>
+  );
+}
+export default function BlogListPage(props) {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogListPage,
+      )}>
+      <BlogListPageMetadata {...props} />
+      <BlogListPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
+}

src/theme/Tag/index.js

+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+export default function Tag({permalink, label, count}) {
+  return (
+    <Link
+      href={permalink}
+      className={clsx(
+        styles.tag,
+        count ? styles.tagWithCount : styles.tagRegular,
+      )}>
+      {label}
+      {count && <span>{count}</span>}
+    </Link>
+  );
+}

src/theme/Tag/styles.module.css

+:root {
+  --docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
+}
+
+.tag {
+  border: 1px solid var(--docusaurus-tag-list-border);
+  transition: border var(--ifm-transition-fast);
+}
+
+.tag:hover {
+  --docusaurus-tag-list-border: var(--ifm-link-color);
+  text-decoration: none;
+}
+
+.tagRegular {
+  border-radius: var(--ifm-global-radius);
+  padding: 0.2rem 0.5rem 0.3rem;
+  font-size: 90%;
+}
+
+.tagWithCount {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 0.5rem 0 1rem;
+  border-left: 0;
+}
+
+.tagWithCount::before,
+.tagWithCount::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  border: 1px solid var(--docusaurus-tag-list-border);
+  transition: inherit;
+}
+
+.tagWithCount::before {
+  right: 100%;
+  transform: translate(50%, -50%) rotate(-45deg);
+  width: 1.18rem;
+  height: 1.18rem;
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.tagWithCount::after {
+  left: 0;
+  transform: translateY(-50%);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+}
+
+.tagWithCount span {
+  background: var(--ifm-color-secondary);
+  color: var(--ifm-color-black);
+  font-size: 0.7rem;
+  line-height: 1.2;
+  border-radius: var(--ifm-global-radius);
+  padding: 0.1rem 0.4rem;
+  margin-left: 0.3rem;
+}

src/theme/TagsListByLetter/index.js

+import React from 'react';
+import {listTagsByLetters} from '@docusaurus/theme-common';
+import Tag from '@theme/Tag';
+import styles from './styles.module.css';
+function TagLetterEntryItem({letterEntry}) {
+  return (
+    <article>
+      <h2>{letterEntry.letter}</h2>
+      <ul className="padding--none">
+        {letterEntry.tags.map((tag) => (
+          <li key={tag.permalink} className={styles.tag}>
+            LOLilol
+            <Tag {...tag} />
+          </li>
+        ))}
+      </ul>
+      <hr />
+    </article>
+  );
+}
+export default function TagsListByLetter({tags}) {
+  const letterList = listTagsByLetters(tags);
+  return (
+    <section className="margin-vert--lg">
+            LOLOL
+
+      {letterList.map((letterEntry) => (
+        <TagLetterEntryItem
+          key={letterEntry.letter}
+          letterEntry={letterEntry}
+        />
+      ))}
+    </section>
+  );
+}

src/theme/TagsListByLetter/styles.module.css

+.tag {
+  display: inline-block;
+  margin: 0.5rem 0.5rem 0 1rem;
+}

src/theme/TagsListInline/index.js

+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import Tag from '@theme/Tag';
+import styles from './styles.module.css';
+export default function TagsListInline({tags}) {
+  return (
+    <>
+      <b>
+        <Translate
+          id="theme.tags.tagsListLabel"
+          description="The label alongside a tag list">
+          Tags:
+        </Translate>
+      </b>
+      <ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
+        {tags.map(({label, permalink: tagPermalink}) => (
+          <li key={tagPermalink} className={styles.tag}>
+            <Tag label={label} permalink={tagPermalink} />
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

src/theme/TagsListInline/styles.module.css

+.tags {
+  display: inline;
+}
+
+.tag {
+  margin: 0 0.4rem 0.5rem 0;
+  display: inline-block;
+}