@tiddlywiki/mws 0.0.12 → 0.0.14

package/react-user-mgmt/public/stats.css

@@ -0,0 +1,597 @@
+html:not([data-theme=dark]) {
+  --bg: #fff;
+  --fg-on: #000;
+  --fg: #222;
+  --pre-dim: #777;
+  --pre-val: #870;
+  --pre: #222;
+  --bar-min-width: 1px
+}
+
+html[data-theme=dark] {
+  color-scheme: dark;
+  --bg: #191919;
+  --fg-on: #ddd;
+  --fg: #aaa;
+  --pre-dim: #999;
+  --pre-val: #cb8;
+  --pre: #ccc;
+  --bar-min-width: 3px
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme=light]) {
+      color-scheme:dark;
+      --bg: #191919;
+      --fg-on: #ddd;
+      --fg: #aaa;
+      --pre-dim: #999;
+      --pre-val: #cb8;
+      --pre: #ccc;
+      --bar-min-width: 3px
+  }
+}
+
+body {
+  margin: 50px;
+  font: 16px/20px sans-serif;
+  background: var(--bg);
+  color: var(--fg)
+}
+
+#startPanel {
+  margin: 10% auto 0
+}
+
+#resultsPanel {
+  display: none
+}
+
+section {
+  margin: auto;
+  max-width: 600px
+}
+
+#logo {
+  background-image: url(stats.svg);
+  background-size: 80px;
+  background-repeat: no-repeat;
+  padding-left: 100px;
+  display: inline-block;
+  text-align: left;
+  margin-bottom: 10px
+}
+
+h1 {
+  font-size: 80px;
+  line-height: 1em;
+  color: var(--fg-on);
+  margin: 0
+}
+
+blockquote {
+  font-size: 29px;
+  line-height: 1em;
+  margin: 5px 0;
+  font-style: italic
+}
+
+p {
+  margin: 20px 0
+}
+
+a,b {
+  color: var(--fg-on)
+}
+
+code {
+  font: 14px/20px Noto Sans Mono,monospace;
+  background: rgba(127,127,127,.2);
+  padding: 2px 4px;
+  margin-bottom: -2px;
+  border-radius: 3px
+}
+
+pre {
+  color: var(--pre);
+  font: 14px/20px Noto Sans Mono,monospace;
+  padding: 0;
+  margin: 0;
+  white-space: pre-wrap
+}
+
+.center {
+  text-align: center
+}
+
+.noscript {
+  color: #e24834
+}
+
+button {
+  padding: 5px 30px;
+  line-height: 1.5em;
+  background: none;
+  color: var(--fg);
+  border: 1px solid var(--fg);
+  border-radius: 100px;
+  cursor: pointer
+}
+
+button:active,button:hover {
+  color: var(--fg-on);
+  border: 1px solid var(--fg-on);
+  background: rgba(127,127,127,.2)
+}
+
+button:active {
+  padding: 6px 30px 4px;
+  background: rgba(0,0,0,.2)
+}
+
+#settingsPanel {
+  text-align: center
+}
+
+#settingsPanel .chartSwitcher {
+  position: relative;
+  margin: 50px 0;
+  display: flex;
+  justify-content: center
+}
+
+#settingsPanel .chartSwitcher:after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: .5em;
+  content: "";
+  display: block;
+  border: 1px solid #FFCF00;
+  z-index: -1
+}
+
+#settingsPanel .chartSwitcher span {
+  background: var(--bg);
+  padding: 0 1em;
+  border-left: 2px solid #FFCF00
+}
+
+#settingsPanel .chartSwitcher span:first-child {
+  border: none
+}
+
+#settingsPanel a {
+  text-decoration: none;
+  color: var(--fg)
+}
+
+#settingsPanel a:hover {
+  text-decoration: underline
+}
+
+#settingsPanel a.r {
+  font-weight: 700;
+  color: var(--fg-on)
+}
+
+.n {
+  max-width: 600px;
+  margin: auto
+}
+
+.p {
+  position: absolute;
+  background: black;
+  color: #999;
+  border-radius: 30px;
+  padding: 0 10px;
+  font-size: 14px;
+  line-height: 30px;
+  display: none;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  pointer-events: none;
+  z-index: 1;
+  white-space: pre
+}
+
+.p b {
+  color: #fff
+}
+
+#dragTarget {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  box-shadow: inset 0 0 0 10px #ffcf00;
+  z-index: 10
+}
+
+#summaryPanel {
+  text-align: center
+}
+
+#summaryPanel table {
+  border-collapse: collapse;
+  margin: auto
+}
+
+#summaryPanel td:first-child {
+  text-align: right
+}
+
+#summaryPanel h2 {
+  font-size: 30px;
+  line-height: 1em;
+  color: var(--fg-on);
+  margin: 0
+}
+
+#summaryPanel .l {
+  font-size: 30px;
+  padding: 0 30px
+}
+
+#summaryPanel .o {
+  display: inline-block;
+  margin: 20px auto 0;
+  white-space: nowrap;
+  text-decoration: none
+}
+
+#summaryPanel .o:hover .d {
+  text-decoration: underline
+}
+
+#summaryPanel .g {
+  display: inline-table;
+  vertical-align: middle;
+  margin: 0 .8em;
+  border: 1px solid #222
+}
+
+#summaryPanel .g>div {
+  height: 20px;
+  display: table-cell
+}
+
+#x {
+  padding-left: 1.6em;
+  line-height: 1.1em
+}
+
+#x .c {
+  display: inline-block;
+  vertical-align: middle;
+  width: 1.1em;
+  height: 1.1em;
+  margin-left: -1.6em;
+  margin-right: .5em;
+  border: 1px solid #222;
+  box-sizing: border-box
+}
+
+#x small {
+  display: block;
+  opacity: .5;
+  margin-bottom: 1em
+}
+
+#s {
+  margin: 0 -50px;
+  padding: 0 50px
+}
+
+#s main {
+  position: relative;
+  margin-top: 60px
+}
+
+#s canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  margin: auto;
+  padding-bottom: 50px
+}
+
+#s section {
+  margin-top: 30px;
+  min-height: 200px
+}
+
+#b {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 50px;
+  background: rgba(0,0,0,.6);
+  overflow-y: auto
+}
+
+#b .m {
+  position: relative;
+  margin: 0 auto;
+  padding: 50px;
+  max-width: 1000px;
+  background: var(--bg);
+  box-shadow: 0 10px 20px rgba(0,0,0,.6);
+  box-sizing: border-box;
+  border-radius: 20px
+}
+
+#b .m:focus {
+  outline: none
+}
+
+#b .h {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 50px;
+  text-decoration: none;
+  font-size: 30px;
+  line-height: 50px;
+  text-align: center;
+  color: var(--fg)
+}
+
+#b .h:hover {
+  font-size: 35px;
+  color: var(--fg-on)
+}
+
+#b .h:active {
+  font-size: 30px
+}
+
+#b h2 {
+  border-bottom: 2px solid #FFCF00;
+  padding-bottom: 4px;
+  margin: 0;
+  font-size: 20px;
+  line-height: 1.2em;
+  color: var(--fg-on)
+}
+
+#b .f {
+  position: relative;
+  border: 1px solid rgba(127,127,127,.5);
+  padding: 30px 10px 10px;
+  border-radius: 10px;
+  white-space: pre-wrap;
+  margin-top: 10px;
+  line-height: 22px
+}
+
+#b .u {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: rgba(127,127,127,.1);
+  border-right: 1px solid rgba(127,127,127,.5);
+  border-bottom: 1px solid rgba(127,127,127,.5);
+  border-top-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  padding: 5px 10px
+}
+
+#b pre {
+  padding: 0 0 0 30px
+}
+
+#b .v {
+  color: var(--pre-dim)
+}
+
+#b .w {
+  color: var(--fg-on)
+}
+
+#b .k {
+  color: var(--pre-val)
+}
+
+#b .e,#b .i {
+  position: relative
+}
+
+#b .e:after,#b .i:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 30px;
+  background: var(--fg);
+  opacity: .5
+}
+
+#b .e:after {
+  height: 40px;
+  --icon: url('data:image/svg+xml,<svg width="30" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 26L20.5 35L23 25.5L16.5 26Z"/><path d="M5 7C15 7 19 15 20 30" fill="none" stroke="black"/></svg>');
+  -webkit-mask-image: var(--icon);
+  mask-image: var(--icon)
+}
+
+#b .i:after {
+  height: 90px;
+  --icon: url('data:image/svg+xml,<svg width="30" height="90" xmlns="http://www.w3.org/2000/svg"><path d="M17 76L20 85L23 76H17Z"/><path d="M5 7C15 7 20 25 20 80" fill="none" stroke="black"/></svg>');
+  -webkit-mask-image: var(--icon);
+  mask-image: var(--icon)
+}
+
+#y main {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+  margin-bottom: 500px
+}
+
+#y .z {
+  margin-right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+
+#y canvas {
+  display: block;
+  margin-bottom: 30px
+}
+
+#y .F {
+  flex: 1;
+  max-width: 800px;
+  position: relative
+}
+
+#y .P {
+  font-size: 20px;
+  line-height: 1.2em;
+  display: flex;
+  white-space: pre;
+  margin: 0 10px 20px
+}
+
+#y .P .C {
+  flex: 1;
+  height: 20px
+}
+
+#y .P a {
+  opacity: .5;
+  text-decoration: none
+}
+
+#y .P a[href]:hover {
+  text-decoration: underline
+}
+
+#y .P a:last-child {
+  opacity: 1;
+  color: var(--fg-on);
+  font-weight: 700
+}
+
+#y .S {
+  width: 100%
+}
+
+#y .S .j {
+  display: table-row;
+  text-decoration: none;
+  line-height: 26px;
+  color: var(--fg)
+}
+
+#y .S .j.a {
+  background: rgba(127,127,127,.2);
+  color: var(--fg-on)
+}
+
+#y .S .j.a .t:after {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  background: rgba(255,255,255,.3)
+}
+
+#y .S .j>div {
+  display: table-cell
+}
+
+#y .S .M {
+  padding: 0 10px;
+  vertical-align: top;
+  white-space: pre
+}
+
+#y .S .N {
+  width: 100%;
+  padding-right: 100px
+}
+
+#y .S .t {
+  position: relative;
+  height: 27px;
+  box-shadow: inset 0 0 0 1px #222;
+  margin-bottom: -1px;
+  min-width: var(--bar-min-width)
+}
+
+#y .S .t.q {
+  min-width: 0
+}
+
+#y .S .T {
+  position: absolute;
+  right: -10px;
+  width: 0;
+  white-space: nowrap
+}
+
+#A main {
+  position: relative;
+  margin-top: 60px
+}
+
+#A canvas {
+  position: absolute;
+  left: -50px;
+  top: 0
+}
+
+#A section {
+  margin-top: 30px;
+  min-height: 500px
+}
+
+#warningsPanel {
+  max-width: 1000px;
+  margin: auto
+}
+
+#warningsPanel .B {
+  margin-top: 20px;
+  text-align: center
+}
+
+#warningsPanel .D {
+  display: none
+}
+
+#warningsPanel .E {
+  margin: 30px 0;
+  white-space: pre-wrap;
+  color: var(--fg-on)
+}
+
+#warningsPanel ul {
+  color: var(--fg);
+  margin: 5px 0 0
+}
+
+#warningsPanel .G {
+  opacity: .5
+}
+
+#warningsPanel pre a {
+  text-decoration: none
+}
+
+#warningsPanel pre a:hover {
+  text-decoration: underline
+}

