updater: check build is ready

Further Mobile Optimisations

Dockerfile

@@ -4,7 +4,7 @@ COPY . /opt/build
 
 RUN apt-get update -y \
     && apt-get install build-essential python3-pip curl software-properties-common sed -y \
-    && (curl -sL https://deb.nodesource.com/setup_14.x | bash -) \
+    && (curl -sL https://deb.nodesource.com/setup_current.x | bash -) \
     && apt-get install nodejs \
     && (cd /opt/build; make configuration npm email typescript variants-html bundle-css inline-css swagger copy INTERNAL=off GOESBUILD=on) \
     && sed -i 's#id="password_resets-watch_directory" placeholder="/config/jellyfin"#id="password_resets-watch_directory" value="/jf" disabled#g' /opt/build/build/data/html/setup.html

Makefile

@@ -97,17 +97,17 @@ email:
 typescript:
 	$(TYPECHECK)
 	$(adding dark variants to typescript)
-	-rm -r tempts
+	rm -rf tempts
 	cp -r ts tempts
 	scripts/dark-variant.sh tempts
 	scripts/dark-variant.sh tempts/modules
 	$(info compiling typescript)
-	-mkdir -p $(DATA)/web/js
-	-$(ESBUILD) --bundle tempts/admin.ts $(SOURCEMAP) --outfile=./$(DATA)/web/js/admin.js --minify
-	-$(ESBUILD) --bundle tempts/pwr.ts $(SOURCEMAP) --outfile=./$(DATA)/web/js/pwr.js --minify
-	-$(ESBUILD) --bundle tempts/form.ts $(SOURCEMAP) --outfile=./$(DATA)/web/js/form.js --minify
-	-$(ESBUILD) --bundle tempts/setup.ts $(SOURCEMAP) --outfile=./$(DATA)/web/js/setup.js --minify
-	-$(ESBUILD) --bundle tempts/crash.ts --outfile=./$(DATA)/crash.js --minify
+	mkdir -p $(DATA)/web/js
+	$(ESBUILD) --bundle tempts/admin.ts $(SOURCEMAP) --outfile=./$(DATA)/web/js/admin.js --minify
+	$(ESBUILD) --bundle tempts/pwr.ts $(SOURCEMAP) --outfile=./$(DATA)/web/js/pwr.js --minify
+	$(ESBUILD) --bundle tempts/form.ts $(SOURCEMAP) --outfile=./$(DATA)/web/js/form.js --minify
+	$(ESBUILD) --bundle tempts/setup.ts $(SOURCEMAP) --outfile=./$(DATA)/web/js/setup.js --minify
+	$(ESBUILD) --bundle tempts/crash.ts --outfile=./$(DATA)/crash.js --minify
 	$(COPYTS)
 
 swagger:
@@ -125,7 +125,7 @@ compress:
 	upx --lzma build/jfa-go
 
 bundle-css:
-	-mkdir -p $(DATA)/web/css
+	mkdir -p $(DATA)/web/css
 	$(info bundling css)
 	$(ESBUILD) --bundle css/base.css --outfile=$(DATA)/web/css/bundle.css --external:remixicon.css --minify
 	npx tailwindcss -i $(DATA)/web/css/bundle.css -o $(DATA)/web/css/bundle.css $(TAILWIND)
@@ -149,7 +149,7 @@ copy:
 	$(info copying crash page)
 	mv $(DATA)/crash.html $(DATA)/html/
 	$(info copying static data)
-	-mkdir -p $(DATA)/web
+	mkdir -p $(DATA)/web
 	cp -r static/* $(DATA)/web/
 	$(info copying systemd service)
 	cp jfa-go.service $(DATA)/

css/base.css

@@ -31,10 +31,6 @@
     background: #202020;
 }
 
-.dark .code {
-    color: var(--color-content-high);
-}
-
 html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\~warning):not(.\~info):not(.\~critical) {
     --color-fill: va(--color-fill);
     --color-content: var(--color-content);
@@ -92,11 +88,6 @@ html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\
     padding: var(--spacing-4,1rem);
 }
 
-.modal-content .banner {
-    margin-left: calc(-1 * var(--spacing-4,1rem) - 0.5%); /* Not sure why this is necessary */
-    margin-right: calc(-1 * var(--spacing-4,1rem) - 0.5%);
-}
-
 div.card:contains(section.banner.footer) {
     padding-bottom: 0px;
 }
@@ -133,20 +124,11 @@ div.card:contains(section.banner.footer) {
     align-items: top;
 }
 
-.flex {
-    display: flex;
-}
-
 .flex-expand {
     display: flex;
     justify-content: space-between;
 }
 
-.flex-row {
-    display: flex;
-    flex-direction: row;
-}
-
 .flex-row-group {
     display: block;
     flex-grow: 1;

css/modal.css

@@ -10,56 +10,6 @@
     background-color: rgba(0,0,0,40%);
 }
 
-.modal-shown {
-    display: block;
-}
-
-@keyframes modal-hide {
-    from { opacity: 1; }
-    to { opacity: 0; }
-}
-
-.modal-hiding {
-    animation: modal-hide 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-@keyframes modal-content-show {
-    from {
-        opacity: 0;
-        top: -6rem;
-    }
-    to {
-        opacity: 1;
-        top: 0;
-    }
-}
-
-.modal-content {
-    position: relative;
-    margin: 10% auto;
-    width: 30%;
-}
-
-.modal-content.wide {
-    width: 60%;
-}
-
-.modal-shown .modal-content {
-    animation: modal-content-show 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-@media screen and (max-width: 1000px) {
-    .modal-content.wide {
-        width: 75%;
-    }
-}
-
-@media screen and (max-width: 400px) {
-    .modal-content, .modal-content.wide {
-        width: 90%;
-    }
-}
-
 .modal-close {
     float: right;
     color: #aaa;

html/admin.html

@@ -23,7 +23,7 @@
     </head>
     <body class="max-w-full overflow-x-hidden section">
         <div id="modal-login" class="modal">
-            <form class="modal-content card" id="form-login" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-login" href="">
                 <span class="heading">{{ .strings.login }}</span>
                 <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user">
                 <input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password">
@@ -34,7 +34,7 @@
             </form>
         </div>
         <div id="modal-add-user" class="modal">
-            <form class="modal-content card" id="form-add-user" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-add-user" href="">
                 <span class="heading">{{ .strings.newUser }} <span class="modal-close">&times;</span></span>
                 <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="add-user-user">
                 <input type="email" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.emailAddress }}">
@@ -46,11 +46,11 @@
             </form>
         </div>
         <div id="modal-about" class="modal">
-            <div class="modal-content content card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-1/3 content card">
                 <img src="{{ .urlBase }}/banner.svg" class="banner header" alt="jfa-go banner">
                 <span class="heading"><span class="modal-close">&times;</span></span>
-                <p>{{ .strings.version }} <span class="code font-mono bg-inherit">{{ .version }}</span></p>
-                <p>{{ .strings.commitNoun }} <span class="code font-mono bg-inherit">{{ .commit }}</span></p>
+                <p>{{ .strings.version }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .version }}</span></p>
+                <p>{{ .strings.commitNoun }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .commit }}</span></p>
                 <div class="row col flex">
                     <a class="button ~neutral mr-2 mt-4 mb-4 lang-link" href="https://github.com/hrfee/jfa-go"><i class="ri-github-line mr-2"></i>github</a>
                     <a class="button ~urge mt-4 mb-4 mr-2 lang-link" href="https://wiki.jfa-go.com">wiki/docs</a>
