diff --git a/R/format-md-bitly-link.R b/R/format-md-bitly-link.R new file mode 100644 index 0000000..c9c3122 --- /dev/null +++ b/R/format-md-bitly-link.R @@ -0,0 +1,3 @@ +format_md_bitly_link <- function(link) { + glue::glue('[{link |> stringr::str_remove("https://")}]({link})') +} diff --git a/_freeze/labs/02_create-website/execute-results/html.json b/_freeze/labs/02_create-website/execute-results/html.json new file mode 100644 index 0000000..b835544 --- /dev/null +++ b/_freeze/labs/02_create-website/execute-results/html.json @@ -0,0 +1,17 @@ +{ + "hash": "12bb190c4a569fe91e8542f60c600ef1", + "result": { + "engine": "knitr", + "markdown": "---\ntitle: \"{{< fa laptop-code >}} Lab: Create your own website!\"\nfilters:\n - ../filters/new-page-links.lua\n---\n\n::: {.cell}\n\n:::\n\n\n## Basic structure of Quarto document\n\nWe are going to create a website using a Quarto.\nQuarto documents are a mix of natural language and executed code and this pattern is called **literate programming**.\nA Quarto document usually contains:\n\n- Text formatted in Markdown.\n- Code is fenced as code chunk between ```` ```{r} ```` and ```` ``` ````.\n- Metadata as YAML with the format `key: value`. You can find metadata in the header of the document fenced by `---`, or in code chunks starting with `#|`.\n\n````{.markdown}\n---\ntitle: \"Untitled\"\nformat: html\n---\n\n## Quarto\n\nQuarto enables you to weave together content and executable code into\na finished document. To learn more about Quarto see .\n\n```{{r}}\n#| label: calculation\n\n1 + 1\n```\n````\n\n## Steps\n\n- Open your workspace: [bit.ly/td-workspace](https://bit.ly/td-workspace).\n- Create `index.qmd`.\n- Click the \"Render\" button on top.\n- Download the output directory `_site`.\n- Open Netlify Drop: [app.netlify.com/drop](https://app.netlify.com/drop).\n- Drag and drop the downloaded `_site` onto Netlify Drop.\n- Post the link to your website in the comments below or on our Padlet: [bit.ly/td-padlet](https://bit.ly/td-padlet)\n\n## Resources\n\n- [Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/)\n- [Interactive Commonmark Markdown tutorial](https://commonmark.org/help/tutorial/)\n- [Quarto documentation](https://quarto.org/)\n- [Get started with Quarto Workshop](https://rstudio-conf-2022.github.io/get-started-quarto/) inncluding the [material](https://github.com/jthomasmock/quarto-workshop) and this video:\n\n\n{{< video https://www.youtube.com/embed/yvi5uXQMvu4?si=kpSWaw19CudBB_uu >}}\n", + "supporting": [ + "02_create-website_files" + ], + "filters": [ + "rmarkdown/pagebreak.lua" + ], + "includes": {}, + "engineDependencies": {}, + "preserve": {}, + "postProcess": true + } +} \ No newline at end of file diff --git a/data/schedule.csv b/data/schedule.csv index b3d0f80..8b6c199 100644 --- a/data/schedule.csv +++ b/data/schedule.csv @@ -1,4 +1,4 @@ module,date,id,topic,workspace,social Diversity metrics,,,,, -Reproducibility,2023-11-30,01,Reproducible reporting of computational analyses,https://bit.ly/td-workspace,https://padlet.com/stephankoenig/teaching_demo -Reproducibility,2023-12-05,02,Collaborating on code,, \ No newline at end of file +Reproducibility,2023-11-30,01,Reproducible reporting of computational analyses,, +Reproducibility,2023-12-01,02,Lab: Create your own website!,https://bit.ly/td-workspace,https://bit.ly/td-padlet \ No newline at end of file diff --git a/index.qmd b/index.qmd index 2ab5825..b81608f 100644 --- a/index.qmd +++ b/index.qmd @@ -25,7 +25,8 @@ resources_paths <- c( path("pre-readings"), path("slides"), - path("worksheets") + path("worksheets"), + path("labs") ) resources <- @@ -45,31 +46,27 @@ schedule <- left_join(resources, by = join_by(id), na_matches = "never") ``` -:::: {.columns} - +::: columns ::: {.column width="75%"} Welcome to the webpage for the seminar **"First steps into reproducible bioinformatics"**! -For context, this talk assumes that students in MICB 2XX: Data science have gained experience in R and RStudio, completed a "Diversity metrics" module, and now start one on "Reproducibility." -This page contains the pre-readings, slides and other resources for this talk if you want to work along. +For context, this talk assumes that students in MICB 2XX: Data science have gained experience in R and RStudio, completed a "Diversity metrics" module, and now start one on "Reproducibility." This page contains the slides and worksheets for this talk if you want to work along. ::: ::: {.column width="5%"} ::: ::: {.column width="20%"} - {{< qrcode https://bit.ly/td-website >}} - ::: -:::: +::: ```{r} #| label: schedule #| echo: false schedule |> - relocate(pre_readings, slides, worksheets, workspace, .after = topic) |> + relocate(pre_readings, slides, worksheets, workspace, labs, .after = topic) |> gt() |> fmt_date( date, @@ -95,11 +92,11 @@ schedule |> missing_text = fa("window-maximize", fill_opacity = 0.1) ) |> fmt_url( - columns = workspace, + columns = labs, label = fa("laptop-code") ) |> sub_missing( - columns = workspace, + columns = labs, missing_text = fa("laptop-code", fill_opacity = 0.1) ) |> fmt_url( @@ -119,7 +116,7 @@ schedule |> missing_text = fa("padlet", fill_opacity = 0.1) ) |> cols_hide( - id + columns = c(id, workspace) ) |> cols_label( module = "Module", @@ -128,7 +125,7 @@ schedule |> topic = "Topic", pre_readings = "Pre", slides = "Slides", - workspace = "Workspace", + labs = "Lab", worksheets = "Worksheet", social = "Social" ) |> diff --git a/labs/02_create-website.qmd b/labs/02_create-website.qmd new file mode 100644 index 0000000..e51a269 --- /dev/null +++ b/labs/02_create-website.qmd @@ -0,0 +1,77 @@ +--- +title: "{{< fa laptop-code >}} Lab: Create your own website!" +filters: + - ../filters/new-page-links.lua +--- + +```{r} +#| label: setup +#| echo: false +#| message: false + +library(conflicted) +library(dplyr) +conflicts_prefer(dplyr::filter) +library(here) +library(readr) + +source(here("R", "format-md-bitly-link.R")) + +links <- read_csv(here("data", "schedule.csv"), show_col_types = FALSE) |> + filter(id == "02") + +workspace <- links |> + pull(workspace) |> + format_md_bitly_link() + +padlet <- links |> + pull(social) |> + format_md_bitly_link() +``` + +## Basic structure of Quarto document + +We are going to create a website using a Quarto. +Quarto documents are a mix of natural language and executed code and this pattern is called **literate programming**. +A Quarto document usually contains: + +- Text formatted in Markdown. +- Code is fenced as code chunk between ```` ```{r} ```` and ```` ``` ````. +- Metadata as YAML with the format `key: value`. You can find metadata in the header of the document fenced by `---`, or in code chunks starting with `#|`. + +````{.markdown} +--- +title: "Untitled" +format: html +--- + +## Quarto + +Quarto enables you to weave together content and executable code into +a finished document. To learn more about Quarto see . + +```{{r}} +#| label: calculation + +1 + 1 +``` +```` + +## Steps + +- Open your workspace: `r workspace`. +- Create `index.qmd`. +- Click the "Render" button on top. +- Download the output directory `_site`. +- Open Netlify Drop: [app.netlify.com/drop](https://app.netlify.com/drop). +- Drag and drop the downloaded `_site` onto Netlify Drop. +- Post the link to your website in the comments below or on our Padlet: `r padlet` + +## Resources + +- [Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/) +- [Interactive Commonmark Markdown tutorial](https://commonmark.org/help/tutorial/) +- [Quarto documentation](https://quarto.org/) +- [Get started with Quarto Workshop](https://rstudio-conf-2022.github.io/get-started-quarto/) including the [material](https://github.com/jthomasmock/quarto-workshop) and this video: + +{{< video https://www.youtube.com/embed/yvi5uXQMvu4?si=kpSWaw19CudBB_uu >}} \ No newline at end of file