ebnf2railroad - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

CHANGELOG.md

@@ -7,2 +7,6 @@ # Changelog
 
+## [1.8.0] - 2018-11-26
+### Added
+- Dark and light color theme
+
 ## [1.7.0] - 2018-11-22
@@ -9,0 +13,0 @@ ### Added

package.json

 {
   "name": "ebnf2railroad",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "EBNF to Railroad diagram",
@@ -5,0 +5,0 @@ "keywords": [

src/report-html-template.js

@@ -26,4 +26,26 @@ const { Converter } = require("showdown");
 
+const currentDate = () => {
+  const date = new Date();
+  const pad = number => (number < 10 ? "0" + number : number);
+
+  return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(
+    date.getUTCDate()
+  )}T${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}`;
+};
+
 const documentContent = ({ title, contents, toc, singleRoot }) =>
-  `<header>
+  `
+  <script type="text/javascript">
+    const htmlTag = document.getElementsByTagName("html")[0];
+    const options = (document.location.search || "")
+      .slice(1)
+      .split("&")
+      .map(kv => kv.split("="))
+      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+
+    if (options["theme"]) {
+      htmlTag.classList.add("theme-" + options["theme"]);
+    }
+  </script>
+  <header>
     <h1>${title}</h1>
@@ -50,2 +72,5 @@ <button type="button"></button>
   </article>
+  <footer>
+    <p>Date: ${currentDate()} - <a href="?theme=dark">Dark</a> - <a href="?theme=light">Light</a></p>
+  </footer>
   </main>
@@ -58,3 +83,3 @@ <script type="text/javascript">
       if (event.target.tagName !== "A") return;
-      document.getElementsByTagName("html")[0].classList.remove("menu-open");
+      htmlTag.classList.remove("menu-open");
     });
@@ -78,5 +103,46 @@ </script>
     --itemHeadingBackground: #eee;
+    --background: white;
+    --borderColor: #ccc;
+    --textColor: #111;
+
     --diagramBackground: #f8f8f8;
+    --diagramLines: black;
+    --diagramText: black;
+    --terminalLines: black;
+    --terminalFill: #feffdf;
+    --nonTerminalLines: black;
+    --nonTerminalFill: #feffdf;
+    --specialSequenceLines: black;
+    --specialSequenceFill: #ffe79a;
+
+    --ebnfCodeBackground: #e8e8e8;
+    --ebnfIdentifier: #ef5a5a;
+    --ebnfTerminal: #ffa952;
+    --ebnfBaseColor: #777;
 }
 
+.theme-dark {
+    --subtleText: #777;
+    --highlightText: hotpink;
+    --itemHeadingBackground: #444;
+    --background: #333;
+    --borderColor: lightblue;
+    --textColor: #ddd;
+
+    --diagramBackground: #222;
+    --diagramLines: lightblue;
+    --diagramText: #a7d129;
+    --terminalLines: #a7d129;
+    --terminalFill: #3e432e;
+    --nonTerminalLines: #a7d129;
+    --nonTerminalFill: #3e432e;
+    --specialSequenceLines: #a7d129;
+    --specialSequenceFill: #616f39;
+
+    --ebnfCodeBackground: #3e432e;
+    --ebnfIdentifier: lightblue;
+    --ebnfTerminal: #a7d129;
+    --ebnfBaseColor: #ddd;
+}
+
 html {
@@ -89,2 +155,4 @@ font-family: sans-serif;
     padding: 0;
+    background: var(--background);
+    color: var(--textColor);
 }
@@ -105,3 +173,3 @@
 header {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--borderColor);
     padding: 1rem;
@@ -115,3 +183,2 @@ }
 main {
-    display: flex;
     overflow: hidden;
@@ -124,6 +191,6 @@ margin-left: 300px;
     top: 0;
-    height: 100vh;
+    max-height: 100vh;
     padding: 1rem 2rem 1rem 1rem;
     z-index: 5;
-    background: white;
+    background: var(--background);
     width: 300px;
@@ -154,5 +221,11 @@ float: left;
     padding: 1rem 2rem;
-    border-left: 1px solid #ccc;
+    border-left: 1px solid var(--borderColor);
 }
 
+article + footer {
+    padding: 1rem 2rem;
+    border-left: 1px solid var(--borderColor);
+    background: var(--itemHeadingBackground);
+}
+
 code {
@@ -194,3 +267,7 @@ width: 100%;
 /* Responsiveness */
-@media (max-width: 640px) {
+@media (max-width: 800px) {
+  body {
+    overflow-x: hidden;
+  }
+
   header {
@@ -230,8 +307,9 @@ padding: 0.5rem 1rem;
     opacity: 0;
-    transition: opacity 0.2s;
+    transition: opacity 0.2s, transform 0.2s;
     position: absolute;
     top: 0;
     right: 0;
+    transform: translateX(300px);
     padding-top: 3rem;
-    background: white;
+    background: var(--background);
     box-shadow: 0 0 0 1000000rem rgba(0, 0, 0, 0.35);
@@ -243,2 +321,3 @@ }
     opacity: 1;
+    transform: translateX(0px);
   }
@@ -255,2 +334,6 @@
   }
+  article + footer {
+    padding: 1rem;
+    border-left: 0;
+  }
 }
@@ -261,5 +344,5 @@
   padding: 1em;
-  background: rgb(255, 246, 209);
+  background: var(--ebnfCodeBackground);
   font-weight: bold;
-  color: #777;
+  color: var(--ebnfBaseColor);
   white-space: pre-wrap;
@@ -270,6 +353,6 @@ display: inline-block;
 .ebnf-identifier {
-  color: #990099;
+  color: var(--ebnfIdentifier);
 }
 .ebnf-terminal {
-  color: #009900;
+  color: var(--ebnfTerminal);
 }
@@ -291,3 +374,3 @@ .ebnf-non-terminal {
   stroke-width: 3;
-  stroke: black;
+  stroke: var(--diagramLines);
   fill: rgba(0,0,0,0);
@@ -298,2 +381,3 @@ }
   text-anchor: middle;
+  fill: var(--diagramText);
 }
@@ -316,3 +400,4 @@ svg.railroad-diagram text.diagram-text {
 svg.railroad-diagram g.special-sequence rect {
-  fill: #FFDB4D;
+  fill: var(--specialSequenceFill);
+  stroke: var(--specialSequenceLines);
 }
@@ -324,9 +409,10 @@ svg.railroad-diagram g.special-sequence text {
   stroke-width: 3;
-  stroke: black;
 }
 svg.railroad-diagram g.non-terminal rect {
-  fill: hsl(120,100%,90%);
+  fill: var(--nonTerminalFill);
+  stroke: var(--nonTerminalLines);
 }
 svg.railroad-diagram g.terminal rect {
-  fill: hsl(120,100%,90%);
+  fill: var(--terminalFill);
+  stroke: var(--terminalLines);
 }
@@ -333,0 +419,0 @@ svg.railroad-diagram path.diagram-text {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

86607

increased by2.97%

Lines of code

2293

increased by3.43%

No dependency changes