~exprez135/culturebridge-hugo

ref: 70b728b611244006430f1c09a822395565b24cec culturebridge-hugo/public/documentation/index.html -rw-r--r-- 42.1 KiB
70b728b6exprez135 Automatically generated. Merged on Netlify CMS. 2 months ago
                                                                                
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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="site documentation Hey all! This is going to be a longer post, but consider it essential and necessary. Plus, who wouldn&rsquo;t want to read a ton of what Nate writes???
So, what&rsquo;s going on?
I decided to re-consider the steps I&rsquo;ve taken thus far when it comes to the online form of the Manual. First, I realized that though WikiMedia is a great platform (I mean, it runs the best site on Earth), it is still a really different platform."><meta property="og:title" content="Documentation" />
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://culturebridge.ga/documentation/" />

<title>Documentation | CultureBridge Tulsa</title>

<link rel="stylesheet" href="/book.min.90c7f9122bbbb060c3d9afb803f29a17793d6280b0d25c3a257b770a107c863f.css" integrity="sha256-kMf5Eiu7sGDD2a&#43;4A/KaF3k9YoCw0lw6JXt3ChB8hj8=">
<script defer src="/en.search.min.94738dbba2c860bd10a019c9553a1f422faf61c5ab63b3292b1c2e3d5d03303e.js" integrity="sha256-lHONu6LIYL0QoBnJVTofQi&#43;vYcWrY7MpKxwuPV0DMD4="></script>
<link rel="alternate" type="application/rss+xml" href="https://culturebridge.ga/documentation/index.xml" title="CultureBridge Tulsa" />
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->

  <link rel="stylesheet" type="text/css" href="/fonts.css">
<script data-goatcounter="https://culturebridge.goatcounter.com/count"
        async src="//gc.zgo.at/count.js"></script>

</head>

<body>
  <input type="checkbox" class="hidden" id="menu-control" />
  <main class="container flex">
    <aside class="book-menu">
      
  <nav>
<h2 class="book-brand">
  <a href="/"><span>CultureBridge Tulsa</span>
  </a>
</h2>


<div class="book-search">
  <input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>











  



  
  
  
  

  
  <ul>
    
      
        <li class="book-section-flat" >
          
  
    <a href="/modules/" class="">Modules</a>
  

          
  
  
  

  
  <ul>
    
      
        <li>
          
  
    <a href="/modules/introduction/" class="">Introduction</a>
  

        </li>
      
    
      
        <li>
          
  
    <a href="/modules/debrief/" class="">Debrief</a>
  

        </li>
      
    
  </ul>
  

        </li>
      
    
      
        <li class="book-section-flat" >
          
  
    <a href="/supplements/" class="">Supplements</a>
  

          
  
  
  

  
  <ul>
    
      
        <li>
          
  
    <a href="/supplements/stories/" class="collapsed ">Stories</a>
  

          
  
  
  

  

        </li>
      
    
      
        <li>
          
  
    <a href="/supplements/activities/" class="collapsed ">Activities</a>
  

          
  
  
  

  

        </li>
      
    
  </ul>
  

        </li>
      
    
      
        <li class="book-section-flat" >
          
  
    <a href="/info/" class="">Info</a>
  

          
  
  
  

  
  <ul>
    
      
    
      
        <li>
          
  
    <a href="/info/youth-philanthropy-initiative/" class="">Youth Philanthropy Initiative</a>
  

        </li>
      
    
  </ul>
  

        </li>
      
    
      
        <li>
          
  
    <a href="/documentation/" class="active">Documentation</a>
  

          
  
  
  

  
  <ul>
    
  </ul>
  

        </li>
      
    
      
        <li>
          
  
    <a href="/posts/" class="">Updates</a>
  

          
  
  
  

  
  <ul>
    
  </ul>
  

        </li>
      
    
  </ul>
  











  
<ul>
  
  <li>
    <a href="https://gitlab.com/exprez135/culturebridge-hugo/" target="_blank" rel="noopener">
        Source code
      </a>
  </li>
  
</ul>






</nav>




  <script>(function(){var menu=document.querySelector("aside.book-menu nav");addEventListener("beforeunload",function(event){localStorage.setItem("menu.scrollTop",menu.scrollTop);});menu.scrollTop=localStorage.getItem("menu.scrollTop");})();</script>


 
    </aside>

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <strong>Documentation</strong>

  <label for="toc-control">
    <img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
  </label>
