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 <37680791+pintusol...@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;