dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-16 01:39:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

new logo and styling tweaks

Browse source
This commit is contained in:
Ben Phelps 2022-10-08 16:04:24 +03:00
parent adf601c572
commit e56dccc7f1
33 changed files with 533 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/pages/_document.jsx
View file

@ -8,6 +8,11 @@ export default function Document() {
name="description"
content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations."
/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=4" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=4" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=4" />
<link rel="manifest" href="/site.webmanifest?v=4" />
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=4" color="#1e9cd7" />
</Head>
<body>
<Main />

14
src/pages/api/theme.js Normal file
View file

@ -0,0 +1,14 @@
import checkAndCopyConfig, { getSettings } from "utils/config/config";
export default function handler({ res }) {
checkAndCopyConfig("settings.yaml");
const settings = getSettings();
const color = settings.color || "slate";
const theme = settings.theme || "dark";
return res.status(200).json({
color,
theme,
});
}

29
src/pages/browserconfig.xml.jsx Normal file
View file

@ -0,0 +1,29 @@
import { getSettings } from "utils/config/config";
import themes from "utils/styles/themes";
export async function getServerSideProps({ res }) {
const settings = getSettings();
const color = settings.color || "slate";
const theme = settings.theme || "dark";
const xml = `<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png?v=2"/>
<TileColor>${themes[color][theme]}</TileColor>
</tile>
</msapplication>
</browserconfig>`;
res.setHeader("Content-Type", "text/xml");
res.write(xml);
res.end();
return {
props: {},
};
}
export default function BrowserConfig() {}

20
src/pages/index.jsx
View file

@ -20,6 +20,7 @@ import { ThemeContext } from "utils/contexts/theme";
import { SettingsContext } from "utils/contexts/settings";
import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response";
import ErrorBoundary from "components/errorboundry";
import themes from "utils/styles/themes";
const ThemeToggle = dynamic(() => import("components/toggles/theme"), {
ssr: false,
@ -185,10 +186,19 @@ function Home({ initialSettings }) {
<Head>
<title>{initialSettings.title || "Homepage"}</title>
{initialSettings.base && <base href={initialSettings.base} />}
{initialSettings.favicon && <link rel="icon" href={initialSettings.favicon} />}
{initialSettings.favicon ? (
<link rel="icon" href={initialSettings.favicon} />
) : (
<link rel="shortcut icon" href="/homepage.ico" />
)}
<meta
name="msapplication-TileColor"
content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]}
/>
<meta name="theme-color" content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]} />
</Head>
<div className="relative container m-auto flex flex-col justify-between z-10">
<div className="flex flex-row flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">
<div className="flex flex-row flex-wrap m-4 mb-0 sm:m-8 sm:mb-0 pb-6 border-b-2 border-theme-800 dark:border-theme-400 justify-between">
{widgets && (
<>
{widgets
@ -197,7 +207,7 @@ function Home({ initialSettings }) {
<Widget key={i} widget={widget} />
))}
<div className="ml-4 flex flex-wrap basis-full grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
<div className="m-auto sm:ml-2 flex flex-wrap grow sm:basis-auto justify-between md:justify-end">
{widgets
.filter((widget) => rightAlignedWidgets.includes(widget.type))
.map((widget, i) => (
@ -209,7 +219,7 @@ function Home({ initialSettings }) {
</div>
{services && (
<div className="flex flex-wrap p-8 items-start">
<div className="flex flex-wrap p-4 sm:p-8 items-start pb-2">
{services.map((group) => (
<ServicesGroup key={group.name} services={group} layout={initialSettings.layout?.[group.name]} />
))}
@ -217,7 +227,7 @@ function Home({ initialSettings }) {
)}
{bookmarks && (
<div className="grow flex flex-wrap pt-0 p-8">
<div className="grow flex flex-wrap pt-0 p-4 sm:p-8">
{bookmarks.map((group) => (
<BookmarksGroup key={group.name} group={group} />
))}

42
src/pages/site.webmanifest.jsx Normal file
View file

@ -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;
}