</div>


  
    <input type="checkbox" class="hidden" id="toc-control" />
    <aside class="hidden clearfix">
      
  <nav id="TableOfContents">
  <ul>
    <li><a href="#site-documentation">site documentation</a>
      <ul>
        <li><a href="#overview">overview</a>
          <ul>
            <li><a href="#purpose-outcomes-and-methods">Purpose, Outcomes, and Methods</a></li>
          </ul>
        </li>
        <li><a href="#the-site">the site</a>
          <ul>
            <li><a href="#the-layout">the layout</a></li>
          </ul>
        </li>
        <li><a href="#netlify-cms">Netlify CMS</a>
          <ul>
            <li><a href="#making-your-account">making your account</a></li>
            <li><a href="#the-simple-tour">the simple tour</a></li>
            <li><a href="#creating-a-page">creating a page</a></li>
            <li><a href="#saving">saving</a></li>
            <li><a href="#editorial-workflow">editorial workflow</a></li>
            <li><a href="#images-and-files">images and files</a></li>
            <li><a href="#limitations">limitations</a></li>
            <li><a href="#contact-me">contact me</a></li>
          </ul>
        </li>
        <li><a href="#markdown">markdown</a>
          <ul>
            <li><a href="#rich-text-vs-markdown-on-netlify">rich text vs. markdown on netlify</a></li>
            <li><a href="#must-i-use-markdown">must I use markdown?</a></li>
          </ul>
        </li>
        <li><a href="#netlify-not-the-cms">Netlify (not the CMS)</a></li>
        <li><a href="#hugo">Hugo</a></li>
        <li><a href="#git">git</a></li>
      </ul>
    </li>
  </ul>
</nav>


    </aside>
  
 
      </header>

      
      
  <article class="markdown"><h1 id="site-documentation">site documentation</h1>
<p><img src="/logo.svg" alt="CultureBridge Logo" /></p>
<p>Hey all! This is going to be a longer post, but consider it essential and necessary. Plus, who wouldn&rsquo;t want to read a ton of what Nate writes???</p>
<p>So, what&rsquo;s going on?</p>
<p>I decided to re-consider the steps I&rsquo;ve taken thus far when it comes to the online form of the Manual. First, I realized that though WikiMedia is a great platform (I mean, it runs the best site on Earth), it is still a really different platform. To properly use it we would all need to learn how to use a special markup language. Plus, the site is pretty slow and it wouldn&rsquo;t lend itself to simple deployments to the final site.</p>
<blockquote class="book-hint info">
  <strong>Note</strong>
Don&rsquo;t worry! This page will be edited before we release anything so we aren&rsquo;t <em>too</em> unprofessional ;)
</blockquote>

<p>Instead, I figured that it would be best to look at POM when it comes to the platform:</p>
<h2 id="overview">overview</h2>
<h3 id="purpose-outcomes-and-methods">Purpose, Outcomes, and Methods</h3>
<p><strong>Purpose</strong>: To easily and effectively communicate the CultureBridge project to site visitors.</p>
<p><strong>Outcomes</strong>:</p>
<ul>
<li>Portability: a site which can last forever with very little maintenance. This really means:
<ul>
<li>Universal input: a form of writing which is well-supported across the web.</li>
<li>Universal output: a static site (plain HTML, CSS, &amp; JS)  - which can be run from files on your computer or a website</li>
<li>Multi-format: the ability to download the entire site in or convert the entire site to HTML, PDF, markdown, etc.</li>
</ul>
</li>
<li>Ease-of-use: both for the end-user and for us – the writers. The website should be easy to navigate. We need something which is easy to learn how to use.</li>
<li>Beautiful: the simple fact is, a beautiful site which focuses on content is better for the situation.
Version control: a permanent record of changes and additions (not just for us, but for future creators).</li>
</ul>
<p><strong>Methods</strong>: Well, here we are! The following is meant to introduce you to what comes next and how you can use it.</p>
<h2 id="the-site">the site</h2>
<p>You are here! For now, we can use <code>culturebridge.ga</code> as the website. But no worries, it would be as simple as 1 … 2 … and 3 to change it.</p>
<div class="book-expand">
  <label>
    <div class="book-expand-head flex justify-between">
      <span>question</span>
      <span></span>
    </div>
    <input type="checkbox" class="hidden" />
    <div class="book-expand-content markdown-inner">
      <p>Have we considered <code>culturebridgetulsa.org</code>?</p>
<p>Though maybe the shorter <code>culturebridge</code> is better <code>¯\_(ツ)_/¯</code>.</p>
<p>We could also use <code>culturebridgetulsa.com</code> if we wanted to replace our other site.</p>

    </div>
  </label>
</div>

<h3 id="the-layout">the layout</h3>




<div class="book-tabs"><input type="radio" class="hidden" name="tabs-mobile-desktop" id="tabs-mobile-desktop-0" checked="checked" />
  <label for="tabs-mobile-desktop-0">Mobile</label>
  <div class="book-tabs-content markdown-inner"><h2 id="mobile-layout">Mobile Layout</h2>
