chore(contented-preview): remove uncessary files

packages/contented-preview/src/pages/_app.page.jsx

@@ -15,7 +15,9 @@ export default function App({ Component, pageProps }) {
       <ThemeProvider>
         <MenuProvider>
           <Header />
-          <Component {...pageProps} />
+          <main className="bg-white text-gray-900 dark:bg-slate-900 dark:text-slate-300">
+            <Component {...pageProps} />
+          </main>
         </MenuProvider>
       </ThemeProvider>
     </>

packages/contented-preview/src/pages/_components/ContentNavigation.jsx

@@ -75,7 +75,9 @@ export default function ContentNavigation({ sections, className }) {
           <div className="mt-1 flex gap-4">
             {pipelines.map(([type, pipeline]) => {
               if (pipeline.collection[0] === undefined || pipeline.collection[0] === null) {
-                throw new PipelineCollectionNotFoundException(type);
+                throw new Error(
+                  `Pipeline type '${type}' cannot resolve its collection. Please check if contented.config.mjs is properly configured.`,
+                );
               }
               return (
                 <Link href={`/${type.toLowerCase()}${pipeline.collection[0].path}`} key={type}>

packages/contented-preview/src/pages/_components/Header.jsx

@@ -1,11 +1,10 @@
-import { Bars3Icon, DocumentTextIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { Bars3Icon, DocumentTextIcon, MoonIcon, SunIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Link from 'next/link';
 
 import { Pipelines } from '../../../../index.js';
-import { PipelineCollectionNotFoundException } from '../../errors/PipelineCollectionNotFoundException.js';
 import { useMenu } from './MenuContext';
-import ThemeButton from './ThemeButton';
+import { useTheme } from './ThemeContext';
 
 export default function Header() {
   const { isOpen, setIsOpen } = useMenu();
@@ -37,7 +36,9 @@ export default function Header() {
               <div className="ml-6 hidden border-l border-slate-300/60 pl-4 dark:border-slate-300/10 md:flex">
                 {pipelines.map(([type, pipeline]) => {
                   if (pipeline.collection[0] === undefined || pipeline.collection[0] === null) {
-                    throw new PipelineCollectionNotFoundException(type);
+                    throw new Error(
+                      `Pipeline type '${type}' cannot resolve its collection. Please check if contented.config.mjs is properly configured.`,
+                    );
                   }
                   return (
                     <Link href={`/${type.toLowerCase()}${pipeline.collection[0].path}`} key={type}>
@@ -71,7 +72,7 @@ export default function Header() {
   );
 }
 
-export function GitHubButton(props) {
+function GitHubButton(props) {
   return (
     <div {...props}>
       <a className="flex items-center" href={process.env.CONTENTED_PREVIEW_GITHUB_URL} target="_blank">
@@ -82,3 +83,18 @@ export function GitHubButton(props) {
     </div>
   );
 }
+
+function ThemeButton(props) {
+  const { setTheme } = useTheme();
+
+  return (
+    <div {...props}>
+      <button className="flex items-center">
+        <SunIcon className="hidden h-4 w-4 [[data-theme=light]_&]:block" onClick={() => setTheme('dark')} />
+        <MoonIcon className="hidden h-4 w-4 [[data-theme=dark]_&]:block" onClick={() => setTheme('light')} />
+        <SunIcon className="hidden h-4 w-4 [:not(.dark)[data-theme=system]_&]:block" onClick={() => setTheme('dark')} />
+        <MoonIcon className="hidden h-4 w-4 [.dark[data-theme=system]_&]:block" onClick={() => setTheme('light')} />
+      </button>
+    </div>
+  );
+}

packages/contented-preview/src/pages/_components/ThemeContext.jsx

@@ -1,4 +1,59 @@
 import { createContext, useState, useEffect, useContext } from 'react';
+import Script from 'next/script';
+
+/*
+let mQ = window.matchMedia('(prefers-color-scheme: dark)');
+let dE = document.documentElement;
+let dEC = dE.classList;
+
+function update(savedTheme) {
+  let theme = 'system'
+  try {
+    if (!savedTheme) {
+      savedTheme = window.localStorage.theme
+    }
+    if (savedTheme === 'dark') {
+      theme = 'dark'
+      dEC.add('dark')
+    } else if (savedTheme === 'light') {
+      theme = 'light'
+      dEC.remove('dark')
+    } else if (mQ.matches) {
+      dEC.add('dark')
+    } else {
+      dEC.remove('dark')
+    }
+  } catch {
+    theme = 'light'
+    dEC.remove('dark')
+  }
+  return theme
+}
+
+function updateWT(savedTheme) {
+  update(savedTheme)
+  dEC.add('[&_*]:!transition-none')
+  window.setTimeout(() => {
+    dEC.remove('[&_*]:!transition-none')
+  }, 0)
+}
+
+dE.setAttribute('data-theme', update())
+
+new MutationObserver(([{ oldValue }]) => {
+  let newValue = dE.getAttribute('data-theme')
+  if (newValue !== oldValue) {
+    try {
+      window.localStorage.setItem('theme', newValue)
+    } catch {}
+    updateWT(newValue)
+  }
+}).observe(dE, { attributeFilter: ['data-theme'], attributeOldValue: true })
+
+mQ.addEventListener('change', updateWT)
+window.addEventListener('storage', updateWT)
+ */
+const colorSchemeScript = `let mQ=window.matchMedia("(prefers-color-scheme: dark)"),dE=document.documentElement,dEC=dE.classList;function update(e){let t="system";try{e||(e=window.localStorage.theme),"dark"===e?(t="dark",dEC.add("dark")):"light"===e?(t="light",dEC.remove("dark")):mQ.matches?dEC.add("dark"):dEC.remove("dark")}catch{t="light",dEC.remove("dark")}return t}function updateWT(e){update(e),dEC.add("[&_*]:!transition-none"),window.setTimeout((()=>{dEC.remove("[&_*]:!transition-none")}),0)}dE.setAttribute("data-theme",update()),new MutationObserver((([{oldValue:e}])=>{let t=dE.getAttribute("data-theme");if(t!==e){try{window.localStorage.setItem("theme",t)}catch{}updateWT(t)}})).observe(dE,{attributeFilter:["data-theme"],attributeOldValue:!0}),mQ.addEventListener("change",updateWT),window.addEventListener("storage",updateWT);`;
 
 const ThemeContext = createContext(undefined);
 
@@ -13,7 +68,12 @@ export function ThemeProvider(props) {
     }
   }, [theme]);
 
-  return <ThemeContext.Provider value={{ theme, setTheme }}>{props.children}</ThemeContext.Provider>;
+  return (
+    <>
+      <ThemeContext.Provider value={{ theme, setTheme }}>{props.children}</ThemeContext.Provider>
+      <Script id="theme-script" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: colorSchemeScript }} />
+    </>
+  );
 }
 
 export function useTheme() {