Add blog and first blogpost (#411)

* first blogpost in our blog!

website/docusaurus.config.js

@@ -23,6 +23,13 @@ const config = {
   organizationName: organizationName, // Usually your GitHub org/user name.
   projectName: projectName, // Usually your repo name.
 
+  // https://plausible.io/docs/docusaurus-integration
+  scripts: [{
+    src: 'https://plausible.io/js/script.js',
+    defer: true,
+    'data-domain': 'virtuslab.github.io/besom'
+  }],
+
   // Set the production url of your site here
   url: `https://${organizationName}.github.io`,
   // Set the /<baseUrl>/ pathname under which your site is served
@@ -51,18 +58,38 @@ const config = {
       ({
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
-          remarkPlugins: [codeblockVersion(besomVersion)]
-        },
-        blog: {
-          showReadingTime: true,
+          remarkPlugins: [codeblockVersion(besomVersion)],
+          editUrl: 'https://github.com/VirtusLab/besom/tree/main/website'
         },
+        blog: false,
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },
       }),
     ],
   ],
 
+  plugins: [
+    [
+      "./plugins/blog-plugin",
+      {
+        id: "blog",
+        routeBasePath: "blog",
+        path: "./blog",
+        showReadingTime: true,
+        blogSidebarCount: 0,
+        blogTitle: 'Besom, Scala SDK for Pulumi blog',
+        blogDescription: 'The latest news and updates about Besom, Scala SDK for Pulumi',
+        feedOptions: {
+          type: 'all',
+          title: 'Besom, Scala SDK for Pulumi blog',
+          copyright: `Copyright © ${new Date().getFullYear()} VirtusLab Sp. z o.o.`,
+        },
+        editUrl: 'https://github.com/VirtusLab/besom/tree/main/website'
+      },
+    ],
+  ],
+
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
@@ -80,6 +107,11 @@ const config = {
             position: 'left',
             label: 'Documentation',
           },
+          {
+            to: 'blog',
+            position: 'left',
+            label: 'Blog'
+          },
           {
             href: 'https://github.com/virtuslab/besom',
             label: 'GitHub',

website/plugins/blog-plugin.js

@@ -0,0 +1,50 @@
+const blogPluginExports = require("@docusaurus/plugin-content-blog");
+
+const defaultBlogPlugin = blogPluginExports.default;
+
+async function blogPluginExtended(...pluginArgs) {
+  const blogPluginInstance = await defaultBlogPlugin(...pluginArgs);
+
+  return {
+    // Add all properties of the default blog plugin so existing functionality is preserved
+    ...blogPluginInstance,
+    /**
+     * Override the default `contentLoaded` hook to access blog posts data
+     */
+    contentLoaded: async function (data) {
+      // Get the 5 latest blog posts
+      const recentPosts = [...data.content.blogPosts].splice(0, 5);
+
+      data.actions.addRoute({
+        // Add route for the home page
+        path: "/besom",
+        exact: true,
+
+        // The component to use for the "Home" page route
+        component: "@site/src/components/Home.tsx",
+
+        // These are the props that will be passed to our "Home" page component
+        modules: {
+          recentPosts: recentPosts.map((post) => ({
+            content: {
+              __import: true,
+              // The markdown file for the blog post will be loaded by webpack
+              path: post.metadata.source,
+              query: {
+                truncated: true,
+              },
+            },
+          })),
+        },
+      });
+
+      // Call the default overridden `contentLoaded` implementation
+      return blogPluginInstance.contentLoaded(data);
+    },
+  };
+}
+
+module.exports = {
+  ...blogPluginExports,
+  default: blogPluginExtended,
+};

website/src/components/Home.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from './HomepageFeatures';
+
+import { Content } from "@theme/BlogPostPage";
+import BlogPostItem from "@theme/BlogPostItem";
+import PaginatorNavLink from "@theme/PaginatorNavLink";
+import { BlogPostProvider } from "@docusaurus/theme-common/internal";
+
+import styles from './Home.module.css';
+
+function wrapPulumiWithAnchorTag(text) {
+  const parts = text.split('Pulumi');
+
+  // If "Pulumi" is not in the text, just return the text as is
+  if (parts.length === 1) {
+    return <>{text}</>;
+  }
+
+  return (
+    <>
+      {parts[0]}
+      <a href="https://www.pulumi.com/">Pulumi</a>
+      {parts[1]}
+    </>
+  );
+}
+
+function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  const BesomLogoSvg = require('@site/static/img/Besom_logo_full_color.svg').default
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <BesomLogoSvg className={styles.besomLogoSvg} role="img" />
+        <p className={styles.tagline}>{wrapPulumiWithAnchorTag(siteConfig.tagline)}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/intro">
+            Get started!
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+interface HomeProps {
+  readonly recentPosts: readonly { readonly content: Content }[];
+}
+
+const Home = ({ recentPosts }: HomeProps) => {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      description="Besom - Scala SDK for Pulumi">
+      <HomepageHeader />
+      <main>
+        <br></br>
+        <HomepageFeatures />
+      </main>
+      <main style={{ paddingTop: 30, paddingBottom: 30 }}>
+        <section id="blogposts">
+          <div className="container">
+            <div className="row">
+              <div className="col col--1"></div>
+              <div className="col col--10">
+                <h1 style={{ textAlign: 'center', paddingBottom: 30 }}>Latest Blog Posts</h1>
+              </div>
+              <div className="col col--1"></div>
+            </div>
+            <div className="row">
+              <div className="col col--1"></div>
+              <div className="col col--10">
+                {recentPosts.map(({ content: BlogPostContent }) => (
+                  <BlogPostProvider
+                    key={BlogPostContent.metadata.permalink}
+                    content={BlogPostContent}
+                  >
+                    <BlogPostItem>
+                      <BlogPostContent />
+                    </BlogPostItem>
+                  </BlogPostProvider>
+                ))}
+              </div>
+              <div className="col col--1"></div>
+            </div>
+            <div className="row">
+              <div className="col col--5 col--offset-6">
+                <PaginatorNavLink
+                  isNext
+                  permalink="/blog"
+                  title="Older Entries"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </Layout >
+  );
+}
+
+export default Home;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+export default function BlogPostItemContainer({children, className}) {
+  const {
+    frontMatter,
+    assets,
+    metadata: {description},
+  } = useBlogPost();
+  const {withBaseUrl} = useBaseUrlUtils();
+  const image = assets.image ?? frontMatter.image;
+  const keywords = frontMatter.keywords ?? [];
+  return (
+    <article
+      className={className}
+      itemProp="blogPost"
+      itemScope
+      itemType="http://schema.org/BlogPosting">
+      {description && <meta itemProp="description" content={description} />}
+      {image && (
+        <link itemProp="image" href={withBaseUrl(image, {absolute: true})} />
+      )}
+      {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">
+      <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>
+  );
+}