0.0.17

components/citation.js

@@ -8,12 +8,20 @@ export default function(dom, data) {
   }*/
 
   var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
-  citeTags.forEach(el => {
+  citeTags.forEach((el,n) => {
     var key = el.getAttribute("key");
     if (key) {
       var keys = key.split(",");
       var cite_string = inline_cite_short(keys);
-      el.innerHTML = cite_string;
+      el.innerHTML = `<span id="citation-${n}" class="citation">${cite_string}</span>`;
+      DistillHoverBox.bind(`#citation-${n}`, key)
+
+      DistillHoverBox.contentMap[key] = "";
+      keys.map((key,n) => {
+        if (n>0) DistillHoverBox.contentMap[key] += "<br>";
+        var cite_str = bibliography_cite(data.bibliography[key], true);
+        DistillHoverBox.contentMap[key] += cite_str;
+      })
     }
   });
 
@@ -57,7 +65,7 @@ export default function(dom, data) {
     return keys.map(cite_string).join(", ");
   }
 
-  function bibliography_cite(ent){
+  function bibliography_cite(ent, fancy){
     if (ent){
       var names = ent.author.split(" and ");
       var cite = "";
@@ -77,7 +85,11 @@ export default function(dom, data) {
         cite += name_strings[0]
       }
       cite += ", " + ent.year + ". "
-      cite += ent.title + ". "
+      if (fancy){
+        cite += "<b>" + ent.title + "</b>. "
+      } else {
+        cite += ent.title + ". "
+      }
       cite += (ent.journal || ent.booktitle || "")
       if ("volume" in ent){
         var issue = ent.issue || ent.number;
@@ -88,6 +100,9 @@ export default function(dom, data) {
         cite += ", pp. " + ent.pages
       }
       cite += ". "
+      if (fancy && ent.url && ent.url.slice(-4) == ".pdf") {
+        cite = `${cite} <a href="${ent.url}">[pdf]</a>`
+      }
       return cite
     } else {
       return "?";
@@ -107,3 +122,100 @@ export default function(dom, data) {
 
   }
 }
+
+// DistillHoverBox
+//=====================================
+
+function DistillHoverBox(key, pos){
+
+  if (!(key in DistillHoverBox.contentMap)){
+    console.error("No DistillHoverBox content registered for key", key);
+  }
+  if (key in DistillHoverBox.liveBoxes) {
+    console.error("There already exists a DistillHoverBox for key", key);
+  } else {
+    for (var k in DistillHoverBox.liveBoxes)
+      DistillHoverBox.liveBoxes[k].remove();
+    DistillHoverBox.liveBoxes[key] = this;
+  }
+  this.key = key;
+
+  var pretty = window.innerWidth > 600;
+
+  var padding = pretty? 18 : 12;
+  var outer_padding = pretty ? 18 : 0;
+  var bbox = document.querySelector("body").getBoundingClientRect();
+  var left = pos[0] - bbox.left, top = pos[1] - bbox.top;
+  var width = Math.min(window.innerWidth-2*outer_padding, 648);
+  left = Math.min(left, window.innerWidth-width-outer_padding);
+  width = width - 2*padding;
+
+  var str = `<div style="position: absolute;
+                          background-color: #FFF;
+                          opacity: 0.95;
+                          width: ${width}px;
+                          top: ${top}px;
+                          left: ${left}px;
+                          padding: ${padding}px;
+                          border-radius: ${pretty? 6 : 0}px;
+                          box-shadow: 0px 0px 18px 6px #777;" >
+              ${DistillHoverBox.contentMap[key]}
+              </div>`;
+
+  this.div = appendBody(str);
+
+  DistillHoverBox.bind (this.div, key);
+}
+
+DistillHoverBox.prototype.remove = function remove(){
+  if (this.div) this.div.remove();
+  if (this.timeout) clearTimeout(this.timeout);
+  delete DistillHoverBox.liveBoxes[this.key];
+}
+
+DistillHoverBox.prototype.stopTimeout = function stopTimeout() {
+  if (this.timeout) clearTimeout(this.timeout);
+}
+
+DistillHoverBox.prototype.extendTimeout = function extendTimeout(T) {
+  //console.log("extend", T)
+  var this_ = this;
+  this.stopTimeout();
+  this.timeout = setTimeout(() => this_.remove(), T);
+}
+
+DistillHoverBox.liveBoxes = {};
+DistillHoverBox.contentMap = {abc: "hello world!"};
+
+DistillHoverBox.bind = function bind(node, key) {
+  if (typeof node == "string"){
+    node = document.querySelector(node);
+  }
+  node.addEventListener("mouseover", () => {
+    var bbox = node.getBoundingClientRect();
+    if (!(key in DistillHoverBox.liveBoxes)){
+      new DistillHoverBox(key, [bbox.right, bbox.bottom]);
+    }
+    DistillHoverBox.liveBoxes[key].stopTimeout();
+  });
+  node.addEventListener("mouseout", () => {
+    if (key in DistillHoverBox.liveBoxes){
+      DistillHoverBox.liveBoxes[key].extendTimeout(250);
+    }
+  });
+
+}
+
+
+function appendBody(str){
+  var node = nodeFromString(str);
+  var body = document.querySelector("body");
+  body.appendChild(node);
+  return node;
+}
+
+function nodeFromString(str) {
+  var div = document.createElement("div");
+  div.innerHTML = str;
+  return div.firstChild;
+}

components/generate-crossref.js

@@ -9,118 +9,118 @@ export default function(data) {
   }
 
   var date = data.published;
-	var batch_timestamp = Math.floor(Date.now() / 1000);
+  var batch_timestamp = Math.floor(Date.now() / 1000);
-	var batch_id = data.authors.length ? data.authors[0].lastName.toLowerCase().slice(0,20) : "Anonymous";
+  var batch_id = data.authors.length ? data.authors[0].lastName.toLowerCase().slice(0,20) : "Anonymous";
-	    batch_id += "_" + date.getFullYear();
+      batch_id += "_" + date.getFullYear();
-	    batch_id += "_" + data.title.split(" ")[0].toLowerCase().slice(0,20) + "_" +  batch_timestamp;
+      batch_id += "_" + data.title.split(" ")[0].toLowerCase().slice(0,20) + "_" +  batch_timestamp;
-	// generate XML
+  // generate XML
-	var crf_data =
+  var crf_data =
-		{doi_batch : [
+    {doi_batch : [
 
-			{ _attr: {
+      { _attr: {
-				version: "4.3.7",
+        version: "4.3.7",
-				xmlns: "http://www.crossref.org/schema/4.3.7",
+        xmlns: "http://www.crossref.org/schema/4.3.7",
-				"xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
+        "xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
-				"xsi:schemaLocation": "http://www.crossref.org/schema/4.3.7 http://www.crossref.org/schemas/crossref4.3.7.xsd",
+        "xsi:schemaLocation": "http://www.crossref.org/schema/4.3.7 http://www.crossref.org/schemas/crossref4.3.7.xsd",
-			}},
+      }},
 
-			{ head: [
+      { head: [
-				{doi_batch_id: batch_id},
+        {doi_batch_id: batch_id},
-				{timestamp: batch_timestamp},
+        {timestamp: batch_timestamp},
-				{depositor: [
+        {depositor: [
-					{depositor_name: "Distill Admin"},
+          {depositor_name: data.journal.depositorName},
-					{email_address: "admin@distill.pub"},
+          {email_address: data.journal.email},
-				]},
+        ]},
-				{registrant: "Distill"},
+        {registrant: "Distill"},
-			]},
+      ]},
 
-			{body: [
+      {body: [
-				{journal: [
+        {journal: [
 
-					{journal_metadata: [
+          {journal_metadata: [
-						{full_title: data.journal.full_title || data.journal.title},
+            {full_title: data.journal.full_title || data.journal.title},
-						{abbrev_title: data.journal.abbrev_title || data.journal.title || data.journal.full_title},
+            {abbrev_title: data.journal.abbrev_title || data.journal.title || data.journal.full_title},
-						{doi_data: [
+            {doi_data: [
-							{doi: data.journal.doi},
+              {doi: data.journal.doi},
-							{resource: data.journal.url},
+              {resource: data.journal.url},
-						]},
+            ]},
-					]},
+          ]},
 
-					{journal_issue: [
+          {journal_issue: [
-						{publication_date: [
+            {publication_date: [
-							{month: date.getMonth()+1},
+              {month: date.getMonth()+1},
-							{year: date.getFullYear()},
+              {year: date.getFullYear()},
-						]},
+            ]},
-						{journal_volume: [
+            {journal_volume: [
-							{volume: data.volume},
+              {volume: data.volume},
-						]},
+            ]},
-						{issue: data.issue},
+            {issue: data.issue},
-					]},
+          ]},
 
-					{journal_article: [
+          {journal_article: [
-						{titles: [
+            {titles: [
-							{title: data.title},
+              {title: data.title},
-						]},
+            ]},
-						{ contributors:
+            { contributors:
-							data.authors.map((author, ind) => (
+              data.authors.map((author, ind) => (
-								{person_name: [
+                {person_name: [
-									{ _attr: {
+                  { _attr: {
-										contributor_role: "author",
+                    contributor_role: "author",
-										sequence: (ind == 0)? "first" : "additional"
+                    sequence: (ind == 0)? "first" : "additional"
-									}},
+                  }},
-									{given_name: author.firstName},
+                  {given_name: author.firstName},
-									{surname: author.lastName},
+                  {surname: author.lastName},
-									{affiliation: author.affiliation}
+                  {affiliation: author.affiliation}
-									// TODO: ORCID?
+                  // TODO: ORCID?
-								]}
+                ]}
-							))
+              ))
-						},
+            },
-						{publication_date: [
+            {publication_date: [
-								{month: date.getMonth()+1},
+                {month: date.getMonth()+1},
-								{day: date.getDate()},
+                {day: date.getDate()},
-								{year: date.getFullYear()}
+                {year: date.getFullYear()}
-						]},
+            ]},
-						{ publisher_item: [
+            { publisher_item: [
-							{item_number: data.doi}
+              {item_number: data.doi}
-						]},
+            ]},
-						{doi_data: [
+            {doi_data: [
-							{doi: data.doi},
+              {doi: data.doi},
-							//{timestamp: ""},
+              //{timestamp: ""},
-							{resource: data.url},
+              {resource: data.url},
-						]},
+            ]},
-						{citation_list:
+            {citation_list:
-							data.citations.map(key =>
+              data.citations.map(key =>
                   citation_xml(key, data.bibliography[key]))
-						}
+            }
 
-					]},
+          ]},
 
-				]},
+        ]},
-			]},
+      ]},
-		]};
+    ]};
 
   return xml(crf_data);
 }
 
 function citation_xml(key, ent){
-	if (ent == undefined) return {};
+  if (ent == undefined) return {};
-	var info = [];
+  var info = [];
-	info.push({_attr: {key: key}});
+  info.push({_attr: {key: key}});
-	if ("title" in ent)
+  if ("title" in ent)
-		info.push({article_title: ent.title});
+    info.push({article_title: ent.title});
-	if ("author" in ent)
+  if ("author" in ent)
-		info.push({author: ent.author.split(" and ")[0].split(",")[0].trim()});
+    info.push({author: ent.author.split(" and ")[0].split(",")[0].trim()});
-	if ("journal" in ent)
+  if ("journal" in ent)
-		info.push({journal_title: ent.journal});
+    info.push({journal_title: ent.journal});
-	if ("booktitle" in ent)
+  if ("booktitle" in ent)
-		info.push({volume_title: ent.booktitle});
+    info.push({volume_title: ent.booktitle});
-	if ("volume" in ent)
+  if ("volume" in ent)
-		info.push({volume: ent.volume});
+    info.push({volume: ent.volume});
-	if ("issue" in ent)
+  if ("issue" in ent)
-		info.push({issue: ent.issue});
+    info.push({issue: ent.issue});
-	if ("doi" in ent)
+  if ("doi" in ent)
-		info.push({doi: ent.doi});
+    info.push({doi: ent.doi});
-	return {citation: info}
+  return {citation: info}
 }
 
 function xml(obj) {

dist/template.js

@@ -4408,12 +4408,20 @@ var citation = function(dom, data) {
   }*/
 
   var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
-  citeTags.forEach(function (el) {
+  citeTags.forEach(function (el,n) {
     var key = el.getAttribute("key");
     if (key) {
       var keys = key.split(",");
       var cite_string = inline_cite_short(keys);
-      el.innerHTML = cite_string;
+      el.innerHTML = "<span id=\"citation-" + n + "\" class=\"citation\">" + cite_string + "</span>";
+      DistillHoverBox.bind(("#citation-" + n), key);
+
+      DistillHoverBox.contentMap[key] = "";
+      keys.map(function (key,n) {
+        if (n>0) { DistillHoverBox.contentMap[key] += "<br>"; }
+        var cite_str = bibliography_cite(data.bibliography[key], true);
+        DistillHoverBox.contentMap[key] += cite_str;
+      });
     }
   });
 
@@ -4457,7 +4465,7 @@ var citation = function(dom, data) {
     return keys.map(cite_string).join(", ");
   }
 
-  function bibliography_cite(ent){
+  function bibliography_cite(ent, fancy){
     if (ent){
       var names = ent.author.split(" and ");
       var cite = "";
@@ -4477,7 +4485,11 @@ var citation = function(dom, data) {
         cite += name_strings[0];
       }
       cite += ", " + ent.year + ". ";
-      cite += ent.title + ". ";
+      if (fancy){
+        cite += "<b>" + ent.title + "</b>. ";
+      } else {
+        cite += ent.title + ". ";
+      }
       cite += (ent.journal || ent.booktitle || "");
       if ("volume" in ent){
         var issue = ent.issue || ent.number;
@@ -4488,6 +4500,9 @@ var citation = function(dom, data) {
         cite += ", pp. " + ent.pages;
       }
       cite += ". ";
+      if (fancy && ent.url && ent.url.slice(-4) == ".pdf") {
+        cite = cite + " <a href=\"" + (ent.url) + "\">[pdf]</a>";
+      }
       return cite
     } else {
       return "?";
@@ -4508,6 +4523,93 @@ var citation = function(dom, data) {
   }
 };
 
+// DistillHoverBox
+//=====================================
+
+function DistillHoverBox(key, pos){
+
+  if (!(key in DistillHoverBox.contentMap)){
+    console.error("No DistillHoverBox content registered for key", key);
+  }
+  if (key in DistillHoverBox.liveBoxes) {
+    console.error("There already exists a DistillHoverBox for key", key);
+  } else {
+    for (var k in DistillHoverBox.liveBoxes)
+      { DistillHoverBox.liveBoxes[k].remove(); }
+    DistillHoverBox.liveBoxes[key] = this;
+  }
+  this.key = key;
+
+  var pretty = window.innerWidth > 600;
+
+  var padding = pretty? 18 : 12;
+  var outer_padding = pretty ? 18 : 0;
+  var bbox = document.querySelector("body").getBoundingClientRect();
+  var left = pos[0] - bbox.left, top = pos[1] - bbox.top;
+  var width = Math.min(window.innerWidth-2*outer_padding, 648);
+  left = Math.min(left, window.innerWidth-width-outer_padding);
+  width = width - 2*padding;
+
+  var str = "<div style=\"position: absolute;\n                          background-color: #FFF;\n                          opacity: 0.95;\n                          width: " + width + "px;\n                          top: " + top + "px;\n                          left: " + left + "px;\n                          padding: " + padding + "px;\n                          border-radius: " + (pretty? 6 : 0) + "px;\n                          box-shadow: 0px 0px 18px 6px #777;\" >\n              " + (DistillHoverBox.contentMap[key]) + "\n              </div>";
+
+  this.div = appendBody(str);
+
+  DistillHoverBox.bind (this.div, key);
+}
+
+DistillHoverBox.prototype.remove = function remove(){
+  if (this.div) { this.div.remove(); }
+  if (this.timeout) { clearTimeout(this.timeout); }
+  delete DistillHoverBox.liveBoxes[this.key];
+};
+
+DistillHoverBox.prototype.stopTimeout = function stopTimeout() {
+  if (this.timeout) { clearTimeout(this.timeout); }
+};
+
+DistillHoverBox.prototype.extendTimeout = function extendTimeout(T) {
+  //console.log("extend", T)
+  var this_ = this;
+  this.stopTimeout();
+  this.timeout = setTimeout(function () { return this_.remove(); }, T);
+};
+
+DistillHoverBox.liveBoxes = {};
+DistillHoverBox.contentMap = {abc: "hello world!"};
+
+DistillHoverBox.bind = function bind(node, key) {
+  if (typeof node == "string"){
+    node = document.querySelector(node);
+  }
+  node.addEventListener("mouseover", function () {
+    var bbox = node.getBoundingClientRect();
+    if (!(key in DistillHoverBox.liveBoxes)){
+      new DistillHoverBox(key, [bbox.right, bbox.bottom]);
+    }
+    DistillHoverBox.liveBoxes[key].stopTimeout();
+  });
+  node.addEventListener("mouseout", function () {
+    if (key in DistillHoverBox.liveBoxes){
+      DistillHoverBox.liveBoxes[key].extendTimeout(250);
+    }
+  });
+
+};
+
+
+function appendBody(str){
+  var node = nodeFromString(str);
+  var body = document.querySelector("body");
+  body.appendChild(node);
+  return node;
+}
+
+function nodeFromString(str) {
+  var div = document.createElement("div");
+  div.innerHTML = str;
+  return div.firstChild;
+}
+
 var marked = createCommonjsModule(function (module, exports) {
 /**
  * marked - a markdown parser
@@ -6664,104 +6766,104 @@ var generateCrossref = function(data) {
   }
 
   var date = data.published;
-	var batch_timestamp = Math.floor(Date.now() / 1000);
+  var batch_timestamp = Math.floor(Date.now() / 1000);
-	var batch_id = data.authors.length ? data.authors[0].lastName.toLowerCase().slice(0,20) : "Anonymous";
+  var batch_id = data.authors.length ? data.authors[0].lastName.toLowerCase().slice(0,20) : "Anonymous";
-	    batch_id += "_" + date.getFullYear();
+      batch_id += "_" + date.getFullYear();
-	    batch_id += "_" + data.title.split(" ")[0].toLowerCase().slice(0,20) + "_" +  batch_timestamp;
+      batch_id += "_" + data.title.split(" ")[0].toLowerCase().slice(0,20) + "_" +  batch_timestamp;
-	// generate XML
+  // generate XML
-	var crf_data =
+  var crf_data =
-		{doi_batch : [
+    {doi_batch : [
 
-			{ _attr: {
+      { _attr: {
-				version: "4.3.7",
+        version: "4.3.7",
-				xmlns: "http://www.crossref.org/schema/4.3.7",
+        xmlns: "http://www.crossref.org/schema/4.3.7",
-				"xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
+        "xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
-				"xsi:schemaLocation": "http://www.crossref.org/schema/4.3.7 http://www.crossref.org/schemas/crossref4.3.7.xsd",
+        "xsi:schemaLocation": "http://www.crossref.org/schema/4.3.7 http://www.crossref.org/schemas/crossref4.3.7.xsd",
-			}},
+      }},
 
-			{ head: [
+      { head: [
-				{doi_batch_id: batch_id},
+        {doi_batch_id: batch_id},
-				{timestamp: batch_timestamp},
+        {timestamp: batch_timestamp},
-				{depositor: [
+        {depositor: [
-					{depositor_name: "Distill Admin"},
+          {depositor_name: data.journal.depositorName},
-					{email_address: "admin@distill.pub"} ]},
+          {email_address: data.journal.email} ]},
-				{registrant: "Distill"} ]},
+        {registrant: "Distill"} ]},
 
-			{body: [
+      {body: [
-				{journal: [
+        {journal: [
 
-					{journal_metadata: [
+          {journal_metadata: [
-						{full_title: data.journal.full_title || data.journal.title},
+            {full_title: data.journal.full_title || data.journal.title},
-						{abbrev_title: data.journal.abbrev_title || data.journal.title || data.journal.full_title},
+            {abbrev_title: data.journal.abbrev_title || data.journal.title || data.journal.full_title},
-						{doi_data: [
+            {doi_data: [
-							{doi: data.journal.doi},
+              {doi: data.journal.doi},
-							{resource: data.journal.url} ]} ]},
+              {resource: data.journal.url} ]} ]},
 
-					{journal_issue: [
+          {journal_issue: [
-						{publication_date: [
+            {publication_date: [
-							{month: date.getMonth()+1},
+              {month: date.getMonth()+1},
-							{year: date.getFullYear()} ]},
+              {year: date.getFullYear()} ]},
-						{journal_volume: [
+            {journal_volume: [
-							{volume: data.volume} ]},
+              {volume: data.volume} ]},
-						{issue: data.issue} ]},
+            {issue: data.issue} ]},
 
-					{journal_article: [
+          {journal_article: [
-						{titles: [
+            {titles: [
-							{title: data.title} ]},
+              {title: data.title} ]},
-						{ contributors:
+            { contributors:
-							data.authors.map(function (author, ind) { return (
+              data.authors.map(function (author, ind) { return (
-								{person_name: [
+                {person_name: [
-									{ _attr: {
+                  { _attr: {
-										contributor_role: "author",
+                    contributor_role: "author",
-										sequence: (ind == 0)? "first" : "additional"
+                    sequence: (ind == 0)? "first" : "additional"
-									}},
+                  }},
-									{given_name: author.firstName},
+                  {given_name: author.firstName},
-									{surname: author.lastName},
+                  {surname: author.lastName},
-									{affiliation: author.affiliation}
+                  {affiliation: author.affiliation}
-									// TODO: ORCID?
+                  // TODO: ORCID?
-								]}
+                ]}
-							); })
+              ); })
-						},
+            },
-						{publication_date: [
+            {publication_date: [
-								{month: date.getMonth()+1},
+                {month: date.getMonth()+1},
-								{day: date.getDate()},
+                {day: date.getDate()},
-								{year: date.getFullYear()}
+                {year: date.getFullYear()}
-						]},
+            ]},
-						{ publisher_item: [
+            { publisher_item: [
-							{item_number: data.doi}
+              {item_number: data.doi}
-						]},
+            ]},
-						{doi_data: [
+            {doi_data: [
-							{doi: data.doi},
+              {doi: data.doi},
-							//{timestamp: ""},
+              //{timestamp: ""},
-							{resource: data.url} ]},
+              {resource: data.url} ]},
-						{citation_list:
+            {citation_list:
-							data.citations.map(function (key) { return citation_xml(key, data.bibliography[key]); })
+              data.citations.map(function (key) { return citation_xml(key, data.bibliography[key]); })
-						}
+            }
 
-					]} ]} ]} ]};
+          ]} ]} ]} ]};
 
   return xml(crf_data);
 };
 
 function citation_xml(key, ent){
-	if (ent == undefined) { return {}; }
+  if (ent == undefined) { return {}; }
-	var info = [];
+  var info = [];
-	info.push({_attr: {key: key}});
+  info.push({_attr: {key: key}});
-	if ("title" in ent)
+  if ("title" in ent)
-		{ info.push({article_title: ent.title}); }
+    { info.push({article_title: ent.title}); }
-	if ("author" in ent)
+  if ("author" in ent)
-		{ info.push({author: ent.author.split(" and ")[0].split(",")[0].trim()}); }
+    { info.push({author: ent.author.split(" and ")[0].split(",")[0].trim()}); }
-	if ("journal" in ent)
+  if ("journal" in ent)
-		{ info.push({journal_title: ent.journal}); }
+    { info.push({journal_title: ent.journal}); }
-	if ("booktitle" in ent)
+  if ("booktitle" in ent)
-		{ info.push({volume_title: ent.booktitle}); }
+    { info.push({volume_title: ent.booktitle}); }
-	if ("volume" in ent)
+  if ("volume" in ent)
-		{ info.push({volume: ent.volume}); }
+    { info.push({volume: ent.volume}); }
-	if ("issue" in ent)
+  if ("issue" in ent)
-		{ info.push({issue: ent.issue}); }
+    { info.push({issue: ent.issue}); }
-	if ("doi" in ent)
+  if ("doi" in ent)
-		{ info.push({doi: ent.doi}); }
+    { info.push({doi: ent.doi}); }
-	return {citation: info}
+  return {citation: info}
 }
 
 function xml(obj) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.js",
   "scripts": {