Code Monkey home page Code Monkey logo

twc-site-berlin's Introduction

Berlin TWC

This repository is responsible for most content visible on the website TechWorkersBerlin.com. The site is made with a static site generator called Jekyll in a language called Ruby.

Getting Started

With Docker (recommended)

We use Docker to have a reproducible development environment. Before proceeding, install Docker Compose on your system.

  1. Start the application with the command: docker-compose up
  2. Access the application in a browser at localhost:4000
  3. Execute other commands in the Docker container: docker-compose run --rm --service-ports jekyll bash

Without Docker

  1. Install dependencies: bundle install
  2. Start a local server: bundle exec jekyll serve
  3. Verify all internal links are valid: bundle exec rake
  4. (Optional) to reproduce Netlify functions run npx decap-server; then you can access /admin or other Netlify services

Open a browser to localhost:4000

Add an event

Add a file inside the _events directory. Copy a previous file as a template, and make sure to include the right time zone for Berlin!

Add a blog post (inside /blog)

Add a file inside the _blog directory. Copy a previous file as a template. If an author does not exist, add one inside _data/authors.yml. A name is the only thing necessary, but photo is optional too.

Add a press mention

Inside _data/press.yml file, add a media entry, with date format in YYYY-MM-DD.

Translation

I18n (internationalization) is made available with the jekyll-multiple-languages-plugin. When a page has a translated version available, a link will show up on the top right if you use the default_translate layout. English is the default language, while other languages have their two letter ISO code prefixed, for example TechWorkersCoalition.org/ru for Russian.

Localise date

Normally displaying a date is done using native liquid templates {{ page.date | date: '%-d %B %Y' }}, but for localisation, we need to pass it a language which can be done using our custom _plugins/i18n_filter.rb, and translation keys. We would replace our liquid template with the following:

{{ page.date | localize: site.lang, '%-d %B %Y' }}

Adding new language

  1. Add new language key to en.yml
  2. Add two letter iso code in config. The order here determines the order shown on the page. English must be first.
  3. Inside the i18n directory create a
  • LANGUAGE.yml with the language key and value in its own language, for example es: Español

Note, only the default en.yml must contain the names of each language. The other language yaml files contain just their own language key. To include only certain languages, specify the exact language keys you want. For example languages: ["en", 'ja']

Screen Shot 2019-07-21 at 14 48 46

API feeds

Currently techworkerscoalition.org uses Berlin press and events either from GitHub or directly from our exposed APIs e.g /events.json. You can find other uses cases here

Supported Pages

Supported Languages

  • English
  • German
  • Russian
  • Polish

twc-site-berlin's People

Contributors

abstractowl avatar acao avatar andm-twc avatar andoneve avatar chobeat avatar dependabot[bot] avatar depfu[bot] avatar dmarcoux avatar ellenkoenig avatar gac25 avatar jordancoll avatar keevie avatar kidmillions avatar liavke avatar ma06484 avatar marisarando avatar mkwhiley avatar mleimeister avatar ovlb avatar pagepant avatar pastnullinfinity avatar radcliff avatar rahamelody avatar rkupadhya avatar rosspatton avatar rxxx03 avatar samepant avatar shushugah avatar situatedbit avatar ughitsaaron avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

twc-site-berlin's Issues

Make forms reusable

Currently switching between different forms is very manual. Currently inside DeCapCMS you can set the boolean hide_form, but it should instead be the name of a form, and associated with that...it displays other kind of information, like accessibility for Zoom (as opposed to whatever physical venue)

and make it easier to reuse certain forms. currently the most common form is "subscribe" but "general" use could also be used...when bare minimum info is needed, while potluck is great for food centric events.

Screenshot 2024-02-27 at 22 47 51

Improve individual news post

Currently a news post is missing some features, like author preview/link

  • Because authors might be repeated across multiple posts, we should have a _data/authors.yml file where an author's website, twitter url is linked, and it's used/previewed in posts.
  • Add preview text to all posts
  • Add preview image to all posts, with a default if none are provided

See these SEO guidelines for the JEKYLL SEO plugin which we already use https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/advanced-usage.md#author-information
Screenshot 2020-04-09 at 11 25 45
Screenshot 2020-04-09 at 11 25 56

Screenshot 2020-04-09 at 10 46 55

CMS improvements

