commit: 66d99465cbe77ae271d7fac44c4d16bf60f8aee8
parent f5a5c7b6425cb6c031c3a92d6940ce4d09697567
Author: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Fri, 9 Mar 2018 09:37:30 +1300
Implementing pages
Diffstat:
12 files changed, 76 insertions(+), 47 deletions(-)
diff --git a/index.html b/index.html
@@ -21,6 +21,8 @@
<script src="scripts/templates/ingredient.js"></script>
<script src="scripts/templates/page.js"></script>
<script src="scripts/templates/related.js"></script>
+ <script src="scripts/templates/home.js"></script>
+ <script src="scripts/templates/search.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
@@ -9,7 +9,7 @@ h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; margin
#view { max-width: 800px; margin:0px auto; padding:90px 30px; }
-#view #header { position: absolute; top:0px; left:0px; padding:60px; z-index: 900; background:white}
+#view #header { }
#view #header #logo img { max-width: 200px; display: block; margin:0px auto; }
#view #header #search { display: none }
diff --git a/riven.html b/riven.html
@@ -22,6 +22,8 @@
<script src="scripts/database/ingredients.js"></script>
<script src="scripts/database/recipes.js"></script>
<script src="scripts/database/pages.js"></script>
+ <script src="scripts/templates/home.js"></script>
+ <script src="scripts/templates/search.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
@@ -3,7 +3,7 @@ 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
& This website showcases some of my favourite creations, along with hand draw illustrations for {{each of their ingredients|ingredients-list}}.
- % about
+ % 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}}.
diff --git a/scripts/graph.js b/scripts/graph.js
@@ -13,24 +13,21 @@ function graph()
Ø("assoc").mesh({x:19,y:0},[
Ø("template").create({x:5,y:2},TemplateNode),
- Ø("recipe").create({x:2,y:8},RecipeTemplate),
- Ø("ingredient").create({x:5,y:8},IngredientTemplate),
- Ø("page").create({x:8,y:8},PageTemplate),
+ Ø("page").create({x:2,y:8},PageTemplate),
+ Ø("search").create({x:5,y:14},SearchTemplate),
+ Ø("home").create({x:2,y:14},HomeTemplate),
+ Ø("recipe").create({x:5,y:8},RecipeTemplate),
+ Ø("ingredient").create({x:8,y:8},IngredientTemplate),
])
Ø("client").mesh({x:32,y:0},[
-
Ø("view").create({x:2,y:2},DomNode),
-
Ø("header").create({x:2,y:8},DomNode),
- Ø("logo").create({x:2,y:14},DomNode,"wr","<img src='media/interface/logo.png'/>"),
- Ø("search").create({x:6,y:14},DomNode),
- Ø("menu").create({x:10,y:14},DomNode),
-
- Ø("core").create({x:14,y:8},DomNode),
- Ø("content").create({x:14,y:14},DomNode),
- Ø("related").create({x:18,y:14},DomNode,"list"),
-
+ Ø("logo").create({x:2,y:14},DomNode,"wr","<a href='#home'><img src='media/interface/logo.png'/></a>"),
+ Ø("menu").create({x:6,y:14},DomNode,"list"),
+ Ø("core").create({x:10,y:8},DomNode),
+ Ø("content").create({x:10,y:14},DomNode),
+ Ø("related").create({x:14,y:14},DomNode,"list"),
Ø("footer").create({x:6,y:8},DomNode),
])
@@ -40,11 +37,12 @@ function graph()
// Assoc
Ø("template").syphon(["recipe","ingredient","page"])
+ Ø("page").syphon(["home","search"])
Ø("template").connect("view")
Ø("view").bind(["header","core","footer"])
Ø("core").bind(["content","related"])
- Ø("header").bind(["logo","search","menu"])
+ Ø("header").bind(["logo","menu"])
Ø("query").connect("router")
Ø("router").connect("template")
diff --git a/scripts/lib/runic.js b/scripts/lib/runic.js
@@ -58,8 +58,7 @@ function Runic(raw)
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);
- var redlink = !external && !invoke.vessel.lexicon.has_term(target); if(redlink){ console.warn("broken link",target,html); }
- html = html.replace(`{{${content}}}`,`<a target='${external ? "_blank" : "_self"}' href='${external ? target : target.to_url()}' class='${external ? "external" : "local"} ${redlink ? "redlink" : ""}'>${name}</a>`)
+ html = html.replace(`{{${content}}}`,`<a target='${external ? "_blank" : "_self"}' href='${external ? target : target.to_url()}' class='${external ? "external" : "local"}'>${name}</a>`)
}
return html;
diff --git a/scripts/nodes/query.js b/scripts/nodes/query.js
@@ -9,9 +9,9 @@ function QueryNode(id,rect)
{
var hash = window.location.hash.substring(1).replace(/[^0-9a-z]/gi," ").trim().toLowerCase()
if(hash == ""){
- hash = "spinach";
+ hash = "home";
}
- this.label = hash
+ this.label = `query:${hash}`
this.send(hash)
}
}
\ No newline at end of file
diff --git a/scripts/nodes/router.js b/scripts/nodes/router.js
@@ -11,7 +11,7 @@ function RouterNode(id,rect)
var type = find(q,db)
- this.label = `${type}/${q}`
+ this.label = `router:${type}/${q}`
this.send({
name:q,
type:type,
diff --git a/scripts/nodes/template.js b/scripts/nodes/template.js
@@ -8,11 +8,12 @@ function TemplateNode(id,rect)
this.receive = function(q)
{
- // Select the right signal
- var assoc = this.signal(q.type.slice(0, -1));
+ var assoc = this.signal(q.type ? q.type.slice(0, -1) : "page");
var payload = assoc.answer(q)
- this.send({view:payload})
+ this.send({view:payload})
+ this.label = `template:${assoc.id}`
+
// Install Dom
document.body.appendChild(this.signal("view").answer())
}
diff --git a/scripts/templates/home.js b/scripts/templates/home.js
@@ -0,0 +1,22 @@
+function HomeTemplate(id,rect)
+{
+ Node.call(this,id,rect);
+
+ this.glyph = NODE_GLYPHS.render
+
+ // Create the recipe body
+
+ this.answer = function(q)
+ {
+ return {
+ core: {
+ content: make_content(q)
+ }
+ }
+ }
+
+ function make_content(q)
+ {
+ return "Hello"
+ }
+}+
\ No newline at end of file
diff --git a/scripts/templates/page.js b/scripts/templates/page.js
@@ -8,34 +8,22 @@ function PageTemplate(id,rect)
this.answer = function(q)
{
- var recipe = t.result;
+ if(q.name == "HOME"){
+ this.label = `page:${q.name}`
+ return this.signal("home").answer(q)
+ }
+ if(!q.type){
+ this.label = `page:${q.name}`
+ return this.signal("search").answer(q)
+ }
+
+ var page = q.result
return {
- header:{
- search: t.name.capitalize()
- },
core: {
- content: recipe,
- related:{
- related_recipes:related_recipes(t.name,t.tables.recipes),
- related_ingredients:related_ingredients(t.name,ingredient.TAGS[0],sort(t.tables.ingredients))
- }
+ content: `<p>${page.BREF}</p>${new Runic(page.LONG).toString()}`
}
}
- console.log(q.result)
-
- var recipe = q.result
- var html = "";
-
- html += `
- <h1>${q.name}</h1>
- <h2>${recipe.date}</h2>
- <h3>${recipe.serv} — ${recipe.time} minutes</h3>
- <p>${recipe.desc}</p>
- <h4>Ingredients</h4>
- <list>${list(recipe.ingr)}</list>`;
-
- return html
}
function list(items)
diff --git a/scripts/templates/search.js b/scripts/templates/search.js
@@ -0,0 +1,15 @@
+function SearchTemplate(id,rect)
+{
+ Node.call(this,id,rect);
+
+ this.glyph = NODE_GLYPHS.render
+
+ // Create the recipe body
+
+ this.answer = function(q)
+ {
+ var html = ""
+
+ return html
+ }
+}+
\ No newline at end of file
