Ethereum Foundation Cryptography Research

The Ethereum Foundation leads research into cryptographic protocols that are useful within the greater Ethereum community and more generally. Cryptography is a key tool that enables greater functionality, security, efficiency, and auditability in decentralized settings. We are currently conducting research into verifiable delay functions, multiparty computation, vector commitments, and zero-knowledge proofs etc. We have a culture of open source and no patents are put on any work that we produce.

This repository holds the codebase to our website, crypto.ethereum.org

Stack

The main stack used in the project includes:

Next.js.
TypeScript.
ChakraUI as component library.
KaTeX to render LaTeX math syntax.

Local development

The project is bootstrapped with create-next-app, with a custom scaffolding.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Project Structure

The following list describes the main elements of the project structure:

public: contains static assets like fonts and images.
src: contains the source code.
- components: React components.
  - components with state are directly located inside /components.
  - layout: components used to contain and apply different layouts to different pages.
  - UI: stateless (functional) components.
- pages: includes components that renders to pages and NextJS API Routes.
- posts: markdown blog posts.
- styles: css stylesheets.
  - global.css: global stylesheet.
- theme: contains the Chakra UI custom theme, organized in foundations and components for better scaling.
- utils: utilitary stuff.
- constants.ts: this is the global constants file, containg URLs and lists of elements we use across the site.
- types.ts: contains the custom defined TypeScript types and interfaces.

Markdown & LaTex support on blog posts

Markdown

Support for GitHub Flavored Markdown, which is a superset of CommonMark and adds supports to other features like tables.

LaTeX

The site uses KaTeX to render LaTeX/math and inside /research publications abstracts. LaTeX-rendering libs are not 100% compatible with LaTex yet, so please check the support table if you are having issues with some expression.

How to add a new blog post

The site supports both internal and external blog posts.

Internal posts: to add a new one, just create a new markdown (.md) file under src/posts (make sure first this directory exists, otherwise create it first, under /src). The name of the file should follow the kebab case convention, as it will be used to generate the url to the post. You also have to add some Front Matter metadata, like the post title, author(s) and date, which are required.

Metadata example:

---
title: 'VDF Proving with SnarkPack'
author: 'Mary Maller'
date: '2022-03-16'
---

External posts: you can also link to an external post from the /blog page by appending an object with the required data (title, date, link) to the externalLinks list from the src/pages/blog/index.tsx file. See the example below:

const externalLinks = [
  {
    title: 'Ethereum Merge: Run the majority client at your own peril!',
    date: '2022-03-24',
    link: 'https://dankradfeist.de/ethereum/2022/03/24/run-the-majority-client-at-your-own-peril.html'
  }
];

How to deploy changes succesfully

Locally: Make sure the site builds locally, otherwise the build will break and the new version of the site (e.g.: adding a new post) will not be generated. To be sure of this, run the yarn build command locally and check that you get no errors.
On GitHub: check that the Deploy Preview passes succesfully.

Notes

Dates should follow the yyyy-mm-dd format (for both internal and external posts), like date: '2022-03-16'
Blog posts are sorted automatically by date, regardless the order of insertion.
Check the current sample posts on src/posts.

Tutorials

Learning NextJS

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

Adding ChakraUI to a NextJS project

This is a very clear and step-by-step guide on it.

Learning ChakraUI

We recommend checking the official docs.

zhenfeizhang / cryptography-research-website