Dynamic info loading works, json parsing instead of pic dir parsing

data/dg1.json

@@ -0,0 +1,128 @@
+[
+    {
+        "Name": "dashboard",
+        "Author": "Philip Gaber",
+        "Size": "1920x1080",
+        "Tools": "GIMP / Adobe XD",
+        "Date": "2019-09-27",
+        "Desc": "Light design for the dashboard of a website meant to explain the sport Curling to a broarder audience and give information about the Swedish Curling Team. The website should also include information about the Olympic Winter Games in Beijing.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "dashboard_dark",
+        "Author": "Philip Gaber",
+        "Size": "1920x1080",
+        "Tools": "GIMP / Adobe XD",
+        "Date": "2019-09-27",
+        "Desc": "Dark concept design for the dashboard of a website meant to explain the sport Curling to a broarder audience and give information about the Swedish Curling Team. The website should also include information about the Olympic Winter Games in Beijing.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "dashboard_open",
+        "Author": "Philip Gaber",
+        "Size": "1920x1080",
+        "Tools": "GIMP / Adobe XD",
+        "Date": "2019-09-27",
+        "Desc": "A concept for the social links on this website.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "gameplay",
+        "Author": "Philip Gaber",
+        "Size": "1920x1080",
+        "Tools": "GIMP / Adobe XD",
+        "Date": "2019-09-27",
+        "Desc": "A concept for the page where the sport curling is described in more detail. The individual 'info tiles' can be clicked to get even more information.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "gameplay_open",
+        "Author": "Philip Gaber",
+        "Size": "1920x1080",
+        "Tools": "GIMP / Adobe XD",
+        "Date": "2019-09-27",
+        "Desc": "A concept for the page where the sport curling is described in more detail. This shows the state after a 'info tile' got clicked.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "history",
+        "Author": "Philip Gaber",
+        "Size": "1920x1080",
+        "Tools": "GIMP / Adobe XD",
+        "Date": "2019-09-27",
+        "Desc": "Concept for the history page where important events in the history of curling are described.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "infographic",
+        "Author": "Philip Gaber",
+        "Size": "Double-sided A4 page",
+        "Tools": "Inkscape",
+        "Date": "2019-10-11",
+        "Desc": "This is a concept for an infographic for the company Videum / Videum Science Park. The goal was to summarize and visualize 30+ pages of the annual report in two A4 pages.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "olympia_curl",
+        "Author": "Philip Gaber",
+        "Size": "Variable SVG",
+        "Tools": "Inkscape",
+        "Date": "2019-09-20",
+        "Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "olympia_masc_curl",
+        "Author": "Philip Gaber",
+        "Size": "Variable SVG",
+        "Tools": "Inkscape",
+        "Date": "2019-09-20",
+        "Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing. The idea was to have a separate mascot which is a swedish version of the official mascot for the OWG in Beijing.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "swed_curl_future",
+        "Author": "Philip Gaber",
+        "Size": "Variable SVG",
+        "Tools": "Inkscape",
+        "Date": "2019-09-20",
+        "Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing. This is a more futuristic version of a curling stone.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "swed_curl_young",
+        "Author": "Philip Gaber",
+        "Size": "Variable SVG",
+        "Tools": "Inkscape",
+        "Date": "2019-09-20",
+        "Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing. This is a curling version of the popular X logo (original NYHC) to speak to a younger audience.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "team",
+        "Author": "Philip Gaber",
+        "Size": "1920x1080",
+        "Tools": "GIMP / Adobe XD",
+        "Date": "2019-09-27",
+        "Desc": "Concept for the team page where the individual players of the swedish team could be highlighted.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "team_open",
+        "Author": "Philip Gaber",
+        "Size": "1920x1080",
+        "Tools": "GIMP / Adobe XD",
+        "Date": "2019-09-27",
+        "Desc": "Concept for the team page where the individual players of the swedish team could be highlighted. Here is the state after a click on the player card. More information an a video of the best plays could be displayed.",
+        "BlogLink": "none"
+    },
+    {
+        "Name": "timetable",
+        "Author": "Philip Gaber",
+        "Size": "1920x1080",
+        "Tools": "GIMP / Adobe XD",
+        "Date": "2019-09-27",
+        "Desc": "Concept for the timetable page where the upcoming matches could be displayed in a scrollable table.",
+        "BlogLink": "none"
+    }
+]

exhibit.go

@@ -1,21 +1,26 @@
 package main
 
 import (
+	"encoding/json"
+	"fmt"
 	"html/template"
 	"io/ioutil"
 	"log"
 	"net/http"
-	"strings"
+	"regexp"
-	// "fmt"
 )
 
 // var t = template.Must(template.ParseFiles("tmpl/layouts/base.html", "tmpl/index.html", "tmpl/blog.html", "tmpl/about.html", "tmpl/contact.html", ))
+var validImg = regexp.MustCompile("^/info/([\\w_\\- ]+)")
+var exhibit Exhibition
 
 func main() {
+	exhibit.Pics = make(map[string]Picture)
 	http.HandleFunc("/", handleIndex)
 	http.HandleFunc("/blog", handleBlog)
 	http.HandleFunc("/about", handleAbout)
 	http.HandleFunc("/contact", handleContact)
+	http.HandleFunc("/info/", handleInfo)
 	http.Handle("/inc/", http.StripPrefix("/inc/", http.FileServer(http.Dir("inc"))))
 	log.Fatalln(http.ListenAndServe(":8080", nil))
 }
@@ -26,18 +31,16 @@ type Picture struct {
 	Size     string
 	Tools    string
 	Date     string
-	Price    float32
 	Desc     string
 	BlogLink string
 }
 
 type Exhibition struct {
-	Pics []Picture
+	Pics map[string]Picture
 }
 
 func handleIndex(w http.ResponseWriter, r *http.Request) {
-	var exhibit Exhibition
+	exhibit.parseExhibitions("./data")
-	exhibit.parsePictures("./inc/images")
 	t, _ := template.ParseFiles("tmpl/layouts/index.html", "tmpl/gallery.html", "tmpl/header.html")
 	t.Execute(w, exhibit)
 }
@@ -57,16 +60,54 @@ func handleContact(w http.ResponseWriter, r *http.Request) {
 	t.Execute(w, nil)
 }
 