@@ -75,13 +75,13 @@
             </div>
         </div>
         <div id="modal-logs" class="modal">
-            <div class="modal-content wide content card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content content card">
                 <span class="heading">{{ .strings.logs }}<span class="modal-close">&times;</span></span>
                 <pre class="monospace" id="log-area"></pre>
             </div>
         </div>
         <div id="modal-modify-user" class="modal">
-            <form class="modal-content card" id="form-modify-user" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-modify-user" href="">
                 <span class="heading"><span id="header-modify-user"></span> <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.modifySettingsDescription }}</p>
                 <div class="flex-row mb-4">
@@ -111,7 +111,7 @@
             </form>
         </div>
         <div id="modal-delete-user" class="modal">
-            <form class="modal-content card" id="form-delete-user" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-delete-user" href="">
                 <span class="heading"><span id="header-delete-user"></span> <span class="modal-close">&times;</span></span>
                 <div class="content mt-8">
                     <label class="switch mb-4">
@@ -127,7 +127,7 @@
             </form>
         </div>
         <div id="modal-extend-expiry" class="modal">
-            <form class="modal-content card" id="form-extend-expiry" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-extend-expiry" href="">
                 <span class="heading"><span id="header-extend-expiry"></span> <span class="modal-close">&times;</span></span>
                 <div class="content mt-8">
                     <div class="row">
