GithubHelp home page GithubHelp logo

codefor.de's Introduction

Code for Germany – Unsere Website

Dieses Repository beinhaltet die neue codefor.de-Webseite. Für die Entwicklung wird Hugo, ein Static Site Generator, verwendet. Die Doku findet ihr hier. Rein ehrenamtlich engagierte Menschen haben durch ihren Einsatz dafür gesorgt, dass es seit 2020 einen nachvollziehbaren Codereview-Prozess gibt.

Um Inhalte hinzuzufügen oder zu ändern ist im Grunde nur ein wenig Ahnung von Markdown benötigt.

Solltest du Hilfe brauchen oder eine Frage haben, mach gerne ein Issue auf oder frag im OKFDE-Slack Channel #codeforde-website nach.

Änderungen vorschlagen oder neue Inhalte hinzufügen

Eine Anleitung zum erstellen von neuen Inhalten findest du hier

Hinweise

  • Den main-Branch, aus dem sich die Seite automatisch baut, kann nicht direkt verändert werden. Stattdessen bringe deine Änderungen in einen eigenen Branch und stelle einen Pull-Request. Pull-Requests erhalten dank netlify automatisch eine Vorschau-URL, du findest diese dann als Preview in den Checks deines PRs.
  • Am besten bearbeitest du die Seite lokal und testest dann einmal mit hugo -D, ob sie wirklich funktioniert. Dadurch hilfst du, Fehler und damit auch zusätzliche Arbeit zu vermeiden.

Die Struktur im Überblick – Was finde ich wo?

(mehr dazu auch hier)

.
│
── archetypes ----------------> Basis Templates
│   ├── default.md
│   ├── labs.md
│   └── projekt.md
├── config.yaml
├── content ------------------> Der komplette Inhalt der Website
│   ├── archiv ---------------> Archivierte Projekte
│   ├── blog -----------------> die Blogbeiträge
│   │   ├── _index.md --------> legt eine Übersichtsseite an
│   │   └── *.md -------------> Blogpost
│   ├── datenschutz.md -------> Hauptseite zum Datenschutz
│   ├── grundsaetze.md -------> Hauptseite zu Grundsätzen
│   ├── impressum.md ---------> Hauptseite zum Impressum
│   ├── _index.md
│   ├── labs -----------------> die Labs
│   │   ├── _index.md --------> legt eine Übersichtsseite an
│   │   └── *.md -------------> Beschreibungsseite eines Labs
│   ├── mitmachen.md
│   ├── presse.md
│   ├── projekte -------------> die Projekte
│   │   ├── _index.md --------> legt eine Übersichtsseite an
│   │   └── *.md -------------> Projektbeschreibung
│   ├── ressourcen -----------> Hauptressourcen
│   │   └── *.pdf ------------> binäre Dateien
│   ├── summary_english.md
│   ├── ueber.md
│   └── ziele.md
├── data ---------------------> JSON und YAML Dateien
│   ├── about-us-blocks-de.json
│   ├── about-us-blocks-en.json
│   ├── home
│   ├── mitmachen
│   ├── netlify.toml ---------> ../netlify.toml
│   └── ziele
├── public -------------------> Fertige Seite, im .gitignore, also nicht bearbeiten!
├── LICENSE
├── netlify.toml -------------> Netlify Konfiguration (Weiterleitungen)
├── README.md ----------------> Diese Seite
├── resources
│   └── _gen
├── static
│   ├── blog -----------------> Bilder für Blogposts
│   ├── documents ------------> Dokumente
│   ├── icons ----------------> Icons für allgemeines Layout
│   ├── labs -----------------> Hexagon Sticker der Labs
│   └── projects -------------> Bilder für Projekte
└── themes/codefor-theme
│   ├── assets
│   ├── layouts --------------> Wiederverwendbare HTML Bausteine
│   │   ├── ...
│   │   ├── partials
│   │   ├── projekte
│   │   ├── shortcodes
│   │   ├── 404.html ---------> Individuelle 404 Seite
│   │   └── robots.txt
│   ├── static
│   │   ├── font -------------> Fonts
│   │   ├── img --------------> Bilder für Themes
│   │   └── js ---------------> JavaScript Dateien
│   └── LICENSE --------------> Lizenz der Website

Maschinenlesbare Daten der Labs und aller Projekte (simple API)

