archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lint and fix Lit html (#216)

Browse Source 
- Adds eslint lit plugin to catch linting errors in lit html
- Fixes linting errors
This commit is contained in:
sua yoo
2023-08-16 18:57:11 -07:00
committed by GitHub
parent 13d6f011ca
commit dd70bc722f
12 changed files with 3095 additions and 2117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+4
View File
@@ -5,8 +5,12 @@ module.exports = {
},
"extends": [
"eslint:recommended",
"plugin:lit/recommended",
"prettier"
],
"plugins": [
"lit"
],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
_data/package.json
+1
View File
@@ -35,6 +35,7 @@
"electron-notarize": "^1.1.1",
"eslint": "^8.23.1",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-lit": "^1.9.1",
"http-server": "^13.0.2",
"husky": "^8.0.0",
"lint-staged": "^14.0.0",
package.json
+1
View File
@@ -35,6 +35,7 @@
"electron-notarize": "^1.1.1",
"eslint": "^8.23.1",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-lit": "^1.9.1",
"http-server": "^13.0.2",
"husky": "^8.0.0",
"lint-staged": "^14.0.0",
src/coll-index.js
+11 -9
View File
@@ -292,12 +292,11 @@ class CollIndex extends LitElement {
class="input is-small"
@input="${(e) => (this.query = e.currentTarget.value)}"
.value="${this.query}"
type="text"
placeholder="Search by Archive Title or Source"
/>
<span class="icon is-left is-small"
><fa-icon .svg="${fasSearch}"
/></span>
<span class="icon is-left is-small">
<fa-icon .svg="${fasSearch}"></fa-icon>
</span>
</div>
<wr-sorter
id="index"
@@ -327,8 +326,11 @@ class CollIndex extends LitElement {
@click="${this.onDeleteColl}"
></button>
`
: html`
<span class="button delete-button is-loading is-static">Deleting</span`}
: html` <span
class="button delete-button is-loading is-static"
>
Deleting
</span>`}
</div>
`,
)}
@@ -446,9 +448,9 @@ class CollInfo extends LitElement {
: html` ${coll.sourceUrl}&nbsp;`}
</span>
<a @click="${(e) => this.onCopy(e, coll.sourceUrl)}" class="copy"
><fa-icon .svg="${fasCopy}"
/></a>
<a @click="${(e) => this.onCopy(e, coll.sourceUrl)}" class="copy">
<fa-icon .svg="${fasCopy}"></fa-icon>
</a>
${coll.sourceUrl && coll.sourceUrl.startsWith("googledrive://")
? html` <p><i>(${coll.filename})</i></p>`
: ""}
src/embed-receipt.js
+80 -35
View File
@@ -205,43 +205,74 @@ export class RWPEmbedReceipt extends LitElement {
return html`
<div class="dropdown mb-4 ${this.active ? "is-active" : ""}">
<div class="dropdown-trigger embed-info-container">
<button class="embed-info is-small is-rounded mt-4" aria-haspopup="true" aria-controls="embed-dropdown" @click="${
this.onEmbedDrop
}">
<fa-icon class="menu-logo mr-2 embed-globe" size="1rem" aria-hidden="true" .svg=${btGlobe}></fa-icon>
<button
class="embed-info is-small is-rounded mt-4"
aria-haspopup="true"
aria-controls="embed-dropdown"
@click="${this.onEmbedDrop}"
>
<fa-icon
class="menu-logo mr-2 embed-globe"
size="1rem"
aria-hidden="true"
.svg=${btGlobe}
></fa-icon>
<span class="embed-info-buttontext">
This embed is part of a web archive. Click here to learn more.
</span>
<span class="icon is-small mr-4 ml-2">
<fa-icon title="Toggle" .svg="${
this.active ? btAngleDoubleUp : btAngleDoubleDown
}" aria-hidden="true"></fa-icon>
<fa-icon
title="Toggle"
.svg="${this.active ? btAngleDoubleUp : btAngleDoubleDown}"
aria-hidden="true"
></fa-icon>
</span>
</button>
</div>
<div class="dropdown-menu embed-info-container" id="embed-dropdown" role="menu">
<div
class="dropdown-menu embed-info-container"
id="embed-dropdown"
role="menu"
>
<div class="dropdown-content embed-info-drop">
<p class="mb-4">
Even if the original page goes offline or is changed, the content below will remain unchanged as it is loaded from a web archive.
Even if the original page goes offline or is changed, the content
below will remain unchanged as it is loaded from a web archive.
</p>
<hr class="dropdown-divider">
<h2 mt-4">Get A Copy!</h2>
<p class="mt-2">After downloading, this web archive can be loaded and viewed directly in your browser via <a style="white-space: nowrap;" target="_blank" href="https://replayweb.page">replayweb.page</a>.</p>
<a href="${sourceUrl}" class="button is-primary mt-4" @keyup="${clickOnSpacebarPress}">
<hr class="dropdown-divider" />
<h2 class="mt-4">Get A Copy!</h2>
<p class="mt-2">
After downloading, this web archive can be loaded and viewed
directly in your browser via
<a
style="white-space: nowrap;"
target="_blank"
href="https://replayweb.page"
>replayweb.page</a
>.
</p>
<a
href="${sourceUrl}"
class="button is-primary mt-4"
@keyup="${clickOnSpacebarPress}"
>
<span class="icon is-small">
<fa-icon size="1.0em" aria-hidden="true" .svg="${fasDownload}"></fa-icon>
<fa-icon
size="1.0em"
aria-hidden="true"
.svg="${fasDownload}"
></fa-icon>
</span>
<span>Download Archive</span>
</a>
<hr class="dropdown-divider mt-4">
<h2 mt-4">Technical Information</h2>
<hr class="dropdown-divider mt-4" />
<h2 class="mt-4">Technical Information</h2>
<div class="embed-info-drop-statscontainer mb-4">
<h3>Original URL:</h3>
<p><a target="_blank" href="${this.url}">${this.url}</a></p>
<h3 class="mt-2">Archived On:</h3>
<p>${dateStr}</p>
${
domain
${domain
? html`
<h3 class="mt-2">Observed By:</h3>
<p>${domain}</p>
@@ -256,41 +287,55 @@ export class RWPEmbedReceipt extends LitElement {
: software
? html` <h3 class="mt-2">Created With:</h3>
<p>${software}</p>`
: ""
}
${
!domain && publicKey
: ""}
${!domain && publicKey
? html` <h3 class="mt-2">Observer Public Key:</h3>
<p class="show-key">${publicKey}</p>`
: ""
}
: ""}
<h3 class="mt-2">Validation:</h3>
${
numValid > 0 || numInvalid > 0
${numValid > 0 || numInvalid > 0
? html` <p>
${numValid} hashes
verified${numInvalid ? html`, ${numInvalid} invalid` : ""}
</p>`
: html` <p>Not Available</p> `
}
: html` <p>Not Available</p> `}
<h3 class="mt-2">Package Hash:</h3>
<p class="show-hash">${datapackageHash}</p>
<h3 class="mt-2">Size</h3>
<p>${prettyBytes(Number(this.collInfo.size || 0))}</p>
</div>
${sourceUrl ? html`` : ""}
<p class="is-size-7 is-flex is-justify-content-space-between" style="margin-top: 40px">
<p
class="is-size-7 is-flex is-justify-content-space-between"
style="margin-top: 40px"
>
<span>
<a class="has-text-black" target="_blank" href="https://github.com/webrecorder/replayweb.page">
<fa-icon class="menu-logo mr-1" size="1.0rem" aria-hidden="true" .svg=${
this.appLogo
}></fa-icon>
<a
class="has-text-black"
target="_blank"
href="https://github.com/webrecorder/replayweb.page"
>
<fa-icon
class="menu-logo mr-1"
size="1.0rem"
aria-hidden="true"
.svg=${this.appLogo}
></fa-icon>
Powered by ReplayWeb.page
</a>
</span>
<span>
<a class="has-text-black" target="_blank" href="https://github.com/webrecorder/replayweb.page">Source Code
<fa-icon class="menu-logo ml-1" size="1.0rem" aria-hidden="true" .svg=${fabGithub}></fa-icon>
<a
class="has-text-black"
target="_blank"
href="https://github.com/webrecorder/replayweb.page"
>Source Code
<fa-icon
class="menu-logo ml-1"
size="1.0rem"
aria-hidden="true"
.svg=${fabGithub}
></fa-icon>
</a>
</span>
</p>
src/loader.js
+3 -3
View File
@@ -330,7 +330,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
return html`
<section class="container">
<div class="has-text-centered is-flex">
<wr-anim-logo class="logo" size="96px" />
<wr-anim-logo class="logo" size="96px"></wr-anim-logo>
</div>
${!this.embed
? html` <div class="level">
@@ -352,7 +352,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
return html`<wr-gdrive
.sourceUrl=${this.sourceUrl}
@load-ready=${this.onLoadReady}
/>`;
></wr-gdrive>`;
case "started":
return html` <div class="progress-div">
@@ -412,7 +412,7 @@ You can select a file to upload from the main page by clicking the 'Choose File.
return html`<progress
class="progress is-primary is-large"
style="max-width: 400px"
/>`;
></progress>`;
}
}
src/pages.js
+30 -24
View File
@@ -549,7 +549,6 @@ class Pages extends LitElement {
class="control has-icons-left ${this.loading ? "is-loading" : ""}"
>
<input
type="search"
class="input"
@input="${this.onChangeQuery}"
.value="${this.query}"
@@ -661,45 +660,52 @@ class Pages extends LitElement {
}
renderDownloadMenu() {
return html`
<div class="dropdown ${this.menuActive ? "is-active" : ""}">
return html` <div class="dropdown ${this.menuActive ? "is-active" : ""}">
<div class="dropdown-trigger">
<button @click="${
this.onMenu
}" class="button is-small" aria-haspopup="true" aria-expanded="${
this.menuActive
}" aria-controls="dropdown-menu">
<button
@click="${this.onMenu}"
class="button is-small"
aria-haspopup="true"
aria-expanded="${this.menuActive}"
aria-controls="dropdown-menu"
>
<span>Download</span>
<span class="icon is-small">
<fa-icon .svg="${fasAngleDown} aria-hidden="true"></fa-icon>
<fa-icon .svg="${fasAngleDown}" aria-hidden="true"></fa-icon>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu">
<div class="dropdown-content">
<a role="button" href="#"
<a
role="button"
href="#"
@click="${(e) => this.onDownload(e, "wacz")}"
@keyup="${clickOnSpacebarPress}"
class="dropdown-item">
Download ${
this.selectedPages.size === 0 ? "All" : "Selected"
} as WACZ (Web Archive Collection Zip)
class="dropdown-item"
>
Download ${this.selectedPages.size === 0 ? "All" : "Selected"} as
WACZ (Web Archive Collection Zip)
</a>
<a role="button" href="#"
<a
role="button"
href="#"
@click="${(e) => this.onDownload(e, "warc")}"
@keyup="${clickOnSpacebarPress}"
class="dropdown-item">
Download ${
this.selectedPages.size === 0 ? "All" : "Selected"
} as WARC 1.1 Only
class="dropdown-item"
>
Download ${this.selectedPages.size === 0 ? "All" : "Selected"} as
WARC 1.1 Only
</a>
<a role="button" href="#"
<a
role="button"
href="#"
@click="${(e) => this.onDownload(e, "warc1.0")}"
@keyup="${clickOnSpacebarPress}"
class="dropdown-item">
Download ${
this.selectedPages.size === 0 ? "All" : "Selected"
} as WARC 1.0 Only
class="dropdown-item"
>
Download ${this.selectedPages.size === 0 ? "All" : "Selected"} as
WARC 1.0 Only
</a>
</div>
</div>
src/replay.js
+1 -1
View File
@@ -397,7 +397,7 @@ class Replay extends LitElement {
.state="trymanual"
.reauth="${true}"
@load-ready="${this.onReAuthed}"
/>`}
></wr-gdrive>`}
</div>
</div>
</div>
src/url-resources.js
+138 -56
View File
@@ -315,13 +315,21 @@ class URLResources extends LitElement {
render() {
return html`
<div role="heading" aria-level="${
this.isSidebar ? "2" : "1"
}" class="is-sr-only">URLs in ${this.collInfo.title}</div>
<div
role="heading"
aria-level="${this.isSidebar ? "2" : "1"}"
class="is-sr-only"
>
URLs in ${this.collInfo.title}
</div>
<div role="heading" aria-level="${
this.isSidebar ? "3" : "2"
}" class="is-sr-only">Search and Filter</div>
<div
role="heading"
aria-level="${this.isSidebar ? "3" : "2"}"
class="is-sr-only"
>
Search and Filter
</div>
<div class="notification level is-marginless">
<div class="level-left flex-auto">
<div class="level-item flex-auto">
@@ -341,80 +349,155 @@ class URLResources extends LitElement {
</select>
</div>
<div class="field flex-auto">
<div class="control has-icons-left ${
this.loading ? "is-loading" : ""
}">
<input type="text" class="input" @input="${
this.onChangeQuery
}" .value="${
this.query
}" type="text" placeholder="Enter URL to Search">
<span class="icon is-left"><fa-icon .svg="${fasSearch}"/></span>
<div
class="control has-icons-left ${this.loading
? "is-loading"
: ""}"
>
<input
type="text"
class="input"
@input="${this.onChangeQuery}"
.value="${this.query}"
placeholder="Enter URL to Search"
/>
<span class="icon is-left"
><fa-icon .svg="${fasSearch}"></fa-icon
></span>
</div>
</div>
</div>
</div>
<div class="control level-right">
<div style="margin-left: 1em" class="control">
<label class="radio has-text-left"><input type="radio" name="urltype" value="contains" ?checked="${
this.urlSearchType === "contains"
}" @click="${this.onClickUrlType}">&nbsp;Contains</label>
<label class="radio has-text-left"><input type="radio" name="urltype" value="prefix" ?checked="${
this.urlSearchType === "prefix"
}" @click="${this.onClickUrlType}">&nbsp;Prefix</label>
<label class="radio has-text-left"><input type="radio" name="urltype" value="exact" ?checked="${
this.urlSearchType === "exact"
}" @click="${this.onClickUrlType}">&nbsp;Exact</label>
<span id="num-results" class="num-results" is-pulled-right" aria-live="polite" aria-atomic="true">${
this.filteredResults.length
} Result(s)</span>
<label class="radio has-text-left"
><input
type="radio"
name="urltype"
value="contains"
?checked="${this.urlSearchType === "contains"}"
@click="${this.onClickUrlType}"
/>&nbsp;Contains</label
>
<label class="radio has-text-left"
><input
type="radio"
name="urltype"
value="prefix"
?checked="${this.urlSearchType === "prefix"}"
@click="${this.onClickUrlType}"
/>&nbsp;Prefix</label
>
<label class="radio has-text-left"
><input
type="radio"
name="urltype"
value="exact"
?checked="${this.urlSearchType === "exact"}"
@click="${this.onClickUrlType}"
/>&nbsp;Exact</label
>
<span
id="num-results"
class="num-results"
is-pulled-right
aria-live="polite"
aria-atomic="true"
>${this.filteredResults.length} Result(s)</span
>
</div>
</div>
</div>
<div class="sort-header is-hidden-tablet">
<wr-sorter id="urls"
<wr-sorter
id="urls"
.sortKey="${this.sortKey}"
.sortDesc="${this.sortDesc}"
.sortKeys="${URLResources.sortKeys}"
.data="${this.filteredResults}"
@sort-changed="${this.onSortChanged}">
@sort-changed="${this.onSortChanged}"
>
</wr-sorter>
</div>
<div role="heading" aria-level="${
this.isSidebar ? "3" : "2"
}" id="results-heading" class="is-sr-only">Results</div>
<div
role="heading"
aria-level="${this.isSidebar ? "3" : "2"}"
id="results-heading"
class="is-sr-only"
>
Results
</div>
<table class="all-results" aria-labelledby="results-heading num-results">
<thead>
<tr class="columns results-head has-text-weight-bold">
<th scope="col" class="column col-url is-6 is-hidden-mobile"><a role="button" href="#" @click="${
this.onSort
}" @keyup="${clickOnSpacebarPress}" data-key="url" class="${
this.sortKey === "url" ? (this.sortDesc ? "desc" : "asc") : ""
}">URL</a></th>
<th scope="col" class="column col-ts is-2 is-hidden-mobile"><a role="button" href="#" @click="${
this.onSort
}" @keyup="${clickOnSpacebarPress}" data-key="ts" class="${
this.sortKey === "ts" ? (this.sortDesc ? "desc" : "asc") : ""
}">Date</a></th>
<th scope="col" class="column col-mime is-3 is-hidden-mobile"><a role="button" href="#" @click="${
this.onSort
}" @keyup="${clickOnSpacebarPress}" data-key="mime" class="${
this.sortKey === "mime" ? (this.sortDesc ? "desc" : "asc") : ""
}">Mime Type</a></th>
<th scope="col" class="column col-status is-1 is-hidden-mobile"><a role="button" href="#" @click="${
this.onSort
}" @keyup="${clickOnSpacebarPress}" data-key="status" class="${
this.sortKey === "status" ? (this.sortDesc ? "desc" : "asc") : ""
}">Status</a></th>
<th scope="col" class="column col-url is-6 is-hidden-mobile">
<a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${clickOnSpacebarPress}"
data-key="url"
class="${this.sortKey === "url"
? this.sortDesc
? "desc"
: "asc"
: ""}"
>URL</a
>
</th>
<th scope="col" class="column col-ts is-2 is-hidden-mobile">
<a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${clickOnSpacebarPress}"
data-key="ts"
class="${this.sortKey === "ts"
? this.sortDesc
? "desc"
: "asc"
: ""}"
>Date</a
>
</th>
<th scope="col" class="column col-mime is-3 is-hidden-mobile">
<a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${clickOnSpacebarPress}"
data-key="mime"
class="${this.sortKey === "mime"
? this.sortDesc
? "desc"
: "asc"
: ""}"
>Mime Type</a
>
</th>
<th scope="col" class="column col-status is-1 is-hidden-mobile">
<a
role="button"
href="#"
@click="${this.onSort}"
@keyup="${clickOnSpacebarPress}"
data-key="status"
class="${this.sortKey === "status"
? this.sortDesc
? "desc"
: "asc"
: ""}"
>Status</a
>
</th>
</tr>
</thead>
<tbody class="main-scroll" @scroll="${this.onScroll}">
${
this.sortedResults.length
${this.sortedResults.length
? this.sortedResults.map(
(result) => html`
<tr class="columns result">
@@ -452,8 +535,7 @@ class URLResources extends LitElement {
)
: html`<tr class="section">
<td colspan="4"><i>No Results Found.</i></td>
</tr>`
}
</tr>`}
</tbody>
</table>
`;
sw.js
+10 -10
View File
File diff suppressed because one or more lines are too long
ui.js
+1289 -478
View File
File diff suppressed because one or more lines are too long
yarn.lock
+26
View File
@@ -2271,6 +2271,15 @@ eslint-config-prettier@^9.0.0:
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz#eb25485946dd0c66cd216a46232dc05451518d1f"
integrity sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==
eslint-plugin-lit@^1.9.1:
version "1.9.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-lit/-/eslint-plugin-lit-1.9.1.tgz#40cdd1f8d1b565eb5e913eab159c88f6f947bb19"
integrity sha512-XFFVufVxYJwqRB9sLkDXB7SvV1xi9hrC4HRFEdX1h9+iZ3dm4x9uS7EuT9uaXs6zR3DEgcojia1F7pmvWbc4Gg==
dependencies:
parse5 "^6.0.1"
parse5-htmlparser2-tree-adapter "^6.0.1"
requireindex "^1.2.0"
eslint-scope@5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -4508,6 +4517,13 @@ parse5-html-rewriting-stream@^7.0.0:
parse5 "^7.0.0"
parse5-sax-parser "^7.0.0"
parse5-htmlparser2-tree-adapter@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
dependencies:
parse5 "^6.0.1"
parse5-sax-parser@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/parse5-sax-parser/-/parse5-sax-parser-7.0.0.tgz#4c05064254f0488676aca75fb39ca069ec96dee5"
@@ -4515,6 +4531,11 @@ parse5-sax-parser@^7.0.0:
dependencies:
parse5 "^7.0.0"
parse5@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
parse5@^7.0.0:
version "7.1.2"
resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
@@ -4927,6 +4948,11 @@ require-from-string@^2.0.2:
resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
requireindex@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/requireindex/-/requireindex-1.2.0.tgz#3463cdb22ee151902635aa6c9535d4de9c2ef1ef"
integrity sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==
requires-port@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"