Giter VIP home page Giter VIP logo

airport-codes's Introduction

Airport Codes

A website that tries to make sense of those three-letter airport codes.

Contributing

If you'd like to add an airport or fix an error, please:

Working Locally

This repo has a lot of images, so may take some time to clone. If you'd like to speed up that process, you can clone only the latest (and not the entire commit history) by cloning with this command:

With SSH:

git clone --depth=1 [email protected]:lynnandtonic/airport-codes.git

With HTTPS:

git clone --depth=1 https://github.com/lynnandtonic/airport-codes.git

To run the site locally:

  • you will need node 8
    • if you use a tool like nodenv which respects .node-version this will be handled for you
    • otherwise will need to make sure that your shell is running node 8
  • run the following commands:
npm ci
npm run dev

Note: The web server may take 2-3 minutes to start.

Adding/Editing Airport Content

Airport content can be found in /data in individual files. Use the three-letter airport code as the filename (e.g. phx.json).

Content in each json file:

  • id = three-letter code (e.g. phx)
  • name = airport name (Sky Harbor International Airport)
  • city = primary city name (Phoenix)
  • state = state name, if applicable (Arizona)
  • stateShort = state abbreviation, if applicable (AZ)
  • country = country name (USA)
  • description = description, accepts markdown, use * for emphasis on letters
  • imageCredit = name of photographer
  • imageCreditLink = URL of photographer's Flickr page

You can also optionally add for aid in searching:

  • city2 = another city or country the airport may be known for

Adding a json file to /data will automatically render it. You do not need to manually add the path anywhere.

Images

  • Please use photos from Flickr that are licensed under Creative Commons.

  • If photos are not available on Flickr, please use Wikipedia with the same license.

  • Images should be named with this convention: code.jpg

  • To generate the 4 sizes of the image (large, medium, small, and card):

    • Save out the image as a JPG at large size (1500px wide) with the filename assets/images/large/code.jpg
    • Please optimize images (tinyjpg.com is a good tool to do that)
    • Run ./sharp.js assets/images/large/code.jpg
  • If you’d like to save out the image sizes manually, these are the sizes needed:

    • card - 220px height
    • small - 500px width
    • medium - 900px width
    • large - 1500px width
  • Add variable to /assets/globals/image-names.styl. The code must match the airport code. So if an image is named abq.jpg you would add 'abq': '', to the image-names.styl.

Editing Templates

Most site content is written in Pug templates which produce the site HTML.

The Pug files are located in /templates and /src/views/templates.

Note that these aren't markdown files and the syntax and whitespace you use does matter quite a bit. See the Pug documentation to see how to use Pug.

Editing CSS

This site uses Stylus for preprocessing. Please follow the established indentation and commenting patterns.

Stylus files are located in /assets.

Declaration Order

Please use the following loose declaration order:

  • Box-model properties
  • Display and Positioning
  • Backgrounds
  • Borders
  • Box Shadows
  • Fonts and Colors
  • Other

License

GNU General Public License v3.0

Because of the Creative Commons licensed images used on this site, any derivatives CAN NOT be for commercial or paid use.

<3

airport-codes's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

airport-codes's Issues

Add content/button to main view at the bottom of the airport list

Because not all airports will be included now (and possibly forever), when the user scrolls to the bottom of the list, let's add some content and a call-to-action. Something like:

Don't see your airport here? Find out more.

  • add content and button
  • button links to About page

Maybe we could do a contact form in a later release.

Last box in the list with call to action

  • Add a special view item that renders at the end of the airport list
  • Shows no matter the search criteria, so instead of a blank page they'd at least see this one item
  • Links to Contribute page
  • Content: "Looking for an airport that's missing? Learn more" or something that's better
  • Styling

Missing images

I moved around, deleted, and added a ton of images. Sorrryyy! And it looks like they aren't getting deployed. Could you take a look?

Add social share buttons on detail view

For each airport's detail page, add:

  • Twitter share button
  • Facebook share button

This would require (I think):

  • a permalink for each airport detail
  • either manually or dynamically generated message content

+DAL

"id": "dal",
"code": "dal",
"name": "Dallas Love Field",
"city": "Dallas",
"state": "Texas",
"stateShort": "TX",
"country": "USA",
"description": "Dallas Love Field is a city-owned public airport in Dallas Texas. It is named after Moss L. Love by the US Army in 1917. "

Back to main view from detail view

Two ways the user can go back to the main view from detail view:

  • by using the browser back button
  • by clicking the "Airport Codes" header link

About page

Add a new view for About:

  • navigate to view from main navigation and button call-to-action in #4
  • include some info about the project
  • include instructions on how to contribute and a link to GitHub
  • include some info about photographs and creative commons licenses
  • include some info about Lynn and Nick with contact info (if wanted)

Deployment

Deploy with a push to a specific branch using GitHub Pages

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.