Skip to content

Commit aaad2ed

Browse files
garronejgarronej
committed
Refactor head imports
1 parent c4568c7 commit aaad2ed

File tree

2 files changed

+7
-228
lines changed

2 files changed

+7
-228
lines changed

‎src/next-appdir/DsfrHead.tsx‎

Lines changed: 4 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,15 @@
11
import React from "react";
22
import { objectKeys } from "tsafe/objectKeys";
3-
//import { getColors } from "./lib/colors";
43
import type { ColorScheme } from "../useIsDark";
54
import { getAssetUrl } from "../tools/getAssetUrl";
6-
//import { rootColorSchemeStyleTagId } from "./lib/darkMode";
7-
8-
import marianneLightWoff2Url from "../dsfr/fonts/Marianne-Light.woff2";
9-
import marianneItalicWoff2Url from "../dsfr/fonts/Marianne-Light_Italic.woff2";
10-
import marianneRegularWoff2Url from "../dsfr/fonts/Marianne-Regular.woff2";
11-
import marianneRegularItalicWoff2Url from "../dsfr/fonts/Marianne-Regular_Italic.woff2";
12-
import marianneMediumWoff2Url from "../dsfr/fonts/Marianne-Medium.woff2";
13-
import marianneMediumItalicWoff2Url from "../dsfr/fonts/Marianne-Medium_Italic.woff2";
14-
import marianneBoldWoff2Url from "../dsfr/fonts/Marianne-Bold.woff2";
15-
import marianneBoldItalicWoff2Url from "../dsfr/fonts/Marianne-Bold_Italic.woff2";
16-
import spectralRegularWoff2Url from "../dsfr/fonts/Spectral-Regular.woff2";
17-
import spectralExtraBoldWoff2Url from "../dsfr/fonts/Spectral-ExtraBold.woff2";
185
import AppleTouchIcon from "../dsfr/favicon/apple-touch-icon.png";
196
import FaviconSvg from "../dsfr/favicon/favicon.svg";
207
import FaviconIco from "../dsfr/favicon/favicon.ico";
21-
import { data_fr_scheme, data_fr_theme, rootColorSchemeStyleTagId } from "../useIsDark/constants";
22-
import { getColors } from "../fr/colors";
8+
import { getScriptToRunAsap } from "../useIsDark/scriptToRunAsap";
9+
import { fontUrlByFileBasename } from "./fontUrlByFileBasename";
2310
import "../dsfr/dsfr.css";
2411
import "../dsfr/utility/icons/icons.css";
2512

