This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 8ae2f48f146 refactor: blog paginators (#1241)
8ae2f48f146 is described below
commit 8ae2f48f14683f6733d0ca2930e91c22aa7c0b9f
Author: Young <[email protected]>
AuthorDate: Thu Jul 28 13:11:00 2022 +0800
refactor: blog paginators (#1241)
---
blog/src/theme/BlogListPaginator/index.tsx | 20 ++++---
blog/src/theme/BlogListPaginator/style.module.scss | 15 +++++-
blog/src/theme/BlogPostItem/index.tsx | 17 +-----
blog/src/theme/BlogPostPage/index.tsx | 32 +++---------
blog/src/theme/BlogPostPaginator/index.tsx | 61 ++++++++++++++++++++++
blog/src/theme/BlogPostPaginator/style.module.scss | 3 ++
blog/src/theme/BlogPosts/index.tsx | 2 +-
blog/src/theme/BlogPosts/style.module.scss | 24 +++++++--
8 files changed, 119 insertions(+), 55 deletions(-)
diff --git a/blog/src/theme/BlogListPaginator/index.tsx
b/blog/src/theme/BlogListPaginator/index.tsx
index 9660ae085e4..27ad00e993f 100644
--- a/blog/src/theme/BlogListPaginator/index.tsx
+++ b/blog/src/theme/BlogListPaginator/index.tsx
@@ -10,8 +10,16 @@ import Link from '@docusaurus/Link';
import Translate, { translate } from '@docusaurus/Translate';
import type { Props } from '@theme/BlogListPaginator';
import clsx from 'clsx';
+import { Icon } from '@iconify/react';
+import arrowLeft from '@iconify/icons-akar-icons/arrow-left';
+import arrowRight from '@iconify/icons-akar-icons/arrow-right';
import style from './style.module.scss';
+const iconSize = {
+ width: '1.2em',
+ height: '1.2em',
+};
+
const BlogListPaginator = (props: Props): JSX.Element => {
const { metadata } = props;
const { previousPage, nextPage } = metadata;
@@ -28,14 +36,14 @@ const BlogListPaginator = (props: Props): JSX.Element => {
<div className="pagination-nav__item">
{previousPage && (
<Link className="pagination-nav__link" to={previousPage}>
- <div className="pagination-nav__label">
- «
+ <div className={clsx('pagination-nav__label', style.alignMiddle)}>
+ <Icon icon={arrowLeft} {...iconSize} />
{' '}
<Translate
id="theme.blog.paginator.newerEntries"
description="The label used to navigate to the newer blog
posts page (previous page)"
>
- Newer Entries
+ Newer Posts
</Translate>
</div>
</Link>
@@ -44,15 +52,15 @@ const BlogListPaginator = (props: Props): JSX.Element => {
<div className="pagination-nav__item pagination-nav__item--next">
{nextPage && (
<Link className="pagination-nav__link" to={nextPage}>
- <div className="pagination-nav__label">
+ <div className={clsx('pagination-nav__label', style.alignMiddle,
style.justifyEnd)}>
<Translate
id="theme.blog.paginator.olderEntries"
description="The label used to navigate to the older blog
posts page (next page)"
>
- Older Entries
+ Older Posts
</Translate>
{' '}
- »
+ <Icon icon={arrowRight} {...iconSize} />
</div>
</Link>
)}
diff --git a/blog/src/theme/BlogListPaginator/style.module.scss
b/blog/src/theme/BlogListPaginator/style.module.scss
index a9594cb25d8..d3a404f2f6f 100644
--- a/blog/src/theme/BlogListPaginator/style.module.scss
+++ b/blog/src/theme/BlogListPaginator/style.module.scss
@@ -1,3 +1,16 @@
.nav {
- margin: 4rem 15% 0;
+ margin: 3rem 0% 4rem;
+}
+
+.alignMiddle {
+ display: flex;
+ align-items: center;
+
+ svg {
+ margin: 0 0.3rem;
+ }
+}
+
+.justifyEnd {
+ justify-content: flex-end;
}
diff --git a/blog/src/theme/BlogPostItem/index.tsx
b/blog/src/theme/BlogPostItem/index.tsx
index 2a36d454888..db99d11114b 100644
--- a/blog/src/theme/BlogPostItem/index.tsx
+++ b/blog/src/theme/BlogPostItem/index.tsx
@@ -11,7 +11,7 @@ import React from 'react';
import clsx from 'clsx';
import { MDXProvider } from '@mdx-js/react';
import MDXComponents from '@theme/MDXComponents';
-import Translate, { translate } from '@docusaurus/Translate';
+import { translate } from '@docusaurus/Translate';
import Link from '@docusaurus/Link';
import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
import { usePluralForm } from '@docusaurus/theme-common';
@@ -119,21 +119,6 @@ const BlogPostItem = (props: Props): JSX.Element => {
<EditThisPage editUrl={editUrl} />
</div>
)}
-
- {!isBlogPostPage && truncated && (
- <div className="col col--3 text--right">
- <Link to={metadata.permalink} aria-label={`Read more about
${title}`}>
- <b>
- <Translate
- id="theme.blog.post.readMore"
- description="The label used in blog post item excerpts to
link to full blog posts"
- >
- Read More
- </Translate>
- </b>
- </Link>
- </div>
- )}
</footer>
)}
</article>
diff --git a/blog/src/theme/BlogPostPage/index.tsx
b/blog/src/theme/BlogPostPage/index.tsx
index 38a397c4e43..1557f38b8cf 100644
--- a/blog/src/theme/BlogPostPage/index.tsx
+++ b/blog/src/theme/BlogPostPage/index.tsx
@@ -9,7 +9,6 @@ import React from 'react';
import Seo from '@theme/Seo';
import BlogLayout from '@theme/BlogLayout';
import BlogPostItem from '@theme-original/BlogPostItem';
-import BlogPostPaginator from '@theme-original/BlogPostPaginator';
import type { Props } from '@theme-original/BlogPostPage';
// eslint-disable-next-line import/no-extraneous-dependencies
import { ThemeClassNames } from '@docusaurus/theme-common';
@@ -19,6 +18,7 @@ import Image from 'rc-image';
// eslint-disable-next-line import/no-extraneous-dependencies
import { MDXProvider } from '@mdx-js/react';
import { LazyLoadComponent } from 'react-lazy-load-image-component';
+import BlogPostPaginator from '../BlogPostPaginator';
const components = {
...MDXComponents,
@@ -33,13 +33,7 @@ const BlogPostPage = (props: Props): JSX.Element => {
const { content: BlogPostContents, sidebar } = props;
const { frontMatter, assets, metadata } = BlogPostContents;
const {
- title,
- description,
- nextItem,
- prevItem,
- date,
- tags,
- authors,
+ title, description, nextItem, prevItem, date, tags, authors,
} = metadata;
const { hide_table_of_contents: hideTableOfContents, keywords } =
frontMatter;
@@ -50,11 +44,7 @@ const BlogPostPage = (props: Props): JSX.Element => {
wrapperClassName={ThemeClassNames.wrapper.blogPages}
pageClassName={ThemeClassNames.page.blogPostPage}
sidebar={sidebar}
- toc={
- !hideTableOfContents && BlogPostContents.toc
- ? BlogPostContents.toc
- : undefined
- }
+ toc={!hideTableOfContents && BlogPostContents.toc ? BlogPostContents.toc
: undefined}
frontMatter={frontMatter}
metadata={metadata}
>
@@ -80,27 +70,17 @@ const BlogPostPage = (props: Props): JSX.Element => {
/>
)}
{tags.length > 0 && (
- <meta
- property="article:tag"
- content={tags.map((tag) => tag.label).join(',')}
- />
+ <meta property="article:tag" content={tags.map((tag) =>
tag.label).join(',')} />
)}
</Seo>
- <BlogPostItem
- frontMatter={frontMatter}
- assets={assets}
- metadata={metadata}
- isBlogPostPage
- >
+ <BlogPostItem frontMatter={frontMatter} assets={assets}
metadata={metadata} isBlogPostPage>
<MDXProvider components={components}>
<BlogPostContents />
</MDXProvider>
</BlogPostItem>
- {(nextItem || prevItem) && (
- <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
- )}
+ {(nextItem || prevItem) && <BlogPostPaginator nextItem={nextItem}
prevItem={prevItem} />}
</BlogLayout>
);
};
diff --git a/blog/src/theme/BlogPostPaginator/index.tsx
b/blog/src/theme/BlogPostPaginator/index.tsx
new file mode 100644
index 00000000000..47aa600586e
--- /dev/null
+++ b/blog/src/theme/BlogPostPaginator/index.tsx
@@ -0,0 +1,61 @@
+/**
+ * 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 Translate, { translate } from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
+import type { Props } from '@theme/BlogPostPaginator';
+import clsx from 'clsx';
+import style from './style.module.scss';
+
+const BlogPostPaginator = (props: Props): JSX.Element => {
+ const { nextItem, prevItem } = props;
+
+ return (
+ <nav
+ className="pagination-nav docusaurus-mt-lg"
+ aria-label={translate({
+ id: 'theme.blog.post.paginator.navAriaLabel',
+ message: 'Blog post page navigation',
+ description: 'The ARIA label for the blog posts pagination',
+ })}
+ >
+ <div className="pagination-nav__item">
+ {prevItem && (
+ <Link className="pagination-nav__link" to={prevItem.permalink}>
+ <div className={clsx('pagination-nav__sublabel', style.sublabel)}>
+ <Translate
+ id="theme.blog.post.paginator.newerPost"
+ description="The blog post button label to navigate to the
newer/previous post"
+ >
+ Newer Post
+ </Translate>
+ </div>
+ <div className="pagination-nav__label">{prevItem.title}</div>
+ </Link>
+ )}
+ </div>
+ <div className="pagination-nav__item pagination-nav__item--next">
+ {nextItem && (
+ <Link className="pagination-nav__link" to={nextItem.permalink}>
+ <div className={clsx('pagination-nav__sublabel', style.sublabel)}>
+ <Translate
+ id="theme.blog.post.paginator.olderPost"
+ description="The blog post button label to navigate to the
older/next post"
+ >
+ Older Post
+ </Translate>
+ </div>
+ <div className="pagination-nav__label">{nextItem.title}</div>
+ </Link>
+ )}
+ </div>
+ </nav>
+ );
+};
+
+export default BlogPostPaginator;
diff --git a/blog/src/theme/BlogPostPaginator/style.module.scss
b/blog/src/theme/BlogPostPaginator/style.module.scss
new file mode 100644
index 00000000000..2b3089253e5
--- /dev/null
+++ b/blog/src/theme/BlogPostPaginator/style.module.scss
@@ -0,0 +1,3 @@
+.sublabel {
+ color: hsl(0deg 0% 50%);
+}
diff --git a/blog/src/theme/BlogPosts/index.tsx
b/blog/src/theme/BlogPosts/index.tsx
index 3dd980a29b7..c95e947a0b1 100644
--- a/blog/src/theme/BlogPosts/index.tsx
+++ b/blog/src/theme/BlogPosts/index.tsx
@@ -108,7 +108,7 @@ const BlogPostItem: FC<BlogPostItemProps> = (props) => {
{authors.length > 0 && (
<>
<div className={style.authors}>
- {authors.reverse().map((author) => (author.imageURL ? (
+ {authors.map((author) => (author.imageURL ? (
<LazyLoadImage
className={style.author}
key={author.name}
diff --git a/blog/src/theme/BlogPosts/style.module.scss
b/blog/src/theme/BlogPosts/style.module.scss
index 5eee636f8fd..1472310c77c 100644
--- a/blog/src/theme/BlogPosts/style.module.scss
+++ b/blog/src/theme/BlogPosts/style.module.scss
@@ -85,17 +85,28 @@ main.normalPage {
& .authors {
display: flex;
- flex-direction: row-reverse;
- & .author,
- & > span {
+ & .author {
width: 32px;
height: 32px;
border-radius: 50%;
+ }
+
+ & > .author,
+ & > span {
margin-left: -1rem;
- &:last-child {
+ &:first-child {
margin-left: 0;
+ z-index: 3;
+ }
+
+ &:nth-child(2) {
+ z-index: 2;
+ }
+
+ &:nth-child(3) {
+ z-index: 1;
}
}
}
@@ -107,7 +118,10 @@ main.normalPage {
&:hover {
border-color: var(--ifm-color-primary);
- transform: translateY(-20px);
+
+ @include respond-above(sm) {
+ transform: translateY(-20px);
+ }
& > a {
img {
