Frontpage restyle with new scribbles

docusaurus.config.ts

@@ -9,7 +9,12 @@ import { themes } from 'prism-react-renderer';
 
 const config: Config = {
   title: 'wasmCloud',
-  tagline: 'Build applications in any language and deploy them anywhere.',
+  tagline: 'Build applications in any language. Deploy them anywhere.',
+  customFields: {
+    description: 'The secure, distributed, WebAssembly Actor runtime',
+    tagline_1: 'Build applications in any language.',
+    tagline_2: 'Deploy them anywhere.',
+  },
   url: 'https://wasmcloud.com',
   baseUrl: '/',
   onBrokenLinks: 'throw',
@@ -71,6 +76,7 @@ const config: Config = {
         anonymizeIP: true,
       } as PluginGoogleAnalyticsOptions,
     ],
+    customPostCssPlugin, // PostCSS plugin function registration
   ],
 
   themeConfig: {
@@ -185,8 +191,20 @@ const config: Config = {
       admonitions: false,
       comments: false,
       headingIds: false,
-    }
-  }
+    },
+  },
 };
 
+/** @return {import('@docusaurus/types').Plugin} */
+function customPostCssPlugin() {
+  return {
+    name: 'custom-postcss',
+    configurePostCss(options) {
+      // Append new PostCSS plugins here.
+      options.plugins.push(require('postcss-preset-env')); // allow newest CSS syntax
+      return options;
+    },
+  };
+}
+
 module.exports = config;

package.json

@@ -14,9 +14,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.0.0",
-    "@docusaurus/plugin-google-analytics": "^3.0.0",
-    "@docusaurus/preset-classic": "^3.0.0",
+    "@docusaurus/core": "^3.1.1",
+    "@docusaurus/plugin-google-analytics": "^3.1.1",
+    "@docusaurus/preset-classic": "^3.1.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.2.0",
@@ -26,7 +26,8 @@
     "react-player": "^2.13.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.0.0"
