Anchors for Contribute page, clean up README (ebpf-io#113)

* Update README

Fix typos and improve readability. Add the eBPF logo at the top.

* Add anchors to the Contribute page.

Reuse the TitleWithAnchor, and the CSS from the project page. Just
adjust the vertical margin, as the titles on the Contribute page do not
have the same padding.

README.md

@@ -1,25 +1,33 @@
 [![License: CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)
 
+[![](src/assets/logo.png)](https://ebpf.io)
+
 # ebpf.io Website
 
-This is the source code for the website [ebpf.io](https://www.ebpf.io). For more information, see the [contribute](https://ebpf.io/contribute) page.
+This is the source code for the website [ebpf.io](https://ebpf.io).
+For more information, see the [contribute](https://ebpf.io/contribute) page.
 
 ## How to contribute
 
 1. Clone the repo
-2. yarn install
-3. yarn run develop
-4. open http://localhost:8000
-5. make changes in: pages/index.js for landing page, or posts/ folder for blog posts
-6. everytime you save, localhost:8000 will auto-reload with new preview
-7. commit all your new changes to a branch, and submit the PR
-
+2. `yarn install`
+3. `yarn run develop`
+4. Open http://localhost:8000 in your browser
+5. Make changes in: src/pages/index.en.js for landing page, or posts/ folder
+   for blog posts
+6. Everytime you save, localhost:8000 will auto-reload with a new preview
+7. Commit all your changes to a branch, and submit the PR
 
 ## Local development
 
-You can use `-p` to set the custom port and `-H` to set the custom host like beblow. Find more from [gatsbyjs document](https://www.gatsbyjs.com/docs/gatsby-cli/)
+You can use `-p` to set the custom port and `-H` to set the custom host like
+below. Find more from
+[Gatsby's documentation](https://www.gatsbyjs.com/docs/gatsby-cli/).
 
 ```bash
 yarn run develop -p 8080 -H 0.0.0.0
 ```
 
+## Contact
+
+Open an issue, or better yet, reach out on [Slack](https://ebpf.io/slack/).

src/pages/contribute.js

@@ -1,6 +1,7 @@
 import Helmet from "react-helmet";
 import Layout from "../layouts";
 import React from "react";
+import { TitleWithAnchor } from "../common/TitleWithAnchor";
 
 import "../stylesheets/index.scss";
 
@@ -51,7 +52,7 @@ const Page = () => (
         how you can get involved and contribute to the community.
       </p>
 
-      <h2>Contribute to the eBPF runtime in the Linux kernel</h2>
+      <TitleWithAnchor headerClassName="contribute-common-title">Contribute to the eBPF runtime in the Linux kernel</TitleWithAnchor>
       <p>
         The Linux kernel community is maintaining separate <a
         href="https://git.kernel.org/?q=BPF+Group">Git trees</a> for the eBPF
@@ -72,7 +73,7 @@ const Page = () => (
         kernel eBPF runtime</a> for additional details.
       </p>
 
-      <h2>Contribute to an eBPF project</h2>
+      <TitleWithAnchor headerClassName="contribute-common-title">Contribute to an eBPF project</TitleWithAnchor>
       <p>
         The list of eBPF-based projects is long and growing. It will be simple to
         find a project that sparks interest. Check out the <a
@@ -85,7 +86,7 @@ const Page = () => (
         provide a great opportunity to get hands-on quickly.
       </p>
 
-      <h2>Contribute to the eBPF development toolchains</h2>
+      <TitleWithAnchor headerClassName="contribute-common-title">Contribute to the eBPF development toolchains</TitleWithAnchor>
       <p>
         Even though the Linux kernel provides minimal libraries and APIs to use
         eBPF directly, the majority of projects leverage an eBPF development
@@ -99,7 +100,7 @@ const Page = () => (
         directly.
       </p>
 
-      <h2>Contribute to ebpf.io</h2>
+      <TitleWithAnchor headerClassName="contribute-common-title">Contribute to ebpf.io</TitleWithAnchor>
       <p>
         Do you have a writing talent? Are you good with diagrams? The content of the
         ebpf.io website is licensed under a <a

src/stylesheets/index.scss

@@ -471,7 +471,8 @@ code {
   }
 }
 
-.projects-common-title {
+.projects-common-title,
+.contribute-common-title {
   position: relative;
 
   & > .anchor {
@@ -493,6 +494,14 @@ code {
   }
 }
 
+.contribute-common-title {
+  & > .anchor {
+    svg {
+      margin-top: 60%;
+    }
+  }
+}
+
 .page-projects {
   .projects-title {
     margin-top: 92px;