@@ -179,7 +179,7 @@
             </form>
         </div>
         <div id="modal-announce" class="modal">
-            <form class="modal-content wide card" id="form-announce" href="">
+            <form class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card" id="form-announce" href="">
                 <span class="heading"><span id="header-announce"></span> <span class="modal-close">&times;</span></span>
                 <div class="row">
                     <div class="col card ~neutral @low">
@@ -214,7 +214,7 @@
             </form>
         </div>
         <div id="modal-customize" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                 <span class="heading">{{ .strings.customizeMessages }} <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.customizeMessagesDescription }}</p>
                 <div class="table-responsive">
@@ -232,7 +232,7 @@
             </div>
         </div>
         <div id="modal-editor" class="modal">
-            <form class="modal-content wide card" id="form-editor" href="">
+            <form class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card" id="form-editor" href="">
                 <span class="heading"><span id="header-editor"></span> <span class="modal-close">&times;</span></span>
                 <div class="row">
                     <div class="col card ~neutral @low">
@@ -258,7 +258,7 @@
             </form>
         </div>
         <div id="modal-restart" class="modal">
-            <div class="modal-content card ~critical @low">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~critical @low">
                 <span class="heading">{{ .strings.settingsRestartRequired }} <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.settingsRestartRequiredDescription }}</p>
                 <div class="float-right">
@@ -268,20 +268,20 @@
             </div>
         </div>
         <div id="modal-refresh" class="modal">
-            <div class="modal-content card ~neutral @low">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
                 <span class="heading">{{ .strings.settingsApplied }}</span>
                 <p class="content">{{ .strings.settingsRefreshPage }}</p>
             </div>
         </div>
         <div id="modal-send-pwr" class="modal">
-            <div class="modal-content card ~neutral @low">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
                 <span class="heading">{{ .strings.sendPWR }}</span>
                 <p class="content my-2" id="send-pwr-note"></p>
                 <span class="button ~urge @low mt-2" id="send-pwr-link">{{ .strings.copy }}</span>
             </div>
         </div>
         <div id="modal-ombi-profile" class="modal">
-            <form class="modal-content card" id="form-ombi-defaults" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-ombi-defaults" href="">
                 <span class="heading">{{ .strings.ombiProfile }} <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.ombiUserDefaultsDescription }}</p>
                 <div class="select ~neutral @low mb-4">
@@ -294,7 +294,7 @@
             </form>
         </div>
         <div id="modal-user-profiles" class="modal">
-            <div class="modal-content wide card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
                 <span class="heading">{{ .strings.userProfiles }} <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.userProfilesDescription }}</p>
                 <div class="table-responsive">
@@ -317,7 +317,7 @@
             </div>
         </div>
         <div id="modal-add-profile" class="modal">
