Code Monkey home page Code Monkey logo

road-trips's Introduction

Road Trips

This repository contains the source code and content of our travel blog.

All the source code is available under the MIT License.

The blog content is available under the Creative Commons BY-NC-ND 4.0 License, including:

  • texts in the src/components/trips.json files
  • photos in the dist/images/ folder

Build for production

yarn
yarn build

Run in development mode

yarn
yarn start

Create your own travel blog using road-trips

Road Trips has not been built with reusability in mind, as it contain both the source code and the data (text and photos) of my travel blog. You can still use it to build your own travel blog. Here's a few suggestions on how to get you started.

Fork and clone

  1. Fork this repository and clone your fork

  2. Install dependencies using yarn

  3. Get a Google Maps API key and replace mine in src/components/Map/Map.js

Now you should be able to run my travel blog locally using yarn start.

Optionnaly, you can configure an upstream remote pointing to this respository in order to keep your fork in sync with the original source code.

Add your trips

Trips can be added to the src/trips/trips.json file. It contains an array of objects, each of those object representing a trip.

[
  {
    // Trip 1
  },
  {
    // Trip 2
  }
]

Trip object specs

{
  // Trip id, used as trip's url. Must be unique.
  "id": "scotland",

  // Trip title and subtitle used in blog's header
  "title": "Scotland Road-Trip",
  "subtitle": "Mathilde & Clément's adventures in Scotland",

  // How the link to this trip appears on the global map
  "linkTitle": "Scotland, july 2018",

  // Coordinates on which the map is centered when opening this trip
  "mapCenter": {
    "lat": 56.98220,
    "lng": -4.89193
  },

  // Zoom level used when opening this trip
  "mapZoomLevels": {
    "desktop": 7,
    "mobile": 7
  },

  // An array of blog entries for this trip (see specs below)
  "entries": [
    {
      // Entry 1
    },
    {
      // Entry 2
    }
  ]
}

Entry object specs

{
  // Entry id. Used in entry's url and link (as a pin on the map)
  // Must be unique in the trip
  "id": "1",

  // Blog entry title, displayed in header and browser page title
  "title": "Surprise hiking at Holyrood Park",

  // Entry date, as a string
  "date": "July, 13",

  // Coordinates of where the entry's pin should appear on the map
  "coords": [
    "55.94529675574091",
    "-3.1670421592712046"
  ],

  // Blog entry content (as a single parapgraph)
  "content": "Nos valises à peine posées au Salisbury Green Hotel, nous décidons de terminer cettte première journée par une petite promenade de le parc voisin de Holyrood. Naïf que nous sommes : dans les parcs de la capitale — en tout cas à Holyrood Park —, il y a des montagnes et on peut randonner pendant des heures. Bien entendu, nous avions laissé les chaussures et l'équipement de randonnée dans les valises. Malgré cela, une belle balade, avec à la clé une vue panoramique sur Edimbourg, l'occasion idéale de faire connaissance avec la capitaine écossaise.",
  
  // Blog entry photos, as an array of object (see specs below)
  "photos": [
    {
      // Photo 1
    },
    {
      // Photo 2
    }
  ]
},

Photo object specs

Each high-res photo must be added in the dist/images/ directory with a path matching the following pattern: dist/images/{trip.id}/photos/{photo.id}.jpg

Each photo must have a thumbnail counterpart. Thumbs can be generated if sips is installed locally with yarn photos. Otherwise, they should be added to the dist/images/ directory with a patch matching the following pattern : dist/images/{trip.id}/thumbs/{photo.id}.jpg

{
  // Photo id. Must match image file name and be unique in trip.
  "id": "1-2",

  // Photo caption, displayed under the thumbnail in blog entry
  // Must be present but can be empty for photo without caption
  "caption": "Notre hôtel, le Salisbury Green, en bordure de Holyrood Park."
},

road-trips's People

Contributors

clemlatz avatar dependabot-preview[bot] avatar dependabot[bot] avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

road-trips's Issues

Entry format

Saw a card on this in the project this evening. I had the same thought earlier today. I'm thinking it would be nice to have some of the per-trip information in a YAML header at the top of the file with entries and photos at specified header levels. Something like:

---
id: scotland
title: Road-Trip en Écosse
subtitle: Mathilde & Clément à la recherche du poney perdu
linkTitle: Écosse, juillet 2018
mapCenter:
  lat: 56.98220
  lng: -4.89193
---

# Randonnée surprise à Holyrood Park
## 13 juillet
## coords
  - 55.94529675574091
  -  -3.1670421592712046

Nos valises à peine posées au Salisbury Green Hotel, nous décidons de terminer cettte première journée par une petite promenade de le parc voisin de Holyrood. Naïf que nous sommes : dans les parcs de la capitale — en tout cas à Holyrood Park —, il y a des montagnes et on peut randonner pendant des heures. Bien entendu, nous avions laissé les chaussures et l'équipement de randonnée dans les valises. Malgré cela, une belle balade, avec à la clé une vue panoramique sur Edimbourg, l'occasion idéale de faire connaissance avec la capitaine écossaise.

### 1-2
Notre hôtel, le Salisbury Green, en bordure de Holyrood Park.

...

Does that seem about right?

Unresolved paths when building locally

Hi @iwazaru! I came across this really nifty project today and wanted to give it a whirl. Apologies for bothering you with an issue if this is a side project and you aren't really looking to address outsider questions.

I followed the instructions in the README as best I could, but I'm having trouble building this site locally. The fist modification I made was to insert my own Google Maps API key in Maps.js but there were still a lot of images that still aren't loading successfully when I build the site with yarn build. When I try yarn start I get a 404 with a warning about a static path. A presented link takes me to a FAQ on static paths and how to resolve them but none of the solutions seemed to help. I'm not really a web dev, so at this point I'm a bit stuck.

Any thoughts?

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.