<p>There are two &ldquo;menus&rdquo; you have to know about. First, the actual menu. This is the three bars in the top left. Click on it and you will see a big &ldquo;CultureBridge Tulsa&rdquo;, a search input, and a Table of Contents. The search function is still a work-in-progress, so it may or may not work.</p>
<p>The table of contents you see here is site-wide. It links to all of the major pages. Think of these as chapters in a book.</p>
<blockquote class="book-hint info">
  <strong>Did you know?</strong> The theme of our site is actually called &ldquo;Hugo Book&rdquo;. How appropriate!
</blockquote>
<p>You should see the Modules section, the Supplements section, and an Info section. These will be the major parts of the site. One day you will be able to click on &ldquo;Modules&rdquo; and see a page explaining what the modules are and linking to all of them. Or, you could jump right in and go to the Module you want (go ahead! try looking at the Debrief or Intro).</p>
<p>The same thing will happen with the Supplements and the Info section.</p>
<div class="book-expand">
  <label>
    <div class="book-expand-head flex justify-between">
      <span>What is the Info section?</span>
      <span></span>
    </div>
    <input type="checkbox" class="hidden" />
    <div class="book-expand-content markdown-inner">
      The Info section consists of the miscellaneous items we talked about going into the Wiki. Examples include the YPI page, the New Tulsans page, a history &amp; timeline of our experience in CultureBridge, and more! We can pretty much add whatever we want.
    </div>
  </label>
</div>
<p>That&rsquo;s all pretty standard. The other menu (found on the top right) is the specific page&rsquo;s Table of Contents. This TOC is generated by the headings you use in the page. Take a look at the one on this page to see how it is.</p>
<blockquote class="book-hint info">
  <strong>Note:</strong> Not every page will have one of these! We can disable them on a page-by-page basis – which you&rsquo;ll learn how to do later.
</blockquote>
<p>That&rsquo;s about it for the layout! In case you are wondering, these are the fonts we are using:</p>
<ul>
<li>Charter for normal text (this is that font),</li>
<li><code>Fira Mono for code, and</code></li>
<li>
<h5 id="fira-sans-for-menus-headers-and-special-call-outs">Fira Sans for menus, headers, and special call-outs</h5>
</li>
</ul>
</div><input type="radio" class="hidden" name="tabs-mobile-desktop" id="tabs-mobile-desktop-1"  />
  <label for="tabs-mobile-desktop-1">Desktop</label>
  <div class="book-tabs-content markdown-inner"><h2 id="desktop-layout">Desktop Layout</h2>
<p>For everyone reading this on a computer, I might as well come out and say it: <strong>I love you</strong>.</p>
<p>Why? Because the web is just so much better on a big screen. Why do we limit ourselves to tiny little things which make life <strong>so much harder</strong> for programmers and designers?</p>
<p>So, I&rsquo;m not going to waste your time here. On a computer it&rsquo;s much easier to see the Menu and the single-page Table of Contents. Everything is pretty intuitive. But if you&rsquo;re curious, go ahead and switch over to the &ldquo;Mobile&rdquo; tab to read about it all.</p>
<p>Love you,
Nate</p>
</div></div>

<h2 id="netlify-cms">Netlify CMS</h2>
<p>I&rsquo;m jumping ahead to this section cause it&rsquo;s the most necessary. The <a href="#markdown">Markdown</a> section is also somethat important, if you want to be cool, but it&rsquo;s not strictly necessary, as  you will see in this section.</p>
<p><strong>What is Netlify CMS?</strong></p>
<p>A CMS is a &ldquo;Content Management System&rdquo;. In other words, it&rsquo;s a system which helps us manage our content. Or, in even different other words, it&rsquo;s a thing we will use to write, edit, style, and &ldquo;push&rdquo; each page on the site.</p>
<div class="book-expand">
  <label>
    <div class="book-expand-head flex justify-between">
      <span>What do you mean – to push?</span>
      <span></span>
    </div>
    <input type="checkbox" class="hidden" />
    <div class="book-expand-content markdown-inner">
      &ldquo;Push&rdquo; here means to send the content to our backend system which will automatically add it to the website. To know what it actually means, in a technical sense, read the rest of this Documentation (yes, I am trying to convert you all into technically literate people). The best way to learn tech is to read, to practice, to randomly explore, and <a href="https://ijams.tk/posts/rules/#hacker">to hack</a>.
    </div>
  </label>
</div>