-func (ex *Exhibition) parsePictures(dir string) {
+func handleInfo(w http.ResponseWriter, r *http.Request) {
+	imgName := validImg.FindStringSubmatch(r.URL.Path)
+	if imgName == nil {
+		http.NotFound(w, r)
+		return
+	}
+	img, ok := exhibit.Pics[imgName[1]]
+	if !ok {
+		http.NotFound(w, r)
+		return
+	}
+	info, err := json.Marshal(img)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.Write(info)
+}
+
+// file, _ := json.MarshalIndent(ex.Pics, "", "    ")
+// err := ioutil.WriteFile(dir+"/dg1.json", file, 0644)
+// if err != nil {
+// 	fmt.Println("WRITE", err)
+// }
+// load the exhibition data into the struct
+func (ex *Exhibition) parseExhibitions(dir string) {
 	files, err := ioutil.ReadDir(dir)
 	if err != nil {
-		log.Fatal(err)
+		fmt.Println("E1", err)
+		return
 	}
 
 	for _, f := range files {
 		if !f.IsDir() {
-			ex.Pics = append(ex.Pics,
+			var pics []Picture
-				Picture{Name: strings.TrimSuffix(f.Name(), ".jpg")})
+			content, err := ioutil.ReadFile(dir + "/" + f.Name())
+			if err != nil {
+				fmt.Println("E2", err)
+			}
+			err = json.Unmarshal(content, &pics)
+			if err != nil {
+				fmt.Println("E3", err)
+			}
+			for _, pic := range pics {
+				ex.Pics[pic.Name] = pic
+			}
 		}
 	}
 }

inc/js/main.js

@@ -3,8 +3,9 @@
  * functions to power my portfolio
  * Author: phga/teord
  * Date: 2019-10-18
- * Version: 1.0
+ * Version: 1.1
  */
+"use strict";
 document.addEventListener("DOMContentLoaded", run);
 // global var to control the animation of the text
 var runTextAnimation = true;
@@ -64,7 +65,6 @@ function initialize() {
 
 // this scroll is NOT smooth
 function doSlide(elem, dist) {
-    console.log(dist);
     let hM = elem.scrollHeight;
     let sT = elem.scrollTop;
     if (dist < 0)
@@ -81,7 +81,6 @@ function handleThumb(overlay, elem) {
 // save last eventlistener func to remove it...
 var resize;
 function showOverlay(overlay, imgName) {
-    let info = getInfoForImg(imgName);
     let magni = document.getElementById("zoom");
     let infoTable = document.getElementById("img-description");
     let img = document.createElement("img");
@@ -104,28 +103,33 @@ function showOverlay(overlay, imgName) {
     magni.innerHTML = "";
     magni.appendChild(img);
 
-    infoTable.innerHTML =
+    getInfoForImg(imgName).then(info => {
-        ` <tr>
+        let infos = ` <tr>
-<th>Author:</th><td>${info.author}</td>
+<th>Author:</th><td>${info.Author}</td>
 </tr>
 <tr>
-<th>Size:</th><td>${info.size}</td>
+<th>Size:</th><td>${info.Size}</td>
 </tr>
 <tr>
-<th>Tools:</th><td>${info.tools}</td>
+<th>Tools:</th><td>${info.Tools}</td>
 </tr>
 <tr>
-<th>Date:</th><td>${info.date}</td>
+<th>Date:</th><td>${info.Date}</td>
 </tr>
 <tr>
 <th colspan="2">Description:</th>
 </tr>
 <tr>
-<td colspan="2">${info.desc}</td>
+<td colspan="2">${info.Desc}</td>
 </tr>
-<tr>
+`;
-<th colspan="2"><a href="${info.blog}">Read more...</a></th>
+        if (info.BlogLink != "none") {
-</tr> `;
+            infos += `<tr>
+<th colspan="2"><a href="${info.Blog}">Read more...</a></th>
+</tr>`;
+        }
+        infoTable.innerHTML = infos;
+    });
     overlay.classList.remove("hidden");
 }
 
@@ -134,9 +138,8 @@ function hideElement(elem) {
 }
 
 // Get info from server
-function getInfoForImg(imgName) {
+async function getInfoForImg(imgName) {
-    let info = {author: "Philip Gaber", size: "1920x1080 @24MP", tools: "Sony a5100", date: "2019-10-10",
+    let res = await fetch(`/info/${imgName}`);
-                desc: "A couple words about the piece of art. I like trees, I am groot, Winter is coming!!!", price: "2999,99 €",
+    let info = await res.json();
-                blog: "./blog/some/url"};
     return info;
 }

inc/js/text.js

@@ -6,6 +6,7 @@
 * Version: 1.0
 */
 // set a global var "run" to true before running this function
+"use strict";
 async function flyingText(canvas) {
     // TODO: move to argument, load from backend
     let statements = ["Keyboard-Nerd", "🖤", "Emacs",

inc/js/zoom.js

@@ -6,6 +6,7 @@
  * Date: 2019-10-20
  * Version: 1.2
  */
+"use strict";
 function zoom(factor, imgName) {
     let winW = Math.max(document.documentElement.clientWidth, window.innerWidth);
     let img = document.getElementById(imgName);
@@ -40,7 +41,7 @@ function zoom(factor, imgName) {
     };
 
     let getOffsetToMiddle = function(cursor) {
-        let elem, x = y = 0;
+        let elem, x = 0, y = 0;
         cursor = cursor || window.event;
 
         // get elem bounding box

tmpl/gallery.html

@@ -10,9 +10,9 @@
     <img id="avatar" alt="" src="/inc/logo/avatar.svg"/>
 </section>
 <section id="exhibition">
-    {{range .Pics}}
+    {{range $key, $val := .Pics}}
     <div class="thumb-box">
-        <img alt="{{.Name}}" src="/inc/thumbs/t_{{.Name}}.jpg" data-img="{{.Name}}" class="thumb" />
+        <img alt="{{$val.Name}}" src="/inc/thumbs/t_{{$val.Name}}.jpg" data-img="{{$val.Name}}" class="thumb" />
     </div>
     {{end}}
 </section>