This is an automated email from the ASF dual-hosted git repository. juzhiyuan pushed a commit to branch revert-641-feat-update-blogPage in repository https://gitbox.apache.org/repos/asf/apisix-website.git
commit d3bd031bbc675c7cec26fc4fc230a19af52a268d Author: 琚致远 <[email protected]> AuthorDate: Wed Oct 6 21:49:15 2021 +0800 Revert "feat: support tags on Blog list (#641)" This reverts commit 4726812dfabc2f858778cbfe620939fa44e12534. --- website/docusaurus.config.js | 1 - website/src/assets/icons/blog-date.svg | 1 - website/src/assets/icons/blog-tags.svg | 1 - website/src/theme/BlogListPage/index.js | 87 --------------- website/src/theme/BlogListPage/styles.module.css | 18 --- website/src/theme/BlogPostItem/index.js | 134 ----------------------- website/src/theme/BlogPostItem/styles.module.css | 76 ------------- website/src/theme/BlogPostPage/index.js | 74 ------------- website/src/theme/BlogPostPage/styles.module.css | 6 - website/src/theme/BlogSidebar/index.js | 66 ----------- website/src/theme/BlogSidebar/styles.module.css | 68 ------------ website/src/theme/BlogTagsPostsPage/index.js | 68 ------------ 12 files changed, 600 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 2f5b8bd..44bafb9 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -240,7 +240,6 @@ module.exports = { }, blog: { path: "blog", - postsPerPage: 'ALL', }, theme: { customCss: "../src/css/customTheme.css", diff --git a/website/src/assets/icons/blog-date.svg b/website/src/assets/icons/blog-date.svg deleted file mode 100644 index cd21dbd..0000000 --- a/website/src/assets/icons/blog-date.svg +++ /dev/null @@ -1 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?><svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg";><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M24.0083 12L24.0071 24.0088L32.4865 32.4882" stroke="#333" stroke-width="4" stroke-linecap="rou [...] \ No newline at end of file diff --git a/website/src/assets/icons/blog-tags.svg b/website/src/assets/icons/blog-tags.svg deleted file mode 100644 index 5072247..0000000 --- a/website/src/assets/icons/blog-tags.svg +++ /dev/null @@ -1 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?><svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg";><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M42.1691 29.2451L29.2631 42.1511C28.5879 42.8271 27.6716 43.2069 26.7161 43.2069C25.7606 43.2069 24.8444 42.8271 24.1691 42.1511L8 26V8H26L42.1691 24.1691C43.5649 25.5732 43.5649 27.841 42.1691 29.2451Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path fill-rule [...] \ No newline at end of file diff --git a/website/src/theme/BlogListPage/index.js b/website/src/theme/BlogListPage/index.js deleted file mode 100644 index 4674426..0000000 --- a/website/src/theme/BlogListPage/index.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -import React, { useEffect, useState } from 'react'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; -import BlogPostItem from '@theme/BlogPostItem'; -import BlogListPaginator from '@theme/BlogListPaginator'; -import BlogSidebar from '@theme/BlogSidebar'; -import { ThemeClassNames } from '@docusaurus/theme-common'; - -import styles from './styles.module.css'; - -function BlogListPage(props) { - const { metadata, items } = props; - const { - siteConfig: { title: siteTitle }, - } = useDocusaurusContext(); - const { blogDescription, blogTitle, permalink } = metadata; - const isBlogOnlyMode = permalink === '/'; - const title = isBlogOnlyMode ? siteTitle : blogTitle; - const [tagsCount, setTagsCount] = useState(); - - useEffect(() => { - let totalTags = []; - items.forEach(item => { - const tags = item.content.frontMatter.tags; - if (tags) { - totalTags = totalTags.concat(tags); - } - }); - const tagsCount = { - All: items.length, - }; - totalTags.forEach(item => { - tagsCount[item] = (tagsCount[item] || 0) + 1; - }); - localStorage.setItem('tagsTotal', JSON.stringify(tagsCount)); - setTagsCount(tagsCount); - }, []); - - return ( - <Layout - title={title} - description={blogDescription} - wrapperClassName={ThemeClassNames.wrapper.blogPages} - pageClassName={ThemeClassNames.page.blogListPage} - searchMetadatas={{ - // assign unique search tag to exclude this page from search results! - tag: 'blog_posts_list', - }}> - <div className={styles.backgroundBox}></div> - <div className="container margin-vert--lg"> - <div className={styles.titleBox}> - <div className="row"> - <div className="col col--12"> - <h1>Blog</h1> - <span>We love open source.</span> - </div> - </div> - </div> - <div className="row"> - <div className="col col--3"> - <BlogSidebar count={tagsCount} /> - </div> - <main className="col col--9"> - {items.map(({ content: BlogPostContent }) => ( - <BlogPostItem - key={BlogPostContent.metadata.permalink} - frontMatter={BlogPostContent.frontMatter} - metadata={BlogPostContent.metadata} - truncated={BlogPostContent.metadata.truncated}> - <BlogPostContent /> - </BlogPostItem> - ))} - <BlogListPaginator metadata={metadata} /> - </main> - </div> - </div> - </Layout> - ); -} - -export default BlogListPage; diff --git a/website/src/theme/BlogListPage/styles.module.css b/website/src/theme/BlogListPage/styles.module.css deleted file mode 100644 index 72b2590..0000000 --- a/website/src/theme/BlogListPage/styles.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.backgroundBox { - position: absolute; - width: 100%; - min-height: 150px; - z-index: -1; -} - -.titleBox { - position: relative; - margin-bottom: 50px !important; -} - -.titleBox h1 { - margin-top: 2rem; - font-size: 4rem; - font-weight: 800; - text-transform: uppercase; -} diff --git a/website/src/theme/BlogPostItem/index.js b/website/src/theme/BlogPostItem/index.js deleted file mode 100644 index 389a276..0000000 --- a/website/src/theme/BlogPostItem/index.js +++ /dev/null @@ -1,134 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -import React from 'react'; -import clsx from 'clsx'; -import { MDXProvider } from '@mdx-js/react'; -import { translate } from '@docusaurus/Translate'; -import Link from '@docusaurus/Link'; -import MDXComponents from '@theme/MDXComponents'; -import Seo from '@theme/Seo'; - -import styles from './styles.module.css'; -import { usePluralForm } from '@docusaurus/theme-common'; // Very simple pluralization: probably good enough for now -import TagsLogo from "../../assets/icons/blog-tags.svg"; -import DateLogo from "../../assets/icons/blog-date.svg"; - -function useReadingTimePlural() { - const { selectMessage } = usePluralForm(); - return (readingTimeFloat) => { - const readingTime = Math.ceil(readingTimeFloat); - return selectMessage( - readingTime, - translate( - { - id: 'theme.blog.post.readingTime.plurals', - description: - 'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)', - message: 'One min read|{readingTime} min read', - }, - { - readingTime, - }, - ), - ); - }; -} - -function BlogPostItem(props) { - const readingTimePlural = useReadingTimePlural(); - const { - children, - frontMatter, - metadata, - truncated, - isBlogPostPage = false, - } = props; - const { date, formattedDate, permalink, tags, readingTime } = metadata; - const { author, title, image, keywords } = frontMatter; - const authorURL = frontMatter.author_url || frontMatter.authorURL; - const authorTitle = frontMatter.author_title || frontMatter.authorTitle; - const authorImageURL = - frontMatter.author_image_url || frontMatter.authorImageURL; - - const renderPostHeader = () => { - const TitleHeading = isBlogPostPage ? 'h1' : 'h2'; - return ( - <header> - <TitleHeading - className={clsx('margin-bottom--sm', styles.blogPostTitle)}> - {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>} - </TitleHeading> - </header> - ); - }; - - return ( - <> - <Seo - {...{ - keywords, - image, - }} - /> - - <article className={!isBlogPostPage ? styles.container : undefined}> - {renderPostHeader()} - <div className={styles.markdown}> - <MDXProvider components={MDXComponents}>{children}</MDXProvider> - </div> - <div className={styles.postHeader}> - <div className="avatar margin-bottom--md"> - <div className="avatar__intro"> - {author && ( - <> - <div className={styles.authorBox}> - {authorImageURL && - <Link href={authorURL}> - <div className={styles.authorImageBox}> - <img src={authorImageURL} /> - </div> - </Link>} - <Link href={authorURL} className={styles.authorName}>{authorImageURL ? author : `Author: ${author}`}</Link> - </div> - </> - )} - </div> - </div> - {author && <div className={`margin-bottom--md ${styles.line}`}> - <div></div> - </div>} - <div className={`margin-bottom--md ${styles.headerDate} ${author && styles.marginLeft}`}> - <DateLogo /> - <time dateTime={date} className={styles.blogPostDate}> - {formattedDate} - </time> - </div> - {tags.length > 0 && <div className={`margin-bottom--md ${styles.line}`}> - <div></div> - </div>} - <div className={`margin-bottom--md`}> - {tags.length > 0 && ( - <div className={`col ${styles.headerTags}`}> - <TagsLogo /> - {tags.map(({ label, permalink: tagPermalink }) => ( - <Link - key={tagPermalink} - className="margin-horiz--sm" - to={tagPermalink}> - {label} - </Link> - ))} - </div> - )} - </div> - </div> - </article> - </> - ); -} - -export default BlogPostItem; diff --git a/website/src/theme/BlogPostItem/styles.module.css b/website/src/theme/BlogPostItem/styles.module.css deleted file mode 100644 index a8135ac..0000000 --- a/website/src/theme/BlogPostItem/styles.module.css +++ /dev/null @@ -1,76 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -.blogPostTitle { - font-size: 2.25rem; -} - -.headerDate { - display: flex; - align-items: center; -} - -.marginLeft { - margin-left: 16px; -} - -.blogPostDate { - font-size: 0.9rem; - margin-left: 5px; -} - -.postHeader { - display: flex; - flex-wrap: wrap; - align-items: center; - color: #6A737D; -} - -.authorName { - font-weight: normal; -} - -.headerTags { - display: flex; - align-items: center; -} - -.line { - margin-left: 16px; - display: flex; - align-items: center; -} - -.line div { - width: 1px; - height: 12px; - background-color: #6A737D; -} - -.container { - margin-bottom: 3rem !important; -} - -.markdown { - margin: 16px 0 16px; -} - -.authorBox { - display: flex; - align-items: center; -} - -.authorImageBox { - border-radius: 50%; - width: 48px; - height: 48px; - margin-right: 10px; -} - -.authorImageBox img { - border-radius: 50%; -} diff --git a/website/src/theme/BlogPostPage/index.js b/website/src/theme/BlogPostPage/index.js deleted file mode 100644 index f91b492..0000000 --- a/website/src/theme/BlogPostPage/index.js +++ /dev/null @@ -1,74 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -import React from 'react'; -import Layout from '@theme/Layout'; -import BlogPostItem from '@theme/BlogPostItem'; -import BlogPostPaginator from '@theme/BlogPostPaginator'; -import TOC from '@theme/TOC'; -import EditThisPage from '@theme/EditThisPage'; -import { ThemeClassNames } from '@docusaurus/theme-common'; -import Link from '@docusaurus/Link'; - -import styles from './styles.module.css'; - -function BlogPostPage(props) { - const { content: BlogPostContents, sidebar } = props; - const { frontMatter, metadata } = BlogPostContents; - const { title, description, nextItem, prevItem, editUrl } = metadata; - const { hide_table_of_contents: hideTableOfContents } = frontMatter; - - return ( - <Layout - title={title} - description={description} - wrapperClassName={ThemeClassNames.wrapper.blogPages} - pageClassName={ThemeClassNames.page.blogPostPage}> - {BlogPostContents && ( - <div className="container margin-vert--lg"> - <div className="row"> - <aside className="col col--3"> - <nav className={styles.sidebar}> - <h3>{sidebar.title}</h3> - {sidebar.items.map((item) => { - return ( - <Link key={item.title} href={item.permalink}> - <p>{item.title}</p> - </Link> - ) - })} - </nav> - </aside> - <main className="col col--7"> - <BlogPostItem - frontMatter={frontMatter} - metadata={metadata} - isBlogPostPage> - <Link onClick={() => history.back()}> - Back All - </Link> - </BlogPostItem> - <BlogPostContents /> - <div>{editUrl && <EditThisPage editUrl={editUrl} />}</div> - {(nextItem || prevItem) && ( - <div className="margin-vert--xl"> - <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} /> - </div> - )} - </main> - {!hideTableOfContents && BlogPostContents.toc && ( - <div className="col col--2"> - <TOC toc={BlogPostContents.toc} /> - </div> - )} - </div> - </div> - )} - </Layout> - ); -} - -export default BlogPostPage; diff --git a/website/src/theme/BlogPostPage/styles.module.css b/website/src/theme/BlogPostPage/styles.module.css deleted file mode 100644 index 61d11e3..0000000 --- a/website/src/theme/BlogPostPage/styles.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.sidebar { - max-height: calc(100vh - var(--ifm-navbar-height) - 2rem); - overflow-y: auto; - position: sticky; - top: calc(var(--ifm-navbar-height) + 2rem); -} diff --git a/website/src/theme/BlogSidebar/index.js b/website/src/theme/BlogSidebar/index.js deleted file mode 100644 index c3ee76a..0000000 --- a/website/src/theme/BlogSidebar/index.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -import React, { useEffect, useState } from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import styles from './styles.module.css'; -import { useHistory } from '@docusaurus/router'; - -export default function BlogSidebar({count}) { - const [ selected, setSelected ] = useState(); - const history = useHistory(); - const path = history.location.pathname.split('/'); - - useEffect(() => { - if (path.length === 2) { - setSelected('All'); - } else if (path.length === 4) { - if (path[3].indexOf('-') !== -1) { - setSelected(path[3].replace(/-/g, ' ')); - } else { - setSelected(path[3]); - } - } else { - setSelected('All'); - } - }, [path]); - - if (!count) { - return null; - } - - const handleTagClick = (tag) => { - if (tag === "All") { - history.push(`/${path[1] || '/'}`); - } else { - if (tag.indexOf(' ') !== -1) { - tag = tag.replace(/ /g, '-'); - } - history.push(`/${path[1]}/tags/${tag}`); - } - }; - - return ( - <div className={clsx(styles.sidebar, 'thin-scrollbar')}> - <h3 className={styles.sidebarItemTitle}>Tags</h3> - <div className={styles.sidebarItemList}> - {Object.entries(count).map(([tag, num]) => ( - <div - key={tag} - className={`${styles.sidebarItem} ${selected === tag ? styles.selected : ''}`} - onClick={() => handleTagClick(tag)} - > - <div className={styles.sidebarItemLink}> - {tag} - </div> - <p>{num}</p> - </div> - ))} - </div> - </div> - ); -} diff --git a/website/src/theme/BlogSidebar/styles.module.css b/website/src/theme/BlogSidebar/styles.module.css deleted file mode 100644 index 185b090..0000000 --- a/website/src/theme/BlogSidebar/styles.module.css +++ /dev/null @@ -1,68 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -.sidebar { - display: inherit; - max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); - overflow-y: auto; - position: sticky; - top: calc(var(--ifm-navbar-height) + 2rem); -} - -.sidebarItemTitle { - margin-bottom: 0.5rem; -} - -.sidebarItemList { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - flex-wrap: wrap; -} - -.sidebarItem { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - border: 1px solid var(--ifm-color-primary-dark); - border-radius: 4px; - height: 2rem; - line-height: 2rem; - margin-bottom: 0.5rem; - margin-right: 0.5rem; - padding: 0 1rem; -} - -.selected { - background-color: var(--ifm-color-primary); - border: 1px solid var(--color-border); - color: var(--ifm-color-primary-light); -} - -.sidebarItem:hover { - background-color: var(--ifm-color-primary); - border: 1px solid var(--color-border); - color: var(--ifm-color-primary-light); - cursor: pointer; -} - -.sidebarItem p { - margin: 0 0 0 0.5rem; - line-height: 2rem; -} - -.sidebarItemLinkActive { - color: var(--ifm-color-primary); -} - -@media only screen and (max-width: 996px) { - .sidebar { - display: none; - } -} diff --git a/website/src/theme/BlogTagsPostsPage/index.js b/website/src/theme/BlogTagsPostsPage/index.js deleted file mode 100644 index 220bd49..0000000 --- a/website/src/theme/BlogTagsPostsPage/index.js +++ /dev/null @@ -1,68 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -import React, { useEffect, useState } from 'react'; -import Layout from '@theme/Layout'; -import BlogPostItem from '@theme/BlogPostItem'; -import BlogSidebar from '@theme/BlogSidebar'; -import { ThemeClassNames } from '@docusaurus/theme-common'; // Very simple pluralization: probably good enough for now - -function BlogTagsPostPage(props) { - const { metadata, items } = props; - const { name: tagName } = metadata; - const [tagsCount, setTagsCount] = useState(); - const tagsTotal = typeof window !== 'undefined' && JSON.parse(localStorage.getItem('tagsTotal')); - - useEffect(() => { - let totalTags = []; - items.forEach(item => { - const tags = item.content.frontMatter.tags; - if (tags) { - totalTags = totalTags.concat(tags); - } - }); - const tagsCount = { - All: items.length, - }; - totalTags.forEach(item => { - tagsCount[item] = (tagsCount[item] || 0) + 1; - }) - setTagsCount(tagsCount); - }, []); - - return ( - <Layout - title={`Posts tagged "${tagName}"`} - description={`Blog | Tagged "${tagName}"`} - wrapperClassName={ThemeClassNames.wrapper.blogPages} - pageClassName={ThemeClassNames.page.blogTagsPostPage} - searchMetadatas={{ - // assign unique search tag to exclude this page from search results! - tag: 'blog_tags_posts', - }}> - <div className="container margin-vert--lg"> - <div className="row"> - <div className="col col--3"> - <BlogSidebar count={tagsTotal || tagsCount} /> - </div> - <main className="col col--9"> - {items.map(({ content: BlogPostContent }) => ( - <BlogPostItem - key={BlogPostContent.metadata.permalink} - frontMatter={BlogPostContent.frontMatter} - metadata={BlogPostContent.metadata} - truncated> - <BlogPostContent /> - </BlogPostItem> - ))} - </main> - </div> - </div> - </Layout> - ); -} - -export default BlogTagsPostPage;
