Merge pull request #7 from lmu-osc/home_grid

Create basic grid website for laying out content and available tutorials

_quarto.yml

@@ -13,42 +13,53 @@ website:
   repo-actions: [edit, issue]
 
   navbar:
-    left:
-      - href: index.qmd
-        text: Home
-      - about.qmd
-      - sidebar:rtutorials
-      - sidebar:gittutorials
-      - sidebar:quartotutorials
-
-
-  sidebar:
-    - id: rtutorials
-      title: "R Tutorials"
-      style: "docked"
-      background: light
-      collapse-level: 2
-      contents: 
-        - qmd_one.qmd
-        - qmd_two.qmd
-
-    - id: gittutorials
-      title: "Git Tutorials"
-      style: "docked"
-      background: light
-      collapse-level: 2
-      contents: 
-        - qmd_one.qmd
-        - qmd_two.qmd
-
-    - id: quartotutorials
-      title: "Quarto Tutorials"
-      style: "docked"
-      background: light
-      collapse-level: 2
-      contents: 
-        - qmd_one.qmd
-        - qmd_two.qmd
+    tools:
+      - icon: github
+        href: https://github.com/lmu-osc
+    # left:
+    #   - href: index.qmd
+    #     text: Tutorials
+    #   - href: about.qmd
+    #     text: About
+    #   - href: members.qmd
+    #     text: Members
+    #   - href: events.qmd
+    #     text: Events
+    #   - href: news.qmd
+    #     text: News
+  #   right: 
+  #     - sidebar:rtutorials
+  #     - sidebar:gittutorials
+  #     - sidebar:quartotutorials
+  # 
+  #     
+  # sidebar:
+  #   - id: rtutorials
+  #     title: "R Tutorials"
+  #     style: "docked"
+  #     background: light
+  #     collapse-level: 2
+  #     contents: 
+  #       - qmd_one.qmd
+  #       - qmd_two.qmd
+  # 
+  #   - id: gittutorials
+  #     title: "Git Tutorials"
+  #     style: "docked"
+  #     background: light
+  #     collapse-level: 2
+  #     contents: 
+  #       - qmd_one.qmd
+  #       - qmd_two.qmd
+  #       
+  #   - id: quartotutorials
+  #     title: "Quarto Tutorials"
+  #     style: "docked"
+  #     background: light
+  #     collapse-level: 2
+  #     contents: 
+  #       - qmd_one.qmd
+  #       - qmd_two.qmd
 
 format:
   html:

events.qmd

@@ -0,0 +1,4 @@
+---
+title: "Events"
+editor: visual
+---

index.qmd

@@ -1,9 +1,90 @@
 ---
 title: "LMU Open Science Center"
