You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@hudi.apache.org by bh...@apache.org on 2022/09/15 15:05:21 UTC
[hudi] branch asf-site updated: [DOCS] fix site tags various style issues (#6654)
This is an automated email from the ASF dual-hosted git repository.
bhavanisudha pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/hudi.git
The following commit(s) were added to refs/heads/asf-site by this push:
new af54b82e97 [DOCS] fix site tags various style issues (#6654)
af54b82e97 is described below
commit af54b82e97ea31b4c60c2ca7cc55235ff470ccc2
Author: pintusoliya <37...@users.noreply.github.com>
AuthorDate: Thu Sep 15 20:35:13 2022 +0530
[DOCS] fix site tags various style issues (#6654)
* fix: site tags various style issues
* fix: increase author and date font size
* fix: format of date author and reading time
* fix: tags blogs for tag list page
* fix: tags issue for crash and list page style issues
* chore: removed console
* chore: removed console
---
website/src/css/custom.css | 34 +-
website/src/theme/BlogLayout/index.js | 5 +
website/src/theme/BlogPostItem/index.js | 463 +++++++++++------------
website/src/theme/BlogPostItem/styles.module.css | 57 ++-
4 files changed, 294 insertions(+), 265 deletions(-)
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 2d9bd50881..87b508c719 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -207,35 +207,42 @@ footer .container {
}
.blogThumbnail {
- height: 180px;
overflow: hidden;
margin-bottom: 10px;
+ position: relative;
+ padding: 50% 0 0 0!important;
}
-.blogThumbnail img {
+.blogThumbnail .blog-image {
+ position: absolute;
+ top: 0;
+ left: 0;
height:100%;
- width: auto;
+ width: 100%;
+ object-fit: cover;
}
+
.tagRegular_node_modules-\@docusaurus-theme-classic-lib-next-theme-Tag-styles-module{
- color:black
+ color:black;
+ width: max-content;
}
.authorTimeTags_src-theme-BlogPostItem-styles-module {
vertical-align:text-top;
}
+.pagination-nav {
+ width: 100%;
+}
-.blog-list-page article {
+.blog-list-page article, .blog-tags-post-list-page article {
display: inline-flex;
width: 45%;
-
margin: 1.2em;
vertical-align: text-top;
-
-
-
}
+
@media(max-width:1391px){
- .blog-list-page article {
+ .blog-list-page article, .blog-tags-post-list-page article {
display: inline-flex;
width: 80%;
margin: 1.2em;
@@ -245,7 +252,7 @@ footer .container {
@media only screen and (max-width: 815px) {
- .blog-list-page article {
+ .blog-list-page article, .blog-tags-post-list-page article {
display: flex;
width: 100%;
margin: 1.2em;
@@ -268,6 +275,7 @@ h1.blogPostTitle_src-theme-BlogPostItem-styles-module{
overflow:hidden;
}
-
-
+.tags-post-list > :first-child {
+ width: 100%;
+}
diff --git a/website/src/theme/BlogLayout/index.js b/website/src/theme/BlogLayout/index.js
index 2bac333880..2fdabdeca0 100644
--- a/website/src/theme/BlogLayout/index.js
+++ b/website/src/theme/BlogLayout/index.js
@@ -12,6 +12,9 @@ import BlogSidebar from '@theme/BlogSidebar';
function BlogLayout(props) {
const {sidebar, toc, children, ...layoutProps} = props;
const hasSidebar = sidebar && sidebar.items.length > 0;
+ const isBlogListPage = props.pageClassName === "blog-list-page";
+ const isTagsPostList = props.pageClassName === "blog-tags-post-list-page";
+
return (
<Layout {...layoutProps}>
<div className="container margin-vert--lg">
@@ -25,6 +28,8 @@ function BlogLayout(props) {
className={clsx('col', {
'col--7': hasSidebar,
'col--9 col--offset-2': !hasSidebar,
+ 'row': isBlogListPage || isTagsPostList,
+ 'tags-post-list': isTagsPostList
})}
itemScope
itemType="http://schema.org/Blog">
diff --git a/website/src/theme/BlogPostItem/index.js b/website/src/theme/BlogPostItem/index.js
index 92215d06bf..cb7aa6347c 100644
--- a/website/src/theme/BlogPostItem/index.js
+++ b/website/src/theme/BlogPostItem/index.js
@@ -4,242 +4,233 @@
* 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, {translate} from '@docusaurus/Translate';
- import Link from '@docusaurus/Link';
- import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
- import {usePluralForm} from '@docusaurus/theme-common';
- import MDXComponents from '@theme/MDXComponents';
- import EditThisPage from '@theme/EditThisPage';
- import styles from './styles.module.css';
- import TagsListInline from '@theme/TagsListInline';
- import BlogPostAuthors from '@theme/BlogPostAuthors'; // Very simple pluralization: probably good enough for now
- import Tag from '@theme/Tag';
-
- 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 {withBaseUrl} = useBaseUrlUtils();
- const {
- children,
- frontMatter,
- assets,
- metadata,
- truncated,
- isBlogPostPage = false,
- } = props;
- const {
- date,
- formattedDate,
- permalink,
- tags,
- readingTime,
- title,
- editUrl,
- authors,
- } = metadata;
- const image = assets.image ?? frontMatter.image ?? '/assets/images/hudi.png';
- const truncatedPost = !isBlogPostPage && truncated;
- const tagsExists = tags.length > 0;
-
- const tagsList = () => {
- return (
- <>
- <ul className={clsx(styles.tags, styles.authorTimeTags, 'padding--none', 'margin-left--sm')}>
-
- {tags.map(({label, permalink: tagPermalink}) => (
- <li key={tagPermalink} className={styles.tag}>
- <Tag className={clsx(styles.greyLink)} name={label} permalink={tagPermalink} />
- </li>
- ))}
- </ul>
- </>
- );
+import React from 'react';
+import clsx from 'clsx';
+import {MDXProvider} from '@mdx-js/react';
+import Translate, {translate} from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import {usePluralForm} from '@docusaurus/theme-common';
+import MDXComponents from '@theme/MDXComponents';
+import EditThisPage from '@theme/EditThisPage';
+import styles from './styles.module.css';
+import TagsListInline from '@theme/TagsListInline';
+import BlogPostAuthors from '@theme/BlogPostAuthors'; // Very simple pluralization: probably good enough for now
+import Tag from '@theme/Tag';
+
+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,
+ },
+ ),
+ );
+ };
}
-const AuthorsList = () => {
-
-const authorsCount = authors.length;
- if (authorsCount === 0) {
- return (
- <div className={clsx(styles.authorTimeTags, "row margin-top--sm margin-bottom--sm 'margin-vert--md'")}>
- <time dateTime={date} itemProp="datePublished">
- {formattedDate}
- </time>
- </div>
- )
-
- }
-
- return (
- <>
- {isBlogPostPage ? <div className={clsx(styles.blogPostText, "row margin-top--sm margin-bottom--sm 'margin-vert--md'")}>
- <time dateTime={date} itemProp="datePublished">
- {formattedDate}
- </time>
-
- {authors.map((author, idx) => (
-
- <div key={idx}>
- <div className="avatar margin-bottom--sm">
-
- {author.name && (
- <div>
- <>
- {idx!== 0 ? idx!== authors.length - 1 ? ',' : 'and':''}</>
- <Link href={author.url} itemProp="url">
-
- <span className={clsx(styles.blogPostAuthorsList)} itemProp="name">{author.name}</span>
- </Link>
-
- </div>
- )
- }
- </div>
- </div>
- ))}
-
- </div> : <div className={clsx(styles.authorTimeTags, "row margin-top--sm margin-bottom--sm 'margin-vert--md'")}>
- <time dateTime={date} itemProp="datePublished">
- {formattedDate} by
- </time>
-
- {authors.map((author, idx) => (
-
- <div key={idx}>
- <div className="avatar margin-bottom--sm">
-
- {author.name && (
- <div>
- <>
- {idx!== 0 ? idx!== authors.length - 1 ? ',' : 'and': '' }</>
- <Link href={author.url} itemProp="url">
-
- <span className={clsx(styles.authorsList)} itemProp="name">{author.name}</span>
- </Link>
-
- </div>
- )
- }
- </div>
- </div>
- ))}
-
- </div>}
-
- </>
+
+function BlogPostItem(props) {
+ const readingTimePlural = useReadingTimePlural();
+ const { withBaseUrl } = useBaseUrlUtils();
+
+ const {
+ children,
+ frontMatter,
+ assets,
+ metadata,
+ truncated,
+ isBlogPostPage = false,
+ } = props;
+
+ const {
+ date,
+ formattedDate,
+ permalink,
+ tags,
+ readingTime,
+ title,
+ editUrl,
+ authors,
+ } = metadata;
+ const image = assets.image ?? frontMatter.image ?? '/assets/images/hudi.png';
+ const tagsExists = tags.length > 0;
+
+ const tagsList = () => {
+ return (
+ <>
+ <ul className={clsx(styles.tags, styles.authorTimeTags, 'padding--none', 'margin-left--sm', {[styles.tagsWrapperPostPage]: isBlogPostPage})}>
+
+ {tags.map(({label, permalink: tagPermalink}) => (
+ <li key={tagPermalink} className={clsx(styles.tag, {[styles.tagPostPage]: isBlogPostPage})}>
+ <Tag className={clsx(styles.greyLink)} name={label} permalink={tagPermalink}/>
+ </li>
+ ))}
+ </ul>
+ </>
+ );
+ }
+ const AuthorsList = () => {
+
+ const authorsCount = authors.length;
+ if (authorsCount === 0) {
+ return (
+ <div className={clsx(styles.authorTimeTags, "row 'margin-vert--md'")}>
+ <time dateTime={date} itemProp="datePublished">
+ {formattedDate}
+ </time>
+ </div>
+ )
+
+ }
+
+ return (
+ <>
+ {isBlogPostPage ? <div className={clsx(styles.blogPostText, "row")}>
+ <time dateTime={date} itemProp="datePublished">
+ {formattedDate}
+ </time>
+
+ {authors.map((author, idx) => (
+
+ <div key={idx}>
+ <div className="avatar">
+ {author.name && (
+ <div>
+ <>
+ {idx !== 0 ? idx !== authors.length - 1 ? ',' : 'and' : ''}</>
+ <Link href={author.url} itemProp="url">
+ <span className={clsx(styles.blogPostAuthorsList)}
+ itemProp="name">{author.name}</span>
+ </Link>
+ </div>
+ )
+ }
+ </div>
+ </div>
+ ))}
+
+ </div> : <div
+ className={clsx(styles.authorTimeTags, "row 'margin-vert--md'")}>
+ <time dateTime={date} itemProp="datePublished">
+ {formattedDate} by
+ </time>
+
+ {authors.map((author, idx) => (
+
+ <div key={idx}>
+ <div className="avatar">
+
+ {author.name && (
+ <div>
+ <>
+ {idx !== 0 ? idx !== authors.length - 1 ? ',' : 'and' : ''}</>
+ <Link href={author.url} itemProp="url">
+
+ <span className={clsx(styles.authorsList)}
+ itemProp="name">{author.name}</span>
+ </Link>
+
+ </div>
+ )
+ }
+ </div>
+ </div>
+ ))}
+
+ </div>}
+
+ </>
+ );
+ }
+
+ const renderPostHeader = () => {
+ const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
+ return (
+ <header className={styles.postHeader}>
+ <div>
+ {!isBlogPostPage && image && (
+ <div className="col blogThumbnail" itemProp="blogThumbnail">
+ <Link itemProp="url" to={permalink}>
+ <img
+ src={withBaseUrl(image, {
+ absolute: true,
+ })}
+ className="blog-image"
+ />
+ </Link>
+ </div>
+ )}
+ <TitleHeading className={styles.blogPostTitle} itemProp="headline">
+ {isBlogPostPage ? (
+ <TitleHeading className={styles.blogPostPageTitle} itemProp="headline">
+ {title}
+ </TitleHeading>
+ ) : (
+ <Link itemProp="url" to={permalink}>
+ <TitleHeading className={styles.blogPostTitle} itemProp="headline">
+ {title}
+ </TitleHeading>
+ </Link>
+
+ )}
+ </TitleHeading>
+ <div className={clsx(styles.blogInfo, "margin-top--sm margin-bottom--sm")}>
+ {AuthorsList()}
+ {isBlogPostPage && readingTime && <div className={clsx(styles.blogPostData, { [styles.blogpostReadingTime]: !isBlogPostPage })}>
+ <>
+ {typeof readingTime !== 'undefined' && (
+ <>
+ {readingTimePlural(readingTime)}
+ </>
+ )}
+ </>
+ </div>
+ }
+ </div>
+ </div>
+ {!!tags.length && (
+ tagsList()
+ )}
+ </header>
+ );
+ };
+
+ return (
+ <article
+ className={clsx({"blog-list-item": !isBlogPostPage})}
+ itemProp="blogPost"
+ itemScope
+ itemType="http://schema.org/BlogPosting">
+ {renderPostHeader()}
+
+ {isBlogPostPage && (
+ <div className="markdown" itemProp="articleBody">
+ <MDXProvider components={MDXComponents}>{children}</MDXProvider>
+ </div>
+ )}
+
+ {(tagsExists || truncated) && isBlogPostPage && editUrl && (
+ <footer
+ className={clsx('row docusaurus-mt-lg', {
+ [styles.blogPostDetailsFull]: isBlogPostPage,
+ })}>
+ <div className="col margin-top--sm">
+ <EditThisPage editUrl={editUrl}/>
+ </div>
+ </footer>
+ )}
+ </article>
);
}
-
-
- const renderPostHeader = () => {
- const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
- return (
- <header>
- {!isBlogPostPage && image && (
- <div className="col blogThumbnail" itemProp="blogThumbnail">
- <Link itemProp="url" to={permalink}>
- <img
- src={withBaseUrl(image, {
- absolute: true,
- })}
- />
- </Link>
- </div>
- )}
-
- <TitleHeading className={styles.blogPostTitle} itemProp="headline">
- {isBlogPostPage ? (
- <TitleHeading className={styles.blogPostPageTitle} itemProp="headline">
- {title}
- </TitleHeading>
- ) : (
- <Link itemProp="url" to={permalink}>
- <TitleHeading className={styles.blogPostTitle} itemProp="headline">
- {title}
- </TitleHeading>
- </Link>
-
- )}
- </TitleHeading>
-
- {AuthorsList()}
- <div className={clsx(styles.blogPostData, 'margin-vert--md')}>
-
- {isBlogPostPage && <>
- {typeof readingTime !== 'undefined' && (
- <>
- {readingTimePlural(readingTime)}
- </>
- )}</>}
- </div>
-
-
-
-
- {( tags.length > 0)&&(
- tagsList()
-
- )}
-
- </header>
- );
- };
-
- return (
-
- <article
- className={!isBlogPostPage ? 'blog-list-item' : undefined}
- itemProp="blogPost"
- itemScope
- itemType="http://schema.org/BlogPosting">
- {renderPostHeader()}
-
-
- {isBlogPostPage && (
- <div className="markdown" itemProp="articleBody">
- <MDXProvider components={MDXComponents}>{children}</MDXProvider>
- </div>
- )}
-
- {(tagsExists || truncated) && (
- <footer
- className={clsx('row docusaurus-mt-lg', {
- [styles.blogPostDetailsFull]: isBlogPostPage,
- })}>
-
-
- {isBlogPostPage && editUrl && (
- <div className="col margin-top--sm">
- <EditThisPage editUrl={editUrl} />
- </div>
- )}
- </footer>
- )}
- </article>
- );
- }
-
- export default BlogPostItem;
-
\ No newline at end of file
+
+export default BlogPostItem;
diff --git a/website/src/theme/BlogPostItem/styles.module.css b/website/src/theme/BlogPostItem/styles.module.css
index 1795d737a9..10f0a9749a 100644
--- a/website/src/theme/BlogPostItem/styles.module.css
+++ b/website/src/theme/BlogPostItem/styles.module.css
@@ -5,20 +5,32 @@
* LICENSE file in the root directory of this source tree.
*/
- .blogPostTitle {
+.blogPostTitle {
font-size: 1rem;
-
}
+
+.blogPostPageTitle {
+ margin-bottom: 0;
+}
+
.blogPostPageTile{
font-size:3rem;
display: inline-flex;
-
}
.blogPostData {
font-size: 1.1rem;
margin-top: 0 !important;
- margin-left:1px
+ display: list-item;
+ margin-left: 20px;
+}
+
+.blogpostReadingTime {
+ font-size: 0.875rem;
+}
+
+.tagsWrapperPostPage {
+ margin: 10px 0 10px calc(0.5rem + 2px) !important;
}
.blogPostDetailsFull {
@@ -30,7 +42,7 @@
}
.authorsList {
- font-size:0.9rem;
+ font-size: 0.875rem;
white-space: nowrap;
text-align:justify;
color: rgb(28, 30, 33);
@@ -65,37 +77,45 @@
}
.authorTimeTags {
- font-size: 0.9rem;
+ font-size: 0.875rem;
color: rgb(28, 30, 33);
display:flex;
flex-direction: row;
vertical-align:text-top;
margin-left:2px;
-
-
-
-
- }
+ flex-wrap: wrap;
+}
.tag {
- margin: 0 20px 0px -10px;
+ margin: -5px 20px 10px -10px;
display: inline-flex;
- margin-top:-5px;
- height:35px !important;
vertical-align:bottom;
}
+.tagPostPage {
+ margin: -5px 20px 0 -10px;
+}
+
+.tag a {
+ padding: 2px 5px;
+}
+
h4{
margin-right:20px;
margin-left:-8px;
}
+.postHeader {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+}
.greyLink {
color: rgb(28, 30, 33);
text-decoration-color: rgb(28, 30, 33);
-
}
.blogPostText{
@@ -103,10 +123,15 @@ h4{
color: rgb(28, 30, 33);
display:flex;
flex-direction: row;
-
margin-left:2px;
}
+.blogInfo {
+ display: flex;
+ flex-wrap: wrap;
+ column-gap: 20px;
+}
+
.blogPostAuthorsList{
font-size:1.1rem;
white-space: nowrap;