change layout to use cards

have all links in cards, using iconify icons
plenoptic-org · Oct 8, 2024 · 4afdbbc · 4afdbbc
1 parent 211f21d
commit 4afdbbc
Show file tree

Hide file tree

Showing 14 changed files with 268 additions and 46 deletions.
diff --git a/Gemfile b/Gemfile
@@ -15,9 +15,9 @@ gem "jekyll", "~> 4.3.4"
 # uncomment the line below. To upgrade, run `bundle update github-pages`.
 # gem "github-pages", group: :jekyll_plugins
 # If you have any plugins, put them here!
-# group :jekyll_plugins do
-#   gem "jekyll-feed", "~> 0.12"
-# end
+group :jekyll_plugins do
+  gem "jekyll-tabs"
+end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
 # and associated library.
@@ -34,5 +34,3 @@ gem "jekyll", "~> 4.3.4"
 gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
 
 gem "webrick", "~> 1.8"
-
-gem 'jekyll-octicons'
diff --git a/_config.yml b/_config.yml
@@ -30,6 +30,17 @@ baseurl: "" # the subpath of your site, e.g. /blog
 url: "http://plenoptic.org/" # the base hostname & protocol for your site, e.g. http://example.com
 github_username: plenoptic-org
 
+collections:
+  cards:
+    order:
+      - repo.md
+      - docs.md
+      - install.md
+      - questions.md
+      - presentations.md
+      - examples.md
+      - cite.md
+
 markdown: kramdown
 kramdown:
   parse_block_html: html
@@ -63,4 +74,4 @@ exclude:
 #   - vendor/ruby/
 
 plugins:
