DS Skills Lab 05

.title[
# DS Skills Lab 05
]
.subtitle[
## <i>Build-A-Blog!</i>
]
.author[
### Dr Danielle Evans
]
.date[
### 03 Nov 2023
]

---

a.glossary {
  font-weight: bold;
  color: #a497f0;
  cursor: help;
  position: relative;
}

.remark-inline-code {
  font-size: var(--code-inline-font-size);
  color: #428aff;
  padding: 2px;
}

strong {
  font-weight: bold;
  color: black;
}

.remark-slide-number {
  color: black;
  opacity: 1;
  font-size: 0.9rem;
}

.hljs-github .hljs-string, .hljs-github .hljs-doctag {
    color: #333;
}

.hljs-github .hljs-literal {
    color: #333;
}

.hiddenFrame{
    height:1px;
    width:1px;
    opacity: 0;
    }
</style>

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: #c8c0f6;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 35%;
  left: 120%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #c8c0f6 transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

</style>

## Overview

- **Building your own blog**

- **Styling your site**

- **Top Tips**

- **Post questions/comments/errors/cool things on the [Padlet](https://uofsussex.padlet.org/de84/ds-skills-lab-week-05-3pn4eoiwxudsi33u), password: ds**

---

## Intro

- I personally LOVE creating non-statistical things in R

- There's various packages and tools that are relatively straightforward to use:

+ I use the `distill` package to build all my websites
  
  + All my slides are made with `xaringan`, and my apps are made with `shiny`
  
  + My published papers are all made with `papaja` (and so was my PhD thesis!)

- & the process of making them is so much fun (I'm being SO serious!!)
  
- So today we're going to walk through creating your own blog-style website using `Quarto`!

---

## But Why??

1. Coding is a very **valuable skill** in the job market

+ The more skills you develop, the more **career opportunities** you'll have

2. You can produce your **own site** containing all your R/stats materials, and even notes from other modules if you wanted!

+ You'll have two TAP assessments on this module (with your first one in a couple weeks), and having **one detailed resource** to refer to during those assessment periods will hugely help you...

3. **& because it's cool & fun 😄**

---

<div class="tooltip"><a href="https://www.youtube.com/watch?v=HdVg-2jn2OU" style="color:#ed2791;"><h2>Blog the BuildR 👷‍♀️</a></h2><span class="tooltiptext">Click me! 🐣</span></div>

- A **blog** is a website with a specific structure/look, where you have '**posts**' listed on the homepage - but it doesn't have to be something you share with others to read!

- One of the most useful things about using a blog structure is that you can **tag** any of your 'posts' with keywords to make it easier to find the topics you want to review, and you can easily **search** their content too!

- I've already created a template for you to use on the Posit Cloud in the **Week 05 Skills Lab project**, so let's take a quick look by **rendering** the site!

<div class="pc" style="font-size:90%">
<p><b>Task!</b> Open up the Week 05 Skills Lab Project on the <b><a href="https://posit.cloud/spaces/392709/content/lists/6586?sort=created_time_desc" style='color: black'>Posit Cloud</a></b>!</p>
</div>

---

## Rendering

- You can use the `Render Website` button in the `Build` tab in the top right pane to build your site

- You can also render an individual post by using `Render` just like you would any other Quarto doc

+ The entire website is just a bunch of **Quarto docs** with some extra settings to make it look like a blog!

- As a tip, if you run into any rendering problems when doing the entire site, try rendering each post separately to see if you can spot any issues/errors with them

<br>

### Let's have a first look at our beautiful blog! <img src="data:image/png;base64,#./img/45.png" height="65px" style="vertical-align:middle;margin:0px 0px 20px 0px";/>

]

---

## The Setup

- The project has the following structure:

- `_quarto.yml`	- Quarto project file
  
  - `index.qmd`	- the home page
  
  - `about.qmd`	- the 'about' page
  
  - `posts/`	- the directory containing posts (i.e., your docs!)
  
  - `posts/_metadata.yml` - shared options for posts (can be ignored)

- `custom.scss` custom theme for website
  
  - `styles.css` custom CSS for website

- `images`, `data`, and `docs` folders

---

## Extra Folders

- You can pretty much ignore the `docs` folder, this is where your rendered posts will go automatically as you build your site!

- You can upload any images you want to use to the `images` folder, and any data to the `data` folder, to use either, just write a file path to that folder/file

- For each post, you can have a <a class='glossary' title='This is the image that will appear on your site’s homepage for a given blog post. Ideally, the image should be relevant to the content of the post'>preview image</a> that you specify, or if missing it will use the default image

<div class="pc" style="font-size:90%">
<p><b>Task!</b> Upload two images (from your device or online), to the <b>images</b> folder to use as a preview image of a post later on!</p>
</div>

---

## <a class='glossary' title='A YAML configuration file in the root directory of a project which lets you define properties for the project, such as the structure of a website'>_quarto.yml</a>

<div class="pc" style="font-size:90%">
<p><b>Task!</b> Change <b>Discovering Statistics</b>' to '<b>Home</b>' and re-render your site!</p>
</div>

---

## <a class='glossary' title='The index.qmd file is our homepage. Because we’re using a blog-style, it’s pretty much empty, but there are a few things we can change to alter the aesthetic of our blog'>index.qmd</a>

<div class="pc" style="font-size:90%">
<p><b>Task!</b> Change the <b>image placeholder</b> to one of the images you uploaded, & re-render your site!</p>
</div>

---

## about.qmd

<div class="pc" style="font-size:90%">
<p><b>Task!</b> Change the text description on the <b>about</b> page, & re-render your site!</p>
</div>

---

## posts/

- **Writing new posts**

- **Adding posts**

- Specifying preview images

- Adding categories

- Changing authors & dates

<div class="pc" style="font-size:90%">
<p><b>Task!</b> Add your tutorial or worksheet .qmd from this week to the ds folder, & re-render your site!</p>
</div>

---

## posts/

- Writing new posts

- Adding posts

- **Specifying preview images**

- **Adding categories**

- **Changing authors & dates**

<div class="pc" style="font-size:90%">
<p><b>Task!</b> For the doc you just added, change the preview image to one you uploaded earlier, & re-render your site!</p>
</div>

---

## Slides & Such

- The website is built from Quarto docs but we can also include other **file types**

- In our template, I've included an HTML file, and a pdf in the **Slides** menu to show you!

]

]