26-
const fontUrlByFileBasename = {
27-
"Marianne-Light": marianneLightWoff2Url,
28-
"Marianne-Light_Italic": marianneItalicWoff2Url,
29-
"Marianne-Regular": marianneRegularWoff2Url,
30-
"Marianne-Regular_Italic": marianneRegularItalicWoff2Url,
31-
"Marianne-Medium": marianneMediumWoff2Url,
32-
"Marianne-Medium_Italic": marianneMediumItalicWoff2Url,
33-
"Marianne-Bold": marianneBoldWoff2Url,
34-
"Marianne-Bold_Italic": marianneBoldItalicWoff2Url,
35-
"Spectral-Regular": spectralRegularWoff2Url,
36-
"Spectral-ExtraBold": spectralExtraBoldWoff2Url
37-
} as const;
38-
3913
export type DsfrHeadProps = {
4014
defaultColorScheme: ColorScheme | "system";
4115
/** If not provided no fonts are preloaded.
@@ -69,94 +43,8 @@ export function DsfrHead(props: DsfrHeadProps) {
6943
<link rel="shortcut icon" href={getAssetUrl(FaviconIco)} type="image/x-icon" />
7044
{isProduction && (
7145
<script
72-
dangerouslySetInnerHTML={{
73-
"__html": `
74-
75-
window.ssrWasPerformedWithIsDark = "${defaultColorScheme}" === "dark";
76-
77-
const isDark = (() => {
78-
79-
const isDarkExplicitlyProvidedAsParameter = (() => {
80-
if ("${defaultColorScheme}" === "system") {
81-
return undefined;
82-
}
83-
84-
switch ("${defaultColorScheme}") {
85-
case "dark": return true;
86-
case "light": return false;
87-
}
88-
})();
89-
90-
const isDarkFromLocalStorage = (() => {
91-
const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
92-
93-
if (colorSchemeReadFromLocalStorage === null) {
94-
return undefined;
95-
}
96-
97-
if (colorSchemeReadFromLocalStorage === "system") {
98-
return undefined;
99-
}
100-
101-
switch (colorSchemeReadFromLocalStorage) {
102-
case "dark":
103-
return true;
104-
case "light":
105-
return false;
106-
}
107-
})();
108-
109-
const isDarkFromOsPreference = (() => {
110-
if (!window.matchMedia) {
111-
return undefined;
112-
}
113-
114-
return window.matchMedia("(prefers-color-scheme: dark)").matches;
115-
})();
116-
117-
const isDarkFallback = false;
118-
119-
return (
120-
isDarkFromLocalStorage ??
121-
isDarkExplicitlyProvidedAsParameter ??
122-
isDarkFromOsPreference ??
123-
isDarkFallback
124-
);
125-
126-
})();
127-
128-
["${data_fr_scheme}", "${data_fr_theme}"].forEach(attr => document.documentElement.setAttribute(attr, isDark ? "dark" : "light"));
129-
130-
{
131-
132-
const element = document.createElement("style");
133-
134-
element.id = "${rootColorSchemeStyleTagId}";
135-
136-
element.innerHTML = \`:root { color-scheme: \${isDark ? "dark" : "light"}; }\`;
137-
138-
document.head.appendChild(element);
139-
140-
}
141-
142-
{
143-
144-
const element = document.createElement("meta");
145-
146-
element.name = "theme-color";
147-
148-
element.content = isDark ? "${
149-
getColors(true).decisions.background.default.grey.default
150-
}" : "${
151-
getColors(false).decisions.background.default.grey.default
152-
}";
153-
154-
document.head.appendChild(element);
155-
156-
}
157-
`
158-
}}
159-
></script>
46+
dangerouslySetInnerHTML={{ "__html": getScriptToRunAsap(defaultColorScheme) }}
47+
/>
16048
)}
16149
</>
16250
);

‎src/next-pagesdir.tsx‎

Lines changed: 3 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,12 @@ import DefaultApp from "next/app";
66
import type { AppProps, AppContext } from "next/app";
77
import type { DocumentProps, DocumentContext } from "next/document";
88
import { rootColorSchemeStyleTagId, data_fr_scheme, data_fr_theme } from "./useIsDark/constants";
9+
import { getScriptToRunAsap } from "./useIsDark/scriptToRunAsap";
910
import { SsrIsDarkProvider } from "./useIsDark/server";
1011
import type { ColorScheme } from "./useIsDark";
1112
import { isBrowser } from "./tools/isBrowser";
1213
import { objectKeys } from "tsafe/objectKeys";
13-
import marianneLightWoff2Url from "./dsfr/fonts/Marianne-Light.woff2";
14-
import marianneItalicWoff2Url from "./dsfr/fonts/Marianne-Light_Italic.woff2";
15-
import marianneRegularWoff2Url from "./dsfr/fonts/Marianne-Regular.woff2";
16-
import marianneRegularItalicWoff2Url from "./dsfr/fonts/Marianne-Regular_Italic.woff2";
17-
import marianneMediumWoff2Url from "./dsfr/fonts/Marianne-Medium.woff2";
18-
import marianneMediumItalicWoff2Url from "./dsfr/fonts/Marianne-Medium_Italic.woff2";
19-
import marianneBoldWoff2Url from "./dsfr/fonts/Marianne-Bold.woff2";
20-
import marianneBoldItalicWoff2Url from "./dsfr/fonts/Marianne-Bold_Italic.woff2";
21-
import spectralRegularWoff2Url from "./dsfr/fonts/Spectral-Regular.woff2";
22-
import spectralExtraBoldWoff2Url from "./dsfr/fonts/Spectral-ExtraBold.woff2";
14+
import { fontUrlByFileBasename } from "./next-appdir/fontUrlByFileBasename";
2315
import AppleTouchIcon from "./dsfr/favicon/apple-touch-icon.png";
2416
import FaviconSvg from "./dsfr/favicon/favicon.svg";
2517
import FaviconIco from "./dsfr/favicon/favicon.ico";
@@ -35,19 +27,6 @@ import "./dsfr/utility/icons/icons.css";
3527

3628
export type { RegisterLink, RegisteredLinkProps };
3729

38-
const fontUrlByFileBasename = {
39-
"Marianne-Light": marianneLightWoff2Url,
40-
"Marianne-Light_Italic": marianneItalicWoff2Url,
41-
"Marianne-Regular": marianneRegularWoff2Url,
42-
"Marianne-Regular_Italic": marianneRegularItalicWoff2Url,
43-
"Marianne-Medium": marianneMediumWoff2Url,
44-
"Marianne-Medium_Italic": marianneMediumItalicWoff2Url,
45-
"Marianne-Bold": marianneBoldWoff2Url,
46-
"Marianne-Bold_Italic": marianneBoldItalicWoff2Url,
47-
"Spectral-Regular": spectralRegularWoff2Url,
48-
"Spectral-ExtraBold": spectralExtraBoldWoff2Url
49-
} as const;
50-
5130
export type CreateNextDsfrIntegrationApiParams = {
5231
defaultColorScheme: ColorScheme | "system";
5332
/** Default: false */
@@ -199,95 +178,7 @@ export function createNextDsfrIntegrationApi(
199178
)}
200179
<script
201180
dangerouslySetInnerHTML={{
202-
"__html": `
203-
204-
{
205-
206-
window.ssrWasPerformedWithIsDark = "${defaultColorScheme}" === "dark";
207-
208-
const isDark = (() => {
209-
210-
const isDarkExplicitlyProvidedAsParameter = (() => {
211-
if ("${defaultColorScheme}" === "system") {
212-
return undefined;
213-
}
214-
215-
switch ("${defaultColorScheme}") {
216-
case "dark": return true;
217-
case "light": return false;
218-
}
219-
})();
220-
221-
const isDarkFromLocalStorage = (() => {
222-
const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
223-
224-
if (colorSchemeReadFromLocalStorage === null) {
225-
return undefined;
226-
}
227-
228-
if (colorSchemeReadFromLocalStorage === "system") {
229-
return undefined;
230-
}
231-
232-
switch (colorSchemeReadFromLocalStorage) {
233-
case "dark":
234-
return true;
235-
case "light":
236-
return false;
237-
}
238-
})();
239-
240-
const isDarkFromOsPreference = (() => {
241-
if (!window.matchMedia) {
242-
return undefined;
243-
}
244-
245-
return window.matchMedia("(prefers-color-scheme: dark)").matches;
246-
})();
247-
248-
const isDarkFallback = false;
249-
250-
return (
251-
isDarkFromLocalStorage ??
252-
isDarkExplicitlyProvidedAsParameter ??
253-
isDarkFromOsPreference ??
254-
isDarkFallback
255-
);
256-
257-
})();
258-
259-
["${data_fr_scheme}", "${data_fr_theme}"].forEach(attr => document.documentElement.setAttribute(attr, isDark ? "dark" : "light"));
260-
261-
{
262-
263-
const element = document.createElement("style");
264-
265-
element.id = "${rootColorSchemeStyleTagId}";
266-
267-
element.innerHTML = \`:root { color-scheme: \${isDark ? "dark" : "light"}; }\`;
268-
269-
document.head.appendChild(element);
270-
271-
}
272-
273-
{
274-
275-
const element = document.createElement("meta");
276-
277-
element.name = "theme-color";
278-
279-
element.content = isDark ? "${
280-
getColors(true).decisions.background.default.grey.default
281-
}" : "${
282-
getColors(false).decisions.background.default.grey.default
283-
}";
284-
285-
document.head.appendChild(element);
286-
287-
}
288-
289-
}
290-
`
181+
"__html": getScriptToRunAsap(defaultColorScheme)
291182
}}
292183
/>
293184
</Head>

0 commit comments

Comments
 (0)