Eine maschinenlesbare Repräsentation der Labs und Projekte in JSON-Format lassen sich unter /projekte/index.json bzw. unter /labs/index.json abrufen.

Wichtig:

Das Schema der Daten kann sich jederzeit ändern.

Beispiel /labs/index.json

{
  "labs":[
    {
      "description":"Hier ist das komplette Markdown der Seite ohne 'front matter' (Header)",
      "metadata":{" Hier stehen alle Informationen die im 'front matter' (Header) stehen"}
    },
    {
      "description":"",
      "metadata":{""}
    }

  ]
}

Beispiel /projekte/index.json

{
  "projects":[
    {
      "description":"Hier ist das komplette Markdown der Seite ohne 'front matter' (Header)",
      "metadata":{" Hier stehen alle Informationen die im 'front matter' (Header) stehen"}
    },
    {
      "description":"",
      "metadata":{""}
    }

  ]
}

Lizenz

Code: MIT. Inhalt: CC BY 4.0.

codefor.de's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

codefor.de's Issues

Attributing Creative Commons images

Attribution is a legal requirement on some images, so it has to be implemented in archetypes and layouts

  • Title: The title of the image.
  • Author: The name of the creator.
  • Source: The URL where the image is hosted (plus optional link to author profile).
  • License: The type of Creative Commons license it is available under, including a link to the relevant license.
resources:
- src: 'open-2.jpg'
  description: 'Open neon Schild'
  title: 'red and white open neon signage'
  author: 'Viktor Forgacs'
  author_url: 'https://unsplash.com/@sonance?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
  license: ''
  source_name: 'Unsplash'
  source_link: 'https://unsplash.com/s/photos/open?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'
  isHeader: true

Stadtgeschichten zu alter Blüte verhelfen

Und zwar sehen die Stadtgeschichten auf der aktuellen Seite echt gut aus, wäre schade wenn das verloren gehen würde.

  • Stadtgeschichten -> Alle Informationen aus der Frontmatter wieder nutzbar machen
  • blockquotes stylen

Lab-Detailseiten

  • Treffpunkt
  • Termine
  • Kontakt / Ansprechpartner / Lab-Leads
  • Projekte
  • Links zu Meetup/gettogether/Github/Twitter/...
  • Nice to have: Mini-Blog-Funktion für kleine Ankündigungen in wenigen Sätzen / Tweet-Integration / Fediverse-Integration oder irgendwie sowas halt.
  • Idealzustand: Kein Lab braucht mehr eine eigene Seite, sondern alles kann hier abgebildet werden.

"Über uns"

  • kompakter, mehr auf den Punkt, aktueller, mehr Grafiken
  • z.B. Blocksatz f. Text

Lab Bremen?

Es gibt ein Projekt aus Bremen, aber keine Seite für das Lab?

Footer

  • Code-for-Logo mit weißer Schrift
  • externe Links mit Fontawesome-Icon für external-link markieren

Standard-Bilder für den Blog

  • Standard-Bilder für verschiedene Kategorien von Blogbeiträgen anlegen (& dokumentieren!!) -> "Ich habe gerade kein Foto / es ist zu groß / zu unscharf etc." darf kein Grund sein, um keinen Blogbeitrag zu veröffentlichen!

Layout/Text von Themen Buttons

Die Buttons, die auf unsere Themen fuehren haben auf unterschiedlichen Seiten unterschiedliche Layouts als auch Texte.

Seite Layout Text
Startseite Hintergrund: blau, Schrift: weiss Zum Themenfeld
Themen Hintergrund: gruen, Schriftgroesse: anders Zum Themenfeld <Themenfeld>

Eine vereinheitlichung waere interessant.

Zusaetzlich ist die Frage, ob Buttonaehnliche Elemente in diese Vereinheitlichung einbezogen werden: Lab Links und Links auf den Lab Seiten.

Invalid usage of p element

The p element doesn't allow other block level elements inside of it - https://dev.codefor.de/ueber/

        <p class="">
            <p>Code for Germany ist ein Projekt des gemeinnützigen Vereins Open Knowledge Foundation Deutschland. Daher leitet sich der Name unserer lokalen Organisationseinheiten ab: Open Knowledge Labs, kurz OK Labs. Hier treffen deutschlandweit digital affine Menschen  aufeinander. Gemeinsam arbeiten wir auf der Basis Offener Daten an analogen und digitalen Lösungen für mehr demokratische Teilhabe und Offenes Wissen.</p>
