Use Babel and add JS licenses page

This commit is contained in:
Cadence Ember 2020-08-07 20:10:12 +12:00
parent 4b5d694000
commit ef0870d0eb
No known key found for this signature in database
GPG Key ID: 128B99B1B74A6412
15 changed files with 1641 additions and 54 deletions

View File

@ -1,9 +1,9 @@
<!DOCTYPE html><html lang="en"><head><title>Select instance - Invidious</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="/static/css/main.css?static=48f0608e85"><script src="/static/js/main.js?static=ca01d92575" text="text/javascript" defer></script></head><body><noscript><style>.requires-scripts {
<!DOCTYPE html><html lang="en"><head><title>Select instance - Invidious</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="/static/css/main.css?static=dfaa1273d6"><script src="/static/js/main.min.js?static=6042f428fc" text="text/javascript" defer></script></head><body><noscript><style>.requires-scripts {
display: none;
}</style></noscript><script type="text/javascript">document.body.classList.remove("yesscript")
</script><header class="banner"><div class="logo"></div><h1>Invidious</h1></header><noscript><div class="script-warning"><p>You are seeing the fallback version of this page.<br>
}
</style></noscript><header class="banner"><div class="logo"></div><h1>Invidious</h1></header><noscript><div class="script-warning"><p>You are seeing the fallback version of this page.<br>
Some features are missing.</p><p>JavaScript is required to use the regular page.
</p></div></noscript><div class="story"><p>As of September 1st 2020, <mark>invidio.us</mark> has closed down.</p><div class="requires-scripts"><p>To see this content, please select another instance,
or <a id="watch-on-youtube">visit directly on YouTube.</a></p></div><noscript><p>To see this content, please select another instance,
or <a href="https://www.youtube.com">go to YouTube</a> and find it yourself.
</p></noscript></div><div class="instances-table requires-scripts"><table><thead><tr><th scope="col">Domain</th><th scope="col">Health</th><th scope="col">Action</th></tr></thead><tbody id="instances-tbody"><tr class="loading"><td class="loading-td" colspan="3">Loading instances...</td></tr></tbody></table></div><noscript><div class="instances-list"><h2>Available instances</h2><ul class="list"><li><a href="https://invidious.snopyta.org">invidious.snopyta.org</a></li><li><a href="https://invidious.ggc-project.de">invidious.ggc-project.de</a></li><li><a href="https://invidious.13ad.de">invidious.13ad.de</a></li><li><a href="https://yewtu.be">yewtu.be</a></li><li><a href="https://invidious.fdn.fr">invidious.fdn.fr</a></li><li><a href="https://invidious.toot.koeln">invidious.toot.koeln</a></li><li><a href="https://invidiou.site">invidiou.site</a></li><li><a href="https://yt.iswleuven.be">yt.iswleuven.be</a></li><li><a href="https://vid.mint.lgbt">vid.mint.lgbt</a></li><li><a href="https://watch.nettohikari.com">watch.nettohikari.com</a></li></ul></div></noscript></body></html>
</p></noscript></div><div class="instances-table requires-scripts"><table><thead><tr><th scope="col">Domain</th><th scope="col">Health</th><th scope="col">Action</th></tr></thead><tbody id="instances-tbody"><tr class="loading"><td class="loading-td" colspan="3" data-loading-message="Loading instances...">Trying to run scripts...</td></tr></tbody></table></div><noscript><div class="instances-list"><h2>Available instances</h2><ul class="list"><li><a href="https://invidious.snopyta.org">invidious.snopyta.org</a></li><li><a href="https://invidious.ggc-project.de">invidious.ggc-project.de</a></li><li><a href="https://invidious.13ad.de">invidious.13ad.de</a></li><li><a href="https://yewtu.be">yewtu.be</a></li><li><a href="https://invidious.fdn.fr">invidious.fdn.fr</a></li><li><a href="https://invidious.toot.koeln">invidious.toot.koeln</a></li><li><a href="https://invidiou.site">invidiou.site</a></li><li><a href="https://yt.iswleuven.be">yt.iswleuven.be</a></li><li><a href="https://vid.mint.lgbt">vid.mint.lgbt</a></li><li><a href="https://watch.nettohikari.com">watch.nettohikari.com</a></li></ul></div></noscript><footer><ul class="footer-link-list"><li><a href="/">Home</a></li><li><a href="/js-licenses.html" data-jslicense="1">JavaScript licenses</a></li></ul></footer></body></html>

1
build/js-licenses.html Normal file
View File

