Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/develop' into update-dependencies
Browse files Browse the repository at this point in the history
  • Loading branch information
floscher committed Jun 20, 2024
2 parents a7aa65e + d6a3bd7 commit 7772b81
Show file tree
Hide file tree
Showing 18 changed files with 128 additions and 126 deletions.
13 changes: 12 additions & 1 deletion client/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
>
{{ appData.runMode }}
</div>
<div :class="cssTheme">
<div>
<div class="content">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
<div class="container">
Expand Down Expand Up @@ -133,6 +133,17 @@ const appData: AppSettingsDto = (JSON.parse(document.getElementById("app-data")?
runMode: "production",
};
console.log(
`%c ███████
█ ███ █
██ █ ██ fuBlog
███████
██ █ ██ ${(appData.isProduction ? appData.appVersion ?? "‹unknown›" : "development version") + " "}
█ ███ █
███████`,
`color:#ff9c00;background:rgb(48, 48, 48);display:inline-block`,
);
const setOperator = (operator: string) => {
router.replace({ query: { ...route.query, operator: operator } });
};
Expand Down
5 changes: 4 additions & 1 deletion client/src/assets/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,7 @@ $autocomplete-panel-border-color: #333;

$autocomplete-item-color: #333;
$autocomplete-item-color-hover: #FFF;
$autocomplete-item-background-color-hover: #abacad;
$autocomplete-item-background-color-hover: #abacad;

$body-color: #000;
$body-color-dark: #fff;
52 changes: 44 additions & 8 deletions client/src/assets/scss/custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,54 @@

// @import "./themes/default.scss";
@import "./themes/fumix.scss";
@import "./../../../../node_modules/bootstrap/scss/bootstrap.scss";

$theme-map: null;
@import "./themes/light-dark-mode.scss";
$color-mode-type: data;
@include color-mode(dark) {
--bs-body-bg: $body-bg-dark;
--bs-text-color: $body-color-light;

.jumbotron {
filter: invert(100%);
}

@import "./../../../../node_modules/bootstrap/scss/bootstrap.scss";
@import "./../../../../node_modules/highlight.js/scss/gradient-dark.scss";
}

@include color-mode(light) {
--bs-body-bg: $body-bg-light;
--bs-text-color: $body-color-dark;

.card {
background-color: $card-bg-light;
.card-body {
svg {
g > * :not(text) {
stroke: $body-color-light !important;
}
}
}
}
.modal-content {
background-color: $modal-content-bg-light;
border-color: $modal-content-border-color-light;
}
.modal-header,
.modal-footer {
border-color: $modal-header-border-color-light;
}
table {
&.table-bordered {
border-color: $table-border-color-light !important;
}
th,
td {
color: $body-color-light;
}
}
.jumbotron {
filter: invert(0);
}

.lightTheme{
@import "./../../../../node_modules/highlight.js/scss/gradient-light.scss";
}

.darkTheme{
@import "./../../../../node_modules/highlight.js/scss/gradient-dark.scss";
}
10 changes: 10 additions & 0 deletions client/src/assets/scss/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@
}
}

.content,
.card,
.jumbotron {
transition: .75s ease-out all;
}

.loader {
position: fixed;
z-index: 1031;
Expand Down Expand Up @@ -77,6 +83,10 @@ pre {
outline: 0;
box-shadow: none !important;
}

&::placeholder {
color: #888;
}
}

.form-floating {
Expand Down
80 changes: 0 additions & 80 deletions client/src/assets/scss/themes/light-dark-mode.scss

This file was deleted.

7 changes: 6 additions & 1 deletion client/src/components/DisplayTags.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<template>
<div class="badge-container">
<div v-for="tag in tags" :key="tag.id" class="badge me-1" @click="searchWord(tag.name)">
<div
v-for="tag in [...tags].sort((a, b) => a.name.localeCompare(b.name))"
:key="tag.id"
class="badge me-1"
@click="searchWord(tag.name)"
>
{{ tag.name }}
</div>
</div>
Expand Down
15 changes: 6 additions & 9 deletions client/src/components/LightDarkToggler.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<label for="checkbox" class="modeswitch-label">
<span class="emoji">🌙</span>
<span class="emoji">☀️</span>
<div class="modeswitch-toggle" :class="{ 'modeswitch-toggle-checked': userTheme === 'darkTheme' }"></div>
<div class="modeswitch-toggle" :class="{ 'modeswitch-toggle-checked': userTheme === 'dark' }"></div>
</label>
</div>
</template>
Expand Down Expand Up @@ -93,25 +93,22 @@ const emit = defineEmits(["themeChanged"]);
const setTheme = (theme: UserTheme) => {
saveCssPreference(theme);
userTheme.value = theme;
document.documentElement.dataset.bsTheme = theme;
emit("themeChanged", userTheme.value);
};
const toggleTheme = (): void => {
const activeTheme = localStorage.getItem("cssTheme");
if (activeTheme === "lightTheme") {
setTheme("darkTheme");
if (activeTheme === "light") {
setTheme("dark");
} else {
setTheme("lightTheme");
setTheme("light");
}
};
const getMediaPreference = (): UserTheme => {
const hasDarkPreference = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (hasDarkPreference) {
return "darkTheme";
} else {
return "lightTheme";
}
return hasDarkPreference ? "dark" : "light";
};
const userTheme = ref<UserTheme>(loadCssPreference() || getMediaPreference());
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/LoginButton.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<span class="mx-2 text-muted" v-if="!providers || providers.providers.length <= 0"><fa-icon :icon="faUserSlash" /></span>
<span class="mx-2 text-white" v-if="!providers || providers.providers.length <= 0"><fa-icon :icon="faUserSlash" /></span>
<a class="btn btn-link mx-1 no-underline" v-else-if="providers && providers.providers.length === 1" :href="providers.providers[0].url">
<fa-icon :icon="faUser" />
<span class="mx-2">{{ providers.providers[0].label ?? "Login" }}</span>
</a>
<div class="dropdown" v-else>
<button class="btn dropdown-toggle mx-1" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<button class="btn dropdown-toggle mx-1 text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<fa-icon :icon="faUser" /> Login
</button>
<ul class="dropdown-menu">
Expand Down
2 changes: 1 addition & 1 deletion common/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
},
"dependencies": {
"dompurify": "^3.0.1",
"highlight.js": "^11.8.0",
"highlight.js": "^11.9.0",
"jsdom": "^22.1.0",
"marked": "^5.0.2",
"marked-highlight": "^2.0.1",
Expand Down
1 change: 1 addition & 0 deletions common/src/dto/AppSettingsDto.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { HyperlinkDto } from "./HyperlinkDto.js";

export type AppSettingsDto = {
appVersion: string | undefined;
githubRepositorySlug: string | undefined;
imprint: HyperlinkDto | undefined;
isProduction: boolean;
Expand Down
2 changes: 1 addition & 1 deletion common/src/entity/User.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,4 @@ export type UserWithOAuthProviders = User & {
oauthProviders: OAuthProviderId[];
};

export type UserTheme = "lightTheme" | "darkTheme";
export type UserTheme = "light" | "dark";
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions portal/src/routes/login.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,11 @@ router.get("/", async (req, res) => {
${pfpHtml}
<form method="post" action="?" class="card-body">
<div class="form-floating mb-2">
<input id="userId" name="userId" class="form-control" placeholder required value="${faker.random.alphaNumeric(20)}">
<input id="userId" name="userId" class="form-control" placeholder required value="${faker.string.alphanumeric(20)}">
<label for="userId">User-ID</label>
</div>
<div class="form-floating mb-2">
<input id="code" name="code" class="form-control" placeholder required value="${faker.random.alphaNumeric(20)}">
<input id="code" name="code" class="form-control" placeholder required value="${faker.string.alphanumeric(20)}">
<label for="userId">Code</label>
</div>
<input name="fullName" value="${acc.fullName ?? ""}" readonly class="form-control-plaintext">
Expand Down Expand Up @@ -114,7 +114,7 @@ router.get("/", async (req, res) => {
<h2>Create custom login</h2>
<form method="post">
<div class="form-floating mb-2">
<input id="userId" name="userId" class="form-control" type="text" required value="${faker.random.alphaNumeric(20)}">
<input id="userId" name="userId" class="form-control" type="text" required value="${faker.string.alphanumeric(20)}">
<label for="userId">User-ID</label>
</div>
<div class="form-floating mb-2">
Expand All @@ -140,7 +140,7 @@ router.get("/", async (req, res) => {
</div>
</div>
<div class="form-floating mb-4">
<input id="code" name="code" class="form-control" type="text" value="${faker.random.alphaNumeric(20)}" pattern="[a-zA-Z0-9_-]+">
<input id="code" name="code" class="form-control" type="text" value="${faker.string.alphanumeric(20)}" pattern="[a-zA-Z0-9_-]+">
<label for="code">Code</label>
<div class="form-text">
Arbitrary string, under which the user info is saved. It is generated randomly.
Expand Down
3 changes: 2 additions & 1 deletion server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"main": "server.js",
"scripts": {
"start": "NODE_ENV='development' NODE_EXTRA_CA_CERTS=../certs/ca.crt nodemon -r dotenv/config ./src/server.ts",
"build": "tsc",
"write-app-version": "git describe --always --dirty > dist/app_version.txt",
"build": "tsc && npm run write-app-version",
"run-prod": "node ./dist/server.js",
"lint": "prettier --check 'src/**/*.(ts|vue)' && eslint src/**/*.ts",
"lintfix": "prettier 'src/**/*.(ts|vue)' --write && eslint src/**/*.ts --fix",
Expand Down
19 changes: 10 additions & 9 deletions server/src/server.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import cors from "cors";
import express, { Application, NextFunction, Request, Response } from "express";
import * as fs from "fs";
import { readFile, writeFileSync } from "fs";
import path, { dirname } from "path";
import { fileURLToPath } from "url";
import { corsOptions } from "./config/cors-config.js";
Expand All @@ -15,7 +15,6 @@ import fileRoutes from "./routes/file.js";
import postRoutes from "./routes/posts.js";
import utilityRoutes from "./routes/utility.js";
import { errorHandler } from "./service/error-handler.js";
import { generateShareImage } from "./service/opengraph.js";
import { initDatabase } from "./service/testdata-generator.js";
import { AppSettings, ClientSettings, DatabaseSettings, ServerSettings } from "./settings.js";

Expand Down Expand Up @@ -74,7 +73,7 @@ async function handleUncaught(error: Error) {
// in production serve the built vue-app from static public folder:
if (AppSettings.IS_PRODUCTION) {
const indexResponse = (req: Request, res: Response) => {
fs.readFile(
readFile(
path.join(__dirname, "public/index.html"), //
{ encoding: "utf-8" },
(err, data) => {
Expand All @@ -90,13 +89,15 @@ if (AppSettings.IS_PRODUCTION) {
app.use(express.static("./public", { redirect: false, index: false }));
app.get("*", indexResponse);
} else {
fs.writeFileSync("../client/.env.development", "VITE_APP_DATA=" + JSON.stringify(AppSettings.DTO), { encoding: "utf-8" });
writeFileSync("../client/.env.development", "VITE_APP_DATA=" + JSON.stringify(AppSettings.DTO), { encoding: "utf-8" });
}

app.listen(ServerSettings.PORT, () => {
logger.info(`fuBlog server running in ${AppSettings.RUN_MODE} mode on port: ${ServerSettings.PORT}`);
if (!AppSettings.IS_PRODUCTION) {
logger.info(`Connected to Postgres DB at ${DatabaseSettings.HOST}:${DatabaseSettings.PORT}`);
logger.info(`Client: ${ClientSettings.BASE_URL}`);
}
logger.info(
`▶️ fuBlog server${AppSettings.IS_PRODUCTION ? ` version ${AppSettings.APP_VERSION ?? "‹unknown›"}` : ""} running in ${
AppSettings.RUN_MODE
} mode on port: ${ServerSettings.PORT}`,
);
logger.info(`🗄️ Expecting Postgres DB at ${DatabaseSettings.HOST}:${DatabaseSettings.PORT}`);
logger.info(`🖥️ Expecting to be published at ${ClientSettings.BASE_URL}`);
});
Loading

0 comments on commit 7772b81

Please sign in to comment.