feat: social links (#149)

* feat: more socialLinks * feat: hidden social links component * feat: social links text mode * feat: social links img mode * feat: separate social component * feat: social links usage * fix: social links gap
sanyuan0704 · Nov 20, 2022 · 9682e3d · 9682e3d · vercel · Nov 20, 2022
1 parent 729a693
commit 9682e3d
Show file tree

Hide file tree

Showing 13 changed files with 528 additions and 92 deletions.
diff --git a/docs/.island/config.ts b/docs/.island/config.ts
@@ -67,7 +67,13 @@ export default defineConfig({
     socialLinks: [
       {
         icon: 'github',
-        link: 'https://github.com/sanyuan0704/island'
+        mode: 'link',
+        content: 'https://github.com/sanyuan0704/island'
+      },
+      {
+        icon: 'discord',
+        mode: 'link',
+        content: 'https://discord.gg/Nvy4YSerjM'
       }
     ],
 

diff --git a/docs/en/guide/navbar.md b/docs/en/guide/navbar.md
@@ -102,7 +102,9 @@ export default defineConfig({
 
 ## Social Links
 
-You can add social links to the navbar:
+You can add social links to the navbar, such as `github`link, `twitter` link and so on.
+
+Social links support three modes: `link mode` `text mode` `img mode`, for example: 
 
 ```js
 import { defineConfig } from 'islandjs';
@@ -112,13 +114,69 @@ export default defineConfig({
     socialLinks: [
       {
         icon: 'github',
-        link: 'https://github.com/sanyuan0704/island.js'
+        mode: 'link',
+        content: 'https://github.com/sanyuan0704/island.js'
+      },
+      {
+        icon: 'wechat',
+        mode: 'text',
+        content: 'wechat ID xxx'
+      },
+      {
+        icon: 'qq',
+        mode: 'img',
+        content: '/qrcode.png'
       }
     ]
   }
 });
 ```
 
+- for `link mode`, click the icon will jump to preset link.
+- for `text mode`, hover the icon will show a popper, which contain the preset content.
+- for `img mode`, hover the icon will show a popper, which contain the preset image. Need to be aware that, the image should put in the `public` folder.
+
+Social links support the following icons: 
+
+```ts
+export type SocialLinkIcon =
+  | 'discord'
+  | 'facebook'
+  | 'github'
+  | 'instagram'
+  | 'linkedin'
+  | 'slack'
+  | 'twitter'
+  | 'youtube'
+  | 'weixin'
+  | 'qq'
+  | 'juejin'
+  | 'zhihu'
+  | 'bilibili'
+  | 'weibo'
+  | { svg: string };
+```
+
+If you want to use other icon, you can pass in an object that have the `svg` key, for example:
+
+```js
+import { defineConfig } from 'islandjs';
+
+export default defineConfig({
+  themeConfig: {
+    socialLinks: [
+      {
+        icon: {
+          svg: 'svg content'
+        },
+        mode: 'link',
+        content: 'https://github.com/sanyuan0704/island.js'
+      },
+    ]
+  }
+});
+```
+
 ## Translations
 
 When you set `themeConfig.locales`, the navbar will automatically adds the menu group about translations. See details in [I18n](/en/guide/i18n).
diff --git a/docs/zh/guide/navbar.md b/docs/zh/guide/navbar.md
@@ -102,7 +102,8 @@ export default defineConfig({
 
 ## 相关链接
 
-你可以通过如下的配置添加相关链接，比如 `github` 链接、`twitter` 链接等：
+你可以通过如下的配置添加相关链接，比如 `github` 链接、`twitter` 链接等。
+相关链接支持三种模式：`链接模式link` `文本模式text` `图片模式img`，相关例子如下：
 
 ```js
 import { defineConfig } from 'islandjs';
@@ -112,13 +113,69 @@ export default defineConfig({
     socialLinks: [
       {
         icon: 'github',
-        link: 'https://github.com/sanyuan0704/island.js'
+        mode: 'link',
+        content: 'https://github.com/sanyuan0704/island.js'
+      },
+      {
+        icon: 'wechat',
+        mode: 'text',
+        content: '微信号xxx'
+      },
+      {
+        icon: 'qq',
+        mode: 'img',
+        content: '/qrcode.png'
       }
     ]
   }
 });
 ```
 
+- 当`link`模式时，点击icon即可跳转链接
+- 当`text`模式时，鼠标移到icon上会显示弹框，弹框内容是输入的文本
+- 当`img`模式时，鼠标移到icon上会显示弹框，弹框内容是指定的图片，需要注意的是，图片需要放在`public`目录下
+
+相关链接支持以下几种图片，通过icon属性来选择：
+
+```ts
+export type SocialLinkIcon =
+  | 'discord'
+  | 'facebook'
+  | 'github'
+  | 'instagram'
+  | 'linkedin'
+  | 'slack'
+  | 'twitter'
+  | 'youtube'
+  | 'weixin'
+  | 'qq'
+  | 'juejin'
+  | 'zhihu'
+  | 'bilibili'
+  | 'weibo'
+  | { svg: string };
+```
+
+如果需要自定义icon，可以通过传入一个带有`svg属性`的对象，svg的值为自定义图标内容即可，比如：
+
+```js
+import { defineConfig } from 'islandjs';
+
+export default defineConfig({
+  themeConfig: {
+    socialLinks: [
+      {
+        icon: {
+          svg: 'svg图标内容'
+        },
+        mode: 'link',
+        content: 'https://github.com/sanyuan0704/island.js'
+      },
+    ]
+  }
+});
+```
+
 ## 国际化
 
 当你配置了 `themeConfig.locales` 之后，导航栏会自动带上语言切换的菜单，你可以通过查看 [i18n](/zh/guide/i18n) 文档了解更多。
diff --git a/packages/island/src/shared/types/default-theme.ts b/packages/island/src/shared/types/default-theme.ts
@@ -186,7 +186,8 @@ export namespace DefaultTheme {
 
   export interface SocialLink {
     icon: SocialLinkIcon;
-    link: string;
+    mode: 'link' | 'text' | 'img';
+    content: string;
   }
 
   export type SocialLinkIcon =
@@ -198,6 +199,12 @@ export namespace DefaultTheme {
     | 'slack'
     | 'twitter'
     | 'youtube'
+    | 'weixin'
+    | 'qq'
+    | 'juejin'
+    | 'zhihu'
+    | 'bilibili'
+    | 'weibo'
     | { svg: string };
 
   // footer --------------------------------------------------------------------

diff --git a/packages/island/src/theme-default/components/Nav/index.module.scss b/packages/island/src/theme-default/components/Nav/index.module.scss
@@ -62,3 +62,15 @@
 .container :deep(*) {
   pointer-events: all;
 }
+
+.social-links-icon {
+  width: 20px;
+  height: 100%;
+  display: flex;
+  fill: currentColor;
+  color: var(--island-c-text-2);
+
+  &:hover {
+    color: var(--island-c-text-1);
+  }
+}
diff --git a/packages/island/src/theme-default/components/Nav/index.tsx b/packages/island/src/theme-default/components/Nav/index.tsx
@@ -5,20 +5,16 @@ import { Search } from '@search-box';
 import { usePageData } from '@client';
 import { NavMenuSingleItem } from './NavMenuSingleItem';
 import { NavMenuGroup, NavMenuGroupItem } from './NavMenuGroup';
+import { SocialLinks } from '../SocialLinks';
 import { useLocaleSiteData, useSidebarData } from '../../logic';
 import { DefaultTheme } from 'shared/types';
-import GithubSvg from '../../assets/github.svg';
 import { useLocation } from 'react-router-dom';
 import { NavHamburger } from '../NavHambmger';
 
 export interface NavProps {
   beforeNavTitle?: React.ReactNode;
   afterNavTitle?: React.ReactNode;
 }
-const IconMap = {
-  github: GithubSvg
-};
-
 const NavBarTitle = ({ title }: { title: string }) => {
   return (
     <div
@@ -63,46 +59,6 @@ const NavTranslations = ({
   );
 };
 
-const NavSocialLinks = ({
-  socialLinks
-}: {
-  socialLinks: DefaultTheme.SocialLink[];
-}) => {
-  return (
-    <div
-      className="social-links"
-      flex=""
-      items-center=""
-      before="menu-item-before"
-    >
-      <div
-        flex=""
-        items-center=""
-        w="9"
-        h="9"
-        transition="color duration-300"
-        color="hover:brand"
-      >
-        {socialLinks.map((item) => {
-          const IconComp = IconMap[item.icon as keyof typeof IconMap];
-          return (
-            <a
-              key={item.link}
-              href={item.link}
-              target="_blank"
-              rel="noopener noreferrer"
-              w="5"
-              h="5"
-            >
-              <IconComp fill="currentColor" />
-            </a>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
 export function Nav(props: NavProps & ComponentPropsWithIsland) {
   const { beforeNavTitle, afterNavTitle } = props;
   const { siteData, pageType } = usePageData();
@@ -166,7 +122,7 @@ export function Nav(props: NavProps & ComponentPropsWithIsland) {
           <NavTranslations translationMenuData={translationMenuData!} />
         )}
         {hasAppearanceSwitch && <NavAppearance />}
-        {hasSocialLinks && <NavSocialLinks socialLinks={socialLinks} />}
+        {hasSocialLinks && <SocialLinks __island socialLinks={socialLinks} />}
       </div>
     );
   };

diff --git a/packages/island/src/theme-default/components/NavScreen/index.tsx b/packages/island/src/theme-default/components/NavScreen/index.tsx
@@ -7,6 +7,7 @@ import {
   NavScreenMenuGroupItem
 } from '../NavScreenMenuGroup/NavScreenMenuGroup';
 import { NavMenuSingleItem } from '../Nav/NavMenuSingleItem';
+import { SocialLinks } from '../SocialLinks';
 import { SwitchAppearance } from '../SwitchAppearance/index';
 import Translator from '../../assets/translator.svg';
 import GithubSvg from '../../assets/github.svg';
@@ -42,45 +43,6 @@ const NavScreenTranslations = ({
     </div>
   );
 };
-const NavScreenSocialLinks = ({
-  socialLinks
-}: {
-  socialLinks: DefaultTheme.SocialLink[];
-}) => {
-  return (
-    <div
-      className="social-links"
-      flex=""
-      items-center=""
-      before="menu-item-before"
-    >
-      <div
-        flex=""
-        items-center=""
-        w="9"
-        h="9"
-        transition="color duration-300"
-        color="hover:brand"
-      >
-        {socialLinks.map((item) => {
-          const IconComp = IconMap[item.icon as keyof typeof IconMap];
-          return (
-            <a
-              key={item.link}
-              href={item.link}
-              target="_blank"
-              rel="noopener noreferrer"
-              w="5"
-              h="5"
-            >
-              <IconComp fill="currentColor" />
-            </a>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
 
 export function NavScreen(props: Props) {
   const { isScreenOpen, localeData, siteData, pathname } = props;
@@ -160,7 +122,7 @@ export function NavScreen(props: Props) {
           items-center="center"
         >
           {hasAppearanceSwitch && <NavScreenAppearance />}
-          {hasSocialLinks && <NavScreenSocialLinks socialLinks={socialLinks} />}
+          {hasSocialLinks && <SocialLinks __island socialLinks={socialLinks} />}
         </div>
         {hasMultiLanguage && (
           <NavScreenTranslations translationMenuData={translationMenuData!} />

diff --git a/packages/island/src/theme-default/components/SocialLinks/HiddenLinks.tsx b/packages/island/src/theme-default/components/SocialLinks/HiddenLinks.tsx
@@ -0,0 +1,37 @@
+import { LinkContent } from './LinkContent';
+import { DefaultTheme } from 'shared/types';
+
+interface IHiddenLinksProps {
+  links: DefaultTheme.SocialLink[];
+}
+
+export const HiddenLinks = (props: IHiddenLinksProps) => {
+  const { links } = props;
+
+  return (
+    <div
+      absolute=""
+      pos="top-13 right-0"
+      z="1"
+      p="3"
+      w="32"
+      border-1=""
+      rounded="xl"
+      bg="bg-default"
+      style={{
+        boxShadow: 'var(--island-shadow-3)',
+        marginRight: '-2px'
+      }}
+      flex="~ wrap"
+      gap="4"
+    >
+      {links.map((item) => (
+        <LinkContent
+          key={item.icon}
+          link={item}
+          popperStyle={{ top: '1.25rem' }}
+        />
+      ))}
+    </div>
+  );
+};