Mountainwerks.org

on

Ember

What is it?

• 22 year diary
• Tracks apprenticeship
• To make friends
• Play with ideas

Title Text

Community

In 2010

2015, node wintersmith

My Values

• Non-commercial
• Archivable / simple
• Honesty
  • Fear
  • Mistakes

Goals

I wanted the site to look good on mobile

To learn about EmberJS!

To have a better mapping & JavaScript playground in general.

Details

• Node 6.12.2
• Ember-cli 2.5.0
• grunt-cli v1.2.0
  • (for deployment, for now)
• Wercker deployment (TBD)
  • Docker container
  • rsync-deploy to mountainwerks.org

Design choices

• Static site - no database
• Markdown for content
• Support existing workflows
  • Lightroom / Flickr
    • (though this has to change)
  • Google Earth

"Vitality" Theme

Cost a few bucks, but worth it

Structure

A trip is a route

// file: app/routes/sections/trip.js
import Ember from 'ember';

export default Ember.Route.extend({
    model: function (params) {
        return Ember.$.getJSON("/articles/trips/" + 
            params.slug + ".json").then(function (results) {
            console.log(results.description);
            return results;
        });
     }
});

List of trips

// file: app/routes/sections/trips.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function () {
    return Ember.RSVP.hash({
      trips: Ember.$.getJSON("/articles/trips/index.json")
          .then(function (results) {
        return results;
      }),
      locations: Ember.$.getJSON("/articles/trips/locations.json")
          .then(function (results) {
        return results;
      })
    });
  },

  setupController(controller, model) {
    this._super(...arguments);
    Ember.set(controller, 'trips', model.trips);
    Ember.set(controller, 'locations', model.locations);
  }
});

Broccoli pre-build

• Convert markdown to json
• Create indexes for articles
• Transform KML into json for locations

In ember-cli-build.js

Report Markdown

---
title: The Vajolet Towers and Punta Emma
date: 2011-6-27
layout: post
location: Vajolet Towers
---
Also posted on Summitpost.org 
[here](http://www.summitpost.org/vajolet-and-punta-emma/725512)

[![](http://farm4.static.flickr.com/3070/5872745355_d532767ce4.jpg)](http://www.flickr.com/photos/ripsawridge/5872745355/)

A fellow American, Pete, and I visited the Rosengarten area of the Dolomites
for a quick introduction to that beautiful group of spires. We had hoped
to get three full days of climbing in, but bad weather effectively canceled
the first day, and then the logistics of travel times and appointments
caused us to shorten the last day considerably. But still, a day and a
half of movement over good stone is nothing to sneeze at! We had a great
time and planned many future ascents.

...

Rendering report list

<div class="report-list">
  <table class="table table-stripped table-bordered">
    <thead>
      <tr> <td>Date</td> <td>Where</td> <td>Notes</td> </tr>
    </thead>
    <tbody>
      {{#each trips as |trip|}}
          <tr>
            <td>{{date-mmyyyy trip.date}}</td>
            <td>{{#link-to 'sections.trip' trip.slug}}
                  {{trip.title}}
                {{/link-to}}
            </td>
            <td>{{trip.blurb}}</td>
          </tr>
      {{/each}}
    </tbody>
  </table>
</div>

File app/templates/sections/trips.hbs

Leafletjs.com

Ember-leaflet

Broccoli pre-build

function transformGeoLocations(input_kml, output_json, trip_index) {                                                         
  var kml = fs.readFileSync(input_kml);                                                                                      
  var json = xml2json.toJson(kml, { object: true });                                                                         
  var maps = json.kml.Document.Folder.Folder; // the locations folder.                                                       
  // There should be several map folders.                                                                                    
  let data = [];                                                                                                             
  maps.forEach((map) => {                                                                                                      
    map.Placemark.forEach((placemark) => {                                                                                       
      let obj = {                                                                                                                  
        name: placemark.name,
        location: [parseFloat(placemark.LookAt.latitude),
                   parseFloat(placemark.LookAt.longitude)],
        map_name: map.name
      };
      // Associate the trips made at this location.
      let trips = trip_index.filter((trip) => {
        if (Array.isArray(trip.location)) {
          // A trip may contain multiple locations.
          return trip.location.includes(obj.name);
        }
        return trip.location == obj.name;
      });
      if (trips.length > 0) {
        // Why put a location on the map if there are no associated trips?
        obj.trips = trips;
        data.push(obj);
      }
    });
  });
  fs.writeFileSync(output_json, JSON.stringify(data, null, 1));
}

I could go on...

• and on and on... :p
• So just have a look if you like
• https://github.com/ripsawridge/ember-site
• http://www.mountainwerks.org