+page-navigation: false
+toc: false
+listing:
+  - id: tutorial_categories
+    type: grid
+    grid-columns: 3
+    grid-item-align: center
+    grid-item-border: true
+    max-description-length: 175
+    date-format: long
+    categories: unnumbered
+    sort:
+      - "tutorial-home-order"
+    contents: 
+      - "tutorials"
+      - "!tutorials/*/**"
+    image-placeholder: "../assets/img/lmu_osc_logo.jpg"
+    image-height: 200px
+  - id: all_tutorials
+    type: table
+    contents:
+      - tutorials/*/*
+    fields: 
+      - title
+      - description
+      - categories
+format:
+  html:
+    grid:
+      sidebar-width: 100px
+      body-width: 1050px
+      margin-width: 200px
+      gutter-width: 2em
+title-block-banner: "tutorials/images/pupholder.png"
+include-in-header:
+  - text: |
+      <style>
+      .quarto-title-block .quarto-title-banner {
+        background-position-y: center;
+        height: 400px;
+      }
+      </style>
 ---
 
-This is a Quarto website.
+```{=html}
+<style>
+.card {
+	--bs-card-border-width: 4px !important;
+	--bs-card-border-color: rgba(0, 153, 51, 0.3) !important;
+}
 
-To learn more about Quarto websites visit <https://quarto.org/docs/websites>.
+h5, .h5 {
+	font-size: 2.3rem;
+}
 
-Example text change
+.quarto-grid-item .listing-categories .listing-category {
+	color: #009FE3;
+	border: solid 1px #009FE3;
+	border-radius: .25rem;
+	text-transform: uppercase;
+	font-size: .85em;
+	padding-left: .5em;
+	padding-right: .5em;
+	padding-top: .15em;
+	padding-bottom: .15em;
+	cursor: pointer;
+	margin-right: 8px;
+	margin-bottom: 8px;
+}
+
+.quarto-grid-item .card-text {
+	font-size: 1.2em;
+}
+
+</style>
+
+
+```
+
+## Tutorial Categories
+
+:::{#tutorial_categories}
+:::
+
+## All Tutorials
+
+:::{#all_tutorials}
+:::

lmu-osc.github.io.Rproj

@@ -1,4 +1,5 @@
 Version: 1.0
+ProjectId: 1135f354-593c-4bef-97f4-0815a48ec6ea
 
 RestoreWorkspace: Default
 SaveWorkspace: Default

members.qmd

@@ -0,0 +1,4 @@
+---
+title: "Members"
+editor: visual
+---

news.qmd

@@ -0,0 +1,4 @@
+---
+title: "News"
+editor: visual
+---

tutorials/_template_embedded_video.qmd

@@ -0,0 +1,46 @@
+---
+title: "TEMPLATE TITLE"
+description: "Brief description of the video, ideally the same description used in the tutorial itself."
+image: "../images/pupholder.png"
+categories:
+  - Included Categories
+format:
+  html: 
+    grid:
+      body-width: 1000px
+      sidebar-width: 200px
+---
+
+<!-- Comments can be added/deleted with Cmd+Shift+C -->
+
+
+
+<!-- If the content is available as part of a bigger project or is part of an e.g. OSF or Zenodo repository, then include that link in the section below. Otherwise, you can delete the section -->
+
+# {OTHER} Link
+
+
+# Presentation
+
+<!-- Depending on where the video is from, use the appropriate option below. Delete the unusued option. -->
+
+
+
+<!-- Youtube, local videos, and other media players -->
+
+<!-- {{< video LINK >}} -->
+
+
+
+
+<!-- OSF Website -->
+
+<!-- <iframe src="OBTAIN FROM OSF WEBSITE BY COPYING THE HTML IFRAME OPTION" -->
+<!--     width="100%" -->
+<!--     scrolling="yes" -->
+<!--     height="480px" -->
+<!--     marginheight="0" -->
+<!--     frameborder="0" -->
+<!--     allowfullscreen -->
+<!--     webkitallowfullscreen -->
+<!-- > -->

tutorials/_template_tutorial_post.qmd

@@ -0,0 +1,17 @@
+---
+title: "TEMPLATE TITLE"
+description: "Brief description of the tutorial, ideally the same description used in the tutorial itself."
+image: "../images/pupholder.png"
+categories:
+  - Included Categories
+---
+
+
+<!-- The HTML code block below should be uncommented, and the URL and href fields replaced with the link to the tutorial -->
+
+<!-- ```{=html} -->
+<!-- <!DOCTYPE html> -->
+<!-- <meta charset="utf-8"> -->
+<!-- <meta http-equiv="refresh" content="0; URL=../../Collaborative-RStudio-GitHub/"> -->
+<!-- <link rel="canonical" href="https://lmu-osc.github.io/Collaborative-RStudio-GitHub/"> -->
+<!-- ``` -->

tutorials/data_management_simulation_sharing.qmd

@@ -0,0 +1,15 @@
+---
+title: "Data Management"
+description: "Something about data management"
+tutorial-home-order: 02
+image: "images/pupholder.png"
+categories:
+  - FAIR
+  - Data Anonymity
+listing:
+  type: default
+  contents:
+    - data_management_simulation_sharing
+---
+
+

tutorials/data_management_simulation_sharing/fair_data_management.qmd

@@ -0,0 +1,17 @@
+---
+title: "FAIR Data Management"
+description: "Brief description of the tutorial, ideally the same description used in the tutorial itself."
+image: "../images/pupholder.png"
+categories:
+  - Included Categories
+---
+
+
+<!-- The HTML code block below should be uncommented, and the URL and href fields replaced with the link to the tutorial -->
+
+```{=html}
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta http-equiv="refresh" content="0; URL=../../FAIR-Data-Management/">
+<link rel="canonical" href="https://lmu-osc.github.io/FAIR-Data-Management/">
+```

tutorials/data_management_simulation_sharing/fair_data_sharing.qmd

@@ -0,0 +1,18 @@
+---
+title: "FAIR Data Sharing"
+description: "Brief description of the tutorial, ideally the same description used in the tutorial itself."
+image: "../images/pupholder.png"
+categories:
+  - Included Categories
+---
+
+This is a placeholder for a yet-to-be-created tutorial.
+
+<!-- The HTML code block below should be uncommented, and the URL and href fields replaced with the link to the tutorial -->
+
+<!-- ```{=html} -->
+<!-- <!DOCTYPE html> -->
+<!-- <meta charset="utf-8"> -->
+<!-- <meta http-equiv="refresh" content="0; URL=../../Collaborative-RStudio-GitHub/"> -->
+<!-- <link rel="canonical" href="https://lmu-osc.github.io/Collaborative-RStudio-GitHub/"> -->
+<!-- ``` -->

tutorials/data_management_simulation_sharing/introduction_to_open_research_data.qmd

@@ -0,0 +1,30 @@
+---
+title: "Introduction to Open Research Data"
+description: "Brief description of the tutorial, ideally the same description used in the tutorial itself."
+image: "../images/pupholder.png"
+categories:
+  - Included Categories
+format:
+  html: 
+    grid:
+      body-width: 1000px
+      sidebar-width: 200px
+---
+
+
+# OSF Link
+
+The Open Science Framework page for this video and the associated slides are available at [https://osf.io/wv6zy/](https://osf.io/wv6zy/).
+
+
+# Presentation
+
+<iframe src="https://mfr.de-1.osf.io/render?url=https%3A%2F%2Fosf.io%2Fdownload%2Fkuhr6%2F%3Fdirect%26mode%3Drender"
+    width="100%"
+    scrolling="yes"
+    height="440px"
+    marginheight="0"
+    frameborder="0"
+    allowfullscreen
+    webkitallowfullscreen
+>

tutorials/data_management_simulation_sharing/introduction_to_simulations_in_r.qmd

@@ -0,0 +1,17 @@
+---
+title: "Introduction to Simulations in R"
+description: "Brief description of the tutorial, ideally the same description used in the tutorial itself."
+image: "../images/pupholder.png"
+categories:
+  - Included Categories
+---
+
+
+<!-- The HTML code block below should be uncommented, and the URL and href fields replaced with the link to the tutorial -->
+
+```{=html}
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta http-equiv="refresh" content="0; URL=../../Introduction-Simulations-in-R/">
+<link rel="canonical" href="https://lmu-osc.github.io/Introduction-Simulations-in-R/">
+```