Update site with feedback on value prop and communication (#270)

* Update site with feedback on value prop and communication * Update the word publishing with sharing to avoid confusion * Apply suggestions from code review Co-authored-by: Jenny Wong <[email protected]> * Address PR comments * Text in image * Figcaptions * Update content with new video --------- Co-authored-by: jnywong <[email protected]>
2i2c-org · Jul 7, 2024 · 24e40ac · 24e40ac
1 parent a711e5d
commit 24e40ac
Show file tree

Hide file tree

Showing 26 changed files with 309 additions and 110 deletions.
diff --git a/assets/media/videos/desktop.mp4 b/assets/media/videos/desktop.mp4
diff --git a/assets/media/videos/jupyterhub-environment.mp4 b/assets/media/videos/jupyterhub-environment.mp4
diff --git a/assets/media/videos/jupyterlab.mp4 b/assets/media/videos/jupyterlab.mp4
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
@@ -8,6 +8,10 @@
 @import "components/admonitions.scss";
 @import "components/buttons.scss";
 
+// CSS for shortcodes we create
+@import "shortcodes/servicetech.scss";
+@import "shortcodes/opensourcelogos.scss";
+
 // Sections of the whole site
 @import "sections/navbar";
 @import "sections/footer";

diff --git a/assets/scss/pages/_platform.scss b/assets/scss/pages/_platform.scss
@@ -53,4 +53,28 @@ div.project-figures {
 // So that wide product logos aren't super tiny
 #jupyter-features div.featurette-icon img {
     width: 150px;
-}
+}
+
+// Captions to call out to open source projects
+figure.videofigure {
+    display: flex;
+    flex-direction: column;
+    figcaption {
+        display: inline-flex;
+        font-size: .8rem;
+        flex-wrap: wrap;
+        a {
+            margin: 0 .2rem;
+        }
+        img {
+            height: 1.2rem;
+            border: none;
+        }
+    }
+}
+
+section:not(.reverse-markdown-row) {
+    figcaption {
+        margin-left: auto;
+    }
+}
diff --git a/assets/scss/shortcodes/_opensourcelogos.scss b/assets/scss/shortcodes/_opensourcelogos.scss
@@ -0,0 +1,10 @@
+// Logos of open source projects
+div.logos {
+    a {
+        margin: .5rem auto;
+    }
+    img.logo {
+        max-height: 3em;
+        margin: 0 auto;
+    }
+}
diff --git a/assets/scss/shortcodes/_servicetech.scss b/assets/scss/shortcodes/_servicetech.scss
@@ -0,0 +1,25 @@
+/**
+ * Three-column product demo at the top of the page
+ */
+ .jupyter-demos {
+  text-align: center;
+
+    figcaption {
+      font-size: .9rem;
+      margin-bottom: .5em;
+      .caption-title {
+        font-weight: bold;
+        margin-bottom: .5rem;
+      }
+    }  
+
+  .demo-image-box {
+      min-height: 10em;
+      display: flex;
+      align-items: center;
+  }
+  img {
+      border: 1px solid black;
+      border-radius: .5em;
+  }
+}
diff --git a/config/_default/menus.toml b/config/_default/menus.toml
@@ -9,7 +9,7 @@
   weight = 10
 
 [[main]]
-  name = "Community network"
+  name = "Community case studies"
   url = "communities/"
   weight = 10
 
@@ -49,6 +49,12 @@
   url = "founders/"
   weight = 50
 
+  [[main]]
+  parent = "about"
+  name = "Design and brand assets"
+  url = "brand/"
+  weight = 70
+
   [[main]]
   parent = "about"
   name = "Jobs at 2i2c"

diff --git a/content/_index.md b/content/_index.md
@@ -28,7 +28,7 @@ sections:
 
       # Add your Hero text here
       text: |-
-        Our interactive computing platform gives your community a digital home to create and share knowledge, and a global network of communities to learn from.
+        Our interactive computing platform gives research and education communities a digital home to create and share knowledge with a global network of communities to learn from.
     design:
       # Choose an optional background color, gradient, image, or video
       background:
@@ -41,80 +41,19 @@ sections:
   - block: markdown
     id: service
     content:
-      title: We give communities a home in the cloud for interactive computing.
+      title: We help communities build a home in the cloud for interactive computing
       subtitle: 
       text: |
 
