Merge pull request #25 from sanyuan0704/feat/support-0-js

feat: support zero js after production build

Author: sanyuan0704

docs/.island/config.ts

@@ -5,6 +5,7 @@ export default defineConfig({
   title: 'Island.js',
   icon: '/island.png',
   themeConfig: {
+    outlineTitle: 'ON THIS PAGE',
     socialLinks: [
       {
         icon: 'github',

src/node/build.ts

@@ -272,7 +272,9 @@ class SSGBuilder {
       ${
         this.#config.enableSpa
           ? `<script type="module" src="/${clientChunk.fileName}"></script>`
-          : `<script type="module">${clientChunk.code}</script>`
+          : hasIsland
+          ? `<script type="module">${clientChunk.code}</script>`
+          : ''
       }
     </body>
   </html>`.trim();

src/node/config.ts

@@ -60,10 +60,10 @@ export function resolveSiteData(
     themeConfig: userConfig.themeConfig || {},
     head: userConfig.head || [],
     base: userConfig.base || '/',
-    scrollOffset: userConfig.scrollOffset || 90,
     locales: userConfig.locales || {},
     icon: userConfig.icon || '',
-    root
+    root,
+    appearance: userConfig.appearance ?? true
   };
 }
 
@@ -91,10 +91,10 @@ export async function resolveConfig(
     configPath,
     configDeps,
     tempDir: resolve(root, 'node_modules', '.island'),
-    vite: userConfig.vite || {},
-    allowDeadLinks: userConfig.allowDeadLinks || false,
+    vite: userConfig.vite ?? {},
+    allowDeadLinks: userConfig.allowDeadLinks ?? false,
     siteData: resolveSiteData(userConfig, root),
-    enableSpa: userConfig.enableSpa || false
+    enableSpa: userConfig.enableSpa ?? false
   };
 
   return siteConfig;

src/shared/types/default-theme.ts

@@ -22,7 +22,10 @@ export namespace DefaultTheme {
      * @default 'On this page'
      */
     outlineTitle?: string;
-
+    /**
+     * Whether to show the sidebar in right position.
+     */
+    outline: boolean;
     /**
      * The nav items.
      */

src/shared/types/index.ts

@@ -79,9 +79,9 @@ export interface UserConfig<ThemeConfig = any> {
    */
   allowDeadLinks?: boolean;
   /**
-   * Whether to fail builds when there are dead links.
+   * Whether dark mode/light mode toggle button is displayed.
    */
-  scrollOffset?: string | number;
+  appearance?: boolean;
 }
 
 export interface LocaleConfig {
@@ -103,8 +103,8 @@ export interface SiteData<ThemeConfig = any> {
   icon: string;
   head: HeadConfig[];
   themeConfig: ThemeConfig;
-  scrollOffset: number | string;
   locales: Record<string, LocaleConfig>;
+  appearance: boolean;
   // TODO: Available languages
   // langs: Record<string, { lang: string; label: string }>;
 }

src/theme-default/components/Aside/index.tsx

@@ -4,7 +4,11 @@ import { ComponentPropsWithIsland, Header } from 'shared/types/index';
 import { useAsideAnchor } from '../../logic';
 
 export function Aside(
-  props: ComponentPropsWithIsland<{ headers: Header[]; pagePath: string }>
+  props: ComponentPropsWithIsland<{
+    headers: Header[];
+    pagePath: string;
+    outlineTitle: string;
+  }>
 ) {
   const [headers, setHeaders] = useState(props.headers || []);
   // For outline text highlight
@@ -52,7 +56,7 @@ export function Aside(
       <div className={styles.docsAsideOutline}>
         <div className={styles.content} ref={asideRef}>
           <div className={styles.outlineMarker} ref={markerRef}></div>
-          <div className={styles.outlineTitle}>ON THIS PAGE</div>
+          <div className={styles.outlineTitle}>{props.outlineTitle}</div>
           <nav>
             <ul className={styles.root}>{headers.map(renderHeader)}</ul>
           </nav>

src/theme-default/components/Nav/index.tsx

@@ -15,6 +15,7 @@ const IconMap = {
 export function Nav() {
   const { siteData, pageType } = usePageData();
   const hasSidebar = pageType === 'doc';
+  const hasAppearanceSwitch = siteData.appearance !== false;
   const menuItems = siteData?.themeConfig?.nav || [];
   const socialLinks = siteData?.themeConfig?.socialLinks || [];
   const location = useLocation();
@@ -60,9 +61,11 @@ export function Nav() {
           <div className={styles.content}>
             <div className={styles.search}>{/* <Search /> */}</div>
             <div className={styles.menu}>{renderMenuList()}</div>
-            <div className={styles.appearance}>
-              <SwitchAppearance __island />
-            </div>
+            {hasAppearanceSwitch && (
+              <div className={styles.appearance}>
+                <SwitchAppearance __island />
+              </div>
+            )}
             <div className={styles.socialLinks}>
               <div className={styles.socialLink}>
                 {socialLinks.map((item) => {

src/theme-default/layout/DocLayout/index.tsx

@@ -7,13 +7,15 @@ import { Content, usePageData } from 'island/client';
 
 export function DocLayout() {
   const data = usePageData();
+  const themeConfig = data.siteData.themeConfig;
   const headers = data?.toc || [];
-  const sidebar = data?.siteData?.themeConfig?.sidebar || [];
+  const sidebar = themeConfig?.sidebar || [];
   const hasSidebar =
     (Array.isArray(sidebar) && sidebar.length > 0) ||
     Object.keys(sidebar).length > 0;
+  const outlineTitle = themeConfig?.outlineTitle || 'ON THIS PAGE';
 
-  const hasAside = headers.length > 0;
+  const hasAside = headers.length > 0 && themeConfig.outline !== false;
   return (
     <div className={styles.doc}>
       <div className={styles.sideBar}>{hasSidebar ? <SideBar /> : null}</div>
@@ -35,7 +37,12 @@ export function DocLayout() {
           <div className={styles.asideContainer}>
             <div className={styles.asideContent}>
               {hasAside ? (
-                <Aside __island headers={headers} pagePath={data.pagePath} />
+                <Aside
+                  __island
+                  headers={headers}
+                  outlineTitle={outlineTitle}
+                  pagePath={data.pagePath}
+                />
               ) : null}
             </div>
           </div>