Add CI checks, pin Ruby, fix OG fallback, and improve accessibility

.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: CI
+
+# Validates changes before they can be merged. The deploy workflow
+# (jekyll.yml) only runs on push to main, so this is the gate for PRs.
+on:
+  pull_request:
+    branches: ["main"]
+  # Allow running manually from the Actions tab
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  build-and-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          # Ruby version comes from the .ruby-version file (single source of truth)
+          bundler-cache: true
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Build with Jekyll
+        run: bundle exec jekyll build
+        env:
+          JEKYLL_ENV: production
+
+      - name: Check internal links (html-proofer)
+        run: npm run test-links
+
+      - name: Lint Ruby (RuboCop)
+        run: npm run rubocop
+
+      - name: Check formatting (Prettier)
+        run: npx prettier --check . --ignore-path ''

.github/workflows/jekyll.yml

@@ -37,7 +37,7 @@ jobs:
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: "3.3" # Not needed with a .ruby-version file
+          # Ruby version comes from the .ruby-version file (single source of truth)
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
           cache-version: 1 # Increment this number if you need to re-download cached gems
 

.gitignore

@@ -3,6 +3,7 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
+.DS_Store
 
 # We want to track these
 !.vscode

.ruby-version

@@ -0,0 +1 @@
+3.4

README.MD

@@ -1,6 +1,6 @@
 # README
 
-Dieses Repo enthält unsere aktuelle Website.
+Dieses Repo enthält unsere aktuelle Website. Gehostet sind wir auf Github Pages.
 
 ### Deploy wie?
 Die Website ist mit Jekyll gebaut. Bei jedem Push wird die Website neu gebaut und deployed.
@@ -9,5 +9,5 @@ Die Website ist mit Jekyll gebaut. Bei jedem Push wird die Website neu gebaut un
 Lokal laufen lassen:
 `bundle exec jekyll serve --host localhost --port 4000 --open-url`
 
-### Update aller Deps 
+### Update aller Deps
 `bundle update`

_config.yml

@@ -26,6 +26,12 @@ description: >- # this means to ignore newlines until "baseurl:"
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://www.inoeg.de" # the base hostname & protocol for your site, e.g. http://example.com
 
+# Default image for social-media link previews (Open Graph / Twitter cards).
+# Ideal size: 1200x630 PNG. Leave empty until a proper image is added — an empty
+# value means no image tag is emitted (no broken reference). Individual pages can
+# override this via the `og_image` front-matter key.
+og_image_default: ""
+
 # Specify used plugins here and in the Gemfile to ensure full flexibility.
 # Note that github pages only supports plugins that are specified in _config.yml
 plugins:
@@ -61,25 +67,3 @@ exclude:
 include:
   - _pages # static content
   - _posts # for blog / news posts
-
-# Site Footer
-footer:
-  links:
-    - label: "Twitter"
-      icon: "fab fa-fw fa-twitter-square"
-      # url:
-    - label: "Facebook"
-      icon: "fab fa-fw fa-facebook-square"
-      # url:
-    - label: "GitHub"
-      icon: "fab fa-fw fa-github"
-      # url:
-    - label: "GitLab"
-      icon: "fab fa-fw fa-gitlab"
-      # url:
-    - label: "Bitbucket"
-      icon: "fab fa-fw fa-bitbucket"
-      # url:
-    - label: "Instagram"
-      icon: "fab fa-fw fa-instagram"
-      # url:

_includes/footer.html

@@ -4,7 +4,7 @@
     <div class="w-layout-grid footer-grid">
       <div id="w-node-_23a2213f-f1e5-367e-fc87-519567ce2116-67ce2112" class="left-block-footer">
         <a href="/" class="footer-brand w-inline-block">
-          <img src="/assets/images/InÖG_Logo_1.1-Lang-Regular_RGB.svg" width="233" alt="" class="logo">
+          <img src="/assets/images/InÖG_Logo_1.1-Lang-Regular_RGB.svg" width="233" alt="Innovationsverbund Öffentliche Gesundheit e.V." class="logo">
         </a>
         <p class="footer-paragraph">
           Wir verbinden Innovationen
@@ -20,21 +20,12 @@ <h5 class="footer-title">Kontakt</h5>
       </div>
       <div id="w-node-_23a2213f-f1e5-367e-fc87-519567ce2126-67ce2112" class="block-footer">
         <h5 class="footer-title">Partner</h5>
-        <a href="https://www.steiger-stiftung.de" target="_blank" class="footer-link">Björn Steiger Stiftung</a>
+        <a href="https://www.steiger-stiftung.de" target="_blank" rel="noopener" class="footer-link">Björn Steiger Stiftung</a>
       </div>
       <div id="w-node-_8e5575b2-8b73-e7f3-4abc-bef8a098aa3b-67ce2112" class="block-footer">
         <h5 class="footer-title">Unterstützen</h5>
-        <a href="https://github.com/InOG-projects" target="_blank" class="footer-link">GitHub</a>
-        <a href="https://www.patreon.com/inoeg" target="_blank" class="footer-link">Patreon</a>
-        <div id="w-node-_16b82c70-fa76-ae7b-411e-78341052b7c4-67ce2112" class="twitter w-widget w-widget-twitter">
-          <iframe
-            title="Twitter Follow Button"
-            allowtransparency="true"
-            scrolling="no"
-            src="https://platform.twitter.com/widgets/follow_button.html#dnt=true&amp;height=20&amp;screen_name=inoeg_de&amp;show_count=false&amp;size=m&amp;width=100%25"
-            style="border: medium none; height: 20px; overflow: hidden; width: 100%"
-            frameborder="0"></iframe>
-        </div>
+        <a href="https://github.com/InOG-projects" target="_blank" rel="noopener" class="footer-link">GitHub</a>
+        <a href="https://www.patreon.com/inoeg" target="_blank" rel="noopener" class="footer-link">Patreon</a>
       </div>
     </div>
 

