DS Skills Lab 05

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

---

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: #a497f0;
  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 #a497f0 transparent transparent;
}

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

</style>

## Mid-Term Module Evaluation

- Whilst we wait to begin, **please complete our mid-term module evaluation** for Discovering Statistics through [this link](https://universityofsussex.eu.qualtrics.com/jfe/form/SV_cNfwT9KS9JFYzzw), or the QR code:

- Across all modules we typically get really low response rates for these evaluations, and we know **small sample sizes are not representative! So PLEASE do complete this**

- These evaluations help us to see what we're doing well and what we could improve on, they're super helpful for us to tweak anything in the rest of the module and for next years group of students, and are also very important to us for career progression!

- One of our students is also applying for funding for students to attend conferences for free (the final question), so we need a large number of responses for her to have reliable, representative data!

---

## Overview

- **Building your own blog**

- **Styling your site**

- **Top Tips**

---

## 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 **opening** then **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/534103/content/8479518?idle=1729516740257" 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)

- `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/31583/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>

---

## 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 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/31583/modules)

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

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

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

- 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/31583/quizzes/49192), I'll give you 7500 extra Kahoot points! 🤑

---

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

<br>

/* Editable content */
.can-edit {
    padding: 2px !important;
    display: inline-block !important;
    cursor: text !important;
}

</style>

// Select all slides
    var slides = document.querySelectorAll(".remark-slide-content");

// Loop through all slides and add the editable footer
    slides.forEach(function(slide) {
        // Create a footer div
        var footer = document.createElement("div");
        footer.classList.add("footer-pin");

// Create an editable span for the pin
        var editableSpan = document.createElement("span");
        editableSpan.classList.add("can-edit");
        editableSpan.contentEditable = true;  // Make it editable
        editableSpan.textContent = attendancePin;  // Set the default pin

// Add the editable span to the footer
        footer.innerHTML = "Attendance pin: ";
        footer.appendChild(editableSpan);

// Append the footer to the current slide
        slide.appendChild(footer);

// Add event listener to sync changes across all editable pins
        editableSpan.addEventListener('input', function() {
            const newPin = editableSpan.textContent; // Get the new pin from the edited span
            // Update all other editable pins
            slides.forEach(function(s) {
                const otherEditableSpan = s.querySelector('.can-edit');
                if (otherEditableSpan !== editableSpan) { // Avoid updating the same one
                    otherEditableSpan.textContent = newPin; // Update the content
                }
            });
        });
    });
});

</script>