fix(headline): kill light-theme flash on dark page load

.env.example

@@ -35,6 +35,10 @@ NEXT_PUBLIC_AHREFS_ANALYTICS_KEY=
 # safe to leave empty for local development
 NEXT_PUBLIC_GA_MEASUREMENT_ID=
 
+# Third-party tracking script URL — loaded by SeoGenerator when set,
+# leave empty to disable (recommended for local development)
+NEXT_PUBLIC_TRACKING_URL=
+
 # ---------- Backend / API ----------
 # Strapi CMS public URL (used by the browser) — staging instance is fine for dev
 NEXT_PUBLIC_STRAPI=https://staging-strapi.keepsimple.io
@@ -70,11 +74,6 @@ NEXTAUTH_URL=http://localhost:3005
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
-# ---------- LinkedIn OAuth ----------
-# Setup: https://www.linkedin.com/developers/apps
-LINKEDIN_CLIENT_ID=
-LINKEDIN_CLIENT_SECRET=
-
 # ---------- Discord OAuth ----------
 # Setup: https://discord.com/developers/applications
 DISCORD_CLIENT_ID=

.env.staging.example

@@ -24,8 +24,5 @@ NEXTAUTH_SECRET=__fill_in__
 GOOGLE_CLIENT_ID=__fill_in__
 GOOGLE_CLIENT_SECRET=__fill_in__
 
-LINKEDIN_CLIENT_ID=__fill_in__
-LINKEDIN_CLIENT_SECRET=__fill_in__
-
 DISCORD_CLIENT_ID=__fill_in__
 DISCORD_CLIENT_SECRET=__fill_in__

src/components/Headline/Headline.module.scss

@@ -54,6 +54,10 @@
         left: 0;
       }
 
+      .posterDark {
+        display: none;
+      }
+
       .video {
         width: 100%;
         height: 100%;
@@ -248,6 +252,24 @@
       background-color: #1d1b1b;
     }
   }