-        Our interactive computing platform **empowers communities in research and education to design a hub for their unique workflows**. It brings together open source tools, data, and computational resources in a remotely-accessible interactive environment for creating and sharing knowledge.
-                
-        <style>
-          img.logo {
-            padding: 0 3em;
-            margin-top: 1em;
-          }
-        </style>
-
-        {{< figure src="/images/home/hub-diagram.png" >}}
-
-        <div class="container logos">
-            <div class="row justify-content-center">
-                <div class="section-heading d-flex flex-wrap justify-content-center col-12 mb-3 text-center">
-                    <img class="logo col-6 col-md-4" src="/images/logos/project/jupyterlab.svg" alt="Jupyter Lab logo">
-                    <img class="logo col-6 col-md-4" src="/images/logos/project/jupyterhub.svg" alt="Jupyter Hub logo">
-                    <img class="logo col-6 col-md-4" src="/images/logos/project/jupyterbook.svg" alt="Jupyter Book logo">
-                    <img class="logo col-6 col-md-4" src="/images/logos/project/jupyter.svg" alt="Jupyter logo">
-                    <img class="logo col-6 col-md-4" src="/images/logos/project/myst.svg" alt="MyST logo">
-                    <img class="logo col-6 col-md-4" src="/images/logos/project/binder.svg" alt="Binder logo">
-                </div>
-            </div>
-        </div>
-
-
-  - block: markdown
-    id: numbers
-    content:
-      title: We serve a global network of communities
-      subtitle: 
-      text: |
-
-        We serve **over 80 communities across the globe** with **over 7000 active users** that are dedicated to creating and sharing knowledge. This includes **educational communities** that share knowledge within a community, **research communities** that create advances at the frontier of knowledge, and **applied knowledge communities** that use advances in knowledge to serve the public.
-
-        <style>
-          #who-logos {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            gap: 1em;
-          }
-          .list-inline-item {
-            flex: 1
-          }
-
-          .list-inline-item img {
-            filter: grayscale(100%); /* Desaturates the image completely */
-          }
-        </style>
-
-        {{< figure src="/images/home/worldmap.png" alt="2i2c map of communities" caption="A map of the rough location of communities with currently active hubs. Updated as of April 2024, [see our interactive map](https://2i2c.org/kpis/cloud/#map-of-hubs) for the latest data.">}}
-
-        </p>
-
-        <ul id="who-logos" class="list-inline">
-            <li class="list-inline-item"><a href="https://nasa.gov" target="_blank"><img src="/images/logos/community/nasa.svg" alt="Nasa logo"></a></li>
-            <li class="list-inline-item"><a href="https://www.si.edu/" target="_blank"><img src="/images/logos/community/smithsonian.svg" alt="Smithsonian logo"></a></li>
-            <li class="list-inline-item"><a href="https://www.hhmi.org/" target="_blank"><img src="/images/logos/community/howard-hughes-medical-institute.svg" alt="Howard Hughes Medical Institute logo"></a></li>
-            <li class="list-inline-item"><a href="https://ncas.ac.uk/" target="_blank"><img src="/images/logos/community/ncas.png" alt="NCAS logo"></a></li>
-            <li class="list-inline-item"><a href="https://pangeo.io/" target="_blank"><img src="/images/logos/community/pangeo.svg" alt="Pangeo logo"></a></li>
-            <li class="list-inline-item"><a href="https://www.utoronto.ca/" target="_blank"><img src="/images/logos/community/university-of-toronto.svg" alt="University of toronto logo"></a></li>
-            <li class="list-inline-item"><a href="https://columbia.edu/" target="_blank"><img src="/images/logos/community/columbia-university.png" alt="Columbia University logo"></a></li>
-        </ul>
+        Our platform **empowers community leaders in research and education to design a hub** for their community to create and share knowledge. We do so by bringing together open tools, services, data, and infrastructure.
 
+        {{< servicetech >}}
 
   - block: portfolio
     id: posts
     content:
       title: Community impact stories
-      subtitle: ''
+      subtitle: Our platform integrates open tools and services for many communities in research and education. Below are some stories of impact from our community partners.
       text: ''
       # Choose how many pages you would like to display (0 = all pages)
       count: 5
@@ -124,7 +63,7 @@ sections:
         folders:
           - blog
         # These are the tags that will show up in the list
-        tags: ["open source", "geoscience", "bioscience", "education"]
+        tags: ["geoscience", "bioscience", "education", "open source"]
         author: ""
         publication_type: ""
         featured_only: false
