feat: unify IoTSharp website entry points

Author: maikebing

components/footer/index.tsx

@@ -20,8 +20,9 @@ const linkGroups = [
     title: "开发者入口",
     links: [
       {label: "GitHub", link: "https://github.com/IoTSharp"},
-      {label: "文档", link: "https://docs.iotsharp.net/"},
-      {label: "商业服务", link: "https://iotsharp.online"},
+      {label: "文档", link: "https://iotsharp.net/docs/"},
+      {label: "AI 服务", link: "https://iotsharp.net/ai"},
+      {label: "平台控制台", link: "https://iotsharp.net/console"},
       {label: "组织主页", link: "https://iotsharp.net"}
     ]
   },

components/navbar/index.tsx

@@ -1,12 +1,11 @@
-import {FC, useContext} from "react";
+import {FC, useContext, useState} from "react";
 import styles from "./styles.module.scss";
 import Image from "next/image";
 import logoIcon from "@/public/logo-icon.svg";
 import logoTextDark from "@/public/logo-text-dark.svg";
 import logoText from "@/public/logo-text.svg";
 import {ThemeContext} from "@/stores/theme";
-import { Tooltip } from '@douyinfe/semi-ui';
-import {IconGithubLogo, IconMoon, IconSun} from '@douyinfe/semi-icons';
+import {Github, Menu, Moon, Sun, X} from 'lucide-react';
 import {Themes} from "@/constants/enum";
 
 export interface INavBarProps {
@@ -18,39 +17,48 @@ const navLinks = [
   {label: "IoTEdge", href: "https://iotsharp.net/IoTEdge/"},
   {label: "IoTEmBASIC", href: "https://iotsharp.net/IoTEmBASIC/"},
   {label: "更多项目", href: "#projects"},
-  {label: "商业服务", href: "https://iotsharp.online"}
+  {label: "商业服务", href: "https://iotsharp.net/console"}
 ];
 
 const NavBar: FC<INavBarProps> = ({}) => {
   const {setTheme, theme} = useContext(ThemeContext);
+  const [menuOpen, setMenuOpen] = useState(false);
   const icon = theme === Themes.light ? logoTextDark : logoText;
-  const iconTheme = theme === Themes.light ? <IconMoon size="extra-large"/> : <IconSun size="extra-large"/>;
+  const themeLabel = theme === Themes.light ? '切换到暗色模式' : '切换到亮色模式';
+  const iconTheme = theme === Themes.light ? <Moon size={24}/> : <Sun size={24}/>;
   return (
     <div className={styles.navBar}>
       <a href="https://iotsharp.net/">
         <Image src={logoIcon} alt="" width={35} height={35}/>
         <Image src={icon} alt="" width={135} height={40}/>
       </a>
-      <nav className={styles.links} aria-label="主导航">
+      <nav
+        id="main-navigation"
+        className={`${styles.links} ${menuOpen ? styles.linksOpen : ""}`}
+        aria-label="主导航"
+      >
         {navLinks.map((item) => {
           if (item.href.startsWith("http")) {
             return (
-              <a href={item.href} key={item.href} target="_blank" rel="noreferrer">
+              <a href={item.href} key={item.href} target="_blank" rel="noreferrer" onClick={() => setMenuOpen(false)}>
                 {item.label}
               </a>
             );
           }
 
           return (
-            <a href={item.href} key={item.href}>
+            <a href={item.href} key={item.href} onClick={() => setMenuOpen(false)}>
               {item.label}
             </a>
           );
         })}
       </nav>
       <div className={styles.themeArea}>
-        <div
-          className={styles.icon}
+        <button
+          type="button"
+          className={styles.iconButton}
+          title={themeLabel}
+          aria-label={themeLabel}
           onClick={(): void => {
             if (localStorage.getItem("theme") === Themes.light) {
               setTheme(Themes.dark);
@@ -59,21 +67,28 @@ const NavBar: FC<INavBarProps> = ({}) => {
             }
           }}
         >
-          <Tooltip position="bottom" content={Themes.light ? '切换到暗色模式' : '切换到亮色模式'}>
-            {iconTheme}
-          </Tooltip>
-        </div>
-        <div className={styles.icon} onClick={(): void => {
+          {iconTheme}
+        </button>
+        <button type="button" className={styles.iconButton} title="查看 GitHub" aria-label="查看 GitHub" onClick={(): void => {
           window.open(
             "https://github.com/IoTSharp",
             "blank",
             "noopener=yes,noreferrer=yes"
           );
         }}>
-          <Tooltip position="bottom" content="查看Github">
-            <IconGithubLogo size="extra-large"/>
-          </Tooltip>
-        </div>
+          <Github size={24}/>
+        </button>
+        <button
+          type="button"
+          className={`${styles.iconButton} ${styles.menuButton}`}
+          title={menuOpen ? "关闭导航" : "打开导航"}
+          aria-label={menuOpen ? "关闭导航" : "打开导航"}
+          aria-expanded={menuOpen}
+          aria-controls="main-navigation"
+          onClick={() => setMenuOpen((open) => !open)}
+        >
+          {menuOpen ? <X size={24}/> : <Menu size={24}/>}
+        </button>
       </div>
     </div>
   );

components/navbar/styles.module.scss

@@ -14,11 +14,6 @@
   z-index: 100;
   box-sizing: border-box;
 
-  .icon {
-    cursor: pointer;
-    margin-left: 1.3rem;
-  }
-
   a {
     display: flex;
     align-items: center;
@@ -77,6 +72,31 @@
       cursor: pointer;
     }
   }
+
+  .iconButton {
+    display: inline-flex;
+    width: 2.5rem;
+    height: 2.5rem;
+    align-items: center;
+    justify-content: center;
+    margin-left: .5rem;
+    padding: 0;
+    border: 0;
+    border-radius: .25rem;
+    color: inherit;
+    background: transparent;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+      background: #f1eff8;
+      outline: none;
+    }
+  }
+
+  .menuButton {
+    display: none;
+  }
 }
 
 @media screen and (max-width: 47.9375rem) {
@@ -88,16 +108,26 @@
     padding: 0.8rem 1.25rem;
 
     .links {
+      display: none;
       order: 3;
       width: 100%;
-      gap: 1rem;
-      overflow-x: auto;
-      padding-bottom: 0.2rem;
-      white-space: nowrap;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0;
+      overflow: hidden;
+      border-top: 1px solid #e7e3f7;
+
+      a {
+        min-height: 2.75rem;
+        padding: 0.75rem 0.5rem;
+      }
     }
 
-    .icon {
-      margin-left: 1rem;
+    .linksOpen {
+      display: grid;
     }
+
+    .iconButton { margin-left: .25rem; }
+
+    .menuButton { display: inline-flex; }
   }
 }

next-env.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+import "./.next/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

next.config.js

@@ -1,9 +1,8 @@
 const path = require("path");
 
-const semi = require("@douyinfe/semi-next").default({});
-module.exports = semi({
+module.exports = {
   reactStrictMode: true,
-  swcMinify: true,
+  output: "export",
   webpack: (config) => {
     config.resolve.alias = {
       ...config.resolve.alias,
@@ -12,7 +11,7 @@ module.exports = semi({
     return config;
   },
   images: {
-    domains: ["127.0.0.1"],
+    remotePatterns: [{ protocol: "http", hostname: "127.0.0.1" }],
     unoptimized: true
   },
-});
+};