Skip to content
This repository has been archived by the owner on Jul 31, 2019. It is now read-only.

Commit

Permalink
Fix bug 918936 - Point resources at Thimble host
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbuck
jbuck committed Jan 17, 2014
1 parent eac4cbc commit 21808a5
Show file tree
Hide file tree
Showing 30 changed files with 348 additions and 339 deletions.
11 changes: 10 additions & 1 deletion app.js
View file
Expand Up @@ -46,7 +46,10 @@ var appName = "thimble",
middleware = require('./lib/middleware')(env),
errorhandling= require('./lib/errorhandling'),
make = makeAPI(env.get('make')),
nunjucksEnv = new nunjucks.Environment(new nunjucks.FileSystemLoader('views'), {
nunjucksEnv = new nunjucks.Environment([
new nunjucks.FileSystemLoader('views'),
new nunjucks.FileSystemLoader('learning_projects')
], {
autoescape: true
}),
routes = require('./routes')( utils, env, nunjucksEnv, appName ),
Expand Down Expand Up @@ -216,6 +219,12 @@ app.get('/projects/:name',
middleware.setDefaultPublishOperation,
routes.index );

app.get('/templated_projects/:project', function(req, res) {
res.render(req.params.project, {
hostname: env.get('HOSTNAME')
});
});

// project template lookups
app.get('/templates/:name',
middleware.setDefaultPublishOperation,
Expand Down
14 changes: 7 additions & 7 deletions learning_projects/BTWF_animated_gif.html
View file
Expand Up @@ -22,14 +22,14 @@
-->

<title>My Born Brave Animated GIFs</title>
<link href='/learning_projects/BTWF_animated_gif/btwf_animated.css' rel='stylesheet'>
<link href='{{ hostname }}/learning_projects/BTWF_animated_gif/btwf_animated.css' rel='stylesheet'>

</head>

<body>
<div class="outer">
<div class="content_wrapper">
<img class="logo" src="/learning_projects/BTWF_animated_gif/btwf_logo.png">
<img class="logo" src="{{ hostname }}/learning_projects/BTWF_animated_gif/btwf_logo.png">

<!--
It's pretty likely that you've seen an animated GIF before. An animated GIF is an image file made up of a series of progressive images that loop to create a sort of video animation. They can be added to web pages just like you would add any image file.
Expand All @@ -41,7 +41,7 @@
Note: If you are not familiar with Mozilla Popcorn Maker, learn the basics here - https://popcorn.webmaker.org/templates/basic/?savedDataUrl=tutorial.json
-->

<iframe src='http://popcorn.webmadecontent.org/fhb_' width='560' height='358' frameborder='0' mozallowfullscreen webkitallowfullscreen allowfullscreen></iframe>
<iframe src='https://popcorn.webmadecontent.org/fhb_' width='560' height='358' frameborder='0' mozallowfullscreen webkitallowfullscreen allowfullscreen></iframe>

<!--
Use the section below to create your very own gallery of animated GIFs. The comments below explain where to insert your GIF links and how to grow your gallery.
Expand All @@ -50,27 +50,27 @@
<header>My Gallery of Animated GIFs</header>

<div class="gallery_wrapper">
<img class="arrow" src="/learning_projects/BTWF_animated_gif/arrow.png">
<img class="arrow" src="{{ hostname }}/learning_projects/BTWF_animated_gif/arrow.png">

<!--
Add your first animated GIF to the gallery by replacing the <img> tag below. Start by uploading your animated GIF(s) to Flickr or another image sharing site. Once you've done that, from Flickr, choose the first GIF you want to add, click "Share" and select the option to "Grab the HTML/BBCode". Copy the code and paste it here to replace the existing <img> tag. Then remove the link <a> </a> tags surrounding the <img> tag so that the GIF is not clickable. Similar options will exist for other image sharing sites.
-->

<div class ="gallery"><img src="/learning_projects/BTWF_animated_gif/sharingkindness_anim.gif"></div>
<div class ="gallery"><img src="{{ hostname }}/learning_projects/BTWF_animated_gif/sharingkindness_anim.gif"></div>

<!--
Add your second animated GIF here by replacing the URL in the src value of the <img> tag with your own.
-->

<div class ="gallery"><img src="/learning_projects/BTWF_animated_gif/actofbravery_anim.gif"></div>
<div class ="gallery"><img src="{{ hostname }}/learning_projects/BTWF_animated_gif/actofbravery_anim.gif"></div>

<!--
Here comes the third animated GIF. You are having fun with this aren't you? Replace the URL in the src value of the <img> tag with your own.
When you've completed changing the first 3 animated GIFs in this row, copy the code starting with <div> and ending with </div> and paste it right below the ending </div> to start a second row of animated GIFs. Repeat this process to continue to build your GIF gallery.
-->

<div class ="gallery"><img src="/learning_projects/BTWF_animated_gif/brave_anim.gif"></div>
<div class ="gallery"><img src="{{ hostname }}/learning_projects/BTWF_animated_gif/brave_anim.gif"></div>

</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions learning_projects/BTWF_campaign.html
View file
Expand Up @@ -21,12 +21,12 @@
-->

<title>Born Brave Manhattan</title>
<link href='/learning_projects/BTWF_campaign/btwf_campaign.css' rel='stylesheet'>
<link href='{{ hostname }}/learning_projects/BTWF_campaign/btwf_campaign.css' rel='stylesheet'>

</head>

<body>
<img src="/learning_projects/BTWF_campaign/btwf_logo.png">
<img src="{{ hostname }}/learning_projects/BTWF_campaign/btwf_logo.png">

<div class="content_wrapper">

Expand All @@ -35,7 +35,7 @@
-->

<header>Kind and Brave Resources in <strong>Manhattan</strong></header>
<img src="/learning_projects/BTWF_campaign/btwf_stamp.png" class="stamp">
<img src="{{ hostname }}/learning_projects/BTWF_campaign/btwf_stamp.png" class="stamp">

<div class="left">

Expand Down Expand Up @@ -72,9 +72,9 @@
-->

<div class="social">
<a href="Facebook link here"><img src="/learning_projects/BTWF_campaign/btwf_fb.png"></a>
<a href="Twitter link here"><img src="/learning_projects/BTWF_campaign/btwf_twitter.png"></a>
<a href="Email link here"><img src="/learning_projects/BTWF_campaign/btwf_email.png"></a>
<a href="Facebook link here"><img src="{{ hostname }}/learning_projects/BTWF_campaign/btwf_fb.png"></a>
<a href="Twitter link here"><img src="{{ hostname }}/learning_projects/BTWF_campaign/btwf_twitter.png"></a>
<a href="Email link here"><img src="{{ hostname }}/learning_projects/BTWF_campaign/btwf_email.png"></a>
</div>

</div>
Expand All @@ -92,7 +92,7 @@
</p>@bbnmember</div>
<!-- End embed code for tweet -->

<div class="twittericon"><img src="/learning_projects/BTWF_campaign/btwf_twitter_icon.png"></div>
<div class="twittericon"><img src="{{ hostname }}/learning_projects/BTWF_campaign/btwf_twitter_icon.png"></div>
</div>

<div class="middleright">
Expand All @@ -105,7 +105,7 @@
Note: Crop or resize the image to a width of 250px wide so it properly fits the existing layout on this webpage.
-->

<img src="/learning_projects/BTWF_campaign/btwf_image.png" width="250px">
<img src="{{ hostname }}/learning_projects/BTWF_campaign/btwf_image.png" width="250px">
</div>

<div class="bottomright">
Expand Down
16 changes: 8 additions & 8 deletions learning_projects/BTWF_local_meetup.html
View file
Expand Up @@ -21,12 +21,12 @@
-->

<title>Be Myself T-Shirt Day by Brooklyn Nation</title>
<link href='/learning_projects/BTWF_local_meetup/btwf_local.css' rel='stylesheet'>
<link href='{{ hostname }}/learning_projects/BTWF_local_meetup/btwf_local.css' rel='stylesheet'>

</head>

<body>
<img src="/learning_projects/BTWF_local_meetup/btwf_logo.png">
<img src="{{ hostname }}/learning_projects/BTWF_local_meetup/btwf_logo.png">

<div class="content_wrapper">

Expand All @@ -38,7 +38,7 @@

<header>Be Myself <strong>T-Shirt</strong> Day</header>
<h5>Organized by the Brooklyn Nation</h5>
<img src="/learning_projects/BTWF_local_meetup/btwf_stamp.png" class="stamp">
<img src="{{ hostname }}/learning_projects/BTWF_local_meetup/btwf_stamp.png" class="stamp">

<!--
This is where you can share the details of your event including the time and day. Replace the text within the paragraph <p></p> tags. And add line breaks using the <br> tag. (Note: The <br> tag does not have a closing tag. And can be placed just about anywhere. Use two <br> tags in a row to get a blank linespace.) For now, just ignore the <div> tags.
Expand All @@ -58,9 +58,9 @@ <h5>Organized by the Brooklyn Nation</h5>
Leverage the power of social networks to spread the word. Work with your Born Brave Nation members to create a local Facebook page and Twitter account to keep the community tuned into ongoing activities. Also add a contact email for people to get in touch. Link to these in the respective <a> tags below.
-->
<div class="social">
<a href="Facebook link here"><img src="/learning_projects/BTWF_local_meetup/btwf_fb.png"></a>
<a href="Twitter link here"><img src="/learning_projects/BTWF_local_meetup/btwf_twitter.png"></a>
<a href="Email link here"><img src="/learning_projects/BTWF_local_meetup/btwf_email.png"></a>
<a href="Facebook link here"><img src="{{ hostname }}/learning_projects/BTWF_local_meetup/btwf_fb.png"></a>
<a href="Twitter link here"><img src="{{ hostname }}/learning_projects/BTWF_local_meetup/btwf_twitter.png"></a>
<a href="Email link here"><img src="{{ hostname }}/learning_projects/BTWF_local_meetup/btwf_email.png"></a>
</div>
</div>

Expand All @@ -71,7 +71,7 @@ <h5>Organized by the Brooklyn Nation</h5>
-->

<div class="topright">
<iframe width="400" height="225" src="http://www.youtube.com/embed/V_xp6AhwB_Y?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="400" height="225" src="https://www.youtube.com/embed/V_xp6AhwB_Y?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<div class="bottomright">
Expand All @@ -85,7 +85,7 @@ <h5>Organized by the Brooklyn Nation</h5>
</p>@bbnmember</div>
<!-- End embed code for tweet -->

<div class="twittericon"><img src="/learning_projects/BTWF_local_meetup/btwf_twitter_icon.png"></div>
<div class="twittericon"><img src="{{ hostname }}/learning_projects/BTWF_local_meetup/btwf_twitter_icon.png"></div>
</div>
</div>
</div>
Expand Down
50 changes: 25 additions & 25 deletions learning_projects/avataromatic.html
View file
Expand Up @@ -16,9 +16,9 @@
<head>
<meta charset="utf-8">
<title>Avatar-o-Matic</title>

<style>
/*
/*
Everything contained within this <style> tag is called CSS and it is used to define the presentational components of the page, like fonts, colors, containers, positioning, etc. Remember that in CSS, comments are enclosed in '/*'. You can edit this CSS to change the background of your avatar.
*/

Expand All @@ -38,30 +38,30 @@
*/

.avatar01 {
background-image: url(/learning_projects/avataromatic/blackstripes.png);
background-image: url({{ hostname }}/learning_projects/avataromatic/blackstripes.png);
}

.avatar02 {
background-image: url(/learning_projects/avataromatic/body_green_top.png), url(/learning_projects/avataromatic/body_green-bottom.png);
background-image: url({{ hostname }}/learning_projects/avataromatic/body_green_top.png), url({{ hostname }}/learning_projects/avataromatic/body_green-bottom.png);
background-position: top center, bottom center;
}

.avatar03 {
background-image: url(/learning_projects/avataromatic/body_pink_top.png), url(/learning_projects/avataromatic/body_pink_bottom.png);
background-image: url({{ hostname }}/learning_projects/avataromatic/body_pink_top.png), url({{ hostname }}/learning_projects/avataromatic/body_pink_bottom.png);
background-position: top center, bottom center;
}

.avatar04 {
background-image: url(/learning_projects/avataromatic/bluestripes.png);
background-image: url({{ hostname }}/learning_projects/avataromatic/bluestripes.png);
}

.avatar05 {
background-image: url(/learning_projects/avataromatic/body_yellow_top.png), url(/learning_projects/avataromatic/body_yellow_bottom.png);
background-image: url({{ hostname }}/learning_projects/avataromatic/body_yellow_top.png), url({{ hostname }}/learning_projects/avataromatic/body_yellow_bottom.png);
background-position: top center, bottom center;
}

.avatar06 {
background-image: url(/learning_projects/avataromatic/greenstripes.png);
background-image: url({{ hostname }}/learning_projects/avataromatic/greenstripes.png);
}

body {
Expand All @@ -86,12 +86,12 @@
a {
color: yellow;
}

li {
list-style-position: inside;
}
</style>

<!-- NOTE: The style tag is closed above so we are back to the HTML -->

</head>
Expand All @@ -102,40 +102,40 @@
Choose a set of eyes and a mouth! Each <div> below includes different eye and mouth images. Find the ones you like, and then move the appropriate <img> tags into the <div> that has the avatar number you selected above. So if you selected "avatar06" above, copy and paste the eye and mouth <img> tags that you selected into that <div>. Delete or comment out the other divs so that you only see your avatar! To comment in HTML, surround the entire element with the ! and - tags you see in this comment.
-->
<div class="avatar01">
<img class="eyes" src="/learning_projects/avataromatic/eyes1.png"/>
<img class="mouth" src="/learning_projects/avataromatic/moustache1.png"/>
<img class="eyes" src="{{ hostname }}/learning_projects/avataromatic/eyes1.png"/>
<img class="mouth" src="{{ hostname }}/learning_projects/avataromatic/moustache1.png"/>
</div>

<div class="avatar02">
<img class="eyes" src="/learning_projects/avataromatic/eyes2.png"/>
<img class="mouth" src="/learning_projects/avataromatic/moustache2.png"/>
<img class="eyes" src="{{ hostname }}/learning_projects/avataromatic/eyes2.png"/>
<img class="mouth" src="{{ hostname }}/learning_projects/avataromatic/moustache2.png"/>
</div>

<div class="avatar03">
<img class="eyes" src="/learning_projects/avataromatic/eyes3.png"/>
<img class="mouth" src="/learning_projects/avataromatic/mouth3.png"/>
<img class="eyes" src="{{ hostname }}/learning_projects/avataromatic/eyes3.png"/>
<img class="mouth" src="{{ hostname }}/learning_projects/avataromatic/mouth3.png"/>
</div>

<div class="avatar04">
<img class="eyes" src="/learning_projects/avataromatic/eyes4.png"/>
<img class="mouth" src="/learning_projects/avataromatic/mouth4.png"/>
<img class="eyes" src="{{ hostname }}/learning_projects/avataromatic/eyes4.png"/>
<img class="mouth" src="{{ hostname }}/learning_projects/avataromatic/mouth4.png"/>
</div>

<div class="avatar05">
<img class="eyes" src="/learning_projects/avataromatic/eyes5.png"/>
<img class="mouth" src="/learning_projects/avataromatic/mouth5.png"/>
<img class="eyes" src="{{ hostname }}/learning_projects/avataromatic/eyes5.png"/>
<img class="mouth" src="{{ hostname }}/learning_projects/avataromatic/mouth5.png"/>
</div>

<div class="avatar06">
<img class="eyes" src="/learning_projects/avataromatic/eyes6.png"/>
<img class="mouth" src="/learning_projects/avataromatic/mouth6.png"/>
<img class="eyes" src="{{ hostname }}/learning_projects/avataromatic/eyes6.png"/>
<img class="mouth" src="{{ hostname }}/learning_projects/avataromatic/mouth6.png"/>
</div>

</div>
<!--
Congrats on building your avatar! You can change your tagline by changing the text within the <h1> tag. <h1> is used for headings - the "h" stands for header and the "1" stands for most important (versus h2, h3, etc.). Try a different headline for your avatar.
-->

<div class="webmaker">
<h1> I AM A __________ WEBMAKER</h1>

Expand All @@ -148,13 +148,13 @@ <h1> I AM A __________ WEBMAKER</h1>
<li>Add a list of things you want to make</li>
<li>Show us a project that you have made, add a <a href="http://www.mozilla.org">link</a></li>
</ul>

<!-- =======================================================================
As you share your work and pictures remember that even though there are many fascinating things to do and explore online, just like in the offline world, it’s important to keep yourself safe and secure. When creating a webpage, you want to make sure that you don't share things like your address or your phone number. To stay updated on the best practices when it comes to sharing your data online and browsing safely watch this video with 5 tips from Google http://www.youtube.com/watch?feature=player_embedded&v=o5wC826_Z18.
=========================================================================== -->
</div>

<!--
<!--
Congrats on completing your Webmaker avatar page! You can still go back and change things - that's the beauty of the Web. You might have missed it, but you actually learned some stuff in this project. You now know how to do comments in HTML and CSS, manipulate some CSS, work with headers (the <h1> tag), use lists (<ul> and <ol>) and bullets (<li>), add hyperlinks to text (<a> tag) and even a little about Web safety and privacy. Way to go, Webmaker!
-->
</body>
Expand Down

0 comments on commit 21808a5

Please sign in to comment.