Remote Codeblock

<RemoteCodeblock /> is a custom component designed to enable users to query for code snippets from other repos and embed them in the docs natively given a github permalink.

Here is an example

hello_blockchain.move ↗️

Source Code

module hello_blockchain::message {
    use std::error;
    use std::signer;
    use std::string;
    use aptos_framework::event;

    //:!:>resource
    struct MessageHolder has key {
        message: string::String,
    }
    //<:!:resource

    #[event]
    struct MessageChange has drop, store {
        account: address,
        from_message: string::String,
        to_message: string::String,
    }

    /// There is no message present
    const ENO_MESSAGE: u64 = 0;

    #[view]
    public fun get_message(addr: address): string::String acquires MessageHolder {
        assert!(exists<MessageHolder>(addr), error::not_found(ENO_MESSAGE));
        borrow_global<MessageHolder>(addr).message
    }

    public entry fun set_message(account: signer, message: string::String)
    acquires MessageHolder {
        let account_addr = signer::address_of(&account);
        if (!exists<MessageHolder>(account_addr)) {
            move_to(&account, MessageHolder {
                message,
            })
        } else {
            let old_message_holder = borrow_global_mut<MessageHolder>(account_addr);
            let from_message = old_message_holder.message;
            event::emit(MessageChange {
                account: account_addr,
                from_message,
                to_message: copy message,
            });
            old_message_holder.message = message;
        }
    }

    #[test(account = @0x1)]
    public entry fun sender_can_set_message(account: signer) acquires MessageHolder {
        let addr = signer::address_of(&account);
        aptos_framework::account::create_account_for_test(addr);
        set_message(account, string::utf8(b"Hello, Blockchain"));

        assert!(
            get_message(addr) == string::utf8(b"Hello, Blockchain"),
            ENO_MESSAGE
        );
    }
}

As you can see, each <RemoteCodeblock /> comes with the ability to:

Copy the code
View the source

Usage

This requires the document writer to include getStaticProps. This enables Nextra to fetch the Codeblock, syntax highlight it with shiki at build time rather than fetching it dynamically on each client load.

Here is an example of how to use <RemoteCodeblock />.

example.mdx

import { permalinkFetch, RemoteCodeblock } from '@components/index'
import { useData } from 'nextra/hooks'
 
export async function getStaticProps() {
  return await permalinkFetch([
    'https://github.com/aptos-labs/aptos-core/blob/77e1d222ebc5e7294e115e0d090c001da1d0e072/aptos-move/move-examples/hello_blockchain/sources/hello_blockchain.move#L1-L59'
  ])
}
 
# Hello World on Aptos
 
Here is an example Hello World contract on Aptos.
 
<RemoteCodeblock 
  permalink="https://github.com/aptos-labs/aptos-core/blob/77e1d222ebc5e7294e115e0d090c001da1d0e072/aptos-move/move-examples/hello_blockchain/sources/hello_blockchain.move#L1-L59" 
/>

API

The RemoteCodeblock component takes the following props:

`permalink`

The github permalink (must be a permalink)

Type: string

GraphQL Editor Callout