Add blog sections and components

content/blog/2019-05-28-first-blog-post.md

@@ -6,6 +6,7 @@ authors:
   title: Docusaurus Core Team
   url: https://github.com/wgao19
   image_url: https://github.com/wgao19.png
+image: https://docusaurus.io/img/docusaurus-social-card.jpg
 tags: [hola, docusaurus]
 ---
 

content/blog/2019-05-29-long-blog-post.md

@@ -2,6 +2,7 @@
 slug: long-blog-post
 title: Long Blog Post
 authors: endi
+image: https://repository-images.githubusercontent.com/94911145/de889380-2905-11eb-9e9b-9332f0537e38
 tags: [hello, docusaurus]
 ---
 

content/blog/2021-08-01-mdx-blog-post.mdx

@@ -2,6 +2,7 @@
 slug: mdx-blog-post
 title: MDX Blog Post
 authors: [slorber]
+image: https://docusaurus.io/img/docusaurus-social-card.jpg
 tags: [docusaurus]
 ---
 

content/blog/2021-08-26-welcome/index.md

@@ -2,6 +2,7 @@
 slug: welcome
 title: Welcome
 authors: [slorber, yangshun]
+image: https://repository-images.githubusercontent.com/94911145/de889380-2905-11eb-9e9b-9332f0537e38
 tags: [arrow-kt, hello, docusaurus]
 ---
 

content/blog/2022-02-13-first-kotlin-blog-post.md

@@ -1,3 +1,10 @@
+---
+authors: vergauwen_simon
+description: This is my first post on Docusaurus 2. And this is more text for the description. I just want this to be broken.
+image: /img/sample-image.jpg
+tags: [arrow, kotlin]
+---
+
 # My first Kotlin Blogpost
 
 This document includes some code snippets and some other stuff.
@@ -6,7 +13,7 @@ and two ways you can get them to generate both the example **and** the test.
 
 <!--- TEST_NAME BasicTest -->
 
-# Verifying the output of System.out
+## Verifying the output of System.out
 
 We can quite simply verify the output of a snippet by writing a snippet like this,
 and writing an accompanying text block with the output below.
@@ -41,7 +48,7 @@ Hello World 2!
 ```
 <!--- TEST -->
 
-# Verifying the output using custom logic
+## Verifying the output using custom logic
 
 We can also verify the output using custom logic, by specifying it inside of `TEST` directive.
 This can be useful for asserting output that is very long, or non-deterministic. 
@@ -59,7 +66,7 @@ suspend fun example() {
 <!--- KNIT example-basic-03.kt -->
 <!--- TEST lines.all { it.startsWith("DefaultDispatcher-worker") } && lines.size == 100 -->
 
-# Verifying the snippet using assertions
+## Verifying the snippet using assertions
 
 And we can have a final example where we use assertions, instead of verifying the output.
 We in this case add an import for `shouldBe`, and specify the `TEST assert` param.

docusaurus.config.js

@@ -57,6 +57,12 @@ const createConfig = async () => {
             path: 'content/blog',
             routeBasePath: 'community/blog',
             showReadingTime: true,
+            blogSidebarCount: 0,
+            blogListComponent: '@site/src/components/Blog/BlogListPage',
+            blogTagsPostsComponent:
+              '@site/src/components/Blog/BlogTagsPostsPage',
+            postsPerPage: 8,
+            archiveBasePath: null,
             editUrl: 'https://github.com/arrow-kt/arrow-website/edit/main/',
           },
           theme: {
@@ -341,7 +347,7 @@ const createConfig = async () => {
           postcssOptions.plugins.push(
             // @ts-ignore
             require('@csstools/postcss-global-data')({
-              files: ['./src/css/custom.css'],
+              files: ['./src/css/vars.css'],
             }),
           );
           postcssOptions.plugins.push(require('postcss-custom-media'));

src/components/Blog/BlogListPage/BlogListPage.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
+import type { Props } from '@theme/BlogListPage';
+
+import { Hero } from '@site/src/components/Hero';
+import { ImageCard, ImageCardProps } from '@site/src/components/ImageCard';
+import { Banner } from '@site/src/components/Banner';
+
+import data from './blog-list-page.yml';
+import styles from './blog-list-page.module.css';
+
+function BlogListPageMetadata(props: Props): JSX.Element {
+  const { metadata } = props;
+  const {
+    siteConfig: { title: siteTitle },
+  } = useDocusaurusContext();
+  const { blogDescription, blogTitle, permalink } = metadata;
+  const isBlogOnlyMode = permalink === '/';
+  const title = isBlogOnlyMode ? siteTitle : blogTitle;
+  return (
+    <>
+      <PageMetadata title={title} description={blogDescription} />
+      <SearchMetadata tag="blog_posts_list" />
+    </>
+  );
+}
+
+function BlogListPageContent(props: Props): JSX.Element {
+  const { metadata, items } = props;
+
+  const posts = items.map((item) => ({
+    title: item.content.metadata.title,
+    subtitle: `${item.content.metadata.authors[0].name}, ${item.content.metadata.formattedDate}`,
+    image: item.content.frontMatter.image,
+    body: item.content.metadata.description,
+    href: item.content.metadata.permalink,
+  }));
+
+  return (
+    <Layout>
+      <Hero
+        title={data.hero.title}
+        subtitle={data.hero.subtitle}
+        ctaList={data.hero.ctaList}
+        className={styles.verticalRhythm}
+      />
+      <main>
+        <section
+          className={`container ${styles.projectsContainer} ${styles.verticalRhythm}`}>
+          {posts.map((post: ImageCardProps) => (
+            <ImageCard key={post.title} {...post} />
+          ))}
+        </section>
+        <section className={`container ${styles.verticalRhythm}`}>
+          <BlogListPaginator metadata={metadata} />
+        </section>
+        <section>
+          <Banner title={data.banner.title} ctaList={data.banner.ctaList} />
+        </section>
+      </main>
+    </Layout>
+  );
+}
+
+export default function BlogListPage(props: Props): JSX.Element {
+  return (
+    <HtmlClassNameProvider
+      className={`${ThemeClassNames.wrapper.blogPages} ${ThemeClassNames.page.blogListPage}`}>
+      <BlogListPageMetadata {...props} />
+      <BlogListPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
+}

src/components/Blog/BlogListPage/blog-list-page.module.css

@@ -0,0 +1,9 @@
+.verticalRhythm {
+  margin-bottom: calc(2 * var(--ifm-spacing-vertical));
+}
+
+.projectsContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+}

src/components/Blog/BlogListPage/blog-list-page.yml

@@ -0,0 +1,12 @@
+hero:
+  title: Blog
+  subtitle: Morbi ornare arcu massa, a sodales augue vulputate quis. Nunc faucibus lectus augue, posuere pulvina
+  ctaList:
+    - title: Learn about our courses
+      href: /learn/overview
+
+banner:
+  title: Do you want to publish a new post?
+  ctaList:
+    - title: Contact us
+      href: /learn/overview

src/components/Blog/BlogListPage/index.ts

@@ -0,0 +1 @@
+export { default } from './BlogListPage';

src/components/Blog/BlogTagsPostsPage/BlogTagsPostsPage.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { translate } from '@docusaurus/Translate';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  usePluralForm,
+} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
+import type { Props } from '@theme/BlogTagsPostsPage';
+
+import { Hero } from '@site/src/components/Hero';
+import { ImageCard, ImageCardProps } from '@site/src/components/ImageCard';
+
+import styles from './blog-tags-posts-page.module.css';
+
+// Very simple pluralization: probably good enough for now
+function useBlogPostsPlural() {
+  const { selectMessage } = usePluralForm();
+  return (count: number) =>
+    selectMessage(
+      count,
+      translate(
+        {
+          id: 'theme.blog.post.plurals',
+          description:
+            'Pluralized label for "{count} posts". 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 post|{count} posts',
+        },
+        { count },
+      ),
+    );
+}
+
+function useBlogTagsPostsPageTitle(tag: Props['tag']): string {
+  const blogPostsPlural = useBlogPostsPlural();
+  return translate(
+    {
+      id: 'theme.blog.tagTitle',
+      description: 'The title of the page for a blog tag',
+      message: '{nPosts} tagged with “{tagName}”',
+    },
+    { nPosts: blogPostsPlural(tag.count), tagName: tag.label },
+  );
+}
+
+function BlogTagsPostsPageMetadata({ tag }: Props): JSX.Element {
+  const title = useBlogTagsPostsPageTitle(tag);
+  return (
+    <>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="blog_tags_posts" />
+    </>
+  );
+}
+
+function BlogTagsPostsPageContent(props: Props): JSX.Element {
+  const { tag, listMetadata, items } = props;
+
+  const title = useBlogTagsPostsPageTitle(tag);
+  const cta = {
+    title: 'View All Tags',
+    href: tag.allTagsPath,
+  };
+
+  const posts = items.map((item) => ({
+    title: item.content.metadata.title,
+    subtitle: `${item.content.metadata.authors[0].name}, ${item.content.metadata.formattedDate}`,
+    image: item.content.frontMatter.image,
+    body: item.content.metadata.description,
+    href: item.content.metadata.permalink,
+  }));
+
+  return (
+    <Layout>
+      <Hero
+        title={tag.label}
+        subtitle={title}
+        ctaList={[cta]}
+        className={styles.verticalRhythm}
+      />
+      <main>
+        <section
+          className={`container ${styles.projectsContainer} ${styles.verticalRhythm}`}>
+          {posts.map((post: ImageCardProps) => (
+            <ImageCard key={post.title} {...post} />
+          ))}
+        </section>
+        <section className={`container ${styles.verticalRhythm}`}>
+          <BlogListPaginator metadata={listMetadata} />
+        </section>
+      </main>
+    </Layout>
+  );
+}
+
+export default function BlogTagsPostsPage(props: Props): JSX.Element {
+  return (
+    <HtmlClassNameProvider
+      className={`${ThemeClassNames.wrapper.blogPages} ${ThemeClassNames.page.blogTagPostListPage}`}>
+      <BlogTagsPostsPageMetadata {...props} />
+      <BlogTagsPostsPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
+}

src/components/Blog/BlogTagsPostsPage/blog-tags-posts-page.module.css

@@ -0,0 +1,9 @@
+.verticalRhythm {
+  margin-bottom: calc(2 * var(--ifm-spacing-vertical));
+}
+
+.projectsContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+}

src/components/Blog/BlogTagsPostsPage/index.ts

@@ -0,0 +1 @@
+export { default } from './BlogTagsPostsPage';

src/components/Hero/hero.module.css

@@ -1,10 +1,21 @@
 .hero {
   position: relative;
+  z-index: 1;
+}
+
+.hero::before {
   background-image: url('@site/static/img/arrow-brand-icon.svg');
   background-repeat: no-repeat;
   background-size: auto 150%;
   background-position: max(-400px, calc(100vw - 3000px)) bottom;
-  z-index: 1;
+  width: 100%;
+  height: 100%;
+  content: '';
+  position: absolute;
+  left: 0;
+  pointer-events: none;
+  z-index: -1;
+  transition: opacity var(--ifm-transition-fast);
 }
 
 .hero::after {
@@ -17,9 +28,21 @@
   position: absolute;
   right: 0;
   pointer-events: none;
-  z-index: -1;
+  z-index: -2;
+  transition: opacity var(--ifm-transition-fast);
 }
 
+@media (--ifm-narrow-window) {
+  .hero::before {
+    opacity: 0.1;
+  }
+
+  .hero::after {
+    opacity: 0.5;
+  }
+}
+
+
 .container {
   max-width: 700px;
 }