Add blog section (#280)

* add blogs content

* add tags

* moved images to appropriate path

* moved images

* fix image name

* added one more blog
fixed js to pick up thumbnails
fixed image resolutions

* removed video related content in the js file

* fixed build issue - added location

* fixed image res and title res

* adding image

* rearranging files

* added one more blog

* added dates, fixed padding

* removed duration component

website/blog/announcing-onetable.mdx

@@ -0,0 +1,17 @@
+---
+title: "Announcing OneTable"
+author: Tim Brown
+category: blog
+image: images/blog/announcing-onetable/announcing-onetable.png
+tags:
+- onetable
+- interoperability
+- hudi
+- delta
+- iceberg
+date: 2023-02-02
+---
+
+import Redirect from '@site/src/components/Redirect';
+
+<Redirect url="https://www.onehouse.ai/blog/onetable-hudi-delta-iceberg">Redirecting... please wait!! </Redirect>

website/blog/onetable-now-oss.mdx

@@ -0,0 +1,17 @@
+---
+title: "OneTable is Now Open Source"
+author: Kyle Weller and Tim Brown
+category: blog
+image: images/blog/onetable-now-oss/onetable-now-oss.png
+tags:
+- onetable
+- interoperability
+- hudi
+- delta
+- iceberg
+date: 2023-11-15
+---
+
+import Redirect from '@site/src/components/Redirect';
+
+<Redirect url="https://www.onehouse.ai/blog/onetable-is-now-open-source">Redirecting... please wait!! </Redirect>

website/blog/road-to-interoperable-lakehouse.mdx

@@ -0,0 +1,17 @@
+---
+title: "The Road to an Open and Interoperable Lakehouse"
+author: Kyle Weller
+category: blog
+image: /images/blog/road-to-interoperable-lakehouse/road-to-interoperable-lakehouse.png
+tags:
+- onetable
+- interoperability
+- hudi
+- delta
+- iceberg
+date: 2023-07-10
+---
+
+import Redirect from '@site/src/components/Redirect';
+
+<Redirect url="https://www.onehouse.ai/blog/the-road-to-an-open-and-interoperable-lakehouse">Redirecting... please wait!! </Redirect>

website/docusaurus.config.js

@@ -7,7 +7,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'OneTable',
-  favicon: 'img/onetable_favicon.png',
+  favicon: 'images/onetable_favicon.png',
   url: 'https://onetable.dev',
   baseUrl: '/',
 
@@ -50,7 +50,7 @@ const config = {
           alt: 'OneTable Logo',
           href: 'pathname:///',
           target: '_self',
-          src: 'img/OneTableLogo.png',
+          src: 'images/OneTableLogo.png',
         },
         items: [
           {
@@ -64,6 +64,7 @@ const config = {
             label: 'GitHub',
             position: 'right',
           },
+          {to: 'blog', label: 'Blog', position: 'left'},
         ],
       },
       prism: {

website/src/components/Redirect.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+export default function Redirect({children, url}) {
+  const isBrowser = useIsBrowser();
+  if (isBrowser) {
+    global.window.location.href = url;
+  }
+  return (
+      <span>
+        {children}
+        or click <a href={url}>here</a>
+      </span>
+    );
+}

website/src/css/custom.css

@@ -83,4 +83,9 @@ html[data-theme='dark'] {
   --ifm-color-content: #e7e7e7;
 
   --docusaurus-highlighted-code-line-bg: rgba(105, 105, 105, 0.3);
+}
+
+.blogThumbnail {
+    padding-left: 0;
+    padding-right: 48px;
 }

website/src/theme/BlogLayout/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import BlogSidebar from '@theme/BlogSidebar';
+export default function BlogLayout(props) {
+  const {sidebar, toc, children, ...layoutProps} = props;
+  const hasSidebar = false;
+  return (
+    <Layout {...layoutProps}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <main
+            className={clsx('col row')}
+            itemScope
+            itemType="https://schema.org/Blog">
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </Layout>
+  );
+}

website/src/theme/BlogPostItem/Container/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import {useLocation} from 'react-router-dom';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+
+export default function BlogPostItemContainer({children, className}) {
+  const {
+    frontMatter,
+    assets,
+    metadata: {description, permalink},
+  } = useBlogPost();
+  const location = useLocation();
+  const {withBaseUrl} = useBaseUrlUtils();
+  const image = assets.image ?? frontMatter.image;
+  const keywords = frontMatter.keywords ?? [];
+
+  return (
+    <article
+      className={className}
+      style={{ width: "50%" }}
+      itemProp="blogPost"
+      itemScope
+      itemType="https://schema.org/BlogPosting">
+      {description && <meta itemProp="description" content={description} />}
+      {image && (
+        <div className="col blogThumbnail" itemProp="blogThumbnail">
+          {location.pathname.startsWith('/blog') ? (
+            <Link itemProp="url" to={permalink}>
+              <img
+                src={withBaseUrl(image, {
+                  absolute: true,
+                })}
+                className="blog-image"
+              />
+            </Link>
+          ) : null}
+        </div>
+      )}
+      {keywords.length > 0 && (
+        <meta itemProp="keywords" content={keywords.join(',')} />
+      )}
+      {children}
+    </article>
+  );
+}

website/src/theme/BlogPostItem/Content/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import clsx from 'clsx';
+import {blogPostContainerID} from '@docusaurus/utils-common';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import MDXContent from '@theme/MDXContent';
+export default function BlogPostItemContent({children, className}) {
+  const {isBlogPostPage} = useBlogPost();
+  return (
+    <div
+      // This ID is used for the feed generation to locate the main content
+      id={isBlogPostPage ? blogPostContainerID : undefined}
+      className={clsx('markdown', className)}
+      itemProp="articleBody">
+      {isBlogPostPage && <MDXContent>{children}</MDXContent> }
+    </div>
+  );
+}

website/src/theme/BlogPostItem/Footer/ReadMoreLink/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Translate, {translate} from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
+function ReadMoreLabel() {
+  return (
+    <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>
+  );
+}
+export default function BlogPostItemFooterReadMoreLink(props) {
+  const {blogPostTitle, ...linkProps} = props;
+  return (
+    <Link
+      aria-label={translate(
+        {
+          message: 'Read more about {title}',
+          id: 'theme.blog.post.readMoreLabel',
+          description:
+            'The ARIA label for the link to full blog posts from excerpts',
+        },
+        {title: blogPostTitle},
+      )}
+      {...linkProps}>
+      <ReadMoreLabel />
+    </Link>
+  );
+}

website/src/theme/BlogPostItem/Footer/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import EditThisPage from '@theme/EditThisPage';
+import TagsListInline from '@theme/TagsListInline';
+import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
+import styles from './styles.module.css';
+export default function BlogPostItemFooter() {
+  const {metadata, isBlogPostPage} = useBlogPost();
+  const {tags, title, editUrl, hasTruncateMarker} = metadata;
+  // A post is truncated if it's in the "list view" and it has a truncate marker
+  const truncatedPost = !isBlogPostPage && hasTruncateMarker;
+  const tagsExists = tags.length > 0;
+  const renderFooter = tagsExists || truncatedPost || editUrl;
+  if (!renderFooter) {
+    return null;
+  }
+  return (
+    <footer
+      className={clsx(
+        'row docusaurus-mt-lg',
+        isBlogPostPage && styles.blogPostFooterDetailsFull,
+      )}>
+      {tagsExists && (
+        <div className={clsx('col', {'col--9': truncatedPost})}>
+          <TagsListInline tags={tags} />
+        </div>
+      )}
+
+      {isBlogPostPage && editUrl && (
+        <div className="col margin-top--sm">
+          <EditThisPage editUrl={editUrl} />
+        </div>
+      )}
+
+      {truncatedPost && (
+        <div
+          className={clsx('col text--right', {
+            'col--3': tagsExists,
+          })}>
+          <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
+        </div>
+      )}
+    </footer>
+  );
+}

website/src/theme/BlogPostItem/Footer/styles.module.css

@@ -0,0 +1,3 @@
+.blogPostFooterDetailsFull {
+  flex-direction: column;
+}

website/src/theme/BlogPostItem/Header/Author/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+function MaybeLink(props) {
+  if (props.href) {
+    return <Link {...props} />;
+  }
+  return <>{props.children}</>;
+}
+export default function BlogPostItemHeaderAuthor({author, className}) {
+  const {name, title, url, imageURL, email} = author;
+  const link = url || (email && `mailto:${email}`) || undefined;
+  return (
+    <div className={clsx('avatar margin-bottom--sm', className)}>
+      {imageURL && (
+        <MaybeLink href={link} className="avatar__photo-link">
+          <img
+            className="avatar__photo"
+            src={imageURL}
+            alt={name}
+            itemProp="image"
+          />
+        </MaybeLink>
+      )}
+
+      {name && (
+        <div
+          className="avatar__intro"
+          itemProp="author"
+          itemScope
+          itemType="https://schema.org/Person">
+          <div className="avatar__name">
+            <MaybeLink href={link} itemProp="url">
+              <span itemProp="name">{name}</span>
+            </MaybeLink>
+          </div>
+          {title && (
+            <small className="avatar__subtitle" itemProp="description">
+              {title}
+            </small>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

website/src/theme/BlogPostItem/Header/Authors/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import BlogPostItemHeaderAuthor from '@theme/BlogPostItem/Header/Author';
+import styles from './styles.module.css';
+// Component responsible for the authors layout
+export default function BlogPostItemHeaderAuthors({className}) {
+  const {
+    metadata: {authors},
+    assets,
+  } = useBlogPost();
+  const authorsCount = authors.length;
+  if (authorsCount === 0) {
+    return null;
+  }
+  const imageOnly = authors.every(({name}) => !name);
+  return (
+    <div
+      className={clsx(
+        'margin-top--md margin-bottom--sm',
+        imageOnly ? styles.imageOnlyAuthorRow : 'row',
+        className,
+      )}>
+      {authors.map((author, idx) => (
+        <div
+          className={clsx(
+            !imageOnly && 'col col--6',
+            imageOnly ? styles.imageOnlyAuthorCol : styles.authorCol,
+          )}
+          key={idx}>
+          <BlogPostItemHeaderAuthor
+            author={{
+              ...author,
+              // Handle author images using relative paths
+              imageURL: assets.authorsImageUrls[idx] ?? author.imageURL,
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

website/src/theme/BlogPostItem/Header/Authors/styles.module.css

@@ -0,0 +1,14 @@
+.authorCol {
+  max-width: inherit !important;
+  flex-grow: 1 !important;
+}
+
+.imageOnlyAuthorRow {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.imageOnlyAuthorCol {
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
+}