Skip to content

Commit

Permalink
feat: UI Extensibility (#445)
Browse files Browse the repository at this point in the history
- fix swc overlays
- add top nav bar
- add light/dark theming
- add preact to componentize new features
- fix toast usage guidance
- modularize document loading
- modularize import functionality
- add contextual help
- minor UI improvements to match Spectrum guidelines and branding
- add border to preview frame
- add Code Mirror theming
  • Loading branch information
arumsey authored Nov 25, 2024
1 parent f8f4d43 commit e6e2ac9
Show file tree
Hide file tree
Showing 38 changed files with 2,248 additions and 1,043 deletions.
1 change: 1 addition & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ module.exports = {
'import/extensions': ['error', {
js: 'always',
}],
'import/no-unresolved': [2, { ignore: ['^preact', '^htm'] }],
},
plugins: ['import'],
settings: {
Expand Down
18 changes: 18 additions & 0 deletions certs/server.crt
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
-----BEGIN CERTIFICATE-----
MIIC8DCCAdigAwIBAgIJAMCdaxNILf2KMA0GCSqGSIb3DQEBCwUAMCMxITAfBgNV
BAMTGGxvY2FsaG9zdC5jb3JwLmFkb2JlLmNvbTAeFw0xODAyMDgwMTU4NTFaFw0y
ODAyMDYwMTU4NTFaMCMxITAfBgNVBAMTGGxvY2FsaG9zdC5jb3JwLmFkb2JlLmNv
bTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBALSt/un6N3SSxXroZ17F
9KanX+JyIzHYEjiFqgLuXhb4h04vbQTp5xmhyZc0IuvobETlgrmjLTsA7IE9OS7V
wlhGILd6T8HsUB4pZp9CmqVPv/DtcPdX3kx7xAepfxoFq4A1/mN5gTJPhI8wHUxA
fhzUE3ft7AAths6nmyjeGjIZr2xH3qZPX0BXRo1Fe6bxz7gbbl/RMHMRmODo6+jl
0Gwhzs5b4oVXmt9XDgrxhz/Z09v2aou1rJgi0HQpSSY4OdijYj+V+QHb1wkF0VRt
PuvjHsnFCp0QprrtZ0FL6ytCc/I/GZJe3ObyHlU2pdiofVlp/RPoRZChmFzJ3HDP
AbECAwEAAaMnMCUwIwYDVR0RBBwwGoIYbG9jYWxob3N0LmNvcnAuYWRvYmUuY29t
MA0GCSqGSIb3DQEBCwUAA4IBAQBTyYnDERAS41otX8nzTVvm/lqOV1QTLai56/Rb
r5nwi/WiDP+6l2GCPePcma7E2UtoccGJsEleMjvDs9+HXOoTMDZFKseg9iNqiNiU
sHedYtJNrn2ezzU/5SlWfStC67MQfMPcpo75zStSpxLcZYXGKbHRctQ62nub/78c
fgttNhzHgn02h0dzVn/Sw7c2N8xlcenZiqEVvByT8RtbM/auIe/OLhOaArOiCw8L
5DlvVxuWOdwV2WZtqLJXeC/+N8wcbGw7XdVDnWsDldOq32HcoW9uZXVfz59OAvJ5
4jXi6TP5XUJH+G9wGE8yVNf6xLTr2Xx8PKrh06bSPfPvpRyp
-----END CERTIFICATE-----
28 changes: 28 additions & 0 deletions certs/server.key
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
-----BEGIN PRIVATE KEY-----
MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQC0rf7p+jd0ksV6
6GdexfSmp1/iciMx2BI4haoC7l4W+IdOL20E6ecZocmXNCLr6GxE5YK5oy07AOyB
PTku1cJYRiC3ek/B7FAeKWafQpqlT7/w7XD3V95Me8QHqX8aBauANf5jeYEyT4SP
MB1MQH4c1BN37ewALYbOp5so3hoyGa9sR96mT19AV0aNRXum8c+4G25f0TBzEZjg
6Ovo5dBsIc7OW+KFV5rfVw4K8Yc/2dPb9mqLtayYItB0KUkmODnYo2I/lfkB29cJ
BdFUbT7r4x7JxQqdEKa67WdBS+srQnPyPxmSXtzm8h5VNqXYqH1Zaf0T6EWQoZhc
ydxwzwGxAgMBAAECggEBAJ6VQXK4LchhsncoWOJ0OUG1EpG8wGtVTNjTaN9dvLPI
u2nCcpuneTGkMT5Hgocw3yaxk0XAlUh+jRb6V6Bl+khkdP7Vmf+JnOB8Uhhi6z1B
fCTJIyfVtcXHs81N1cNPSrIjsf45fU5dQOo0vuJYkNhYxCW1bDjTvMjRj3wVRUTG
j89Rtf2A/oSVB6hY5/2JQBGsbaSWBZI5PImHbaNpMEljMHZQVHZt700epX+xra3J
LI4PJ7uj8qtq4GgSdNTknKAN2wYWqK0xk26xP73bIm+6CY8xn9QrKwm3Z3DiYB25
URQHkKwDCm/dbB1HurI2KL/oYO+hm4uocsdhkxgNNIECgYEA6Sm1av/Qq+TMznTi
XzsACZJKE+WHRJBhA4l2nx2eG9FF3ghmE/bDp27I9tu91gV/1n0slYtICcUuq3Ea
3/ig01Z+yqq9iDwOLnamKjTg21rnUwl+W7LpxFGFpqbO4GcwCaKFXstziYo9TO03
1UNLQ48brz6S8H09Dpmr/4BiCLkCgYEAxmBUftDOPUVKYZr4afb2dSmv/ujAPa8f
fp97YfTuzeGLOjnfpiJnK+cNs1vaS0Ugc9hgZru247Ainf+LpKFgmXaa7ONoFuRA
mjstTqJRL/2OHyW92DK5ygKkVf7fxFCDdmtsIMihJu7546+GJ1mgSkG3RONJn1Jg
NdhIEbbqVLkCgYEAth7D+72xSnK+noyhvOyizNcdUYk5LQ7xGAgpRYOm2eeOgS1i
PjnC/WcFRfzBvQgyoGDJkE1oiWkhWPxRl5vmUuz+wGK5BE6UbSp0BAelkvDgOvXx
YsLO4W8jy9YDRTiURxJQxoh3yHjYBNxNfiDACxce8rUXpQzNwje6JyoqaNECgYA0
YASPAuQgyyWLRZYmq/yADISaAauX3Z+sF8FEqJ1QICdZNSR2QYkJz1QPscWdr9+U
lmFFXnQ4Ay3wlyKwUacmfWkD+DpoKNVhoxQgObzDtecLFDTeWu4whqgKyGMd+r/q
yQvgT/g0Rk4Vrib2RrSKRnVzq6qpdN9P+A13F9sgiQKBgAtaIZQJIQCL7ULUdPbg
lzP2sdta4W+opbYaisbD5ZbO7WgZ4o7qmY1X6zUkmt8EeifLoehWVFB/lpieL0ax
I2DOymJh0Sn4hKBEffnJQjSCzJAwnCWeOUR8XKBbYgRM7mivheuxU8HcSD2evRxf
WHcJ7gxT0hyNQMn8nKu0eZ4w
-----END PRIVATE KEY-----
22 changes: 13 additions & 9 deletions crawl.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,27 @@
<link rel="stylesheet" href="./css/crawl/crawl.css" />

<script src="./js/shared/log.js"></script>
<script src="./js/dist/spectrum-web-components.js"></script>

<script src="./js/libs/vendors/exceljs/exceljs.min.js"></script>

<script src="./js/dist/spectrum-web-components.js" async></script>
<script src="./js/libs/vendors/exceljs/exceljs.min.js" async></script>
<script src="./js/crawl/crawl.ui.js" type="module"></script>
</head>

<body class="tool">
<body class="tool loading">
<sp-theme color="dark" scale="medium">
<!-- MAIN CONTENT -->
<main>
<!-- CRAWL SECTION -->
<section class="crawl">
<div class="section-title">
<h2>Crawl</h2>
<p>Use the Crawl tool to find URLs on a remote website using either the robots.txt or the sitemap.</p>
<sp-divider size="l"></sp-divider>
<div>
<h2>Crawl</h2>
<sp-contextual-help>
<h3>Crawl</h3>
<p>Find URLs on a remote website using either the robots.txt or the sitemap.</p>
</sp-contextual-help>
</div>
</div>
<sp-divider size="l"></sp-divider>
<div class="section-cols">
<div class="section-col">
<form class="crawl-form">
Expand Down Expand Up @@ -72,7 +75,7 @@ <h2>Crawl</h2>
<div class="page-preview hidden">
<sp-divider size="s"></sp-divider>
<h3>Page preview</h3>
<iframe id="crawl-content-frame" frameborder="0"></iframe>
<div><iframe id="crawl-content-frame"></iframe></div>
</div>
</div>
<div class="section-col">
Expand All @@ -89,6 +92,7 @@ <h2></h2>
</main>
<div id="alert-container"></div>
</sp-theme>
<script src="./js/swc_loader.js" type="module"></script>
</body>

</html>
33 changes: 18 additions & 15 deletions css/import/import.css
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
@import url("../libs/vendors/codemirror/codemirror.css");
@import url("../libs/vendors/codemirror/base16-dark.css");
@import url("../libs/vendors/codemirror/base16-light.css");

:host,
:root {
.import {
/* COLORS */
--hlx-import-text-color: #000;
--hlx-import-text-color: var(--spectrum-global-color-gray-500);
--hlx-import-link-color: #0563C1;
--hlx-import-secondary-heading-color: #434343;
--hlx-import-tertiary-heading-color: #666;
--hlx-import-background-color: #fff;
--hlx-import-table-head-background-color: #F5CBCD;

/* FONTS */
Expand Down Expand Up @@ -36,7 +35,8 @@
}

/* stylelint-disable-next-line selector-class-pattern */
.import .cm-s-base16-dark.CodeMirror, .import .cm-s-base16-dark .CodeMirror-gutters {
.import .CodeMirror,
.import .CodeMirror-gutters {
background-color: var(--spectrum-global-color-gray-75);
}

Expand All @@ -45,30 +45,33 @@
border: 1px solid var(--spectrum-global-color-gray-100);
}

/* stylelint-disable-next-line selector-class-pattern */
.import .cm-s-base16-light.CodeMirror {
border: 1px solid var(--spectrum-global-color-gray-300);
}

.import #import-action-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--spectrum-global-dimension-size-150);
margin-top: var(--spectrum-global-dimension-size-150);
}

.import #transformation-file-default {
text-align: right;
font-style: italic;
font-size: 12px;
.import #import-action-row sp-button-group {
margin-top: unset;
}

.import sp-theme[color="light"] {
width: 100%;
background-color: var(--spectrum-global-color-gray-50);
color: var(--spectrum-global-color-gray-800);
}

.import #import-markdown-preview {
height: calc(100vh - 232px);
border: 1px solid var(--spectrum-global-color-gray-100);
border: 1px solid var(--spectrum-global-color-gray-300);
padding: 12px;
background-color: var(--hlx-import-background-color);
color: var(--hlx-import-text-color);
background-color: var(--spectrum-global-color-gray-50);
color: var(--spectrum-global-color-gray-800);
font-family: var(--hlx-import-font-family);
font-size: var(--hlx-import-body-font-size);
line-height: 1.15;
Expand Down
38 changes: 38 additions & 0 deletions css/libs/vendors/codemirror/base16-light.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/*
Name: Base16 Default Light
Author: Chris Kempson (http://chriskempson.com)
CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
*/

.cm-s-base16-light.CodeMirror { background: #f5f5f5; color: #202020; }
.cm-s-base16-light div.CodeMirror-selected { background: #e0e0e0; }
.cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: #e0e0e0; }
.cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; }
.cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; }
.cm-s-base16-light .CodeMirror-guttermarker { color: #ac4142; }
.cm-s-base16-light .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
.cm-s-base16-light .CodeMirror-linenumber { color: #b0b0b0; }
.cm-s-base16-light .CodeMirror-cursor { border-left: 1px solid #505050; }

.cm-s-base16-light span.cm-comment { color: #8f5536; }
.cm-s-base16-light span.cm-atom { color: #aa759f; }
.cm-s-base16-light span.cm-number { color: #aa759f; }

.cm-s-base16-light span.cm-property, .cm-s-base16-light span.cm-attribute { color: #90a959; }
.cm-s-base16-light span.cm-keyword { color: #ac4142; }
.cm-s-base16-light span.cm-string { color: #f4bf75; }

.cm-s-base16-light span.cm-variable { color: #90a959; }
.cm-s-base16-light span.cm-variable-2 { color: #6a9fb5; }
.cm-s-base16-light span.cm-def { color: #d28445; }
.cm-s-base16-light span.cm-bracket { color: #202020; }
.cm-s-base16-light span.cm-tag { color: #ac4142; }
.cm-s-base16-light span.cm-link { color: #aa759f; }
.cm-s-base16-light span.cm-error { background: #ac4142; color: #505050; }

.cm-s-base16-light .CodeMirror-activeline-background { background: #DDDCDC; }
.cm-s-base16-light .CodeMirror-matchingbracket { color: #f5f5f5 !important; background-color: #6A9FB5 !important}
Loading

0 comments on commit e6e2ac9

Please sign in to comment.