Better code blocks

README.md

@@ -1,6 +1,12 @@
+<div align="center">
+  <a href="https://grain-lang.org/">
+    <img src="https://raw.githubusercontent.com/grain-lang/grain/master/grain_shorthand_color.png" alt="Grain" height="200" />
+  </a>
+</div>
+
 # Grain Website
 
-Documentation for the Grain programming language.
+Documentation for the Grain programming language at [grain-lang.org](https://grain-lang.org/).
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/62e3f960-de88-4a28-a8f8-b8dddca145cb/deploy-status)](https://app.netlify.com/sites/grain-lang/deploys)
 
@@ -10,52 +16,29 @@ This documentation site is a [Hexo](https://hexo.io/) site. All of the docs are
 
 ## Contributing
 
-### Documentation Site
-
-The documentation site is everything served from `/docs/` and `/guide/` on the [main Grain website](https://grain-lang.org/).
-
-To get the docs up and running locally, just run
-
-```sh
-npm install
-npm start
-```
-
-You can run `npm run start:guide` if you want to see changes to the guide.
+### Editing a Document
 
-This will install all necessary dependencies and serve the website on port 4000.
+To make a change to a document, edit the corresponding Markdown file in [src](src). The file path matches the URL path after `/docs`, but if you have trouble finding the page you're looking for, you can click the "Edit on GitHub" button at the top of page on the website.
 
-For simple edits to the existing Markdown files, just edit them as you would any normal Markdown.
+### Adding a New Document
 
-To add a new page, add a new Markdown file in the relevant location and update `_config.yml` to include it. It's the same as normal Markdown, but you must include a set of front matter, i.e. a set of key value pairs that begin the file and surrounded by dashes, like so:
+Create your new Markdown file in `src`. You'll also need to update [docs_config.yml](docs_config.yml) to include your new page in the sidebar. Each document starts with some front-matter, which is a bit of yml/json that is given to the renderer. For now, this only includes the title of the page. Since the title of the page is an `h1`, headers in your document should begin at level 2:
 
-```
+```markdown
 ---
 title: Some Title of Some Topic
 ---
 
-## Content begins here
+## Content Begins Here
 ```
 
-The title is inserted at the beginning of the page, and is used in the sidebar. Thus, all headings in the Markdown files should start at heading level 2.
+### Previewing the Site
 
-### Home Page
-
-The home page is just static HTML/CSS. To get it running, start a web server in your local directory. For example:
+Once a PR is created, Netlify will create a preview site and comment on the PR with a link. If you'd like to view your changes locally, run
 
 ```sh
-python -m SimpleHTTPServer 4040
-# This starts a server on port 4040
-```
-
-### Putting It All Together
-
-If for some reason you wish to view the entire site running together, you can run
-
-```sh
-npm run build
+npm install
+npm start
 ```
 
-and then follow the steps outlined in the Home Page section.
-
-Don't commit the `/docs/` directory, as we wish to keep this repo clean (it's not in the `.gitignore` because those files need to be checked into source control for GitHub pages to work properly, and that's done automatically on the `master` branch).
+This will install all build dependencies and serve the website on port 3000.

index.html

@@ -10,7 +10,7 @@
     gtag('config', 'UA-123482724-1');
   </script>
   <title>Grain: A strongly-typed functional programming language for the modern web.</title>
-  <meta name="description" content="Grain is a strongly-typed functional programming language built for the modern web. It compiles to WebAssembly, the project to provide developers more freedom when developing for the online world.">
+  <meta name="description" content="Grain is a new programming language that puts academic language features to work.">
   <link rel="canonical" href="https://grain-lang.org/" />
   <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png" />
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png" />

scripts/syntaxHighlight.js

@@ -43,7 +43,7 @@ registry.loadGrammar('source.grain').then(grammar => {
         ruleStack = lineTokens.ruleStack;
       }
 
-      return `<figure class="tm-highlight"><table><tbody><tr>${makeGutter(text.length)}<td class="code"><pre>${result.join('')}</pre></td></tr></tbody></table></figure>`;
+      return `<figure class="tm-highlight"><table><tbody><tr>${makeGutter(text.length)}<td class="code"><pre>${result.join('')}</pre></td><td class="code-tools"><a class="code-copy" role="button" alt="copy code"><i class="far fa-clone"></i></a></td></tr></tbody></table></figure>`;
     }
   })
 })

stylesheets/style.css

@@ -6,7 +6,7 @@ html {
   --orange: rgb(255, 133, 14);
   --white: white;
   --gray2: #9B9B9B;
-  --blue: #414770;
+  --blue: #202C59;
   --black: #33333A;
 
   --font-heading: "Source Sans Pro", sans-serif;

themes/grain/layout/layout.ejs

@@ -10,7 +10,7 @@
     gtag('config', 'UA-123482724-1');
   </script>
   <title>Grain Docs - <%- page.title %></title>
-  <meta name="description" content="Grain is a functional programming language built for the modern web. It compiles to WebAssembly, the project to provide developers more freedom when developing for the online world.">
+  <meta name="description" content="Grain is a new programming language that puts academic language features to work.">
   <meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1,user-scalable=yes">
   <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png" />
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png" />
@@ -37,11 +37,10 @@
   <script src="https://kit.fontawesome.com/080d9b67ba.js" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="/<%- config.project %>/css/style.css" />
   <link rel="stylesheet" href="/<%- config.project %>/css/source.grain.css" />
-  <!--<link rel="stylesheet" href="https://grain-lang.org/javascripts/prism.css" />-->
 </head>
 <body>
   <%- body %>
-  <!--<script src="https://grain-lang.org/javascripts/prism.js"></script>-->
+  <div class="grain-snackbar">This is a notification!</div>
   <script src="/javascripts/active-menu-link.js"></script>
   <script src="/<%- config.project %>/js/main.js"></script>
 </body>