+}
+
+// Body-class driven swap — fires BEFORE React hydrates the .darkTheme prop on
+// the section, so the dark poster paints on first frame instead of after the
+// theme prop catches up.
+:global(body.darkTheme) {
+  .videoContainer,
+  .videoContainerMobile {
+    background-color: #1d1b1b;
+
+    .posterLight {
+      display: none;
+    }
+
+    .posterDark {
+      display: block;
+    }
+  }
 
   .contentWrapper {
     .headlineContent {

src/components/Headline/Headline.tsx

@@ -234,15 +234,19 @@ const Headline: FC<HeadlineProps> = ({ headline, darkTheme, russianView }) => {
         </div>
         <div className={styles.videoContainer}>
           <Image
-            src={
-              darkTheme
-                ? '/keepsimple_/assets/home-page/desktop-thumbnail-dark.webp'
-                : '/keepsimple_/assets/home-page/desktop-thumbnail-light.webp'
-            }
+            src="/keepsimple_/assets/home-page/desktop-thumbnail-light.webp"
             alt="Hero background"
             fill
             priority
-            className={styles.poster}
+            className={cn(styles.poster, styles.posterLight)}
+            sizes="(max-width: 1440px) 50vw, 684px"
+          />
+          <Image
+            src="/keepsimple_/assets/home-page/desktop-thumbnail-dark.webp"
+            alt="Hero background"
+            fill
+            priority
+            className={cn(styles.poster, styles.posterDark)}
             sizes="(max-width: 1440px) 50vw, 684px"
           />
           <video
@@ -363,15 +367,19 @@ const Headline: FC<HeadlineProps> = ({ headline, darkTheme, russianView }) => {
         </div>
         <div className={styles.videoContainerMobile}>
           <Image
-            src={
-              darkTheme
-                ? '/keepsimple_/assets/home-page/mobile-thumbnail-dark.webp'
-                : '/keepsimple_/assets/home-page/mobile-thumbnail.png'
-            }
+            src="/keepsimple_/assets/home-page/mobile-thumbnail.png"
+            alt="Hero background"
+            fill
+            priority
+            className={cn(styles.poster, styles.posterLight)}
+            sizes="(max-width: 786px) 100vw, 786px"
+          />
+          <Image
+            src="/keepsimple_/assets/home-page/mobile-thumbnail-dark.webp"
             alt="Hero background"
             fill
             priority
-            className={styles.poster}
+            className={cn(styles.poster, styles.posterDark)}
             sizes="(max-width: 786px) 100vw, 786px"
           />
           <video

src/components/LogIn/LogIn.module.scss

@@ -92,14 +92,6 @@
         background-color: #4854e0;
       }
     }
-    .linkedinBtn {
-      background-color: #0177b5;
-      color: white;
-
-      &:hover {
-        background-color: #015d8d;
-      }
-    }
     .twitterBtn {
       background-color: #000;
       color: white;

src/components/LogIn/LogIn.tsx

@@ -9,7 +9,6 @@ import auth from '@data/auth';
 
 import DiscordIcon from '@icons/DiscordIcon';
 import GoogleIcon from '@icons/GoogleIcon';
-import LinkedInIcon from '@icons/LinkedInIcon';
 import MailRuIcon from '@icons/MailRuIcon';
 import XIcon from '@icons/XIcon';
 import YandexIcon from '@icons/YandexIcon';
@@ -114,13 +113,6 @@ const LogIn: FC<LogInProps> = ({ setShowLogIn }) => {
             <DiscordIcon />
             {copy.discord}
           </button>
-          <button
-            onClick={() => handleProviderSignIn('linkedin')}
-            className={cn(styles.linkBtn, styles.linkedinBtn)}
-          >
-            <LinkedInIcon />
-            {copy.linkedin}
-          </button>
           <button
             onClick={() => handleProviderSignIn('twitter')}
             className={cn(styles.linkBtn, styles.twitterBtn)}

src/components/SeoGenerator/SeoGenerator.tsx

@@ -307,6 +307,12 @@ const SeoGenerator: FC<SeoGeneratorProps> = ({
         data-key={process.env.NEXT_PUBLIC_AHREFS_ANALYTICS_KEY}
         strategy="afterInteractive"
       />
+      {process.env.NEXT_PUBLIC_TRACKING_URL && (
+        <Script
+          src={process.env.NEXT_PUBLIC_TRACKING_URL}
+          strategy="afterInteractive"
+        />
+      )}
     </>
   );
 };

src/data/auth/en.ts

@@ -4,7 +4,6 @@ const en = {
     subtitle: 'Choose one of the options below',
     google: 'Continue with Google',
     discord: 'Continue with Discord',
-    linkedin: 'Continue with LinkedIn',
     twitter: 'Continue with X',
     mailru: 'Continue with Mail.ru',
     yandex: 'Continue with Yandex',

src/data/auth/ru.ts

@@ -4,7 +4,6 @@ const ru = {
     subtitle: 'Выберите один из способов ниже',
     google: 'Войти через Google',
     discord: 'Войти через Discord',
-    linkedin: 'Войти через LinkedIn',
     twitter: 'Войти через X',
     mailru: 'Войти через Mail.ru',
     yandex: 'Войти через Yandex',

src/lib/widget/pageIdentity.ts

@@ -161,9 +161,9 @@ const EXACT_DEFS: Array<[string, ExactEntry]> = [
       project: 'keepsimple',
       kind: 'utility',
       blurbEn:
-        'Sign-in page (Google / LinkedIn / Discord OAuth) for keepsimple accounts.',
+        'Sign-in page (Google / Discord OAuth) for keepsimple accounts.',
       blurbRu:
-        'Страница входа (Google / LinkedIn / Discord OAuth) для аккаунтов keepsimple.',
+        'Страница входа (Google / Discord OAuth) для аккаунтов keepsimple.',
     },
   ],
   [

src/pages/_document.tsx

@@ -0,0 +1,25 @@
+import Document, { Head, Html, Main, NextScript } from 'next/document';
+
+const themeBootstrap = `(function () {
+  try {
+    var v = localStorage.getItem('darkTheme');
+    if (v === 'true' && document.body) document.body.classList.add('darkTheme');
+  } catch (e) {}
+})();`;
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <script dangerouslySetInnerHTML={{ __html: themeBootstrap }} />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

src/pages/api/auth/[...nextauth].ts

@@ -1,7 +1,6 @@
 import NextAuth from 'next-auth';
 import DiscordProvider from 'next-auth/providers/discord';
 import GoogleProvider from 'next-auth/providers/google';
-import LinkedInProvider from 'next-auth/providers/linkedin';
 import TwitterProvider from 'next-auth/providers/twitter';
 import YandexProvider from 'next-auth/providers/yandex';
 
@@ -14,7 +13,7 @@ const GOOGLE_AUTHORIZATION_URL =
   });
 
 /**
- * Function to refresh access token for Google & LinkedIn
+ * Function to refresh access token for Google & Twitter
  */
 async function refreshAccessToken(token) {
   try {
@@ -29,10 +28,6 @@ async function refreshAccessToken(token) {
       url = 'https://oauth2.googleapis.com/token';
       searchParams.append('client_id', process.env.GOOGLE_CLIENT_ID);
       searchParams.append('client_secret', process.env.GOOGLE_CLIENT_SECRET);
-    } else if (token.provider === 'linkedin') {
-      url = 'https://www.linkedin.com/oauth/v2/accessToken';
-      searchParams.append('client_id', process.env.LINKEDIN_CLIENT_ID);
-      searchParams.append('client_secret', process.env.LINKEDIN_CLIENT_SECRET);
     } else if (token.provider === 'twitter') {
       url = 'https://api.twitter.com/2/oauth2/token';
       searchParams.append('client_id', process.env.TWITTER_CLIENT_ID);
@@ -83,29 +78,6 @@ export default NextAuth({
       clientSecret: process.env.GOOGLE_CLIENT_SECRET,
       authorization: GOOGLE_AUTHORIZATION_URL,
     }),
-    LinkedInProvider({
-      clientId: process.env.LINKEDIN_CLIENT_ID || '',
-      clientSecret: process.env.LINKEDIN_CLIENT_SECRET || '',
-      client: { token_endpoint_auth_method: 'client_secret_post' },
-      issuer: 'https://www.linkedin.com',
-      profile: profile => {
-        return {
-          id: profile?.sub,
-          name:
-            profile.name ||
-            `${profile.localizedFirstName} ${profile.localizedLastName}`,
-          email: profile.email,
-          image: profile.picture,
-        };
-      },
-      wellKnown:
-        'https://www.linkedin.com/oauth/.well-known/openid-configuration',
-      authorization: {
-        params: {
-          scope: 'openid profile email',
-        },
-      },
-    }),
     DiscordProvider({
       clientId: process.env.DISCORD_CLIENT_ID,
       clientSecret: process.env.DISCORD_CLIENT_SECRET,

src/uxcore/components/SeoGenerator/SeoGenerator.tsx

@@ -334,6 +334,12 @@ const SeoGenerator: FC<SeoGeneratorProps> = ({
         data-key={process.env.NEXT_PUBLIC_AHREFS_ANALYTICS_KEY}
         strategy="afterInteractive"
       />
+      {process.env.NEXT_PUBLIC_TRACKING_URL && (
+        <Script
+          src={process.env.NEXT_PUBLIC_TRACKING_URL}
+          strategy="afterInteractive"
+        />
+      )}
     </>
   );
 };

src/uxcore/components/_uxcp/LogInModal/LogInModal.tsx

@@ -10,7 +10,6 @@ import decisionTable from '@uxcore/data/decisionTable';
 
 import DiscordIcon from '@uxcore/assets/icons/DiscordIcon';
 import GoogleIcon from '@uxcore/assets/icons/GoogleIcon';
-import LinkedInIcon from '@uxcore/assets/icons/LinkedInIcon';
 import MailRuIcon from '@uxcore/assets/icons/MailRuIcon';
 import XIcon from '@uxcore/assets/icons/XIcon';
 import YandexIcon from '@uxcore/assets/icons/YandexIcon';
@@ -35,11 +34,9 @@ const LogInModal: FC<LoginModalProps> = ({ setShowModal, source }) => {
   const { locale } = useRouter() as TRouter;
   const { accountData } = useContext(GlobalContext);
   const router = useRouter();
-  const isProduction = process.env.NEXT_PUBLIC_ENV === 'prod';
   const { data: session } = useSession();
   const {
     singInWithGoogle,
-    signInWithLinkedIn,
     signInWithDiscord,
     signInWithTwitter,
     signInWithMailRu,
@@ -95,14 +92,6 @@ const LogInModal: FC<LoginModalProps> = ({ setShowModal, source }) => {
           >
             <GoogleIcon /> <span>{singInWithGoogle}</span>
           </a>
-          {!isProduction && (
-            <a
-              onClick={() => handleProviderSignIn('linkedin', source)}
-              className={styles.link}
-            >
-              <LinkedInIcon /> <span>{signInWithLinkedIn}</span>
-            </a>
-          )}
           <a
             onClick={() => handleProviderSignIn('discord', source)}
             className={styles.link}