<p>In summary, these are the instructions for how you will make content on this site.</p>
<h3 id="making-your-account">making your account</h3>
<p>Whoa! An account! Get excited everyone, this is where it gets fun. It&rsquo;s also where you need to be using a computer, not a phone :)</p>
<p><strong>First</strong>, go to <a href="https://culturebridge.ga/admin/">culturebridge.ga/admin/</a>. Click on the &ldquo;Login with Netlify Identity&rdquo;. Move to the &ldquo;Sign up&rdquo; tab. You can either:</p>
<ol>
<li>Use a name, email, and password, <strong>or</strong></li>
<li>Use Google to login (or GitHub, GitLab, and BitBucket).</li>
</ol>
<p><strong>Second</strong>, make sure you check the appropriate email to confirm your account.</p>
<blockquote class="book-hint warning">
  Right now registration is open to anyone (but only meant for you all). Soon, I will close registration to make it invite-only.
</blockquote>

<p><strong>Third</strong>, login with that account.</p>
<h3 id="the-simple-tour">the simple tour</h3>
<p>Next, you should see something a little like this:</p>
<p><img src="/images/first-page.png" alt="Image of first page" /></p>
<p>On the left are the three sections open for you to edit (i.e. Modules, Supplements, and Info). Clicking on these will show you the pages within that. The page which is named after the Section (e.g. Modules in the Module section) is the &ldquo;home&rdquo; page for that section.</p>
<p><strong>Now</strong>, let&rsquo;s take you on a small tour. Click on &ldquo;Debrief&rdquo;. After a few seconds of loading, you should see something like this:</p>
<p><img src="/images/module-page-one.png" alt="First page of Module Debrief" /></p>
<p>On the left is a text editor, and on the right is a plain HTML preview of what it would look like (but un-styled). You can disable the preview on the right by clicking on the eye symbol in the top right. Now, you&rsquo;ll see something like this:</p>
<p><img src="/images/module-page-two.png" alt="Second page of Module Debrief" /></p>
<p>Now, pay special attention to the toggle which says Rich Text and Markdown. The Rich Text version is like any WYSIWYG (&ldquo;What You See Is What You Get&rdquo;) editor. You format it like you would anywhere. Now try the Markdown view:</p>
<p><img src="/images/module-page-three.png" alt="Third page of Module Debrief" /></p>
<p>Markdown is a plain text &ldquo;markup&rdquo; language which allows you to type and focus on the content while still considering formatting. To learn markdown (and I encourage you to!), read the <a href="#markdown">Markdown section</a>.</p>
<p>Scroll down to the bottom of the page until you see something like this:</p>
<p><img src="/images/module-page-four.png" alt="Fourth page of Module Debrief" /></p>
<p>Let&rsquo;s go through each of these settings:</p>
<ol>
<li>Flatten Section in TOC: makes this page one of the left-most pages in the Menu (you probably won&rsquo;t use this).</li>
<li>Table of Contents: enables or disables the TOC. If it&rsquo;s a simple page without many headers, disable it. Otherwise, enable it.</li>
<li>Hidden: when toggled, hides the page from the Menu.</li>
<li>Collapse section: collapses sub-pages, like the Activities and Stories section.</li>
<li>Weight: The lowest numbers appear first in the Menu. The highest numbers are last.</li>
</ol>
<h3 id="creating-a-page">creating a page</h3>
<p>To create a page, first go to the proper section. Then, click the &ldquo;New …&quot;. An empty new page will appear for you to edit. Fill out the Title (this is what will appear in the TOC), then set the proper settings. Put the content in the Body section.</p>
<p><img src="/images/module-page-five.png" alt="Fifth page of Module Debrief" /></p>
<h3 id="saving">saving</h3>
<p>When you are done with a new post or editing an existing one, be sure to click Save (DON&rsquo;T SAVE YOUR TEST POST <strong>PLEASE</strong>). Once you do, you&rsquo;ll see some more info on the top:</p>
<p><img src="/images/module-page-six.png" alt="Sixth page of Module Debrief" /></p>
<p>Let&rsquo;s go through it:</p>
<ul>
<li><strong>&ldquo;Delete Unpublished Entry&rdquo;</strong>: Deletes the post, duh.</li>
<li><strong>&ldquo;Check for Preview&rdquo;</strong>: this is one of the coolest features of our platform. When you create a draft and save it, our system automatically creates a Preview site within a minute or two. Click this, and eventually &ldquo;View Preview&rdquo; will appear. Click this will open a new tab with the full preview site.</li>
<li><strong>&ldquo;Set Status&rdquo;</strong>: Netlify includes an editorial management system. When you create or edit content, it will be entered as a draft. Eventually a designated editor will come and mark it as &ldquo;In Review&rdquo; when they are reviewing or changing it. Once it is ready for publishing to the site, they will mark it as &ldquo;Ready&rdquo;. Nate will take care of publishing to the site until we are all more familiar with the system.</li>
<li><strong>&ldquo;Publish&rdquo;</strong>: Don&rsquo;t use this :)</li>
</ul>
<h3 id="editorial-workflow">editorial workflow</h3>
<p><img src="/images/workflow-image.png" alt="Editorial workflow screenshot" /></p>
<p>Shows the Editorial Workflow described above.</p>
<h3 id="images-and-files">images and files</h3>
<p>You can embed images in your posts using the Rich Text editor. Your files will be uploaded to the server. The &ldquo;Media&rdquo; tab shows you everything uploaded thus far.</p>
<p><strong>Coming soon:</strong> the ability to add files as attachments to pages. This will be helpful for attaching specific copies of certain information (e.g. on a Story page, we can include a PDF of the story that is properly formatted for printing, laminating, and cutting).</p>
<h3 id="limitations">limitations</h3>
<blockquote class="book-hint danger">
  <strong>Important!</strong> Only have <strong>one</strong> person edit a page at a time.
