Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Import common steps into tutorials #1431

Open
meaghanfitzgerald opened this issue Jun 29, 2023 · 3 comments
Open

Import common steps into tutorials #1431

meaghanfitzgerald opened this issue Jun 29, 2023 · 3 comments

Comments

@meaghanfitzgerald
Copy link
Collaborator

meaghanfitzgerald commented Jun 29, 2023

Some things are explained over and over in the docs (installing avalanche-cli, installing avalanche network runner, Avalanche Go). It is useful to have all necessary steps in one tutorial and not have the user jump from page to page. It would make sense to create one guide how to install avalanche-cli and then import this one over and over again. It can also be made collapsable, so it does not take up too much space and people can expand it, if they need the instructions.

This Docusaurus feature allows us to import .md files that have _ appended to the beginning: https://docusaurus.io/docs/markdown-features/react#importing-markdown

This thread demonstrates how to import a collapsible html element into an .md file: https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f

We could go a step further, and create a custom react component that takes some params and returns this dropdown, making it easier for new documentation writers to include in their docs. but this is not necessary

@meaghanfitzgerald
Copy link
Collaborator Author

If you want to use the React Component:

import Details from '@theme/MDXComponents/Details';

export default function Collapse (props: { children: React.ReactNode; title?: string }) {
    const { children, title = "Collapse" } = props;

    return (
        <Details>
            <summary mdxType="summary">{title}</summary>

            {children}
        </Details>
    );
}

And then in markdown:

import Collapse from '@site/src/components/Collapse';

# Markdown

<Collapse>

### Hidden content

'''js
function someFn() {
   return;
}
'''

</Collapse>

@laviniat1996
Copy link
Contributor

@meaghanfitzgerald Do you think this is still needed? I can tackle it if so.

@meaghanfitzgerald
Copy link
Collaborator Author

@laviniat1996 would definitely be a big value add for tutorials!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants