LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-22 20:31:13 +00:00
Code Issues Projects Releases Wiki Activity

Blur SSR by default when content warning is set

Browse source
This commit is contained in:
Matthias Camenzind 2024-04-18 13:18:39 +02:00
parent 8e5599e3a9
commit 1b4903d732
4 changed files with 41 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lemmy-translations

@ -1 +1 @@
Subproject commit d250d15f4fbf3e1b9565529f7d0cea90c8270757 Subproject commit e78c744abe5c3824f9ca7de7f1ee086468385ee0

4
src/assets/css/main.css
View file

@ -461,7 +461,3 @@ br.big {
.totp-link { .totp-link {
width: fit-content; width: fit-content;
} }
#adultConsentModal {
backdrop-filter: blur(10px);
}

19
src/server/utils/create-ssr-html.tsx
View file

@ -75,6 +75,20 @@ export async function createSsrHtml(
.map(x => `<link rel="preload" as="script" href="${x}" />`) .map(x => `<link rel="preload" as="script" href="${x}" />`)
.join(""); .join("");
// Blurring has to happen even if all style sheets fail to load.
const blurStyles = !site?.site_view.site.content_warning
? ""
: `
<style>
[data-lemmy-blur=on] #app > :not(#adultConsentModal) {
filter: blur(10px);
pointer-events: none; ${/* prevent accidental link clicks */ ""}
}
html[data-lemmy-blur=on] {
overflow: hidden; ${/* Firefox on Android allows otherwise to peek behind the urlbar */ ""}
}
</style>`;
return ` return `
<!DOCTYPE html> <!DOCTYPE html>
<html ${helmet.htmlAttributes.toString()}> <html ${helmet.htmlAttributes.toString()}>
@ -84,7 +98,12 @@ export async function createSsrHtml(
const light = window.matchMedia("(prefers-color-scheme: light)").matches; const light = window.matchMedia("(prefers-color-scheme: light)").matches;
document.documentElement.setAttribute("data-bs-theme", light ? "light" : "dark"); document.documentElement.setAttribute("data-bs-theme", light ? "light" : "dark");
} }
if (document.documentElement.hasAttribute("data-lemmy-blur")) {
const consent = localStorage.getItem("adult-consent") === "true";
document.documentElement.setAttribute("data-lemmy-blur", consent ? "off" : "on");
}
</script> </script>
${blurStyles}
${lazyScripts} ${lazyScripts}
<script nonce="${cspNonce}">window.isoData = ${serialize(isoData)}</script> <script nonce="${cspNonce}">window.isoData = ${serialize(isoData)}</script>

32
src/shared/components/common/adult-consent-modal.tsx
View file

@ -4,7 +4,9 @@ import { adultConsentLocalStorageKey } from "../../config";
import { setIsoData } from "@utils/app"; import { setIsoData } from "@utils/app";
import { IsoDataOptionalSite } from "../../interfaces"; import { IsoDataOptionalSite } from "../../interfaces";
import { mdToHtml } from "../../markdown"; import { mdToHtml } from "../../markdown";
import { I18NextService, UserService } from "../../services"; import { I18NextService } from "../../services";
import { isBrowser } from "@utils/browser";
import { Helmet } from "inferno-helmet";
interface AdultConsentModalProps { interface AdultConsentModalProps {
contentWarning: string; contentWarning: string;
@ -33,6 +35,13 @@ class AdultConsentModalInner extends Component<AdultConsentModalProps, any> {
data-bs-backdrop="static" data-bs-backdrop="static"
ref={this.modalDivRef} ref={this.modalDivRef}
> >
<Helmet
htmlAttributes={{
// There is a hack included in create-ssr-html that fixes this
// attribute early based on localStorage.
"data-lemmy-blur": this.props.show ? "on" : "off",
}}
/>
<div <div
className="modal-dialog modal-fullscreen-sm-down" className="modal-dialog modal-fullscreen-sm-down"
data-bs-backdrop="static" data-bs-backdrop="static"
@ -89,7 +98,6 @@ interface AdultConsentModalState {
function handleAdultConsent(i: AdultConsentModal) { function handleAdultConsent(i: AdultConsentModal) {
localStorage.setItem(adultConsentLocalStorageKey, "true"); localStorage.setItem(adultConsentLocalStorageKey, "true");
i.setState({ show: false }); i.setState({ show: false });
location.reload();
} }
function handleAdultConsentGoBack(i: AdultConsentModal) { function handleAdultConsentGoBack(i: AdultConsentModal) {
@ -114,17 +122,19 @@ export default class AdultConsentModal extends Component<
redirectCountdown: Infinity, redirectCountdown: Infinity,
}; };
componentDidMount() { componentWillMount() {
const siteRes = this.isoData.site_res; const siteRes = this.isoData.site_res;
if ( if (siteRes?.site_view.site.content_warning) {
siteRes?.site_view.site.content_warning && if (isBrowser()) {
!( if (localStorage.getItem(adultConsentLocalStorageKey) !== "true") {
UserService.Instance.myUserInfo || this.setState({ show: true });
localStorage.getItem(adultConsentLocalStorageKey) } else {
) this.setState({ show: false });
) { }
this.setState({ show: true }); } else {
this.setState({ show: true });
}
} }
} }