feat: support different page type

sanyuan0704 · Sep 12, 2022 · 604ef16 · 604ef16
1 parent 62461b0
commit 604ef16
Show file tree

Hide file tree

Showing 14 changed files with 108 additions and 97 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022-present, YangXingyuan
+Copyright (c) 2022-present, Sanyuan0704
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/docs/src/index.md b/docs/src/index.md
@@ -0,0 +1,25 @@
+---
+pageType: 'home'
+
+title: Island SSG
+
+hero:
+  name: Island
+  text: Vite & React Powered Static Site Generator
+  tagline: Simple, powerful, and performant. Meet the modern SSG framework you've always wanted.
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/getting-started
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/sanyuan0704/island
+
+features:
+  - title: "Vite: The DX that can't be beat"
+    details: With Markdown-centered content, it's built to help you focus on writing and deployed with minimum configuration.
+    icon: 🚀
+  - title: "Vite: The DX that can't be beat"
+    details: With Markdown-centered content, it's built to help you focus on writing and deployed with minimum configuration.
+    icon: 🚀
+---
diff --git a/docs/src/index.mdx b/docs/src/index.mdx
diff --git a/src/client/theme-default/components/Button/index.module.scss b/src/client/theme-default/components/Button/index.module.scss
@@ -60,21 +60,3 @@
   color: var(--island-button-alt-active-text);
   background-color: var(--island-button-alt-active-bg);
 }