</blockquote>

<h3 id="contact-me">contact me</h3>
<p>Have questions? Just contact me!</p>
<h2 id="markdown">markdown</h2>
<p>There are some awesome guides on the internet. Here is a great one:</p>
<p><a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet</a></p>
<p>Markdown is the source content of every page on our site. When you write in the Rich Text editor, it is writing markdown in the background. Markdown is then taken by our system (see <a href="#hugo">Hugo</a> below) and formatted into HTML with the templates and CSS we take from our site theme and custom code I&rsquo;ve written.</p>
<div class="book-expand">
  <label>
    <div class="book-expand-head flex justify-between">
      <span>By the way…</span>
      <span></span>
    </div>
    <input type="checkbox" class="hidden" />
    <div class="book-expand-content markdown-inner">
      I use markdown for just about everything. I run five or six sites which use the same system as this one. I write my notes in markdown with <a href="https://joplinapp.org">Joplin</a>. Many websites and forums support markdown for writing comments (e.g. Reddit). There are even programs that let you use markdown to write emails (though I <strong>highly</strong> encourage you to <a href="https://useplaintext.email">useplaintext.email</a>). To read about the original (and somewhat simpler) markdown – and it&rsquo;s philosophy – click <a href="https://daringfireball.net/projects/markdown/">here</a>.
    </div>
  </label>
</div>

