commit: 750d2b8dd6c4e66fa17ccce0b38c403fd170559d
parent a4d7ad2517a01f6611f67965c3472714b1c72be8
Author: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Sat, 10 Mar 2018 10:03:16 +1300
Improved page routing
Diffstat:
12 files changed, 105 insertions(+), 47 deletions(-)
diff --git a/index.html b/index.html
@@ -23,6 +23,7 @@
<script src="scripts/templates/page.js"></script>
<script src="scripts/templates/home.js"></script>
<script src="scripts/templates/search.js"></script>
+ <script src="scripts/templates/index.js"></script>
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/main.css"/>
diff --git a/links/main.css b/links/main.css
@@ -26,10 +26,14 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view #core #content #instructions { margin-bottom:30px; }
#view #core #content #instructions list { margin-bottom:30px; }
-#view #core #content #instructions list ln { max-width:700px; margin-bottom:15px; font-size:18px; padding-left:30px; }
+#view #core #content #instructions list ln { max-width:700px; margin-bottom:15px; font-size:18px; padding-left:30px; line-height: 24px}
#view #core #content #instructions list ln:before { content:"•"; position: absolute; left:0px; }
#view #core #content #instructions list ln a { font-weight: bold }
#view #core #content #instructions note { max-width:700px; margin-bottom:15px; font-size:18px; padding-left:30px; display: block; font-style: italic; font-size:14px; margin-bottom:30px; }
+#view #core #content #instructions a { font-weight: bold; }
+#view #core #content #instructions a:hover { text-decoration: underline; cursor: pointer }
+#view #core #content #instructions i { background: #eee;font-size: 12px;text-transform: uppercase;padding: 5px 7.5px;display: inline;font-weight: bold;border-radius: 3px;color:#333 }
+#view #core #content #instructions code { font-size: 12px;text-transform: uppercase;padding: 3px 5.5px;display: inline;font-weight: bold;border-radius: 3px;border:2px solid black;}
#view #core #content list.ingredients { display: inline-block; margin-right:15px; font-size:0; padding-left:20px; }
#view #core #content list.ingredients h3 { margin-left:-20px; }
@@ -46,4 +50,9 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view #core #related ln:nth-child(1), #view #core #related ln:nth-child(2) { margin-right:15px;}
#view #core #related ln a.photo { border-radius: 2px; display: block; height:160px; background-size:cover; margin-bottom:15px; }
#view #core #related ln t.name { display: block; font-family: 'alte_haas_grotesk_bold'; font-size:16px; margin-bottom: 5px; text-transform: capitalize; line-height: 30px }
-#view #core #related ln t.details { display: block; font-family: 'alte_haas_grotesk_regular'; font-size:14px; text-transform: capitalize; line-height: 30px; line-height: 18px }-
\ No newline at end of file
+#view #core #related ln t.details { display: block; font-family: 'alte_haas_grotesk_regular'; font-size:14px; text-transform: capitalize; line-height: 30px; line-height: 18px }
+
+#view #footer { display: block; padding:15px 0px;font-family: 'alte_haas_grotesk_bold'; font-size:12px; margin-top:60px; }
+#view #footer a:hover { text-decoration: underline; cursor: pointer }
+
+
diff --git a/riven.html b/riven.html
@@ -24,6 +24,7 @@
<script src="scripts/templates/recipe.js"></script>
<script src="scripts/templates/ingredient.js"></script>
<script src="scripts/templates/page.js"></script>
+ <script src="scripts/templates/index.js"></script>
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/riven.fonts.css"/>
diff --git a/scripts/database/pages.js b/scripts/database/pages.js
@@ -2,10 +2,22 @@ DATABASE.pages = `
ABOUT
BREF : I started {*Grim Grains*} once I realized that food could be artistically fulfilling. Cooking became an creative output, while the blog allowed me to document my progress and keep track of the things I made. The blog is about being artistically creative with food and colour. Colours for added nutrition, for contrast and for visual harmony. Most of my recipes are also nut-free and plant-based.
LONG
+ * Rekka
& This website showcases some of my favourite creations, along with hand draw illustrations for {{each of their ingredients|ingredients-list}}.
% pages/about.png
& I am {{Rekka Bellum|http://kokorobot.ca/}}, an illustrator, living on a small sailboat somewhere on the shores of the Pacific Ocean.
& You can contact me on my twitter {{@grimgrains|http://twitter.com/grimgrains}}.
+ * Copyright policy
+ & You may adapt one of my grim creations, but be sure to link back to the original recipe and to give proper credit.
+ & Opinions expressed by any third parties are theirs and do not reflect my own.
+ * Disclaimer
+ & The content of grimgrains.com, unless stated otherwise, is © Rekka Bell. All rights reserved. Photographs, drawings or text should not be used, published, reprinted or modified without my permission.
+ & All recipes featured on grimgrains.com are my own, unless stated otherwise. The information is for food enthusiasts like myself, i do not claim to be an all-knowing food guru. Nor am I a health professional. My views are my own, i encourage curiosity whenever possible.
+ * Privacy statement
+ & Ads on the website are from third parties such as google, who may store information about your online coming and goings to provide personalized advertisements. All concerns about browsing privacy should be addressed to google.
+ & Any visitor personal information will be kept private and will not be shared/sold to another party. I am not responsible for the privacy practices or actions of any of my blog commenters.
+ & I reserve the right to alter the blog at my own discretion, as well as to filter comments without notice.
+ & Words addressed to me in private will not be shared, nor will i use any of it in future publications.
INGREDIENTS
BREF : Here is an unsorted list of all the ingredients used in GrimGrains recipes!
diff --git a/scripts/database/recipes.js b/scripts/database/recipes.js
@@ -614,14 +614,14 @@ PERSIMMON CURRY
& Enjoy over some basmasti rice, or grated cauliflower rice for a lighter and grain-free meal.
INST
Rice
- - Rince 1 cup of basmati rice under cold water, transfer to pot.
- - Boil some water, pour 1 1/2 cups of it over the rice. Bring pot to a boil. Add bay leaf, lower heat and cover. Simmer for 15 minutes, remove from heat and let steam for an additional 5 minutes with the lid on.
- - Remove bay leaf and serve.
+ - Rince {_1 cup_} of {{basmati rice}} under cold water, transfer to pot.
+ - Boil some water, pour {_1 1/2 cups_} of it over the rice. Bring pot to a boil. Add {{bay leaf}}, lower heat and cover. Simmer for {#15 minutes#}, remove from heat and let steam for an additional {#5 minutes#} with the lid on.
+ - Remove {{bay leaf}} and serve.
Sauce
- - Scoop the flesh out of 2 rippened hachiya persimmons, puree with a hand blender.
- - Sauté 1 chopped onion, 2 minced garlic cloves, 1 tsp ginger root with a bit of olive oil in a pan over medium heat. Cook until onions become translucent.
- - Add the 2 diced carrots and the handful of spinach. Stir for 2 minutes, then add the tbsp of curry powder. Cook for an additional minute.
- - Add pureed persimmon, cook for 5 minutes and then season with salt. Serve over rice.
+ - Scoop the flesh out of 2 rippened {{hachiya persimmons}}, puree with a hand blender.
+ - Sauté 1 chopped {{onion}}, 2 minced {{garlic}} cloves, 1 tsp {{ginger root}} with a bit of {{olive oil}} in a pan over medium heat. Cook until onions become translucent.
+ - Add the 2 diced {{carrots}} and the handful of {{spinach}}. Stir for {#2 minutes#}, then add {_1 tbsp_} of {{curry powder}}. Cook for an additional minute.
+ - Add pureed persimmon, cook for {#5 minutes#} and then season with {{salt}}. Serve over rice.
INGR
Rice
Basmati rice : 1 cup
diff --git a/scripts/graph.js b/scripts/graph.js
@@ -15,6 +15,7 @@ function graph()
Ø("template").create({x:5,y:2},TemplateNode),
Ø("page").create({x:2,y:8},PageTemplate),
Ø("search").create({x:5,y:14},SearchTemplate),
+ Ø("index").create({x:8,y:14},IndexTemplate),
Ø("home").create({x:2,y:14},HomeTemplate),
Ø("recipe").create({x:5,y:8},RecipeTemplate),
Ø("ingredient").create({x:8,y:8},IngredientTemplate),
@@ -24,12 +25,12 @@ function graph()
Ø("document").create({x:2,y:2},DocumentNode),
Ø("view").create({x:2,y:6},DomNode),
Ø("header").create({x:2,y:11},DomNode),
- Ø("logo").create({x:2,y:16},DomNode,"wr",`<a href='#home' onclick="Ø('query').bang('home')" ><img src='media/interface/logo.png'/></a>`),
+ Ø("logo").create({x:2,y:16},DomNode,"wr",`<a href='#home' onclick="Ø('query').bang('home')"><img src='media/interface/logo.png'/></a>`),
Ø("menu").create({x:6,y:16},DomNode,"list"),
Ø("core").create({x:10,y:11},DomNode),
Ø("content").create({x:10,y:16},DomNode),
Ø("related").create({x:14,y:16},DomNode,"list"),
- Ø("footer").create({x:6,y:11},DomNode),
+ Ø("footer").create({x:6,y:11},DomNode,"wr",`<a onclick="Ø('query').bang('index')">See All Recipes List</a><br/><a onclick="Ø('query').bang('about')">Grimgrains</a> © 2014—2018<br/><a href='http://100r.co/' target='_blank'>Hundred Rabbits</a>`),
])
// Model
@@ -38,7 +39,7 @@ function graph()
// Assoc
Ø("template").syphon(["recipe","ingredient","page"])
- Ø("page").syphon(["home","search"])
+ Ø("page").syphon(["home","search","index"])
Ø("template").connect(["view","document"])
Ø("view").bind(["header","core","footer"])
diff --git a/scripts/lib/runic.js b/scripts/lib/runic.js
@@ -42,28 +42,6 @@ function Runic(raw)
}
}
- this.markup = function(html)
- {
- html = html.replace(/{_/g,"<i>").replace(/_}/g,"</i>")
- html = html.replace(/{\*/g,"<b>").replace(/\*}/g,"</b>")
- html = html.replace(/{\#/g,"<code class='inline'>").replace(/\#}/g,"</code>")
-
- var parts = html.split("{{")
- for(id in parts){
- var part = parts[id];
- if(part.indexOf("}}") == -1){ continue; }
- var content = part.split("}}")[0];
- if(content.substr(0,1) == "$"){ html = html.replace(`{{${content}}}`, this.operation(content)); continue; }
- if(content.substr(0,1) == "%"){ html = html.replace(`{{${content}}}`, this.media(content)); continue; }
- var target = content.indexOf("|") > -1 ? content.split("|")[1] : content;
- var name = content.indexOf("|") > -1 ? content.split("|")[0] : content;
- var external = (target.indexOf("https:") > -1 || target.indexOf("http:") > -1 || target.indexOf("dat:") > -1);
- html = html.replace(`{{${content}}}`,`<a target='${external ? "_blank" : "_self"}' href='${external ? target : target.to_url()}' class='${external ? "external" : "local"}'>${name}</a>`)
- }
-
- return html;
- }
-
this.media = function(val)
{
var service = val.split(" ")[0];
@@ -106,7 +84,7 @@ function Runic(raw)
var char = lines[id].substr(0,1).trim().toString()
var rune = this.runes[char];
var trail = lines[id].substr(1,1);
- var line = this.markup(lines[id].substr(2));
+ var line = lines[id].substr(2).to_markup();
if(!line || line.trim() == ""){ continue; }
if(!rune){ console.log(`Unknown rune:${char} : ${line}`); }
@@ -167,4 +145,27 @@ String.prototype.to_url = function()
String.prototype.to_path = function()
{
return this.toLowerCase().replace(/ /g,".").replace(/[^0-9a-z\.]/gi,"").trim();
-}-
\ No newline at end of file
+}
+
+String.prototype.to_markup = function()
+{
+ html = this;
+ html = html.replace(/{_/g,"<i>").replace(/_}/g,"</i>")
+ html = html.replace(/{\*/g,"<b>").replace(/\*}/g,"</b>")
+ html = html.replace(/{\#/g,"<code class='inline'>").replace(/\#}/g,"</code>")
+
+ var parts = html.split("{{")
+ for(id in parts){
+ var part = parts[id];
+ if(part.indexOf("}}") == -1){ continue; }
+ var content = part.split("}}")[0];
+ if(content.substr(0,1) == "$"){ html = html.replace(`{{${content}}}`, this.operation(content)); continue; }
+ if(content.substr(0,1) == "%"){ html = html.replace(`{{${content}}}`, this.media(content)); continue; }
+ var target = content.indexOf("|") > -1 ? content.split("|")[1] : content;
+ var name = content.indexOf("|") > -1 ? content.split("|")[0] : content;
+ var external = (target.indexOf("https:") > -1 || target.indexOf("http:") > -1 || target.indexOf("dat:") > -1);
+ html = html.replace(`{{${content}}}`,`<a target='${external ? "_blank" : "_self"}' class='${external ? "external" : "local"}' onclick="Ø('query').bang('${target}')">${name}</a>`)
+ }
+ return html;
+}
+
diff --git a/scripts/templates/home.js b/scripts/templates/home.js
@@ -13,8 +13,9 @@ function HomeTemplate(id,rect)
title:`GrimGrains — Home`,
view:{
core: {
- content: make_ingredients(sorted_ingredients,q.tables.ingredients)
- }
+ content: make_ingredients(sorted_ingredients,q.tables.ingredients),
+ related: ""
+ }
}
}
}
@@ -62,4 +63,15 @@ function HomeTemplate(id,rect)
}
return `<list class='ingredients'>${html}<hr/></list>`
}
+
+ function count_ingredients(recipe)
+ {
+ var ingredients = {}
+ for(cat in recipe.INGR){
+ for(id in recipe.INGR[cat]){
+ ingredients[id] = 1
+ }
+ }
+ return Object.keys(ingredients).length
+ }
}
\ No newline at end of file
diff --git a/scripts/templates/index.js b/scripts/templates/index.js
@@ -0,0 +1,21 @@
+function IndexTemplate(id,rect)
+{
+ Node.call(this,id,rect);
+
+ this.glyph = NODE_GLYPHS.render
+
+ // Create the recipe body
+
+ this.answer = function(q)
+ {
+ console.log("!!")
+ return {
+ title:`GrimGrains — Index`,
+ view:{
+ core: {
+ content: `Hello`
+ }
+ }
+ }
+ }
+}+
\ No newline at end of file
diff --git a/scripts/templates/ingredient.js b/scripts/templates/ingredient.js
@@ -47,7 +47,6 @@ function IngredientTemplate(id,rect)
<t class='name'>${name.capitalize()}</t>
</ln>`
}
- console.log(similar_ingredients.length)
return similar_ingredients.length > 1 ? `<h2>Related Ingredients</h2><list class='ingredients'>${html}<hr /></list>` : ''
}
diff --git a/scripts/templates/page.js b/scripts/templates/page.js
@@ -8,9 +8,9 @@ function PageTemplate(id,rect)
this.answer = function(q)
{
- if(q.name == "HOME"){
+ if(this.signal(q.name.toLowerCase())){
this.label = `page:${q.name}`
- return this.signal("home").answer(q)
+ return this.signal(q.name.toLowerCase()).answer(q)
}
if(!q.type){
this.label = `page:${q.name}`
@@ -18,10 +18,12 @@ function PageTemplate(id,rect)
}
var page = q.result
-
return {
- core: {
- content: `<p>${page.BREF}</p>${new Runic(page.LONG).toString()}`
+ title:`GrimGrains — ${q.name.capitalize()}`,
+ view:{
+ core: {
+ content: `<h1>${q.name.capitalize()}</h1><p>${page.BREF.to_markup()}</p>${new Runic(page.LONG).toString()}`
+ }
}
}
}
diff --git a/scripts/templates/recipe.js b/scripts/templates/recipe.js
@@ -48,7 +48,7 @@ function RecipeTemplate(id,rect)
var count = 1
for(cat in recipe.INST){
- html += `<h3>Step ${count}: ${cat}</h3>`
+ html += `<h3>Step ${count}: ${cat.capitalize()}</h3>`
var category = recipe.INST[cat];
html += new Runic(category).toString();
count += 1
