diff --git a/website/static/welcome/step3.png b/website/static/welcome/step3.png new file mode 100644 index 0000000..91adcbf Binary files /dev/null and b/website/static/welcome/step3.png differ diff --git a/website/static/data/docsite_example.json b/website/static/welcome/welcome.json similarity index 68% rename from website/static/data/docsite_example.json rename to website/static/welcome/welcome.json index 2189c0c..e62885b 100644 --- a/website/static/data/docsite_example.json +++ b/website/static/welcome/welcome.json @@ -5,36 +5,35 @@ "headline":"Welcome to TimelineJS", "type":"default", "startDate":"1888", - "text": "

TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.

Click on the arrow to the right to learn more.

", + "text": "

TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.

You're looking at an example of one right now.

Click on the arrow to the right to learn more.

", "asset": { "media":"http://2.bp.blogspot.com/-dxJbW0CG8Zs/TmkoMA5-cPI/AAAAAAAAAqw/fQpsz9GpFdo/s1600/voyage-dans-la-lune-1902-02-g.jpg", "credit":"", "caption":"" }, "date": [ - { - "startDate":"1980,1,18", - "headline":"Google Map with no text", - "text":"", - "asset": + { + "startDate":"1851", + "headline":"It's Easy to Make Your Own Timeline", + "text":"The TimelineJS Embed Generator makes it easy to add a timeline to your own site. Just copy our Google Spreadsheet template, add your events as rows in the spreadsheet, and use our generator tool to generate the HTML you need to add to your site.", + "asset": { - "media":"http://maps.google.com/maps?q=chicago&hl=en&sll=41.874961,-87.619054&sspn=0.159263,0.351906&t=t&hnear=Chicago,+Cook,+Illinois&z=11", + "media":"/static/welcome/step3.png", "credit":"", - "caption":"" + "caption":"Screenshot from TimelineJS Embed Generator tool (see below)" } }, - { - "startDate":"1979,1,18", - "headline":"Google Map", - "text":"Just add the link to the map in the media field.", + { + "startDate":"1871", + "headline":"Illustrate your Timeline with photos, videos, tweets and more.", + "text":"Timeline can automatically pull in photos, videos from YouTube or Vimeo, tweets, wikipedia entries, and many other media types to help tell your story.", "asset": { - "media":"http://maps.google.com/maps?q=New+York,+NY&hl=en&ll=40.721242,-73.987427&spn=0.164187,0.365295&sll=40.722673,-73.993263&sspn=0.082092,0.182648&oq=New+Y&hnear=New+York&t=m&z=11", + "media":"", "credit":"", - "caption":"" + "caption":"Screenshot from TimelineJS Embed Generator tool (see below)" } }, - { "startDate":"1899", "headline":"YouTube video", @@ -48,30 +47,30 @@ }, { "startDate":"1902", - "headline":"Wikipedia", - "text":"Wikipedia is now supported. Just add a link to the Wikipedia entry.", + "headline":"YouTube with no text", + "text":"", "asset": { - "media":"http://en.wikipedia.org/wiki/A_Trip_to_the_Moon", - "credit":"", - "caption":"" + "media":"http://youtu.be/7JDaOOw0MEE", + "credit":"Georges Méliès", + "caption":"A Trip to the Moon / Le Voyage dans la lune" } }, { - "startDate":"1905", - "headline":"YouTube with no text", - "text":"", + "startDate":"1902", + "headline":"Wikipedia", + "text":"Add a link to a Wikipedia entry in the media field to show an excerpt alongside your text.", "asset": { - "media":"http://youtu.be/SvmM_YSnWX8", - "credit":"Georges Méliès", - "caption":"Le juif errant" + "media":"http://en.wikipedia.org/wiki/A_Trip_to_the_Moon", + "credit":"", + "caption":"" } }, { "startDate":"1950,2,7", "headline":"Blockquote", - "text":"This is an example of a blockquote.
<blockquote>“Just use html blockquotes in the media field.”</blockquote>", + "text":"This is an example of a blockquote.
<blockquote>“Just use html blockquotes in the media field.”</blockquote>", "asset": { "media":"
“You have brains in your head. You have feet in your shoes. You can steer yourself in any direction you choose. You're on your own, and you know what you know. And you are the guy who'll decide where to go.”
", @@ -89,6 +88,28 @@ "credit":"w3schools", "caption":"http://w3schools.com" } + }, + { + "startDate":"1979,1,18", + "headline":"Google Map", + "text":"Google Maps are easy too. Just add the link to the map in the media field.", + "asset": + { + "media":"http://maps.google.com/maps?hl=en&sll=42.05083,-87.674194&sspn=0.020170947570668576,0.036220713642592585&z=15", + "credit":"", + "caption":"" + } + }, + { + "startDate":"1980,1,18", + "headline":"Google Map with no text", + "text":"", + "asset": + { + "media":"http://maps.google.com/maps?q=chicago&hl=en&sll=41.874961,-87.619054&sspn=0.159263,0.351906&t=t&hnear=Chicago,+Cook,+Illinois&z=11", + "credit":"", + "caption":"" + } }, { "startDate":"1985,2,7", @@ -112,16 +133,25 @@ "caption":"March to work." } }, - { - "startDate":"2012,1,18", - "headline":"SoundCloud ", - "text":"Just add a link to the track in the media field.", + "startDate":"2001,2,10", + "headline":"A Tweet", + "text":"To add a tweet, just paste a link to the tweet stats in the media field. Example: http://twitter.com/alykat/status/164184609519697920", "asset": { - "media":"http://soundcloud.com/beastieboys/make-some-noise", + "media":"http://twitter.com/alykat/status/164184609519697920", "credit":"", - "caption":"R.I.P. MCA." + "caption":"" + } + }, + { + "startDate":"2002,12,10", + "headline":"Yet Another Tweet", + "asset": + { + "media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", + "credit":"", + "caption":"" } }, { @@ -136,22 +166,23 @@ } }, { - "startDate":"2001,2,10", - "headline":"A Tweet", - "text":"To add a tweet, just paste a link to the tweet stats in the media field. Example: http://twitter.com/alykat/status/164184609519697920", + "startDate":"2012,1,18", + "headline":"SoundCloud ", + "text":"Just add a link to the track in the media field.", "asset": { - "media":"http://twitter.com/alykat/status/164184609519697920", + "media":"http://soundcloud.com/beastieboys/make-some-noise", "credit":"", - "caption":"" + "caption":"R.I.P. MCA." } }, { - "startDate":"2002,12,10", - "headline":"Yet Another Tweet", + "startDate":"2013,10,01", + "headline":"Get started!", + "text":"Use the generator form to make your first timeline now.", "asset": { - "media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", + "media":"", "credit":"", "caption":"" } diff --git a/website/templates/_demo.html b/website/templates/_demo.html index f69e057..6cb81d4 100644 --- a/website/templates/_demo.html +++ b/website/templates/_demo.html @@ -10,7 +10,7 @@ width: "100%", height: "100%", debug: false, - source: 'static/data/docsite_example.json', + source: 'static/welcome/welcome.json', font: 'NewsCycle-Merriweather', }; diff --git a/website/templates/_examples.html b/website/templates/_examples.html index aa5a589..8a54cb7 100644 --- a/website/templates/_examples.html +++ b/website/templates/_examples.html @@ -1,5 +1,5 @@
-

Examples {{ static_url }}

+

Examples

Have you made a timeline? Let us know, and we might feature it here.

diff --git a/website/templates/_make.html b/website/templates/_make.html index ab80a82..a3cd9f9 100644 --- a/website/templates/_make.html +++ b/website/templates/_make.html @@ -13,7 +13,7 @@

1

Create your spreadsheet

-

Build a new Google Spreadsheet using our template. Drop dates, text and links to media into the appropriate columns.

+

Build a new Google Spreadsheet using our template. Drop dates, text and links to media into the appropriate columns. Note: Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.

Google Spreadsheet Template

@@ -42,7 +42,7 @@

Copy/paste spreadsheet URL into the generator box below

- +

Make sure you've published it.