@@ -140,21 +79,60 @@ sections:
       buttons:
         - name: All
           tag: '*'
-        - name: Open Source
-          tag: open source
         - name: Geoscience
           tag: geoscience
         - name: Bioscience
           tag: bioscience
         - name: Education
           tag: education
+        - name: Open Source
+          tag: open source
     design:
       # Choose a listing view
       view: masonry
       # Choose single or dual column layout
       columns: '1'
       css_class: "home-stories"
 
+  - block: markdown
+    id: numbers
+    content:
+      title: We serve a global network of communities
+      subtitle: 
+      text: |
+
+        We serve **over 80 communities across the globe** with **over 7000 active users** that are dedicated to creating and sharing knowledge.
+
+        <style>
+          #who-logos {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 1em;
+          }
+          .list-inline-item {
+            flex: 1
+          }
+
+          .list-inline-item img {
+            filter: grayscale(100%); /* Desaturates the image completely */
+          }
+        </style>
+
+        {{< figure src="/images/home/worldmap.png" alt="2i2c map of communities" caption="A map of the rough location of communities with currently active hubs. Updated as of July 2024, [see our interactive map](https://2i2c.org/kpis/cloud/#map-of-hubs) for the latest data.">}}
+
+        </p>
+
+        <ul id="who-logos" class="list-inline">
+            <li class="list-inline-item"><a href="https://nasa.gov" target="_blank"><img src="/images/logos/community/nasa.svg" alt="Nasa logo"></a></li>
+            <li class="list-inline-item"><a href="https://www.si.edu/" target="_blank"><img src="/images/logos/community/smithsonian.svg" alt="Smithsonian logo"></a></li>
+            <li class="list-inline-item"><a href="https://www.hhmi.org/" target="_blank"><img src="/images/logos/community/howard-hughes-medical-institute.svg" alt="Howard Hughes Medical Institute logo"></a></li>
+            <li class="list-inline-item"><a href="https://ncas.ac.uk/" target="_blank"><img src="/images/logos/community/ncas.png" alt="NCAS logo"></a></li>
+            <li class="list-inline-item"><a href="https://pangeo.io/" target="_blank"><img src="/images/logos/community/pangeo.svg" alt="Pangeo logo"></a></li>
+            <li class="list-inline-item"><a href="https://www.utoronto.ca/" target="_blank"><img src="/images/logos/community/university-of-toronto.svg" alt="University of toronto logo"></a></li>
+            <li class="list-inline-item"><a href="https://columbia.edu/" target="_blank"><img src="/images/logos/community/columbia-university.png" alt="Columbia University logo"></a></li>
+        </ul>
+
   - block: markdown
     id: numbers
     content:
@@ -182,6 +160,7 @@ sections:
       subtitle: ""
       text: ""
       items:
+        # LEAVE OUT PARTNERSHIP because this forces us to use 3 columns
         - name: Transparency
           description: Our transparent and participatory model keeps our incentives aligned with community needs.
           icon: magnifying-glass

diff --git a/content/blog/2021/six-month-update/index.md b/content/blog/2021/six-month-update/index.md
@@ -41,7 +41,7 @@ Because Pangeo's infrastructure is already running on a fully open source stack
 We don't anticipate needing to make major changes to their infrastructure and deployments (part of the benefits of using open, modular tools).
 
 Once this is complete, we'll next shift our attention to some new areas of development that support use-cases in the Pangeo community (and in the scientific community more broadly).
-There's a lot of progress that we imagine making - such as [supporting publishing pipelines via the Pangeo Gallery](https://gallery.pangeo.io) or improving tools for scalable computing with [Dask Gateway](https://gateway.dask.org/).
+There's a lot of progress that we imagine making - such as [supporting sharing pipelines via the Pangeo Gallery](https://gallery.pangeo.io) or improving tools for scalable computing with [Dask Gateway](https://gateway.dask.org/).
 We'll provide updates as we formally begin this collaboration and hash out a plan for our next steps.
 
 ## JupyterHub for education - A collaboration with CloudBank and UC Berkeley

diff --git a/content/blog/2024/project-pythia-cookoff/index.md b/content/blog/2024/project-pythia-cookoff/index.md
@@ -16,7 +16,7 @@ draft: false
 
 ## What did 2i2c do?
 
