From 68f4e6d7883e4801c6ee7b05f69a69a16cce039a Mon Sep 17 00:00:00 2001
From: sarahschwartz <58856580+sarahschwartz@users.noreply.github.com>
Date: Wed, 11 Oct 2023 14:32:26 -0600
Subject: [PATCH 1/3] add text import, refactor code import
---
docs/guides/docs/installation/index.mdx | 4 +
.../quickstart/building-a-smart-contract.mdx | 16 ++-
src/components/CodeImport.tsx | 22 ----
src/lib/imports.ts | 8 --
src/lib/md-doc.ts | 2 +
src/lib/plugins/code-import.ts | 47 +++----
src/lib/plugins/rehype-code.ts | 9 +-
src/lib/plugins/text-import.ts | 124 ++++++++++++++++++
8 files changed, 168 insertions(+), 64 deletions(-)
delete mode 100644 src/components/CodeImport.tsx
create mode 100644 src/lib/plugins/text-import.ts
diff --git a/docs/guides/docs/installation/index.mdx b/docs/guides/docs/installation/index.mdx
index fa1a82660..44e0f1d76 100644
--- a/docs/guides/docs/installation/index.mdx
+++ b/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).
diff --git a/docs/guides/docs/quickstart/building-a-smart-contract.mdx b/docs/guides/docs/quickstart/building-a-smart-contract.mdx
index 2cacbe9df..c8cd91eaa 100644
--- a/docs/guides/docs/quickstart/building-a-smart-contract.mdx
+++ b/docs/guides/docs/quickstart/building-a-smart-contract.mdx
@@ -10,7 +10,21 @@ parent:
## Installation
-Please visit the [installation guide](guides/installation) to install the Fuel toolchain binaries and prerequisites.
+
+
+
+
+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.`
diff --git a/src/components/CodeImport.tsx b/src/components/CodeImport.tsx
deleted file mode 100644
index 1a61f69c7..000000000
--- a/src/components/CodeImport.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-export type CodeImportProps = {
- file: string;
- lines?: number[];
- testCase?: string;
- title?: string;
- __content: string;
- __filepath: string;
- // __filename: string;
- __language: string;
- __lineStart: number;
- __lineEnd?: number;
-};
-
-export function CodeImport({
- __content: content,
- // __filename: filename,
- __language: language,
-}: CodeImportProps) {
- // const lines = `L${lineStart}${lineEnd ? `-L${lineEnd}` : ''}`;
- // const link = `${REPO_LINK}/${filePath}#${lines}`;
- return {content};
-}
diff --git a/src/lib/imports.ts b/src/lib/imports.ts
index 565b33d64..49cb24a1a 100644
--- a/src/lib/imports.ts
+++ b/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;
diff --git a/src/lib/md-doc.ts b/src/lib/md-doc.ts
index b0d407c97..6c0ebc50c 100644
--- a/src/lib/md-doc.ts
+++ b/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;
diff --git a/src/lib/plugins/code-import.ts b/src/lib/plugins/code-import.ts
index ed211518d..2d079775e 100644
--- a/src/lib/plugins/code-import.ts
+++ b/src/lib/plugins/code-import.ts
@@ -9,6 +9,8 @@ import * as prettier from 'prettier';
import type { Root } from 'remark-gfm';
import { visit } from 'unist-util-visit';
+import { getEndCommentType } from './text-import';
+
function toAST(content: string) {
return acorn.parse(content, {
ecmaVersion: 'latest',
@@ -43,7 +45,7 @@ function extractLines(
}
}
-type CommentTypes = ''
- : 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 +144,7 @@ function extractTestCase(source: string, testCase: string) {
};
}
-const ROOT_DIR = path.resolve(__dirname, '../../../../../../../');
+// const ROOT_DIR = path.resolve(__dirname, '../../../../../../../');
export function codeImport() {
return function transformer(tree: Root, file: any) {
const rootDir = process.cwd();
@@ -224,16 +217,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',
diff --git a/src/lib/plugins/rehype-code.ts b/src/lib/plugins/rehype-code.ts
index f49f72f5b..db64e0c23 100644
--- a/src/lib/plugins/rehype-code.ts
+++ b/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];
});
};
diff --git a/src/lib/plugins/text-import.ts b/src/lib/plugins/text-import.ts
new file mode 100644
index 000000000..63dfae78a
--- /dev/null
+++ b/src/lib/plugins/text-import.ts
@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import fs from 'node:fs';
+import { EOL } from 'os';
+import path from 'path';
+import { remark } from 'remark';
+import type { Root } from 'remark-gfm';
+import { visit } from 'unist-util-visit';
+import type { Parent } from 'unist-util-visit/lib';
+
+import type { CommentTypes } from './code-import';
+
+export function getEndCommentType(commentType: string) {
+ let commentEnd;
+ switch (commentType) {
+ case '/*':
+ commentEnd = '*/';
+ break;
+ case '{/*':
+ commentEnd = '*/}';
+ break;
+ case '//':
+ commentEnd = '';
+ break;
+ case '';
+ break;
+ default:
+ }
+ return commentEnd;
+}
+
+function extractCommentBlock(
+ content: string,
+ comment: string,
+ commentType: CommentTypes
+) {
+ const lines = content.split(EOL);
+ const commentEnd = getEndCommentType(commentType);
+ let lineStart = 1;
+ let lineEnd = 1;
+ for (let i = 0; i < lines.length; i++) {
+ const start =
+ lines[i].replace(/\s+/g, '') ===
+ `${commentType}${comment}:example:start${commentEnd}`;
+ if (start === true) {
+ lineStart = i + 1;
+ } else {
+ const end =
+ lines[i].replace(/\s+/g, '') ===
+ `${commentType}${comment}:example:end${commentEnd}`;
+ if (end === true) {
+ lineEnd = i;
+ }
+ }
+ }
+
+ if (lineStart < 0) {
+ lineStart = 0;
+ }
+ if (lineEnd < 0) {
+ lineEnd = lines.length;
+ }
+
+ const linesContent = lines.slice(lineStart, lineEnd).join('\n');
+
+ return linesContent;
+}
+
+interface Options {
+ filepath: string;
+}
+
+export function textImport(options: Options = { filepath: '' }) {
+ const rootDir = process.cwd();
+ const { filepath } = options;
+ const dirname = path.relative(rootDir, path.dirname(filepath));
+
+ return function transformer(tree: Root) {
+ const nodes: [any, number | null, Parent][] = [];
+
+ visit(tree, 'mdxJsxFlowElement', (node: any, idx, parent) => {
+ if (node.name === 'TextImport') {
+ nodes.push([node as any, idx ?? null, parent as Parent]);
+ }
+ });
+
+ nodes.forEach(([node]) => {
+ const attr = node.attributes;
+ let content = '';
+
+ if (!attr.length) {
+ throw new Error('TextImport needs to have properties defined');
+ }
+
+ const file = attr.find((i: any) => i.name === 'file')?.value;
+ const comment = attr.find((i: any) => i.name === 'comment')?.value;
+ const commentType = attr.find(
+ (i: any) => i.name === 'commentType'
+ )?.value;
+ let linesIncluded =
+ attr.find((i: any) => i.name === 'linesIncluded')?.value || [];
+ const fileAbsPath = path.resolve(path.join(rootDir, dirname), file);
+ const fileContent = fs.readFileSync(fileAbsPath, 'utf8');
+ const resp = Array.isArray(linesIncluded) ? 0 : linesIncluded;
+ if (resp !== 0) {
+ linesIncluded = JSON.parse(linesIncluded.value);
+ }
+ const commentResult = extractCommentBlock(
+ fileContent,
+ comment,
+ commentType
+ );
+ content = commentResult;
+
+ const processor = remark();
+ const ast = processor.parse(content);
+
+ node.type = 'element';
+ node.children = ast.children;
+ node.tagName = 'div';
+ });
+ };
+}
From 090f6427a93335ed317c5668fb3eca796892c471 Mon Sep 17 00:00:00 2001
From: sarahschwartz <58856580+sarahschwartz@users.noreply.github.com>
Date: Wed, 11 Oct 2023 14:39:03 -0600
Subject: [PATCH 2/3] update quickstart installation
---
docs/guides/docs/installation/index.mdx | 14 ++++++-
.../quickstart/building-a-smart-contract.mdx | 42 +++++++++++++++++++
2 files changed, 55 insertions(+), 1 deletion(-)
diff --git a/docs/guides/docs/installation/index.mdx b/docs/guides/docs/installation/index.mdx
index 44e0f1d76..d031a9c37 100644
--- a/docs/guides/docs/installation/index.mdx
+++ b/docs/guides/docs/installation/index.mdx
@@ -39,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.
@@ -123,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
@@ -136,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.
diff --git a/docs/guides/docs/quickstart/building-a-smart-contract.mdx b/docs/guides/docs/quickstart/building-a-smart-contract.mdx
index c8cd91eaa..74e8e234f 100644
--- a/docs/guides/docs/quickstart/building-a-smart-contract.mdx
+++ b/docs/guides/docs/quickstart/building-a-smart-contract.mdx
@@ -24,6 +24,48 @@ parent:
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.`
From a067f9b276136579991f634c5a629a0aad304820 Mon Sep 17 00:00:00 2001
From: sarahschwartz <58856580+sarahschwartz@users.noreply.github.com>
Date: Wed, 11 Oct 2023 14:46:38 -0600
Subject: [PATCH 3/3] cleanup
---
scripts/update-latest/gitUtils.mjs | 2 +-
src/lib/plugins/code-import.ts | 4 +---
src/lib/plugins/text-import.ts | 2 +-
3 files changed, 3 insertions(+), 5 deletions(-)
diff --git a/scripts/update-latest/gitUtils.mjs b/scripts/update-latest/gitUtils.mjs
index ebf5f0f16..db02f1f5b 100644
--- a/scripts/update-latest/gitUtils.mjs
+++ b/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) => {
diff --git a/src/lib/plugins/code-import.ts b/src/lib/plugins/code-import.ts
index 2d079775e..ee86014cd 100644
--- a/src/lib/plugins/code-import.ts
+++ b/src/lib/plugins/code-import.ts
@@ -10,6 +10,7 @@ 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, {
@@ -45,8 +46,6 @@ function extractLines(
}
}
-export type CommentTypes = '