_includes/head.html

@@ -14,28 +14,27 @@
 <meta property="og:site_name" content="{{ site.title }}">
 
 <!-- Open Graph Image Tags -->
-{% if page.og_image %}
-  <meta property="og:image" content="{{ page.og_image | absolute_url }}">
-  <meta property="og:image:width" content="1200">
-  <meta property="og:image:height" content="630">
-  <meta property="og:image:type" content="image/png">
-{% else %}
-  <meta property="og:image" content="{{ '/assets/images/og-image-default.png' | absolute_url }}">
+{% comment %}
+  Per-page `og_image` wins; otherwise fall back to `site.og_image_default`
+  (set in _config.yml). If neither is set, no image tag is emitted so we never
+  reference a non-existent file.
+{% endcomment %}
+{% assign share_image = page.og_image | default: site.og_image_default %}
+{% if share_image %}
+  <meta property="og:image" content="{{ share_image | absolute_url }}">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
   <meta property="og:image:type" content="image/png">
 {% endif %}
 
 <!-- Twitter Card Meta Tags -->
-<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:card" content="{% if share_image %}summary_large_image{% else %}summary{% endif %}">
 <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
 <meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
-{% if page.og_image %}
-  <meta name="twitter:image" content="{{ page.og_image | absolute_url }}">
-{% else %}
-  <meta name="twitter:image" content="{{ '/assets/images/og-image-default.png' | absolute_url }}">
+{% if share_image %}
+  <meta name="twitter:image" content="{{ share_image | absolute_url }}">
+  <meta name="twitter:image:alt" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
 {% endif %}
-<meta name="twitter:image:alt" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
 
 <!-- Standard Meta Tags -->
 <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
@@ -49,3 +48,4 @@
 <link href="/assets/css/normalize.css" rel="stylesheet" type="text/css">
 <link href="/assets/css/webflow.css" rel="stylesheet" type="text/css">
 <link href="/assets/css/inog-website.webflow.css" rel="stylesheet" type="text/css">
+<link href="/assets/css/custom.css" rel="stylesheet" type="text/css">

_includes/header.html

@@ -1,11 +1,12 @@
+<a href="#main" class="skip-link">Zum Inhalt springen</a>
 <section class="top-nav">
   {% include logo.html %}
   <input id="menu-toggle" type="checkbox">
   <label class="menu-button-container" for="menu-toggle">
     <div class="menu-button"></div>
   </label>
   <ul class="menu">
-    <li><a href="https://www.iris-connect.de/" target="_blank">IRIS connect</a></li>
+    <li><a href="https://www.iris-connect.de/" target="_blank" rel="noopener">IRIS connect</a></li>
     {% assign current = page.url | downcase | split: '/' %}
     <li><a href="/projekte/" class="{% if current[1] == 'projekte' %}current{% endif %}">Projekte</a></li>
     <li><a href="/veroeffentlichungen/" class="{% if current[1] == 'veroeffentlichungen' %}current{% endif %}">Veröffentlichungen</a></li>

_layouts/default.html

@@ -10,20 +10,22 @@
   <body>
     {% include header.html %}
 
-    <div class="section wf-section">
-      <div class="single-hero-block">
-        <h1 class="single-page-title">{{ page.title | default: site.title }}</h1>
+    <main id="main">
+      <div class="section wf-section">
+        <div class="single-hero-block">
+          <h1 class="single-page-title">{{ page.title | default: site.title }}</h1>
+        </div>
       </div>
-    </div>
-    <div class="section wf-section">
-      <div class="block-content">
-        <div class="content-box">
-          <!-- content start -->
-          {{ content }}
-          <!-- content end -->
+      <div class="section wf-section">
+        <div class="block-content">
+          <div class="content-box">
+            <!-- content start -->
+            {{ content }}
+            <!-- content end -->
+          </div>
         </div>
       </div>
-    </div>
+    </main>
 
     <footer>
       {% include footer.html %}

_layouts/home.html

@@ -10,9 +10,11 @@
   <body>
     {% include header.html %}
 
-    <!-- content start -->
-    {{ content }}
-    <!-- content end -->
+    <main id="main">
+      <!-- content start -->
+      {{ content }}
+      <!-- content end -->
+    </main>
 
     <footer>
       {% include footer.html %}

assets/css/custom.css

@@ -0,0 +1,19 @@
+/* Custom styles layered on top of the Webflow export.
+   Keep site-specific tweaks here so the generated Webflow CSS stays untouched. */
+
+/* Accessibility: skip-to-content link, visible only on keyboard focus. */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 1000;
+  padding: 0.75rem 1.25rem;
+  background: #041735;
+  color: #ffffff;
+  text-decoration: none;
+  border-radius: 0 0 4px 0;
+}
+
+.skip-link:focus {
+  left: 0;
+}

robots.txt

@@ -0,0 +1,9 @@
+---
+# Rendered by Jekyll so the sitemap URL uses site.url.
+layout: null
+sitemap: false
+---
+User-agent: *
+Allow: /
+
+Sitemap: {{ '/sitemap.xml' | absolute_url }}