]> Untitled Git - lemmy-ui.git/commitdiff
projects / lemmy-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ed5c4c1)
Use helmet for theme inclusion instead
authorOrvar Segerström <orvarsegerstrom@gmail.com>
Mon, 26 Oct 2020 14:28:17 +0000 (15:28 +0100)
committerOrvar Segerström <orvarsegerstrom@gmail.com>
Mon, 26 Oct 2020 14:28:17 +0000 (15:28 +0100)
src/server/index.tsx patch | blob | history
src/shared/components/app.tsx patch | blob | history
src/shared/components/theme.tsx [new file with mode: 0644] patch | blob

diff --git a/src/server/index.tsx b/src/server/index.tsx
index 34bd4536f5d5f8b9a5c26aadcc7f6fde3fe484a4..c8d6044815fc4ed9a2600f219a8d9d07b0d7c2fa 100644 (file)
--- a/src/server/index.tsx
+++ b/src/server/index.tsx
@@ -61,17 +61,6 @@ server.get('/*', async (req, res) => {
   };
 
   initializeSite(site);
-  const user = site.my_user;
-  const userTheme =
-    user &&
-    user.theme &&
-    `
-      <link
-        rel="stylesheet"
-        type="text/css"
-        href="/static/assets/css/themes/${user.theme}.min.css"
-      />
-    `;
 
   const wrapper = (
     <StaticRouter location={req.url} context={isoData}>
@@ -93,7 +82,6 @@ server.get('/*', async (req, res) => {
 
            ${helmet.title.toString()}
            ${helmet.meta.toString()}
-           ${helmet.link.toString()}
 
            <!-- Required meta tags -->
            <meta name="Description" content="Lemmy">
@@ -109,13 +97,9 @@ server.get('/*', async (req, res) => {
 
            <!-- Styles -->
            <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
-           ${
-             userTheme ??
-             `
-           <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/litely.min.css" id="default-light" media="(prefers-color-scheme: light)" />
-           <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/darkly.min.css" id="default-dark" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" />
-           `.trim()
-           }
+
+           <!-- Current theme and more -->
+           ${helmet.link.toString()}
            </head>
 
            <body ${helmet.bodyAttributes.toString()}>
diff --git a/src/shared/components/app.tsx b/src/shared/components/app.tsx
index a43507053d311ddc1e46f3ac65bdf2f15d63380e..67d94591a970e07acc8bfa801b0b34a3963c17d7 100644 (file)
--- a/src/shared/components/app.tsx
+++ b/src/shared/components/app.tsx
@@ -6,9 +6,9 @@ import { i18n } from '../i18next';
 import { routes } from '../../shared/routes';
 import { Navbar } from '../../shared/components/navbar';
 import { Footer } from '../../shared/components/footer';
+import { Theme } from './theme';
 import { Symbols } from '../../shared/components/symbols';
 import { GetSiteResponse } from 'lemmy-js-client';
-import { UserService } from '../../shared/services';
 import './styles.scss';
 
 export interface AppProps {
@@ -24,6 +24,7 @@ export class App extends Component<AppProps, any> {
       <>
         <Provider i18next={i18n}>
           <div>
+            <Theme user={this.props.site.my_user} />
             {this.props.site &&
               this.props.site.site &&
               this.props.site.site.icon && (
diff --git a/src/shared/components/theme.tsx b/src/shared/components/theme.tsx
new file mode 100644 (file)
index 0000000..558f9a8
--- /dev/null
+++ b/src/shared/components/theme.tsx
@@ -0,0 +1,36 @@
+import { User } from 'lemmy-js-client';
+import { Helmet } from 'inferno-helmet';
+
+export const Theme = (props: { user: User | undefined }) => {
+  const user = props.user;
+  const userTheme = user && user.theme && (
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href={`/static/assets/css/themes/${user.theme}.min.css`}
+    />
+  );
+
+  return (
+    <Helmet>
+      {userTheme ?? (
+        <>
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href="/static/assets/css/themes/litely.min.css"
+            id="default-light"
+            media="(prefers-color-scheme: light)"
+          />
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href="/static/assets/css/themes/darkly.min.css"
+            id="default-dark"
+            media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)"
+          />
+        </>
+      )}
+    </Helmet>
+  );
+};
Unnamed repository; edit this file 'description' to name the repository.