))}
@@ -217,7 +227,7 @@ function Home({ initialSettings }) {
)}
{bookmarks && (
-
+
{bookmarks.map((group) => (
))}
diff --git a/src/pages/site.webmanifest.jsx b/src/pages/site.webmanifest.jsx
new file mode 100644
index 00000000..ff9d638f
--- /dev/null
+++ b/src/pages/site.webmanifest.jsx
@@ -0,0 +1,42 @@
+import checkAndCopyConfig, { getSettings } from "utils/config/config";
+import themes from "utils/styles/themes";
+
+export async function getServerSideProps({ res }) {
+ checkAndCopyConfig("settings.yaml");
+ const settings = getSettings();
+
+ const color = settings.color || "slate";
+ const theme = settings.theme || "dark";
+
+ const manifest = {
+ name: "Homepage",
+ short_name: "Homepage",
+ icons: [
+ {
+ src: "/android-chrome-192x192.png?v=2",
+ sizes: "192x192",
+ type: "image/png",
+ },
+ {
+ src: "/android-chrome-512x512.png?v=2",
+ sizes: "512x512",
+ type: "image/png",
+ },
+ ],
+ theme_color: themes[color][theme],
+ background_color: themes[color][theme],
+ display: "standalone",
+ };
+
+ res.setHeader("Content-Type", "application/manifest+json");
+ res.write(JSON.stringify(manifest));
+ res.end();
+
+ return {
+ props: {},
+ };
+}
+
+export default function Webmanifest() {
+ return null;
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 4e7aad46..c3779283 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -39,7 +39,6 @@ body {
#page_container {
overflow: auto;
- overflow: overlay;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 57be35b3..a578169b 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -9,6 +9,9 @@
--color-700: 40 40 40;
--color-800: 255 255 255;
--color-900: 255 255 255;
+
+ --color-logo-start: 128 128 128 / 20%;
+ --color-logo-stop: 128 128 128 / 40%;
}
.theme-slate {
@@ -22,6 +25,9 @@
--color-700: 51 65 85;
--color-800: 30 41 59;
--color-900: 15 23 42;
+
+ --color-logo-start: 148 163 184;
+ --color-logo-stop: 51 65 85;
}
.theme-gray {
@@ -35,6 +41,9 @@
--color-700: 55 65 81;
--color-800: 31 41 55;
--color-900: 17 24 39;
+
+ --color-logo-start: 156 163 175;
+ --color-logo-stop: 55 65 81;
}
.theme-zinc {
@@ -48,6 +57,9 @@
--color-700: 63 63 70;
--color-800: 39 39 42;
--color-900: 24 24 27;
+
+ --color-logo-start: 161 161 170;
+ --color-logo-stop: 63 63 70;
}
.theme-neutral {
@@ -61,6 +73,9 @@
--color-700: 64 64 64;
--color-800: 38 38 38;
--color-900: 23 23 23;
+
+ --color-logo-start: 163 163 163;
+ --color-logo-stop: 64 64 64;
}
.theme-stone {
@@ -74,6 +89,9 @@
--color-700: 68 64 60;
--color-800: 41 37 36;
--color-900: 28 25 23;
+
+ --color-logo-start: 168 162 158;
+ --color-logo-stop: 68 64 60;
}
.theme-red {
@@ -87,6 +105,9 @@
--color-700: 185 28 28;
--color-800: 153 27 27;
--color-900: 127 29 29;
+
+ --color-logo-start: 248 113 113;
+ --color-logo-stop: 185 28 28;
}
.theme-orange {
@@ -100,6 +121,9 @@
--color-700: 194 65 12;
--color-800: 154 52 18;
--color-900: 124 45 18;
+
+ --color-logo-start: 251 146 60;
+ --color-logo-stop: 194 65 12;
}
.theme-amber {
@@ -113,6 +137,9 @@
--color-700: 180 83 9;
--color-800: 146 64 14;
--color-900: 120 53 15;
+
+ --color-logo-start: 251 191 36;
+ --color-logo-stop: 180 83 9;
}
.theme-yellow {
@@ -126,6 +153,9 @@
--color-700: 161 98 7;
--color-800: 133 77 14;
--color-900: 113 63 18;
+
+ --color-logo-start: 250 204 21;
+ --color-logo-stop: 161 98 7;
}
.theme-lime {
@@ -139,6 +169,9 @@
--color-700: 77 124 15;
--color-800: 63 98 18;
--color-900: 54 83 20;
+
+ --color-logo-start: 163 230 53;
+ --color-logo-stop: 77 124 15;
}
.theme-green {
@@ -152,6 +185,9 @@
--color-700: 21 128 61;
--color-800: 22 101 52;
--color-900: 20 83 45;
+
+ --color-logo-start: 74 222 128;
+ --color-logo-stop: 21 128 61;
}
.theme-emerald {
@@ -165,6 +201,9 @@
--color-700: 4 120 87;
--color-800: 6 95 70;
--color-900: 6 78 59;
+
+ --color-logo-start: 52 211 153;
+ --color-logo-stop: 4 120 87;
}
.theme-teal {
@@ -178,6 +217,9 @@
--color-700: 15 118 110;
--color-800: 17 94 89;
--color-900: 19 78 74;
+
+ --color-logo-start: 45 212 191;
+ --color-logo-stop: 15 118 110;
}
.theme-cyan {
@@ -191,6 +233,9 @@
--color-700: 14 116 144;
--color-800: 21 94 117;
--color-900: 22 78 99;
+
+ --color-logo-start: 34 211 238;
+ --color-logo-stop: 14 116 144;
}
.theme-sky {
@@ -204,6 +249,9 @@
--color-700: 3 105 161;
--color-800: 7 89 133;
--color-900: 12 74 110;
+
+ --color-logo-start: 56 189 248;
+ --color-logo-stop: 3 105 161;
}
.theme-blue {
@@ -217,6 +265,9 @@
--color-700: 29 78 216;
--color-800: 30 64 175;
--color-900: 30 58 138;
+
+ --color-logo-start: 96 165 250;
+ --color-logo-stop: 29 78 216;
}
.theme-indigo {
@@ -230,6 +281,9 @@
--color-700: 67 56 202;
--color-800: 55 48 163;
--color-900: 49 46 129;
+
+ --color-logo-start: 129 140 248;
+ --color-logo-stop: 67 56 202;
}
.theme-violet {
@@ -243,6 +297,9 @@
--color-700: 109 40 217;
--color-800: 91 33 182;
--color-900: 76 29 149;
+
+ --color-logo-start: 167 139 250;
+ --color-logo-stop: 109 40 217;
}
.theme-purple {
@@ -256,6 +313,9 @@
--color-700: 126 34 206;
--color-800: 107 33 168;
--color-900: 88 28 135;
+
+ --color-logo-start: 192 132 252;
+ --color-logo-stop: 126 34 206;
}
.theme-fuchsia {
@@ -269,6 +329,9 @@
--color-700: 162 28 175;
--color-800: 134 25 143;
--color-900: 112 26 117;
+
+ --color-logo-start: 232 121 249;
+ --color-logo-stop: 162 28 175;
}
.theme-pink {
@@ -282,6 +345,9 @@
--color-700: 190 24 93;
--color-800: 157 23 77;
--color-900: 131 24 67;
+
+ --color-logo-start: 244 114 182;
+ --color-logo-stop: 190 24 93;
}
.theme-rose {
@@ -295,4 +361,7 @@
--color-700: 190 18 60;
--color-800: 159 18 57;
--color-900: 136 19 55;
+
+ --color-logo-start: 251 113 133;
+ --color-logo-stop: 190 18 60;
}
diff --git a/src/utils/styles/themes.js b/src/utils/styles/themes.js
new file mode 100644
index 00000000..d0835d9f
--- /dev/null
+++ b/src/utils/styles/themes.js
@@ -0,0 +1,142 @@
+const themes = {
+ white: {
+ light: "#ffffff",
+ iconStart: "#ffffff",
+ iconEnd: "#282828",
+ dark: "#ffffff",
+ },
+ slate: {
+ light: "#f8fafc",
+ iconStart: "#94a3b8",
+ iconEnd: "#334155",
+ dark: "#1e293b",
+ },
+ gray: {
+ light: "#f9fafb",
+ iconStart: "#9ca3af",
+ iconEnd: "#374151",
+ dark: "#1f2937",
+ },
+ zinc: {
+ light: "#fafafa",
+ iconStart: "#a1a1aa",
+ iconEnd: "#3f3f46",
+ dark: "#27272a",
+ },
+ neutral: {
+ light: "#fafafa",
+ iconStart: "#a3a3a3",
+ iconEnd: "#404040",
+ dark: "#262626",
+ },
+ stone: {
+ light: "#fafaf9",
+ iconStart: "#a8a29e",
+ iconEnd: "#44403c",
+ dark: "#292524",
+ },
+ red: {
+ light: "#fef2f2",
+ iconStart: "#f87171",
+ iconEnd: "#b91c1c",
+ dark: "#991b1b",
+ },
+ orange: {
+ light: "#fff7ed",
+ iconStart: "#fb923c",
+ iconEnd: "#c2410c",
+ dark: "#9a3412",
+ },
+ amber: {
+ light: "#fffbeb",
+ iconStart: "#fbbf24",
+ iconEnd: "#b45309",
+ dark: "#92400e",
+ },
+ yellow: {
+ light: "#fefce8",
+ iconStart: "#facc15",
+ iconEnd: "#a16207",
+ dark: "#854d0e",
+ },
+ lime: {
+ light: "#f7fee7",
+ iconStart: "#a3e635",
+ iconEnd: "#4d7c0f",
+ dark: "#3f6212",
+ },
+ green: {
+ light: "#f0fdf4",
+ iconStart: "#4ade80",
+ iconEnd: "#15803d",
+ dark: "#166534",
+ },
+ emerald: {
+ light: "#ecfdf5",
+ iconStart: "#34d399",
+ iconEnd: "#047857",
+ dark: "#065f46",
+ },
+ teal: {
+ light: "#f0fdfa",
+ iconStart: "#2dd4bf",
+ iconEnd: "#0f766e",
+ dark: "#115e59",
+ },
+ cyan: {
+ light: "#ecfeff",
+ iconStart: "#22d3ee",
+ iconEnd: "#0e7490",
+ dark: "#155e75",
+ },
+ sky: {
+ light: "#f0f9ff",
+ iconStart: "#38bdf8",
+ iconEnd: "#0369a1",
+ dark: "#075985",
+ },
+ blue: {
+ light: "#eff6ff",
+ iconStart: "#60a5fa",
+ iconEnd: "#1d4ed8",
+ dark: "#1e40af",
+ },
+ indigo: {
+ light: "#eef2ff",
+ iconStart: "#818cf8",
+ iconEnd: "#4338ca",
+ dark: "#3730a3",
+ },
+ violet: {
+ light: "#f5f3ff",
+ iconStart: "#a78bfa",
+ iconEnd: "#6d28d9",
+ dark: "#5b21b6",
+ },
+ purple: {
+ light: "#faf5ff",
+ iconStart: "#c084fc",
+ iconEnd: "#7e22ce",
+ dark: "#6b21a8",
+ },
+ fuchsia: {
+ light: "#fdf4ff",
+ iconStart: "#e879f9",
+ iconEnd: "#a21caf",
+ dark: "#86198f",
+ },
+ pink: {
+ light: "#fdf2f8",
+ iconStart: "#f472b6",
+ iconEnd: "#be185d",
+ dark: "#9d174d",
+ },
+ rose: {
+ light: "#fff1f2",
+ iconStart: "#fb7185",
+ iconEnd: "#be123c",
+ dark: "#9f1239",
+ },
+};
+
+export default themes;