Copy and Paste Slide Templates
How to use the slides - Full screen (new tab)
Copy and Paste Slide Templates
At the end of this lecture, you will be able to:
- Describe ...
- Navigate ...
- Justify ...
Here is a topic
- Use some bullets
- To make a few points
Notes:
Speaker view ONLY notes
Here is an important point
Make it clear
Notes:
Stuff you should remember to say
Code Highlight & Transitions
Syntax for many langs is possible, and very easy to style. You can and should use highlighting of lines in a large snippets of code.
You an also add comments to make "fragments" for specific components
They can ordered how you see fit!
See the source for syntax
Rust Example
#![allow(unused)] #![cfg_attr(not(feature = "std"), no_std)] fn main() { // `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, >; }
Design system examples
Use o
to open the overview mode and explore slides here.
You can see the source of these slides to copy&paste
as slide templates in your slides!
- Columns
- Images
- MarkDown examples
Two Column
Center 1
Using
<pba-col center>
Center 2
Using
<pba-col center>
---v
Two Column
<pba-cols>
<pba-col center>
### Center 1
Using<br />`<pba-col center>`
</pba-col>
<pba-col center>
### Center 2
Using<br />`<pba-col center>`
</pba-col>
</pba-cols>
Three Columns
Left
Using
<pba-col left>
Center
Using
<pba-col center>
Right
Using
<pba-col right>
---v
Three Columns
<pba-cols>
<pba-col left>
### Left
Using<br />`<pba-col left>`
</pba-col>
<pba-col center>
### Center
Using<br />`<pba-col center>`
</pba-col>
<pba-col right>
### Right
Using<br />`<pba-col right>`
</pba-col>
</pba-cols>
This column has a bit of a statement to make.
- 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
---v
<pba-cols>
<pba-col>
### This column has a bit of a statement to make.
</pba-col>
<pba-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
</pba-col>
</pba-cols>
Images
![](../template/img/REMOVE-ME-example-img.png)
Leave a note on why this one matters
Notes:
---v
<img rounded style="width: 50%" src="../template/img/REMOVE-ME-example-img.png" />
Graphics
![](./img/makeitmove.gif)
svg, png, gif, ... anything that works on the web should work here! (Please do be mindful of file size, and minimize where practical)
Where possible use
svg
or vector graphics... Consider using a mermaid diagram instead π€©
Notes:
Image source: https://giphy.com/stickers/transparent-hU2uvl6LdxILQOIad3 License: https://support.giphy.com/hc/en-us/articles/360020027752-GIPHY-Terms-of-Service
---v
<img style="width: 20%" src="./img/makeitmove.gif" />
Video
mp4, webm, ... anything that works on the web should work here!
Please do be mindful of file size, and minimize and compress before committing!
Notes:
Video source: https://www.youtube.com/watch?v=oaidhA5eL_8 License: https://www.youtube.com/static?template=terms
---v
<video controls width="100%">
<source src="../../polkadot/light_clients/img/LightClients.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
Section title
---v
<!-- .slide: data-background-color="#4A2439" -->
# Section title
A quote of myself, saying great stuff, as always.
Source: meβ’ at the last event
Testing bold and italic markdown texts!
Testing **bold** and *italic* markdown texts!
Rust Example
#![allow(unused)] #![cfg_attr(not(feature = "std"), no_std)] fn main() { // `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, >; }
---v
## 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,
>;
```
Column + Code
- Some
- Observations
- Others
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'); }
---v
<pba-cols>
<pba-col>
### Column + Code
- Some
- Observations
- Others
</pba-col>
<pba-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
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 |
---v
| 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 |
Math
KaTeX/LaTeX rendered within blocks with "$$
" delimiters
$$J(\theta_0,\theta_1) = \sum_{i=0}$$
In line uses "\\(
" and "\\)
" to render: \(\alpha\beta\gamma\)
.
More info: https://revealjs.com/math/
Charts
A plugin for Reveal.js allowing to easily add charts using Chart.js.
There is a known bug:
Chart (meaning the < canvas > tag) needs to be in a full HTML slide (no md allowed); this means that the whole slide that contains a chart MUST be written in plain HTML.
---v
---v
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>
---v
Bar chart with CSV data
---v
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>
---v
Stacked bar chart from CSV file with JSON configuration
---v
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>
Mermaid Diagrams
Mermaid lets you create diagrams and visualizations using text and code.
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
First of all lets see some examples of diagrams that Mermaid can show with its integration with revealJS;
---v
A Flowchart
---v
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>
---v
Entity relationship diagram
---v
And its code
<diagram class="mermaid">
erDiagram
Node ||--o{ Wallet : places_order
Wallet ||--|{ Account : owner
Node }|..|{ Some-IP : uses
</diagram>
---v
Sequence diagram
---v
And its code
<diagram class="mermaid">
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
</diagram>
---v
Class Diagram
---v
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>
---v
State diagram (v2)
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
---v
And its code
<diagram class="mermaid">
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
</diagram>
---v
User Journey
---v
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>
---v
Gantt
---v
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>
---v
Pie Chart
---v
And its code
<diagram class="mermaid">
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
</diagram>
---v
Git Graph
---v
And its code
<diagram class="mermaid">
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
</diagram>
---v