-            <form class="modal-content card" id="form-add-profile" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-add-profile" href="">
                 <span class="heading">{{ .strings.addProfile }} <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.addProfileDescription }}</p>
                 <label>
@@ -340,7 +340,7 @@
             </form>
         </div>
         <div id="modal-update" class="modal">
-            <div class="modal-content wide card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
                 <span class="heading">{{ .strings.updates }} <span class="modal-close">&times;</span></span>
                 <p class="content">
                     <h2 class="mt-2">
@@ -356,7 +356,7 @@
         </div>
         {{ if .telegramEnabled }}
         <div id="modal-telegram" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                 <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
                 <p class="content mb-4">{{ .strings.sendPIN }}</p>
                 <h1 class="ac" id="telegram-pin"></h1>
@@ -374,7 +374,7 @@
         {{ end }}
         {{ if .discordEnabled }}
         <div id="modal-discord" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                 <span class="heading mb-4"><span id="discord-header"></span><span class="modal-close">&times;</span></span>
                 <p class="content mb-4" id="discord-description"></p>
                 <div class="row">
@@ -385,7 +385,7 @@
         </div>
         {{ end }}
         <div id="modal-matrix" class="modal">
-            <form class="modal-content card" id="form-matrix" href="">
+            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-matrix" href="">
                 <span class="heading">{{ .strings.linkMatrix }}</span>
                 <p class="content my-4">{{ .strings.linkMatrixDescription }}</p>
                 <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.matrixHomeServer }}" id="matrix-homeserver">
@@ -424,9 +424,9 @@
             <div class="mb-4">
                 <header class="flex flex-wrap items-center justify-between">
                     <div>
-                        <span id="button-tab-invites" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 px-5">{{ .strings.invites }}</span>
-                        <span id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 px-5">{{ .strings.accounts }}</span>
-                        <span id="button-tab-settings" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 px-5">{{ .strings.settings }}</span>
+                        <span id="button-tab-invites" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.invites }}</span>
+                        <span id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.accounts }}</span>
+                        <span id="button-tab-settings" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.settings }}</span>
                     </div>
                 </header>
             </div>
@@ -442,7 +442,7 @@
                 </div>
                 <div class="card @low dark:~d_neutral">
                     <span class="heading">{{ .strings.create }}</span>
-                    <div class="row" id="create-inv">
+                    <div class="flex flex-col md:flex-row gap-3" id="create-inv">
                         <div class="card ~neutral @low col">
                             <div class="row mb-2">
                                 <label class="col mr-2">
@@ -643,18 +643,18 @@
                     <div class="flex-expand">
                         <div class="flex-row">
                             <span class="heading">{{ .strings.settings }}</span>
-                            <label for="settings-advanced-enabled" class="button ~neutral @low ml-2">
+                            <label for="settings-advanced-enabled" class="button ~neutral @low ml-2 my-2">
                                 <input type="checkbox" id="settings-advanced-enabled" aria-label="Advanced settings enabled">
                                 <span class="ml-2">{{ .strings.advancedSettings }} </span>
                             </label>
                         </div>
                         <div>
-                            <span class="button ~info @low" id="settings-logs">{{ .strings.logs }}</span>
-                            <span class="button ~neutral @low" id="settings-restart">{{ .strings.settingsRestart }}</span>
-                            <span class="button ~urge @low unfocused" id="settings-save">{{ .strings.settingsSave }}</span>
+                            <span class="button ~info @low my-1" id="settings-logs">{{ .strings.logs }}</span>
+                            <span class="button ~neutral @low my-1" id="settings-restart">{{ .strings.settingsRestart }}</span>
+                            <span class="button ~urge @low unfocused my-1" id="settings-save">{{ .strings.settingsSave }}</span>
                         </div>
                     </div>
-                    <div class="row">
+                    <div class="flex flex-col md:flex-row gap-3">
                         <div class="card @low dark:~d_neutral col" id="settings-sidebar">
                             <aside class="aside sm ~urge dark:~d_info mb-2 @low" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info dark:~d_warning">R</span> indicates changes require a restart.</aside> 
                             <span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span>

