Giter Site home page Giter Site logo

website-1's Introduction


☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io


greenkeeper-website

Build Status

This is a harp.js project. All assets are automatically compiled by harp, there’s no build pipeline. The site is bilingual, since harp doesn’t explicitly support this, there are some extra things to be aware of, see the Development Guidelines section below.

⚠️ If you change content, be sure to change it in both languages. This includes navigation and footers.

Local Development

Running it locally

To run the server with livereload/browsersync:

npm run server

⚠️ Note that browsersync causes a flash of unstyled content when refreshing, this is something weird with Typekit, which is where we get Futura from. You can ignore this as it only happens in dev.

To compile the site into www/ for looking at the output or serving that statically (without the FOUC, for example):

npm run build

and to serve the previously built version of the site from www/:

npm start

Development Guidelines

The structure of the site is defined in the two _data.json files, one in root for the english site, one in /de for the german one. The two versions of the site need their own translated copies of each partial they use, this is why some of the partials are stored in /en/partials and /de/partials, as opposed to the content, which lives in / for english and /de for german.

Any .ejs file that contains text should exist in both languages, except _customers.ejs, where the only text is company names that don’t need to be translated. This means that each language has its own _header.ejs and _footr.ejs partial, so if you change the navigation, you have to change that twice, too.

The _data.json files define which pages get rendered under which URL, and can define some vars for use in that page, take, for example, the german FAQ page entry:

  "haeufige-fragen": {
    "pageTitle": "Häufig gestellte Fragen",
    "bodyClass": "faq gk-saas",
    "locale": "de",
    "otherLanguageURL": "/faq"
  },
  • pageTitle is used in _layout.js, which is the generic container template for all other templates.
  • bodyClass is the same. These two are variables because <head> and <body> live in _layout.js and not in the individual templates.
  • locale is the local shortcode for the language that page is in. This is super redundant, but also the path of least resistance.
  • otherLanguageURL is the url of the same page in the other language. There is probably a super-elaborate way to do this programmatically, but since we only ever want to support two languages, this is fine 🐶🔥 for now. This is the URL that gets used in each languages’s _header.ejs partial to render the language switching link. If we had identical URLs for both languages, we wouldn’t need this, but it’s more consistent this way.

⚠️ If one of these is missing or wrong, the corresponding page won’t render, so please check each page you’ve changed the data for.

⚠️ All URLS must be absolute ☝️

ℹ️ There’s some UI text inside CSS pseudo elements that we can’t translate, for the image enlarge on tap, for example.

Deployment

Just merge to master 👍

This runs travis, which runs deploy.js, which publishes a newly-built version of www to the gh-pages branch on GitHub.

website-1's People

Contributors

espy avatar janl avatar boennemann avatar realtin avatar hulkoba avatar greenkeeper[bot] avatar christophwitzko avatar finnp avatar knpwrs avatar mattyfresh avatar nikolas avatar nexdrew avatar tarungarg546 avatar travi avatar loilo avatar leo avatar koddsson avatar flaki avatar igmat avatar gr2m avatar davvidbaker avatar abought avatar

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.