+    "@docusaurus/module-type-aliases": "^3.1.1",
+    "postcss-preset-env": "^9.3.0"
   },
   "browserslist": {
     "production": [

src/components/HomepageFeatures/index.js

@@ -1,61 +1,91 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import { useColorMode } from '@docusaurus/theme-common';
 
+const root = '/img/features';
 const FeatureList = [
   {
     title: 'Declarative WebAssembly Orchestration',
-    image: { src: '/img/features/cloud.png', alt: 'Multiple type of devices around wasmCloud logo' },
+    image: {
+      name: 'cloud',
+      alt: 'Multiple type of devices around wasmCloud logo',
+    },
+    imageLast: false,
     description: (
       <>
-        Write your application as a <b>declarative</b> set of WebAssembly components. Deploy your application to any cloud, edge, or IoT device with a single command.
+        Write your application as a <b>declarative</b> set of WebAssembly components. Deploy your
+        application to any cloud, edge, or IoT device with a single command.
       </>
     ),
   },
   {
     title: 'Seamless Distributed Networking',
-    image: { src: '/img/features/connected.png', alt: 'A message bus connecting multiple wasmCloud hosts' },
+    image: {
+      name: 'connected',
+      alt: 'A message bus connecting multiple wasmCloud hosts',
+    },
+    imageLast: true,
     description: (
       <>
-        Using <b>NATS</b>, wasmCloud hosts cluster together across disparate clouds and infrastructure, distributing your apps with a single flat topology without ever opening a single firewall port. Clusters self-form and self-heal to automatically enable load balancing and failover without building it into your app.
+        Using <b>NATS</b>, wasmCloud hosts cluster together across disparate clouds and
+        infrastructure, distributing your apps with a single flat topology without ever opening a
+        single firewall port. Clusters self-form and self-heal to automatically enable load
+        balancing and failover without building it into your app.
       </>
     ),
   },
   {
     title: 'Vendorless Application Components',
-    image: { src: '/img/features/secure.png', alt: 'The wasmCloud logo inside a lock' },
+    image: { name: 'secure', alt: 'The wasmCloud logo inside a lock' },
+    imageLast: false,
     description: (
       <>
-        wasmCloud WebAssembly components are completely <b>vendorless</b> and don't tie you to any platform, cloud, or proprietary implementation. Swap out implementations and change your underlying infrastructure at any time without changing your application code.
+        wasmCloud WebAssembly components are completely <b>vendorless</b> and don't tie you to any
+        platform, cloud, or proprietary implementation. Swap out implementations and change your
+        underlying infrastructure at any time without changing your application code.
       </>
     ),
   },
 ];
 
-function Feature({ image, title, description }) {
+function FeatureImageComponent({ image }) {
+  const { colorMode } = useColorMode();
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <img {...image} />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h2>{title}</h2>
-        <p>{description}</p>
-      </div>
+    <img
+      className={styles.featureSvg}
+      src={root + '/feature-' + image.name + (colorMode === 'dark' ? '-dark.svg' : '-light.svg')}
+      alt={image.alt}
+    />
+  );
+}
+
+function FeatureTextComponent({ title, description }) {
+  return (
+    <div className={styles.featureText} align="left">
+      <h2>{title}</h2>
+      <p>{description}</p>
+    </div>
+  );
+}
+
+function Feature({ image, title, description, imageLast }) {
+  return (
+    <div className={clsx(styles.featureRow, imageLast && styles.frImageLast)}>
+      <FeatureImageComponent image={image} />
+      <FeatureTextComponent title={title} description={description} />
     </div>
   );
 }
 
 export default function HomepageFeatures() {
   return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
+    <div className="container">
+      <div className={styles.featuresContainer}>
+        {FeatureList.map((props, idx) => (
+          <Feature key={idx} {...props} />
+        ))}
       </div>
-    </section>
+    </div>
   );
 }

src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,58 @@
-.features {
+.featuresContainer {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  padding: 2rem 0;
-  width: 100%;
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  max-width: 38%;
+}
+
+.featureRow {
+  display: flex;
+  align-items: center;
+  padding: var(--ifm-spacing-xs);
+  flex-direction: column;
+  gap: var(--ifm-spacing-lg);
+}
+
+@media screen and (min-width: 200px) {
+  .featureRow {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+}
+
+@media only screen and (min-width: 576px) {
+  .featuresContainer {
+    padding: var(--ifm-spacing-xl) 0;
+    gap: var(--ifm-spacing-xl);
+  }
+
+  .featureRow {
+    gap: var(--ifm-spacing-xl);
+  }
+}
+
+@media only screen and (min-width: 996px) {
+  .featuresContainer {
+    padding: var(--ifm-spacing-xl);
+    gap: var(--ifm-spacing-xl);
+  }
+
+  .featureSvg {
+    max-width: 16rem;
+  }
+
+  .featureText {
+    max-width: 32rem;
+  }
+
+  .featureRow {
+    flex-direction: row;
+  }
+
+  .frImageLast {
+    flex-direction: row-reverse;
+  }
 }

src/components/NewsSection/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from './styles.module.css';
+import { useColorMode } from '@docusaurus/theme-common';
+import clsx from 'clsx';
+
+function NewsImageComponent() {
+  const { colorMode } = useColorMode();
+  const root = '/img/';
+  return (
+    <img
+      className={styles.newsSvg}
+      src={root + (colorMode === 'dark' ? 'news-dark.svg' : 'news-light.svg')}
+      alt="News Image"
+    />
+  );
+}
+
+export default function NewsSection() {
+  return (
+    <div className={styles.newsContainer}>
+      <div className="container">
+        <div className={styles.newsRow}>
+          <NewsImageComponent />
+
+          <div className={styles.newsText}>
+            <h1>wasmCloud Security Assessment</h1>
+            <div>
+              <i>
+                "WasmCloud is a well reviewed project, with lots of diligence in its security
+                posture. This has paid off, as evidenced by this audit, which had{' '}
+                <strong>no severe or high issues to resolve</strong>."
+              </i>
+            </div>
+            <a
+              className={clsx('button', 'button--lg', styles.button)}
+              href="https://ostif.org/ostif-has-completed-a-security-audit-of-wasmcloud/"
+            >
+              Read more on OSTIF.org
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/NewsSection/styles.module.css

@@ -0,0 +1,91 @@
+.newsContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-self: stretch;
+  border-top: 3px solid var(--ifm-font-color-base);
+  border-bottom: 3px solid var(--ifm-font-color-base);
+  background: rgba(84, 150, 134, 0.5);
+}
+
+.newsRow {
+  display: flex;
+  align-items: center;
+  padding: var(--ifm-spacing-xs);
+  flex-direction: column;
+  gap: 0;
+}
+
+.newsSvg {
+  max-width: 250px;
+}
+
+.newsText {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.button {
+  --ifm-button-background-color: var(--ifm-color-primary-lightest);
+  --ifm-button-color: var(--ifm-button-border-color);
+  --ifm-button-border-color: var(--ifm-font-color-base);
+  --ifm-button-border-width: 2px;
+  margin-top: var(--ifm-spacing-lg);
+}
+
+.button:hover {
+  --ifm-button-background-color: var(--ifm-button-border-color);
+}
+
+.button:hover,
+.button:active,
+.button.button--active {
+  --ifm-button-color: var(--ifm-font-color-base-inverse);
+}
+
+@media screen and (min-width: 200px) {
+  .newsRow {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .newsSvg {
+    margin: var(--ifm-spacing-lg) var(--ifm-spacing-md);
+  }
+
+  .newsText {
+    & h2 {
+      font-size: 1.5rem;
+    }
+  }
+}
+@media screen and (min-width: 576px) {
+  .newsText {
+    padding: 3rem 1.5rem;
+    & h2 {
+      font-size: 2rem;
+    }
+  }
+}
+
+@media screen and (min-width: 996px) {
+  .newsContainer {
+    flex-direction: row;
+  }
+
+  .newsRow {
+    gap: var(--ifm-spacing-md);
+    flex-direction: row;
+  }
+
+  .newsSvg {
+    margin: var(--ifm-spacing-xl) var(--ifm-spacing-lg);
+  }
+  .newsText {
+    & h2 {
+      font-size: 1.5rem;
+    }
+  }
+}