# Steps for setup

## step 1 open a new repository locally
In the terminal of your RStudio for whatever project
` cd /c/Users/yingxiao/Desktop/'Quarto slide template'`
-->
`quarto create project`
--> select 'website'
--> and then enter the name of the project in the '?Directory' e.g. enter 'template'
--> select 'rstudio'
--> The new project is created
--> close the old project and open the new project in the new directory

## step 2 create basic files in the local repository
### custom.scss
create an text file and rename it custom.scss
You can copy paste the following as a basic.

/* css styles */
/*--scss:defaults --*/

$h2-font-size: 500 !default;
$headings-font-weight: 500 !default;
.test-background {
    background-color: #447099 !important;
}
/*--scss:rules --*/
.slide-background-content{
  background-image: "![](img/chalmers.png)";
  background-size: 100% 100%;
}

h1,h2,h3,h4,h5,h6{
  text-shadow: -1px -1px 0 rgba(0,0,0,.3);
}

/*-- scss:defaults --*/

// fonts
$font-family-sans-serif: "Palatino Linotype", serif !default;

// colors
$body-bg: #f0f1eb !default;

// headings
$presentation-heading-font: "Palatino Linotype", serif !default;
$presentation-heading-color: #383d3d !default;

/*-- scss:rules --*/

blockquote {
  margin-left: 80px !important;
}

### .gitlab-ci.yml
create an text file and rename it .gitlab-ci.yml to construct the Docker image that will be used to build your app
You can copy paste the following as a basic

image: rocker/verse:latest
pages:
  script:
  artifacts:
    paths:
      # The folder that contains the files to be exposed at the Page URL
      - public
  rules:
    # This ensures that only pushes to the default branch will trigger
    # a pages deploy
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

### The image folder
build a new folder and put the images that you will use in website

## step 3 The basics set up for slide
There are two types of qmd file. One type for the website content. One type for the slide content. One or more silde qmd could be in the website qmd.
The slide qmd are built as following:

The website are build with the 'Document'

The relationship of the slide and For example. a if you want to add a my_slide.qmd to a my_website.qmd.
You could write the fllowing code in the my_website.qmd
`<iframe class="slide-deck" src="my_slide.html"></iframe>`

You could write the following code in the my_slide.qmd. Below is just and example

---
title: "title"
format: 
  revealjs:
    theme: [custom.scss]
editor: visual
resources:
  - "img/"
---
## Slide title {data-background-color=red}

## Slide Background {.test-background}
![](img/chalmers.png)

## some slide content {background-image="img/chalmers.png"}

There are some words

## step 4 build a git repository on gitlab
Create a new repository in Git that has the same name as your local project

Note that you need to disable read me and set it as public

## step 5 connect the git lab with local

Use git bash the connect your local and remote. Open git bash.
Change the directory to where you have the qmd files
`cd /c/Users/yingxiao/Desktop/'Quarto slide template'/template`

git init --initial-branch=master (or main, must match the last code)

git remote add origin [e-mail]:YingxiaoYan/template.git

If adding remote does not work and there is a previous connection. Use the following code to set up the new one.

git remote set-url origin https://gitlab.com/YingxiaoYan/template.git

Use `git remote -v `to check for if connection is correct

If there are a bunch of strange files showing up in the commit panel, just close the project and re open it.
Then commit something random and then run the following code in git bash

git add .
git commit -m "Initial commit"
git push --set-upstream origin master (or main, must match the previous code)

Now thwe commit as well as the push and pull button should work well.
At this point you can start to craft your slide

# The quarto slide

## Harness the relationship between slide and website
Control the size of the slide by using the iframe in the my_website.qmd
`<iframe style="width:100%; height:100%; overflow:auto;" class="slide-deck" src="my_slide.html"></iframe>`

## Background setup

https://yingxiaoyan.gitlab.io/template/my_slide.html#/title-slide
https://quarto.org/docs/presentations/revealjs/#slide-backgrounds

## slide numbers
https://quarto.org/docs/presentations/revealjs/presenting.html#slide-numbers

## presentation size
https://quarto.org/docs/presentations/revealjs/advanced.html#presentation-size

## slide transitions
https://quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions

## Adding rollable code
https://yingxiaoyan.gitlab.io/template/my_slide.html#/title-slide

## Animation
https://yingxiaoyan.gitlab.io/template/my_slide.html#/title-slide

## Footnote and logos
https://yingxiaoyan.gitlab.io/template/my_slide.html#/title-slide

## Adding webpage on the slide
https://yingxiaoyan.gitlab.io/template/my_slide.html#/title-slide

output location

## How to operate the slide
The overview mode can also be reached by the Esc button
button E can change between with or without speaker note