Add: learn page and new tutorial links

Author: lwasser

.github/workflows/build-site.yml

@@ -37,22 +37,6 @@ jobs:
           build_only: true
           build_dir: _site
 
-      - name: Set up Ruby
-        uses: ruby/setup-ruby@v1
-        with:
-          ruby-version: 3
-      - name: Install gems
-        run: |
-          gem install html-proofer
-          gem install typhoeus
-
-      - name: Cache HTMLProofer
-        id: cache-htmlproofer
-        uses: actions/cache@v4
-        with:
-          path: tmp/.htmlproofer
-          key: ${{ runner.os }}-htmlproofer
-
       - name: Check links with lychee
         id: lychee
         uses: lycheeverse/lychee-action@v1.9.0
@@ -61,10 +45,11 @@ jobs:
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
 
-      - name: Run htmlproofer
-        run: |
-          ruby scripts/htmlproofer.rb
-          ls
-
-      - name: Error log
-        run: cat html_proofer_errors.txt
+      - name: Check HTML using htmlproofer
+        uses: chabad360/htmlproofer@v2
+        with:
+          directory: "_site"
+          arguments: |
+            --ignore-urls "https://www.github.com,https://fonts.googleapis.com,https://fonts.gstatic.com,_site/_posts/README/index.html"
+            --ignore-files "/.+\/_posts\/README.md"
+            --ignore-status-codes "0, 200, 403, 429, 503, 999"

Gemfile

@@ -3,4 +3,4 @@ source "https://rubygems.org"
 gem "github-pages", group: :jekyll_plugins
 gem "jekyll-include-cache"
 gem "webrick"
-gem "html-proofer", "~> 3.0"
+gem "html-proofer"

_config.yml

@@ -188,6 +188,7 @@ exclude:
   - tmp
   - /docs # ignore Minimal Mistakes /docs
   - /test # ignore Minimal Mistakes /test