<p>Die Labs sind Experimentierräume für die digitale Stadtgesellschaft. Expert*innen aus Entwicklung, Design, Politik, Verwaltung, Geisteswissenschaften und viele weitere entwickeln hier selbstständig Open-Source-Software, die Behörden für ihre tägliche Arbeit implementieren können. Mit diesen praktischen Anwendungen zeigen wir auf, wie unsere Gesellschaft jeden Tag von Open-Government-Prozessen profitiert und ein nachhaltiger digitaler Wandel gestaltet werden kann.</p>
<p>Zwei hauptamtliche Mitarbeiter*innen unterstützen und begleiten das Netzwerk. Seit seiner Gründung 2014 ist es auf 26 Labs in 14 Bundesländern angewachsen und umfasst eine Community von mehr als 500 Freiwilligen. Wir arbeiten im Austausch mit kommunalen Behörden und unterstützen sie darin, ihre Dienstleistungen zeitgemäß, effizient und transparent zu gestalten.</p>
<p>Nachhaltiger digitaler Wandel bedeutet für uns, Open Government unter folgenden Leitlinien umzusetzen:</p>
<p><a href="/ziele#heading-01-open-data">OFFENE DATEN:</a> Verwaltungsdaten maschinenlesbar und standardisiert veröffentlichen.</p>
<p><a href="/ziele#heading-02-open-government">TECH OHNE SELBSTZWECK:</a> Technologie an menschlichen Bedürfnissen ausrichten.</p>
<p><a href="/ziele#heading-04-open-software">ÖFFENTLICHES GELD - ÖFFENTLICHES GUT:</a> Steuergelder in Freie und Offene Software
investieren.</p>
<p><a href="/ziele#heading-05-digitales-ehrenamt">DIGITALES EHRENAMT:</a> Zivilgesellschaft einbinden und nachhaltig fördern.</p>
<p><a href="/ziele#heading-06-oekologische-nachhaltigkeit">ÖKOLOGISCHE NACHHALTIGKEIT:</a> Natürliche Ressourcen schützen.</p>
<p><strong>Im Folgenden geben wir einen kurzen Überblick darüber, was das für unsere Partner*innen und uns in der Umsetzung bedeutet.</strong></p>

        </p>

Projekte: Tote externe Links

Bei Browsen unserer Projekte fiel mir auf, dass oft Links zu externen Webseiten nicht mehr funktionieren. Meiner Meinung nach macht das einen schlechten Eindruck auf Besucher_innen unserer Seite und entmutigt weitere Projekte anzuschauen.

Daher denke, sollten wir externe Links automatisch, regelmäßig prüfen lassen und auf Fehler zeitnah reagieren. Das kann bedeuten, dass wir die Links korrigieren oder komplett entfernen (z.B. weil ein Projekt aktuell nicht mehr deployed ist).

Remove links to calendar

No lab apart from Cologne uses the hosted nextcloud calendar but it is shown very prominently on the lab pages and on the main page. This creates the impression that we don't meet anymore and we (the @okfde/codeforde-devs) just discussed that we would like to remove it.
@weberius would it be ok for you if we removed it entirely or should we add some code to keep showing it on the Cologne lab page?

Link Problem

Die Seite https://www.bva.bund.de/SharedDocs/Kurzmeldungen/DE/Behoerden/Beratung/OpenData/Aktuelles/2020/200520_CfG_Resilienz.html
zeigt auf unser Resilienzhandbuch, aber über einen falschen Link:
https://codefor.de/assets/presse/CFG-Handbuch-Krisenresilienz-von-Verwaltungen.pdf
Wahrscheinlich geht es schneller, das bei uns zu korrigieren, als dort.
ABER: es gibt ein Dokument in https://github.com/okfde/codefor.de/blob/main/static/documents/Handbuch-Krisenresilienz.pdf
das via https://codefor.de/documents/Handbuch-Krisenresilienz.pdf erreichbar ist. Dann gibt es 3 Dokumente zum selben Thema in https://github.com/okfde/codefor.de/tree/main/content/ressourcen, die aber alle nicht erreichbar sind, jedenfalls finde ich keinen externen Link. Wer weiß, welches die richtige Version ist?
Dann ist mir noch aufgefallen, dass es keinerlei Meldung gibt, wenn man einen nicht-exisiterenden Link eingibt. Das ist etwas komisch, finde ich.