html/form.html

@@ -11,21 +11,21 @@
     </head>
     <body class="max-w-full overflow-x-hidden section">
         <div id="modal-success" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                 <span class="heading mb-4">{{ if .passwordReset }}{{ .strings.passwordReset }}{{ else }}{{ .strings.successHeader }}{{ end }}</span>
                 <p class="content mb-4">{{ if .passwordReset }}{{ .strings.youCanLoginPassword }}{{ else }}{{ .successMessage }}{{ end }}</p>
                 <a class="button ~urge @low full-width center supra submit" href="{{ .jfLink }}" id="create-success-button">{{ .strings.continue }}</a>
             </div>
         </div>
         <div id="modal-confirmation" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                 <span class="heading mb-4">{{ .strings.confirmationRequired }}</span>
                 <p class="content mb-4">{{ .strings.confirmationRequiredMessage }}</p>
             </div>
         </div>
         {{ if .telegramEnabled }}
         <div id="modal-telegram" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                 <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
                 <p class="content mb-4">{{ .strings.sendPIN }}</p>
                 <p class="text-center text-2xl mb-2">{{ .telegramPIN }}</p>
@@ -43,7 +43,7 @@
         {{ end }}
         {{ if .discordEnabled }}
         <div id="modal-discord" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                 <span class="heading mb-4">{{ .strings.linkDiscord }}</span>
                 <p class="content mb-4"> {{ .discordSendPINMessage }}</p>
                 <h1 class="text-center text-2xl mb-2">{{ .discordPIN }}</h1>
@@ -54,7 +54,7 @@
         {{ end }}
         {{ if .matrixEnabled }}
         <div id="modal-matrix" class="modal">
-            <div class="modal-content card">
+            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                 <span class="heading mb-4">{{ .strings.linkMatrix }}</span>
                 <p class="content mb-4"> {{ .strings.matrixEnterUser }}</p>
                 <input type="text" class="input ~neutral @high" placeholder="@user:riot.im" id="matrix-userid">
@@ -85,15 +85,15 @@
         <div id="notification-box"></div>
         <div class="page-container">
             <div class="card dark:~d_neutral @low">
-                <div class="row baseline">
-                    <span class="flex-form heading mr-5">
+                <div class="flex flex-col md:flex-row gap-3 baseline">
+                    <span class="heading mr-5">
                         {{ if .passwordReset }}
                         {{ .strings.passwordReset }}
                         {{ else }}
                         {{ .strings.createAccountHeader }}
                         {{ end }}
                     </span>
-                    <span class="flex-form subheading">
+                    <span class="subheading">
                         {{ if .passwordReset }}
                         {{ .strings.enterYourPassword }}
                         {{ else }}
@@ -101,8 +101,8 @@
                         {{ end }}
                     </span>
                 </div>
-                <div class="row">
-                    <div class="flex-form">
+                <div class="flex flex-col md:flex-row gap-3">
+                    <div class="flex-1">
                         {{ if .userExpiry }}
                         <aside class="col aside sm ~warning" id="user-expiry-message"></aside>
                         {{ end }}
@@ -164,7 +164,7 @@
                             </label>
                         </form>
                     </div>
-                    <div class="col">
+                    <div class="flex-1">
                         <div class="card ~neutral @low mb-4">
                             <span class="label supra" for="inv-uses">{{ .strings.passwordRequirementsHeader }}</span>
                             <ul>

lang/admin/hu-hu.json