- To add docs to this list, we want to upload the file to the relevant **topic folder** in the **posts** folder

- Then, in our **_quarto.yml** file, we can include a **text label** for it, and the **file path (href)** to that doc

<br>

<div class="pc" style="font-size:90%">
<p><b>Task!</b> Download these slides from <b><a href="https://canvas.sussex.ac.uk/courses/26318/pages/week-5" style='color: black'>Canvas</a></b> (as a pdf/HTML), upload them to the ds folder, add a text label & link to the menu in the .yml, & re-render!</p>
</div>

---

## Styling

- Our aesthetic choices when it comes to our blog are pretty much limitless!

- We have different methods of making our site as beautiful as we can imagine:

+ Ready-made Bootstrap themes

+ Custom Syntactically Awesome Style Sheets (Sass) - .scss files
  
  + Custom Cascading Style Sheets (CSS) - .css files
  
---

## Themes

- We can change the theme of our blog to be one of the ready-made [Bootstrap themes](https://bootswatch.com/)

- To use one of these themes, we need to change our **_quarto.yml** to include **theme: minty** for example...

<div class="pc" style="font-size:90%">
<p><b>Task!</b> Change the .yml to a Bootstrap theme of your choice & re-render!</p>
</div>

---

## Themes

- We can change the theme of our blog to be one of the ready-made [Bootstrap themes](https://bootswatch.com/)

- To use one of these themes, we need to change our **_quarto.yml** to include **theme: minty** for example...

<div class="pc" style="font-size:90%">
<p><b>Task!</b> Undo what you just did, and go back to our custom .scss theme!</p>
</div>

---

## custom.scss

<br>

<div class="pc" style="font-size:90%">
<p><b>Task!</b> Change the heading & drop-down colour to whatever you like!</p>
</div>

---

## styles.css

---

## Resources

- [Bootstrap icons](https://icons.getbootstrap.com/): the little icons in the top right corner

- [Bootstrap themes](https://bootswatch.com/): ready made themes

- [Custom themes](https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/html/bootstrap/themes): use the existing themes and modify them to make it easier

- Custom CSS: literally Google 'how to do XXXX with CSS' and you'll get a tonne of demos 😁

- [Quarto website guide](https://quarto.org/docs/websites/)

---

## Top Tips!

- Make small changes & re-render the site each time

+ This way you can work out what different features actually do
  
  + & you can debug errors easily when you know what you've just changed (**Ctrl** + **Z** is your friend!)

- If you have errors rendering your entire site, try rendering each 'post'

- Google styling and design questions - [W3Schools](https://www.w3schools.com/css/default.asp) is a great resource for CSS and HTML

- Use `Inspect Element` to help identify specific components of a webpage

- The YML/YAML is *very* fussy when it comes to spacing/indentation so watch out when making edits!

---

## Final RemindRs!

-   Submit the easteR eggs you've found today on [Canvas](https://canvas.sussex.ac.uk/courses/26318/quizzes/41383)

-   Nominate your peers for the [savioR award](https://canvas.sussex.ac.uk/courses/26318/quizzes/39822)

-   Have a go at the [Cloud ChallengRs](https://posit.cloud/spaces/392709/content/lists/6597?sort=created_time_desc)

-   Design our new Sussex Psychology [Hex Sticker](https://canvas.sussex.ac.uk/courses/26318/quizzes/41392)

-   Give session feedback [here](https://forms.gle/ZyXAB7kZzUUyct9n6)

-   Add songs to our [Spotify Kahoot Karaoke playlist](https://open.spotify.com/playlist/4N8OglRk1zADpe3Wmi3W8Z?si=cf5d338446e74871&pt=eab8825a5ef6c5d88c41430bec43ab4c)! 💃

- Add the rest of your DS files to your new blog, and any other slides/work from other modules as you like

- We'll do a mini Kahoot if we have time, but if you also upload a screenshot of your beautiful blog to [Canvas](https://canvas.sussex.ac.uk/courses/26318/quizzes/41383), I'll give you 7500 extra Kahoot points! 🤑

---

## *That's all - happy building!*

<br>