website: small fixes

website/scripts/chart.js

@@ -39,6 +39,30 @@ export function init({
 
   const scale = signals.createMemo(() => selected().scale);
 
+  elements.charts.append(utils.dom.createShadow("left"));
+  elements.charts.append(utils.dom.createShadow("right"));
+
+  const { headerElement, titleElement, descriptionElement } =
+    utils.dom.createHeader({
+      title: selected().title,
+      description: selected().serializedPath,
+    });
+  elements.charts.append(headerElement);
+  signals.createEffect(selected, (option) => {
+    titleElement.innerHTML = option.title;
+    descriptionElement.innerHTML = option.serializedPath;
+  });
+
+  const div = window.document.createElement("div");
+  elements.charts.append(div);
+
+  const legendElement = window.document.createElement("legend");
+  div.append(legendElement);
+
+  const chartListElement = window.document.createElement("div");
+  chartListElement.classList.add("chart-list");
+  div.append(chartListElement);
+
   /**
    * @returns {TimeRange}
    */
@@ -362,7 +386,7 @@ export function init({
       });
     }
 
-    elements.legend.prepend(div);
+    legendElement.prepend(div);
 
     const { input, label } = utils.dom.createLabeledInput({
       inputId: `legend-${series.title}`,
@@ -841,7 +865,7 @@ export function init({
 
     charts = chartsBlueprints.map((seriesBlueprints, chartIndex) => {
       const { chartDiv, unitName, chartMode } = createChartDiv(
-        elements.chartsChartList,
+        chartListElement,
         chartIndex,
       );
 
@@ -1167,16 +1191,14 @@ export function init({
   }
 
   function resetLegendElement() {
-    elements.legend.innerHTML = "";
+    legendElement.innerHTML = "";
   }
 
   function resetChartListElement() {
     while (
-      elements.chartsChartList.lastElementChild?.classList.contains(
-        "chart-wrapper",
-      )
+      chartListElement.lastElementChild?.classList.contains("chart-wrapper")
     ) {
-      elements.chartsChartList.lastElementChild?.remove();
+      chartListElement.lastElementChild?.remove();
     }
   }
 

website/scripts/main.js

@@ -1102,7 +1102,6 @@ const utils = {
     createSelect({ id, list, signal }) {
       const select = window.document.createElement("select");
       select.name = id;
-      select.value = signal().value;
 
       /** @type {Record<string, VoidFunction>} */
       const setters = {};
@@ -1134,8 +1133,18 @@ const utils = {
         }
       });
 
+      select.value = signal().value;
+
       return select;
     },
+    /**
+     * @param {'left' | 'bottom' | 'top' | 'right'} position
+     */
+    createShadow(position) {
+      const div = window.document.createElement("div");
+      div.classList.add(`shadow-${position}`);
+      return div;
+    },
   },
   url: {
     chartParamsWhitelist: ["from", "to"],
@@ -1697,13 +1706,8 @@ const elements = {
   ),
   searchSmall: utils.dom.getElementById("search-small"),
   searchResults: utils.dom.getElementById("search-results"),
-  selectedTitle: utils.dom.getElementById("selected-title"),
-  selectedDescription: utils.dom.getElementById("selected-description"),
   selectors: utils.dom.getElementById("frame-selectors"),
-  chartsChartList: utils.dom.getElementById("charts-chart-list"),
-  legend: utils.dom.getElementById("legend"),
   style: getComputedStyle(window.document.documentElement),
-  selectedHeader: utils.dom.getElementById("selected-header"),
   charts: utils.dom.getElementById("charts"),
   simulation: utils.dom.getElementById("simulation"),
   livePrice: utils.dom.getElementById("live-price"),
@@ -1843,7 +1847,7 @@ function createColors(dark) {
     return getColor("avocado");
   }
   function lime() {
-    return getColor("line");
+    return getColor("lime");
   }
   function green() {
     return getColor("green");
@@ -2635,18 +2639,6 @@ packages.signals().then((signals) =>
               utils.url.replaceHistory({ pathname: option.id });
             }
 
-            const hideTop =
-              option.kind === "home" ||
-              option.kind === "pdf" ||
-              option.kind === "live-price" ||
-              option.kind === "converter" ||
-              option.kind === "moscow-time";
-
-            elements.selectedHeader.hidden = hideTop;
-
-            elements.selectedTitle.innerHTML = option.title;
-            elements.selectedDescription.innerHTML = option.serializedPath;
-
             /** @type {HTMLElement} */
             let element;
 

website/scripts/options.js

@@ -4992,7 +4992,7 @@ function createPartialOptions(colors) {
       tree: [
         {
           kind: "simulation",
-          title: "Simulation: Save In Bitcoin",
+          title: "Save In Bitcoin",
           name: "Save In Bitcoin",
         },
       ],
@@ -5063,6 +5063,24 @@ function createPartialOptions(colors) {
             },
           ],
         },
+        {
+          name: "Lyn Alden",
+          tree: [
+            {
+              name: "Analyzing Bitcoin Consensus: Risks in Protocol Upgrades",
+              pdf: "multi-author/bcap_v1.0.pdf",
+            },
+          ],
+        },
+        {
+          name: "Steve Lee",
+          tree: [
+            {
+              name: "Analyzing Bitcoin Consensus: Risks in Protocol Upgrades",
+              pdf: "multi-author/bcap_v1.0.pdf",
+            },
+          ],
+        },
       ],
     },
     {
@@ -5521,7 +5539,7 @@ export function initOptions({
           title = anyPartial.title;
         } else if ("pdf" in anyPartial) {
           kind = "pdf";
-          id = `${ids.fromString(anyPartial.name)}-pdf`;
+          id = `${path?.at(-1)?.name || ""}-${ids.fromString(anyPartial.name)}-pdf`;
           title = anyPartial.name;
           anyPartial.pdf = `/assets/pdfs/${anyPartial.pdf}`;
         } else if ("url" in anyPartial) {