@ -0,0 +1 @@
<!DOCTYPE html><html lang="en"><head><title>JavaScript licenses - Invidious</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="/static/css/main.css?static=dfaa1273d6"></head><body><header class="banner"><div class="logo"></div><h1>Invidious</h1></header><div class="js-license-table"><table id="jslicense-labels1"><thead><tr><th scope="col">File</th><th scope="col">License</th><th scope="col">Source</th></tr></thead><tbody><tr><td><a href="/static/js/main.min.js?static=6042f428fc">/static/js/main.min.js?static=6042f428fc</a></td><td><a href="https://www.gnu.org/licenses/agpl-3.0.html">GNU-AGPL-3.0-or-later</a></td><td><a href="/static/js/main.js">/static/js/main.js</a></td></tr></tbody></table></div><footer><ul class="footer-link-list"><li><a href="/">Home</a></li><li><a href="/js-licenses.html" data-jslicense="1">JavaScript licenses</a></li></ul></footer></body></html>

View File

@ -1 +1 @@
:root{--bg-primary: #fcf5f4;--bg-secondary: #e9e1df;--bg-tertiary: #cec8c6;--fg-header: #000;--fg-primary: #181818;--fg-dim: #646464;--fg-link: #2664b5;--edge-mark: #aaa;--edge-table: #333}@media(prefers-color-scheme: dark){:root{--bg-primary: #232323;--bg-secondary: #191919;--bg-tertiary: #383838;--fg-header: #fff;--fg-primary: #d9d9d9;--fg-dim: #828282;--fg-link: #529ef5;--edge-mark: #555;--edge-table: #aaa}}body{background-color:var(--bg-primary);color:var(--fg-primary);font-size:20px;margin:0;padding:8px;font-family:sans-serif}a,a:visited{color:var(--fg-link)}noscript{display:block}mark{background-color:var(--bg-tertiary);color:var(--fg-primary);padding:3px 5px;border-radius:4px;border:1px solid var(--edge-mark)}table,td,th{border:1px solid var(--edge-table);border-collapse:collapse}td,th{padding:4px 8px}thead,tr:nth-child(even){background-color:var(--bg-secondary)}.banner{display:grid;grid-gap:24px;align-items:center;justify-items:center;justify-content:center;padding:20px}@media screen and (min-width: 520px){.banner{grid-template-columns:80px auto}}.banner .logo{width:80px;height:80px;background-size:contain;background-image:url(/static/img/invidious-logo-light.svg?static=25c5cd3acc)}@media(prefers-color-scheme: dark){.banner .logo{background-image:url(/static/img/invidious-logo-dark.svg?static=aa528cbad6)}}.banner h1{color:var(--fg-header);font-size:56px;font-weight:bold;text-transform:uppercase;margin:0;padding:0}.story{margin:40px 0px;text-align:center}@media screen and (min-width: 520px){.story{white-space:pre-line}}.instances-table{display:flex;justify-content:center}.instances-table table{width:100%;max-width:700px}.instances-list{text-align:center}.instances-list .list{margin:0 auto;padding-left:1em;text-align:left;max-width:max-content}.loading-td{text-align:center;padding:20px;background-color:var(--bg-secondary)}.column-center{text-align:center}.health-unknown{color:var(--fg-dim)}.script-warning{margin:0 auto;max-width:max-content;background:#700;color:#fff;padding:4px 20px;border-radius:8px;border:1px solid}
:root{--bg-primary: #fcf5f4;--bg-secondary: #e9e1df;--bg-tertiary: #cec8c6;--fg-header: #000;--fg-primary: #181818;--fg-dim: #646464;--fg-link: #2664b5;--edge-mark: #aaa;--edge-table: #333}@media(prefers-color-scheme: dark){:root{--bg-primary: #232323;--bg-secondary: #191919;--bg-tertiary: #383838;--fg-header: #fff;--fg-primary: #d9d9d9;--fg-dim: #828282;--fg-link: #529ef5;--edge-mark: #555;--edge-table: #aaa}}body{background-color:var(--bg-primary);color:var(--fg-primary);font-size:20px;margin:0;padding:8px;font-family:sans-serif}a,a:visited{color:var(--fg-link)}noscript{display:block}mark{background-color:var(--bg-tertiary);color:var(--fg-primary);padding:3px 5px;border-radius:4px;border:1px solid var(--edge-mark)}table,td,th{border:1px solid var(--edge-table);border-collapse:collapse}td,th{padding:4px 8px}thead,tr:nth-child(even){background-color:var(--bg-secondary)}footer{font-size:16px;text-align:center;max-width:500px;margin:40px auto}.banner{display:grid;grid-gap:24px;align-items:center;justify-items:center;justify-content:center;padding:20px}@media screen and (min-width: 520px){.banner{grid-template-columns:80px auto}}.banner .logo{width:80px;height:80px;background-size:contain;background-image:url(/static/img/invidious-logo-light.svg?static=25c5cd3acc)}@media(prefers-color-scheme: dark){.banner .logo{background-image:url(/static/img/invidious-logo-dark.svg?static=aa528cbad6)}}.banner h1{color:var(--fg-header);font-size:56px;font-weight:bold;text-transform:uppercase;margin:0;padding:0}.story{margin:40px 0px;text-align:center}@media screen and (min-width: 520px){.story{white-space:pre-line}}.instances-table,.js-license-table{display:flex;justify-content:center}.instances-table table,.js-license-table table{width:100%;max-width:700px}.instances-list{text-align:center}.instances-list .list{margin:0 auto;padding-left:1em;text-align:left;max-width:max-content}.loading-td{text-align:center;padding:20px;background-color:var(--bg-secondary)}.column-center{text-align:center}.health-unknown{color:var(--fg-dim)}.script-warning{margin:0 auto;max-width:max-content;background:#700;color:#fff;padding:4px 20px;border-radius:8px;border:1px solid}.footer-link-list{margin:0;padding:0;justify-content:center;display:flex;list-style-type:none;white-space:pre-wrap}.footer-link-list li:not(:first-child)::before{content:" • ";display:inline}

View File

@ -23,11 +23,28 @@
return array
}
function request(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.addEventListener("readystatechange", () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.response))
}
}
})
xhr.open("GET", url)
xhr.send()
})
}
const destinationPath = window.location.href.slice(window.location.origin.length)
q("#watch-on-youtube").href = "https://www.youtube.com" + destinationPath
fetch("https://instances.invidio.us/instances.json?sort_by=type,health").then(res => res.json()).then(
qa("[data-loading-message]").forEach(e => e.textContent = e.getAttribute("data-loading-message"))
request("https://instances.invidio.us/instances.json?sort_by=type,health").then(
/** @param {[string, {monitor: any, flag: string, region: string, stats: any, type: string, uri: string}][]} root */ root => {
shuffle(root)
root.map(entry => {
@ -35,7 +52,7 @@
return {
name: entry[0],
details: entry[1],
health: +(healthKnown ? entry[1].monitor.dailyRatios[0].ratio : 99),
health: +(healthKnown ? entry[1].monitor.dailyRatios[0].ratio : 95),
healthKnown
}
}).filter(entry => {

2
build/static/js/main.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
"use strict";function _createForOfIteratorHelper(o,allowArrayLike){var it;if(typeof Symbol==="undefined"||o[Symbol.iterator]==null){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&typeof o.length==="number"){if(it)o=it;var i=0;var F=function F(){};return{s:F,n:function n(){if(i>=o.length)return{done:true};return{done:false,value:o[i++]}},e:function e(_e){throw _e},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var normalCompletion=true,didErr=false,err;return{s:function s(){it=o[Symbol.iterator]()},n:function n(){var step=it.next();normalCompletion=step.done;return step},e:function e(_e2){didErr=true;err=_e2},f:function f(){try{if(!normalCompletion&&it.return!=null)it.return()}finally{if(didErr)throw err}}}}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i]}return arr2};(function(){var q=function q(s){return document.querySelector(s)};var qa=function qa(s){return document.querySelectorAll(s)};function createElement(tag){var properties=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var children=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];var e=document.createElement(tag);for(var _i=0,_Object$keys=Object.keys(properties);_i<_Object$keys.length;_i++){var key=_Object$keys[_i];e[key]=properties[key]}var _iterator=_createForOfIteratorHelper(children),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var child=_step.value;e.appendChild(child)}}catch(err){_iterator.e(err)}finally{_iterator.f()}return e}function shuffle(array){for(var i=0;i<array.length;i++){var j=Math.floor(Math.random()*(array.length-i))+i;var _ref=[array[j],array[i]];array[i]=_ref[0];array[j]=_ref[1]}return array}function request(url){return new Promise(function(resolve,reject){var xhr=new XMLHttpRequest;xhr.addEventListener("readystatechange",function(){if(xhr.readyState===4){if(xhr.status===200){resolve(JSON.parse(xhr.response))}}});xhr.open("GET",url);xhr.send()})}var destinationPath=window.location.href.slice(window.location.origin.length);q("#watch-on-youtube").href="https://www.youtube.com"+destinationPath;qa("[data-loading-message]").forEach(function(e){return e.textContent=e.getAttribute("data-loading-message")});request("https://instances.invidio.us/instances.json?sort_by=type,health").then(function(root){shuffle(root);root.map(function(entry){var healthKnown=!!entry[1].monitor;return{name:entry[0],details:entry[1],health:+(healthKnown?entry[1].monitor.dailyRatios[0].ratio:95),healthKnown:healthKnown}}).filter(function(entry){return entry.details.type==="https"&&entry.health>0}).sort(function(a,b){return b.health-a.health}).forEach(function(entry){var target=entry.details.uri.replace(/\/*$/,"")+destinationPath;var healthUnknown=entry.healthKnown?"":"health-unknown ";var health=entry.healthKnown?entry.health.toFixed(0):"(unknown)";q("#instances-tbody").appendChild(createElement("tr",{},[createElement("td",{textContent:entry.name}),createElement("td",{className:"column-center "+healthUnknown,textContent:health}),createElement("td",{className:"column-center"},[createElement("a",{href:target,textContent:"Go \u2192"})])]))});qa(".loading").forEach(function(e){return e.remove()})})})();
//# sourceMappingURL=/static/js/main.min.js.map

File diff suppressed because one or more lines are too long

1461
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -10,11 +10,12 @@
"keywords": [],
"author": "",
"license": "AGPL-3.0-only",
"dependencies": {
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"http-server": "^0.12.3",
"pug": "^3.0.0",
"sass": "^1.26.10"
},
"devDependencies": {
"http-server": "^0.12.3"
}
}

View File

@ -5,16 +5,47 @@ const sass = require("sass")
const fs = require("fs").promises
const crypto = require("crypto")
const pj = require("path").join
const babel = require("@babel/core")
const buildDir = "../build"
const static = new Map()
const links = new Map()
const scripts = []
const pugLocals = {static, scripts, links}
const spec = [
{
type: "file",
source: "/assets/img/invidious-logo-dark.svg",
target: "/static/img/invidious-logo-dark.svg"
},{
type: "file",
source: "/assets/img/invidious-logo-light.svg",
target: "/static/img/invidious-logo-light.svg"
},{
type: "sass",
source: "/main.sass",
target: "/static/css/main.css"
},{
type: "babel",
source: "/main.js",
target: "/static/js/main.js"
},{
type: "pug",
source: "/index.pug",
target: "/index.html"
},{
type: "pug",
source: "/js-licenses.pug",
target: "/js-licenses.html"
}
]
function hash(buffer) {
return crypto.createHash("sha256").update(buffer).digest("hex").slice(0, 10)
}
const static = new Map()
const pugLocals = {static}
async function addFile(sourcePath, targetPath) {
const contents = await fs.readFile(pj(".", sourcePath), {encoding: null})
static.set(sourcePath, `${targetPath}?static=${hash(contents)}`)
@ -43,16 +74,71 @@ async function addPug(sourcePath, targetPath) {
await fs.writeFile(pj(buildDir, targetPath), renderedHTML)
}
;(async () => {
async function addBabel(sourcePath, targetPath) {
const originalCode = await fs.readFile(pj(".", sourcePath), "utf8")
const compiled = babel.transformSync(originalCode, {
sourceMaps: true,
sourceType: "script",
presets: [
[
"@babel/env", {
targets: {
"ie": 11
}
}
]
],
generatorOpts: {
comments: false,
minified: true,
sourceMaps: true,
}
})
const minFilename = targetPath.replace(/\.js$/, ".min.js")
const minFilenameWithQuery = `${minFilename}?static=${hash(compiled.code)}`
const mapFilename = `${minFilename}.map`
compiled.code += `\n//# sourceMappingURL=${mapFilename}`
static.set(sourcePath, minFilenameWithQuery)
scripts.push({
original: targetPath,
minified: minFilenameWithQuery,
license: "GNU-AGPL-3.0-or-later",
licenseHref: "https://www.gnu.org/licenses/agpl-3.0.html"
})
await Promise.all([
addFile("/assets/img/invidious-logo-dark.svg", "/static/img/invidious-logo-dark.svg"),
addFile("/assets/img/invidious-logo-light.svg", "/static/img/invidious-logo-light.svg"),
addFile("/main.js", "/static/js/main.js")
fs.writeFile(pj(buildDir, targetPath), originalCode),
fs.writeFile(pj(buildDir, minFilename), compiled.code),
fs.writeFile(pj(buildDir, mapFilename), JSON.stringify(compiled.map))
])
}
addSass("/main.sass", "/static/css/main.css")
;(async () => {
// Stage 1: Register
for (const item of spec) {
if (item.type === "pug") {
links.set(item.source, item.target)
}
}
addPug("/index.pug", "/index.html")
// Stage 2: Build
for (const item of spec) {
if (item.type === "file") {
await addFile(item.source, item.target)
} else if (item.type === "sass") {
await addSass(item.source, item.target)
} else if (item.type === "babel") {
await addBabel(item.source, item.target)
} else if (item.type === "pug") {
await addPug(item.source, item.target)
} else {
throw new Error("Unknown item type: "+item.type)
}
}
console.log("Build complete.")
})()

4
src/footer.pug Normal file
View File

@ -0,0 +1,4 @@
footer
ul.footer-link-list
li: a(href="/") Home
li: a(href=links.get("/js-licenses.pug") data-jslicense="1") JavaScript licenses

3
src/header.pug Normal file
View File

@ -0,0 +1,3 @@
header.banner
.logo
h1 Invidious

View File

@ -1,5 +1,3 @@
//- Needs static
doctype html
html(lang="en")
head
@ -14,12 +12,8 @@ html(lang="en")
.requires-scripts {
display: none;
}
script(type="text/javascript").
document.body.classList.remove("yesscript")
header.banner
.logo
h1 Invidious
include header.pug
noscript
.script-warning
@ -50,7 +44,8 @@ html(lang="en")
th(scope="col") Action
tbody#instances-tbody
tr.loading
td(colspan="3").loading-td Loading instances...
td(colspan="3" data-loading-message="Loading instances...").loading-td Trying to run scripts...
noscript
.instances-list
h2 Available instances
@ -70,3 +65,5 @@ html(lang="en")
]
for instance in instances
li: a(href=`https://${instance}`)= instance
include footer.pug

25
src/js-licenses.pug Normal file
View File

@ -0,0 +1,25 @@
doctype html
html(lang="en")
head
title JavaScript licenses - Invidious
meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1")
link(rel="stylesheet" type="text/css" href=static.get("/main.sass"))
body
include header.pug
.js-license-table
table#jslicense-labels1
thead
tr
th(scope="col") File
th(scope="col") License
th(scope="col") Source
tbody
each script in scripts
tr
td: a(href=script.minified)= script.minified
td: a(href=script.licenseHref)= script.license
td: a(href=script.original)= script.original
include footer.pug

View File

@ -23,11 +23,28 @@
return array
}
function request(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.addEventListener("readystatechange", () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.response))
}
}
})
xhr.open("GET", url)
xhr.send()
})
}
const destinationPath = window.location.href.slice(window.location.origin.length)
q("#watch-on-youtube").href = "https://www.youtube.com" + destinationPath
fetch("https://instances.invidio.us/instances.json?sort_by=type,health").then(res => res.json()).then(
qa("[data-loading-message]").forEach(e => e.textContent = e.getAttribute("data-loading-message"))
request("https://instances.invidio.us/instances.json?sort_by=type,health").then(
/** @param {[string, {monitor: any, flag: string, region: string, stats: any, type: string, uri: string}][]} root */ root => {
shuffle(root)
root.map(entry => {
@ -35,7 +52,7 @@
return {
name: entry[0],
details: entry[1],
health: +(healthKnown ? entry[1].monitor.dailyRatios[0].ratio : 99),
health: +(healthKnown ? entry[1].monitor.dailyRatios[0].ratio : 95),
healthKnown
}
}).filter(entry => {

View File

@ -59,6 +59,12 @@ td, th
thead, tr:nth-child(even)
background-color: var(--bg-secondary)
footer
font-size: 16px
text-align: center
max-width: 500px
margin: 40px auto
.banner
display: grid
grid-gap: 24px
@ -94,7 +100,7 @@ thead, tr:nth-child(even)
@include desktop
white-space: pre-line
.instances-table
.instances-table, .js-license-table
display: flex
justify-content: center
@ -130,3 +136,15 @@ thead, tr:nth-child(even)
padding: 4px 20px
border-radius: 8px
border: 1px solid
.footer-link-list
margin: 0
padding: 0
justify-content: center
display: flex
list-style-type: none
white-space: pre-wrap
li:not(:first-child)::before
content: ""
display: inline