Refactor & add Community section

src/components/Logos.js

@@ -3,6 +3,7 @@ import GoodnotesBlack from '../../static/img/logos/GoodNotes-Black.svg';
 import GoodnotesWhite from '../../static/img/logos/GoodNotes-White.svg';
 import DxosBlack from "../../static/img/logos/dxos-logotype-black.svg";
 import DxosWhite from "../../static/img/logos/dxos-logotype-white.svg";
+import styles from "./Logos.module.css"
 
 export function GoodnotesLogo() {
   return <Logo name="Goodnotes" url="https://goodnotes.com" LightSVG={GoodnotesWhite} DarkSVG={GoodnotesBlack} />
@@ -19,14 +20,14 @@ export function DxosLogo() {
 export function Logo({ name, url, LightSVG, DarkSVG }) {
   const title = name + " logo";
   return (<a href={url} aria-label={name} target="_blank">
-    <DarkSVG height={"5em"} className="logo-dark" alt={title} />
-    <LightSVG height={"5em"} className="logo-light" alt={title} />
+    <DarkSVG height={"5em"} className="logo-dark" styles={styles[".logo-dark"]} alt={title} />
+    <LightSVG height={"5em"} className="logo-light" styles={styles[".logo-dark"]} alt={title} />
   </a>)
 }
 
 export default function Logos() {
   return (
-    <div className="container" id="logos">
+    <div className="container" id="logos" >
       <GoodnotesLogo />
       <DxosLogo />
     </div>

src/components/Logos.module.css

@@ -0,0 +1,11 @@
+#logos {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+html[data-theme="dark"] .logo-dark,
+html[data-theme="light"] .logo-light {
+  display: none;
+}

src/components/RecentPosts.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+import styles from './RecentPosts.module.css'
+
+// Quick & dirty hack to get list of blog posts
+// (the "proper" way would be a custom plugin)
+import BlogPosts from "../../.docusaurus/docusaurus-plugin-content-blog/default/blog-post-list-prop-default.json"
+
+function getPostDate(permalink) {
+    const matches = permalink.match(/\d{4}\/\d{2}\/\d{2}/g);
+    if (matches.length === 1) {
+        const matchDate = new Date(matches[0]);
+        return matchDate.toLocaleString('en-us',
+            { month: 'short', year: 'numeric' })
+    } else {
+        return null
+    }
+}
+
+function BlogDate({ date }) {
+    return (<span className={styles.date}>
+        {date}
+    </span>)
+}
+
+function BlogList() {
+    const posts = BlogPosts.items;
+    return (<div className={styles.bloglist}>
+        {posts
+            .filter(({ unlisted }) => !unlisted)
+            .slice(0, 3)
+            .map(({ title, permalink }) => {
+                const date = getPostDate(permalink);
+                return (<li key={permalink} className={styles.post}>
+                    {date && <BlogDate date={date} />}
+                    <Link to={permalink} style={{ textDecoration: "none" }}>
+                        {title}
+                    </Link>
+                </li>)
+            }
+            )}
+
+    </div>)
+}
+
+
+
+export default function RecentPosts() {
+    return (<div>
+        <h3>Read the latest blog posts</h3>
+        <BlogList />
+        <Link to="blog">
+            More posts
+        </Link>
+    </div>)
+}
+
+
+

src/components/RecentPosts.module.css

@@ -0,0 +1,26 @@
+.bloglist {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    gap: .3em;
+    width: 100%;
+    padding-bottom: .5em;
+}
+
+
+.date {
+    opacity: 70%;
+    text-align: right;
+}
+
+.post {
+    max-width: 60ch;
+    padding-bottom: .3em;
+    display: grid;
+    grid-template-columns: 10ch 1fr;
+    justify-content: left;
+    column-gap: 1ch;
+    width: 100%;
+    list-style-type: none;
+    text-align: left;
+}

src/pages/index.js

@@ -6,6 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import styles from './index.module.css'
 import HomepageFeatures from '../components/HomepageFeatures'
 import Logos from '../components/Logos'
+import RecentPosts from '../components/RecentPosts'
 import '@fontsource/merriweather'
 import '@fontsource/overpass'
 
@@ -28,7 +29,7 @@ function HomepageHeader() {
 
 
 function ResearchProduction() {
-  return (<section style={styles.section}>
+  return (<section className={styles.section}>
 
     <div className="container text--center" style={{ alignSelf: "flex-start" }}>
       <h2>Rigorously researched</h2>
@@ -48,14 +49,44 @@ function ResearchProduction() {
 }
 
 function IntroVideo() {
-  return (<section style={styles.section}>
+  return (<section className={styles.section}>
     <div className="container text--center">
       <h2>Automerge in Action</h2>
       <iframe width="560" height="315" src="https://www.youtube.com/embed/L9fdyDlhByM?si=skxe0RBRA_OXmXgD" title="YouTube video player" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
     </div>
   </section>)
 }
 
+
+function ExternalLinkIcon() {
+  return (<span style={{ paddingLeft: "1ch" }} ><svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" className="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span>)
+}
+
+
+function Community() {
+  return (<section className={styles.section}>
+    <div className="container text--center">
+      <h2>Merge with us!</h2>
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", textWrap: "wrap" }}>
+
+        <RecentPosts />
+
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textWrap: "nowrap" }}>
+          <h3>Connect with the community</h3>
+          <p>Join the conversation on <Link to="https://discord.gg/zKGe4DCfgR">Discord<ExternalLinkIcon /></Link></p>
+          <p>Follow&nbsp;
+            <Link to="https://github.com/automerge">@automerge on Github<ExternalLinkIcon /></Link>
+          </p>
+
+          <p>Follow&nbsp;
+            <Link to="https://twitter.com/inkandswitch">@inkandswitch on Twitter<ExternalLinkIcon /></Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>)
+}
+
 export default function Home() {
   const { siteConfig } = useDocusaurusContext()
   return (
@@ -66,8 +97,9 @@ export default function Home() {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
-        <IntroVideo />
         <ResearchProduction />
+        <IntroVideo />
+        <Community />
       </main>
     </Layout>
   )

src/pages/index.module.css

@@ -32,7 +32,7 @@ section {
   width: 100%;
 }
 
-section:nth-child(2) {
+section:nth-child(even) {
   background-color: var(--ifm-hero-background-color);
 }