Add direct link to recipe file on GitHub

Fixes #24

Author: Fleker

backend/index.ts

@@ -82,11 +82,12 @@ app.get('/sample/cookbook', async (request: express.Request, response: express.R
     return;
 })
 
-function renderRecipe(req: express.Request, res: express.Response, stars: number, recipe: Recipe) {
+function renderRecipe(req: express.Request, res: express.Response, stars: number, recipe: Recipe, fileLocation: string) {
   res.render('pages/recipe', {
       recipeId: `g/${req.params.username}/${req.params.repo}`,
       data: JSON.stringify(recipe),
-      stars
+      stars,
+      fileLocation,
   });
 }
 
@@ -117,7 +118,7 @@ app.get('/g/:username/:repo', async (request: express.Request, response: express
         const recipeFetch = await fetch(github.getDefaultRecipeUrl(username, repo), {})
         const recipeData = await recipeFetch.json()
         await searchEng.storeResult(`${username}/${repo}`, recipeData)
-        renderRecipe(request, response, stars, recipeData)
+        renderRecipe(request, response, stars, recipeData, '.recipe.json')
     } catch(e) {
         console.warn(`Could not find default recipe file`, e)
         // Try to render the cookbook
@@ -153,7 +154,7 @@ app.get('/g/:username/:repo/:recipe', async (request: express.Request, response:
         const recipeData = await recipeFetch.text()
         const recipeJson = preprocessRecipeYaml(fileLocation, recipeData)
         await searchEng.storeResult(`${username}/${repo}/${recipe}`, recipeJson)
-        renderRecipe(request, response, stars, recipeJson)
+        renderRecipe(request, response, stars, recipeJson, fileLocation)
     } catch (e) {
         console.error(e)
         response.status(404).send(`Cannot find. Error: ${e}`)

backend/views/pages/recipe.ejs

@@ -10,7 +10,11 @@
         Loading recipe...
     </div>
 
-    <recipe-body recipe-id="<%= recipeId %>" recipe-data="<%= data %>" stars="<%= stars %>">
+    <recipe-body
+        recipe-id="<%= recipeId %>"
+        recipe-data="<%= data %>"
+        stars="<%= stars %>"
+        file="<%= fileLocation %>">
     </recipe-body>
 </body>
 </html>

frontend/recipe.js

@@ -87,7 +87,12 @@ class Recipe extends PolymerElement {
         </style>
       <title-bar stars='[[stars]]' recipe-id='[[recipeId]]' label='[[data.recipe]]'></title-bar>
       <styled-card>
-        <h1>[[data.recipe]]</h1>
+        <h1>
+          [[data.recipe]]
+          <a href="[[sourceUrl]]">
+            <iron-icon icon="code"></iron-icon>
+          </a>
+        </h1>
         <small>[[hashtags]]</small><br><br>
         <em>Recipe by [[data.author]]</em><br><br>
         Serves
@@ -209,6 +214,10 @@ class Recipe extends PolymerElement {
       'recipeData': {
         type: String,
         reflectToAttribute: true,
+      },
+      file: {
+        type: String,
+        reflectToAttribute: true,
       }
     };
   }
@@ -235,7 +244,8 @@ class Recipe extends PolymerElement {
       // GitHub
       this.author = recipeElements[1];
       this.recipeName = recipeElements[2];
-      this.forkLink = `https://github.com/${this.author}/${this.recipeName}`;
+      this.forkLink = `https://github.com/${this.author}/${this.recipeName}`
+      this.sourceUrl = `https://github.com/${this.author}/${this.recipeName}/blob/master/${this.file}`
     }
 
     this.data = JSON.parse(this.recipeData);