feat: support edit link

docs/.island/config.ts

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

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,9 +15,8 @@ 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 = pagePath
-      .replace(siteData.base, '')
-      .replace(/^\//, '');
+    const relativePagePath = getRelativePagePath(path, pagePath, siteData.base);
+    console.log('relativePagePath', relativePagePath);
     return {
       siteData,
       pagePath,

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/index.ts

@@ -95,6 +95,7 @@ export interface LocaleConfig {
 }
 
 export interface SiteData<ThemeConfig = any> {
+  root: string;
   base: string;
   lang: string;
   title: string;

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

@@ -1,29 +1,35 @@
 import styles from './index.module.scss';
 import { usePageData } from 'island/client';
-import { usePrevNextPage } from '../../logic';
+import { useEditLink, usePrevNextPage } from '../../logic';
 
 export function DocFooter() {
-  const { siteData } = usePageData();
+  const { siteData, relativePagePath } = usePageData();
   const { prevPage, nextPage } = usePrevNextPage(siteData);
-  const { editLink } = siteData?.themeConfig || {};
+  const { editLink: rawEditLink } = siteData.themeConfig;
+  const editLink = useEditLink(rawEditLink!, relativePagePath);
+
   return (
     <footer className={styles.footer}>
       <div className={styles.editInfo}>
-        <div className={styles.editLink}>
-          <a className={styles.editLinkButton} href={editLink?.pattern}>
-            {editLink?.text}
-          </a>
-        </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}>

src/theme-default/logic/index.ts

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

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
+  };
+}