forked from mystiq/hydrogen-web
Compare commits
10 commits
Author | SHA1 | Date | |
---|---|---|---|
a33d9981bd | |||
8335a50308 | |||
ee9e73d8c7 | |||
63f77feb7b | |||
04de39596f | |||
25b634bb78 | |||
96c9ea8de7 | |||
d80e970117 | |||
6db5f34ac2 | |||
df0000783d |
7 changed files with 221 additions and 62 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -10,3 +10,4 @@ lib
|
||||||
*.tar.gz
|
*.tar.gz
|
||||||
.eslintcache
|
.eslintcache
|
||||||
.tmp
|
.tmp
|
||||||
|
tmp/
|
||||||
|
|
18
.woodpecker.yml
Normal file
18
.woodpecker.yml
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
pipeline:
|
||||||
|
buildfrontend:
|
||||||
|
image: node:16
|
||||||
|
commands:
|
||||||
|
- yarn install --prefer-offline --frozen-lockfile
|
||||||
|
- yarn test
|
||||||
|
- yarn run lint-ci
|
||||||
|
- yarn run tsc
|
||||||
|
- yarn build
|
||||||
|
|
||||||
|
deploy:
|
||||||
|
image: python
|
||||||
|
when:
|
||||||
|
event: push
|
||||||
|
branch: master
|
||||||
|
commands:
|
||||||
|
- make ci-deploy
|
||||||
|
secrets: [ GITEA_WRITE_DEPLOY_KEY, LIBREPAGES_DEPLOY_SECRET ]
|
14
Makefile
Normal file
14
Makefile
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
ci-deploy: ## Deploy from CI/CD. Only call from within CI
|
||||||
|
@if [ "${CI}" != "woodpecker" ]; \
|
||||||
|
then echo "Only call from within CI. Will re-write your local Git configuration. To override, set export CI=woodpecker"; \
|
||||||
|
exit 1; \
|
||||||
|
fi
|
||||||
|
git config --global user.email "${CI_COMMIT_AUTHOR_EMAIL}"
|
||||||
|
git config --global user.name "${CI_COMMIT_AUTHOR}"
|
||||||
|
./scripts/ci.sh --commit-files librepages target "${CI_COMMIT_AUTHOR} <${CI_COMMIT_AUTHOR_EMAIL}>"
|
||||||
|
./scripts/ci.sh --init "$$GITEA_WRITE_DEPLOY_KEY"
|
||||||
|
./scripts/ci.sh --deploy ${LIBREPAGES_DEPLOY_SECRET} librepages
|
||||||
|
./scripts/ci.sh --clean
|
||||||
|
|
||||||
|
help: ## Prints help for targets with comments
|
||||||
|
@cat $(MAKEFILE_LIST) | grep -E '^[a-zA-Z_-]+:.*?## .*$$' | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
|
165
scripts/ci.sh
Executable file
165
scripts/ci.sh
Executable file
|
@ -0,0 +1,165 @@
|
||||||
|
#!/bin/bash
|
||||||
|
# ci.sh: Helper script to automate deployment operations on CI/CD
|
||||||
|
# Copyright © 2022 Aravinth Manivannan <realaravinth@batsense.net>
|
||||||
|
#
|
||||||
|
# This program is free software: you can redistribute it and/or modify
|
||||||
|
# it under the terms of the GNU Affero General Public License as
|
||||||
|
# published by the Free Software Foundation, either version 3 of the
|
||||||
|
# License, or (at your option) any later version.
|
||||||
|
#
|
||||||
|
# This program is distributed in the hope that it will be useful,
|
||||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
# GNU Affero General Public License for more details.
|
||||||
|
#
|
||||||
|
# You should have received a copy of the GNU Affero General Public License
|
||||||
|
# along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
|
set -xEeuo pipefail
|
||||||
|
#source $(pwd)/scripts/lib.sh
|
||||||
|
|
||||||
|
readonly SSH_ID_FILE=/tmp/ci-ssh-id
|
||||||
|
readonly SSH_REMOTE_NAME=origin-ssh
|
||||||
|
readonly PROJECT_ROOT=$(pwd)
|
||||||
|
|
||||||
|
match_arg() {
|
||||||
|
if [ $1 == $2 ] || [ $1 == $3 ]
|
||||||
|
then
|
||||||
|
return 0
|
||||||
|
else
|
||||||
|
return 1
|
||||||
|
fi
|
||||||
|
}
|
||||||
|
|
||||||
|
help() {
|
||||||
|
cat << EOF
|
||||||
|
USAGE: ci.sh [SUBCOMMAND]
|
||||||
|
Helper script to automate deployment operations on CI/CD
|
||||||
|
|
||||||
|
Subcommands
|
||||||
|
|
||||||
|
-c --clean cleanup secrets, SSH key and other runtime data
|
||||||
|
-i --init <SSH_PRIVATE_KEY> initialize environment, write SSH private to file
|
||||||
|
-d --deploy <PAGES-SECRET> <TARGET BRANCH> push branch to Gitea and call Pages server
|
||||||
|
-h --help print this help menu
|
||||||
|
EOF
|
||||||
|
}
|
||||||
|
|
||||||
|
# $1: SSH private key
|
||||||
|
write_ssh(){
|
||||||
|
truncate --size 0 $SSH_ID_FILE
|
||||||
|
echo "$1" > $SSH_ID_FILE
|
||||||
|
chmod 600 $SSH_ID_FILE
|
||||||
|
}
|
||||||
|
|
||||||
|
set_ssh_remote() {
|
||||||
|
http_remote_url=$(git remote get-url origin)
|
||||||
|
remote_hostname=$(echo $http_remote_url | cut -d '/' -f 3)
|
||||||
|
repository_owner=$(echo $http_remote_url | cut -d '/' -f 4)
|
||||||
|
repository_name=$(echo $http_remote_url | cut -d '/' -f 5)
|
||||||
|
ssh_remote="git@$remote_hostname:$repository_owner/$repository_name"
|
||||||
|
ssh_remote="git@git.batsense.net:mystiq/hydrogen-web.git"
|
||||||
|
git remote add $SSH_REMOTE_NAME $ssh_remote
|
||||||
|
}
|
||||||
|
|
||||||
|
clean() {
|
||||||
|
if [ -f $SSH_ID_FILE ]
|
||||||
|
then
|
||||||
|
shred $SSH_ID_FILE
|
||||||
|
rm $SSH_ID_FILE
|
||||||
|
fi
|
||||||
|
}
|
||||||
|
|
||||||
|
# $1: branch name
|
||||||
|
# $2: directory containing build assets
|
||||||
|
# $3: Author in <author-name author@example.com> format
|
||||||
|
commit_files() {
|
||||||
|
cd $PROJECT_ROOT
|
||||||
|
original_branch=$(git branch --show-current)
|
||||||
|
tmp_dir=$(mktemp -d)
|
||||||
|
cp -r $2/* $tmp_dir
|
||||||
|
|
||||||
|
if [[ -z $(git ls-remote --heads origin ${1}) ]]
|
||||||
|
then
|
||||||
|
echo "[*] Creating deployment branch $1"
|
||||||
|
git checkout --orphan $1
|
||||||
|
else
|
||||||
|
echo "[*] Deployment branch $1 exists, pulling changes from remote"
|
||||||
|
git fetch origin $1
|
||||||
|
git switch $1
|
||||||
|
fi
|
||||||
|
|
||||||
|
git rm -rf .
|
||||||
|
/bin/rm -rf *
|
||||||
|
cp -r $tmp_dir/* .
|
||||||
|
git add --all
|
||||||
|
if [ $(git status --porcelain | xargs | sed '/^$/d' | wc -l) -gt 0 ];
|
||||||
|
then
|
||||||
|
echo "[*] Repository has changed, committing changes"
|
||||||
|
git commit \
|
||||||
|
--author="$3" \
|
||||||
|
--message="new deploy: $(date --iso-8601=seconds)"
|
||||||
|
fi
|
||||||
|
git checkout $original_branch
|
||||||
|
}
|
||||||
|
|
||||||
|
# $1: Pages API secret
|
||||||
|
# $2: Deployment target branch
|
||||||
|
deploy() {
|
||||||
|
if (( "$#" < 2 ))
|
||||||
|
then
|
||||||
|
help
|
||||||
|
else
|
||||||
|
git -c core.sshCommand="/usr/bin/ssh -oStrictHostKeyChecking=no -i $SSH_ID_FILE"\
|
||||||
|
push --force $SSH_REMOTE_NAME $2
|
||||||
|
curl -vv --location --request \
|
||||||
|
POST "https://deploy.batsense.net/api/v1/update"\
|
||||||
|
--header 'Content-Type: application/json' \
|
||||||
|
--data-raw "{ \"secret\": \"$1\", \"branch\": \"$2\" }"
|
||||||
|
fi
|
||||||
|
}
|
||||||
|
|
||||||
|
if (( "$#" < 1 ))
|
||||||
|
then
|
||||||
|
help
|
||||||
|
exit -1
|
||||||
|
fi
|
||||||
|
|
||||||
|
|
||||||
|
if match_arg $1 '-i' '--init'
|
||||||
|
then
|
||||||
|
if (( "$#" < 2 ))
|
||||||
|
then
|
||||||
|
help
|
||||||
|
exit -1
|
||||||
|
fi
|
||||||
|
set_ssh_remote
|
||||||
|
write_ssh "$2"
|
||||||
|
elif match_arg $1 '-c' '--clean'
|
||||||
|
then
|
||||||
|
clean
|
||||||
|
elif match_arg $1 '-cf' '--commit-files'
|
||||||
|
then
|
||||||
|
if (( "$#" < 4 ))
|
||||||
|
then
|
||||||
|
help
|
||||||
|
exit -1
|
||||||
|
fi
|
||||||
|
commit_files $2 $3 $4
|
||||||
|
elif match_arg $1 '-d' '--deploy'
|
||||||
|
then
|
||||||
|
if (( "$#" < 3 ))
|
||||||
|
then
|
||||||
|
help
|
||||||
|
exit -1
|
||||||
|
fi
|
||||||
|
deploy $2 $3
|
||||||
|
elif match_arg $1 '-h' '--help'
|
||||||
|
then
|
||||||
|
help
|
||||||
|
else
|
||||||
|
help
|
||||||
|
fi
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -192,7 +192,7 @@ export class Platform {
|
||||||
await this._themeLoader?.init(manifests, log);
|
await this._themeLoader?.init(manifests, log);
|
||||||
const { themeName, themeVariant } = await this._themeLoader.getActiveTheme();
|
const { themeName, themeVariant } = await this._themeLoader.getActiveTheme();
|
||||||
log.log({ l: "Active theme", name: themeName, variant: themeVariant });
|
log.log({ l: "Active theme", name: themeName, variant: themeVariant });
|
||||||
await this._themeLoader.setTheme(themeName, themeVariant, log);
|
this._themeLoader.setTheme(themeName, themeVariant, log);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
@ -332,10 +332,7 @@ export class Platform {
|
||||||
return this._themeLoader;
|
return this._themeLoader;
|
||||||
}
|
}
|
||||||
|
|
||||||
async replaceStylesheet(newPath, log) {
|
replaceStylesheet(newPath) {
|
||||||
const error = await this.logger.wrapOrRun(log, { l: "replaceStylesheet", location: newPath, }, async (l) => {
|
|
||||||
let resolve, error;
|
|
||||||
const promise = new Promise(r => resolve = r);
|
|
||||||
const head = document.querySelector("head");
|
const head = document.querySelector("head");
|
||||||
// remove default theme
|
// remove default theme
|
||||||
document.querySelectorAll(".theme").forEach(e => e.remove());
|
document.querySelectorAll(".theme").forEach(e => e.remove());
|
||||||
|
@ -345,21 +342,7 @@ export class Platform {
|
||||||
styleTag.rel = "stylesheet";
|
styleTag.rel = "stylesheet";
|
||||||
styleTag.type = "text/css";
|
styleTag.type = "text/css";
|
||||||
styleTag.className = "theme";
|
styleTag.className = "theme";
|
||||||
styleTag.onerror = () => {
|
|
||||||
error = new Error(`Failed to load stylesheet from ${newPath}`);
|
|
||||||
l.catch(error);
|
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
styleTag.onload = () => {
|
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
head.appendChild(styleTag);
|
head.appendChild(styleTag);
|
||||||
await promise;
|
|
||||||
return error;
|
|
||||||
});
|
|
||||||
if (error) {
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get description() {
|
get description() {
|
||||||
|
|
|
@ -120,7 +120,6 @@ export function createFetchRequest(createTimeout, serviceWorkerHandler) {
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// some error pages return html instead of json, ignore error
|
// some error pages return html instead of json, ignore error
|
||||||
// detect these ignored errors from the response status
|
|
||||||
if (!(err.name === "SyntaxError" && status >= 400)) {
|
if (!(err.name === "SyntaxError" && status >= 400)) {
|
||||||
throw err;
|
throw err;
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {RuntimeThemeParser} from "./parsers/RuntimeThemeParser";
|
|
||||||
import {ColorSchemePreference} from "./parsers/types";
|
|
||||||
import {BuiltThemeParser} from "./parsers/BuiltThemeParser";
|
|
||||||
import type {Variant, ThemeInformation} from "./parsers/types";
|
|
||||||
import type {ThemeManifest} from "../../types/theme";
|
|
||||||
import type {ILogItem} from "../../../logging/types";
|
import type {ILogItem} from "../../../logging/types";
|
||||||
import type {Platform} from "../Platform.js";
|
import type {Platform} from "../Platform.js";
|
||||||
import {LogLevel} from "../../../logging/LogFilter";
|
import {RuntimeThemeParser} from "./parsers/RuntimeThemeParser";
|
||||||
|
import type {Variant, ThemeInformation} from "./parsers/types";
|
||||||
|
import {ColorSchemePreference} from "./parsers/types";
|
||||||
|
import {BuiltThemeParser} from "./parsers/BuiltThemeParser";
|
||||||
|
|
||||||
export class ThemeLoader {
|
export class ThemeLoader {
|
||||||
private _platform: Platform;
|
private _platform: Platform;
|
||||||
|
@ -34,9 +32,6 @@ export class ThemeLoader {
|
||||||
|
|
||||||
async init(manifestLocations: string[], log?: ILogItem): Promise<void> {
|
async init(manifestLocations: string[], log?: ILogItem): Promise<void> {
|
||||||
await this._platform.logger.wrapOrRun(log, "ThemeLoader.init", async (log) => {
|
await this._platform.logger.wrapOrRun(log, "ThemeLoader.init", async (log) => {
|
||||||
let noManifestsAvailable = true;
|
|
||||||
const failedManifestLoads: string[] = [];
|
|
||||||
const parseErrors: string[] = [];
|
|
||||||
const results = await Promise.all(
|
const results = await Promise.all(
|
||||||
manifestLocations.map(location => this._platform.request(location, { method: "GET", format: "json", cache: true, }).response())
|
manifestLocations.map(location => this._platform.request(location, { method: "GET", format: "json", cache: true, }).response())
|
||||||
);
|
);
|
||||||
|
@ -44,22 +39,14 @@ export class ThemeLoader {
|
||||||
const builtThemeParser = new BuiltThemeParser(this.preferredColorScheme);
|
const builtThemeParser = new BuiltThemeParser(this.preferredColorScheme);
|
||||||
const runtimeThemePromises: Promise<void>[] = [];
|
const runtimeThemePromises: Promise<void>[] = [];
|
||||||
for (let i = 0; i < results.length; ++i) {
|
for (let i = 0; i < results.length; ++i) {
|
||||||
const result = results[i];
|
const { body } = results[i];
|
||||||
const { status, body } = result;
|
|
||||||
if (!(status >= 200 && status <= 299)) {
|
|
||||||
console.error(`Failed to load manifest at ${manifestLocations[i]}, status: ${status}`);
|
|
||||||
log.log({ l: "Manifest fetch failed", location: manifestLocations[i], status }, LogLevel.Error);
|
|
||||||
failedManifestLoads.push(manifestLocations[i])
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
noManifestsAvailable = false;
|
|
||||||
try {
|
try {
|
||||||
if (body.extends) {
|
if (body.extends) {
|
||||||
const indexOfBaseManifest = results.findIndex(result => "value" in result && result.value.body.id === body.extends);
|
const indexOfBaseManifest = results.findIndex(manifest => manifest.body.id === body.extends);
|
||||||
if (indexOfBaseManifest === -1) {
|
if (indexOfBaseManifest === -1) {
|
||||||
throw new Error(`Base manifest for derived theme at ${manifestLocations[i]} not found!`);
|
throw new Error(`Base manifest for derived theme at ${manifestLocations[i]} not found!`);
|
||||||
}
|
}
|
||||||
const { body: baseManifest } = (results[indexOfBaseManifest] as PromiseFulfilledResult<{ body: ThemeManifest }>).value;
|
const {body: baseManifest} = results[indexOfBaseManifest];
|
||||||
const baseManifestLocation = manifestLocations[indexOfBaseManifest];
|
const baseManifestLocation = manifestLocations[indexOfBaseManifest];
|
||||||
const promise = runtimeThemeParser.parse(body, baseManifest, baseManifestLocation, log);
|
const promise = runtimeThemeParser.parse(body, baseManifest, baseManifestLocation, log);
|
||||||
runtimeThemePromises.push(promise);
|
runtimeThemePromises.push(promise);
|
||||||
|
@ -70,27 +57,19 @@ export class ThemeLoader {
|
||||||
}
|
}
|
||||||
catch(e) {
|
catch(e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
parseErrors.push(e.message);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
await Promise.all(runtimeThemePromises);
|
await Promise.all(runtimeThemePromises);
|
||||||
this._themeMapping = { ...builtThemeParser.themeMapping, ...runtimeThemeParser.themeMapping };
|
this._themeMapping = { ...builtThemeParser.themeMapping, ...runtimeThemeParser.themeMapping };
|
||||||
if (noManifestsAvailable) {
|
Object.assign(this._themeMapping, builtThemeParser.themeMapping, runtimeThemeParser.themeMapping);
|
||||||
// We need at least one working theme manifest!
|
|
||||||
throw new Error(`All configured theme manifests failed to load, the following were tried: ${failedManifestLoads.join(", ")}`);
|
|
||||||
}
|
|
||||||
else if (Object.keys(this._themeMapping).length === 0 && parseErrors.length) {
|
|
||||||
// Something is wrong..., themeMapping is empty!
|
|
||||||
throw new Error(`Failed to parse theme manifests, the following errors were encountered: ${parseErrors.join(", ")}`);
|
|
||||||
}
|
|
||||||
this._addDefaultThemeToMapping(log);
|
this._addDefaultThemeToMapping(log);
|
||||||
log.log({ l: "Preferred colorscheme", scheme: this.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light" });
|
log.log({ l: "Preferred colorscheme", scheme: this.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light" });
|
||||||
log.log({ l: "Result", themeMapping: this._themeMapping });
|
log.log({ l: "Result", themeMapping: this._themeMapping });
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
|
setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
|
||||||
await this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, async (l) => {
|
this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, () => {
|
||||||
let cssLocation: string, variables: Record<string, string>;
|
let cssLocation: string, variables: Record<string, string>;
|
||||||
let themeDetails = this._themeMapping[themeName];
|
let themeDetails = this._themeMapping[themeName];
|
||||||
if ("id" in themeDetails) {
|
if ("id" in themeDetails) {
|
||||||
|
@ -104,7 +83,7 @@ export class ThemeLoader {
|
||||||
cssLocation = themeDetails[themeVariant].cssLocation;
|
cssLocation = themeDetails[themeVariant].cssLocation;
|
||||||
variables = themeDetails[themeVariant].variables;
|
variables = themeDetails[themeVariant].variables;
|
||||||
}
|
}
|
||||||
await this._platform.replaceStylesheet(cssLocation, l);
|
this._platform.replaceStylesheet(cssLocation);
|
||||||
if (variables) {
|
if (variables) {
|
||||||
log?.log({l: "Derived Theme", variables});
|
log?.log({l: "Derived Theme", variables});
|
||||||
this._injectCSSVariables(variables);
|
this._injectCSSVariables(variables);
|
||||||
|
|
Loading…
Reference in a new issue