Slide example - HackMD

slideOptions: transition: shrink --- # Slide example ![](https://i.imgur.com/Ov8F3IV.png =450x) Choose <i class="fa fa-tv"></i> **Slide Mode** in the top right sharing <i class="fa fa-share-alt fa-18"></i> menu and hit "**Preview**" to see your slide. --- For feature details please visit: https://github.com/hakimel/reveal.js/ You can use `URL query` or `slideOptions` of the YAML metadata to customize your slides. --- ## First slide `---` Is the divider of slides ---- ### First branch of first the slide `----` Is the divider of branches Use the _Space_ key to navigate through all slides. ---- ### Second branch of first the slide Nested slides are useful for adding additional detail underneath a high-level horizontal slide. --- ## Point of View Press **ESC** to enter the slide overview. --- ### First branch of first the slide `----` Is the divider of branches Use the _Space_ key to navigate through all slides. ---- ### Second branch of first the slide Nested slides are useful for adding additional detail underneath a high-level horizontal slide. --- ## Touch Optimized Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. --- ## Fragments `` Is the fragment syntax Hit the next arrow... ... to step through ... <span>... a</span> <span>fragmented</span> <span>slide.</span> Note: This slide has fragments which are also stepped through in the notes window. --- ## Fragment Styles There are different types of fragments, like: grow shrink fade-out fade-up (also down, left and right!) current-visible Highlight <span>red</span> <span>blue</span> <span>green</span> ---  ## Transition Styles Different background transitions are available via the transition option. This one's called "zoom". `` Is the transition syntax You can use: none/fade/slide/convex/concave/zoom ---  `` Also, you can set different in/out transition You can use: none/fade/slide/convex/concave/zoom postfix with `-in` or `-out` ---  `` Custom the transition speed! You can use: default/fast/slow --- ## Themes reveal.js comes with a few themes built in: Black (default) - White - League - Sky - Beige - Simple Serif - Blood - Night - Moon - Solarized It can be set in YAML slideOptions ---  `` Is the background syntax ---  <div style="color: #fff;"> ## Image Backgrounds `` </div> ----  <div style="color: #fff;"> ## Tiled Backgrounds `` </div> ----  <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> ## Video Backgrounds `` </div> ----  ## ... and GIFs! --- ## Pretty Code ``` javascript function linkify( selector ) { if( supports3DTransforms ) { const nodes = document.querySelectorAll( selector ); for( const i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; if( !node.className ) { node.className += ' roll'; } } } } ``` Code syntax highlighting courtesy of [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/). --- ## Marvelous List - No order here - Or here - Or here - Or here --- ## Fantastic Ordered List 1. One is smaller than... 2. Two is smaller than... 3. Three! --- ## Tabular Tables | Item | Value | Quantity | | ---- | ----- | -------- | | Apples | $1 | 7 | | Lemonade | $2 | 18 | | Bread | $3 | 2 | --- ## Clever Quotes > “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” --- ## Intergalactic Interconnections You can link between slides internally, [like this](#/1/3). --- ## Speaker There's a [speaker view](https://github.com/hakimel/reveal.js#speaker-notes). It includes a timer, preview of the upcoming slide as well as your speaker notes. Press the _S_ key to try it out. Note: Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit `s` on your keyboard). --- ## Take a Moment Press `B` or `.` on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. --- ## Spotlight Enable with `slideOptions.spotlight.enabled: true` in YAML frontmatter ```yaml --- slideOptions: spotlight: enabled: true --- ``` ---- ### Demo ![spotlight](https://i.imgur.com/dXhHcCP.gif) --- ## Slides Timer Enable with `slideOptions.allottedMinutes = {? minutes}` in YAML frontmatter ```yaml --- slideOptions: allottedMinutes: 5 --- ``` ---- ### Demo ![Timer](https://i.imgur.com/l5Akz4B.gif) --- # First pipeline - Use stages to organize jobs - Use variables to configure jobs - Use artifacts between jobs - Build a first "complete" pipeline ---- ## The pipeline: _example_hello_gitlab ```mermaid graph LR subgraph GitLab subgraph stage build build[compile hello.md to index.html] end subgraph stage test test[spellcheck markdown] lint[lint markdown] end subgraph stage deploy deploy[deploy index.html using surge] end artifact project_configuration end subgraph surge.sh projectname-letsboot.surge.sh end build-.-test build-.-lint test-.-deploy lint-.-deploy build-->|index.html|artifact artifact-->|index.html|deploy deploy-->|index.html|projectname-letsboot.surge.sh project_configuration-->|surge.sh access credentials|deploy class surge.sh crashed; classDef crashed fill:lightblue; ``` ---- ## Manual steps - "To automate, understanding each step, you first must." (Yoda 4 ABY) ```bash cd ~/course/_example_hello_gitlab # compile markdown code to html npx showdown makehtml -i hello.md -o dist/index.html echo "<p>Build: $(date)</p>" >> dist/index.html # spellchecking npx markdown-spellcheck -r -n -a --en-us hello.md # markdown linting npx markdownlint-cli hello.md # static page hosting export SURGE_LOGIN="info+gitlab-course22@letsboot.com" export SURGE_TOKEN="725645476fb19997f95c0ac7eee921e7" npx surge dist/ letsboot-gitlab-course-$PARTICIPANT_NAME.surge.sh echo "http://letsboot-gitlab-course-$PARTICIPANT_NAME.surge.sh" ``` Notes: - We choose to "compile" markdown, to focus on the pipeline instead of a programming language specific stack. ---- ## GitLab Keywords <col-l> ```yaml # .gitlab-ci.yml # minimal example to explain features for next exercise # define a list of stages stages: # this are the default stages - .pre - build - test - deploy - .post # example job producting an artifact first_job: image: node:alpine stage: build script: - echo "make me an artifact for ${CI_PROJECT_NAME}" > artifact.txt artifacts: paths: [ artifact.txt ] # job consuming an artifact second_job: image: node:alpine stage: test script: - echo "I can access the artifact" - cat artifact.txt ``` </col-l> <col-r> - [Stages](https://docs.gitlab.com/ee/ci/yaml/#stages) - [Jobs](https://docs.gitlab.com/ee/ci/jobs/index.html) - [Image](https://docs.gitlab.com/ee/ci/yaml/#image) - [Stage](https://docs.gitlab.com/ee/ci/yaml/#stage) - [Artifacts](https://docs.gitlab.com/ee/ci/yaml/#artifacts) - [Predefined Variables](https://docs.gitlab.com/ee/ci/variables/predefined_variables.html) - [Project settings variables](https://docs.gitlab.com/ee/ci/variables/#add-a-cicd-variable-to-a-project) </col-r> Notes: - [The central `.gitlab-ci.yml` keyword reference is best entry point for the GitLab CI/CD documentation.](https://docs.gitlab.com/ee/ci/yaml/) - You can browse the artifacts in the job which generated it. - You can download all artifacts of a pipeline through the three dots menu in the pipeline list. - [Since Version 12.6 you can change the name and location of the .gitlab-ci.yml](https://docs.gitlab.com/ee/ci/pipelines/settings.html#specify-a-custom-cicd-configuration-file) - we reommend to use includes instead, as this setting is not obvious to someone looking into your GitLab project repository. ---- ## Exercise - first pipeline ### build, test and deploy `_example_hello_gitlab` <col-l> ```bash # 1. run commands manually on lab machine (see previous slides) # 2. copy the exercise starting point for .gitlab-ci.yml and open it cp ~/course/410-first_pipeline/gitlab-ci.yml ~/course/.gitlab-ci.yml # 3. create project variables in settings::CI/CD::Variables for (protected: false, masked: false): # SURGE_LOGIN="info+gitlab-course22@letsboot.com" # SURGE_TOKEN="725645476fb19997f95c0ac7eee921e7" echo "https://gitlab.com/$GIT_REPO/-/settings/ci_cd" # 4. add commands to the script lists of each job in the .gitlab-ci.yml # you can find the commands in the corresponding slides in this chapter # remember to change the directory (cd) to _example_hello_gitlab in eacht job # you'll have to put the echo command for the build timestamp into single quotes 'echo ...' ``` </col-l> <col-r> ```bash # 5. use artifacts to transfer the "_example_hello_gitlab/dist" folder to the deploy job # 6. use the predefined variable $CI_PROJECT_NAME to combine a custom url # ${CI_PROJECT_NAME}-letsboot.surge.sh # 6. push changes and check pipeline git add -A && git commit -m 'first pipeline with stages' && git push echo "https://gitlab.com/$GIT_REPO/-/pipelines" # 7. open the url in the output of the "deploy" job returned by surge.sh # you can also check the artifacts echo "https://gitlab.com/$GIT_REPO/-/jobs" # 8. try to find the "browse" button for the artifacts in the "build" job ``` </col-r> Notes: - Remember: You can always check the `solution/.gitlab-ci.yml` or ask the trainer if you get stuck. ---- ### Exercise - Docker hands on ![Let's do this](https://media.giphy.com/media/9ZaHRi1YBf7fReFF04/giphy.gif) Notes: - This is a slide to indicate the end of this exercise part or chapter. # The End