hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-22 17:10:10 +00:00
Code Issues Projects Releases Wiki Activity

site: use tailwind

Browse Source
This commit is contained in:
Harvey Tindall 2022-01-04 21:13:09 +00:00
parent 3b0701e772
commit e86f5f4c3c
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
10 changed files with 1812 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,6 +1,7 @@
node_modules/ node_modules/
site/node_modules/ site/node_modules/
site/out/ site/out/
site/tempts/
mail/*.html mail/*.html
dist/ dist/
build/ build/

8
scripts/missing-colors.js
View File

@ -48,9 +48,13 @@ const fixHTML = (infile, outfile) => {
let inpath = process.argv[process.argv.length-2]; let inpath = process.argv[process.argv.length-2];
let outpath = process.argv[process.argv.length-1]; let outpath = process.argv[process.argv.length-1];
let files = fs.readdirSync(inpath); if (fs.statSync(inpath).isDirectory()) {
for (let i = 0; i < files.length; i++) { let files = fs.readdirSync(inpath);
for (let i = 0; i < files.length; i++) {
if (files[i].indexOf(".html")>=0) { if (files[i].indexOf(".html")>=0) {
fixHTML(path.join(inpath, files[i]), path.join(outpath, files[i])); fixHTML(path.join(inpath, files[i]), path.join(outpath, files[i]));
} }
}
} else {
fixHTML(inpath, outpath);
} }

16
site/Makefile
View File

@ -1,9 +1,14 @@
all: all:
-mkdir -p out -mkdir -p out
cp index.html ../css/modal.css out/ cp ../css/modal.css out/
node ../scripts/missing-colors.js index.html out/index.html
cp -r node_modules/remixicon/fonts/remixicon.css node_modules/remixicon/fonts/remixicon.woff2 out/ cp -r node_modules/remixicon/fonts/remixicon.css node_modules/remixicon/fonts/remixicon.woff2 out/
npx esbuild --bundle ts/main.ts --outfile=out/main.js --minify -rm -r tempts
cp -r ts tempts
../scripts/dark-variant.sh tempts
npx esbuild --bundle tempts/main.ts --outfile=out/main.js --minify
npx esbuild --bundle base.css --outfile=out/bundle.css --external:remixicon.css --external:modal.css --minify npx esbuild --bundle base.css --outfile=out/bundle.css --external:remixicon.css --external:modal.css --minify
npx tailwindcss -i out/bundle.css -o out/bundle.css
cd out && npx uncss index.html --stylesheets bundle.css > _bundle.css; cd .. cd out && npx uncss index.html --stylesheets bundle.css > _bundle.css; cd ..
mv out/_bundle.css out/bundle.css mv out/_bundle.css out/bundle.css
cd out && npx uncss index.html --stylesheets remixicon.css > _remixicon.css; cd .. cd out && npx uncss index.html --stylesheets remixicon.css > _remixicon.css; cd ..
@ -13,10 +18,15 @@ all:
debug: debug:
-mkdir -p out -mkdir -p out
cp index.html out/ cp ../css/modal.css out/
node ../scripts/missing-colors.js index.html out/index.html
cp -r node_modules/remixicon/fonts/remixicon.css node_modules/remixicon/fonts/remixicon.woff2 out/ cp -r node_modules/remixicon/fonts/remixicon.css node_modules/remixicon/fonts/remixicon.woff2 out/
-rm -r tempts
cp -r ts tempts
../scripts/dark-variant.sh tempts
npx esbuild --bundle base.css --outfile=out/bundle.css --external:remixicon.css --minify npx esbuild --bundle base.css --outfile=out/bundle.css --external:remixicon.css --minify
npx esbuild --bundle ts/main.ts --sourcemap --outfile=out/main.js --minify npx esbuild --bundle ts/main.ts --sourcemap --outfile=out/main.js --minify
npx tailwindcss -i out/bundle.css -o out/bundle.css
cp ../static/* out/ cp ../static/* out/
monitor: monitor:

4
site/base.css
View File

@ -11,7 +11,3 @@ body {
background: #AA5CC3; background: #AA5CC3;
background: linear-gradient(90deg, #AA5CC3 0%, #00A4DC 100%) !important; background: linear-gradient(90deg, #AA5CC3 0%, #00A4DC 100%) !important;
} }
.text-center {
text-align: center;
}

42
site/index.html
View File

@ -19,7 +19,7 @@
</head> </head>
<body class="max-w-full overflow-x-hidden section"> <body class="max-w-full overflow-x-hidden section">
<div id="modal-deb" class="modal"> <div id="modal-deb" class="modal">
<div class="modal-content wide card ~neutral"> <div class="modal-content wide card">
<span class="heading"> Debian/Ubuntu (apt)</span> <span class="heading"> Debian/Ubuntu (apt)</span>
<div class="mt-1"> <div class="mt-1">
<pre style="margin: 0; line-height: 125%">curl https://apt.hrfee.dev/hrfee.pubkey.gpg | sudo apt-key add - <pre style="margin: 0; line-height: 125%">curl https://apt.hrfee.dev/hrfee.pubkey.gpg | sudo apt-key add -
@ -38,7 +38,7 @@ sudo apt-get install jfa-go-tray
</div> </div>
</div> </div>
<div id="modal-docker" class="modal"> <div id="modal-docker" class="modal">
<div class="modal-content wide card ~neutral"> <div class="modal-content wide card">
<span class="heading"> Docker</span> <span class="heading"> Docker</span>
<div class="mt-1"> <div class="mt-1">
<pre style="margin: 0; line-height: 125%">docker create <span style="color: #BB6622; font-weight: bold">\</span> <pre style="margin: 0; line-height: 125%">docker create <span style="color: #BB6622; font-weight: bold">\</span>
@ -61,7 +61,7 @@ sudo apt-get install jfa-go-tray
<p class="content">a better way to manage your Jellyfin users.</p> <p class="content">a better way to manage your Jellyfin users.</p>
</div> </div>
<div class="row col flex center"> <div class="row col flex center">
<ul class="support"> <ul class="support list-disc">
<li>Send invite links to your users, let them sign up themselves</li> <li>Send invite links to your users, let them sign up themselves</li>
<li>Create setting profiles to restrict permissions of new users</li> <li>Create setting profiles to restrict permissions of new users</li>
<li>Handles password resets without your intervention</li> <li>Handles password resets without your intervention</li>
@ -74,23 +74,23 @@ sudo apt-get install jfa-go-tray
</div> </div>
<span class="row col flex center supra">links</span> <span class="row col flex center supra">links</span>
<div class="row col flex center"> <div class="row col flex center">
<a class="button ~neutral mr-half mt-1 mb-1" href="https://github.com/hrfee/jfa-go">github</a> <a class="button ~neutral mr-2 mt-1 mb-1" href="https://github.com/hrfee/jfa-go">github</a>
<a class="button ~urge mt-1 mb-1 mr-half" href="https://wiki.jfa-go.com">wiki/docs</a> <a class="button ~urge mt-1 mb-1 mr-2" href="https://wiki.jfa-go.com">wiki/docs</a>
<a class="button ~positive mt-1 mb-1 mr-half" href="https://weblate.jfa-go.com">translation</a> <a class="button ~positive mt-1 mb-1 mr-2" href="https://weblate.jfa-go.com">translation</a>
<div class="dropdown mr-half" tabindex="0"> <div class="dropdown mr-2" tabindex="0">
<a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~info mt-1 mb-1 dropdown-button"> <a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~info mt-1 mb-1 dropdown-button">
<i class="ri-hand-heart-line mr-half"></i> <i class="ri-hand-heart-line mr-2"></i>
donate donate
<span class="ml-1 chev"></span> <span class="ml-2 chev"></span>
</a> </a>
<div class="dropdown-display"> <div class="dropdown-display">
<div class="card ~info @low"> <div class="card @low">
<a href="https://github.com/sponsors/hrfee" target="_blank" class="button input ~neutral field mb-half lang-link">GitHub</a> <a href="https://github.com/sponsors/hrfee" target="_blank" class="button input ~neutral field mb-2 lang-link">GitHub</a>
<a href="https://ko-fi.com/hrfee" target="_blank" class="button input ~neutral field mb-half lang-link">Ko-fi</a> <a href="https://ko-fi.com/hrfee" target="_blank" class="button input ~neutral field mb-2 lang-link">Ko-fi</a>
</div> </div>
</div> </div>
</div> </div>
<a class="button ~urge mt-1 mb-1 @low discord" href="https://discord.com/invite/MrtvuQmyhP" target="_blank"><i class="ri-discord-line mr-half"></i>discord</a> <a class="button ~urge mt-1 mb-1 @low discord" href="https://discord.com/invite/MrtvuQmyhP" target="_blank"><i class="ri-discord-line mr-2"></i>discord</a>
</div> </div>
<p class="row col flex center supra">downloads</p> <p class="row col flex center supra">downloads</p>
<p class="row col flex center support">instructions can be found&nbsp<a target="_blank" href="https://github.com/hrfee/jfa-go#install">here</a></p> <p class="row col flex center support">instructions can be found&nbsp<a target="_blank" href="https://github.com/hrfee/jfa-go#install">here</a></p>
@ -102,19 +102,19 @@ sudo apt-get install jfa-go-tray
<div class="mt-1" id="sect-stable"> <div class="mt-1" id="sect-stable">
<p class="row center">Usually released once/twice every month, and aren't necessarily super stable.</p> <p class="row center">Usually released once/twice every month, and aren't necessarily super stable.</p>
<div class="row col flex center"> <div class="row col flex center">
<a class="button ~info mr-half mb-half lang-link" target="_blank" href="https://github.com/hrfee/jfa-go/releases">windows/mac/linux</a> <a class="button ~info mr-2 mb-2 lang-link" target="_blank" href="https://github.com/hrfee/jfa-go/releases">windows/mac/linux</a>
<a class="button ~info mr-half mb-half lang-link" id="download-docker">docker</a> <a class="button ~info mr-2 mb-2 lang-link" id="download-docker">docker</a>
<a class="button ~info mr-half mb-half lang-link" id="download-deb">debian/ubuntu</a> <a class="button ~info mr-2 mb-2 lang-link" id="download-deb">debian/ubuntu</a>
<a class="button ~info mr-half mb-half lang-link" target="_blank" href="https://aur.archlinux.org/packages/jfa-go">arch (aur)</a> <a class="button ~info mr-2 mb-2 lang-link" target="_blank" href="https://aur.archlinux.org/packages/jfa-go">arch (aur)</a>
<a class="button ~info mr-half mb-half lang-link" target="_blank" href="https://aur.archlinux.org/packages/jfa-go-bin">arch (aur binary)</a> <a class="button ~info mr-2 mb-2 lang-link" target="_blank" href="https://aur.archlinux.org/packages/jfa-go-bin">arch (aur binary)</a>
</div> </div>
</div> </div>
<div class="mt-1 unfocused" id="sect-unstable"> <div class="mt-1 unfocused" id="sect-unstable">
<p class="row center">These are built on every commit, so may include incomplete/broken features. Take care.</p> <p class="row center">These are built on every commit, so may include incomplete/broken features. Take care.</p>
<div class="row col flex center"> <div class="row col flex center">
<a class="button ~info mr-half mb-half lang-link" id="download-docker-unstable">docker</a> <a class="button ~info mr-2 mb-2 lang-link" id="download-docker-unstable">docker</a>
<a class="button ~info mr-half mb-half lang-link" id="download-deb-unstable">debian/ubuntu</a> <a class="button ~info mr-2 mb-2 lang-link" id="download-deb-unstable">debian/ubuntu</a>
<a class="button ~info mr-half mb-half lang-link" target="_blank" href="https://aur.archlinux.org/packages/jfa-go-git">arch (aur git)</a> <a class="button ~info mr-2 mb-2 lang-link" target="_blank" href="https://aur.archlinux.org/packages/jfa-go-git">arch (aur git)</a>
</div> </div>
</div> </div>
<section class="section ~neutral banner footer flex-expand middle"> <section class="section ~neutral banner footer flex-expand middle">

1806
site/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
site/package.json
View File

@ -9,9 +9,10 @@
"author": "Harvey Tindall <hrfee@hrfee.dev>", "author": "Harvey Tindall <hrfee@hrfee.dev>",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"a17t": "^0.5.1", "a17t": "^0.10.1",
"esbuild": "^0.12.12", "esbuild": "^0.12.12",
"remixicon": "^2.5.0", "remixicon": "^2.5.0",
"tailwindcss": "^3.0.10",
"uncss": "^0.17.3" "uncss": "^0.17.3"
}, },
"devDependencies": { "devDependencies": {

26
site/tailwind.config.js Normal file
View File

@ -0,0 +1,26 @@
let colors = require("tailwindcss/colors")
let dark = require("../css/dark");
module.exports = {
content: ["./index.html", "./out/main.js"],
darkMode: 'class',
theme: {
extend: {
colors: {
neutral: colors.slate,
positive: colors.green,
urge: colors.violet,
warning: colors.yellow,
info: colors.blue,
critical: colors.red,
d_neutral: dark.d_neutral,
d_positive: dark.d_positive,
d_urge: dark.d_urge,
d_warning: dark.d_warning,
d_info: dark.d_info,
d_critical: dark.d_critical
}
}
},
plugins: [require("a17t")],
}

2
site/ts/main.ts
View File

@ -30,6 +30,7 @@ stableButton.onclick = () => {
debUnstable.classList.add("unfocused"); debUnstable.classList.add("unfocused");
dockerUnstable.classList.add("unfocused"); dockerUnstable.classList.add("unfocused");
stableButton.classList.add("@high"); stableButton.classList.add("@high");
stableButton.classList.remove("@low");
unstableButton.classList.remove("@high"); unstableButton.classList.remove("@high");
stableSect.classList.remove("unfocused"); stableSect.classList.remove("unfocused");
unstableSect.classList.add("unfocused"); unstableSect.classList.add("unfocused");
@ -40,6 +41,7 @@ unstableButton.onclick = () => {
debUnstable.classList.remove("unfocused"); debUnstable.classList.remove("unfocused");
dockerUnstable.classList.remove("unfocused"); dockerUnstable.classList.remove("unfocused");
unstableButton.classList.add("@high"); unstableButton.classList.add("@high");
unstableButton.classList.remove("@low");
stableButton.classList.remove("@high"); stableButton.classList.remove("@high");
stableSect.classList.add("unfocused"); stableSect.classList.add("unfocused");
unstableSect.classList.remove("unfocused"); unstableSect.classList.remove("unfocused");

10
site/ts/repo.ts
View File

@ -24,7 +24,7 @@ export const loadBuilds = () => {
for (let buildName in categories) { for (let buildName in categories) {
if (Object.keys(categories[buildName]).length == 1) { if (Object.keys(categories[buildName]).length == 1) {
const button = document.createElement("a") as HTMLAnchorElement; const button = document.createElement("a") as HTMLAnchorElement;
button.classList.add("button", "~info", "mr-half", "mb-half", "lang-link"); button.classList.add("button", "~info", "mr-2", "mb-2", "lang-link");
button.target = "_blank"; button.target = "_blank";
button.textContent = buildName.toLowerCase(); button.textContent = buildName.toLowerCase();
button.href = urlBase + categories[buildName][Object.keys(categories[buildName])[0]]; button.href = urlBase + categories[buildName][Object.keys(categories[buildName])[0]];
@ -34,16 +34,16 @@ export const loadBuilds = () => {
dropdown.tabIndex = 0; dropdown.tabIndex = 0;
dropdown.classList.add("dropdown"); dropdown.classList.add("dropdown");
let innerHTML = ` let innerHTML = `
<span class="button ~info mr-half mb-half lang-link"> <span class="button ~info mr-2 mb-2 lang-link">
${buildName.toLowerCase()} ${buildName.toLowerCase()}
<span class="ml-half chev"></span> <span class="ml-2 chev"></span>
</span> </span>
<div class="dropdown-display above"> <div class="dropdown-display above">
<div class="card ~info @low"> <div class="card @low">
`; `;
for (let arch in categories[buildName]) { for (let arch in categories[buildName]) {
innerHTML += ` innerHTML += `
<a href="${urlBase + categories[buildName][arch]}" target="_blank" class="button input ~neutral field mb-half lang-link">${arch}</a> <a href="${urlBase + categories[buildName][arch]}" target="_blank" class="button input ~neutral field mb-2 lang-link">${arch}</a>
`; `;
} }
innerHTML += ` innerHTML += `