chore: migrate link component

unix · unix · commit ddce5d57ef76 · 2020-05-12T02:50:38.000+08:00
diff --git a/lib/components/contacts.jsx b/lib/components/contacts.jsx
@@ -14,7 +14,6 @@ const Contacts = ({ isDetailPage = false }) => {
   const themeTitle = Configs.isCN() ? '切换主题' : 'Switch themes'
   const linkProps = {
     rel: 'noreferrer',
-    pure: true,
     target: '_blank',
   }
   
diff --git a/lib/components/posts/post-item.jsx b/lib/components/posts/post-item.jsx
@@ -16,7 +16,7 @@ const PostItem = ({ post }) => {
   return (
     <div className="item">
       <NextLink href={post.url} as={post.url} passHref>
-        <Link pure>
+        <Link>
           {post.name}
           <span className="date" dangerouslySetInnerHTML={{__html: getDateString(post.meta.date)}}>
           </span>
diff --git a/lib/components/posts/posts.jsx b/lib/components/posts/posts.jsx
@@ -10,7 +10,7 @@ const getMoreLink = len => {
   if (len < Configs.latestLimit) return null
   return (
     <NextLink href="/blog" passHref>
-      <Link pure title="More">...</Link>
+      <Link title="More">...</Link>
     </NextLink>
   )
 }
diff --git a/lib/components/profile-links.jsx b/lib/components/profile-links.jsx
@@ -16,7 +16,7 @@ const fillSpace = name => {
 const makeLink = data => {
   return (
     <NextLink href={data.url} key={data.url} passHref>
-      <Link pure>{fillSpace(data.name)}</Link>
+      <Link>{fillSpace(data.name)}</Link>
     </NextLink>
   )
 }
diff --git a/lib/components/profile.jsx b/lib/components/profile.jsx
@@ -19,7 +19,7 @@ const Profile = React.memo(({
     <div className="profile">
       <Row align="bottom" className="user">
         <NextLink href="/" passHref>
-          <Link pure>
+          <Link>
             <User src="/assets/avatar.png" name={Configs.author}>{Configs.summary}</User>
           </Link>
         </NextLink>
diff --git a/pages/fixed/about.mdx b/pages/fixed/about.mdx
@@ -54,7 +54,7 @@ export const Alipay = () => {
 现在你所见的站点来自我的开源项目 <Link rel="nofollow" href="https://github.com/unix/unix.bio">unix/unix.bio (MIT)</Link> ，
 你可以无偿的使用它构建属于自己的博客。
 
-或者你想赞助、捐赠我？请点击下面的按钮。非常感谢 <NextLink href="/others/sponsors"><Link pure color>所有的赞助者</Link></NextLink>。
+或者你想赞助、捐赠我？请点击下面的按钮。非常感谢 <NextLink href="/others/sponsors"><Link color>所有的赞助者</Link></NextLink>。
 
 <Row>
   <Spacer x={1} />
diff --git a/pages/fixed/projects.mdx b/pages/fixed/projects.mdx
@@ -13,28 +13,28 @@ export const meta = {
 <Spacer y={2} />
 <Dot type="success">高活跃度项目</Dot>
 <Spacer />
-<Link pure href="https://github.com/unix/func"><Code>func</Code> - 现代化的，IoC 范式命令行框架。</Link>
+<Link href="https://github.com/unix/func"><Code>func</Code> - 现代化的，IoC 范式命令行框架。</Link>
 <Spacer y={.5} />
 
-<Link pure href="https://github.com/zeit-ui/vue"><Code>zeit-ui/vue</Code> - ZEIT UI 的 Vue 实现</Link>
+<Link href="https://github.com/zeit-ui/vue"><Code>zeit-ui/vue</Code> - ZEIT UI 的 Vue 实现</Link>
 <Spacer y={.5} />
 
-<Link pure href="https://github.com/zeit-ui/react"><Code>zeit-ui/react</Code> - ZEIT UI 的 React 实现</Link>
+<Link href="https://github.com/zeit-ui/react"><Code>zeit-ui/react</Code> - ZEIT UI 的 React 实现</Link>
 <Spacer y={.5} />
 
-<Link pure href="https://github.com/unix/views-show"><Code>views-show</Code> - 无服务器的浏览量统计服务</Link>
+<Link href="https://github.com/unix/views-show"><Code>views-show</Code> - 无服务器的浏览量统计服务</Link>
 <Spacer y={.5} />
 
-<Link pure href="https://github.com/unix/koa-ts"><Code>koa-ts</Code> - Koa2 与 TS 的最佳实践，包含脚手架</Link>
+<Link href="https://github.com/unix/koa-ts"><Code>koa-ts</Code> - Koa2 与 TS 的最佳实践，包含脚手架</Link>
 <Spacer y={.5} />
 
-<Link pure href="https://github.com/unix/want"><Code>want</Code> - 以不下载的方式在线运行命令，无负担运维</Link>
+<Link href="https://github.com/unix/want"><Code>want</Code> - 以不下载的方式在线运行命令，无负担运维</Link>
 <Spacer y={.5} />
 
-<Link pure href="https://github.com/unix/done"><Code>done</Code> - 自动化、标准化的 Release 工具</Link>
+<Link href="https://github.com/unix/done"><Code>done</Code> - 自动化、标准化的 Release 工具</Link>
 <Spacer y={.5} />
 
-<Link pure href="https://github.com/unix/cdn-viewer"><Code>cdn-viewer</Code> - 以文件树审阅任何版本时的仓库或包</Link>
+<Link href="https://github.com/unix/cdn-viewer"><Code>cdn-viewer</Code> - 以文件树审阅任何版本时的仓库或包</Link>
 <Spacer y={.5} />
 
 <Spacer y={3} />
diff --git a/pages/others/sponsors.mdx b/pages/others/sponsors.mdx
@@ -35,7 +35,7 @@ export const SponsorList = () => {
 我可以帮助你远程解决一些问题或是 Review 代码。
 
 
-你可以在 <NextLink href="/fixed/about"><Link color pure>关于我</Link></NextLink> 的页面找到捐赠链接，
+你可以在 <NextLink href="/fixed/about"><Link color>关于我</Link></NextLink> 的页面找到捐赠链接，
 捐赠时的留言将在此展示。
 
 <Spacer y={2} />
diff --git a/pages/posts/getting-started-with-zeit-ui-react.mdx b/pages/posts/getting-started-with-zeit-ui-react.mdx
@@ -8,25 +8,25 @@ export const meta = {
   image: 'https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png',
 }
 
-有意思的是，和 <Link pure href="/posts/getting-started-with-zeit-ui-vue">在 Vue 的指南</Link> 中非常相似，我们也提供了 ZEIT UI 在 React 框架上的支持，
+有意思的是，和 <Link href="/posts/getting-started-with-zeit-ui-vue">在 Vue 的指南</Link> 中非常相似，我们也提供了 ZEIT UI 在 React 框架上的支持，
 包括数十个有着统一风格的组件，当然还有完善的文档支持。令人兴奋的是，所有的组件都以 `React FC` 的方式实现，
 它们都是以优雅的方案构建出的难以想象的高性能组件，也有着 React Hooks 与 Context 精彩的应用，在未来 `Concurrent` 受到支持时我们也会立刻考虑在它们在组件中的优化方案。
 就是这样，`@zeit-ui/react` 是**进步的，高效的，极简风格且优雅的组件库**。
 
 在开始创建你的第一个 ZEIT UI 项目之前，我们还必须同步一个基础观念：极简的风格并非简陋，**真正的简约也不是删繁就简，而是在纷繁中构建秩序**。
-来自 ZEIT 的设计风格绝不是灵光一现的作品，而是设计大师 <Link pure href="https://evilrabb.it/" rel="nofollow">Evil Rabbit</Link> 与其团队设计师精心雕琢的设计语言，
+来自 ZEIT 的设计风格绝不是灵光一现的作品，而是设计大师 <Link href="https://evilrabb.it/" rel="nofollow">Evil Rabbit</Link> 与其团队设计师精心雕琢的设计语言，
 如果你使用在此基础上构建的 UI 库 `@zeit-ui/react` 时发现任何瑕疵，那一定是我们拙劣的技术实现所致，不必担心，我们可以一同优化与解决缺陷。
 
 <Spacer y={.5} />
 
 <Note type="warning" label="注意">
-请确保你拥有最新版本的 <Link pure rel="nofollow" href="https://nodejs.org/en/download/">NodeJS</Link>，
-同时也需要准备 NodeJS 的包管理器 <Link pure rel="nofollow" href="https://www.npmjs.com/">NPM</Link> 或是 <Link pure rel="nofollow" href="https://yarnpkg.com/">Yarn</Link>
+请确保你拥有最新版本的 <Link rel="nofollow" href="https://nodejs.org/en/download/">NodeJS</Link>，
+同时也需要准备 NodeJS 的包管理器 <Link rel="nofollow" href="https://www.npmjs.com/">NPM</Link> 或是 <Link rel="nofollow" href="https://yarnpkg.com/">Yarn</Link>
 </Note>
 
 <Spacer y={.5} />
 
-为了轻易的和任何 React 项目接轨，也作为简易的示范，我们使用知名的脚手架 <Link pure rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> 创建通用项目。
+为了轻易的和任何 React 项目接轨，也作为简易的示范，我们使用知名的脚手架 <Link rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> 创建通用项目。
 **即便你的项目并非此脚手架创建，也能以此通用项目作为参考，非常简单的使用 `ZEIT UI`**。
 
 <Spacer y={2} />
@@ -86,7 +86,7 @@ ReactDOM.render(
 
 是的，`@zeit-ui/react` 没有任何 `.css` 文件，我们把每个组件的样式分发给组件本身，你完全无需考虑样式的问题。
 这在你未来需要**统一定制主题风格**时非常有帮助，甚至能帮助你在 **Server Render** 时获的最佳效果。有关定制主题等高级内容，
-你可以参阅 <Link pure color href="https://react.zeit-ui.co/docs/customization/themes">如何定制主题的文档</Link>。
+你可以参阅 <Link color href="https://react.zeit-ui.co/docs/customization/themes">如何定制主题的文档</Link>。
 
 <Spacer y={2} />
 
@@ -125,7 +125,7 @@ function App() {
 到此为止我们似乎做的不错，运用 ZEIT UI 构建了一个简单的页面。
 你可以在 <Link rel="nofollow" href="https://github.com/zeit-ui/react-getting-started/tree/7ca0d66505f03bac709feeb58538df325bc9d8ea">示例项目</Link> 中查看这次的提交。
 
-想要了解更多的组件？你可以看看 <Link pure color rel="nofollow" href="https://react.zeit-ui.co/">ZEIT - UI React 的 官方文档</Link>。
+想要了解更多的组件？你可以看看 <Link color rel="nofollow" href="https://react.zeit-ui.co/">ZEIT - UI React 的 官方文档</Link>。
 
 
 <Spacer y={2} />
@@ -140,7 +140,7 @@ function App() {
 在你的页面获得最佳表现力时也确保了性能与体验。
 
 最后，`@zeit-ui/react` 完整且优先的提供 `Server Render` 支持，你所见的博客与我们的文档都是由服务端预渲染所完成，
-你可以在 <Link pure color rel="nofollow" href="https://react.zeit-ui.co/docs/getting-started/server-render">这里了解如何配置</Link>。
+你可以在 <Link color rel="nofollow" href="https://react.zeit-ui.co/docs/getting-started/server-render">这里了解如何配置</Link>。
 
 <Spacer y={2} />
 
diff --git a/pages/posts/getting-started-with-zeit-ui-vue.mdx b/pages/posts/getting-started-with-zeit-ui-vue.mdx
@@ -15,13 +15,13 @@ export const meta = {
 <Spacer y={.5} />
 
 <Note type="warning" label="注意">
-请确保你拥有最新版本的 <Link pure rel="nofollow" href="https://nodejs.org/en/download/">NodeJS</Link>，
-同时也需要准备 NodeJS 的包管理器 <Link pure rel="nofollow" href="https://www.npmjs.com/">NPM</Link> 或是 <Link pure rel="nofollow" href="https://yarnpkg.com/">Yarn</Link>。
+请确保你拥有最新版本的 <Link rel="nofollow" href="https://nodejs.org/en/download/">NodeJS</Link>，
+同时也需要准备 NodeJS 的包管理器 <Link rel="nofollow" href="https://www.npmjs.com/">NPM</Link> 或是 <Link rel="nofollow" href="https://yarnpkg.com/">Yarn</Link>。
 </Note>
 
 <Spacer y={.5} />
 
-为了轻易的和任何 Vue 项目接轨，我们使用 Vue 官方的脚手架 <Link pure rel="nofollow" href="https://cli.vuejs.org/zh/guide/">@vue/cli</Link> 创建通用项目。
+为了轻易的和任何 Vue 项目接轨，我们使用 Vue 官方的脚手架 <Link rel="nofollow" href="https://cli.vuejs.org/zh/guide/">@vue/cli</Link> 创建通用项目。
 **即便你的项目并非官方脚手架创建，也能以此通用项目作为参考，非常简单的使用 `ZEIT UI`**。
 
 <Spacer y={2} />
diff --git a/pages/posts/talk-about-nextjs-after-9_3.mdx b/pages/posts/talk-about-nextjs-after-9_3.mdx
@@ -15,7 +15,7 @@ export const meta = {
 
 我们知道 SSR (server-side rendering / 服务端渲染) 框架的内容渲染是在每次请求之后，由服务端生成一个最小可用页面，
 这是确保 SEO 和首屏体验的重要方式，由于 TCP 的 slow start 与物理延迟等原因，SSR 仍旧在首屏体验上远超 SPA 应用，
-关于这一点你可以参阅 <Link target="_blank" pure href="https://rauchg.com/2014/7-principles-of-rich-web-applications">构建 Web 应用 7 要素</Link> 这篇文章。
+关于这一点你可以参阅 <Link target="_blank" href="https://rauchg.com/2014/7-principles-of-rich-web-applications">构建 Web 应用 7 要素</Link> 这篇文章。
 但 SSR 应用无法充分的利用首屏缓存，比如应用动态页面中的一部分是根据用户分发的私有信息，它们必须在服务端从持久化存储服务中检索，
 这会使所有的页面，即便是那些首屏需要缓存的公共静态页面都丢失 SPA (Single Page Applications / 单页面应用) 带来的优势。
 在 Next.js 9 中，一个被称为 Auto SSG 的方案解决这个问题。
@@ -38,7 +38,7 @@ Next.js 9.3 之后，为了解决此类问题，将数据的预获取分为三
 - `getServerSideProps`: 在服务端为每个请求获取数据
 
 现在我们可以在动态路由的页面中指定 `getStaticPaths` 返回哪些 `paths`，从而精细的控制自己的动态页面使用哪种方式展示。
-这里是 <Link target="_blank" pure href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation">更详细的文档</Link>。
+这里是 <Link target="_blank" href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation">更详细的文档</Link>。
 
 为了保持 API 的一致性和扩展静态能力，Next.js 也增加了 `getStaticProps` 纯静态页面在构建时的数据问题。
 这些 9.3 以后带来的变化在我看来是非常了不起的，这些 API 让 Next.js 成为了一个名副其实的混合构建框架。

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,6 @@ const Contacts = ({ isDetailPage = false }) => {`
`14`	`14`	`const themeTitle = Configs.isCN() ? '切换主题' : 'Switch themes'`
`15`	`15`	`const linkProps = {`
`16`	`16`	`rel: 'noreferrer',`
`17`		`- pure: true,`
`18`	`17`	`target: '_blank',`
`19`	`18`	`}`
`20`	`19`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ const getMoreLink = len => {`
`10`	`10`	`if (len < Configs.latestLimit) return null`
`11`	`11`	`return (`
`12`	`12`	`<NextLink href="/blog" passHref>`
`13`		`- <Link pure title="More">...</Link>`
	`13`	`+ <Link title="More">...</Link>`
`14`	`14`	`</NextLink>`
`15`	`15`	`)`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ const fillSpace = name => {`
`16`	`16`	`const makeLink = data => {`
`17`	`17`	`return (`
`18`	`18`	`<NextLink href={data.url} key={data.url} passHref>`
`19`		`- <Link pure>{fillSpace(data.name)}</Link>`
	`19`	`+ <Link>{fillSpace(data.name)}</Link>`
`20`	`20`	`</NextLink>`
`21`	`21`	`)`
`22`	`22`	`}`