package/react-user-mgmt/public/stats.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf8">
+  <title>esbuild - Bundle Size Analyzer</title>
+  <link rel="icon" type="image/svg+xml" href="stats.svg">
+  <link rel="stylesheet" href="stats.css">
+  <meta property="og:title" content="esbuild - Bundle Size Analyzer" />
+  <meta property="og:type" content="website" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  <div id="dragTarget"></div>
+  <div id="startPanel">
+    <section>
+      <div class="center">
+        <div id="logo">
+          <h1>esbuild</h1>
+          <blockquote>Bundle Size Analyzer</blockquote>
+        </div>
+      </div>
+      <p>
+        This page provides a way to visualize the contents of your esbuild bundle.
+        Add the <a href="/api/#metafile">metafile</a> option to your esbuild command, then import it using the button
+        below:
+      </p>
+      <p class="center">
+        <button id="importButton">Import your metafile...</button>
+      </p>
+      <p>
+        Or you can <a href="javascript:void 0" id="loadExample">load an example</a> to play around with the
+        visualization.
+      </p>
+      <noscript>
+        <p class="noscript">
+          &#x274C; This page requires JavaScript.
+          Please enable JavaScript and reload the page.
+        </p>
+      </noscript>
+    </section>
+  </div>
+  <div id="resultsPanel">
+    <div id="summaryPanel"></div>
+    <div id="warningsPanel"></div>
+    <div id="settingsPanel">
+      <div class="chartSwitcher">
+        <span><a id="useTreemap" href="javascript:void 0">Treemap Chart</a></span>
+        <span><a id="useSunburst" href="javascript:void 0">Sunburst Chart</a></span>
+        <span><a id="useFlame" href="javascript:void 0">Flame Chart</a></span>
+      </div>
+    </div>
+    <div id="chartPanel"></div>
+  </div>
+  <script src="stats.js"></script>
+</body>
+
+</html>