+  - styles/* # text spelling check
 keep_files:
   - .git
   - .svn

_data/navigation.yml

@@ -28,8 +28,15 @@ main:
       - title: "Package Guidebook"
         url: "https://www.pyopensci.org/python-package-guide/"
         icon: "fas fa-external-link-alt"
-  - title: "Blog"
-    url: "/blog/index.html"
+  - title: "Learn"
+    sub-nav:
+      - title: Tutorials & Resources
+        url: "learn.html"
+      - title: Blog
+        url: "/blog/"
+      - title: Ask a question
+        url: "https://pyopensci.discourse.group/"
+        icon: "fa-brands fa-discourse"
   - title: "Community"
     sub-nav:
       - title: "Our Community"

_includes/masthead.html

@@ -13,8 +13,8 @@
 
       <ul class="nav__links">
         {%- for alink in site.data.navigation.main -%}
+        <!-- If there are sub links drop down nav to display -->
               {% if alink.sub-nav %}
-              <!-- If there is sub nav to display -->
              <li class="dropdown">
                 <button class="dropbtn" tabindex="0" aria-expanded="false">{{ alink.title }} <i class="fas fa-caret-down"></i>
                 </button>

_pages/home.md

@@ -40,7 +40,6 @@ peer-review:
     btn_class: btn--inverse
 ---
 
-
 {% include feature_row id="mission" type="center" %}
 
 ## Peer review of Python software to support open science

_pages/learn.md

@@ -0,0 +1,84 @@
+---
+layout: splash
+permalink: /learn.html
+title: "Python Tutorials & Learning Resources for Scientists"
+classes: flowing
+header:
+  overlay_image: images/headers/pyopensci-learn-header.png
+  overlay_filter: 0.3
+scientists:
+  - image_path: images/pyopensci-people-at-computer.jpg
+    alt: "A pencil sketch of a round table with people sitting around it from different backgrounds working on laptops and also writing together."
+    excerpt: "Our catalog of vetted open source tools makes it easier for scientists to find the trusted tools that they need to develop their open science workflows."
+    title: "Help scientists find the open science tools that they need"
+    url: https://www.pyopensci.org/python-packages.html
+    btn_label: View our growing list of accepted scientific Python packages
+    btn_class: btn--primary
+overview:
+  - excerpt: "pyOpenSci creates resources to help you navigate the Python packaging ecosystem with ease. Our materials are community developed and go through extensive technical and pedagogical review."
+development:
+   - image_path: images/pyopensci-learn-community-created.png
+     alt: "An image showing a bunch of hands holding up a sign that says Community Developed. the background is dark purple with a few green decorative items."
+     title: "Our development process: Community-developed Python tutorials for scientists"
+     excerpt: "Our tutorials are created through a multi-stage community review process.
+
+     * Tutorials are developed by the pyOpenSci team or community members.
+
+     * Tutorials are reviewed by tool maintainers to ensure ideas and concepts are accurate.
+
+     * Before publication, tutorials then go through several rounds of community review for accuracy, usability and accessibility."
+whats_next:
+  - image_path: images/pyopensci-learn-github-collaboration.png
+    alt: "A graphic with a light yellow background that says essential collaboration skills for scientists - using GitHub. On the right there is a man and a woman sitting at a tall table with laptops working."
+    excerpt: "Through the [Better Software for Science Fellowship](https://bssw.io/pages/bssw-fellowship-program) we will be developing lessons focused on teaching core GitHub collaboration skills needed for both contributing to open source software and for working in an open science team environment.
+
+
+    **Stay up to date with course development and announcements in [our Discourse community](https://pyopensci.discourse.group/), as well as on [Fosstodon](https://fosstodon.org/@pyOpenSci) and [LinkedIn](https://www.linkedin.com/company/pyopensci/)**"
+    title: "What's next: Collaborative GitHub for Scientists"
+toc: false
+---
+
+{% include feature_row id="overview" type="center" %}
+
+<div class="pyos-section purple">
+<div class="content" markdown="1">
+
+{% include feature_row id="development" type="left" %}
+
+</div>
+</div>
+
+{% include div_purple_bottom.html  %}
+
+<div class="pyos-section">
+<div class="content" markdown="1">
+<!-- Feature wrapper has a clear both -->
+<div class="feature__wrapper padded" markdown="1">
+
+## Start learning: Beginner-friendly Python packaging tutorials
+
+Beginner-friendly Python packaging tutorials that will take you through
+the full process of creating a Python package, following modern best
+practices.
+
+<div class="tutorial__container">
+{% for atutorial in site.tutorials %}
+  {% include tutorial-grid.html  %}
+{% endfor %}
+</div>
+
+
+</div>
+</div>
+</div>
+
+{% include div_purple_top.html  %}
+
+<div class="pyos-section purple">
+<div class="content" markdown="1">
+
+{% include feature_row id="whats_next" type="left" %}
+</div>
+</div>
+
+{% include div_purple_bottom.html  %}

_sass/minimal-mistakes/_base.scss

@@ -38,6 +38,7 @@ h6 {
 h1 {
   margin-top: 0;
   font-size: $h-size-1;
+  font-weight: 200!important;
 }
 
 h2 {

_sass/minimal-mistakes/_pyos-cards.scss

@@ -32,16 +32,22 @@
             padding: 1em;
         }
         h4.title {
-            color: rgb(84, 38, 104)!important;
+            color: #fff!important;
             font-size: 1.3em;
             margin: 0;
+            font-family: $sans-serif;
+            font-weight: 300;
         }
         .title-block {
-            background-color: #F7F2E2;
+            background-color: $pyos-darkpurple;
             display: flex;
-            height: auto;
+            height: 7em;
             padding: 1.2em;
             border-bottom: #555 2px solid;
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
         }
 
         img {

_sass/minimal-mistakes/_pyos-flowing-page.scss

@@ -18,15 +18,6 @@ svg.bottom {
     left: 0;
 }
 
-// .divider-purple::after {
-//     content: "";
-//     display: block; /* Make it a block-level element to appear below the previous content */
-//     clear: both; /* Ensure the pseudo-element clears the floated content above it */
-//     width: 100%;
-//     height: auto; /* Adjust the height as needed for your divider */
-//     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.042 0.1 180.142 24.439"><g transform="matrix(1, 0, 0, 1, -18.298843383789062, -77.97396087646484)"><path style="opacity: 0.9; fill: rgb(189, 182, 214);" d="M 31.874 78.826 L 191.94 77.978 L 192.165 98.254 C 192.165 98.254 160.131 84.016 132.538 85.529 C 110.196 86.754 77.759 95.255 77.759 95.255 C 77.759 95.255 55.729 98.884 43.288 93.365 C 30.846 87.847 31.874 78.826 31.874 78.826 Z"/><path style="fill: rgb(226, 223, 237);" d="M 18.128 77.905 L 198.538 77.812 L 198.581 102.395 C 198.581 102.395 155.475 74.57 125.105 82.707 C 94.736 90.844 93.457 92.674 77.476 95.264 C 59.89 98.114 35.933 103.412 24.039 94.23 C 21.427 92.213 18.428 89.779 18.362 86.673 C 18.133 75.848 18.128 77.905 18.128 77.905 Z"/></g></svg>') no-repeat center center;
-//     background-size: contain;
-//     }
 
 .flowing div#main {
     max-width: 100%;
@@ -45,3 +36,18 @@ svg.bottom {
         max-width: 900px;
     }
 }
+
+// Add padding to non feature wrapper sections
+.feature__wrapper.padded {
+    padding: 0 30px;
+
+}
+
+.page__content .feature__wrapper.padded {
+    & p {
+    max-width: fit-content;
+    }
+    & h2 {
+        font-size: 2rem;
+    }
+}