feat: Refactor layouts in www

services/static/rsbuild.config.ts

@@ -1,4 +1,5 @@
 import { defineServiceConfig, discoverEntries } from '@ermnvldmr/rsbuild-config/dev';
+import { THEME_INIT_SCRIPT, THEME_INIT_STYLES } from '@ermnvldmr/ui/dev';
 
 export default defineServiceConfig({
   source: {
@@ -6,5 +7,17 @@ export default defineServiceConfig({
   },
   html: {
     title: 'Static Content',
+    tags: [
+      {
+        tag: 'script',
+        children: THEME_INIT_SCRIPT,
+        head: true,
+      },
+      {
+        tag: 'style',
+        children: THEME_INIT_STYLES,
+        head: true,
+      },
+    ],
   },
 });

services/static/src/components/layouts/IndexLayout/IndexLayout.tsx

@@ -1,4 +1,4 @@
-import { Container, HStack, ThemeSwitch, useTheme, VStack, Text, Separator } from '@ermnvldmr/ui';
+import { Container, HStack, ThemeSwitch, VStack, Text, Separator, PageRoot } from '@ermnvldmr/ui';
 import React from 'react';
 
 /**
@@ -13,7 +13,6 @@ export interface IndexLayoutProps {
  * The root layout for the static service.
  *
  * @param props - The component props.
- * @param props.children - Main content slot.
  * @returns A React element representing the index layout.
  * @example
  * ```tsx
@@ -21,19 +20,11 @@ export interface IndexLayoutProps {
  * ```
  */
 export function IndexLayout({ children }: IndexLayoutProps): React.JSX.Element {
-  // Initialize theme side-effects
-  useTheme();
-
   const currentYear = new Date().getFullYear();
 
   return (
-    <VStack
-      className="min-h-screen bg-[var(--rb-background)] transition-colors duration-200"
-      justify="between"
-    >
-      <VStack as="main" className="min-h-[105vh] w-full flex-1">
-        {children}
-      </VStack>
+    <PageRoot className="flex flex-col justify-between">
+      <main className="flex-1 w-full">{children}</main>
       <VStack as="footer" className="w-full" gap={0}>
         <Separator thinned="none" />
         <Container className="w-full" padding={12}>
@@ -47,6 +38,6 @@ export function IndexLayout({ children }: IndexLayoutProps): React.JSX.Element {
           </HStack>
         </Container>
       </VStack>
-    </VStack>
+    </PageRoot>
   );
 }

services/static/src/static/global.css

@@ -1,2 +1,2 @@
 @import '../../../../packages/ui/src/static/styles.css';
-@source "../../../../packages/ui/src/components";
+@source '../../../../packages/ui/src/components';

services/static/src/static/index.html

@@ -1,18 +1,6 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <script>
-      (function () {
-        try {
-          var k = 'ermnvldmr/ui/lib/theme';
-          var p = JSON.parse(localStorage.getItem(k) || '"system"');
-          var d =
-            p === 'dark' ||
-            (p === 'system' && window.matchMedia('(prefers-color-scheme:dark)').matches);
-          document.documentElement.classList.toggle('dark', d);
-        } catch (e) {}
-      })();
-    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vladimir Eremin</title>