Merge pull request #149 from code-hike/ch-test-site

Add test site

Author: pomber

.gitpod.yml

@@ -0,0 +1,70 @@
+# Comment annotations
+
+Instead of defining the focus on the codeblock metastring, you can us comments inside the code to make the focus relative.
+
+```js
+function lorem(ipsum, dolor = 1) {
+  const sit = ipsum == null && 0
+  dolor = sit - amet(dolor)
+  // focus
+  return sit ? consectetur(ipsum) : []
+}
+
+// focus(1:4)
+function adipiscing(...elit) {
+  console.log(elit)
+  return elit.map(ipsum => ipsum.sit)
+}
+
+// focus[13:17]
+console.log("hey")
+```
+
+Same with other annotations like `bg` and `box`.
+
+```js
+// bg(1:2)
+function foo() {
+  // box[6:9]
+  console.log("hover me")
+  return 8
+}
+```
+
+You can pass a string parameter to comment annotations. For `bg` and `box`, it will be used as a color.
+
+```js index.js
+function lorem(ipsum, dolor = 1) {
+  // bg(1:3) linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%)
+  const sit = ipsum == null && 0
+  dolor = sit - amet(dolor)
+  return sit ? consectetur(ipsum) : []
+}
+
+// this comment isn't an annotation
+//hello
+// 你好
+// å
+function adipiscing(...elit) {
+  console.log(elit)
+  // box[19:36] aqua
+  return elit.map(ipsum => ipsum.sit)
+}
+```
+
+And now we introduce two more annotations: `link` and `label`
+
+```js focus=4,8
+function lorem(ipsum, dolor = 1) {
+  const sit = ipsum == null && 0
+  dolor = sit - amet(dolor)
+  // link[16:26] https://github.com/code-hike/codehike
+  return sit ? consectetur(ipsum) : []
+}
+
+function adipiscing(...elit) {
+  // label something something
+  console.log("hover me")
+  return elit.map(ipsum => ipsum.sit)
+}
+```

examples/contentlayer/.gitignore

@@ -0,0 +1,29 @@
+# Annotations
+
+Besides `focus`, there are a few more annotations that can be used to highlight code.
+
+<div foo={CH.annotations.Label} />
+
+### `box` annotation
+
+```js box=2[15:43],4[10:12]
+function lorem(ipsum, dolor = 1) {
+  const sit = ipsum == null ? 0 : ipsum.sit
+  dolor = sit - amet(dolor)
+  return sit
+    ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+    : []
+}
+```
+
+### `bg` annotation
+
+```js bg=2,4:6
+function lorem(ipsum, dolor = 1) {
+  const sit = ipsum == null ? 0 : ipsum.sit
+  dolor = sit - amet(dolor)
+  return sit
+    ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+    : []
+}
+```

examples/contentlayer/contentlayer.config.js

@@ -0,0 +1,135 @@
+_Based on [Next.js official docs](https://nextjs.org/docs/advanced-features/using-mdx)._
+
+Start by installing next and react on an empty directory:
+
+```bash
+npm install next react react-dom
+```
+
+<CH.Section>
+
+Then also install the [mdx plugin for next](focus://1[13:21]), the [mdx loader](focus://1[23:36]), and [Code Hike](focus://1[38:56]).
+
+```bash
+npm install @next/mdx @mdx-js/loader @code-hike/mdx@next
+```
+
+</CH.Section>
+
+<div style={{ height: "0.5em" }} />
+
+<CH.Scrollycoding>
+
+Create a `next.config.js` file at the root of your project.
+
+Here we use the [_`require("@next/mdx")`_](focus://1,6,8) plugin to set up MDX imports.
+
+Also, make sure you include `"md"` and `"mdx"` on the _`pageExtensions`_ setting.
+
+After this step, you can use MDX files in your project, but you can't use Code Hike yet.
+
+{/* prettier-ignore */}
+```js next.config.js
+const withMDX = require("@next/mdx")({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [],
+  },
+})
+
+module.exports = withMDX({
+  pageExtensions: [
+    "ts", "tsx", "js", 
+    "jsx", "md", "mdx"
+  ],
+})
+```
+
+---
+
+To set up Code Hike you need to [import the <CH.InlineCode>@code-hike/mdx</CH.InlineCode> plugin](focus://1,6[1:6]), and add it to the remarkPlugins array in the next.config.js file.
+
+You will also want to import a theme. You can import one from shiki, or make a custom one.
+
+Pass the theme into Code Hike's config object, there are a few more settings you can use, like lineNumbers for example.
+
+{/* prettier-ignore */}
+```js next.config.js focus=1:2,7:9
+const { remarkCH } = require("@code-hike/mdx")
+const theme = require("shiki/themes/nord.json")
+
+const withMDX = require("@next/mdx")({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [
+      [remarkCH, { theme }]
+    ],
+  },
+})
+
+module.exports = withMDX({
+  pageExtensions: [
+    "ts", "tsx", "js", 
+    "jsx", "md", "mdx"
+  ],
+})
+```
+
+---
+
+Then you need to create a `pages/_app.js` file if you don't have one.
+
+You can find more information about the `_app.js` file in the [Next.js official docs](https://nextjs.org/docs/advanced-features/custom-app).
+
+{/* prettier-ignore */}
+```js pages/_app.js
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
+```
+
+---
+
+The pages/\_app.js file is where you add global stylesheets in Next.js.
+
+Here we need to import Code Hike's CSS.
+
+If you want to customize Code Hike's styles with a global stylesheet make sure to import it after this import to avoid specificity issues.
+
+{/* prettier-ignore */}
+```js pages/_app.js focus=1
+import "@code-hike/mdx/dist/index.css"
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
+```
+
+---
+
+Now you can create mdx files using codehike.
+
+Markdown (.md) files should also work.
+
+{/* prettier-ignore */}
+~~~md pages/my.mdx
+# Hello
+
+Lorem ipsum dolor sit amet.
+
+```python hello.py
+print("Rendered with Code Hike")
+```
+
+Lorem ipsum dolor sit amet.
+~~~
+
+</CH.Scrollycoding>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.