Skip to content

Commit 39b619f

Browse files
duruerduruer
committed
feat: made theme settings work
1 parent 6dcb841 commit 39b619f

20 files changed

Lines changed: 523 additions & 204 deletions

‎lang/en-US.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"filter": "Filter",
1919
"click-to-copy": "Click to copy",
2020
"close": "Close",
21-
"toggle": "Toggle"
21+
"toggle": "Toggle",
22+
"remove": "Remove"
2223
},
2324
"nav-links": {
2425
"support": "Support",

‎lang/tr.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"filter": "Filtrele",
1919
"click-to-copy": "Kopyalamak için tıklayın",
2020
"close": "Kapat",
21-
"toggle": "Aç/Kapat"
21+
"toggle": "Aç/Kapat",
22+
"remove": "Kaldır"
2223
},
2324
"nav-links": {
2425
"support": "Destek",

‎src/app.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,16 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77

88
%sveltekit.head%
9+
10+
<script>
11+
(function() {
12+
const m = document.querySelector("meta[name=\"x-theme\"]");
13+
let theme = m && m.getAttribute("content");
14+
document.documentElement.setAttribute("data-bs-theme", theme);
15+
})();
16+
</script>
917
</head>
10-
<body class="bg-light">
18+
<body>
1119
<div>%sveltekit.body%</div>
1220
</body>
1321
</html>

‎src/lib/component/Footer.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- Footer -->
22
<div class="container text-center my-3">
33
<small>
4-
{@html $_("footer.been-created-with", {
4+
{@html themeSettings.footerContent || $_("footer.been-created-with", {
55
values: {
66
pano: `<a href="https://panomc.com" target="_blank" rel="noreferrer">Pano</a>`,
77
},
@@ -14,5 +14,5 @@
1414
import { getContext } from "svelte";
1515
import { _ } from "svelte-i18n";
1616
17-
const session = getContext("session");
17+
const themeSettings = getContext("themeSettings");
1818
</script>

‎src/lib/component/Header.svelte‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1+
<svelte:head>
2+
{@html `<style>;</style>`.replace(";", styles)}
3+
</svelte:head>
4+
15
<!-- Header -->
2-
<div class="bg-white border-bottom border-5 border-white">
3-
<div class="container">
6+
<div class:bg-white={!themeSettings.headerBgColor} id="header">
7+
<div class="{themeSettings.headerWidthOption === 'FULL_SIZE' ? 'container-fluid' : 'container'} text-center"
8+
style="{themeSettings.headerHeight ? `height: ${themeSettings.headerHeight}px;` : ''}">
49
<img
510
title={$session.siteInfo.websiteName}
611
alt={$_("components.header.alt")}
7-
class="img-fluid d-block m-auto p-3"
8-
src="/api/websiteLogo?hash={$session.siteInfo.websiteLogoHash}" />
12+
class="{(themeSettings.logoHeight || themeSettings.logoWidth) ? '' : 'img-fluid'} m-auto p-3"
13+
class:d-none="{themeSettings.logoVisibility === false}"
14+
height="{themeSettings.logoHeight || 'auto'}"
15+
src="/api/websiteLogo?hash={$session.siteInfo.websiteLogoHash}"
16+
width="{themeSettings.logoWidth || 'auto'}" />
917
</div>
1018
</div>
1119

@@ -16,4 +24,12 @@
1624
import { _ } from "svelte-i18n";
1725
1826
const session = getContext("session");
27+
const themeSettings = getContext("themeSettings");
28+
29+
const styles = `
30+
#header {
31+
${themeSettings.headerBgColor ? `background-color: ${themeSettings.headerBgColor};` : ""}
32+
${themeSettings.files?.headerBackgroundImage ? `background-image: url(/api/theme/file/${themeSettings.files.headerBackgroundImage}) !important;` : ""}
33+
}
34+
`;
1935
</script>

‎src/lib/component/Main.svelte‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<!-- Main Container -->
22
<main class="container">
33
<div class="row">
4-
{#if !$sidebarProps || $sidebarProps.side === "left"}
5-
<svelte:component this="{$sidebar}" {...$sidebarProps} />
4+
{#if sidebarEnabled && sidebarPosition === 'LEFT'}
5+
<svelte:component this="{$sidebar}"
6+
{...{ ...$sidebarProps, side: sidebarPosition === 'LEFT' ? 'left' : 'right' }} />
67
{/if}
78

89
<!-- Content -->
@@ -11,8 +12,9 @@
1112
</div>
1213
<!-- Content End -->
1314

14-
{#if !$sidebarProps || !$sidebarProps.side}
15-
<svelte:component this="{$sidebar}" {...$sidebarProps} />
15+
{#if sidebarEnabled && sidebarPosition === 'RIGHT' && (!$sidebarProps || !$sidebarProps.side)}
16+
<svelte:component this="{$sidebar}"
17+
{...{ ...$sidebarProps, side: sidebarPosition === 'LEFT' ? 'left' : 'right' }} />
1618
{/if}
1719
</div>
1820
</main>
@@ -23,4 +25,8 @@
2325
2426
const sidebar = getContext("sidebar");
2527
const sidebarProps = getContext("sidebarProps");
28+
const themeSettings = getContext("themeSettings");
29+
30+
$: sidebarEnabled = typeof themeSettings.sidebarEnabled === "undefined" ? true : themeSettings.sidebarEnabled;
31+
$: sidebarPosition = typeof themeSettings.sidebarPosition !== "undefined" ? themeSettings.sidebarPosition : !$sidebarProps.side ? "RIGHT" : $sidebarProps.side === "left" ? "LEFT" : "RIGHT";
2632
</script>

‎src/lib/component/Navbar.svelte‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
</style>
99

1010
<div class="py-3">
11-
<div class="container">
11+
<div class="{themeSettings.navbarWidthOption === 'FULL_SIZE' ? 'container-fluid' : 'container'}">
1212
<nav
13-
class="navbar navbar-expand-lg navbar-dark bg-primary bg-body-primary bg-gradient rounded-pill shadow">
13+
class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient rounded-pill shadow">
1414
<div class="container">
1515
<ul class="navbar-nav flex-row me-auto">
1616
<li>
@@ -160,22 +160,26 @@
160160
{/if}
161161
</ul>
162162

163-
<div class="collapse navbar-collapse" id="navbar">
164-
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
165-
<li class="nav-item">
166-
<a class="nav-link" title={$_("nav-links.homepage")} href="/">
167-
{$_("nav-links.homepage")}
168-
</a>
169-
</li>
170-
<li class="nav-item">
171-
<a
172-
href="/support"
173-
class="nav-link"
174-
title={$_("nav-links.support")}>
175-
{$_("nav-links.support")}</a>
176-
</li>
177-
</ul>
178-
</div>
163+
{#if typeof themeSettings.navLinksEnabled === 'undefined' ? true : themeSettings.navLinksEnabled}
164+
<div class="collapse navbar-collapse" id="navbar">
165+
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
166+
<li class="nav-item"
167+
hidden="{typeof themeSettings.navLinksEnableStatus?.home === 'undefined' ? false : !themeSettings.navLinksEnableStatus.home}">
168+
<a class="nav-link" title={$_("nav-links.homepage")} href="/">
169+
{$_("nav-links.homepage")}
170+
</a>
171+
</li>
172+
<li class="nav-item"
173+
hidden="{typeof themeSettings.navLinksEnableStatus?.support === 'undefined' ? false : !themeSettings.navLinksEnableStatus.support}">
174+
<a
175+
href="/support"
176+
class="nav-link"
177+
title={$_("nav-links.support")}>
178+
{$_("nav-links.support")}</a>
179+
</li>
180+
</ul>
181+
</div>
182+
{/if}
179183
</div>
180184
</nav>
181185
</div>
@@ -208,6 +212,7 @@
208212
let interval, showingQuickNotification;
209213
210214
const session = getContext("session");
215+
const themeSettings = getContext("themeSettings");
211216
212217
function delay(time) {
213218
return new Promise((resolve) => setTimeout(resolve, time));

‎src/lib/component/OnlineAdmins.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!-- Online Admins Card -->
2-
<div class="card mb-3">
2+
<div class="card mb-3"
3+
hidden="{typeof themeSettings.sidebarCarts?.onlineAdmins === 'undefined' ? false : !themeSettings.sidebarCarts.onlineAdmins}">
34
<div class="card-header">{$_("components.online-admins.online-admins")}</div>
45
<div class="card-body">
56
<div class="row">
@@ -23,6 +24,9 @@
2324
<script>
2425
import { _ } from "svelte-i18n";
2526
import tooltip from "$lib/tooltip.util";
27+
import { getContext } from "svelte";
2628
2729
export let onlineAdmins;
30+
31+
const themeSettings = getContext("themeSettings");
2832
</script>

‎src/lib/component/Post.svelte‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="card mb-3">
2-
{#if post.thumbnailUrl}
2+
{#if (typeof themeSettings.postCoverImageEnabled === 'undefined' ? true : themeSettings.postCoverImageEnabled) && post.thumbnailUrl}
33
<a href="/post/{post.url}">
44
<div
55
style="
@@ -47,20 +47,25 @@
4747
<div
4848
class="card-footer bg-white d-flex align-items-center justify-content-between">
4949
{#if detail}
50-
<ul class="m-0 p-0 text-muted">
51-
<li class="list-inline">
52-
<div
53-
class="list-inline-item px-1"
54-
use:tooltip={[$_("components.post.view"), { placement: "bottom" }]}>
55-
<i class="fas fa-eye me-2"></i>
56-
{post.views}
57-
</div>
58-
</li>
59-
</ul>
50+
{#if typeof themeSettings.postViewCountEnabled === 'undefined' ? true : themeSettings.postViewCountEnabled}
51+
<ul class="m-0 p-0 text-muted">
52+
<li class="list-inline">
53+
<div
54+
class="list-inline-item px-1"
55+
use:tooltip={[$_("components.post.view"), { placement: "bottom" }]}>
56+
<i class="fas fa-eye me-2"></i>
57+
{post.views}
58+
</div>
59+
</li>
60+
</ul>
61+
{:else}
62+
<div></div>
63+
{/if}
6064

6165
<div>
6266
<Date time={post.date} />
63-
<a href="/player/{post.writer.username}">
67+
<a href="/player/{post.writer.username}"
68+
hidden="{typeof themeSettings.postAuthorImageEnabled === 'undefined' ? false : !themeSettings.postAuthorImageEnabled}">
6469
<img
6570
src="https://minotar.net/avatar/{post.writer.username}"
6671
alt={post.writer.username}
@@ -71,13 +76,18 @@
7176
</a>
7277
</div>
7378
{:else}
74-
<a href="/post/{post.url}">
75-
{$_("components.post.read-more")}
76-
</a>
79+
{#if typeof themeSettings.postReadMoreButtonEnabled === 'undefined' ? true : themeSettings.postReadMoreButtonEnabled}
80+
<a href="/post/{post.url}">
81+
{$_("components.post.read-more")}
82+
</a>
83+
{:else}
84+
<div></div>
85+
{/if}
7786

7887
<div>
7988
<Date time={post.date} />
80-
<a href="/player/{post.writer.username}">
89+
<a href="/player/{post.writer.username}"
90+
hidden="{typeof themeSettings.postAuthorImageEnabled === 'undefined' ? false : !themeSettings.postAuthorImageEnabled}">
8191
<img
8292
src="https://minotar.net/avatar/{post.writer.username}"
8393
alt={post.writer.username}
@@ -92,6 +102,7 @@
92102
</div>
93103

94104
<script>
105+
import { getContext } from "svelte";
95106
import { _ } from "svelte-i18n";
96107
97108
import { truncate } from "$lib/string.util";
@@ -101,4 +112,6 @@
101112
102113
export let post;
103114
export let detail = false;
115+
116+
const themeSettings = getContext("themeSettings");
104117
</script>

‎src/lib/component/sidebars/HomeSidebar.svelte‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<Sidebar>
1+
<Sidebar side="{side}">
22
<div class="vstack gap-3">
33
<!-- Play Button -->
44
<button
@@ -44,7 +44,8 @@
4444
<!-- Server Status Card End -->
4545

4646
<!-- Last Registrants Card -->
47-
<div class="card">
47+
<div class="card"
48+
hidden="{typeof themeSettings.sidebarCarts?.lastRegistrants === 'undefined' ? false : !themeSettings.sidebarCarts.lastRegistrants}">
4849
<div class="card-header">
4950
{$_("sidebars.home.last-registrants")}
5051
</div>
@@ -87,11 +88,16 @@
8788
</script>
8889

8990
<script>
91+
import { getContext } from "svelte";
92+
import { _ } from "svelte-i18n";
9093
import copy from "copy-to-clipboard";
9194
9295
import Sidebar from "$lib/component/Sidebar.svelte";
9396
import tooltip from "$lib/tooltip.util";
94-
import { _ } from "svelte-i18n";
97+
98+
export let side;
99+
100+
const themeSettings = getContext("themeSettings");
95101
96102
let copyClickIDForCommandText = 0;
97103
let isCommandTextCopied = false;

0 commit comments

Comments
 (0)