Skip to content

drashland/website-v2

Repository files navigation

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.

  1. 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 ...

Syntax Highlight

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 ...

Diff + Syntax Highlighting

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