Merge pull request #67 from acid-info/blog

Blog

.gitignore

@@ -10,6 +10,7 @@
 
 # Misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

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

@@ -1,12 +0,0 @@
----
-slug: first-blog-post
-title: First Blog Post
-authors:
-  name: Gao Wei
-  title: Docusaurus Core Team
-  url: https://github.com/wgao19
-  image_url: https://github.com/wgao19.png
-tags: [hola, docusaurus]
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

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

@@ -1,44 +0,0 @@
----
-slug: long-blog-post
-title: Long Blog Post
-authors: endi
-tags: [hello, docusaurus]
----
-
-This is the summary of a very long blog post,
-
-Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
-
-<!--truncate-->
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

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

@@ -1,20 +0,0 @@
----
-slug: mdx-blog-post
-title: MDX Blog Post
-authors: [slorber]
-tags: [docusaurus]
----
-
-Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
-
-:::tip
-
-Use the power of React to create interactive blog posts.
-
-```js
-<button onClick={() => alert("button clicked!")}>Click me!</button>
-```
-
-<button onClick={() => alert("button clicked!")}>Click me!</button>
-
-:::

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

@@ -1,25 +0,0 @@
----
-slug: welcome
-title: Welcome
-authors: [slorber, yangshun]
-tags: [facebook, hello, docusaurus]
----
-
-[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
-
-Simply add Markdown files (or folders) to the `blog` directory.
-
-Regular blog authors can be added to `authors.yml`.
-
-The blog post date can be extracted from filenames, such as:
-
-- `2019-05-30-welcome.md`
-- `2019-05-30-welcome/index.md`
-
-A blog post folder can be convenient to co-locate blog post images:
-
-![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
-
-The blog supports tags as well!
-
-**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

blog/authors.yml

@@ -1,17 +0,0 @@
-endi:
-  name: Endilie Yacop Sucipto
-  title: Maintainer of Docusaurus
-  url: https://github.com/endiliey
-  image_url: https://github.com/endiliey.png
-
-yangshun:
-  name: Yangshun Tay
-  title: Front End Engineer @ Facebook
-  url: https://github.com/yangshun
-  image_url: https://github.com/yangshun.png
-
-slorber:
-  name: Sébastien Lorber
-  title: Docusaurus maintainer
-  url: https://sebastienlorber.com
-  image_url: https://github.com/slorber.png

docs/blog.mdx

@@ -0,0 +1,8 @@
+---
+sidebar_position: 4
+title: Blog
+---
+import {BlogPosts} from '@site/src/components/mdx/BlogPosts';
+
+# Recent Blog Posts
+<BlogPosts/>

docs/how.md

@@ -14,7 +14,6 @@ sidebar_position: 2
 [![Codecov](https://codecov.io/gh/status-im/nim-codex/branch/main/graph/badge.svg?token=XFmCyPSNzW)](https://codecov.io/gh/status-im/nim-codex)
 [![Discord](https://img.shields.io/discord/895609329053474826)](https://discord.gg/CaJTh24ddQ)
 
-
 ## Build and Run
 
 For detailed instructions on preparing to build nim-codex see [*Building Codex*](BUILDING.md).

docs/index.mdx

@@ -8,20 +8,19 @@ import {FeatureCard} from '@site/src/components/mdx/FeatureCard';
 import {Quote} from '@site/src/components/mdx/Quote';
 import {ExternalReferenceCard} from '@site/src/components/mdx/ExternalReferenceCard';
 import {TeamList} from '@site/src/components/mdx/TeamList';
+import {BlogPosts} from '@site/src/components/mdx/BlogPosts';
 
 <Hero title={"Codex"}
       subtitle={"Codex is building a Decentralized Durability Engine"}
-      linkText={"PoC0"}
+      linkText={"PoC Dagger"}
       label={"Introduction"}
-      linkUrl={"https://github.com/status-im/codex-research"}/>
+      linkUrl={"https://github.com/status-im/nim-codex"}/>
 
 ## What is Codex?
 <Quote>
     <ul>
         <li>Codex is aiming to solve the fundamental issues of data durability in decentralized systems.</li>
-        <br/>
         <li>Codex is a research group working in all areas of decentralized storage.</li>
-        <br/>
         <li>Codex is a decentralized storage protocol for durable information.</li>
     </ul>
 </Quote>
@@ -31,14 +30,20 @@ import {TeamList} from '@site/src/components/mdx/TeamList';
     <FeatureCard title={"Fast erasure coding"}
                  index={0}
                  text={"Codex uses high-performance Reed-Solomon encoding to guarantee the durability of the datasets."}/>
-    <FeatureCard title={"SNARK-based proof of retrivability"}
+    <FeatureCard title={"SNARK-based proof of retrievability"}
                  index={1}
                  text={"To implement space-efficient data retrievability, Codex leverages state-of-the-art SNARK-based proofs."}/>
     <FeatureCard title={"Low-overhead lazy repair"}
                  index={2}
                  text={"Data repairs in Codex are grouped through lazy repair to decrease network bandwidth overhead."}/>
+    <FeatureCard title={"Low-overhead lazy repair"}
+                 index={2}
+                 text={"Data repairs in Codex are grouped through lazy repair to decrease network bandwidth overhead."}/>
 </FeatureList>
 
+## Blog Posts
+<BlogPosts/>
+
 ## Resources
 <ExternalReferenceCard linkUrl={"http://Linktowhitepaper"}
                        linkText={"White-paper"}

docusaurus.config.js

@@ -1,5 +1,6 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
+require('dotenv').config()
 
 const lightCodeTheme = require('prism-react-renderer/themes/github')
 const darkCodeTheme = require('prism-react-renderer/themes/dracula')
@@ -14,6 +15,10 @@ const config = {
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
 
+  customFields: {
+    ghostAPiKey: process.env.GHOST_API_KEY,
+  },
+
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
   organizationName: 'status-im', // Usually your GitHub org/user name.
@@ -70,7 +75,7 @@ const config = {
         },
         items: [
           {
-            href: 'https://blog.codex.storage/',
+            to: 'blog',
             label: 'Blog',
           },
           {

package.json

@@ -22,8 +22,10 @@
     "@docusaurus/core": "2.1.0",
     "@docusaurus/preset-classic": "2.1.0",
     "@mdx-js/react": "^1.6.22",
+    "@tryghost/content-api": "^1.11.4",
     "clsx": "^1.2.1",
     "copy-to-clipboard": "^3.3.2",
+    "dotenv": "^16.0.3",
     "lodash": "^4.17.21",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",

src/components/Button/LinkButton.tsx

@@ -0,0 +1,22 @@
+import Link from '@docusaurus/Link'
+import React, { HTMLProps } from 'react'
+import { Button } from './Button'
+import { ButtonWithIcon } from './ButtonWithIcon'
+import styles from './style.module.scss'
+
+type TProps = {
+  children: React.ReactNode
+  linkProps: HTMLProps<HTMLAnchorElement>
+}
+
+export const LinkButton = ({
+  children,
+  linkProps,
+  ...rest
+}: TProps & HTMLProps<HTMLButtonElement>): JSX.Element => {
+  return (
+    <Link {...linkProps}>
+      <Button {...rest}>{children}</Button>
+    </Link>
+  )
+}

src/components/mdx/BlogPosts/BlogPosts.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react'
+import clsx from 'clsx'
+import styles from './style.module.scss'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import GhostContentAPI from '@tryghost/content-api'
+import { LinkButton } from '@site/src/components/Button/LinkButton'
+
+type TProps = {
+  children: React.ReactNode
+}
+
+interface IGhostAuthor {
+  url: string
+  name: string
+}
+
+interface IGhostBlogPost {
+  title: string
+  excerpt: string
+  url: string
+  html: string
+  updated_at: string
+  authors: IGhostAuthor[]
+}
+
+const useGhostBlogPosts = (limit: number = 10) => {
+  const {
+    siteConfig: {
+      customFields: { ghostAPiKey },
+    },
+  } = useDocusaurusContext()
+  const [posts, setPosts] = useState<IGhostBlogPost[]>([])
+
+  useEffect(() => {
+    const api = new GhostContentAPI({
+      url: 'https://blog.codex.storage',
+      key: ghostAPiKey,
+      version: 'v2.0',
+    })
+    api.posts
+      .browse({ limit, include: 'tags,authors' })
+      .then((_posts: IGhostBlogPost[]) => {
+        setPosts(_posts)
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  }, [])
+
+  return posts
+}
+
+type TBlogPostProps = {
+  post: IGhostBlogPost
+}
+
+const BlogPost = ({ post }: TBlogPostProps) => (
+  <div className={clsx('card', styles.blogpost)}>
+    <h3 className={'sans'}>{post.title}</h3>
+    <p
+      className={''}
+      dangerouslySetInnerHTML={{
+        __html: `${post.html.split(' ').slice(0, 23).join(' ')}...`,
+      }}
+    />
+    <div className={styles.blogpostMeta}>
+      <small className={'sans'}>
+        by{' '}
+        {post.authors.map((a, i) => (
+          <a href={a.url} key={`a-${i}`}>
+            {a.name}
+          </a>
+        ))}
+      </small>
+      <small>
+        <time> - {formatDate(post.updated_at)}</time>
+      </small>
+    </div>
+    <a>
+      <LinkButton
+        className={'button--secondary'}
+        linkProps={{ href: post.url }}
+      >
+        Learn More
+      </LinkButton>
+    </a>
+  </div>
+)
+
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString)
+  const m = date.toLocaleString('default', { month: 'short' })
+  const d = date.getDay()
+  const y = date.getFullYear()
+  return `${m} ${d}, ${y}`
+}
+
+export const BlogPosts = ({ children }: TProps): JSX.Element => {
+  const posts = useGhostBlogPosts()
+
+  return (
+    <section className={styles.blogpostsWrapper}>
+      <div className={styles.blogposts}>
+        {posts.map((post, i) => (
+          <BlogPost key={`p-${i}`} post={post} />
+        ))}
+      </div>
+    </section>
+  )
+}

src/components/mdx/BlogPosts/index.tsx

@@ -0,0 +1 @@
+export * from './BlogPosts'

src/components/mdx/BlogPosts/style.module.scss

@@ -0,0 +1,19 @@
+.blogpostsWrapper {
+  .blogposts {
+    .blogpost {
+      background: none;
+      //border: 1px solid var(--ifm-color-gray-200);
+      p {
+        color: var(--ifm-color-gray-500);
+      }
+
+      .blogpostMeta {
+        margin-bottom: calc(var(--ifm-leading) / 2);
+      }
+
+      + .blogpost {
+        margin-top: var(--ifm-leading);
+      }
+    }
+  }
+}

src/components/mdx/TeamList/TeamList.tsx

@@ -16,7 +16,6 @@ type TProps = {
 
 export const TeamList = (props: TProps): JSX.Element => {
   const team = useTeam('codex' as ELogosTeamNames)
-  console.log(team)
   const hiddenSidebar = globalStore.useSelector(selectHiddenSidebar)
 
   return (

src/components/mdx/TeamList/style.module.scss

@@ -1,22 +1,23 @@
 .TeamList {
   .TeamListContainer {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
     grid-gap: 10px;
     grid-column-gap: calc(0.7 * var(--ifm-global-spacing));
     grid-row-gap: calc(0.6 * var(--ifm-global-spacing));
 
     &.withSidebarHide {
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(4, 1fr);
       .memberCard {
-        grid-template-rows: 320px 60px;
+        grid-template-rows: 220px 60px;
       }
     }
 
     .memberCard {
       box-shadow: none;
       display: grid;
-      grid-template-rows: 400px 60px;
+      //grid-template-rows: 400px 60px;
+      grid-template-rows: 270px 110px !important;
       grid-column-gap: calc(0.7 * var(--ifm-global-spacing));
       grid-row-gap: calc(0.6 * var(--ifm-global-spacing));
 
@@ -30,10 +31,9 @@
       }
 
       .memberCardCaption {
+        flex-direction: column;
+        gap: 10px !important;
         border-radius: 8px;
-        flex-direction: row;
-        justify-content: space-between;
-        gap: 40px;
 
         h5 {
           margin: 0;
@@ -41,11 +41,11 @@
         .memberEmail {
           color: var(--ifm-color-gray-500);
         }
-
         .memberSocials {
           display: flex;
           align-items: center;
           opacity: 0.3;
+          height: 20px;
           gap: calc(var(--ifm-spacing-horizontal) * 0.5);
         }
       }
@@ -67,11 +67,10 @@
   }
 
   .memberCardCaption {
-    flex-direction: column !important;
     gap: 10px !important;
     .memberSocials {
-      height: 30px;
-      gap: 16px !important;
+      //height: 30px;
+      //gap: 16px !important;
       opacity: 0.5 !important;
       a {
         width: 25px;

src/css/custom.scss

@@ -78,7 +78,7 @@
   --ifm-font-weight-base: var(--ifm-font-weight-normal);
 
   --ifm-h1-font-size: 4rem;
-  --ifm-h2-font-size: 3.5rem;
+  --ifm-h2-font-size: 2rem;
   --ifm-h3-font-size: 1.25rem;
   --ifm-h4-font-size: 1.15rem;
   --ifm-h5-font-size: 1rem;
@@ -211,7 +211,6 @@
 
 .sans {
   font-family: var(--lgs-font-family-secondary);
-  font-size: var(--ifm-font-size-secondary);
   line-height: var(--ifm-line-height-secondary);
 }
 

static/data/team.json

@@ -50,7 +50,7 @@
     "contact": {
       "email": "leo@status.im",
       "status": null,
-      "github": null,
+      "github": "leobago",
       "discord": "leobago#8071",
       "gscholar": "vt5qgWoAAAAJ"
     }