Currently only techworkersberlin.com/events collection are update-able with the DecapCMS.

  • A similar flow for techworkersberlin.com/news collection would be possible.
  • Update decap-CMS to include news collection (relevant code here)
  • Use a list widget instead of boolean widget to select our different netlify forms (default, zoom, general, etc..)
  • Have a dropdown of tags (used by both events and news...to filter, for example https://techworkersberlin.com/works-councils shows all related events and news articles with the tag works-council instead of the free text, achieve this by creating a YAML file inside (_data)
  • Make it possible to update/add press entries (code here)

Translate the damn pages

For some pages like

  • techworkersberlin.com/press
  • techworkersberlin.com/works-councils we should translate them instead of debating whether to show a localized url with English or not.

On other hand, something like an event page should probably not be translated, it would only create confusion about what language the specific event is in. Better support for filtering press_mentions or events by language would be useful tho, as they're already a mixture of specific languages.

Liquid plugin bug

The Polish version of website renders "error" for date-times. I suspect this has to do with the Locale keys not being fully available.

Debugging

# i18n_filter.rb
    def localize(input, locale, format=nil)
      # binding.pry if locale == 'pl'
      if input.is_a? String
        date_format = Date.parse(input)
      else
        date_format = input
      end
      load_translations(locale)
      format = (format =~ /^:(\w+)/) ? $1.to_sym : format
      I18n.l date_format, :format => format
    rescue
      binding.pry
      "error"
    end

Polish keys seem to be missing here when calling I18n.backend.send(:translations)
It results in

{:pl=>
  {:date=>
    {:month_names=>#<Proc:0x0000000107e5e6d0 /Users/yonatan.miller/dev/twc-site-berlin/_plugins/../_i18n/custom_polish.rb:4 (lambda)>,
     :abbr_month_names=>#<Proc:0x0000000107e5e6a8 /Users/yonatan.miller/dev/twc-site-berlin/_plugins/../_i18n/custom_polish.rb:15 (lambda)>,
     :abbr_day_names=>#<Proc:0x0000000107e5e680 /Users/yonatan.miller/dev/twc-site-berlin/_plugins/../_i18n/custom_polish.rb:24 (lambda)>}},
 :langs=>{:de=>"Deutsch", :en=>"English", :pl=>"Polski", :ru=>"Русский"},
 :home=>
  {:summary=>
    "Berlin Tech Workers Coalition is a landing page for tech workers looking to organise their workplace. Whether it is through <a href=\"/works-councils\">Works Councils</a> (Betriebsräte), union campaigns for higher wages, or broader struggles against racism and gentrification, we are here to support you! Tech Won’t Save Us...Organise! ✊ We are the largest English speaking network of Works Councils, tech workers and trade union members supporting each other in different tech companies like Soundcloud, Contentful, ShareNow, Amazon, SumUp, N26, TikTok and maybe your company!",
   :black_lives_matter=>
    {:title=>"Black Lives Matter",
     :summary=>
      "We encourage all Tech Workers to stand in solidarity with the Black Lives Matter movement in the fight for racial justice. For ways to support and more information on local Black initiatives in Berlin and Germany, we refer to&#58; <a href=\"https://www.blacklivesmatterberlin.de\" >Black Lives Matter Berlin</a>, <a href=\"http://isdonline.de\" >Initiative Schwarze Menschen in Deutschland (ISD)</a>, <a href=\"https://www.eoto-archiv.de\" >Each One Teach One</a>"},
   :zero_covid=>
    {:title=>"ZERO COVID",
     :summary=>
      "We as TWC Berlin support the <a href=\"https://zero-covid.org/language/en/\">ZeroCovid</a> campaign. Employers must take responsibility for the health and safety of workers and support working from home wherever possible. In all branches of industry where this is not possible and that are non-essential, a solidarity shutdown is urgently needed to fight the pandemic. If your employer fails to protect your health by adequate measures, or denies home office and you would like to discuss how we can support you, please contact us (also anonymously) on [email protected]"},
   :dw_enteignen=>
    {:summary=>
nen</a> campaign. If you live in Berlin and are eligible to vote, find out how to sign <a href=\"https://www.dwenteignen.de/unterschreiben/\">here</a>."},
[45] pry(#<#<Class:0x0000000107ef4f68>>)> I18n.backend.send(:translations)
=> {:pl=>
  {:date=>
    {:month_names=>#<Proc:0x0000000107e5e6d0 /Users/yonatan.miller/dev/twc-site-berlin/_plugins/../_i18n/custom_polish.rb:4 (lambda)>,
     :abbr_month_names=>#<Proc:0x0000000107e5e6a8 /Users/yonatan.miller/dev/twc-site-berlin/_plugins/../_i18n/custom_polish.rb:15 (lambda)>,
     :abbr_day_names=>#<Proc:0x0000000107e5e680 /Users/yonatan.miller/dev/twc-site-berlin/_plugins/../_i18n/custom_polish.rb:24 (lambda)>}},
 :langs=>{:de=>"Deutsch", :en=>"English", :pl=>"Polski", :ru=>"Русский"},
 :home=>
  {:summary=>
    "Berlin Tech Workers Coalition is a landing page for tech workers looking to organise their workplace. Whether it is through <a href=\"/works-councils\">Works Councils</a> (Betriebsräte), union campaigns for higher wages, or broader struggles against racism and gentrification, we are here to support you! Tech Won’t Save Us...Organise! ✊ We are the largest English speaking network of Works Councils, tech workers and trade union members supporting each other in different tech companies like Soundcloud, Contentful, ShareNow, Amazon, SumUp, N26, TikTok and maybe your company!",
   :black_lives_matter=>
    {:title=>"Black Lives Matter",
     :summary=>
      "We encourage all Tech Workers to stand in solidarity with the Black Lives Matter movement in the fight for racial justice. For ways to support and more information on local Black initiatives in Berlin and Germany, we refer to&#58; <a href=\"https://www.blacklivesmatterberlin.de\" >Black Lives Matter Berlin</a>, <a href=\"http://isdonline.de\" >Initiative Schwarze Menschen in Deutschland (ISD)</a>, <a href=\"https://www.eoto-archiv.de\" >Each One Teach One</a>"},
   :zero_covid=>
    {:title=>"ZERO COVID",
     :summary=>
      "We as TWC Berlin support the <a href=\"https://zero-covid.org/language/en/\">ZeroCovid</a> campaign. Employers must take responsibility for the health and safety of workers and support working from home wherever possible. In all branches of industry where this is not possible and that are non-essential, a solidarity shutdown is urgently needed to fight the pandemic. If your employer fails to protect your health by adequate measures, or denies home office and you would like to discuss how we can support you, please contact us (also anonymously) on [email protected]"},
   :dw_enteignen=>
    {:summary=>
nen</a> campaign. If you live in Berlin and are eligible to vote, find out how to sign <a href=\"https://www.dwenteignen.de/unterschreiben/\">here</a>."},
   :events=>{:title=>"5 Recent events", :summary=>"Find [all upcoming events here](/events)"},
   :news=>{:title=>"Recent articles"}},
 :connect=>
  {:info=>"Get involved! @TechWorkersBER",
   :description=>"The easiest way to get involved is to attend one of our upcoming <a href=\"/events\" >events</a>.",
   :title=>"Kontakt",
   :email=>"Email",
   :name=>"Name",
   :public_link=>"Public link",
   :company=>"Your employer",
   :how_did_hear=>"How can we support your personal goals?",
   :subscribe_to_slack=>"Subscribe to Slack",
   :subscribe_to_newsletter=>"Subscribe to Newsletter",
   :subscribe=>"Join",
t</a>",
   :number=>"Phone number"},
 :global=>
  {:edit_this_page=>"Edit This Page",
   :code_of_conduct=>
    {:title=>"Code of Conduct",
     :summary=>
en unless express consent is given."},
   :accessibility=>
    {:title=>"Accessibility",
     :summary=>
kersBerlin.com</a>."}},

Improve social media icons

  1. Add social media icons for each platform in list of icons
  2. On hover, change to background color of said social media platform
  3. Improve slack and newsletter sign up process

Update NetlifyCMS (renamed to DecapCMS)

Update Netlify CMS to use latest version (backward compatible)
The file to change is here and documentation is here.

Additionally, testing is needed. NetlifyCMS/DecapCMS works on preview url as well, so it's possible to test before merging.

Fix: Polish

Screenshot of home page with preview of news links

Currently `/news` posts still display the date in English instead of Polish (1 April 2020) for example and contact email is missing

Make the website printer friendly

As an activist who who wants to print some flyers...printing techworkersberlin.com/ should yield a really nice 1 page PDF, with

  • A nice logo/header
  • accessible time/location
  • urls for each event
  • and social media icons on bottom

Create Themes

As we grow/expand, we should have more concrete themes, that can capture interest/relevance of different tech workers. For example /auto sector can include all news related to BMW, Daimler, Volkswagon, but also existing articles we have, for example Bosch.IO tech interview about forming works council https://www.igmetall-berlin.de/aktuelles/meldung/boschio-und-ploetzlich-droht-softwareingenieuren-kurzarbeit or related events

In short, we should pool underneath each theme, relevantly tagged events, news posts, and static information. For example IG Metall Berlin is reasonable union to link under /auto section

While news about N26, Wirecard, and contact info of Ver.di for/fintech would be reasonable.

Similarly, on a page dedicated to Amazon, we'd link to our BerlinVsAmazon campaign, AWS/Fulfillment Centre resources etc..

I don't have a strong opinion on url

/theme/amazon
theme/gig-economy
which implies /theme would exist, and could offer placeholders for non existing themes, but link to a github issue/pull request then.
or plain
/works-council
/auto etc..

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.