feat: Add custom blog plugin (#291)

TheZoker · web-flow · commit 41531848caee · 2024-02-21T13:46:15.000+01:00
* Remove twitter
* Add custom blog plugin that automatically displays the latest blog post on the index page
diff --git a/content/news/2020-04-24-jsonforms-2-4-0-alpha3.md b/content/news/2020-04-24-jsonforms-2-4-0-alpha3.md
@@ -2,8 +2,6 @@
 slug: jsonforms-2-4-0-alpha3
 title: JSON Forms v2.4.0-alpha.3
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2020-05-25-jsonforms-2-4-0-beta0.md b/content/news/2020-05-25-jsonforms-2-4-0-beta0.md
@@ -2,8 +2,6 @@
 slug: jsonforms-2-4-0-beta0
 title: JSON Forms v2.4.0-beta.0
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2020-06-23-jsonforms-2-4-0.md b/content/news/2020-06-23-jsonforms-2-4-0.md
@@ -2,8 +2,6 @@
 slug: jsonforms-2-4-0
 title: JSON Forms v2.4.0
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2020-08-21-jsonforms-2-4-1-beta0.md b/content/news/2020-08-21-jsonforms-2-4-1-beta0.md
@@ -2,8 +2,6 @@
 slug: jsonforms-2-4-1-beta0
 title: JSON Forms v2.4.1-beta.0
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2020-09-30-jsonforms-2-4-1.md b/content/news/2020-09-30-jsonforms-2-4-1.md
@@ -2,8 +2,6 @@
 slug: jsonforms-2-4-1
 title: JSON Forms v2.4.1
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2020-12-03-jsonforms-2-5-alpha1.md b/content/news/2020-12-03-jsonforms-2-5-alpha1.md
@@ -2,8 +2,6 @@
 slug: jsonforms-2-5-alpha1
 title: JSON Forms v2.5-alpha.1
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2021-01-26-jsonforms-2-5.md b/content/news/2021-01-26-jsonforms-2-5.md
@@ -2,8 +2,6 @@
 slug: jsonforms-2-5
 title: JSON Forms v2.5
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2021-03-11-jsonforms-2.5.1-alpha1.md b/content/news/2021-03-11-jsonforms-2.5.1-alpha1.md
@@ -2,8 +2,6 @@
 slug: jsonforms-2-5-1-alpha1
 title: JSON Forms v2.5.1-alpha.1
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2021-05-20-jsonforms-2.5.1.md b/content/news/2021-05-20-jsonforms-2.5.1.md
@@ -2,8 +2,6 @@
 slug: jsonforms-2-5-1
 title: JSON Forms v2.5.1
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2021-06-29-smaller-and-faster-jsonforms.md b/content/news/2021-06-29-smaller-and-faster-jsonforms.md
@@ -2,8 +2,6 @@
 slug: smaller-and-faster-jsonforms
 title: Smaller and faster JSON Forms
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2021-07-08-move-to-discourse.md b/content/news/2021-07-08-move-to-discourse.md
@@ -2,8 +2,6 @@
 slug: move-to-discourse
 title: Moving to Discourse
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 
diff --git a/content/news/2021-12-22-jsonforms-3-0-0-beta0.md b/content/news/2021-12-22-jsonforms-3-0-0-beta0.md
@@ -2,8 +2,6 @@
 slug: jsonforms-3-0-0-beta0
 title: JSON Forms 3.0.0-beta0
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 We've got an early present for you 🎁! Today we merged the last feature for JSON Forms 3.0 and released the first beta version v3.0.0-beta.0 🎉 Try our new ESM module builds today!
diff --git a/content/news/2022-07-25-jsonforms-3-0-0-rc0.md b/content/news/2022-07-25-jsonforms-3-0-0-rc0.md
@@ -2,8 +2,6 @@
 slug: jsonforms-3-0-0-rc0
 title: JSON Forms 3.0.0-rc0
 author: JSON Forms
-author_title: Twitter
-author_url: https://twitter.com/jsonforms
 author_image_url: /img/logo.svg
 ---
 Great news! We are in the final stretches of the long awaited JSON Forms 3.0 release. Today we published the release candidate "3.0.0-rc.0" 🎉
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -92,10 +92,6 @@ module.exports = {
         {
           title: 'More',
           items: [
-            {
-              label: 'Twitter',
-              href: 'https://twitter.com/JSONForms',
-            },
             {
               label: 'EclipseSource Blog',
               href: 'https://eclipsesource.com/blogs/tag/jsonforms',
@@ -180,7 +176,7 @@ module.exports = {
       },
     ],
     [
-      '@docusaurus/plugin-content-blog',
+      './plugins/custom-blog-plugin',
       {
         id: 'news',
         path: 'content/news',
diff --git a/plugins/custom-blog-plugin.js b/plugins/custom-blog-plugin.js
@@ -0,0 +1,71 @@
+// Source: https://github.com/facebook/docusaurus/issues/4138#issuecomment-1703083513
+
+const blogPluginExports = require('@docusaurus/plugin-content-blog');
+
+const defaultBlogPlugin = blogPluginExports.default;
+
+async function blogPluginExtended(...pluginArgs) {
+  const blogPluginInstance = await defaultBlogPlugin(...pluginArgs);
+
+  const pluginOptions = pluginArgs[1];
+
+  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 (params) {
+      const { content, actions } = params;
+
+      // Get the latest blog posts
+      const recentPostsLimit = 1;
+      const recentPosts = [...content.blogPosts].splice(0, recentPostsLimit);
+
+      async function createRecentPostModule(blogPost, index) {
+        return {
+          // Inject the metadata you need for each recent blog post
+          metadata: await actions.createData(
+            `home-page-recent-post-metadata-${index}.json`,
+            JSON.stringify(blogPost.metadata)
+          ),
+
+          // Inject the MDX excerpt as a JSX component prop
+          // (what's above the <!-- truncate --> marker)
+          BlogPost: {
+            __import: true,
+            // The markdown file for the blog post will be loaded by webpack
+            path: blogPost.metadata.source,
+            query: {
+              truncated: true,
+            },
+          },
+        };
+      }
+
+      actions.addRoute({
+        // Add route for the home page
+        path: '/',
+        exact: true,
+
+        // The component to use for the "Home" page route
+        component: '@site/src/components/home/index.js',
+
+        // These are the props that will be passed to our "Home" page component
+        modules: {
+          recentPosts: await Promise.all(
+            recentPosts.map(createRecentPostModule)
+          ),
+        },
+      });
+
+      // Call the default overridden `contentLoaded` implementation
+      return blogPluginInstance.contentLoaded(params);
+    },
+  };
+}
+
+module.exports = {
+  ...blogPluginExports,
+  default: blogPluginExtended,
+};
diff --git a/src/components/home/index.js b/src/components/home/index.js
@@ -4,24 +4,24 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import styles from './assets/index.module.css';
+import styles from '../../../content/pages/assets/index.module.css';
 import corePackageJson from '@jsonforms/core/package';
 
-import SchemaIcon from '../../static/img/schemaIcon.svg';
+import SchemaIcon from '../../../static/img/schemaIcon.svg';
 import FeaturesIcon from '@mui/icons-material/Report';
 import CustomizeIcon from '@mui/icons-material/Brush';
-import ArchitectureSmall from '../../static/img/architecture_small.svg';
-import AngularLogo from '../../static/img/angular-logo.svg';
-import ReactLogo from '../../static/img/react-logo.svg';
-import VueLogo from '../../static/img/vue-logo.svg';
+import ArchitectureSmall from '../../../static/img/architecture_small.svg';
+import AngularLogo from '../../../static/img/angular-logo.svg';
+import ReactLogo from '../../../static/img/react-logo.svg';
+import VueLogo from '../../../static/img/vue-logo.svg';
 
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 
-import { Demo } from '../../src/components/common/Demo';
-import schema from './assets/schema.json';
-import uischema from './assets/uischema.json';
+import { Demo } from '../common/Demo';
+import schema from '../../../content/pages/assets/schema.json';
+import uischema from '../../../content/pages/assets/uischema.json';
 
 const currentVersion = process.env.CURRENTVERSION ?? corePackageJson.version;
 const nextVersion = process.env.NEXTVERSION;
@@ -32,9 +32,12 @@ const nextVersionText =
 
 const data = { firstName: 'Max', lastName: 'Power' };
 
-function Home() {
+function Home({ recentPosts }) {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
+  const recentPost = recentPosts[0];
+  const { BlogPost } = recentPost;
+
   return (
     <Layout
       title={siteConfig.tagline}
@@ -107,15 +110,8 @@ function Home() {
           <section className={styles.sectionNews}>
             <Card className={styles.newsCard}>
               <CardContent>
-                We released v3.2.0 🎉. Besides various fixes and improved developer tooling, this release adds middleware support to all bindings. This makes it a breeze to hook into data updates!
-                <br/>
-                With this release, the Angular bindings and Angular Material renderer set now support Angular 16 and 17. Special thanks to <a href="https://github.com/JBBianchi">JBBianchi</a> for contributing this massive upgrade.
-                <br />
-                You can find the full changelog in the <a href="https://github.com/eclipsesource/jsonforms/releases/tag/v3.2.0">Github release</a>.
-                <br />
-                We welcome any feedback of curious users. Any questions? Check out our <a href="http://jsonforms.discourse.group">community forum</a>. See also our <a href="https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md">migration guide</a>.
-                <br/>
-                <span style={{ display: 'block', textAlign: 'right', width: '100%'}}>24th January 2024</span>
+                <BlogPost />
+                <span style={{ display: 'block', textAlign: 'right', width: '100%'}}>{recentPost.metadata.formattedDate}</span>
               </CardContent>
             </Card>
             <Link to='/news' className={styles.newsButton}>
