This is an automated email from the ASF dual-hosted git repository.
yihua 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 b5df8d0 [DOCS] Redesigned the blog page with grid layout (#5006)
b5df8d0 is described below
commit b5df8d0932986148dee6005e74177201378dbe34
Author: Vinoth Govindarajan <vino...@uber.com>
AuthorDate: Wed Mar 16 11:44:12 2022 -0700
[DOCS] Redesigned the blog page with grid layout (#5006)
---
.../blog/2021-08-18-improving-marker-mechanism.md | 1 +
website/blog/2021-08-23-s3-events-source.md | 1 +
...g-eb-level-data-lake-using-hudi-at-bytedance.md | 1 +
...se-concurrency-control-are-we-too-optimistic.md | 1 +
...2022-01-06-apache-hudi-2021-a-year-in-review.md | 1 +
...e-data-capture-with-debezium-and-apache-hudi.md | 1 +
website/docusaurus.config.js | 6 +-
website/src/css/custom.css | 23 ++++
website/src/theme/BlogLayout/index.js | 40 ++++++
website/src/theme/BlogPostItem/index.js | 149 +++++++++++++++++++++
website/src/theme/BlogPostItem/styles.module.css | 22 +++
11 files changed, 243 insertions(+), 3 deletions(-)
diff --git a/website/blog/2021-08-18-improving-marker-mechanism.md
b/website/blog/2021-08-18-improving-marker-mechanism.md
index d5fad9f..3f81269 100644
--- a/website/blog/2021-08-18-improving-marker-mechanism.md
+++ b/website/blog/2021-08-18-improving-marker-mechanism.md
@@ -3,6 +3,7 @@ title: "Improving Marker Mechanism in Apache Hudi"
excerpt: "We introduce a new marker mechanism leveraging the timeline server
to address performance bottlenecks due to rate-limiting on cloud storage like
AWS S3."
author: yihua
category: blog
+image:
/assets/images/blog/marker-mechanism/timeline-server-based-marker-mechanism.png
---
Hudi supports fully automatic cleanup of uncommitted data on storage during
its write operations. Write operations in an Apache Hudi table use markers to
efficiently track the data files written to storage. In this blog, we dive into
the design of the existing direct marker file mechanism and explain its
performance problems on cloud storage like AWS S3 for
diff --git a/website/blog/2021-08-23-s3-events-source.md
b/website/blog/2021-08-23-s3-events-source.md
index 85af044..e48b89c 100644
--- a/website/blog/2021-08-23-s3-events-source.md
+++ b/website/blog/2021-08-23-s3-events-source.md
@@ -3,6 +3,7 @@ title: "Reliable ingestion from AWS S3 using Hudi"
excerpt: "From listing to log-based approach, a reliable way of ingesting data
from AWS S3 into Hudi."
author: codope
category: blog
+image: /assets/images/blog/s3_events_source_design.png
---
In this post we will talk about a new deltastreamer source which reliably and
efficiently processes new data files as they arrive in AWS S3.
diff --git
a/website/blog/2021-09-01-building-eb-level-data-lake-using-hudi-at-bytedance.md
b/website/blog/2021-09-01-building-eb-level-data-lake-using-hudi-at-bytedance.md
index d3016f7..51c6a41 100644
---
a/website/blog/2021-09-01-building-eb-level-data-lake-using-hudi-at-bytedance.md
+++
b/website/blog/2021-09-01-building-eb-level-data-lake-using-hudi-at-bytedance.md
@@ -3,6 +3,7 @@ title: "Building an ExaByte-level Data Lake Using Apache Hudi
at ByteDance"
excerpt: "Ziyue Guan from Bytedance shares the production experience of
building an ExaByte-level data lake using Apache Hudi and how it is used in the
recommendation system at Bytedance."
author: Ziyue Guan, translated to English by yihua
category: blog
+image: /assets/images/blog/datalake-bytedance-hudi/slide1.png
---
Ziyue Guan from Bytedance shares the experience of building an
ExaByte(EB)-level data lake using Apache Hudi at Bytedance.
diff --git
a/website/blog/2021-12-16-lakehouse-concurrency-control-are-we-too-optimistic.md
b/website/blog/2021-12-16-lakehouse-concurrency-control-are-we-too-optimistic.md
index 5dd20ca..f45ace9 100644
---
a/website/blog/2021-12-16-lakehouse-concurrency-control-are-we-too-optimistic.md
+++
b/website/blog/2021-12-16-lakehouse-concurrency-control-are-we-too-optimistic.md
@@ -3,6 +3,7 @@ title: "Lakehouse Concurrency Control: Are we too optimistic?"
excerpt: "Vinoth Chandar, Creator of Apache Hudi, dives into concurrency
control mechanisms"
author: vinoth
category: blog
+image: /assets/images/blog/concurrency/MultiWriter.gif
---
Transactions on data lakes are now considered a key characteristic of a
Lakehouse these days. But what has actually been accomplished so far? What are
the current approaches? How do they fare in real-world scenarios? These
questions are the focus of this blog.
diff --git a/website/blog/2022-01-06-apache-hudi-2021-a-year-in-review.md
b/website/blog/2022-01-06-apache-hudi-2021-a-year-in-review.md
index da65662..7286aea 100644
--- a/website/blog/2022-01-06-apache-hudi-2021-a-year-in-review.md
+++ b/website/blog/2022-01-06-apache-hudi-2021-a-year-in-review.md
@@ -3,6 +3,7 @@ title: "Apache Hudi - 2021 a Year in Review"
excerpt: "A reflection on the growth and momentum of Apache Hudi in 2021"
author: vinoth
category: blog
+image: /assets/images/Hudi_community.png
---
As the year came to end, I took some time to reflect on where we are and what
we accomplished in 2021. I am humbled by how strong our community is and how
regardless of it being another tough pandemic year, that people from around the
globe leaned in together and made this the best year yet for Apache Hudi. In
this blog I want to recap some of the 2021 highlights.
diff --git
a/website/blog/2022-01-14-change-data-capture-with-debezium-and-apache-hudi.md
b/website/blog/2022-01-14-change-data-capture-with-debezium-and-apache-hudi.md
index 01373db..fc87dc0 100644
---
a/website/blog/2022-01-14-change-data-capture-with-debezium-and-apache-hudi.md
+++
b/website/blog/2022-01-14-change-data-capture-with-debezium-and-apache-hudi.md
@@ -3,6 +3,7 @@ title: "Change Data Capture with Debezium and Apache Hudi"
excerpt: "A review of new Debezium source connector for Apache Hudi"
author: Rajesh Mahindra
category: blog
+image: /assets/images/blog/debezium.png
---
As of Hudi v0.10.0, we are excited to announce the availability of
[Debezium](https://debezium.io/) sources for
[Deltastreamer](https://hudi.apache.org/docs/hoodie_deltastreamer) that provide
the ingestion of change capture data (CDC) from Postgres and Mysql databases to
your data lake. For more details, please refer to the original
[RFC](https://github.com/apache/hudi/blob/master/rfc/rfc-39/rfc-39.md).
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index e8c3e8a..66ccad4 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -432,8 +432,8 @@ module.exports = {
blog: {
editUrl:
'https://github.com/apache/hudi/edit/asf-site/website/blog/',
- blogTitle: 'Blog - Apache Hudi: Blogs',
- blogSidebarCount: 15,
+ blogTitle: 'Blogs List Page',
+ blogSidebarCount: 0,
blogSidebarTitle: 'Recent posts',
/**
* URL route for the blog section of your site.
@@ -441,7 +441,7 @@ module.exports = {
*/
routeBasePath: 'blog',
include: ['*.md', '*.mdx'],
- postsPerPage: 15,
+ postsPerPage: 12,
/**
* Theme components used by the blog pages.
*/
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 7fcdd0f..b48c1b2 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -170,3 +170,26 @@ footer .container {
max-width: var(--ifm-col-width);
flex: 0 0 var(--ifm-col-width);
}
+
+.blogThumbnail img {
+ height: auto;
+ width: 100%
+}
+
+.blog-list-page article {
+ display: inline-flex;
+ width: 28%;
+ margin: 1.2em;
+}
+
+@media only screen and (max-width: 767px) {
+ .blog-list-page article {
+ display: flex;
+ width: 100%;
+ margin: 1.2em;
+ }
+}
+
+.blog-post-page .blogPostTitle_src-theme-BlogPostItem-styles-module {
+ font-size: 3rem;
+}
diff --git a/website/src/theme/BlogLayout/index.js
b/website/src/theme/BlogLayout/index.js
new file mode 100644
index 0000000..2bac333
--- /dev/null
+++ b/website/src/theme/BlogLayout/index.js
@@ -0,0 +1,40 @@
+/**
+ * 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 Layout from '@theme/Layout';
+import BlogSidebar from '@theme/BlogSidebar';
+
+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">
+ {hasSidebar && (
+ <aside className="col col--3">
+ <BlogSidebar sidebar={sidebar} />
+ </aside>
+ )}
+ <main
+ className={clsx('col', {
+ 'col--7': hasSidebar,
+ 'col--9 col--offset-2': !hasSidebar,
+ })}
+ itemScope
+ itemType="http://schema.org/Blog";>
+ {children}
+ </main>
+ {toc && <div className="col col--2">{toc}</div>}
+ </div>
+ </div>
+ </Layout>
+ );
+}
+
+export default BlogLayout;
diff --git a/website/src/theme/BlogPostItem/index.js
b/website/src/theme/BlogPostItem/index.js
new file mode 100644
index 0000000..7630979
--- /dev/null
+++ b/website/src/theme/BlogPostItem/index.js
@@ -0,0 +1,149 @@
+/**
+ * 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, {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
+
+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/logo-big.png';
+ const truncatedPost = !isBlogPostPage && truncated;
+ const tagsExists = tags.length > 0;
+
+ 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 ? (
+ title
+ ) : (
+ <Link itemProp="url" to={permalink}>
+ {title}
+ </Link>
+ )}
+ </TitleHeading>
+ <div className={clsx(styles.blogPostData, 'margin-vert--md')}>
+ <time dateTime={date} itemProp="datePublished">
+ {formattedDate}
+ </time>
+
+ {typeof readingTime !== 'undefined' && (
+ <>
+ {' ยท '}
+ {readingTimePlural(readingTime)}
+ </>
+ )}
+ </div>
+ {isBlogPostPage && (
+ <BlogPostAuthors authors={authors} assets={assets} />
+ )}
+ </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,
+ })}>
+ {tagsExists && (
+ <div
+ className={clsx('col', {
+ 'col--9': truncatedPost,
+ })}>
+ <TagsListInline tags={tags} />
+ </div>
+ )}
+
+ {isBlogPostPage && editUrl && (
+ <div className="col margin-top--sm">
+ <EditThisPage editUrl={editUrl} />
+ </div>
+ )}
+ </footer>
+ )}
+ </article>
+ );
+}
+
+export default BlogPostItem;
diff --git a/website/src/theme/BlogPostItem/styles.module.css
b/website/src/theme/BlogPostItem/styles.module.css
new file mode 100644
index 0000000..be04a4d
--- /dev/null
+++ b/website/src/theme/BlogPostItem/styles.module.css
@@ -0,0 +1,22 @@
+/**
+ * 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: 1rem;
+}
+
+.blogPostData {
+ font-size: 0.9rem;
+}
+
+.blogPostDetailsFull {
+ flex-direction: column;
+}
+
+.blog-list-page .container .row {
+ width: max-content;
+}
