-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
transition-guide.qmd
1179 lines (772 loc) · 31.3 KB
/
transition-guide.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
---
title: "Transition Guide: From Styles to Workbench"
format:
html:
css: transition-guide.css
---
## Background
The Carpentries Workbench is a replacement for the former [carpentries/styles]
lesson infrastructure. Lessons using The Carpentries Workbench have content
separated from styling and build tools for a more seamless experience in updates
to the lesson websites. In 2023, all lessons in official Carpentries lesson
programs were converted to use The Workbench using the
[lesson-transition tool](https://github.com/carpentries/lesson-transition#readme).
We provide [a documented transition workflow](https://carpentries.github.io/sandpaper-docs/migrating-from-styles.html)
for lesson developers to follow if they want to convert their own lessons.
[carpentries/styles]: https://github.com/carpentries/styles
This document is intended to provide you with a quick reference about the
differences between [kramdown] (used by styles) and [pandoc-flavoured
markdown][pandoc] (used by The Workbench):
## For Maintainers
### Default Branch
:::::::::::::: {layout="[50, 50]"}
::: {.column .workbench}
#### Workbench
The default branch is always **`main`**
:::
::: {.column .styles}
#### styles
The default branch is **`gh-pages`** UNLESS you have rendered RMarkdown content,
then the default branch is `main`
:::
::::::::::::::::::::::::::::::::
### Infrastructure
:::::::::::::: {layout="[50, 50]"}
::: {.column .workbench}
#### Workbench
The workbench infrastructure is **independent**^[one exception: github
workflows are contained inside the `.github/workflows` folder] from individual
lessons. It consists of three major pieces of software.
- **Git **
- **R**
- **[Pandoc][pandoc]**
The workbench itself consists of three R packages, which can all be updated on
the fly with no changes to the lesson.
- [{sandpaper}]\: user interface and workflow engine
- [{pegboard}]\: parsing and validation engine
- [{varnish}]\: HTML templates, CSS, and JS elements
:::
::: {.column .styles}
#### styles
The styles infrastructure is **embedded** within the lesson itself. It requires
the following major pieces of software to run:
- **Git**
- **Ruby**
- **BASH**
- **Make**
- Python^[python in styles is required for validation and initialisation, but is not required for local rendering]
- R^[R in styles is required for R Markdown-based lessons]
The styles workflow is a [Jekyll][jekyll]-based workflow, which uses the
following components:
- [bundler](https://bundler.io/): manages the Ruby gems (packages) including Jekyll
- [Jekyll][jekyll]\: static site generator
- (file) `Makefile`: workflow management for building and validating
- (dir) `assets/`: CSS and JS elements
- (dir) `_layouts/`: HTML templates
- (dir) `bin/`: intialisation, runtime, and validation scripts (in BASH, Python, and R)
- (dir) `_includes/`: Markdown and HTML boilerplate for customisation
The file components can only be updated via pull request.
:::
::::::::::::::::::::::::::::::::
### Contributor Count
Because content and tools are separated in Workbench Lessons, giving credit for
the lesson is much more straightforward. Here we use Dr. Sarah Gibson's
[Cross-Stitch Carpentry
lesson](https://sgibson91.github.io/cross-stitch-carpentry/) as an example
:::::::::::::: {layout="[50, 50]"}
::: {.column .workbench}
#### Workbench
The Contributors reflect those that actually worked on the lesson itself.
![List of contributors reflects the lesson content contribution (note that Dr. Gibson is listed first)](fig/contributors-workbench.png){alt='screenshot of github "contributors" short list showing 4 contributors with GitHub avatars.'}
:::
::: {.column .styles}
#### styles
The Contributors reflect those that worked on the lesson AND those that worked
on the underlying infrastructure, going back to 2013.
![List of contributors reflects lesson content and styles (note that Dr. Gibson is now fifth!)](fig/contributors-styles.png){alt='screenshot of github "contributors" short list showing 11 of 48 contributors with GitHub avatars.'}
:::
::::::::::::::::::::::::::::::::
### Local Rendering
:::::::::::::: {layout="[50, 50]"}
::: {.column .workbench}
#### Workbench
1. If you haven't already, Follow the [setup instructions for the workbench][workbench-setup] to install R, pandoc, and the workbench packages
2. In your lesson directory, open either [R](https://cloud.r-project.org/), [RStudio](https://www.rstudio.com/products/rstudio/download/#download), or [VS Code](https://code.visualstudio.com/docs/languages/r) and run:
```r
sandpaper::serve()
```
:::
::: {.column .styles}
#### styles
1. If you haven't already, Follow the [setup instructions for styles](https://carpentries.github.io/lesson-example/setup) to install Ruby, Bundler, Jekyll, Make, Python, and BASH
2. In your lesson directory, open your command line and run:
```bash
make serve
```
:::
::::::::::::::::::::::::::::::::
### Folder Structure
The folders from styles to Workbench are rearranged to achieve the following
goals:
1. tools for building the lesson do not live in the lesson ^[caveat: we still need the GitHub actions, but those are buried in the `.github` folder].
2. the episodes can be directly lifted from the lesson without needing external
context/resources.
3. extra content intended for instructors is clearly separated from that intended for learners
Episodes (aka Chapters) will move from `_episodes/` and `_episodes_rmd` to the
single folder `episodes/`. `_extras/` content will be split into `learners/`
and `instructors/` depending on the context of the content. Figures, data, and
files all become subfolders of `episodes/`.
![](fig/folder-flow.svg){data-alt='A diagram showing the transition between the
former lesson structure (styles) to the new lesson structure (workbench). It
shows episodes flowing to episodes, extras flowing to learners and instructors,
and figures, data, and files flowing to subfolders under episodes. Other
folders are in grey with no arrows indicating that they are discarded.'}
### Setup Page {#setup-maintainer}
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-screen-inset}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
The setup information lives in `learners/setup.md` or `learner/setup.Rmd`,
depending on whether or not you need code generated. Access this file from
episodes with
```markdown
[setup instructions](../learners/setup.md)
```
On the rendered site, the setup instructions are located on the home page at
the `#setup` anchor.
:::
::: {.column .styles}
#### styles
The setup information lives in the top level of the lesson at `setup.md` (no
possibility to render generated content). Access this file from episodes with
```markdown
[setup instructions]({{ page.root }}/setup.md)
```
On the rendred site, the setup instructions are in a separate page called `/setup`
:::
:::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::
### Callout Blocks/Special Blockquotes {#callout-blocks}
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-screen-inset}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
A callout block with The Workbench uses _at least_ three colons followed by a
keyword to start a block. The block is closed with _at least_ three colons.
::::: {.callout-note}
You can find a demonstration of all the possible callout blocks in [the workbench component guide](https://carpentries.github.io/sandpaper-docs/component-guide.html)
:::::
```markdown
:::: callout
#### Act Openly
We believe that transparency, honesty, and fairness are keys to fostering
trust within an open community.
::::::::::::
```
::: {.callout-tip}
These are called [_fenced divs_][fenced-divs] and in Workbench lessons, you will
often see them have many more colons to clearly delineate sections in a lesson.
The number of opening colons and the number of closing colons do not match and
it is completely up to the lesson author to choose a style.
:::
:::
::: {.column .styles}
#### styles
A callout block (aka "Special Blockquote") with styles used block quote syntax and level 2 headers followed
by a postfix tag declaring the class of block
::::: {.callout-note}
You can find a demonstration of all the possible callout blocks in [the styles "Special Blockquotes" guide](https://carpentries.github.io/lesson-example/04-formatting/index.html#special-blockquotes)
:::::
```markdown
> ## Act Openly
>
> We believe that transparency, honesty, and fairness are keys to fostering
> trust within an open community.
>
{: .callout}
```
::: {.callout-warning}
#### Did you know?
The decision to use blockquotes was to facilitate an easy way to author special
sections without having lesson authors/contributors type `<div>` tags into the
document.
:::
:::
:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
### Highlighted Code Blocks
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-screen-inset}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
Code fences in the workbench are indicated by fences that consist of three
backticks (```` ``` ````) with the name of the language appended on the opening
fence:
<br>
<br>
````markdown
clean all merged branches from git
```bash
git branch --merged | grep -v '^\*' | xargs git branch -d
```
````
:::
::: {.column .styles}
#### styles
Code fences in styles follow kramdown syntax, which prefers fences that consist
of three tildes (`~~~`) with the liquid tag of the language appended on a new
line after the closing fence (postfix tag):
````markdown
clean all merged branches from git
~~~
git branch --merged | grep -v '^\*' | xargs git branch -d
~~~
{: .language-bash}
````
:::
:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
### Challenge/Solution blocks
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-screen-inset}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
The challenge and solution blocks in the workbench are nested pairs of blocks
with an optional Level 3 header. You can additonally add a "hint" block before
the solution.
````markdown
::::::::::::::::::::::::::::: challenge
### Challenge: build
What is the R command to build a Workbench lesson?
::::::: hint
This command is going to start a **serve**r on your computer
:::::::::::::
::::::::: solution
```r
sandpaper::serve()
```
::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::
````
::: {.callout-tip}
To help distinguish sections, double the number of columns for the outer section
compared to the inner section.
:::
:::
::: {.column .styles}
#### styles
The challenge and solution blocks in the workbench are nested block quotes
with Level 2 headers. Additional blocks are still of the class "solution"
````markdown
> ## Challenge: build
>
> What is the R command to build a Workbench lesson?
>
> > ## Hint
> >
> > This command is going to start a **serve**r on your computer
> >
> {: .solution}
>
> > ~~~
> > sandpaper::serve()
> > ~~~
> > {: .language-r}
> {: .solution}
{: .challenge}
````
:::
:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
### Questions/Objectives/Keypoints
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-screen-inset}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
Questions and Objectives appear at the top of the lesson as [fenced
divs][fenced-divs] with list elements:
````markdown
---
title: "Bomp"
teaching: 5
exercises: 5
---
::::::::::::::::: questions
- Who put the **bomp** in the bomp bah bomp bah bomp?
- Who put the **ram** in the rama lama ding dong?
:::::::::::::::::::::::::::
::::::::::::::::: objectives
- Solve the "bomp" mystery.
::::::::::::::::::::::::::::
## Introduction
...
````
Keypoints should go in a [fenced div][fenced-divs] at the _end_ of the document:
```markdown
...
::::::::::::::::: keypoints
- We will never know who put the bomp in the bomp bah bomp bah bomp.
:::::::::::::::::::::::::::
```
:::
::: {.column .styles}
#### styles
The questions, objectives, and keypoints were placed in the YAML metadata for
each episode:
````markdown
---
title: "Bomp"
teaching: 5
exercises: 5
questions:
- "Who put the bomp in the bomp bah bomp bah bomp?"
- "Who put the ram in the rama lama ding dong?"
objectives:
- "Solve the \"bomp\" mystery."
keypoints:
- "We will never know who put the bomp in the bomp bah bomp bah bomp."
---
## Introduction
...
````
::: {.callout-warning}
#### The trouble with YAML metadata
It was not possible to include markdown inside these strings and it often caused
errors due to missed quotation marks (i.e. ` - "sentence with a period after quotes".`
was a common type of error.)
This content was originally introduced into the YAML metadata so that we could
use Jekyll's metadata parsing to create a custom introductory block.
:::
:::
:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
### Instructor notes
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-page}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
An **inline instructor note** in the workbench is formed inside an episode by
making a [_fenced div_][fenced-divs] with the class "instructor"
```markdown
:::: instructor
Here be dragons
::::::::::::
```
Instructor notes for the whole lesson can be placed in `instructors/instructor-notes.md`
:::
::: {.column .styles}
#### styles
Instructor notes do not exist in styles other than an aggregate markdown file
called `_extras/guide.md`
:::
:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
### Lists
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-page}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
In general, if something does not work in Markdown, try adding a blank line.
This is true for lists.
A list must start and end with a blank line to be rendered properly:
::: {.panel-tabset}
##### Correct Syntax
```markdown
A list of things
- shoes
- coat
- glasses
text after the list
```
A list of things
- shoes
- coat
- glasses
text after the list
##### Incorrect Syntax
```markdown
A list of things
- shoes
- coat
- glasses
text after the list
```
A list of things
- shoes
- coat
- glasses
text after the list
##### Lists in fenced divs
Lists in fenced divs behave the same way and a common mode of failure is to
create a list inside a fenced div that does not have space around it:
```markdown
::: callout
- one
- two
- three
:::
```
This will result in a callout that has this content. Moreover, [the lesson build
will fail to validate](https://github.com/carpentries/sandpaper/issues/355):
- one
- two
- three
\:\:\:
Instead, please make sure you add blank lines around your list like this:
```markdown
::: callout
- one
- two
- three
:::
```
:::
:::
::: {.column .styles}
#### styles
Jekyll is very forgiving for lists in general, so a blank line before the list
is optional
```markdown
A list of things
- shoes
- coat
- glasses
text after the list
```
A list of things
- shoes
- coat
- glasses
text after the list
:::
:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
### Tables
::: {.callout-note}
#### About Table Styling
Please note that the table display here is not a good representation of what
you will see in The Workbench or in Styles. They both have their own
idiosyncratic ways of displaying tables.
A demonstration of Workbench tables can be seen [in the official documentation
for lesson contributors](https://carpentries.github.io/sandpaper-docs/episodes.html#tables)
:::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-screen-inset}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column}
.workbench
#### Workbench
Tables in the workbench follow the rules for [pandoc pipe table syntax](https://pandoc.org/MANUAL.html#extension-pipe_tables).
There are two extra features for this syntax in pandoc:
1. You can add a table caption, which is great for accessibility[^caption]
2. You have control over the relative width of oversized table contents
[^caption]: Captions allow visually impaired users to choose if they want to
skip over the table contents if it is scannable. [MDN docs: adding a caption
to your table](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#adding_a_caption_to_your_table_with_caption)
::: {.panel-tabset}
##### Short table with caption
```markdown
Table: A table of fruits and prices
| fruit | price |
| ------ | -----: |
| apple | 2.05 |
| pear | 1.37 |
| orange | 3.09 |
| devil | 666.00 |
```
Table: A table of fruits and prices
| fruit | price |
| ------ | -----: |
| apple | 2.05 |
| pear | 1.37 |
| orange | 3.09 |
| devil | 666.00 |
##### Wide table with caption
To control the width of columns in the table, adjust the number of `-` in the
separator between the header and the table body. This table has three columns
with a 2:1:1 ratio (as noted by the `|----|--|--|` header)
```markdown
Table: summary of relevant statistical tests for normally and non-normally distributed data
|Analysis required (continuous data) |Normally distributed data | Non-normally distributed data |
| ---- | -- | -- |
|Compare mean or median of one sample group against a known value |One sample t-test |Wilcoxon Rank Sum test |
|Compare means or medians of two sample groups (unpaired data) |Unpaired t-test |Mann-Whitney test |
|Compare means or medians of two sample groups (paired data) |Paired t-test |Wilcoxon Matched Pairs test |
|Compare means or medians of ≥ three sample groups (unpaired data) |ANOVA |Kruskal-Wallis ANOVA |
|Compare means or medians of ≥ three sample groups (paired data) |Repeated measures ANOVA |Friedman test |
```
Table: summary of relevant statistical tests for normally and non-normally distributed data
|Analysis required (continuous data) |Normally distributed data | Non-normally distributed data |
| ---- | -- | -- |
|Compare mean or median of one sample group against a known value |One sample t-test |Wilcoxon Rank Sum test |
|Compare means or medians of two sample groups (unpaired data) |Unpaired t-test |Mann-Whitney test |
|Compare means or medians of two sample groups (paired data) |Paired t-test |Wilcoxon Matched Pairs test |
|Compare means or medians of ≥ three sample groups (unpaired data) |ANOVA |Kruskal-Wallis ANOVA |
|Compare means or medians of ≥ three sample groups (paired data) |Repeated measures ANOVA |Friedman test |
```markdown
Table: table to demonstrate a wrapped cell
| with wrapping | without wrapping |
| -- | ------ |
| This is a lot of text for a very tiny cell. It almost certainly will be wrapped. | This is a lot of text for a wider cell. It will not wrap so soon. |
```
Table: table to demonstrate a wrapped cell
| with wrapping | without wrapping |
| -- | ------ |
| This is a lot of text for a very tiny cell. It almost certainly will be wrapped. | This is a lot of text for a wider cell. It will not wrap so soon. |
:::
:::
::: {.column .styles}
#### styles
[Jekyll tables](https://www.markdownguide.org/extended-syntax/#tables) are the same syntax, but with no ability to add captions or control width:
```markdown
| fruit | price |
| ------ | -----: |
| apple | 2.05 |
| pear | 1.37 |
| orange | 3.09 |
| devil | 666.00 |
```
| fruit | price |
| ------ | -----: |
| apple | 2.05 |
| pear | 1.37 |
| orange | 3.09 |
| devil | 666.00 |
:::
:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
### Internal Links
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-screen-inset}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
Links in the Workbench are relative to the file so that you can link to the
files and confirm they work in the github preview. Figures, files, and data are
nested inside the `episodes/` folder.
```markdown
<!-- Next Episode -->
[next episode on dragons](dragons.md)
<!-- Data -->
[download the dragon data for this episode](data/dragon-lifespan.csv)
<!-- Setup -->
[setup instructions](../learners/setup.md)
```
:::
::: {.column .styles}
#### styles
Links are relative to the page that they are rendered to. You should use the
`{{ page.root }}` variable and the `link` tag in order to construct the correct
path to the resource:
```markdown
<!-- Next Episode -->
[next episode on dragons]({{ page.root }}{% link _episodes/dragons.md %})
<!-- Data -->
[download the dragon data for this episode]({{ page.root }}/data/dragon-lifespan.csv)
<!-- Setup -->
[setup instructions]({{ page.root }}/setup.md)
```
:::
:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
### Figures
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-screen-inset}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
Figures are written with the caption in the square brackets and alt appended
as an attribute like so: `![caption](fig/image.png){alt='image description'}`.
```markdown
![The dragon emerges!](fig/dragon-egg.png){alt='a red baby
dragon head sticks out from its egg'}
```
::: {.callout-note}
There is a valid reason behind this choice: text inside of the square brackets
can be formatted as markdown, so it makes sense for the caption. Alt text needs
no decoration as it will be descriptive.
:::
:::
::: {.column .styles}
#### styles
Figures are written with alt text in the square brackets, but no caption like
so: `![alt text]({{ page.root }}/fig/image.png)`
```markdown
![a red baby dragon head sticks out from its egg]({{ page.root }}/fig/dragon-egg.png)
The dragon emerges!
```
:::
:::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
## For Instructors
### Navigation
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-screen-inset}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
Episode and setup information is located on the left hand side of the page.
Navigation in the workbench is split between information for learners and
information for instructors. The top right of the page has a toggle button
between Learner and Instructor views, which change the four main navigation
items in the top navigation bar.
##### Learner View
When this is toggled, the main navigation contains the following menu items:
Key Points, Glossary, Learner Profiles, and More. The "More" dropdown menu
contains information for learners from the `learners/` folder aside from the
setup instructions.
![](fig/screenshot-learner-view.png){alt='screenshot of the workbench version
of "The Unix Shell". A blue arrow points to the top right corner indicating the
lesson is in "Learner View". The menu bar states the name of the lesson and has
the items described in text, with all but the first underlined. There is a grey
sidebar that says "Episodes" and a section called "Summary and Setup" is
underlined in blue. The main content shows a blue underline under the last
updated status.'}
##### Instructor view
When this is toggled, the main navigation contains the following menu items:
Key Points, Instructor Notes, Extract All Images, and More. The "More" dropdown
menu contains information for learners from the `instructors/` folder.
In addition, the schedule now appears on the home page, instructor notes are
displayed inline, and the estimated timings for a lesson appear.
![](fig/screenshot-instructor-view.png){alt='screenshot of the workbench
version of "The Unix Shell". A red arrow points to the top right corner
indicating the lesson is in "Learner View". The menu bar states the name of the
lesson and has the items described in text, with all but the first underlined
in red. There is a grey sidebar that says "Episodes" and a section called
"Summary and Setup" is underlined in red. The main content shows a red
underline under the last updated status.'}
:::
::: {.column .styles}
#### styles
Navigation in the styles repository is relegated to a single menubar at the top
of the lesson with seven items: Home, Code of Conduct, Setup, Episodes (dropdown),
Extras (dropdown), License, and Improve This Page.
![](fig/screenshot-styles.png){alt='screenshot of the styles version
of "The Unix Shell" lesson highlighting a single navigation bar at the top
containing the items described in the text'}
::: {.callout-warning}
##### Perceived simplicity
While the styles repositories appear to be simpler, there were several components
of lessons (such as instructor notes and glossary terms) that were not clearly
available to learners or instructors. Moreover, in cases like instructor training,
where there was much extra content for both learners and instructors, it was not
easy to look at the "Extra" menu and determine what content was appropriate for
a learner or an instructor.
:::
:::
:::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::
### Setup Information {#setup-instructor}
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: {.column-screen-inset}
:::::::::::::::::::::: {layout="[50,50]"}
::: {.column .workbench}
#### Workbench
The setup instructions are located on the home page at the `#setup` anchor.
The link to get to the setup is located at the "Summary and Setup" (in
Learner View) or the "Summary and Schedule" links (in Instructor View) in the
side navigation bar: