Merge pull request #20 from sanyuan0704/feat/island-dev

feat: support prev and next page

Author: sanyuan0704

CHANGELOG.md

@@ -1,5 +1,24 @@
 
 
+## [0.1.3](https://github.com/sanyuan0704/island.js/compare/0.1.2...0.1.3) (2022-09-19)
+
+
+### Bug Fixes
+
+* aside marker opacity problem ([647cc47](https://github.com/sanyuan0704/island.js/commit/647cc47c6e159b36337ca999d6b8abc7ff448112))
+* normalize prev and next page link ([8b3f0bb](https://github.com/sanyuan0704/island.js/commit/8b3f0bbf304223130847eeb8218f57f1b265e816))
+* postfix in md link ([bb779e6](https://github.com/sanyuan0704/island.js/commit/bb779e63bc66dd26714d60f3f7573bf33c24aa58))
+* remove hard code image in hero component ([2bd354f](https://github.com/sanyuan0704/island.js/commit/2bd354f6abd0adb1de4e37764898de7a87940231))
+* sidebar active invalid ([4be2c90](https://github.com/sanyuan0704/island.js/commit/4be2c90d230967e534eaa1ffda7c1031246dd805))
+
+
+### Features
+
+* add architecture doc ([d31999d](https://github.com/sanyuan0704/island.js/commit/d31999d3b24b6125f859d642dcd9c5bca5904683))
+* add configure-site doc ([f22c3a6](https://github.com/sanyuan0704/island.js/commit/f22c3a67c62bcf7053ba5abdd0aa459388c85416))
+* support edit link ([85248c6](https://github.com/sanyuan0704/island.js/commit/85248c62af7d3623f03e27cf53f78d272ced79e1))
+* support prev and next page in doc footer ([6150d39](https://github.com/sanyuan0704/island.js/commit/6150d39781539a838d0c346c7050bc373b4b6d8a))
+
 ## [0.1.2](https://github.com/sanyuan0704/island.js/compare/0.1.1...0.1.2) (2022-09-18)
 
 

docs/.island/config.ts

@@ -12,7 +12,11 @@ export default defineConfig({
       }
     ],
     lastUpdatedText: 'Last Updated',
-    editLink: '',
+    editLink: {
+      pattern:
+        'https://github.com/sanyuan0704/island.js/tree/master/docs/:path',
+      text: '📝 Edit this page on GitHub'
+    },
     nav: [
       {
         text: 'Guide',

docs/guide/islands-arch.md

@@ -12,7 +12,7 @@ As the name suggests, we can image the whole page as a sea of static, and the in
 
 Then the hydration process will only be executed on the islands, which will make the first page load performance and TTI(time to interactive) better because it only needs partial client script that is correspond to the interactive parts.
 
-## How to implement it?
+## Implement details in Island.js
 
 The implementation of this architecture includes three parts: `server runtime`、`build time` and `client runtime`.
 
@@ -28,7 +28,7 @@ export function Layout() {
 }
 ```
 
-You only need to add a `__island` prop to the component anywhere you use it, and then the component will automatically be identified as a island component.Then, island.js will only inject the client script of this component and its props when it is rendered on the client.
+You only need to add a `__island` prop to the component when you use it, and then the component will automatically be identified as a island component.Island.js will only inject the client script of island components as well as their props when they are rendered on the client.
 
 ### Internal Implement
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "islandjs",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Vite & Islands architecture SSG framework",
   "main": "dist/index.js",
   "packageManager": "[email protected]",

src/node/config.ts

@@ -49,7 +49,10 @@ export async function resolveUserConfig(
   }
 }
 
-export function resolveSiteData(userConfig: UserConfig): SiteData {
+export function resolveSiteData(
+  userConfig: UserConfig,
+  root: string
+): SiteData {
   return {
     lang: userConfig.lang || 'en-US',
     title: userConfig.title || 'Island',
@@ -59,7 +62,8 @@ export function resolveSiteData(userConfig: UserConfig): SiteData {
     base: userConfig.base || '/',
     scrollOffset: userConfig.scrollOffset || 90,
     locales: userConfig.locales || {},
-    icon: userConfig.icon || ''
+    icon: userConfig.icon || '',
+    root
   };
 }
 
@@ -89,7 +93,7 @@ export async function resolveConfig(
     tempDir: resolve(root, 'node_modules', '.island'),
     vite: userConfig.vite || {},
     allowDeadLinks: userConfig.allowDeadLinks || false,
-    siteData: resolveSiteData(userConfig),
+    siteData: resolveSiteData(userConfig, root),
     enableSpa: userConfig.enableSpa || false
   };
 

src/runtime/app.tsx

@@ -3,7 +3,7 @@ import { routes } from 'virtual:routes';
 import { matchRoutes, useLocation } from 'react-router-dom';
 import siteData from 'island:site-data';
 import { Route } from '../node/plugin-routes';
-import { cleanUrl, omit } from './utils';
+import { cleanUrl, getRelativePagePath, omit } from './utils';
 import { PageData } from '../shared/types';
 import { HelmetProvider } from 'react-helmet-async';
 import { useContext, useLayoutEffect } from 'react';
@@ -15,15 +15,19 @@ export async function waitForApp(path: string): Promise<PageData> {
     // Preload route component
     const mod = await (matched[0].route as Route).preload();
     const pagePath = cleanUrl((matched[0].route as Route).filePath);
+    const relativePagePath = getRelativePagePath(path, pagePath, siteData.base);
+    console.log('relativePagePath', relativePagePath);
     return {
       siteData,
       pagePath,
+      relativePagePath,
       ...omit(mod, ['default'])
     } as PageData;
   } else {
     return {
       siteData,
       pagePath: '',
+      relativePagePath: '',
       pageType: '404'
     };
   }

src/runtime/utils.ts

@@ -13,3 +13,19 @@ export const hashRE = /#.*$/s;
 
 export const cleanUrl = (url: string): string =>
   url.replace(hashRE, '').replace(queryRE, '');
+
+export const getRelativePagePath = (
+  routePath: string,
+  filePath: string,
+  base: string
+) => {
+  const extname = filePath.split('.').pop();
+  let pagePath = cleanUrl(routePath);
+  if (pagePath.startsWith(base)) {
+    pagePath = pagePath.slice(base.length);
+  }
+  if (extname) {
+    pagePath += `.${extname}`;
+  }
+  return pagePath.replace(/^\//, '');
+};

src/shared/types/default-theme.ts

@@ -167,14 +167,14 @@ export namespace DefaultTheme {
      *
      * @default 'Previous page'
      */
-    prev?: string;
+    prev?: SidebarItem;
 
     /**
      * Custom label for next page button.
      *
      * @default 'Next page'
      */
-    next?: string;
+    next?: SidebarItem;
   }
 
   // social link ---------------------------------------------------------------

src/shared/types/index.ts

@@ -95,6 +95,7 @@ export interface LocaleConfig {
 }
 
 export interface SiteData<ThemeConfig = any> {
+  root: string;
   base: string;
   lang: string;
   title: string;
@@ -151,6 +152,7 @@ export interface PageModule<T extends ComponentType<any>> {
 export interface PageData {
   siteData: SiteData<DefaultTheme.Config>;
   pagePath: string;
+  relativePagePath: string;
   title?: string;
   description?: string;
   pageType: 'home' | 'doc' | 'custom' | '404';

src/shared/types/type.d.ts

@@ -16,13 +16,15 @@ declare module 'island/theme*' {
 }
 
 declare module 'island:site-data' {
-  export default any;
+  import { SiteData } from 'shared/types';
+  const siteData: SiteData;
+  export default siteData;
 }
 
 
 declare module 'island/client' {
   import { ComponentType } from 'react';
-  import { PageData } from 'shared/types';
+  import { PageData, SiteData } from 'shared/types';
 
   export const Content: ComponentType<any>;
   export const usePageData: () => PageData;
@@ -41,6 +43,7 @@ declare module 'island/jsx-runtime' {
 
 declare module 'virtual:routes' {
   import { Route } from 'react-router-dom';
+import { SiteData } from './index';
 
   export const routes: Route[];
 }

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

@@ -1,37 +1,62 @@
 import styles from './index.module.scss';
 import { usePageData } from 'island/client';
+import { useEditLink, usePrevNextPage } from '../../logic';
+import { normalizeHref } from '../../logic/index';
 
 export function DocFooter() {
-  const { siteData } = usePageData();
-  const { editLink } = siteData?.themeConfig || {};
+  const { siteData, relativePagePath } = usePageData();
+  const { prevPage, nextPage } = usePrevNextPage(siteData);
+  const { editLink: rawEditLink } = siteData.themeConfig;
+  const editLink = useEditLink(rawEditLink!, relativePagePath);
+
   return (
     <footer className={styles.footer}>
       <div className={styles.editInfo}>
-        <div className={styles.editLink}>
-          <button className={styles.editLinkButton}>Edit Link</button>
-        </div>
-        <div className={styles.lastUpdated}>
-          {editLink ? (
+        {editLink ? (
+          <div className={styles.editLink}>
+            <a className={styles.editLinkButton} href={editLink.link}>
+              {editLink.text}
+            </a>
+          </div>
+        ) : null}
+
+        {/* TODO */}
+        {/* <div className={styles.lastUpdated}>
+          {lastUpdatedText ? (
             <>
               <p className={styles.lastUpdated}>
                 {editLink?.text || 'Last Updated: '}
               </p>
-              <span>{editLink?.pattern}</span>
+              <span>{}</span>
             </>
           ) : null}
-        </div>
+        </div> */}
       </div>
 
       <div className={styles.prevNext}>
         <div className={styles.pager}>
-          <a href="/" className={`${styles.pagerLink} ${styles.prev}`}>
-            <span className={styles.desc}>Previous Page</span>
-          </a>
+          {prevPage ? (
+            <a
+              href={normalizeHref(prevPage.link)}
+              className={`${styles.pagerLink} ${styles.prev}`}
+            >
+              <span className={styles.desc}>Previous Page</span>
+              <span className={styles.title}>{prevPage.text}</span>
+            </a>
+          ) : null}
         </div>
-        <div className={`${styles.pager} ${styles.hasNext}`}>
-          <a href="/" className={`${styles.pagerLink} ${styles.next}`}>
-            <span className={styles.desc}>Next Page</span>
-          </a>
+        <div className={styles.pager}>
+          {nextPage ? (
+            <div className={`${styles.hasNext}`}>
+              <a
+                href={normalizeHref(nextPage.link)}
+                className={`${styles.pagerLink} ${styles.next}`}
+              >
+                <span className={styles.desc}>Next Page</span>
+                <span className={styles.title}>{nextPage.text}</span>
+              </a>
+            </div>
+          ) : null}
         </div>
       </div>
     </footer>

src/theme-default/logic/index.ts

@@ -16,3 +16,5 @@ export function normalizeHref(url?: string) {
 }
 
 export { useAsideAnchor } from './useAsideAnchor';
+export { usePrevNextPage } from './usePrevNextPage';
+export { useEditLink } from './useEditLink';

src/theme-default/logic/useAsideAnchor.ts

@@ -35,7 +35,6 @@ export function useAsideAnchor(
     }
     // Util function to set dom ref after determining the active link
     const activate = (links: NodeListOf<HTMLAnchorElement>, index: number) => {
-      console.log('current active: ', index);
       if (prevActiveLinkRef.current) {
         prevActiveLinkRef.current.classList.remove('aside-active');
       }

src/theme-default/logic/useEditLink.ts

@@ -0,0 +1,16 @@
+import { DefaultTheme } from 'shared/types';
+export function useEditLink(
+  editLink: DefaultTheme.EditLink,
+  relativePagePath: string
+) {
+  if (!editLink) {
+    return null;
+  }
+  const { text, pattern } = editLink;
+  const link = pattern.replace(':path', relativePagePath);
+
+  return {
+    text,
+    link
+  };
+}

src/theme-default/logic/usePrevNextPage.ts

@@ -0,0 +1,35 @@
+import { DefaultTheme, SiteData } from 'shared/types';
+import { useLocation } from 'react-router-dom';
+
+export function usePrevNextPage(siteData: SiteData<DefaultTheme.Config>) {
+  const themeConfig = siteData.themeConfig || {};
+  const sidebar = themeConfig.sidebar || [];
+  const flattenTitles: DefaultTheme.SidebarItem[] = [];
+  const { pathname } = useLocation();
+
+  const walkThroughSidebar = (sidebar: DefaultTheme.Sidebar) => {
+    if (Array.isArray(sidebar)) {
+      sidebar.forEach((sidebarGroup) => {
+        sidebarGroup.items.forEach((item) => {
+          flattenTitles.push(item);
+        });
+      });
+    } else {
+      Object.keys(sidebar).forEach((key) => {
+        walkThroughSidebar(sidebar[key]);
+      });
+    }
+  };
+
+  walkThroughSidebar(sidebar);
+
+  const pageIndex = flattenTitles.findIndex((item) => item.link === pathname);
+
+  const prevPage = flattenTitles[pageIndex - 1] || null;
+  const nextPage = flattenTitles[pageIndex + 1] || null;
+
+  return {
+    prevPage,
+    nextPage
+  };
+}