Docs: add code helper

Author: geovie

.gitignore

@@ -18,3 +18,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+scripts/js

docs/guides/basic_authentication.mdx

@@ -22,6 +22,14 @@ Sign up is just one easy call which returns an instance of the main etebase clas
 <CodeTabs>
 <TabItem value="js">
 
+<HiddenCode>
+
+```js
+const serverUrl = "";
+```
+
+</HiddenCode>
+
 ```js
 // serverUrl can be obtained from the dashboard (or omitted for default)
 const etebase = await Etebase.Account.signup({
@@ -104,6 +112,14 @@ Login is too just one easy call which returns an instance of the main etebase cl
 <CodeTabs>
 <TabItem value="js">
 
+<HiddenCode>
+
+```js
+const serverUrl = "";
+```
+
+</HiddenCode>
+
 ```js
 // serverUrl can be obtained from the dashboard (or omitted for default)
 const etebase = await Etebase.Account.login("username", "password", serverUrl);
@@ -178,6 +194,14 @@ Unlike signup and login, changing password requires an already set up etebase ob
 <CodeTabs>
 <TabItem value="js">
 
+<HiddenCode>
+
+```js
+const etebase = await Etebase.Account.restore('');
+```
+
+</HiddenCode>
+
 ```js
 await etebase.changePassword("new password");
 ```
@@ -225,6 +249,14 @@ etebase.change_password("new password")?;
 <CodeTabs>
 <TabItem value="js">
 
+<HiddenCode>
+
+```js
+const etebase = await Etebase.Account.restore('');
+```
+
+</HiddenCode>
+
 ```js
 await etebase.logout();
 ```
@@ -276,12 +308,20 @@ Saving and restoring a session is as simple as:
 <CodeTabs>
 <TabItem value="js">
 
+<HiddenCode>
+
 ```js
-const etebase = await Etebase.Account.login("username", "password", serverUrl);
+const serverUrl = "";
+```
+
+</HiddenCode>
+
+```js
+let etebase = await Etebase.Account.login("username", "password", serverUrl);
 const savedSession = await etebase.save();
 
 // Later on...
-const etebase = await Etebase.Account.restore(savedSession);
+etebase = await Etebase.Account.restore(savedSession);
 ```
 
 </TabItem>
@@ -371,14 +411,14 @@ stored securely (e.g. in the operating system's key store), or securely derived
 <TabItem value="js">
 
 ```js
-const etebase = await Etebase.Account.login("username", "password");
+let etebase = await Etebase.Account.login("username", "password");
 
 // Save the key somewhere safe (e.g. the OS's key store)
 const encryptionKey = Etebase.randomBytes(32);
 const savedSession = await etebase.save(encryptionKey);
 
 // Later on...
-const etebase = await Etebase.Account.restore(savedSession, encryptionKey);
+etebase = await Etebase.Account.restore(savedSession, encryptionKey);
 ```
 
 </TabItem>
@@ -554,6 +594,14 @@ When saving etebase instances with `cacheSave` the server URL is also being save
 <CodeTabs>
 <TabItem value="js">
 
+<HiddenCode>
+
+```js
+const savedSession = "";
+```
+
+</HiddenCode>
+
 ```js
 const etebase = await Etebase.Account.restore(savedSession);
 etebase.serverUrl = "http://new-development-server";

scripts/extract.js

@@ -0,0 +1,94 @@
+const { createMdxAstCompiler } = require("@mdx-js/mdx");
+
+const astCompiler = createMdxAstCompiler({ remarkPlugins: [] });
+
+const fs = require("fs");
+const glob = require("glob");
+const util = require("util");
+const { parse } = require("path");
+const { execSync } = require("child_process");
+
+main()
+
+async function main() {
+  const matches = await util.promisify(glob)("**/*.{md,mdx}", { cwd: "docs" });
+  for (const file of matches) {
+    const path = parse(file);
+    const basePath = `scripts/js/src/${path.dir}/${path.name}`;
+    fs.mkdirSync(basePath, {
+      recursive: true,
+    });
+
+    const content = fs.readFileSync(`docs/${file}`);
+
+    const root = astCompiler.parse(content);
+
+    let index = 1;
+    function writeFile(node, i, array) {
+      if (writeCodeToFile(node, i, array, `${basePath}/${index}.ts`)) {
+        index++;
+      }
+      if (node.children) {
+        node.children.forEach((element, i, array) => {
+          writeFile(element, i, array);
+        });
+      }
+    }
+
+    writeFile(root);
+  }
+
+  process.chdir("scripts/js");
+
+  execSync("yarn init -y");
+  execSync("yarn add etebase typescript");
+  execSync("yarn tsc --init");
+
+  try {
+    execSync("yarn tsc --noEmit");
+  } catch (e) {
+    console.log(e.stdout.toString());
+    console.error(e.stderr.toString());
+    process.exit(1);
+  }
+}
+
+function writeCodeToFile(node, i, array, file) {
+  if (
+    node.type === "jsx" &&
+    node.value &&
+    node.value.includes('<TabItem value="js">')
+  ) {
+    const codePieces = [];
+    for (let j = i + 1; j < array.length; j++) {
+      if (
+        array[j].type === "jsx" &&
+        array[j].value &&
+        array[j].value.includes("</TabItem>")
+      ) {
+        break;
+      }
+      if (array[j].type === "code" && array[j].lang === "js") {
+        codePieces.push({
+          code: array[j].value,
+          start: array[j].position.start,
+          end: array[j].position.end,
+        });
+      }
+    }
+    const output = `
+import * as Etebase from 'etebase';
+
+async function main() {
+${codePieces.map((piece) => `
+//-start ${JSON.stringify(piece.start)}
+${piece.code}
+//-end ${JSON.stringify(piece.end)}
+`
+).join('')}
+}`;
+    fs.writeFileSync(file, output);
+    return true;
+  }
+  return false;
+}

scripts/insert.js

@@ -0,0 +1,45 @@
+const fs = require("fs");
+const path = require("path");
+const glob = require("glob");
+
+glob("**/*.ts", { cwd: "scripts/js/src" }, (_err, matches) => {
+  matches.reverse().forEach((element) => {
+    importFromFile(element, "scripts/js/src");
+  });
+});
+
+function importFromFile(file, base) {
+  const exportedContent = fs.readFileSync(path.join(base, file)).toString();
+  const reg = /\/\/-start (\S*)(.*?)\/\/-end (\S*)/gms;
+
+  const changes = [];
+
+  let match;
+  while ((match = reg.exec(exportedContent)) !== null) {
+    const start = JSON.parse(match[1]);
+    const code = match[2];
+    const end = JSON.parse(match[3]);
+    changes.push({ start, code, end });
+  }
+
+  const parsed = path.parse(file);
+  let outputPath = `docs/${parsed.dir}.md`;
+  if (!fs.existsSync()) {
+    outputPath += "x";
+  }
+
+  let oldContent = fs.readFileSync(outputPath).toString();
+  const newContent = changes
+    .sort((a, b) => a.start.offset - b.start.offset)
+    .reduce(
+      (content, change) =>
+        content.slice(0, change.start.offset) +
+        "```js" +
+        change.code +
+        "```" +
+        content.slice(change.end.offset),
+      oldContent
+    );
+
+  fs.writeFileSync(outputPath, newContent);
+}

src/theme/HiddenCode.js

@@ -0,0 +1,3 @@
+export default function HiddenCode() {
+  return null;
+}