Two Column

<nuke-cols>
<nuke-col center>

### Center 1

Using<br />`<nuke-col center>`

</nuke-col>
<nuke-col center>

### Center 2

Using<br />`<nuke-col center>`

</nuke-col>
</nuke-cols>

Three Columns

<nuke-cols>
<nuke-col left>

### Left

Using<br />`<nuke-col left>`

</nuke-col>
<nuke-col center>

### Center

Using<br />`<nuke-col center>`

</nuke-col>
<nuke-col right>

### Right

Using<br />`<nuke-col right>`

</nuke-col>
</nuke-cols>

<nuke-cols>
<nuke-col>

### This column has a bit of a statement to make.

</nuke-col>
<nuke-col>

- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Ut enim ad minim veniam, quis nostrud exercitation
- Duis aute irure dolor in reprehenderit in
- Excepteur sint occaecat cupidatat non proident, sunt in

</nuke-col>
</nuke-cols>

<img rounded style="width: 50%" src="../template/img/REMOVE-ME-example-img.png" />

<img style="width: 20%" src="./img/makeitmove.gif" />

<video controls width="100%">
    <source src="../../polkadot/light_clients/img/LightClients.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>

## Rust Example

```rust [0|1,6|15-25|30-31]
#![cfg_attr(not(feature = "std"), no_std)]
// `construct_runtime!` does a lot of recursion and requires us to increase the limit to 256.
#![recursion_limit = "256"]

// Make the Wasm binary available.
#[cfg(feature = "std")]
include!(concat!(env!("OUT_DIR"), "/wasm_binary.rs"));

mod weights;
pub mod xcm_config;

/// BlockId type as expected by this runtime.
pub type BlockId = generic::BlockId<Block>;

/// The SignedExtension to the basic transaction logic.
pub type SignedExtra = (
    frame_system::CheckNonZeroSender<Runtime>,
    frame_system::CheckSpecVersion<Runtime>,
    frame_system::CheckTxVersion<Runtime>,
    frame_system::CheckGenesis<Runtime>,
    frame_system::CheckEra<Runtime>,
    frame_system::CheckNonce<Runtime>,
    frame_system::CheckWeight<Runtime>,
    pallet_transaction_payment::ChargeTransactionPayment<Runtime>,
);

/// Unchecked extrinsic type as expected by this runtime.
pub type UncheckedExtrinsic = generic::UncheckedExtrinsic<Address, Call, Signature, SignedExtra>;

/// Extrinsic type that has already been checked.
pub type CheckedExtrinsic = generic::CheckedExtrinsic<AccountId, Call, SignedExtra>;

/// Executive: handles dispatch to the various modules.
pub type Executive = frame_executive::Executive<
    Runtime,
    Block,
    frame_system::ChainContext<Runtime>,
    Runtime,
    AllPalletsWithSystem,
>;
```

<nuke-cols>
<nuke-col>

### Column + Code

- Some
- Observations
- Others

</nuke-col>
<nuke-col>


```rust [0|1,13|4-8]
fn largest_i32(list: &[i32]) -> i32 {
    let mut largest = list[0];

    for &item in list {
        if item > largest {
            largest = item;
        }
    }

    largest
}

fn largest_char(list: &[char]) -> char {
    let mut largest = list[0];

    for &item in list {
        if item > largest {
            largest = item;
        }
    }

    largest
}

fn main() {
    let number_list = vec![34, 50, 25, 100, 65];

    let result = largest_i32(&number_list);
    println!("The largest number is {}", result);
    assert_eq!(result, 100);

    let char_list = vec!['y', 'm', 'a', 'q'];

    let result = largest_char(&char_list);
    println!("The largest char is {}", result);
    assert_eq!(result, 'y');
}

| Tables              |         Are         |                    Cool |
| ------------------- | :-----------------: | ----------------------: |
| col 1 is            |    left-aligned     |                   $1600 |
| col 2 is            |      centered       |                     $12 |
| col 3 is            |    right-aligned    |                      $1 |
| This row sure has a | _lot_ of text so it | spaces the columns outs |

The code

<canvas data-chart="line" style="height: 300px">
  <!--
{
 "data": {
  "labels": ["January"," February"," March"," April"," May"," June"," July"],
  "datasets":[
   {
    "data":[4,7,10,25,56,78,140],
    "label":"Polkadot","backgroundColor":"#E6007A"
   },
   {
    "data":[10,27,40,75,80,155,340],
    "label":"Kusama","backgroundColor":"#000"
   }
  ]
 }
}
-->
</canvas>

Previous slides' code:

<section style="margin-top: 100px">
  <h5>Bar chart with CSV data</h5>
  <div style="height:480px">
    <canvas data-chart="bar">
      January, February, March, April, May, June, July My first dataset, 65, 59, 80, 81, 56, 55, 40 My second dataset,
      28, 48, 40, 19, 86, 27, 90
    </canvas>
  </div>
</section>

Previous slide's code:

<section style="margin-top: 100px">
  <h5>Stacked bar chart from CSV file with JSON configuration</h5>
  <div style="height:480px">
    <canvas data-chart="bar" data-chart-src="./data.csv">
      <!--
    {
    "data" : {
    "datasets" : [{ "backgroundColor": "#0f0" }, { "backgroundColor": "#0ff" } ]
    },
    "options": { "scales": { "x": { "stacked": true }, "y": { "stacked": true } } }
    }
    -->
    </canvas>
  </div>
</section>

A Flowchart

And its code

  <diagram class="mermaid">
    %%{init: {'theme': 'dark', 'themeVariables': { 'darkMode': true }}}%%
    flowchart TD
      A(Start) --> B{Is it?};
      B -- Yes --> C(OK);
      C --> D(Rethink);
      D --> B;
      B -- No ----> E(End);
  </diagram>

Entity relationship diagram

And its code

<diagram class="mermaid">
    erDiagram
    Node ||--o{ Wallet : places_order
    Wallet ||--|{ Account : owner
    Node }|..|{ Some-IP : uses
</diagram>

Sequence diagram

And its code

<diagram class="mermaid">
  sequenceDiagram
      Alice->>John: Hello John, how are you?
      John-->>Alice: Great!
      Alice-)John: See you later!
</diagram>

Class Diagram

And its code

<diagram class="mermaid">
    classDiagram
      note "From Duck till Zebra"
      Animal <|-- Duck
      note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }
</diagram>

State diagram (v2)

And its code

<diagram class="mermaid">
  stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
</diagram>

User Journey

And its code

<diagram class="mermaid">
    journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
</diagram>

Gantt

And its code

<diagram class="mermaid">
    gantt
      apple :a, 2017-07-20, 1w
      banana :crit, b, 2017-07-23, 1d
      cherry :active, c, after b a, 1d
</diagram>

Pie Chart

And its code

<diagram class="mermaid">
    pie title Pets adopted by volunteers
      "Dogs" : 386
      "Cats" : 85
      "Rats" : 15
</diagram>

Git Graph

And its code

<diagram class="mermaid">
    gitGraph
      commit
      commit
      branch develop
      checkout develop
      commit
      commit
      checkout main
      merge develop
      commit
      commit
</diagram>

Useful links

• Mermaid Syntax
• Mermaid Live Editor with examples