Giter Club home page Giter Club logo

austinconventioncenter.com's Introduction

About

This is the new website of the Austin Convention Center Department, currently under active development. The project is being led by a team in the City's Design, Technology, and Innovation Fellows program.

We're using sprints, and you're welcome to check out our Trello board.

Architecture

This project implements a decoupled CMS, which you can read about in our Medium post. It uses Contentful as the content editor and Jekyll as the static site generator.

The same source builds both austinconventioncenter.com and palmereventscenter.com using content from separate Contentful spaces. Site-specific files in _config/ extend the base configuration found in _config.yml.

We continuously deploy the static sites to Amazon S3 by using s3_website on CircleCI. The Rakefile includes CI-specific build and deploy commands. We also use Heroku Scheduler to trigger nightly CI builds that ensure imported calendar events are kept current.

Getting Started

  1. Clone the repo:

     $ git clone https://github.com/cityofaustin/austinconventioncenter.com.git
    
  2. Install deps (requires npm version 3.x; repeat when the Gemfile or package.json changes):

     $ bundle install
     $ npm install
    
  3. Import Contentful data:

    Using the values found in Contentful's APIs tab, set these variables in your local checkout using a tool like direnv (add .envrc to your global gitignore):

         export CONTENTFUL_ACC_SPACE_ID='TBD'
         export CONTENTFUL_ACC_ACCESS_TOKEN='TBD'
         export CONTENTFUL_PEC_SPACE_ID='TBD'
         export CONTENTFUL_PEC_ACCESS_TOKEN='TBD'
    

    Then run rake contentful (or rake contentful:acc and rake contentful:pec).

  4. Import calendar data (from data.austintexas.gov's Socrata API):

     $ rake calendar
    
  5. Serve the Jekyll site(s):

    $ foreman start acc, $ foreman start pec, or just $ foreman start for both.

Contributing

Refer to the Developer Guide, particularly the Git workflow.

Working with Contentful

Start with understanding the concepts outlined in Contentful's developer docs.

Importing content

Contentful entries are made available to Jekyll using the official jekyll-contentful-data-import gem, which is used by $ rake contentful commands to download entries into _data/.

Rendering content

A Jekyll generator in _plugins/ creates Collections and Documents from the Section and Page content types.

Templates and layouts render Contentful attributes using page.contentful in Liquid. The front matter defaults in _config.yml define the layouts used to render pages in a given collection and by default.

For each page, the generator also looks in _templates for a file with the same URL (i.e. path, by default), and renders that file, if found, instead of the default layout. A custom template for a page with the URL /example/ would be _templates/example.html.

To render specific content outside of a page (such as a particular menu), site.contentful exposes the contents of the entire data file, and plays nicely with Jekyll's where filters. See an example in _includes/header.html.

Syncing the content model from ACC to PEC

Edit the content model in the ACC space only, and then use Contentful's Space Sync tool to sync it to the Palmer space. Example command (requires CONTENTFUL_MANAGEMENT_ACCESS_TOKEN to be set in your local env):

contentful-space-sync --content-model-only \
  --source-space=$CONTENTFUL_ACC_SPACE_ID \
  --destination-space=$CONTENTFUL_PEC_SPACE_ID \
  --source-delivery-token=$CONTENTFUL_ACC_ACCESS_TOKEN \
  --destination-delivery-token=$CONTENTFUL_PEC_ACCESS_TOKEN \
  --management-token=$CONTENTFUL_MANAGEMENT_ACCESS_TOKEN

Deploying

Each site deploys automatically when new commits are added to master or when data in their respective Contentful spaces is updated. Deploy progress and output can be viewed in CircleCI.

Credits

austinconventioncenter.com's People

Contributors

jcbpl avatar mattlangan avatar

Watchers

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