Embed syntax (#47)

Co-authored-by: Subash <subash@vuln.in>

guide/getting-started.md

@@ -4,7 +4,7 @@ Pear Runtime can be installed from the [pears.com](pears.com) or via [npm](https
 
 Since `npm` (or equivalent package manager) is needed to install application dependencies this guide will walk through installing `pear` with `npm`.
 
-> [Build with Pear - Episode 01: Developing with Pear](https://www.youtube.com/watch?v=y2G97xz78gU)
+{% embed url="https://www.youtube.com/watch?v=y2G97xz78gU" %} Build with Pear - Episode 01: Developing with Pear {% embeded %}
 
 ## Requirements
 

guide/making-a-pear-desktop-app.md

@@ -4,7 +4,7 @@ This guide demonstrates how to build a peer-to-peer chat application.
 
 It continues where [Starting a Pear Desktop Project](./starting-a-pear-desktop-project.md) left off.
 
-> [Build with Pear - Episode 01: Developing with Pear](https://www.youtube.com/watch?v=y2G97xz78gU)
+{% embed url="https://www.youtube.com/watch?v=y2G97xz78gU" %} Build with Pear - Episode 01: Developing with Pear {% embeded %}
 
 ## Step 1. HTML Structure and CSS Styles
 

guide/making-a-pear-terminal-app.md

@@ -4,7 +4,7 @@ This guide demonstrates how to build a peer-to-peer chat application.
 
 It continues where [Starting a Pear Terminal Project](./starting-a-pear-terminal-project.md) left off.
 
-> [Build with Pear - Episode 04: Pear Terminal Applications](https://www.youtube.com/watch?v=UoGJ7PtAwtI)
+{% embed url="https://www.youtube.com/watch?v=UoGJ7PtAwtI" %} Build with Pear - Episode 04: Pear Terminal Applications {% embeded %}
 
 ## Step 1. Install modules
 

guide/releasing-a-pear-app.md

@@ -4,7 +4,7 @@ Pear applications are stored in an append-only log ([hypercore](../building-bloc
 
 Each version is identified by `<fork>.<length>.<key>`. The length corresponds to the length of the application's append-only log at the time.
 
-> [Build with Pear - Episode 03: Releasing Pear Applications](https://www.youtube.com/watch?v=OTwY_avUPyI)
+{% embed url="https://www.youtube.com/watch?v=OTwY_avUPyI" %} Build with Pear - Episode 03: Releasing Pear Applications {% embeded %}
 
 `pear run <key>` opens the application.
 

guide/sharing-a-pear-app.md

@@ -2,7 +2,7 @@
 
 Applications can be shared with peers by seeding them to the network from an efficient local data structure (a [hypercore](../building-blocks/hypercore.md)). We call the mirroring of a local file system into the Pear platform Application Storage "staging". Seeding is sharing an app from a machine over the Distributed Hash Table (DHT) (via [hyperswarm](../building-blocks/hyperswarm.md)) so that other peers can replicate, consume and reseed the application.
 
-> [Build with Pear - Episode 02: Sharing Pear Applications](https://www.youtube.com/watch?v=BEadqmp7lA0)
+{% embed url="https://www.youtube.com/watch?v=BEadqmp7lA0" %} Build with Pear - Episode 02: Sharing Pear Applications {% embeded %}
 
 This guide can either follow on from, [Making a Pear Desktop Application](./making-a-pear-desktop-app.md), [Making a Pear Terminal Application](./making-a-pear-terminal-app.md), or get setup quickly with the following:
 

guide/starting-a-pear-desktop-project.md

@@ -2,7 +2,7 @@
 
 This section shows how to generate, configure, and develop a Pear desktop project, in preparation for [Making a Pear Desktop Application](./making-a-pear-desktop-app.md).
 
-> [Build with Pear - Episode 01: Developing with Pear](https://www.youtube.com/watch?v=y2G97xz78gU)
+{% embed url="https://www.youtube.com/watch?v=y2G97xz78gU" %} Build with Pear - Episode 01: Developing with Pear {% embeded %}
 
 ## Step 1. Initialization
 

guide/starting-a-pear-terminal-project.md

@@ -1,6 +1,6 @@
 # Starting a Pear Terminal Project
 
-> [Build with Pear - Episode 04: Pear Terminal Applications](https://www.youtube.com/watch?v=UoGJ7PtAwtI)
+{% embed url="https://www.youtube.com/watch?v=UoGJ7PtAwtI" %} Build with Pear - Episode 04: Pear Terminal Applications {% embeded %}
 
 ## Step 1. Init
 

howto/connect-to-many-peers-by-topic-with-hyperswarm.md

@@ -4,7 +4,7 @@ In the former example, two peers connected directly using the first peer's publi
 
 The [Hyperswarm](../building-blocks/hyperswarm.md) module provides a higher-level interface over the underlying DHT, abstracting away the mechanics of establishing and maintaining connections. Instead, 'join' topics, and the swarm discovers peers automatically. It also handles reconnections in the event of failures.
 
-> [Build with Pear - Episode 01: Developing with Pear](https://www.youtube.com/watch?v=y2G97xz78gU)
+{% embed url="https://www.youtube.com/watch?v=y2G97xz78gU" %} Build with Pear - Episode 01: Developing with Pear {% embeded %}
 
 In the [How to connect two Peers by key with Hyperdht](./connect-two-peers-by-key-with-hyperdht.md), we needed to explicitly indicate which peer was the server and which was the client. By using Hyperswarm, we create two peers, have them join a common topic, and let the swarm deal with connections.
 

howto/replicate-and-persist-with-hypercore.md

@@ -4,7 +4,7 @@ In the HyperDHT How-to ([Connect Two Peers](./connect-two-peers-by-key-with-hype
 
 [`Hypercore`](../building-blocks/hypercore.md) is a secure, distributed append-only log. It is built for sharing enormous datasets and streams of real-time data. It has a secure transport protocol, making it easy to build fast and scalable peer-to-peer applications.
 
-> [Build with Pear - Episode 05: Replication and Persistence](https://www.youtube.com/watch?v=5t2mOi0BeDg)
+{% embed url="https://www.youtube.com/watch?v=5t2mOi0BeDg" %} Build with Pear - Episode 05: Replication and Persistence {% embeded %}
 
 In this guide we'll extend the ephemeral chat example in [Connect Many Peers](./connect-to-many-peers-by-topic-with-hyperswarm.md) but using Hypercore to add many significant new features:
 

lib/docs-viewer.js

@@ -68,10 +68,20 @@ customElements.define('docs-viewer', class extends HTMLElement {
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
   }
 
+  patchSyntax(input) {
+    // remove backticks inside link, example: [`hypercore`] -> [hypercore]
+    let output = input.replace(/\[`([^`]+)`\]/g, "[$1]")
+
+    // remove gitbook embed syntax
+    output =  output.replace(/{% embed url="([^"]+)" %}\s*(.*?)\s*{% embeded %}/g, '> [$2]($1)')
+
+    return output
+  }
+
   async load (page = '/') {
     if (page === '/') page = this.entry
     const html = await fetch(page)
-    const text = await marked.parse((await html.text()).replace(/\[`([^`]+)`\]/g, "[$1]")) // remove backticks inside link, example: [`hypercore`] -> [hypercore]
+    const text = await marked.parse(this.patchSyntax(await html.text()))
     this.panel.querySelector('slot').innerHTML = text
     this.panel.style.display = ''
   }