Projekte: Überschriften-Formatierung

Die Größe der Überschriften auf der Projekte-Übersicht passt nicht zum restlichen Text. Beispiel:

image

Das betrifft nur die Projekte-Übersicht. Die Detailseiten sehen okay aus.

Datum auf der Mitmachen Übersicht

Das Datum ist falsch. Entweder in den "mitmachen" Leafseiten das front-matter ändern, oder im Partial das Datum entfernen. Die Sachen sind ja eher statisch, daher würde ich eher das Datum rausmachen. Das steht in layouts/default/list.html. Evtl ein neues Layout definieren, damit nicht alle Listen ohne Datum sind.

Projekte nach Thema clustern

Damit die Projektseite nicht wieder so überladen ist. Würde ich gerne eine Top 10 (maximal 10) Vorzeigeprojekte, die immer angezeigt werden.
Darunter gibt es dann Themenbereiche: Umwelt, Mobilität, Politik, Gesellschaft

Jeder Projekteintrag muss also einem Themenbereich zugeordnet werden. So können diese dann auch auf den Themenseiten angezeigt werden.

Falls jmd. das umsetzen kann, ich wüsste gerne mal wie die Projektseite aussähe, wenn da nur ca 10 Projekte stehen.
Darunter dann nochmal per Themenbereich sortierbar! (Das können wir auch nachträglich hinzufügen).

Eine zugegeben sehr subjektive Top 10 könnte sein:

  • Open Legal Data (Politik)
  • Wo ist Markt (Gesellschaft)
  • Klimawatch (Umwelt)
  • Luftdaten.info (Umwelt)
  • Trinkwasser (Umwelt)
  • Zug-Direktverbindungen (Mobilität)
  • Unfalldaten Münster (Mobilität)
  • Politik-Bei-Uns (Politik)
  • kleine Anfragen (Politik)

Hier geht es mir nur um aktuelle Projekte, die halbwegs gut kommunizierbar sind. Habe da natürlich nicht alles auf dem Schirm. Wir kuratieren das vor dem Launch in der Community ggf. über den Community Rat.

Startseite

  • Newsletter
  • Bloggerin-Grafik ersetzen durch aussagekräftiges Bild
  • Abschnitt "28 Labs | 300 Ehrenamtliche | 5 Jahre" schöner machen: z.B. farblich absetzen, dann fünf Kreise hin, die direkt die Zielgruppen ansprechen

Replace Mapbox Tiles by a different Tile Layer Provider (e.g. Carto)

As we have currently issues with the Mapbox tiles, I would suggest the following:

https://leaflet-extras.github.io/leaflet-providers/preview/ shows some alternative background layer provider (not all listed are still working resp. free accessible)

Personally I prefer the CartoDB_Voyager style (code is shown when selecting on https://leaflet-extras.github.io/leaflet-providers/preview/):

var CartoDB_Voyager = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
	subdomains: 'abcd',
	maxZoom: 19
});

Lab-Seite (Übersicht mit Karte und Liste)

  • Die Lab-Seite sollte eine Karte enthalten mit Markern der einzelnen Labs.
  • Labels mit Städten aber nur beim Hovern.
  • Eine Liste aller Labs, die auf eine entsprechende Detailseite für jedes Lab linkt.
  • Buttons / Links: "Gründe dein eigenes Lab." bzw. "Mitmachen ohne Lab"

Termin Anzeige (macht aku [=digital-codes])

Ich habe auf der KA Variante eine "Termine" Anzeige, die sich über ein JSON File aktualisiert, damit man nicht dauernd die komplette Seite neu generieren muss.
termine
Falls das auch für die globale Seite interessant ist ...

Blog-Layout

  • Blogbeiträge korrekt verlinken
  • Seitenleiste mit Spendenhinweis einbauen

Problematic Javascript based collapsibles

#216 #224 already got rid of js based collapsibles on projects and labs pages

We don't want these js based collapsibles for accessiblity reasons. People blocking scripts have no method of accessing the information.

Suggestion: Get rid of them where possible.

Also: Investigate a <details> based solution for places where these collapsibles make sense.

Alte URLs redirecten

"Just in case", damit es nicht vergessen wird.

