@stencil/dev-server 0.0.19-1 → 5.0.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Binary file
@@ -0,0 +1,176 @@
1
+ <!doctype html>
2
+ <html dir="ltr" lang="en">
3
+ <head data-tmpl="tmpl-dir">
4
+ <meta charset="utf-8">
5
+ <title>{{title}}</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
8
+ <style>
9
+ * {
10
+ box-sizing: border-box;
11
+ }
12
+ html {
13
+ color-scheme: light dark;
14
+ }
15
+ body {
16
+ padding: 40px 140px;
17
+ margin: 0;
18
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
19
+ font-size: 14px;
20
+ background: #f9f8f8;
21
+ }
22
+ h1 {
23
+ margin-bottom: 15px;
24
+ font-size: 18px;
25
+ color: #343434;
26
+ }
27
+ h1 span {
28
+ padding: 0 6px;
29
+ font-weight: normal;
30
+ color: #9e9b9b;
31
+ }
32
+ a {
33
+ color: #555;
34
+ text-decoration: none;
35
+ }
36
+ a:hover {
37
+ color: #303030;
38
+ }
39
+ ul {
40
+ margin: 0;
41
+ padding: 0;
42
+ }
43
+ li {
44
+ list-style: none;
45
+ margin: 0;
46
+ padding: 0;
47
+ }
48
+ li a {
49
+ display: flex;
50
+ align-items: center;
51
+ gap: 6px;
52
+ margin: 0;
53
+ padding: 6px 12px;
54
+ min-width: 50%;
55
+ border-radius: 4px;
56
+ overflow: hidden;
57
+ white-space: nowrap;
58
+ }
59
+ li a:focus,
60
+ li a:hover {
61
+ color: #555;
62
+ background: rgba(221, 235, 255, 0.65);
63
+ }
64
+ .icon {
65
+ display: inline-block;
66
+ width: 14px;
67
+ min-height: 14px;
68
+ opacity: 0.6;
69
+ mask-repeat: no-repeat;
70
+ -webkit-mask-repeat: no-repeat;
71
+ }
72
+ .directory .icon {
73
+ mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjEzLjMzOCA5Nkg3NC42NjZDNTEuMTk3IDk2IDMyIDExNS4xOTggMzIgMTM4LjY2N3YyMzQuNjY2QzMyIDM5Ni44MDIgNTEuMTk3IDQxNiA3NC42NjYgNDE2aDM2Mi42NjhDNDYwLjgwMyA0MTYgNDgwIDM5Ni44MDIgNDgwIDM3My4zMzNWMTg2LjY2N0M0ODAgMTYzLjE5OCA0NjAuODAzIDE0NCA0MzcuMzM0IDE0NEgyNTYuMDA2bC00Mi42NjgtNDh6Ii8+PC9zdmc+);
74
+ -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjEzLjMzOCA5Nkg3NC42NjZDNTEuMTk3IDk2IDMyIDExNS4xOTggMzIgMTM4LjY2N3YyMzQuNjY2QzMyIDM5Ni44MDIgNTEuMTk3IDQxNiA3NC42NjYgNDE2aDM2Mi42NjhDNDYwLjgwMyA0MTYgNDgwIDM5Ni44MDIgNDgwIDM3My4zMzNWMTg2LjY2N0M0ODAgMTYzLjE5OCA0NjAuODAzIDE0NCA0MzcuMzM0IDE0NEgyNTYuMDA2bC00Mi42NjgtNDh6Ii8+PC9zdmc+);
75
+ background-position: 0px 2px;
76
+ background-color: currentColor;
77
+ }
78
+ .file .icon {
79
+ mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjg4IDQ4SDEzNmMtMjIuMDkyIDAtNDAgMTcuOTA4LTQwIDQwdjMzNmMwIDIyLjA5MiAxNy45MDggNDAgNDAgNDBoMjQwYzIyLjA5MiAwIDQwLTE3LjkwOCA0MC00MFYxNzZMMjg4IDQ4em0tMTYgMTQ0VjgwbDExMiAxMTJIMjcyeiIvPjwvc3ZnPg==);
80
+ -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjg4IDQ4SDEzNmMtMjIuMDkyIDAtNDAgMTcuOTA4LTQwIDQwdjMzNmMwIDIyLjA5MiAxNy45MDggNDAgNDAgNDBoMjQwYzIyLjA5MiAwIDQwLTE3LjkwOCA0MC00MFYxNzZMMjg4IDQ4em0tMTYgMTQ0VjgwbDExMiAxMTJIMjcyeiIvPjwvc3ZnPg==);
81
+ background-position: 0px 2px;
82
+ background-color: currentColor;
83
+ }
84
+ li a:hover .icon {
85
+ opacity: 1;
86
+ }
87
+
88
+ @media (max-width: 768px) {
89
+ body {
90
+ font-size: 13px;
91
+ line-height: 16px;
92
+ padding: 0;
93
+ }
94
+ h1 {
95
+ font-size: 2em;
96
+ line-height: 1.5em;
97
+ color: #fff;
98
+ background: #000;
99
+ padding: 15px 10px;
100
+ margin: 0;
101
+ }
102
+ h1 a {
103
+ color: #9e9e9e;
104
+ }
105
+ h1 a:hover {
106
+ color: #eaeaea;
107
+ }
108
+ ul {
109
+ border-top: 1px solid #cacaca;
110
+ }
111
+ li {
112
+ display: block;
113
+ border-bottom: 1px solid #cacaca;
114
+ font-size: 2em;
115
+ line-height: 1.2em;
116
+ }
117
+ li:nth-child(odd) {
118
+ background: #e0e0e0;
119
+ }
120
+ li a {
121
+ display: flex;
122
+ border-radius: 0;
123
+ padding: 15px 10px;
124
+ }
125
+ .icon {
126
+ width: 24px;
127
+ min-width: 24px;
128
+ min-height: 24px;
129
+ }
130
+ .directory .icon {
131
+ background-position: 0px 4px;
132
+ }
133
+ }
134
+
135
+ @media (prefers-color-scheme: dark) {
136
+ body {
137
+ background: #000;
138
+ }
139
+ h1 {
140
+ color: #eaeaea;
141
+ }
142
+ a {
143
+ color: #ccc;
144
+ }
145
+ a:hover {
146
+ color: #eaeaea;
147
+ }
148
+ li a:focus,
149
+ li a:hover {
150
+ color: #ccc;
151
+ background: #1c1c1c;
152
+ }
153
+ }
154
+
155
+ @media (max-width: 768px) and (prefers-color-scheme: dark) {
156
+ ul {
157
+ border-top: 1px solid #333;
158
+ }
159
+ li {
160
+ border-bottom: 1px solid #333;
161
+ }
162
+ li:nth-child(odd) {
163
+ background: #333;
164
+ }
165
+ }
166
+ </style>
167
+ <link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAB2AAAAdgB+lymcgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFGSURBVHic7dm9TcNQFMXxPzRpaZGYAEIqZkERkzAFSwARSyCGgA2QAqGhTZqYIrJkzEP4GfueyD4/6TavuufEH1IMZmZmZmZm382ABfAOFB3MJzANTfAPV8CGboJX5xU4CczRyox+wpfzDByFpWlhQX/hy3kCJlGBcnV1z/81D8BhUKYsW2IKKICboExZosJHzBtwT+bbR710H7MG5qmwB78UMEQb4AJ4qR7u5UOoJxPgun44pisAdm+44+rB2AooqF31Y7oFIPGDj62AH1yAegE1F6BeQM0FqBdQcwHqBdRcgHoBNRegXkDNBagXUHMB6gXUXIB6ATUXoF5ALVXAkP8W39YPUgV8BCyisqofpAp4DFhEpVG2c3ZfU9VfdPv4QnzWtKn5wEpYA5dNw5emwB2w3IMAbWcJ3AKnueHNzMzMzGzYvgAGC6SjvNl9rAAAAABJRU5ErkJggg==">
168
+ </head>
169
+ <body>
170
+ <main>
171
+ <h1>{{nav}}</h1>
172
+ <ul>{{files}}
173
+ </ul>
174
+ </main>
175
+ </body>
176
+ </html>
@@ -0,0 +1,147 @@
1
+ <!doctype html>
2
+ <html dir="ltr" lang="en">
3
+ <head data-tmpl="tmpl-initial-load">
4
+ <meta charset="utf-8">
5
+ <script>
6
+ if ('serviceWorker' in navigator) {
7
+ navigator.serviceWorker.getRegistration().then(function(registration) {
8
+ if (registration) {
9
+ registration.unregister().then(function(hasUnregistered) {
10
+ if (hasUnregistered) {
11
+ console.log('unregistered service worker');
12
+ }
13
+ });
14
+ }
15
+ }).catch(function(err) {
16
+ console.error(err.message || err);
17
+ });
18
+ }
19
+ </script>
20
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
21
+ <meta http-equiv="x-ua-compatible" content="IE=Edge">
22
+ <title>Initializing First Build...</title>
23
+ <link rel="shortcut icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAAjVBMVEUAAAD8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjL8kjLn7xn3AAAALnRSTlMAsFBgAaDxfPpAdTMcD/fs47kDBhVXJQpvLNbInIiBRvSqIb+TZ2OOONxdzUxpgKSpAAAAA69JREFUeNrt3FtvskAQxvERFQXFioqnCkqth572+3+8947dN00TliF5ZpP53ZOAveg/OzCklFJKKaWUUkoppQTZm77cCGFo+jIhhG/TlwchJAvTk/GIAA6x6Um+JoDti+nJ644A5h+mJ8eMALKj6cnHnAB2r80NLJ4jf3Vz+cuWANZ5cwPTM/l7by6PZwQwGptGQf4q++dLCOHdNIbkb2IvjwjAvYEf8pe6j4/wYxopr/9SQih4BXa3l5eEcJ7a++c9/gkSQE8bcCWvXwcrAjjYADrxHv8KCbi3JasgD5fm8i9IAG1swMXzDv0X2wDaEED21dzA5UDeVoPm8uUbAayvvAI42YA7EIDzA5pv8lc6/UoAoxMv4CZuvyKUpnHn9VNBAG6B7XkBtCeEO6/AbvbyihAiXsB92svfCcA9wap4j19DAmgWs37AZCrnBKvu8vgX9AmWE3BZh/6L7QkWJIA2RxtwHQpml9sAQp9gXWbkbxz4CdYDfIK1qk1j3IV9fPgJFlNECJXhYfSfsBHkhBCKwEd452nYI7wncwQJP8GKTU+uO0I4D/uSkVJKqXAkA5nK9icoIi3nrU9QRHrZtj5BESmetT5BEantPCh7NTJFrUdgMg1bj8BkSv1HYJ8RmjMQKf1HYDdC+/R/IyQFzbD4AxH+CIyPPxCJoEdQ/IFIMgXNEPkDkd8jMLQs5wRcTXA1J+By/BGO+0ovYwQGU3kPRLJfIzCkCSfgpgmhpc5AxD/gIkLb8wKO0DTgoNyaGQQecNfQAy7TgGtHA04DLtyA24UecHngAVdrwIkJuAitU8DJ1Dbghkam9gEnU+uAWxiRjhsdoXagI1TPgKNyIBO+ZpRSSrW3HfblTAA9/juPDwTAfiMK9VG3PY/hwX7Ubc9j+AoCWNWGp+NSH4HflE2IgXUEGPI3TTfmN4ndv2kSsRUJvpUn4W1FShbYb5rc84ySAtzKs3W3IgW4lWfO24q0zsFbebIjaysSjbtt5RHzUf0DHHCrAW8gVYEDzl0LGYW4lefB24uYQgOOfwN7dMANeW/k3DkBJ2CrUNE54GRsFYIHnPNR+iPEgHPWKo5DDDhnrWKeBRhwzlrFeNtlq5CgtYqzAAPODaBzgAH331rFAAOOqsDXKjL3IqboN7ILJ4BCDDh3r3SIAfd0AijEgHP3So/8wQNuvjRBbxVij5A6Bpy8EZJnwIkbIfkFnLwRkm/ASRshXbwDTtYICRRwt7BHqEoppZRSSimllFLqD/8AOXJZHefotiIAAAAASUVORK5CYII=">
24
+ <style>
25
+ * {
26
+ box-sizing: border-box;
27
+ }
28
+ html {
29
+ color-scheme: dark light;
30
+ }
31
+ body {
32
+ position: absolute;
33
+ padding: 0;
34
+ margin: 0;
35
+ width: 100%;
36
+ height: 100%;
37
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
38
+ }
39
+ .toast {
40
+ position: absolute;
41
+ top: 12px;
42
+ right: 10px;
43
+ left: 10px;
44
+ margin: auto;
45
+ max-width: 700px;
46
+ border-radius: 3px;
47
+ background: rgba(0, 0, 0, .9);
48
+ transform: translate3d(0px, -60px, 0px);
49
+ transition: transform 75ms ease-out;
50
+ pointer-events: none;
51
+ }
52
+ .active {
53
+ transform: translate3d(0px, 0px, 0px);
54
+ }
55
+ .content {
56
+ display: flex;
57
+ align-items: center;
58
+ pointer-events: auto;
59
+ }
60
+ .message {
61
+ flex: 1;
62
+ padding: 15px;
63
+ font-size: 14px;
64
+ color: #fff;
65
+ }
66
+ .spinner {
67
+ position: relative;
68
+ display: inline-block;
69
+ width: 56px;
70
+ height: 28px;
71
+ }
72
+ svg:not(:root) {
73
+ overflow: hidden;
74
+ }
75
+ svg {
76
+ position: absolute;
77
+ top: 0;
78
+ left: 0;
79
+ width: 100%;
80
+ height: 100%;
81
+ transform: translateZ(0);
82
+ animation: rotate 600ms linear infinite;
83
+ }
84
+ @keyframes rotate {
85
+ 0% {
86
+ transform: rotate(0deg);
87
+ }
88
+ 100% {
89
+ transform: rotate(360deg);
90
+ }
91
+ }
92
+ svg circle {
93
+ fill: transparent;
94
+ stroke: white;
95
+ stroke-width: 4px;
96
+ stroke-dasharray: 128px;
97
+ stroke-dashoffset: 82px;
98
+ }
99
+ .logs {
100
+ position: absolute;
101
+ top: 50px;
102
+ right: 10px;
103
+ left: 10px;
104
+ margin: auto;
105
+ max-width: 700px;
106
+ padding: 32px;
107
+ line-height: 1.5;
108
+ }
109
+
110
+ @media (prefers-color-scheme: dark) {
111
+ .toast {
112
+ background: rgb(49, 49, 49, .9);
113
+ }
114
+ }
115
+ </style>
116
+ </head>
117
+ <body>
118
+
119
+ <div class="toast">
120
+ <div class="content">
121
+ <div class="message">Initializing First Build...</div>
122
+ <div class="spinner">
123
+ <svg viewBox="0 0 64 64"><circle transform="translate(32,32)" r="26"></circle></svg>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="logs">
129
+ <pre id="log-output"></pre>
130
+ </div>
131
+
132
+ <script>
133
+ setTimeout(function() {
134
+ document.querySelector('.toast').classList.add('active');
135
+ }, 100);
136
+
137
+ var logOutput = document.getElementById('log-output');
138
+ window.addEventListener('devserver:buildlog', function(ev) {
139
+ var buildLog = ev.detail;
140
+ if (buildLog && buildLog.messages) {
141
+ logOutput.innerText = buildLog.messages.join('\n');
142
+ }
143
+ });
144
+ </script>
145
+
146
+ </body>
147
+ </html>
@@ -0,0 +1,61 @@
1
+ /**
2
+ * Worker thread entry point for dev server.
3
+ * This file is the main entry for the forked child process that runs the HTTP/WebSocket server.
4
+ * It communicates with the parent process via IPC messages.
5
+ */
6
+
7
+ import { initServerProcess } from './index.mjs'
8
+
9
+ let closeTmr = null
10
+
11
+ /**
12
+ * Handle errors when sending messages to parent process
13
+ */
14
+ const sendHandle = (err) => {
15
+ if (err && err.code === 'ERR_IPC_CHANNEL_CLOSED') {
16
+ // Parent process closed the IPC channel, exit cleanly
17
+ process.exit(0)
18
+ }
19
+ }
20
+
21
+ /**
22
+ * Initialize the server process and set up message passing
23
+ */
24
+ const receiveMessageFromMain = initServerProcess((msg) => {
25
+ // Send message from worker going to main
26
+ process.send(msg, sendHandle)
27
+
28
+ if (msg.serverClosed) {
29
+ clearTimeout(closeTmr)
30
+ process.exit(0)
31
+ }
32
+ })
33
+
34
+ /**
35
+ * Receive messages from the main process
36
+ */
37
+ process.on('message', (msg) => {
38
+ if (msg && msg.closeServer) {
39
+ // Set a timeout to force exit if graceful shutdown takes too long
40
+ closeTmr = setTimeout(() => {
41
+ process.exit(0)
42
+ }, 5000)
43
+ }
44
+
45
+ receiveMessageFromMain(msg)
46
+ })
47
+
48
+ /**
49
+ * Handle uncaught promise rejections and report to main process
50
+ */
51
+ process.on('unhandledRejection', (e) => {
52
+ process.send(
53
+ {
54
+ error: {
55
+ message: 'unhandledRejection: ' + e,
56
+ stack: typeof e.stack === 'string' ? e.stack : null,
57
+ },
58
+ },
59
+ sendHandle
60
+ )
61
+ })
package/package.json CHANGED
@@ -1,63 +1,58 @@
1
1
  {
2
2
  "name": "@stencil/dev-server",
3
- "version": "0.0.19-1",
4
- "description": "Tiny LiveReload server that watches a single directory",
5
- "main": "dist/index.js",
6
- "bin": {
7
- "stencil-dev-server": "./bin/stencil-dev-server"
8
- },
9
- "scripts": {
10
- "dev": "tsc -w -p .",
11
- "build": "tsc -p .",
12
- "test": "jest --runInBand",
13
- "deploy": "npm run build && np"
14
- },
15
- "files": [
16
- "assets/",
17
- "bin/",
18
- "dist/",
19
- "LICENSE",
20
- "README.md"
3
+ "description": "Development server for Stencil with DOM-based HMR",
4
+ "author": "StencilJs Contributors",
5
+ "homepage": "https://stenciljs.com/",
6
+ "keywords": [
7
+ "web components",
8
+ "stencil",
9
+ "dev server",
10
+ "hmr",
11
+ "hot module replacement"
21
12
  ],
13
+ "version": "5.0.0-next.0",
22
14
  "repository": {
23
15
  "type": "git",
24
- "url": "git+https://github.com/ionic-team/stencil-dev-server.git"
16
+ "url": "git+https://github.com/stenciljs/core.git"
25
17
  },
26
- "author": "Ionic Team",
18
+ "type": "module",
27
19
  "license": "MIT",
28
- "bugs": {
29
- "url": "https://github.com/ionic-team/stencil-dev-server/issues"
20
+ "main": "./dist/index.mjs",
21
+ "types": "./dist/index.d.mts",
22
+ "exports": {
23
+ ".": {
24
+ "types": "./dist/index.d.mts",
25
+ "import": "./dist/index.mjs"
26
+ },
27
+ "./client": {
28
+ "types": "./dist/client/index.d.mts",
29
+ "import": "./dist/client/index.mjs"
30
+ }
30
31
  },
31
- "homepage": "https://github.com/ionic-team/stencil-dev-server#readme",
32
+ "files": [
33
+ "dist/",
34
+ "templates/",
35
+ "static/"
36
+ ],
32
37
  "dependencies": {
33
- "@ionic/discover": "^0.3.3",
34
- "chokidar": "^1.7.0",
35
- "devcert-san": "^0.3.3",
36
- "ecstatic": "^2.2.1",
37
- "opn": "^5.1.0",
38
- "tiny-lr": "^1.0.5"
38
+ "launch-editor": "^2.9.1",
39
+ "open": "^11.0.0",
40
+ "ws": "^8.0.0"
41
+ },
42
+ "peerDependencies": {
43
+ "@stencil/core": "^5.0.0"
39
44
  },
40
45
  "devDependencies": {
41
- "@types/chokidar": "^1.7.0",
42
- "@types/jest": "^21.1.2",
43
- "@types/opn": "^3.0.28",
44
- "@types/supertest": "^2.0.3",
45
- "jest": "^21.2.1",
46
- "np": "^2.16.0",
47
- "supertest": "^3.0.0",
48
- "typescript": "^2.4.1"
46
+ "@types/ws": "^8.0.0",
47
+ "rollup-plugin-postcss": "^4.0.2",
48
+ "@stencil/core": "5.0.0-next.0"
49
49
  },
50
- "jest": {
51
- "moduleFileExtensions": [
52
- "ts",
53
- "tsx",
54
- "js"
55
- ],
56
- "transform": {
57
- "^.+\\.(ts|tsx)$": "<rootDir>/preprocessor.js"
58
- },
59
- "testMatch": [
60
- "**/__tests__/*.(ts|tsx|js)"
61
- ]
50
+ "volta": {
51
+ "extends": "../../package.json"
52
+ },
53
+ "scripts": {
54
+ "build": "tsdown",
55
+ "test": "vitest run",
56
+ "typecheck": "tsc --noEmit"
62
57
  }
63
- }
58
+ }
Binary file
@@ -0,0 +1,176 @@
1
+ <!doctype html>
2
+ <html dir="ltr" lang="en">
3
+ <head data-tmpl="tmpl-dir">
4
+ <meta charset="utf-8">
5
+ <title>{{title}}</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
8
+ <style>
9
+ * {
10
+ box-sizing: border-box;
11
+ }
12
+ html {
13
+ color-scheme: light dark;
14
+ }
15
+ body {
16
+ padding: 40px 140px;
17
+ margin: 0;
18
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
19
+ font-size: 14px;
20
+ background: #f9f8f8;
21
+ }
22
+ h1 {
23
+ margin-bottom: 15px;
24
+ font-size: 18px;
25
+ color: #343434;
26
+ }
27
+ h1 span {
28
+ padding: 0 6px;
29
+ font-weight: normal;
30
+ color: #9e9b9b;
31
+ }
32
+ a {
33
+ color: #555;
34
+ text-decoration: none;
35
+ }
36
+ a:hover {
37
+ color: #303030;
38
+ }
39
+ ul {
40
+ margin: 0;
41
+ padding: 0;
42
+ }
43
+ li {
44
+ list-style: none;
45
+ margin: 0;
46
+ padding: 0;
47
+ }
48
+ li a {
49
+ display: flex;
50
+ align-items: center;
51
+ gap: 6px;
52
+ margin: 0;
53
+ padding: 6px 12px;
54
+ min-width: 50%;
55
+ border-radius: 4px;
56
+ overflow: hidden;
57
+ white-space: nowrap;
58
+ }
59
+ li a:focus,
60
+ li a:hover {
61
+ color: #555;
62
+ background: rgba(221, 235, 255, 0.65);
63
+ }
64
+ .icon {
65
+ display: inline-block;
66
+ width: 14px;
67
+ min-height: 14px;
68
+ opacity: 0.6;
69
+ mask-repeat: no-repeat;
70
+ -webkit-mask-repeat: no-repeat;
71
+ }
72
+ .directory .icon {
73
+ mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjEzLjMzOCA5Nkg3NC42NjZDNTEuMTk3IDk2IDMyIDExNS4xOTggMzIgMTM4LjY2N3YyMzQuNjY2QzMyIDM5Ni44MDIgNTEuMTk3IDQxNiA3NC42NjYgNDE2aDM2Mi42NjhDNDYwLjgwMyA0MTYgNDgwIDM5Ni44MDIgNDgwIDM3My4zMzNWMTg2LjY2N0M0ODAgMTYzLjE5OCA0NjAuODAzIDE0NCA0MzcuMzM0IDE0NEgyNTYuMDA2bC00Mi42NjgtNDh6Ii8+PC9zdmc+);
74
+ -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjEzLjMzOCA5Nkg3NC42NjZDNTEuMTk3IDk2IDMyIDExNS4xOTggMzIgMTM4LjY2N3YyMzQuNjY2QzMyIDM5Ni44MDIgNTEuMTk3IDQxNiA3NC42NjYgNDE2aDM2Mi42NjhDNDYwLjgwMyA0MTYgNDgwIDM5Ni44MDIgNDgwIDM3My4zMzNWMTg2LjY2N0M0ODAgMTYzLjE5OCA0NjAuODAzIDE0NCA0MzcuMzM0IDE0NEgyNTYuMDA2bC00Mi42NjgtNDh6Ii8+PC9zdmc+);
75
+ background-position: 0px 2px;
76
+ background-color: currentColor;
77
+ }
78
+ .file .icon {
79
+ mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjg4IDQ4SDEzNmMtMjIuMDkyIDAtNDAgMTcuOTA4LTQwIDQwdjMzNmMwIDIyLjA5MiAxNy45MDggNDAgNDAgNDBoMjQwYzIyLjA5MiAwIDQwLTE3LjkwOCA0MC00MFYxNzZMMjg4IDQ4em0tMTYgMTQ0VjgwbDExMiAxMTJIMjcyeiIvPjwvc3ZnPg==);
80
+ -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjg4IDQ4SDEzNmMtMjIuMDkyIDAtNDAgMTcuOTA4LTQwIDQwdjMzNmMwIDIyLjA5MiAxNy45MDggNDAgNDAgNDBoMjQwYzIyLjA5MiAwIDQwLTE3LjkwOCA0MC00MFYxNzZMMjg4IDQ4em0tMTYgMTQ0VjgwbDExMiAxMTJIMjcyeiIvPjwvc3ZnPg==);
81
+ background-position: 0px 2px;
82
+ background-color: currentColor;
83
+ }
84
+ li a:hover .icon {
85
+ opacity: 1;
86
+ }
87
+
88
+ @media (max-width: 768px) {
89
+ body {
90
+ font-size: 13px;
91
+ line-height: 16px;
92
+ padding: 0;
93
+ }
94
+ h1 {
95
+ font-size: 2em;
96
+ line-height: 1.5em;
97
+ color: #fff;
98
+ background: #000;
99
+ padding: 15px 10px;
100
+ margin: 0;
101
+ }
102
+ h1 a {
103
+ color: #9e9e9e;
104
+ }
105
+ h1 a:hover {
106
+ color: #eaeaea;
107
+ }
108
+ ul {
109
+ border-top: 1px solid #cacaca;
110
+ }
111
+ li {
112
+ display: block;
113
+ border-bottom: 1px solid #cacaca;
114
+ font-size: 2em;
115
+ line-height: 1.2em;
116
+ }
117
+ li:nth-child(odd) {
118
+ background: #e0e0e0;
119
+ }
120
+ li a {
121
+ display: flex;
122
+ border-radius: 0;
123
+ padding: 15px 10px;
124
+ }
125
+ .icon {
126
+ width: 24px;
127
+ min-width: 24px;
128
+ min-height: 24px;
129
+ }
130
+ .directory .icon {
131
+ background-position: 0px 4px;
132
+ }
133
+ }
134
+
135
+ @media (prefers-color-scheme: dark) {
136
+ body {
137
+ background: #000;
138
+ }
139
+ h1 {
140
+ color: #eaeaea;
141
+ }
142
+ a {
143
+ color: #ccc;
144
+ }
145
+ a:hover {
146
+ color: #eaeaea;
147
+ }
148
+ li a:focus,
149
+ li a:hover {
150
+ color: #ccc;
151
+ background: #1c1c1c;
152
+ }
153
+ }
154
+
155
+ @media (max-width: 768px) and (prefers-color-scheme: dark) {
156
+ ul {
157
+ border-top: 1px solid #333;
158
+ }
159
+ li {
160
+ border-bottom: 1px solid #333;
161
+ }
162
+ li:nth-child(odd) {
163
+ background: #333;
164
+ }
165
+ }
166
+ </style>
167
+ <link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAB2AAAAdgB+lymcgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFGSURBVHic7dm9TcNQFMXxPzRpaZGYAEIqZkERkzAFSwARSyCGgA2QAqGhTZqYIrJkzEP4GfueyD4/6TavuufEH1IMZmZmZmZm382ABfAOFB3MJzANTfAPV8CGboJX5xU4CczRyox+wpfzDByFpWlhQX/hy3kCJlGBcnV1z/81D8BhUKYsW2IKKICboExZosJHzBtwT+bbR710H7MG5qmwB78UMEQb4AJ4qR7u5UOoJxPgun44pisAdm+44+rB2AooqF31Y7oFIPGDj62AH1yAegE1F6BeQM0FqBdQcwHqBdRcgHoBNRegXkDNBagXUHMB6gXUXIB6ATUXoF5ALVXAkP8W39YPUgV8BCyisqofpAp4DFhEpVG2c3ZfU9VfdPv4QnzWtKn5wEpYA5dNw5emwB2w3IMAbWcJ3AKnueHNzMzMzGzYvgAGC6SjvNl9rAAAAABJRU5ErkJggg==">
168
+ </head>
169
+ <body>
170
+ <main>
171
+ <h1>{{nav}}</h1>
172
+ <ul>{{files}}
173
+ </ul>
174
+ </main>
175
+ </body>
176
+ </html>