commit: 3a48c03eab499a1103160e5ecc4472f8fdbd3ecd
parent d5a3d9a6efba9323a8d5b329d9dc5f51557d689c
Author: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Thu, 8 Mar 2018 16:03:42 +1300
Improved dom node
Diffstat:
13 files changed, 89 insertions(+), 45 deletions(-)
diff --git a/index.html b/index.html
@@ -13,17 +13,18 @@
<script src="scripts/nodes/template.js"></script>
<script src="scripts/nodes/dom.js"></script>
+ <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/recipe.js"></script>
<script src="scripts/templates/ingredient.js"></script>
<script src="scripts/templates/page.js"></script>
<script src="scripts/templates/related.js"></script>
- <script src="scripts/database/ingredients.js"></script>
- <script src="scripts/database/recipes.js"></script>
- <script src="scripts/database/pages.js"></script>
-
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/main.css"/>
+ <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
<title>Riven</title>
</head>
<body>
diff --git a/links/fonts.css b/links/fonts.css
@@ -0,0 +1,13 @@
+@font-face {
+ font-family: 'alte_haas_grotesk_regular';
+ src: url('../media/fonts/alte_haas_grotesk_regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'alte_haas_grotesk_bold';
+ src: url('../media/fonts/alte_haas_grotesk_bold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}+
\ No newline at end of file
diff --git a/links/main.css b/links/main.css
@@ -4,4 +4,4 @@ yu { display: block; border:1px solid #ccc; padding:10px; margin:10px; }
list { display: block; background:red; }
list ln { display: block }
-h1,h2,h3,h4 { font-weight: bold }-
\ No newline at end of file
+h1,h2,h3,h4 { font-weight: normal; font-family: 'alte_haas_grotesk_bold'; }+
\ No newline at end of file
diff --git a/links/riven.main.css b/links/riven.main.css
@@ -15,4 +15,6 @@ svg text { fill:white; text-transform: uppercase; }
svg path.route { stroke:#555; stroke-width:2; }
svg path.route.request { stroke-dasharray: 5,5; }
svg path.route.bidirectional { stroke:#33; stroke-dasharray: 0,3; }
-svg g:hover text { fill:#72dec2; cursor: pointer; }-
\ No newline at end of file
+svg g:hover text { fill:#72dec2; cursor: pointer; }
+
+yu { display: none }+
\ No newline at end of file
diff --git a/media/fonts/alte_haas_grotesk_bold.ttf b/media/fonts/alte_haas_grotesk_bold.ttf
Binary files differ.
diff --git a/media/fonts/alte_haas_grotesk_regular.ttf b/media/fonts/alte_haas_grotesk_regular.ttf
Binary files differ.
diff --git a/scripts/database/recipes.js b/scripts/database/recipes.js
@@ -103,7 +103,7 @@ NO KNEAD BLACK BREAD
DESC
& This black loaf of bread is what inspired this website. It took me a while to get my hands on bamboo charcoal powder, now that i have it, i will be baking a ton of these! Some months ago, I stumbled upon an image of an all-black loaf. I didn't know you could get bread to be that dark.
& Getting your hands on bamboo charcoal isn't easy. I saw stores on amazon.com that stocked it, but nothing in my area. I bought a small amount at a health food store where I live, but it was a very small jar (also crazy expensive). After much searching, I concluded that the best place to get it was in Japan. I assumed it would be relatively easy to get over there, wrong again. It's almost impossible to purchase in store, or maybe i wasn't taking to the right people, or going to the right places.
- % no.knead.black.bread.1
+ % recipes/no.knead.black.bread.1.jpg
& I finally found some available for purchase on amazon japan. Since i lived in temporary housing, shipping there wasn't ideal. Luckily, a good friend agreed to have it shipped to her place and it arrived before i left the country! That's how i got my hands on bamboo charcoal powder! Wasn't easy, but i got it from the best possible source! I got it through {{Taketora|http://www.taketora.co.jp}}, they've been growing and making things out of bamboo for years and years. They're true artisans.
& Cooking with bamboo charcoal is a breeze, you don't need to add much to make your food black. It doesn't add taste to a recipe either, it's purely aesthetic.
& Happy cooking!
@@ -740,12 +740,12 @@ BASIC BLACK BREAD
& Introducing, my basic black bread recipe. This bread is super light and fluffy, it's great great for morning toast or sandwiches.
& I've been reading up a lot about bread, there's so many kinds out there. I wanted to understand how the ingredients we add, can change the texture of the bread. Also read about the differences in temperature, to knead or not to knead etc.
& Truth is, it depends on the type of bread you want.
- % basic.black.bread.1
+ % recipes/basic.black.bread.1.jpg
& I wanted to make a sandwich bread with a light crumb, the kind that bounces back when touched.
& The one I made this time has more fat, which in turn makes it softer and fluffier. The fat that you use will also change the texture/taste of the bread. A lot of people wont like the idea of adding 'fat' to a recipe, know that fat isn't synonymous with unhealthy. Too much of it can be bad, but in moderation there really isn't anything to worry about. It also depends on what fat you choose, there are good and bad kinds of fat.
& There are many things you can do to help soften your bread, like brushing the outside with a little oil or fat. Do this as soon as you take it out of the oven, it will make the outside less crunchy. You can also substitute nut milk for the water, if you want a richer taste. There are so many different things to think about when baking!
& I made this loaf for a brunch I had with friends, we wanted to have fondue with a set I got as a gift during the holidays. We cut the loaf into cubes, and dunked them in! Soft bread is perfect for fondue!
- % basic.black.bread.2
+ % recipes/basic.black.bread.2.jpg
& So there you have it! A basic black bread!
INST
* Loaf
diff --git a/scripts/graph.js b/scripts/graph.js
@@ -18,9 +18,9 @@ function graph()
Ø("page").create({x:8,y:8},PageTemplate),
])
- Ø("view").mesh({x:32,y:0},[
+ Ø("client").mesh({x:32,y:0},[
- Ø("body").create({x:2,y:2},DomNode),
+ Ø("view").create({x:2,y:2},DomNode),
Ø("header").create({x:2,y:8},DomNode),
Ø("logo").create({x:2,y:14},DomNode),
@@ -41,8 +41,8 @@ function graph()
// Assoc
Ø("template").syphon(["recipe","ingredient","page"])
- Ø("template").connect("body")
- Ø("body").bind(["header","core","footer"])
+ Ø("template").connect("view")
+ Ø("view").bind(["header","core","footer"])
Ø("core").bind(["content","related"])
Ø("header").bind(["logo","search","menu"])
diff --git a/scripts/nodes/dom.js b/scripts/nodes/dom.js
@@ -30,7 +30,6 @@ function DomNode(id,rect)
for(id in elements){
this.el.appendChild(elements[id])
}
- document.body.appendChild(this.el)
}
this.update = function(content)
diff --git a/scripts/nodes/router.js b/scripts/nodes/router.js
@@ -15,7 +15,7 @@ function RouterNode(id,rect)
this.send({
name:q,
type:type,
- result:db[type][q],
+ result:db[type] ? db[type][q] : null,
tables:db
})
}
diff --git a/scripts/nodes/template.js b/scripts/nodes/template.js
@@ -10,10 +10,11 @@ function TemplateNode(id,rect)
{
// Select the right signal
var assoc = this.signal(q.type.slice(0, -1));
-
- this.send({body:assoc.answer(q)})
+ var payload = assoc.answer(q)
+ this.send({body:payload})
- // // Install Dom
- this.signal("body").request()
+ // Install Dom
+ document.body.appendChild(this.signal("view").answer())
+
}
}
\ No newline at end of file
diff --git a/scripts/templates/page.js b/scripts/templates/page.js
@@ -8,6 +8,20 @@ function PageTemplate(id,rect)
this.answer = function(q)
{
+ var recipe = t.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))
+ }
+ }
+ }
console.log(q.result)
var recipe = q.result
diff --git a/scripts/templates/recipe.js b/scripts/templates/recipe.js
@@ -8,6 +8,19 @@ function RecipeTemplate(id,rect)
this.answer = function(q)
{
+ return {
+ header:{
+ search: q.name.capitalize()
+ },
+ core: {
+ content: make_content(q),
+ related: make_related(q)
+ }
+ }
+ }
+
+ function make_content(q)
+ {
var recipe = q.result
var html = "";
@@ -15,41 +28,27 @@ function RecipeTemplate(id,rect)
<h1>${q.name}</h1>
<h2>${recipe.DATE}</h2>
<h3>${recipe.SERV} — ${recipe.TIME} minutes</h3>
- <p>${recipe.DESC}</p>
+ <p>${new Runic(recipe.DESC)}</p>
<h4>Ingredients</h4>
- <list>${print_sub_list(recipe.INGR)}</list>
- <h4>Related Recipes</h4>
- <list>${print_list(related_recipes(recipe,q.tables.recipes))}</list>`;
+ <list>${print_sub_list(recipe.INGR)}</list>`;
return html
}
- function print_list(elements)
+ function make_related(q)
{
var html = "";
- for(id in elements){
- var name = elements[id][0];
- html += `<ln><a href='#${name.to_url()}'>${name.capitalize()}</a></ln>`
- if(id > 5){ break; }
- }
- return html
- }
+ var recipe = q.result
+ var recipes = find_related(recipe,q.tables.recipes)
- function print_sub_list(categories)
- {
- var html = "";
- for(id in categories){
- var elements = categories[id];
- html += `<ln class='category'>${id}</ln>`
- for(id in elements){
- var element = elements[id];
- html += `<ln><a href='#${id.to_url()}'>${id.capitalize()}</a></ln>`
- }
+ for(id in recipes){
+ var name = recipes[id][0];
+ html += `<ln><a href='#${name.to_url()}'>${name.capitalize()}</a>(${recipes[id][1]})</ln>`
}
- return html
+ return html
}
- function related_recipes(target,recipes)
+ function find_related(target,recipes)
{
var a = [];
for(id in recipes){
@@ -63,6 +62,20 @@ function RecipeTemplate(id,rect)
return a.reverse();
}
+ function print_sub_list(categories)
+ {
+ var html = "";
+ for(id in categories){
+ var elements = categories[id];
+ html += `<ln class='category'>${id}</ln>`
+ for(id in elements){
+ var element = elements[id];
+ html += `<ln><a href='#${id.to_url()}'>${id.capitalize()}</a></ln>`
+ }
+ }
+ return html
+ }
+
function similarity(a,b)
{
var score = 0
