Improve Landing Page

[juliandehne]

• [ ] should be clear what the tool is about (Beatrice)
• [ ] Carussel possibly (Davids idea)
• [ ] Title/Subtitle for clarification (Julians idea)

[schochastics]

For the carousel, there are three options I can think of.

via an R script

This is what I use here.

carousel.R

# carousel item
carouselItem <- function(caption,subtitle, image, link, index, interval) {
#   id <- paste0("gallery-carousel-item-", index)
  button <- tags$button(type = "button", 
                        `data-bs-target` = "#gallery-carousel",
                        `data-bs-slide-to` = index,
                        `aria-label` = paste("Slide", index + 1)
  )
  if (index == 0) {
    button <- tagAppendAttributes(button,
                                  class = "active",
                                  `aria-current` = "true"                  
    )
  }
  item <- div(class = paste0("carousel-item", ifelse(index == 0, " active", "")),
              `data-bs-interval` = interval,
              a(href = link, img(src = image, class = "d-block  mx-auto")),
              div(class = "carousel-caption d-none d-md-block white",
                  a(href = link, tags$h3(class = "fw-light", caption)),
                  tags$p(class = "fw-light", subtitle)
              )
  )
  list(
    button = button,
    item = item
  )                        
}

# nav button
navButton <- function(targetId, type, text) {
  tags$button(class = paste0("carousel-control-", type),
              type = "button",
              `data-bs-target` = paste0("#", targetId),
              `data-bs-slide` = type,
              span(class = paste0("carousel-control-", type, "-icon"),
                   `aria-hidden` = "true"),
              span(class = "visually-hidden", text)
  )
}

index.qmd

::: {#hero-banner .column-screen}
```{r}
#| echo: false
#| classes: '.g-col-lg-6 .g-col-12 .g-col-md-12'
source("carousel.R")
carousel("gallery-carousel", 5000, 
         yaml.load_file("carousel.yml"))

:::

carousel.yml

- caption: "World Team Ranking (Men)"
  subtitle: "Ranking of more than 2000 top tier clubs in 107 countries"
  image: "static/img/soccerverse-banner.jpg"
  link: "rankings/elo_men/"

- caption: "European Team Ranking (Women)"
  subtitle: "Ranking of all top tier clubs in all European countries"
  image: "static/img/soccerverse-banner1.jpg"
  link: "rankings/elo_women/"

- caption: "Manager ranking"
  subtitle: "Ranking of soccer managers based on the world team ranking"
  image: "static/img/soccerverse-banner3.jpg"
  link: "rankings/manager_men/"

- caption: "Stats Centre"
  subtitle: "Stats about rankings and more than 1 million matches"
  image: "static/img/soccerverse-banner2.jpg"
  link: "stats_centre/"

- caption: "Predictions"
  subtitle: "Match forecasting and end of season predictions for all top tier
  European leagues"
  image: "static/img/soccerverse-banner5.jpg"
  link: "predictions/"

advantage: To change the carousel content, only the yaml needs to be edited. disadvantage: doesnt work with index.md

I dont think this is viable here, but just wanted to put this option out there.

html partial

put the carousel html code into a partial and use yaml parameter to change the content

dump html directly in index.md

the straighforward/braindead solution.

My feeling is, that in terms of maintainability the html partial solution is best? What do you think @juliandehne

[juliandehne]

I think the content can go to the index.md directly for now and open an issue for refactoring. I subscribe to the programming pattern "big ball of mud" which is more serious than it sounds. The idea is to hack it quickest way first, and than refactor/modularize it when needed. This fits for small n developer projects. Since the styling is a temporary thing and will be thrown out after a formal GESIS theme comes along, this saves a lot of time.

[schochastics]

I like that development style. In terms of getting the styling correct, I suggest a variation of the Ostrich algorithm)

[juliandehne]

Vorgeschlagene Texte für das Caroussel

" Master Data Quality Assessment with the KODAQS Toolbox Equip your research with tools to assess and improve data quality and ensure the validity of your findings.

 Make Use of Learning Resources Access the KODAQS Toolbox for practical coding examples of key quality indicators and step-by-step tutorials.

 Tailored Insights for Diverse Data Types Navigate the unique data quality challenges of survey, digital behavioral, and linked data with applied data quality assessments. "

[schochastics]

I work on the carousel and put it in a new branch with the CD soon