feat: add text imports (#79)

docs/guides/docs/installation/index.mdx

@@ -17,13 +17,17 @@ This guide covers the following topics:
 
 ## Installing Rust
 
+{/* install_rust:example:start */}
 The Fuel toolchain is built on top of the Rust programming language. To install Rust, you can use the `rustup` tool.
+{/* install_rust:example:end */}
 
 Run the following command in your shell; this downloads and runs rustup-init.sh, which in turn downloads and runs the correct version of the `rustup-init` executable for your platform.
 
+{/* install_rust_command:example:start */}
 ```console
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
 ```
+{/* install_rust_command:example:end */}
 
 Check the official Rust documentation to get more information on [installing the Rust toolchain](https://www.rust-lang.org/tools/install).
 
@@ -35,16 +39,19 @@ toolchains and keep them updated. It makes building and maintaining Sway applica
 
 > 💡 Check out the [fuelup docs](docs/fuelup) for more information.
 
-
 ### Running fuelup-init
 
+{/* install_fuelup:example:start */}
 To install the Fuel toolchain, you'll use the `fuelup-init` script. This will install `forc`, `forc-client`, `forc-fmt`, `forc-lsp`, `forc-wallet` as well as `fuel-core` in `~/.fuelup/bin`.
+{/* install_fuelup:example:end */}
 
 👉 Just paste the following line in your terminal and press _Enter_.
 
+{/* install_fuelup_command:example:start */}
 ```sh
 curl --proto '=https' --tlsv1.2 -sSf https://install.fuel.network/fuelup-init.sh | sh
 ```
+{/* install_fuelup_command:example:end */}
 
 > 🚧 Be aware that currently  we do not natively support Windows. If you wish to use `fuelup` on Windows, please use Windows Subsystem for Linux.
 
@@ -119,11 +126,16 @@ The `beta-4` network is the latest Fuel testnet. This includes public infrastruc
 
 To properly interact with the `beta-4` network it is necessary to use its corresponding toolchain.
 
+{/* install_beta-4:example:start */}
 👉 Run the following command to install the `beta-4` toolchain:
+{/* install_beta-4:example:end */}
 
+{/* install_beta-4_command:example:start */}
 ```console
 fuelup toolchain install beta-4
 ```
+{/* install_beta-4_command:example:end */}
+
 If the toolchain was successfully installed, you will see this output:
 
 ```sh
@@ -132,11 +144,15 @@ The Fuel toolchain is installed and up to date
 
 The toolchain was installed correctly, however is not in use yet. Next, you need to configure `fuelup` to use the `beta-4` toolchain as the default.
 
+{/* set_default_beta-4:example:start */}
 👉 Set `beta-4` as your default toolchain with the following command:
+{/* set_default_beta-4:example:end */}
 
+{/* set_default_beta-4_command:example:start */}
 ```console
 fuelup default beta-4
 ```
+{/* set_default_beta-4_command:example:end */}
 
 You will get the following output indicating that you have successfully set `beta-4` as your default toolchain. 
 

docs/guides/docs/quickstart/building-a-smart-contract.mdx

@@ -10,7 +10,63 @@ parent:
 
 ## Installation
 
-Please visit the [installation guide](guides/installation) to install the Fuel toolchain binaries and prerequisites.
+<TextImport
+  file="../installation/index.mdx"
+  comment="install_rust"
+  commentType="{/*"
+/>
+
+<CodeImport
+  file="../installation/index.mdx"
+  comment="install_rust_command"
+  commentType="{/*"
+  lang="sh"
+  trim="true"
+/>
+
+<TextImport
+  file="../installation/index.mdx"
+  comment="install_fuelup"
+  commentType="{/*"
+/>
+
+<CodeImport
+  file="../installation/index.mdx"
+  comment="install_fuelup_command"
+  commentType="{/*"
+  lang="sh"
+  trim="true"
+/>
+
+<TextImport
+  file="../installation/index.mdx"
+  comment="install_beta-4"
+  commentType="{/*"
+/>
+
+<CodeImport
+  file="../installation/index.mdx"
+  comment="install_beta-4_command"
+  commentType="{/*"
+  lang="sh"
+  trim="true"
+/>
+
+<TextImport
+  file="../installation/index.mdx"
+  comment="set_default_beta-4"
+  commentType="{/*"
+/>
+
+<CodeImport
+  file="../installation/index.mdx"
+  comment="set_default_beta-4_command"
+  commentType="{/*"
+  lang="sh"
+  trim="true"
+/>
+
+For more detailed instructions on installing `fuelup`, visit the [installation guide](guides/installation).
 
 > Having problems with this part? Post your question on our forum [https://forum.fuel.network/](https://forum.fuel.network/). To help you as efficiently as possible, include the output of this command in your post: `fuelup show.`
 

scripts/update-latest/gitUtils.mjs

@@ -52,7 +52,7 @@ export const checkoutVersion = async (version, dir) => {
 
 export const commitAll = async (message) => {
   await exec('git', ['add', '.']);
-  await exec('git', ['commit', '-m', `'${message}'`]);
+  await exec('git', ['commit', '-m', message]);
 };
 
 export const updateSubmodule = async (submdoule) => {

src/lib/imports.ts

@@ -50,19 +50,11 @@ export function getComponents(docSlug: string, isLatest: boolean) {
   }
 
   if (docSlug.includes('guides/')) {
-    components.CodeImport = loadComponent(
-      import('~/src/components/CodeImport'),
-      'CodeImport'
-    );
     components.TestAction = TestAction;
   } else if (
     docSlug.includes('docs/wallet') ||
     docSlug.includes('docs/latest/wallet')
   ) {
-    components.CodeImport = loadComponent(
-      import('~/src/components/CodeImport'),
-      'CodeImport'
-    );
     components.td = TD;
     components.th = TH;
 

src/lib/md-doc.ts

@@ -9,6 +9,7 @@ import { codeImport as walletCodeImport } from '~/docs/fuels-wallet/packages/doc
 import { codeExamples as latestCodeExamples } from '~/docs/latest/fuel-graphql-docs/src/lib/code-examples';
 import { codeImport as latestWalletCodeImport } from '~/docs/latest/fuels-wallet/packages/docs/src/lib/code-import';
 import { codeImport } from '~/src/lib/plugins/code-import';
+import { textImport } from '~/src/lib/plugins/text-import';
 
 import { DOCS_DIRECTORY } from '../config/constants';
 import type { Config, DocType, SidebarLinkItem } from '../types';
@@ -197,6 +198,7 @@ export class Doc {
       plugins = plugins.concat([[latestCodeExamples, { filepath }] as any]);
     } else if (this.md.slug.includes('guides')) {
       plugins = plugins.concat([[codeImport, { filepath }] as any]);
+      plugins = plugins.concat([[textImport, { filepath }] as any]);
     }
 
     return plugins;

src/lib/plugins/code-import.ts

@@ -9,6 +9,9 @@ import * as prettier from 'prettier';
 import type { Root } from 'remark-gfm';
 import { visit } from 'unist-util-visit';
 
+import { getEndCommentType } from './text-import';
+import type { CommentTypes } from './text-import';
+
 function toAST(content: string) {
   return acorn.parse(content, {
     ecmaVersion: 'latest',
@@ -43,8 +46,6 @@ function extractLines(
   }
 }
 
-type CommentTypes = '<!--' | '{/*' | '//' | '/*';
-
 function extractCommentBlock(
   content: string,
   comment: string,
@@ -55,29 +56,20 @@ function extractCommentBlock(
   let lineStart = 1;
   let lineEnd = 1;
 
-  const endCommentType =
-    commentType === '<!--'
-      ? ' -->'
-      : commentType === '{/*'
-      ? ' */}'
-      : commentType === '/*'
-      ? ' */'
-      : '';
+  const endCommentType = getEndCommentType(commentType);
+
   for (let i = 0; i < lines.length; i++) {
-    const g = `${commentType} ANCHOR: ${comment}${endCommentType}`;
-    const start =
-      lines[i] === `${commentType} ${comment}:example:start${endCommentType}` ||
-      lines[i] === `${commentType}${comment}:example:start${endCommentType}` ||
-      lines[i] === g;
-    if (start === true) {
+    const startLineA = `${commentType}ANCHOR:${comment}${endCommentType}`;
+    const endLineA = `${commentType}ANCHOR_END:${comment}${endCommentType}`;
+    const startLineB = `${commentType}${comment}:example:start${endCommentType}`;
+    const endLineB = `${commentType}${comment}:example:end${endCommentType}`;
+    const cleanLine = lines[i].replace(/\s+/g, '');
+    const start = cleanLine === startLineA || cleanLine === startLineB;
+    if (start) {
       lineStart = i + 1;
     } else {
-      const x = `${commentType} ANCHOR_END: ${comment}${endCommentType}`;
-      const end =
-        lines[i] === `${commentType} ${comment}:example:end${endCommentType}` ||
-        lines[i] === `${commentType}${comment}:example:end${endCommentType}` ||
-        lines[i] === x;
-      if (end === true) {
+      const end = cleanLine === endLineA || cleanLine === endLineB;
+      if (end) {
         lineEnd = i;
       }
     }
@@ -151,7 +143,6 @@ function extractTestCase(source: string, testCase: string) {
   };
 }
 
-const ROOT_DIR = path.resolve(__dirname, '../../../../../../../');
 export function codeImport() {
   return function transformer(tree: Root, file: any) {
     const rootDir = process.cwd();
@@ -224,16 +215,6 @@ export function codeImport() {
           type: 'mdxJsxAttribute',
           value: content,
         },
-        {
-          name: '__filepath',
-          type: 'mdxJsxAttribute',
-          value: path.resolve(dirname, file).replace(`${ROOT_DIR}/`, ''),
-        },
-        {
-          name: '__filename',
-          type: 'mdxJsxAttribute',
-          value: path.parse(file).base,
-        },
         {
           name: '__language',
           type: 'mdxJsxAttribute',

src/lib/plugins/rehype-code.ts

@@ -176,6 +176,9 @@ function codeLanguage() {
       if (lang?.includes('tsx')) {
         node.properties.className[0] = 'language-typescript';
       }
+      if (lang?.includes('sh')) {
+        node.properties.className[0] = 'language-sh';
+      }
     });
   };
 }
@@ -254,7 +257,11 @@ function codeImport() {
       node.type = 'element';
       node.tagName = 'pre';
       const lang = node.attributes?.find((a: any) => a.name === '__language');
-      const code = h('code', { class: lang?.value }, content?.value);
+      const code = h(
+        'code',
+        { class: lang?.value },
+        content?.value.replace(/\r/g, '')
+      );
       node.children = [code];
     });
   };