-Jenny, James and Angus from the 2i2c team participated in the annual [Project Pythia Cook-off 2024](https://projectpythia.org/pythia-cookoff-2024/), a hackathon where cookbook authors and collaborators can spend dedicated time on creating and maintaining their content using [Jupyter Book](https://jupyterbook.org/en/stable/intro.html) and publishing their cookbooks with GitHub actions.
+Jenny, James and Angus from the 2i2c team participated in the annual [Project Pythia Cook-off 2024](https://projectpythia.org/pythia-cookoff-2024/), a hackathon where cookbook authors and collaborators can spend dedicated time on creating and maintaining their content using [Jupyter Book](https://jupyterbook.org/en/stable/intro.html) and deploying their cookbooks with GitHub actions.
 
 2i2c teamed up with the infrastructure breakout group during the hackathon, led by Katelyn FitzGerald (UCAR) and Kevin Tyle (University at Albany), and members of the [Curvenote](https://curvenote.com/) team also joined the group.
 
@@ -67,7 +67,7 @@ We spent this day tackling support for managing a gallery of Project Pythia cook
 
 ## Day 4
 
-Looking to the future, we spent time reflecting on our experiences and discussing the potential, transformative impact MyST MD tooling could have in the hands of the scientific community at large, including the communities served by 2i2c. Knowledge-sharing based on static figures and PDFs would fall obsolete and give way to a dynamic, web-first approach to interactive communication and publishing backed by compute from a Jupyter server.
+Looking to the future, we spent time reflecting on our experiences and discussing the potential, transformative impact MyST MD tooling could have in the hands of the scientific community at large, including the communities served by 2i2c. Knowledge-sharing based on static figures and PDFs would fall obsolete and give way to a dynamic, web-first approach to sharing interactive narratives backed by compute from a Jupyter server.
 
 Throughout the course of the hackathon, the rate of iterated development for both end users of the community cookbook and the developers of the open-source tooling was astounding. For example, we were able to quickly expose small bugs ([e.g. support for HTML video tags](https://github.com/executablebooks/mystmd/issues/1297)) in the MyST MD tooling, which were immediately fixed upstream and released within minutes. The feedback loop that connected the user experience with the software tooling was incredibly synergistic, with immediate impact both upstream and downstream that 2i2c hopes to continue replicating across many facets of their operations.
 

diff --git a/content/communities/_index.md b/content/communities/_index.md
@@ -1,6 +1,6 @@
 ---
 # Page title
-title: Our network of communities
+title: Community case studies
 # Page type - we want a landing page (such as a homepage)
 type: landing
 
@@ -9,13 +9,12 @@ sections:
   - block: markdown
     id: numbers
     content:
-      title: A shared platform for global communities.
+      title: We serve an international network of communities that create and share knowledge
       subtitle: 
       text: |
 
         {{< figure src="/images/communities/map-of-communities.png" >}}
 
-        We serve a global network of communities that create and share knowledge.
         The map above shows active communities in our network, and the size of each circle corresponds to the size of each community.
         See [our interactive map of active communities](https://2i2c.org/kpis/cloud/#map-of-hubs) for the latest data.
 
@@ -31,7 +30,7 @@ sections:
                 <h2 class="mb-0">2i2c in numbers</h2>
                 <div class="stat col-6">
                     <h5 class="card-title text-uppercase text-muted mb-0">Communities</h5>
-                    <span class="h2 font-weight-bold mb-0">>80</span>
+                    <span class="h2 font-weight-bold mb-0">>90</span>
                 </div>
                 <div class="stat col-6">
                     <h5 class="card-title text-uppercase text-muted mb-0">Active users</h5>
@@ -53,12 +52,16 @@ sections:
                     <li><a href="#data8">Data science education</a></li>
                     <li><a href="#spyglass">Communicating open science</a></li>
                     <li><a href="#catalyst">Global hubs for biomedical imaging</a></li>
+                    <li><a href="https://2i2c.org/category/impact">See our blog for more case studies</a></li>
                 </ul>
             </div>
         </div>
 
+        <div class="cta-group" class="margin: 0 auto;">
+        {{< cta cta_text="More case studies on our blog" cta_link="https://2i2c.org/category/impact" cta_new_tab="false" >}}
         {{< cta cta_text="Join our community network" cta_link="/join" cta_new_tab="false" >}}
-       
+        </div>
+        
   - block: markdown
     id: cryocloud
     design: