Fascinated/simple-links
1
1
Fork 0
generated from Fascinated/nextjs-13-template-with-tailwindcss
Code Issues 1 Pull Requests 10 Actions Activity

fix background image
All checks were successful
Publish Docker Image / docker (push) Successful in 2m27s
Details

Browse Source
This commit is contained in:
Lee 2024-08-29 22:45:47 +01:00
parent db6ecf5c6a
commit 42f631da08
3 changed files with 41 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/layout.tsx
View File

@ -3,6 +3,7 @@ import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css"; import "@fortawesome/fontawesome-svg-core/styles.css";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import {ReactNode} from "react";
const Config: Config = require("../../config.yml") as any; const Config: Config = require("../../config.yml") as any;
config.autoAddCss = false; config.autoAddCss = false;
@ -14,7 +15,7 @@ export const metadata = Config.metadata; // Site metadata from the config
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode; children: ReactNode;
}) { }) {
return ( return (
<html lang="en"> <html lang="en">

37
src/app/page.tsx
View File

@ -23,7 +23,7 @@ export default function Home() {
options, options,
description, description,
theme, theme,
} = Config; // All of the settings pulled from the config file } = Config; // All the settings pulled from the config file
// Theme colors to use when using the selected theme // Theme colors to use when using the selected theme
// all used colors are from TailwindCSS // all used colors are from TailwindCSS
@ -54,32 +54,23 @@ export default function Home() {
const selectedTheme = themeColors[theme] || themeColors.dark; // The theme to use (fallback of dark) const selectedTheme = themeColors[theme] || themeColors.dark; // The theme to use (fallback of dark)
return ( return (
<> <div className={"relative"}>
{/* Background Image */}
{background.showBackground && background.backgroundImage && (
// eslint-disable-next-line @next/next/no-img-element
<img
alt="Background image"
src={background.backgroundImage}
className={`absolute z-0 object-cover w-full h-full ${background.blur && "blur-sm"} brightness-${background.darken.enabled && background.darken.amount / 2}`}
/>
)}
<main <main
className={`flex flex-col items-center justify-center w-screen h-screen ${selectedTheme.backgroundColor} ${selectedTheme.textColor}`} className={`flex flex-col items-center justify-center w-screen h-screen ${selectedTheme.backgroundColor} ${selectedTheme.textColor}`}
> >
{/* Background Image */}
{background.showBackground && background.backgroundImage && (
<Image
alt="Background image"
src={background.backgroundImage}
fill={true}
style={{
zIndex: 0,
filter: `${background.blur && "blur(4px)"} brightness(${
background.darken.enabled && background.darken.amount / 2
})`,
}}
/>
)}
{/* Info Card */} {/* Info Card */}
<div <div
className={`${ className={`${infoCard.transparency != 0 && `${selectedTheme.infoCardColor} shadow-lg rounded-lg`} text-center`}
infoCard.transparency != 0
? `${selectedTheme.infoCardColor} shadow-lg rounded-lg`
: ``
} text-center`}
style={{ style={{
zIndex: 1, zIndex: 1,
opacity: infoCard.transparency != 0 ? infoCard.transparency : 1, opacity: infoCard.transparency != 0 ? infoCard.transparency : 1,
@ -184,6 +175,6 @@ export default function Home() {
)} )}
</div> </div>
</main> </main>
</> </div>
); );
} }

50
yarn.lock
View File

@ -173,38 +173,38 @@
resolved "https://registry.npmjs.org/@eslint/js/-/js-8.51.0.tgz" resolved "https://registry.npmjs.org/@eslint/js/-/js-8.51.0.tgz"
integrity sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg== integrity sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg==
"@fortawesome/fontawesome-common-types@6.5.1": "@fortawesome/fontawesome-common-types@6.6.0":
version "6.5.1" version "6.6.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz#fdb1ec4952b689f5f7aa0bffe46180bb35490032" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz#31ab07ca6a06358c5de4d295d4711b675006163f"
integrity sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A== integrity sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==
"@fortawesome/fontawesome-svg-core@^6.5.1": "@fortawesome/fontawesome-svg-core@^6.4.2":
version "6.5.1" version "6.6.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz#9d56d46bddad78a7ebb2043a97957039fcebcf0a" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz#2a24c32ef92136e98eae2ff334a27145188295ff"
integrity sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ== integrity sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==
dependencies: dependencies:
"@fortawesome/fontawesome-common-types" "6.5.1" "@fortawesome/fontawesome-common-types" "6.6.0"
"@fortawesome/free-brands-svg-icons@^6.5.1": "@fortawesome/free-brands-svg-icons@^6.4.2":
version "6.5.1" version "6.6.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz#e948cc02404277cb8ad40fe3573ca75f2830e876" resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz#2797f2cc66d21e7e47fa64e680b8835e8d30e825"
integrity sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg== integrity sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==
dependencies: dependencies:
"@fortawesome/fontawesome-common-types" "6.5.1" "@fortawesome/fontawesome-common-types" "6.6.0"
"@fortawesome/free-regular-svg-icons@^6.5.1": "@fortawesome/free-regular-svg-icons@^6.4.2":
version "6.5.1" version "6.6.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.1.tgz#c98a91d2c9137ed54a7aa2362a916f46503e0627" resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz#fc49a947ac8dfd20403c9ea5f37f0919425bdf04"
integrity sha512-m6ShXn+wvqEU69wSP84coxLbNl7sGVZb+Ca+XZq6k30SzuP3X4TfPqtycgUh9ASwlNh5OfQCd8pDIWxl+O+LlQ== integrity sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==
dependencies: dependencies:
"@fortawesome/fontawesome-common-types" "6.5.1" "@fortawesome/fontawesome-common-types" "6.6.0"
"@fortawesome/free-solid-svg-icons@^6.5.1": "@fortawesome/free-solid-svg-icons@^6.4.2":
version "6.5.1" version "6.6.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz#737b8d787debe88b400ab7528f47be333031274a" resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz#061751ca43be4c4d814f0adbda8f006164ec9f3b"
integrity sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ== integrity sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==
dependencies: dependencies:
"@fortawesome/fontawesome-common-types" "6.5.1" "@fortawesome/fontawesome-common-types" "6.6.0"
"@fortawesome/react-fontawesome@^0.2.0": "@fortawesome/react-fontawesome@^0.2.0":
version "0.2.0" version "0.2.0"
@ -4454,7 +4454,7 @@ url-parse-lax@^3.0.0:
dependencies: dependencies:
prepend-http "^2.0.0" prepend-http "^2.0.0"
use-lanyard@^1.5.2: use-lanyard@^1.4.4:
version "1.5.2" version "1.5.2"
resolved "https://registry.yarnpkg.com/use-lanyard/-/use-lanyard-1.5.2.tgz#e02a40b0703e30a098ce77c6d8f785119741f32d" resolved "https://registry.yarnpkg.com/use-lanyard/-/use-lanyard-1.5.2.tgz#e02a40b0703e30a098ce77c6d8f785119741f32d"
integrity sha512-clxZoUrzgvGa+9IAOv39e4yNjUEvmk/BjBbpIZ/0ymLmclypJkKJ86j5okEjBAACMkw+u1c4gf/zCifpOSwyDA== integrity sha512-clxZoUrzgvGa+9IAOv39e4yNjUEvmk/BjBbpIZ/0ymLmclypJkKJ86j5okEjBAACMkw+u1c4gf/zCifpOSwyDA==