diff --git a/.eslintignore b/.eslintignore
index 463cd296607656bde0c0583bb00e0672ba262818..ab7862b7fc21f2d5360cac19ce4682d0ce8ac7ee 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,5 @@
node_modules/
build
public
+blog
+/blog.3/authors.yml
diff --git a/blog/2021-08-01-mdx-blog-post.mdx b/blog/2021-08-01-mdx-blog-post.mdx
deleted file mode 100644
index c04ebe323ee33f3bdede22be1a7e95c72ffa39a8..0000000000000000000000000000000000000000
--- a/blog/2021-08-01-mdx-blog-post.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-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>
-
-:::
diff --git a/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg b/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg
deleted file mode 100644
index 11bda0928456b12f8e53d0ba5709212a4058d449..0000000000000000000000000000000000000000
Binary files a/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg and /dev/null differ
diff --git a/blog/2021-08-26-welcome/index.md b/blog/2021-08-26-welcome/index.md
deleted file mode 100644
index 9455168f1701492b7fb1910d5d59c9eab38643c8..0000000000000000000000000000000000000000
--- a/blog/2021-08-26-welcome/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-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:
-
-
-
-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.
diff --git a/blog/2023-05-28-first-blog-post.md b/blog/2023-05-28-first-blog-post.md
new file mode 100644
index 0000000000000000000000000000000000000000..3d1df221e583df985c292132d850a35c31f1b714
--- /dev/null
+++ b/blog/2023-05-28-first-blog-post.md
@@ -0,0 +1,12 @@
+---
+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
diff --git a/src/theme/BlogLayout/index.js b/src/theme/BlogLayout/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..1419191b4b063e76031fe162dddd4ce26d345eb4
--- /dev/null
+++ b/src/theme/BlogLayout/index.js
@@ -0,0 +1,29 @@
+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>
+ );
+}
diff --git a/src/theme/BlogListPage/index.js b/src/theme/BlogListPage/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2b5598023de80918b4ad988a2cb79a467d2c3d1b
--- /dev/null
+++ b/src/theme/BlogListPage/index.js
@@ -0,0 +1,51 @@
+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>
+ );
+}
diff --git a/src/theme/Tag/index.js b/src/theme/Tag/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..08a263d1bcd5187222efef65c246f59861ed27a5
--- /dev/null
+++ b/src/theme/Tag/index.js
@@ -0,0 +1,17 @@
+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>
+ );
+}
diff --git a/src/theme/Tag/styles.module.css b/src/theme/Tag/styles.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..b0830a1dda4aae9363db387ceb5da88361b76cd4
--- /dev/null
+++ b/src/theme/Tag/styles.module.css
@@ -0,0 +1,63 @@
+: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;
+}
diff --git a/src/theme/TagsListByLetter/index.js b/src/theme/TagsListByLetter/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd6bae657c21f8ca0988bad9e946c2b8b3afa70b
--- /dev/null
+++ b/src/theme/TagsListByLetter/index.js
@@ -0,0 +1,35 @@
+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>
+ );
+}
diff --git a/src/theme/TagsListByLetter/styles.module.css b/src/theme/TagsListByLetter/styles.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..5eb53229802417beacc8e2109888cc8bcd7ce26f
--- /dev/null
+++ b/src/theme/TagsListByLetter/styles.module.css
@@ -0,0 +1,4 @@
+.tag {
+ display: inline-block;
+ margin: 0.5rem 0.5rem 0 1rem;
+}
diff --git a/src/theme/TagsListInline/index.js b/src/theme/TagsListInline/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..13f2c542f1f448e45ff93ee3eb420e552bdb947c
--- /dev/null
+++ b/src/theme/TagsListInline/index.js
@@ -0,0 +1,25 @@
+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>
+ </>
+ );
+}
diff --git a/src/theme/TagsListInline/styles.module.css b/src/theme/TagsListInline/styles.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..3119dc7d6e9b7459b9091d4fb0d3a11bf51aa7c6
--- /dev/null
+++ b/src/theme/TagsListInline/styles.module.css
@@ -0,0 +1,8 @@
+.tags {
+ display: inline;
+}
+
+.tag {
+ margin: 0 0.4rem 0.5rem 0;
+ display: inline-block;
+}