Ich fände es sehr wichtig, dass alle URLs von der alten Website weiterhin auf eine sinnvolle, neue Seite leite – nach Möglichkeit nirgendwo 404-Seiten.

In der Jekyll-Welt muss man dafür häufig leider auf einen Meta-Tag + JavaScript-Hack zurückgreifen. Aber auch das ist IMO besser, als nichts :-).

Startseite

  • Standard-Grafik (Frau mit Laptop) ändern in was Schickes
  • Grafisches Gesamtkonzept ausarbeiten

Blog images not shown in right column

Blog images are not shown in the right column on firefox linux. Reason (probably): left columns has data-style and style with background image, right columns has only data-style. I added style="background-image..." and image appears

<div class="project-preview-img lazyload" data-style="background-image: url('/blog/WaterDataCommons_pictureby_shridhar_vashistha_unsplash.jpg')"
<!-- next line missing on right columns-->
style="background-image: url('/blog/WaterDataCommons_pictureby_shridhar_vashistha_unsplash.jpg')"

Didn't have time to investigate further. I worked some weeks ago so maybe someone knows what has changed ...

Bildschirmfoto zu 2021-03-27 22-10-00

Karte

Wie wärs mit sowas?
labmap

Readme & Anleitung schreiben

Dieses Repository sollte eine Readme enthalten. Inhalt dieser Readme sollte sein:

  • Worum es überhaupt geht
  • Anleitung wie man Inhalte hinzufügt oder ändert
  • Ansprechpartner bei Problemen

Allgemeine Struktur der Webseite

Hallo zusammen :-)
Hier nochmal die Gedanken, die ich mal mit unserer UX Designerin zusammengetragen habe. Ich würde die allgemeine Struktur gerne erstmal so umsetzen - und freue mich über Unterstützung!

Seite Über Uns

  • gibt Infos über das allgemeine Projekt
  • hier werden alle erstmal abgeholt
  • alle die mitmachen möchten - werden auf "Mitmachen" weitergeleitet

Seite Projekte

  • hier wird eine Top10 der Projekte aufgelistet
  • außerdem eine Sortierung nach Themenbereich
  • jedes Projekt muss zu einem Themenbereich sortiert werden

Seite Themen

  • hab versucht Seite "Unterstützen" in Themen umzubennen siehe config file
  • hier werden unsere Themenbereiche vorgestellt
  • mir schweben aktuell vier vor (mehr möglich)
  • Umwelt, Mobilität, Politik, Gesellschaft
  • Auswahl eines der Themen --> Weiterleitung auf eine Unterseite (Umwelt, Mobilität, Politik, Gesellschaft)
  • auf den Unterseiten jeweils kurze Texte (ca. 2-3 Absätze)
  • darunter werden Projekte geteased
  • Die ganzen Unterseiten (als Entwickler, aus Politik) - brauchen wir nicht so ausführlich

Seite Die Labs

  • könnte m.E. in "Mitmachen" umbenannt werden
  • Einleitungstext zu CFG und wie man mitmacht (über Github / Slack) oder über Teilnahme an den Labs
  • Kalendar mit Labtreffen + Veranstaltungen
  • Karte für die Labs (Auswahl der Labunterseiten)

Seite Blog

  • bitte den blauen Button entfernen, habe es über config probiert - aber das hat nicht funktioniert.

Labseiten unter /labname bereitstellen

Für weniger URL-Änderungen (auch trotz redirects) wärs schön, wenn die Lab-Seiten weiterhin unter codefor.de/stadt leben.

Habe ein bisschen gewühlt, es scheint zu funktionieren, wenn man folgendes noch in die config.yaml packt:

permalinks:
  labs: "/:filename"

Die beispiel.md kann dann als archetype nach archetypes/lab.md umziehen :)

Es sollte möglich sein alle Blogposts auf einer Seite anzuzeigen.

Aktuell gibt es nur einen Button "WEITERE ANZEIGEN", der auch mit Javascript funktioniert.

Mein Vorschlag wäre es:

Mindestens:

  • Eine Seite hinzuzufügen auf der alle Blogposts verlinkt sind

Besser:

  • Eine Seite hinzuzufügen auf der alle Blogposts verlinkt sind
  • Die aktuelle Lösung durch eine klassische Pagination zu ersetzen, die würde dann auch ohne Javascript funktionieren.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.