<h3 id="rich-text-vs-markdown-on-netlify">rich text vs. markdown on netlify</h3>
<p>Most of everything you need can be written in the Rich Text editor. But there are some exceptions. When you want to use these awesome features, you need to change over to markdown mode.</p>
<h4 id="supported-features-in-the-rich-text-editor">supported features in the rich text editor</h4>
<ul>
<li>Bold &amp; Italics</li>
<li>Headers (H1 to H6)</li>
<li>Links</li>
<li>Quotes</li>
<li>Unordered lists (i.e. bullet points)</li>
<li>Ordered lists (i.e. numbered points)</li>
<li>Images</li>
<li>Code (in-line)</li>
<li>Code (block)</li>
</ul>
<h4 id="features-which-require-markdown">features which require markdown</h4>
<h5 id="tables">tables</h5>
<p>Tables might be needed. Here is an example:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">| <span style="font-weight:bold">**Head box**</span> | Content here |
| --- | --- |
| Name | Nate Ijams |
| Age | 18 |
| Coolness level | 1000 |
| Nickname | <span style="font-style:italic">*The Great*</span> |
| Website | [<span style="color:#f92672">ijams.tk</span>](<span style="color:#a6e22e">https://ijams.tk</span>) |
</code></pre></div><table>
<thead>
<tr>
<th><strong>Head box</strong></th>
<th>Content here</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Nate Ijams</td>
</tr>
<tr>
<td>Age</td>
<td>18</td>
</tr>
<tr>
<td>Coolness level</td>
<td>1000</td>
</tr>
<tr>
<td>Nickname</td>
<td><em>The Great</em></td>
</tr>
<tr>
<td>Website</td>
<td><a href="https://ijams.tk">ijams.tk</a></td>
</tr>
</tbody>
</table>
<h5 id="horizontal-lines">horizontal lines</h5>
<p>Lines might be needed to split up content! A haiku split:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">The west wind whispered,

---

And touched the eyelids of spring:

***

Her eyes, Primroses.

___
</code></pre></div><p>The west wind whispered,</p>
<hr>
<p>And touched the eyelids of spring:</p>
<hr>
<p>Her eyes, Primroses.</p>
<hr>
<p>Remember, with all markdown content, it&rsquo;s important that you put an empty line between things. You can use <code>***</code> or <code>___</code> or <code>---</code>. All of them work!</p>
<h5 id="footnotes">footnotes</h5>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">This is important information[^1].

This is also important, but it is second[^2].
</code></pre></div><p>This is important information<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>.</p>
<p>This is also important, but it is second<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>.</p>
<p>But note, at the <em>bottom</em> of your page, you need to add something like this:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">[^1]: Here is a disclaimer about some complication.

[^2]: Here is a reference: google.com.
</code></pre></div><p>A line will automatically be inserted before the footnotes section.</p>
<h5 id="hints">hints</h5>
<p>You make it like this:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tpl" data-lang="tpl"><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">hint</span> <span style="color:#e6db74">&#34;info&#34;</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
**This is a hint**, which is highlighted beautifully.
You can make it blue with &#34;info&#34;, yellow with &#34;warning&#34;,
and red with &#34;danger&#34;.
<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">hint</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
</code></pre></div><blockquote class="book-hint info">
  <strong>This is a hint</strong> which is highlighted beautifully.
You can make it blue with &ldquo;info&rdquo;, yellow with &ldquo;warning&rdquo;,
and red with &ldquo;danger&rdquo;.
</blockquote>

<blockquote class="book-hint warning">
  <strong>This is a hint</strong> which is highlighted beautifully.
You can make it blue with &ldquo;info&rdquo;, yellow with &ldquo;warning&rdquo;,
and red with &ldquo;danger&rdquo;.
</blockquote>

<blockquote class="book-hint danger">
  <strong>This is a hint</strong> which is highlighted beautifully.
You can make it blue with &ldquo;info&rdquo;, yellow with &ldquo;warning&rdquo;,
and red with &ldquo;danger&rdquo;.
</blockquote>

<h5 id="buttons">buttons</h5>




  

<a  href="/"   class="book-btn">
  Go Home
</a>




  
  


<a  href="https://lmgtfy.com/?q=puppies&amp;t=i"   target="_blank"  class="book-btn">
  Be Happy
</a>

<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tpl" data-lang="tpl"><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">button</span> <span style="color:#a6e22e">relref</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/&#34;</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>Go Home<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">button</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>

<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">button</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://lmgtfy.com/?q=puppies&amp;t=i&#34;</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>Be Happy<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">button</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
</code></pre></div><h5 id="columns">columns</h5>
<div class="book-columns flex flex-wrap">
  
  <div class="flex-even markdown-inner">
     <!-- begin columns block -->
<h1 id="japanese">Japanese</h1>
<p>初しぐれ猿も小蓑をほしげ也</p>
<p>はつしぐれさるもこみのをほしげなり</p>

  </div>
  
  <div class="flex-even markdown-inner">
     <!-- magic sparator, between columns -->
<h1 id="english">English</h1>
<p>the first cold shower</p>
<p>even the monkey seems to want</p>
<p>a little coat of straw</p>

  </div>
  
</div>

<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tpl" data-lang="tpl"><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">columns</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span> &lt;!-- begin columns block --&gt;
# Japanese

初しぐれ猿も小蓑をほしげ也

はつしぐれさるもこみのをほしげなり

&lt;---&gt; &lt;!-- magic sparator, between columns --&gt;

# English

the first cold shower

even the monkey seems to want

a little coat of straw
<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">columns</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
</code></pre></div><h5 id="expand">expand</h5>
<div class="book-expand">
  <label>
    <div class="book-expand-head flex justify-between">
      <span>don&#39;t click here</span>
      <span></span>
    </div>
    <input type="checkbox" class="hidden" />
    <div class="book-expand-content markdown-inner">
      GOSH DANG. I SAID <strong>DON&rsquo;T</strong>.
    </div>
  </label>
</div>

<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tpl" data-lang="tpl"><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">expand</span> <span style="color:#e6db74">&#34;don&#39;t click here&#34;</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
GOSH DANG. I SAID **DON&#39;T**.
<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">expand</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
</code></pre></div><h5 id="katex">katex</h5>

<link rel="stylesheet" href="/katex/katex.min.css" />
<script defer src="/katex/katex.min.js"></script>
<script defer src="/katex/auto-render.min.js" onload="renderMathInElement(document.body);"></script><span>\(f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\)</span>

<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tpl" data-lang="tpl"><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">katex</span> <span style="color:#e6db74">&#34;[display]&#34;</span> <span style="color:#e6db74">&#34;[class=&#34;</span><span style="color:#a6e22e">text</span><span style="color:#f92672">-</span><span style="color:#a6e22e">center</span><span style="color:#e6db74">&#34;]&#34;</span>  <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>

f(x) = \int_<span style="color:#75715e">{</span><span style="color:#f92672">-</span><span style="color:#960050;background-color:#1e0010">\</span><span style="color:#a6e22e">infty</span><span style="color:#75715e">}</span>^\infty\hat f(\xi)\,e^<span style="color:#75715e">{</span><span style="color:#ae81ff">2</span> <span style="color:#960050;background-color:#1e0010">\</span><span style="color:#a6e22e">pi</span> <span style="color:#a6e22e">i</span> <span style="color:#960050;background-color:#1e0010">\</span><span style="color:#a6e22e">xi</span> <span style="color:#a6e22e">x</span><span style="color:#75715e">}</span>\,d\xi

<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">katex</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
</code></pre></div><h5 id="tabs">tabs</h5>




<div class="book-tabs"><input type="radio" class="hidden" name="tabs-people" id="tabs-people-0" checked="checked" />
  <label for="tabs-people-0">Non-People</label>
  <div class="book-tabs-content markdown-inner"><h2 id="puppies">Puppies</h2>
<p>They are cute. You probably aren&rsquo;t.</div><input type="radio" class="hidden" name="tabs-people" id="tabs-people-1"  />
  <label for="tabs-people-1">Dumb People</label>
  <div class="book-tabs-content markdown-inner"><h2 id="honesty-has-rewards">Honesty has rewards</h2>
<p>I am really proud of you for clicking on this tab. Honesty has many rewards. Most of all, be honest with <em>yourself</em>.</div><input type="radio" class="hidden" name="tabs-people" id="tabs-people-2"  />
  <label for="tabs-people-2">Smart People</label>
  <div class="book-tabs-content markdown-inner"><h2 id="ego-is-bad">Ego is bad</h2>
<p>Wow. Just wow. Get over yourself.</div></div>

<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-tpl" data-lang="tpl"><span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">tabs</span> <span style="color:#e6db74">&#34;people&#34;</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">tab</span> <span style="color:#e6db74">&#34;Non-People&#34;</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
## Puppies

They are cute. You probably aren&#39;t.

<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tab</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">tab</span> <span style="color:#e6db74">&#34;Dumb People&#34;</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
## Honesty has rewards

I am really proud of you for clicking on this tab. Honesty has many rewards. Most of all, be honest with *yourself*.
<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tab</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">tab</span> <span style="color:#e6db74">&#34;Smart People&#34;</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
## Ego is bad

Wow. Just wow. Get over yourself.
<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tab</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
<span style="color:#75715e">{{</span><span style="color:#f92672">&lt;</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">tabs</span> <span style="color:#f92672">&gt;</span><span style="color:#75715e">}}</span>
</code></pre></div><p>Where I put <code>people</code> in the <code>{{&lt; tabs &quot;people&quot; &gt;}}</code> above, you need to put a unique id. For example, you can&rsquo;t have two Tab things on one page which both have the ID &ldquo;people&rdquo;. One might be &ldquo;people&rdquo; and the other &ldquo;manual-explanation&rdquo;.</p>
<h3 id="must-i-use-markdown">must I use markdown?</h3>
<p>Maybe not! And you certainly aren&rsquo;t required to put all these fancy things (tabs, hints, columns, buttons). But you probably will need to use tables, footnotes, and horizontal lines at some point.</p>
<h2 id="netlify-not-the-cms">Netlify (not the CMS)</h2>
<p><a href="https://netlify.com">Netlify</a> is the service we are using for hosting, site deployment, and more. This is separate (but related to Netlify CMS). It allows us to build the site automatically when changes are pushed to our Git repository. See the <a href="#git">git section</a>.</p>
<h2 id="hugo">Hugo</h2>
<p><a href="https://gohugo.io">Hugo</a> is the wonderful static site generator that we are using. In essence, this is how it all works:</p>
<ol>
<li>We write content (in the end, this is in markdown).</li>
<li>We gather/create templates: these are written in HTML, CSS, and Go.</li>
<li>Hugo takes the content we have and essentially puts everything together with the templates. In the end, it outputs a static site. That is, a folder which contains everything that the website contains, from a home page (index.html) to each photo. You could browse this on your computer, or have a web server serve the files to visitors. This is in contrast to a dynamic site which generates the content then sends it to your computer every time you visit the page.</li>
</ol>
<p>Hugo is well-know, well-supported, and extensible. I use it for my <a href="https://thetaliaferrotimes.org">school newspaper site</a>, my <a href="https://ijams.tk">personal site</a>, my school&rsquo;s <a href="https://findhelp.ga">tutoring site</a>, and <a href="https://worldinabox.ga">event sites</a>.</p>
<h2 id="git">git</h2>
<p><a href="https://git-scm.com/">Git</a> is a version control system. It is used widely in the development/programming world. It (or other SCM software like Mercurial) is used literally everywhere. It&rsquo;s just one of those essential tools you have to learn. This site is tracked and held in a Git repository. See it at <a href="https://gitlab.com/exprez135/culturebridge-hugo/">https://gitlab.com/exprez135/culturebridge-hugo/</a>. This can be used to develop new features, keep track of the project history, restore to a previous version, etc. Too many features to count. Resources:</p>
<p><a href="https://git-scm.com/book/en/v2">The Git Book</a>.</p>
<p><a href="https://try.github.io/">Resources to learn Git</a>.</p>
<p><a href="https://rogerdudler.github.io/git-guide/">git – the simple guide</a>.</p>
<p>If you want, you can make a GitLab account and directly clone and work with the repository. Or, just check it out to read the source code. Notice that the end of each page has &ldquo;Edit this page&rdquo;. That will take you to a direct online editor in the repository, but you&rsquo;ll have to be signed in to use it! You could even suggest changes, edits, and clarifications to this document!</p>
<section class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1" role="doc-endnote">
<p>Here is a disclaimer about some complication. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:2" role="doc-endnote">
<p>Here is a reference: google.com. <a href="#fnref:2" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</section>
</article>
 
      

      <footer class="book-footer">
        
  <div class="flex justify-between">

  


  

  



<div class="book-languages" tabindex="0" aria-haspopup="true">
  <ul>
    <li class="flex align-center">
      <img src="/svg/translate.svg" class="book-icon" alt="Languages" />
      English
    </li> 
  </ul>

  <ul class="book-languages-list">
    
    <li class="active">
      <a href="https://culturebridge.ga/" class="flex align-center">
        <img src="/svg/translate.svg" class="book-icon" alt="Languages" />
        English
      </a>
    </li>
    
    <li class="">
      <a href="https://culturebridge.ga/es/" class="flex align-center">
        <img src="/svg/translate.svg" class="book-icon" alt="Languages" />
        Spanish
      </a>
    </li>
    
  </ul>
</div>




  <div><a class="flex align-center" href="https://gitlab.com/exprez135/culturebridge-hugo/commit/1f471f22593704b2eba46c52aeeee2b1c61f9c48" title='Last modified by Nate Ijams | April 21, 2020' target="_blank" rel="noopener">
      <img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
      <span>April 21, 2020</span>
    </a>
  </div>



  <div>
    <a class="flex align-center" href="https://gitlab.com/exprez135/culturebridge-hugo/edit/master//content/documentation/_index.md" target="_blank" rel="noopener">
      <img src="/svg/edit.svg" class="book-icon" alt="Edit" />
      <span>Edit this page</span>
    </a>
  </div>

</div>

 
        
      </footer>

      
  
  <div class="book-comments">

</div>
  
 

      <label for="menu-control" class="hidden book-menu-overlay"></label>
    </div>

    
    <aside class="book-toc">
      
  <nav id="TableOfContents">
  <ul>
    <li><a href="#site-documentation">site documentation</a>
      <ul>
        <li><a href="#overview">overview</a>
          <ul>
            <li><a href="#purpose-outcomes-and-methods">Purpose, Outcomes, and Methods</a></li>
          </ul>
        </li>
        <li><a href="#the-site">the site</a>
          <ul>
            <li><a href="#the-layout">the layout</a></li>
          </ul>
        </li>
        <li><a href="#netlify-cms">Netlify CMS</a>
          <ul>
            <li><a href="#making-your-account">making your account</a></li>
            <li><a href="#the-simple-tour">the simple tour</a></li>
            <li><a href="#creating-a-page">creating a page</a></li>
            <li><a href="#saving">saving</a></li>
            <li><a href="#editorial-workflow">editorial workflow</a></li>
            <li><a href="#images-and-files">images and files</a></li>
            <li><a href="#limitations">limitations</a></li>
            <li><a href="#contact-me">contact me</a></li>
          </ul>
        </li>
        <li><a href="#markdown">markdown</a>
          <ul>
            <li><a href="#rich-text-vs-markdown-on-netlify">rich text vs. markdown on netlify</a></li>
            <li><a href="#must-i-use-markdown">must I use markdown?</a></li>
          </ul>
        </li>
        <li><a href="#netlify-not-the-cms">Netlify (not the CMS)</a></li>
        <li><a href="#hugo">Hugo</a></li>
        <li><a href="#git">git</a></li>
      </ul>
    </li>
  </ul>
</nav>

 
    </aside>
    
  </main>

  <script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

</body>

</html>