GithubHelp home page GithubHelp logo

raumzeitlabor / rzl-homepage Goto Github PK

View Code? Open in Web Editor NEW
7.0 20.0 20.0 283.65 MB

The Jekyll instance powering our homepage

Home Page: https://raumzeitlabor.de

License: Other

Ruby 0.07% JavaScript 6.52% HTML 91.83% CSS 0.93% Shell 0.44% Makefile 0.06% Dockerfile 0.16%
jekyll html hackerspace rzl homepage raumzeitlabor

rzl-homepage's Introduction

rzl-homepage

Build Status DevDependency Updates

This repository is rather large (about 200MB at the time of writing) because everything (including images) is included. The initial cloning therefore takes a few seconds (depending on your Internet connection).

Please have a look at our contribution guidelines.

Development Setup

We have a Docker build container 'cause it's hip, but you may also roll your own environment. Choose as you like.

Docker

experimental

docker run --rm=true -e DEVUID=$(id -u) -p 127.0.0.1:8000:8000 -v $(pwd):/home/dev raumzeitlabor/rzl-homepage-dev-docker

Plain

Requirements

Debian
sudo apt-get install nodejs nodejs-legacy npm bundler ruby-dev
sudo npm install -g grunt-cli
Arch Linux
sudo pacman -S nodejs npm
gem install bundler
sudo npm install -g grunt-cli
FreeBSD
sudo pkg install node npm rubygem-bundler nasm
sudo npm install -g grunt-cli

Note: nasm(1) is needed to compile some node packages from source.

OSX

Needs Homebrew.

brew install node ruby 
sudo gem install bundler
sudo npm install -g grunt-cli

Dependencies

yarn install
bundler install

Hacking

grunt serve
$EDITOR app/$file

Building

grunt

uses the default task in the Gruntfile to build the whole site (targets test and build). This is what Travis does on new commits (see .travis.yml).

You can also run individual Grunt targets, e.g.

grunt build
grunt test

To check the result use

grunt serve:dist

which rebuilds the whole project and serves the "dist" folder on port 8080. The editing of files then triggers a new build.

You can read about all targets in the Gruntfile.

Deployment

This homepage is auto-deployed by Travis if the following requirements are met:

  • we're on the master branch
  • the build is green (grunt exited with status 0)

Travis will rsync the contents of the dist directory to citizenfour (this is really fast). Please note that it may take a few minutes until Travis is able to complete a build. We originally used Travis' new container-based infrastructure; due to lack of IPv6 (we deploy via IPv6) we had to switch back to the standard virtualized boxes, leading to a much slower build.

The homepage is served by the rzl-homepage-docker container. Anything related to webserver setup should be filed against that repository.

Internals

The data flow is as follows:

                             app
             app/_layouts     |
                    |         v
                    v      +--------+
               .layouts -> | jekyll | -> .tmp -> dist
                           +--------+

The Gruntfile we're using was initially generated using the yeoman webapp generator. While it allows for really nice development setups, it is a bit complicated to understand. Here's some information on how the homepage is built (rough sketch):

  1. All JS code is linted. If you don't meet our style, you're out.
  2. The target directory is cleaned up.
  3. CSS is auto-prefixed (see e.g. http://scottriley.im/autoprefix).
  4. All files relevant for Jekyll (especially HTML) is copied to .tmp
  5. CSS and JS files are minified, concatenated and revved.
  6. Images are optimized and revved.
  7. Jekyll is run to generate the contents.
  8. All HTML files are minified (e.g. templates, static pages).

rzl-homepage's People

Contributors

abrock avatar blabber avatar cheatha avatar echomirage avatar echox avatar elsbrock avatar flederrattie avatar greenkeeperio-bot avatar hax404 avatar jacboy avatar leahoswald avatar lutoma avatar mkhl avatar mschuetz avatar pfeyffer avatar ranlvor avatar raphaelm avatar renovate-bot avatar renovate[bot] avatar s1lvester avatar silsha avatar tabascoeye avatar takuruu avatar thinkjd avatar uwap avatar

Stargazers

 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  avatar  avatar

rzl-homepage's Issues

Put deployed commit into footer

Not sure how to do this best. I thought about either modifying the template (replacing a placeholder) or creating a CHANGELOG.json in dist which we could then get via AJAX.

I had a look at grunt-git-log-json which requires the usage of tags for each deployed version. There is also grunt-git-describe which does not natively support writing to files.

I think we only need the latest commit SHA. We could also do this via Travis, but I think it would be really nice if we could keep the local build process as equal as possible.

Create rewrite rules to keep original links valid

I've taken some care to keep most of the links of our original wordpress installation valid, but I'm pretty sure there will be dozens of broken links. These should be redirected to their new location with a 301 ("Moved Permanently") to keep Google happy.

Strange behaviour on android?

I have a strange effect on android:
When I navigate to /events, apparently a new intent is fired and I get asked which browser I want to use (since I have both chrome and dolphin, I don't have one assigned permanently)
The only link where this happens is /events.
Any idea about that?

Improve deployment of new homepage

We currently use a cronjob to look for new commits and then update dependencies and build the page. This is pretty error-prone and should be improved. Maybe we can even just copy the results from Travis CI over? Otherwise it may be a good idea to run our own CI (Jenkins?) and do it there.

Endless scrolling Probleme in Mobil

Auf chrome Android macht das endless scrolling auf /Bilder komische Dinge.
Nach ein paar Sekunden lädt scheinbar alles neu.
In Wirklichkeit wird der nächste Satz Bilder geladen.
Das geht ein paar mal so bis alle Bilder geladen sind.

Ich denke die Information, ob die Seite bis zum Ende gescrollt wurde wird beim Mobil Browser falsch interpretiert

Layout broken due to misformatted blogpost

Between

  • RGB2R v11 - Das Retro-Gaming-Event in Heidelberg
  • Sticken leicht gemacht - Workshop für Kinder
    (currently on page 2)

Haven't identified the blogpost that is causing the problems.

Add more information to /verein/spenden

Currently /verein/spenden only display our bank account. We should update that with information on why to donate and provide examples on what that money is going to be used for.

Mehrtägige Events

Mehrtägige Events werden aktuell so dargestellt:

screen shot 2015-01-28 at 04 50 51
(Das Event ist ganztägig am 21. und 22.)

Im JSON wird das anscheinend nur dadurch abgebildet, dass keine Zeitangabe vorhanden ist (nur der Tag; da es ganztägig ist), und dass das Event am 23. endet.

       [
          "dtend",
          {},
          "date",
          "2015-02-23"
        ],
        [
          "dtstart",
          {},
          "date",
          "2015-02-21"
        ],

Termine direkt verlinken

Es sollte eigentlich relativ einfach sein, eine Seite pro Event zu generieren. Zum direkt drauf verlinken.

Als Linkstruktur wäre vermutlich /event/[eventtitel]/[ical-uid] am sinnvollsten.

Anchor triggered on /kontakt/anfahrt

When you change to another step on /kontakt/anfahrt it seems that anchors are triggered although they should not. I noticed this because my screen (1280x800) scrolls down and covers the map partly as soon as I click on the pager buttons.

Switch to grunt-wiredep

I am unsure whether wiredep is already mature and all of the projects we're using support it.

Implement tag based whitelist filter for tumblr pictures

As discussed in #85 limit the pictures showcased in /bilder to a certain tag. Document this filter and give some hints which pictures should be whitelisted and which not. Whitelist an example set of pictures before merging this feature.

Paypal Link zeigt noch auf Github

um das zu fixen muss ich mal mit dem RZL paypal account einen button generieren.
Das Ding spuckt dann ein Stück HTML für ein POST form aus mit irgendwelchem hidden input kram.

Um nicht den häßlichen Button zu nutzen, können wir dann ein <a> nutzen. Etwa so:

<a href="#" onclick="document.getElementById('myform').submit(); return false;">PayPal</a>

Serve all libraries and possibly CSS locally

Currently e.g. leaflet.js is served from a CDN. We should aim at providing our homepage as a bundled package that provides everything needed. (Map tiles would not part of that, obviously.)

Same goes for #3.

Document how to add events

Reading the proxy rules in the gruntfile, it seems we are using fruux.com to manage events. This should be documented somewhere.

Questions in this context:

  • Do I need to authenticate?
  • If yes, is there a raumzeitlabor account that can be used or do I need to register individually?

Make sure build works on OS X

We know that our build works on Linux and FreeBSD, however our Apple friends have not managed to get it running so far.

I would like to know if this is a technical or skill problem.

Integrate with Travis CI

Integrate this with Travis CI to show latest build state and the state of upcoming pull requests.

Integrate font-awesome icons

The footer is very nice with all our accounts on all social media etc.
But it needs more visibility.

I suggest we incorporate fontawesome: http://fontawesome.io/icons/

by inserting
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

and then we can use e.g.:
<li><a href="https://twitter.com/raumzeitlabor" data-category="Footer" data-event="Footer: Twitter"><i class="fa fa-twitter"></i> Twitter</a></li>

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.