-
-.button.sponsor {
-  border-color: var(--island-button-sponsor-border);
-  color: var(--island-button-sponsor-text);
-  background-color: var(--island-button-sponsor-bg);
-}
-
-.button.sponsor:hover {
-  border-color: var(--island-button-sponsor-hover-border);
-  color: var(--island-button-sponsor-hover-text);
-  background-color: var(--island-button-sponsor-hover-bg);
-}
-
-.button.sponsor:active {
-  border-color: var(--island-button-sponsor-active-border);
-  color: var(--island-button-sponsor-active-text);
-  background-color: var(--island-button-sponsor-active-bg);
-}
diff --git a/src/client/theme-default/components/DocFooter/index.tsx b/src/client/theme-default/components/DocFooter/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './index.module.scss';
 
 export function DocFooter() {

diff --git a/src/client/theme-default/components/HomeFeatures/index.module.scss b/src/client/theme-default/components/HomeFeatures/index.module.scss
@@ -30,7 +30,6 @@
 
 .item {
   padding: 8px;
-  width: 100%;
 }
 
 @media (min-width: 640px) {
@@ -73,13 +72,13 @@
   align-items: center;
   margin-bottom: 20px;
   border-radius: 6px;
-  background-color: var(--island-c-gray-light-4);
   width: 48px;
   height: 48px;
   font-size: 24px;
+  background-color: var(--island-c-gray-light-4);
 }
 
-.dark .icon {
+:global(.dark) .icon {
   background-color: var(--island-c-bg);
 }
 

diff --git a/src/client/theme-default/components/HomeFeatures/index.tsx b/src/client/theme-default/components/HomeFeatures/index.tsx
@@ -1,77 +1,40 @@
-import React from 'react';
 import styles from './index.module.scss';
-
-interface Feature {
-  icon: string;
-  title: string;
-  detail: string;
-}
+import { usePageData } from 'island/client';
 
 const getGridClass = (count: number) => {
   if (!count) {
     return '';
   } else if (count === 2) {
-    return 'grid-2';
+    return 'grid2';
   } else if (count === 3) {
-    return 'grid-3';
+    return 'grid3';
   } else if (count % 3 === 0) {
-    return 'grid-4';
+    return 'grid4';
   } else if (count % 2 === 0) {
-    return 'grid-6';
+    return 'grid6';
   }
 };
 
-export function HomeFeature(props: { features: Feature[] }) {
-  const features: Feature[] = [
-    {
-      icon: '⚡️',
-      title: '极速渲染',
-      detail: '基于孤岛架构，拥有极致的渲染性能'
-    },
-    {
-      icon: '⚡️',
-      title: '极速渲染',
-      detail: '基于孤岛架构，拥有极致的渲染性能'
-    },
-    {
-      icon: '⚡️',
-      title: '极速渲染',
-      detail: '基于孤岛架构，拥有极致的渲染性能'
-    },
-    {
-      icon: '⚡️',
-      title: '极速渲染',
-      detail: '基于孤岛架构，拥有极致的渲染性能'
-    },
-    {
-      icon: '⚡️',
-      title: '极速渲染',
-      detail: '基于孤岛架构，拥有极致的渲染性能'
-    },
-    {
-      icon: '⚡️',
-      title: '极速渲染',
-      detail: '基于孤岛架构，拥有极致的渲染性能'
-    }
-  ];
+export function HomeFeature() {
+  const { features } = usePageData();
   const gridClass = getGridClass(features.length);
   return (
     <div className={styles.features}>
       <div className={styles.container}>
         <div className={styles.items}>
           {features.map((feature) => {
-            const { icon, title, detail } = feature;
+            const { icon, title, details } = feature;
             return (
               <div
                 key={title}
-                className={`${styles.item}  ${
+                className={`${styles.item} ${
                   gridClass ? styles[gridClass] : ''
                 }`}
               >
-                <article key={title} className={`${styles.feature}`}>
+                <article key={title} className={styles.feature}>
                   <div className={styles.icon}>{icon}</div>
                   <h2 className={styles.title}>{title}</h2>
-                  <p className={styles.detail}>{detail}</p>
+                  <p className={styles.detail}>{details}</p>
                 </article>
               </div>
             );

diff --git a/src/client/theme-default/components/HomeHero/index.tsx b/src/client/theme-default/components/HomeHero/index.tsx
@@ -1,27 +1,35 @@
-import React from 'react';
+import { usePageData } from 'island/client';
 import { Button } from '../Button';
 import styles from './index.module.scss';
 import logo from './island.png';
 
 export function HomeHero() {
+  const { hero } = usePageData();
   return (
-    <div className={`${styles.hero} ${styles['hasImage']}`}>
+    <div className={`${styles.hero} ${styles.hasImage}`}>
       <div className={styles.container}>
         <div className={styles.main}>
           <h1 className={styles.name}>
-            <span className={styles.clip}>Island</span>
+            <span className={styles.clip}>{hero.name}</span>
           </h1>
-          <p className={styles.text}>基于 Vite 的 SSG 框架</p>
-          <p className={styles.tagline}>提供极致的渲染性能</p>
+          <p className={styles.text}>{hero.text}</p>
+          <p className={styles.tagline}>{hero.tagline}</p>
           <div className={styles.actions}>
-            <div className={styles.action}>
-              <Button type="a" text="点击开始" href="/"></Button>
-            </div>
+            {hero.actions.map((action) => (
+              <div className={styles.action}>
+                <Button
+                  type="a"
+                  text={action.text}
+                  href={action.link}
+                  theme={action.theme}
+                ></Button>
+              </div>
+            ))}
           </div>
         </div>
         <div className={styles.image}>
-          <div className={styles['image-container']}>
-            <div className={styles['image-bg']} />
+          <div className={styles.imageContainer}>
+            <div className={styles.imageBg} />
             <img src={logo} alt="" />
           </div>
         </div>

diff --git a/src/client/theme-default/components/Nav/index.tsx b/src/client/theme-default/components/Nav/index.tsx
@@ -8,6 +8,7 @@ import { useLocation } from 'react-router-dom';
 import { usePageData } from 'island/client';
 interface NavBarProps {
   nav: DefaultTheme.NavItem[];
+  hasSidebar: boolean;
 }
 
 export function NavBar(props: NavBarProps) {
@@ -35,7 +36,11 @@ export function NavBar(props: NavBarProps) {
   return (
     <div className={styles.navBar}>
       <div className={`${styles.container}`}>
-        <div className={`${styles.navBarTitle} ${styles.hasSidebar}`}>
+        <div
+          className={`${styles.navBarTitle} ${
+            props.hasSidebar ? styles.hasSidebar : ''
+          }`}
+        >
           <a href="/" className={styles.title}>
             <span className={styles.logo}>🏝️</span>
             <span>Island</span>
@@ -63,11 +68,12 @@ export function NavBar(props: NavBarProps) {
 }
 
 export function Nav() {
-  const { siteData } = usePageData();
+  const { siteData, pageType } = usePageData();
   const nav = siteData.themeConfig.nav || [];
+  const hasSidebar = pageType === 'doc';
   return (
     <header className={styles.nav}>
-      <NavBar nav={nav} />
+      <NavBar nav={nav} hasSidebar={hasSidebar} />
     </header>
   );
 }
diff --git a/src/client/theme-default/layout/HomeLayout/index.tsx b/src/client/theme-default/layout/HomeLayout/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { HomeHero } from '../../components/HomeHero/index';
 import { HomeFeature } from '../../components/HomeFeatures/index';
 import { Footer } from '../../components/HomeFooter/index';
@@ -7,7 +6,7 @@ export function HomeLayout() {
   return (
     <div>
       <HomeHero />
-      <HomeFeature features={[]} />
+      <HomeFeature />
       <Footer />
     </div>
   );

diff --git a/src/client/theme-default/layout/Layout/index.tsx b/src/client/theme-default/layout/Layout/index.tsx
@@ -1,14 +1,25 @@
 import React from 'react';
-// import { HomeLayout } from '../HomeLayout';
+import { HomeLayout } from '../HomeLayout';
 import { Nav } from '../../components/Nav';
 import { DocLayout } from '../DocLayout';
+import { usePageData } from 'island/client';
 
 export const Layout: React.FC = () => {
+  const { pageType } = usePageData();
+  // Use doc layout by default
+  let contentLayout = <DocLayout />;
+  switch (pageType) {
+    case 'home':
+      contentLayout = <HomeLayout />;
+      break;
+    case 'doc':
+    default:
+      break;
+  }
   return (
     <div>
       <Nav />
-      {/* <HomeLayout /> */}
-      <DocLayout></DocLayout>
+      {contentLayout}
     </div>
   );
 };
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
@@ -365,8 +365,12 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --island-home-hero-name-color: var(--island-c-brand);
-  --island-home-hero-name-background: transparent;
+  --island-home-hero-name-color: transparent;
+  --island-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
 
   --island-home-hero-image-background-image: none;
   --island-home-hero-image-filter: none;

diff --git a/src/node/plugin-island/index.ts b/src/node/plugin-island/index.ts
@@ -75,6 +75,7 @@ export function pluginIsland(
       }
     },
     async transform(code, id, options) {
+      // Note: @vitejs/plugin-react cannot compile files in node_modules, so we need to compile them manually.
       // In production, we should transform the __island props for collecting island components
       if (
         options?.ssr &&

diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
@@ -102,6 +102,23 @@ export interface SiteData<ThemeConfig = any> {
   // langs: Record<string, { lang: string; label: string }>;
 }
 
+export interface Hero {
+  name: string;
+  text: string;
+  tagline: string;
+  actions: {
+    text: string;
+    link: string;
+    theme: 'brand' | 'alt';
+  }[];
+}
+
+export interface Feature {
+  icon: string;
+  title: string;
+  details: string;
+}
+
 export interface SiteConfig<ThemeConfig = any>
   extends Omit<UserConfig, 'themeConfig'> {
   root: string;
@@ -124,4 +141,7 @@ export interface PageModule {
 export interface PageData {
   siteData: SiteData<DefaultTheme.Config>;
   toc: Header[];
+  pageType: 'home' | 'doc' | 'custom' | '404';
+  features: Feature[];
+  hero: Hero;
 }