-  - jekyll-octicons
+  - jekyll-tabs
diff --git a/site/_cards/cite.md b/site/_cards/cite.md
@@ -0,0 +1,6 @@
+---
+icon: mdi:book-education
+external_url: https://plenoptic.readthedocs.io/en/latest/citation.html
+name: Citation guide
+---
+If you use plenoptic in a published academic article or presentation, please cite us!
diff --git a/site/_cards/docs.md b/site/_cards/docs.md
@@ -0,0 +1,6 @@
+---
+icon: mdi:book-open-page-variant
+external_url: https://plenoptic.readthedocs.io/en/latest/
+name: Documentation
+---
+Read our documentation to learn how to use plenoptic and see examples.
diff --git a/site/_cards/examples.md b/site/_cards/examples.md
@@ -0,0 +1,6 @@
+---
+icon: mdi:bookshelf
+external_url: https://plenoptic-org.github.io/plenoptic-workshops/
+name: Workshop materials
+---
+Browse the materials from workshops we've run to see more examples of how to use plenoptic.
diff --git a/site/_cards/install.md b/site/_cards/install.md
@@ -0,0 +1,20 @@
+---
+icon: mdi:package-down
+external_url: https://plenoptic.readthedocs.io/en/latest/install.html
+name: Installation instructions
+---
+{% tabs install %}
+
+{% tab install pip %}
+```bash
+pip install plenoptic
+```
+{% endtab %}
+
+{% tab install conda %}
+```bash
+conda install plenoptic -c conda-forge
+```
+{% endtab %}
+
+{% endtabs %}
diff --git a/site/_cards/presentations.md b/site/_cards/presentations.md
@@ -0,0 +1,6 @@
+---
+icon: mdi:presentation
+external_url: https://plenoptic-org.github.io/plenoptic_presentations/
+name: Presentations
+---
+View the slides from presentations explaining the science that plenoptic can facilitate.
diff --git a/site/_cards/questions.md b/site/_cards/questions.md
@@ -0,0 +1,7 @@
+---
+icon: mdi:head-question
+external_url: https://github.com/plenoptic-org/plenoptic/discussions
+name: Get in touch
+---
+
+If you have questions or need help, post on our [discussions page](https://github.com/plenoptic-org/plenoptic/discussions). See [our readme](https://github.com/plenoptic-org/plenoptic?tab=readme-ov-file#getting-help) for what to do if you find an issue or want to contribute.
diff --git a/site/_cards/repo.md b/site/_cards/repo.md
@@ -0,0 +1,6 @@
+---
+icon: mdi:github
+external_url: https://github.com/plenoptic-org/plenoptic
+name: Main code repo
+---
+All of the code for plenoptic can be found on GitHub, under an open source license.
diff --git a/site/_includes/cards.html b/site/_includes/cards.html
@@ -0,0 +1,20 @@
+{% if include.cards %}
+  {% assign filtered_cards = site.cards | where_exp: 'card', "include.cards contains card.title" %}
+{% else %}
+  {% assign filtered_cards = site.cards %}
+{% endif %}
+
+<div class="grid cards">
+<ul>
+    {% for card in filtered_cards %}
+    <li>
+        <h3><iconify-icon class="emoji {{ card.class }}" icon="{{ card.icon }}"></iconify-icon>
+            <a href="{{ card.external_url }}">{{ card.name }}</a></h3>
+        {% unless card.content.size == 1 %}
+        <hr>
+        {{ card.content }}
+        {% endunless %}
+    </li>
+    {% endfor %}
+</ul>
+</div>
diff --git a/site/_layouts/default.html b/site/_layouts/default.html
@@ -9,6 +9,8 @@
   </head>
   <body>
     <header>
+      <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
+      <script src="/assets/javascript/tabs.js"></script>
       <body-width>
         <picture>
           <source

diff --git a/site/assets/javascript/tabs.js b/site/assets/javascript/tabs.js
diff --git a/site/assets/style.css b/site/assets/style.css
@@ -64,7 +64,6 @@ header img {
 }
 
 main {
-  display: grid;
   margin-block: 2rem;
   row-gap: 2rem;
   column-gap: 4rem;
@@ -74,7 +73,6 @@ main {
   font-size: 1.6rem;
   display: inline-block;
   margin-right: 0.6ch;
-  transform: translate(0, 10%);
 }
 
 .badges {
@@ -103,13 +101,6 @@ footer img {
 }
 
 @media (min-width: 1000px) {
-  main {
-    grid-template-columns: 1fr 1fr;
-  }
-  .right-column {
-    grid-column: 2 / 2;
-    grid-row: 1 / 3;
-  }
   .plenoptic-logo {
     width: 400px;
   }
@@ -130,6 +121,22 @@ footer img {
   :active {
     color: white;
   }
+  .grid.cards>ol>li,
+  .grid.cards>ul>li,
+  .grid>.card {
+    border:.05rem solid rgb(80 80 80);
+  }
+  .grid.cards>ol>li:focus-within,
+  .grid.cards>ol>li:hover,
+  .grid.cards>ul>li:focus-within,
+  .grid.cards>ul>li:hover,
+  .grid>.card:focus-within,
+  .grid>.card:hover {
+    box-shadow: 0 0.2rem 0.5rem rgba(193,193,193,0.1), 0 0 0.05rem rgba(193,193,193,0.25);
+  }
+  .tab > .active > a {
+    color:#fff;
+  }
 }
 
 @media (prefers-color-scheme: light) {
@@ -147,4 +154,151 @@ footer img {
   :active {
     color: black;
   }
+  .grid.cards>ol>li,
+  .grid.cards>ul>li,
+  .grid>.card {
+    border:.05rem solid rgb(102, 102, 102);
+  }
+  .grid.cards>ol>li:focus-within,
+  .grid.cards>ol>li:hover,
+  .grid.cards>ul>li:focus-within,
+  .grid.cards>ul>li:hover,
+  .grid>.card:focus-within,
+  .grid>.card:hover {
+    box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.1), 0 0 0.05rem rgba(0,0,0,0.25);
+  }
+  .tab > .active > a {
+    color:#222;
+  }
+}
+.grid {
+  grid-gap:.5rem;
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
+  margin:3em 0
+}
+.grid.cards>ol,
+.grid.cards>ul {
+  display:contents
+}
+.grid.cards>ol>li,
+.grid.cards>ul>li,
+.grid>.card {
+  border-radius:1rem;
+  display:block;
+  margin:0;
+  padding:.8rem;
+  transition:border .25s,box-shadow .25s
+}
+.grid.cards>ol>li>hr,
+.grid.cards>ul>li>hr,
+.grid>.card>hr {
+  margin: 0 0;
+  flex-shrink: 0; /* Prevent the hr from shrinking */
+}
+.grid.cards>ol>li>:first-child,
+.grid.cards>ul>li>:first-child,
+.grid>.card>:first-child {
+  margin-top:0
+}
+.grid.cards>ol>li>:last-child,
+.grid.cards>ul>li>:last-child,
+.grid>.card>:last-child {
+  margin-bottom:0
+}
+.grid>.tabbed-set {
+  margin-bottom:0;
+  margin-top:0
+}
+
+/* Flexbox layout for the list items */
+.grid.cards ul > li {
+    display: flex; /* Ensure flexbox is applied */
+    flex-direction: column;
+    /* justify-content: space-between; */
+    height: 100%;
+    box-sizing: border-box;
+}
+
+/* Center the icon and title within the first paragraph */
+.grid.cards ul > li > h3 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+/* Add spacing between the icon and the title */
+.grid.cards ul > li > p:first-of-type img {
+    margin-right: 8px;
+}
+
+.tab {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -20px;
+    padding: 0;
+    list-style: none;
+    position: relative;
+}
+
+.tab > * {
+    flex: none;
+    padding-left: 20px;
+    position: relative;
+}
+
+.tab > * > a {
+    display: block;
+    text-align: center;
+    color: #999;
+    padding: 9px 20px;
+    border-bottom: 2px solid transparent;
+    border-bottom-color: transparent;
+    font-size: 12px;
+    text-transform: uppercase;
+    transition: color .1s ease-in-out;
+    line-height: 20px;
+}
+
+.tab > .active > a {
+  border-color: #1e87f0;
+}
+
+.tab > li > a {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.tab-content {
+    padding: 0;
+}
+
+.tab-content > li {
+  display: none !important;
+}
+.tab-content > li.active {
+    display: block !important;
+}
+
+/* The 2 following blocks can be removed if the script is not configured to show the toast message */
+#jekyll-tabs-copy-to-clipboard-message {
+    visibility: hidden;
+    min-width: 250px;
+    margin-left: -125px;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    padding: 16px;
+    position: fixed;
+    z-index: 1;
+    right: 50%;
+    bottom: 30px;
+}
+
+#jekyll-tabs-copy-to-clipboard-message.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }