Attention!

This is the first version of the CityLAB Berlin website, in use until September 2021. The repository is now archived and no longer maintained.

Original README follows:

CityLAB Site

The site is build upon Nuxt.js (a static site generator based on Vue.js) and Bulma (CSS framework) and is deployed on Netlify.

Project structure

Pages

Along with using Nuxt.js the project is structured in pages and components. Each .vue file inside the pages directory is rendered as https://yoururl.com/nameofvuefile.html. If you nest your files inside folders these paths are respected in the rendered site like https://yoururl.com/folder/nameofvuefile.html.

Components

The modular blocks that get rendered inside your pages can be found inside components/. If you want to add a new component keep in mind to pass the content and lang as a prop to Here an example of the basic structure of a component:

<template>
  <div class="wrapper">Your content here</div>
</template>

<script>
export default {
  name: 'name of component',
  props: ['content', 'lang'],
  ...
}
</script>
<style>
.wrapper {
  width: 100%;
  ...;
}
</style>

Content

The content of the site is sourced from a content.js file located at assets/ and a Google Spreadsheet (that contains multiple tables) which is accessible to the Team of the CityLAB some JSON files generated from our previously used Spreadsheet solution. If you plan to create new subpages for the site that:

Are created once ...

then add these to the content.js. This file is contains both english and german content. If you want to add new content for a created page – we call paragraph – add the content fields as an object nested inside the objects en and de like this:

en: {
  ...
  'paragraph': {
    title: 'your title here',
    description: 'your description here'
  },
  ...
},
de: {
  'paragraph': {
    title: 'Dein Titel hier',
    description: 'Deine Beschreibung hier'
  },
},
...

We pass the content object as a prop to your component and link the provided keys to the markup provided by your component. If we take the example from above the paragraph.vue component would look like this:

<template>
  <div class="wrapper">
    <h1 v-html="this.content[this.lang]['subpage']['title']"></h1>
    <p v-html="this.content[this.lang]['subpage']['description']"></p>
  </div>
</template>

<script>
export default {
  name: "Paragraph",
  props: ["content", "lang"],
};
</script>
<style>
.wrapper {
  width: 100%;
  ...;
}
</style>

If you want to provide content that is updated regulary (e.g. Newsletter, Projects, Events, Exhibits) you use the table inside the Google Spreadsheet for content that exists in two languages you find a _en and _de at the name of the table create/update the respective JSON file in static/data/spreadsheet-data/. In the following you find a description of exisiting keys for the existing JSON files:

projects_de.json and projects_en.json

Pls note: select TRUE for column visible to either enable or disable a project completely

events.json

exhibits_de.json and exhibits_en.json

newsletter.json

Assets

All imagery, logos etc. are located at static/images/.... If you want to add images to a project, event, exhibit or board put it in the specific folder and take the existing files as an example to add yours.

The directoryName has to match with the name you provided for your item at the google spreadsheet.

Beyond find the naming conventions to supply your page with hero or social_media images:

Events:

directoryName_hero.jpg
directoryName_social_media.jpg
directoryName_logo.jpg (optional)

Projects:

directoryName_hero.jpg
directoryName_social_media.jpg
directoryName_tile.jpg
directoryName_lazy_tile.jpg (1% sized image of tile that is rendered until the large tile is downloaded)
directoryName_logo.jpg (optional)

Hero images

Hero images should have a resolution of 1880px x 940px and are required to create a new event. If you don't have any software to crop your images you can use this Online Photo Editor.

Please use the following naming convention: dirname_hero.jpg.

Images for Social media

Social media images should have a resolution of 1086px x 573px and are required to create a new event. Please use the following naming convention: dirname_social_media.jpg.

Update site

This site is deployed by Netlify (Net-liff-eye). A push to master will automatically update the site and set live. If you have bigger updates, please create a new branch and merge them later.

Get started:

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate