Merge pull request #8 from code-hike/with-docusaurus

Docusaurus example

with-docusaurus/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

with-docusaurus/README.md

@@ -0,0 +1,11 @@
+This is an example website using Docusaurus (v3.5.0+) and Code Hike.
+
+- [Code Hike](https://v1.codehike.org) - learn about Code Hike
+- [Docusaurus](https://docusaurus.io) - learn about Docusaurus
+
+Clone it with:
+
+```bash
+$ npx degit code-hike/examples/with-docusaurus my-docs
+$ cd my-docs
+```

with-docusaurus/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

with-docusaurus/docs/intro.mdx

@@ -0,0 +1,18 @@
+---
+sidebar_position: 1
+---
+
+# Docusaurus + Code Hike
+
+For more information, check out [Code Hike docs](https://v1.codehike.org/docs).
+
+```js
+const lorem = ipsum(dolor, sit)
+// !callout[/amet/] This is a callout
+const [amet, consectetur] = [0, 0]
+lorem.adipiscing((sed, elit) => {
+  if (sed) {
+    amet += elit
+  }
+})
+```

with-docusaurus/docs/scrollycoding.mdx

@@ -0,0 +1,198 @@
+---
+sidebar_position: 2
+---
+
+import { Scrollycoding } from "/src/components/scrollycoding"
+
+# Scrollycoding
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus elit, tincidunt consectetur auctor ac, dignissim eget dolor. Integer magna ante, dictum ut posuere sed, faucibus quis risus.
+
+Phasellus id dolor lacinia, commodo nisl non, condimentum ante. Nam diam augue, tempor quis condimentum eget, luctus vitae felis. Aenean maximus ultrices massa ac viverra. Nullam tellus enim, tincidunt ac ligula eu, placerat vulputate justo. Vivamus non dui malesuada, mattis dolor vitae, aliquam ipsum. Sed dapibus nibh nisi, sit amet consectetur sapien scelerisque at.
+
+<Scrollycoding>
+
+## !!steps A Game of Thrones
+
+A Game of Thrones is the first book in the A Song of Ice and Fire series by George R.R. Martin. Set in a world where seasons last for years, it introduces a complex plot and a wide cast of characters, ranging from noble families vying for the Iron Throne to the supernatural threats in the North.
+
+{/* prettier-ignore */}
+```js ! george.js
+const houses = [
+  "Stark",
+  "Lannister",
+  "Baratheon",
+  "Targaryen",
+]
+
+const winner =
+  houses[
+    Math.floor(
+      Math.random() * houses.length,
+    )
+  ]
+
+console.log(`Iron Throne: ${winner}`)
+```
+
+## !!steps A Clash of Kings
+
+A Clash of Kings, the second book in the series, continues the epic saga. The Seven Kingdoms are plunged into war, with kings rising and falling. Meanwhile, Daenerys Targaryen seeks to return to Westeros with her growing dragons.
+
+{/* prettier-ignore */}
+```js ! george.js
+const houses = [
+  "Stark",
+  "Lannister",
+  "Baratheon",
+  "Targaryen",
+]
+
+const clash = () => {
+  const winner =
+    houses[
+      Math.floor(
+        Math.random() * houses.length,
+      )
+    ]
+  return `${winner} wins the battle!`
+}
+
+console.log(clash())
+```
+
+## !!steps A Storm of Swords
+
+The third book, A Storm of Swords, is known for its intense and shocking developments. Battles rage on, alliances shift, and characters face unexpected challenges and betrayals, making it one of the most thrilling books in the series.
+
+{/* prettier-ignore */}
+```js ! george.js
+const houses = [
+  "Stark",
+  "Lannister",
+  "Baratheon",
+]
+
+const reveal = () => {
+  const traitor =
+    houses[
+      Math.floor(
+        Math.random() * houses.length,
+      )
+    ]
+  return `${traitor} betrays the alliance!`
+}
+
+console.log(reveal())
+```
+
+## !!steps A Feast for Crows
+
+A Feast for Crows, the fourth book, explores the aftermath of the wars, with a focus on the characters in the southern regions of Westeros. It delves into the politics and power struggles in a kingdom weary of battle.
+
+{/* prettier-ignore */}
+```js ! george.js
+const houses = [
+  "Martell",
+  "Lannister",
+  "Baratheon",
+  "Tyrell",
+]
+
+const intrigue = () => {
+  const ally1 =
+    houses[
+      Math.floor(
+        Math.random() * houses.length,
+      )
+    ]
+  const ally2 =
+    houses[
+      Math.floor(
+        Math.random() * houses.length,
+      )
+    ]
+  return `${ally1} and ${ally2} form an alliance!`
+}
+
+console.log(intrigue())
+```
+
+## !!steps A Dance with Dragons
+
+A Dance with Dragons, the fifth book, runs concurrently with A Feast for Crows and focuses on the characters in the North and across the Narrow Sea. The story advances with dragons, the Night’s Watch, and the lingering threat of winter.
+
+{/* prettier-ignore */}
+```js ! george.js
+const houses = [
+  "Stark",
+  "Lannister",
+  "Baratheon",
+  "Targaryen",
+]
+
+const dragons = () => {
+  const dragon =
+    houses[
+      Math.floor(
+        Math.random() * houses.length,
+      )
+    ]
+  return `${dragon} has a dragon!`
+}
+
+console.log(dragons())
+```
+
+## !!steps The Winds of Winter
+
+The Winds of Winter, the anticipated sixth book, is expected to continue the intricate storylines and bring new twists and turns to the world of Westeros. Fans eagerly await its release.
+
+```js ! george.js
+const houses = [
+  "Stark",
+  "Lannister",
+  "Baratheon",
+  "Targaryen",
+  "Martell",
+  "Tyrell",
+  "Greyjoy",
+]
+
+const winterIsComing = () => {
+  const isComing = Math.random() > 0.99
+  if (isComing) {
+    return "Winter is coming!"
+  } else {
+    return "Winter is not coming."
+  }
+}
+
+console.log(winterIsComing())
+```
+
+## !!steps A Dream of Spring
+
+A Dream of Spring is the proposed final book in the series, anticipated to conclude the epic saga. It remains one of the most awaited books in modern fantasy literature.
+
+```js ! george.js
+const houses = [
+  "Stark",
+  "Lannister",
+  "Baratheon",
+  "Targaryen",
+  "Martell",
+  "Tyrell",
+  "Greyjoy",
+]
+
+const keepDreaming = () => {
+  return "Not gonna happen..."
+}
+
+console.log(keepDreaming())
+```
+
+</Scrollycoding>
+
+Quisque id pretium neque. Vestibulum metus orci, pretium nec varius convallis, viverra quis urna. Praesent luctus, purus nec tempus placerat, justo lorem auctor ligula, ut condimentum tellus velit ac erat. Fusce ut dictum libero. Vestibulum ipsum mauris, cursus sed tortor at, rhoncus viverra ipsum. Donec odio dolor, varius quis congue posuere, tempor et justo. Praesent at scelerisque metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed malesuada leo vitae mauris eleifend condimentum. Proin auctor, ex ac aliquam gravida, felis felis lacinia libero, efficitur aliquet nulla neque sed elit. Vestibulum congue aliquam risus, sit amet rutrum magna euismod ac. Integer posuere neque nec ex sollicitudin rhoncus.

with-docusaurus/docs/tutorial-basics/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Tutorial - Basics",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn the most important Docusaurus concepts."
+  }
+}

with-docusaurus/docs/tutorial-basics/congratulations.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 6
+---
+
+# Congratulations!
+
+You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
+
+Docusaurus has **much more to offer**!
+
+Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
+
+Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
+
+## What's next?
+
+- Read the [official documentation](https://docusaurus.io/)
+- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
+- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
+- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
+- Add a [search bar](https://docusaurus.io/docs/search)
+- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
+- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)

with-docusaurus/docs/tutorial-basics/create-a-blog-post.md

@@ -0,0 +1,34 @@
+---
+sidebar_position: 3
+---
+
+# Create a Blog Post
+
+Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
+
+## Create your first Post
+
+Create a file at `blog/2021-02-28-greetings.md`:
+
+```md title="blog/2021-02-28-greetings.md"
+---
+slug: greetings
+title: Greetings!
+authors:
+  - name: Joel Marcey
+    title: Co-creator of Docusaurus 1
+    url: https://github.com/JoelMarcey
+    image_url: https://github.com/JoelMarcey.png
+  - name: Sébastien Lorber
+    title: Docusaurus maintainer
+    url: https://sebastienlorber.com
+    image_url: https://github.com/slorber.png
+tags: [greetings]
+---
+
+Congratulations, you have made your first post!
+
+Feel free to play around and edit this post as much as you like.
+```
+
+A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).

with-docusaurus/docs/tutorial-basics/create-a-document.md

@@ -0,0 +1,57 @@
+---
+sidebar_position: 2
+---
+
+# Create a Document
+
+Documents are **groups of pages** connected through:
+
+- a **sidebar**
+- **previous/next navigation**
+- **versioning**
+
+## Create your first Doc
+
+Create a Markdown file at `docs/hello.md`:
+
+```md title="docs/hello.md"
+# Hello
+
+This is my **first Docusaurus document**!
+```
+
+A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
+
+## Configure the Sidebar
+
+Docusaurus automatically **creates a sidebar** from the `docs` folder.
+
+Add metadata to customize the sidebar label and position:
+
+```md title="docs/hello.md" {1-4}
+---
+sidebar_label: 'Hi!'
+sidebar_position: 3
+---
+
+# Hello
+
+This is my **first Docusaurus document**!
+```
+
+It is also possible to create your sidebar explicitly in `sidebars.js`:
+
+```js title="sidebars.js"
+export default {
+  tutorialSidebar: [
+    'intro',
+    // highlight-next-line
+    'hello',
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['tutorial-basics/create-a-document'],
+    },
+  ],
+};
+```