@@ -1,6 +1,6 @@
 {
     "meta": {
-        "name": ""
+        "name": "Magyar (HU)"
     },
     "strings": {
         "invites": "",

lang/form/hu-hu.json

@@ -1,6 +1,6 @@
 {
     "meta": {
-        "name": "Magyar"
+        "name": "Magyar (HU)"
     },
     "strings": {
         "pageTitle": "Jellyfin fiók létrehozása",

package.json

@@ -30,6 +30,7 @@
     "mjml": "^4.12.0",
     "nightwind": "github:yonson2/nightwind",
     "perl-regex": "^1.0.4",
+    "postcss": "^8.4.5",
     "remixicon": "^2.5.0",
     "remove-markdown": "^0.3.0",
     "typescript": "^4.0.3",
@@ -37,6 +38,6 @@
   },
   "devDependencies": {
     "live-server": "^1.2.1",
-    "tailwindcss": "^3.0.8"
+    "tailwindcss": "^3.0.16"
   }
 }

scripts/missing-colors.js

@@ -3,6 +3,8 @@ let fs = require("fs");
 let path = require("path");
 let pre = require("perl-regex");
 
+const template = process.env.NOTEMPLATE != "1";
+
 const hasDark = (item) => {
     let list = item.attr("class").split(/\s+/);
     for (let i = 0; i < list.length; i++) {
@@ -23,10 +25,12 @@ function fixHTML(infile, outfile) {
     let f = fs.readFileSync(infile).toString();
     // Find all go template strings ({{ example }})
     let templateStrings = pre.exec(f, "(?s){{(?:(?!{{).)*?}}", "gi");
-    for (let i = 0; i < templateStrings.length; i++) {
-        let s = templateStrings[i].replace(/\\/g, '');
-        // let s = templateStrings[i];
-        f = f.replaceAll(s, "<!--" + s.slice(3).slice(0, -3) + "-->");
+    if (template) {
+        for (let i = 0; i < templateStrings.length; i++) {
+            let s = templateStrings[i].replace(/\\/g, '');
+            // let s = templateStrings[i];
+            f = f.replaceAll(s, "<!--" + s.slice(3).slice(0, -3) + "-->");
+        }
     }
     let doc = new parser.load(f);
     for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card", "field", "textarea"]) {
@@ -58,12 +62,14 @@ function fixHTML(infile, outfile) {
     }
     let out = doc.html();
     // let out = f
-    for (let i = 0; i < templateStrings.length; i++) {
-        let s = templateStrings[i].replace(/\\/g, '');
-        out = out.replaceAll("<!--" + s.slice(3).slice(0, -3) + "-->", s);
-    }
+    if (template) {
+        for (let i = 0; i < templateStrings.length; i++) {
+            let s = templateStrings[i].replace(/\\/g, '');
+            out = out.replaceAll("<!--" + s.slice(3).slice(0, -3) + "-->", s);
+        }
     out = out.replaceAll("&lt;!--", "{{");
     out = out.replaceAll("--&gt;", "}}");
+    }
     fs.writeFileSync(outfile, out);
     console.log(infile, outfile);
 };

site/Makefile

@@ -1,7 +1,7 @@
 all:
 	-mkdir -p out
 	cp ../css/modal.css out/
-	node ../scripts/missing-colors.js index.html out/index.html
+	NOTEMPLATE=1 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/
 	-rm -r tempts
 	cp -r ts tempts
@@ -19,7 +19,7 @@ all:
 debug:
 	-mkdir -p out
 	cp ../css/modal.css out/
-	node ../scripts/missing-colors.js index.html out/index.html
+	NOTEMPLATE=1 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/
 	-rm -r tempts
 	cp -r ts tempts

site/index.html

@@ -19,7 +19,7 @@
     </head>
     <body class="max-w-full overflow-x-hidden section">
         <div id="modal-deb" class="modal">
-            <div class="modal-content wide card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
                 <span class="heading"> Debian/Ubuntu (apt)</span>
                 <div class="mt-1">
                     <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 id="modal-docker" class="modal">
-            <div class="modal-content wide card">
+            <div class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card">
                 <span class="heading"> Docker</span>
                 <div class="mt-1">
                     <pre style="margin: 0; line-height: 125%">docker create <span style="color: #BB6622; font-weight: bold">\</span>

tailwind.config.js

@@ -6,6 +6,28 @@ module.exports = {
   darkMode: 'class',
   theme: {
       extend: {
+          keyframes: {
+              'fade-in': {
+                  '0%': {
+                      opacity: '0'
+                  },
+                  '100%': {
+                      opacity: '1'
+                  }
+              },
+              'fade-out': {
+                  '0%': {
+                      opacity: '1'
+                  },
+                  '100%': {
+                      opacity: '0'
+                  }
+              },
+          },
+          animation: {
+              'fade-in': 'fade-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+              'fade-out': 'fade-out 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+          },
           colors: {
               neutral: colors.slate,
               positive: colors.green,

ts/modules/invites.ts

@@ -257,7 +257,7 @@ class DOMInvite implements Invite {
         this._header.appendChild(this._codeArea);
         this._codeArea.classList.add("inv-codearea");
         this._codeArea.innerHTML = `
-        <a class="invite-link code font-mono bg-inherit mr-4" href=""></a>
+        <a class="invite-link text-black dark:text-white font-mono bg-inherit mr-4" href=""></a>
         <span class="button ~info @low" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
         `;
         const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement;
@@ -427,7 +427,7 @@ export class inviteList implements inviteList {
             <div class="inv inv-empty">
                 <div class="card dark:~d_neutral @low inv-header flex-expand mt-2">
                     <div class="inv-codearea">
-                        <span class="code font-mono bg-inherit">${window.lang.strings("inviteNoInvites")}</span>
+                        <span class="text-black dark:text-white font-mono bg-inherit">${window.lang.strings("inviteNoInvites")}</span>
                     </div>
                 </div>
             </div>

ts/modules/modal.ts

@@ -24,11 +24,12 @@ export class Modal implements Modal {
         if (event) {
             event.preventDefault();
         }
-        this.modal.classList.add('modal-hiding');
+        this.modal.classList.add('animate-fade-out');
+        this.modal.classList.remove("animate-fade-in");
         const modal = this.modal;
         const listenerFunc = () => {
-            modal.classList.remove('modal-shown');
-            modal.classList.remove('modal-hiding');
+            modal.classList.remove('block');
+            modal.classList.remove('animate-fade-out');
             modal.removeEventListener(window.animationEvent, listenerFunc);
             document.dispatchEvent(this.closeEvent);
         };
@@ -43,11 +44,11 @@ export class Modal implements Modal {
     }
 
     show = () => {
-        this.modal.classList.add('modal-shown');
+        this.modal.classList.add('block', 'animate-fade-in');
         document.dispatchEvent(this.openEvent);
     }
     toggle = () => {
-        if (this.modal.classList.contains('modal-shown')) {
+        if (this.modal.classList.contains('animate-fade-in')) {
             this.close();
         } else {
             this.show();

updater.go

@@ -205,7 +205,7 @@ func (ud *Updater) GetTag() (Tag, int, error) {
 }
 
 func (t *Tag) IsNew() bool {
-	return t.Version[:7] != commit
+	return t.Version[:7] != commit && t.Ready
 }
 
 func (ud *Updater) getRelease() (release GHRelease, status int, err error) {

views.go

@@ -505,7 +505,7 @@ func (app *appContext) InviteProxy(gc *gin.Context) {
 		data["discordUsername"] = app.discord.username
 		data["discordRequired"] = app.config.Section("discord").Key("required").MustBool(false)
 		data["discordSendPINMessage"] = template.HTML(app.storage.lang.Form[lang].Strings.template("sendPINDiscord", tmpl{
-			"command":        `<span class="code font-mono">/` + app.config.Section("discord").Key("start_command").MustString("start") + `</span>`,
+			"command":        `<span class="text-black dark:text-white font-mono">/` + app.config.Section("discord").Key("start_command").MustString("start") + `</span>`,
 			"server_channel": app.discord.serverChannelName,
 		}))
 		data["discordServerName"] = app.discord.serverName