LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-01 16:51:13 +00:00
Code Issues Projects Releases Wiki Activity

Use helmet for theme inclusion instead

Browse source
This commit is contained in:
Orvar Segerström 2020-10-26 15:28:17 +01:00
parent ed5c4c1123
commit b8a47be3df
3 changed files with 41 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/server/index.tsx
View file

@ -61,17 +61,6 @@ server.get('/*', async (req, res) => {
}; };
initializeSite(site); 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 = ( const wrapper = (
<StaticRouter location={req.url} context={isoData}> <StaticRouter location={req.url} context={isoData}>
@ -93,7 +82,6 @@ server.get('/*', async (req, res) => {
${helmet.title.toString()} ${helmet.title.toString()}
${helmet.meta.toString()} ${helmet.meta.toString()}
${helmet.link.toString()}
<!-- Required meta tags --> <!-- Required meta tags -->
<meta name="Description" content="Lemmy"> <meta name="Description" content="Lemmy">
@ -109,13 +97,9 @@ server.get('/*', async (req, res) => {
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" /> <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
${
userTheme ?? <!-- Current theme and more -->
` ${helmet.link.toString()}
<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()
}
</head> </head>
<body ${helmet.bodyAttributes.toString()}> <body ${helmet.bodyAttributes.toString()}>

3
src/shared/components/app.tsx
View file

@ -6,9 +6,9 @@ import { i18n } from '../i18next';
import { routes } from '../../shared/routes'; import { routes } from '../../shared/routes';
import { Navbar } from '../../shared/components/navbar'; import { Navbar } from '../../shared/components/navbar';
import { Footer } from '../../shared/components/footer'; import { Footer } from '../../shared/components/footer';
import { Theme } from './theme';
import { Symbols } from '../../shared/components/symbols'; import { Symbols } from '../../shared/components/symbols';
import { GetSiteResponse } from 'lemmy-js-client'; import { GetSiteResponse } from 'lemmy-js-client';
import { UserService } from '../../shared/services';
import './styles.scss'; import './styles.scss';
export interface AppProps { export interface AppProps {
@ -24,6 +24,7 @@ export class App extends Component<AppProps, any> {
<> <>
<Provider i18next={i18n}> <Provider i18next={i18n}>
<div> <div>
<Theme user={this.props.site.my_user} />
{this.props.site && {this.props.site &&
this.props.site.site && this.props.site.site &&
this.props.site.site.icon && ( this.props.site.site.icon && (

36
src/shared/components/theme.tsx Normal file
View file

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