Drash Land Website (v2)

Running the Development Environment

1. Install dependencies.

   $ yarn install

2. Run the dev server.

   $ yarn dev

Note: Optionally, you can use yarn dev --port <PORT> to run your development environment on a different port.

3. Go to http://localhost:3000

Writing Documentation

All documentation is written using Markdown and stored in the /docs directory. The /docs directory is read by /pages/[...path_params].jsx which utilizes react-markdown to render the Markdown files.

In addition to Markdown syntax, this repository can also do the following with Markdown (with the help of react-markdown and Prism.js):

• Syntax highlighting
• Diff highlighting in specific languages
• Tabbed example code blocks

When writing documentation, you can use the additional features as outlined below.

Syntax Highlighting

To add syntax highlighting to a fenced code block, add the language you want to highlight by starting a fenced code block with the following:

```{language-goes-here}

The above will cause react-markdown to add a language-{language-goes-here} class name to the code block and call Prism.js to highlight the code.

As an example, using typescript to start a fenced code block ...

```typescript
import * as something from "./something.ts";
```

... renders as ...

Diff + Syntax Highlighting

To add diff and syntax highlighting to a fenced code block, use the following:

```diff-{language-goes-here}

The above will cause react-markdown to add a language-diff-{language-goes-here} class name to the code block and call Prism.js to highlight the code.

As an example, using diff-typescript to start a fenced code block ...

```diff-typescript
+ import { Rhum } from "...";
- import * as asserts from "https://deno.land/std@/testing/asserts.ts";

+ Rhum.asserts.assertEquals( ... );
- asserts.assertEquals( ... );
```

... renders as ...

Tabbed Code Blocks

To turn a fenced code block into a tabbed code block, separate the code in the code block with // @Tab {name of tab goes here}.

The below fenced code block (with // @Tab {name of tabe goes here} separators) ...

// @Tab Deno
import { Mock } from "./deps.ts";

// Some cool code goes here
// ...
// ...

// @Tab Node - JavaScript (ESM)
import { Mock } from "@drashland/rhum";

// Some cool code goes here
// ...
// ...

// @Tab Node - CommonJS
const { Mock } = require("@drashland/rhum");

// Some cool code goes here
// ...
// ...

... renders like the tabbed code blocks on this page: https://drash.land/rhum/v2.x/getting-started/introduction

Tech Stack

• Jest - Testing framework
• Next.js - Web framework
• Prism.js - Syntax highlighting for code blocks
• react-markdown - Used to render React components from Markdown files in /docs directory
• styled-components - Used to quickly style React components