chore: vitepress, others

- use vitepress instead
- update node.js
- fix link

Author: jiyuujin

.github/workflows/nodejs.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
     - uses: actions/checkout@v2

.gitignore

@@ -4,7 +4,7 @@ yarn.lock
 
 .idea
 
-docs/.vuepress/dist
+docs/.vitepress/dist
 
 .DS_Store
 

docs/.vuepress/components/HistoryTags.vue docs/.vitepress/components/HistoryTags.vue

@@ -104,7 +104,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-@import '../styles/profile.scss';
-</style>

docs/.vuepress/components/Profile.vue docs/.vitepress/components/Profile.vue

@@ -0,0 +1,54 @@
+export default {
+  title: `Hack React`,
+  description: `ミートアップやハンズオンでご紹介のあった資料を中心に記録しています。`,
+  head: [
+    [
+      `script`,
+      {},
+      `(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-7095980629133842", enable_page_level_ads: true });`
+    ],
+    [
+      `script`,
+      {
+        async: true,
+        src: `//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js`
+      }
+    ]
+  ],
+  base: `/`,
+  themeConfig: {
+    repo: `jiyuujin/hack-react`,
+    editLinks: false,
+    docsDir: `docs`,
+    navbar: [
+      {
+        text: `ハンズオン`,
+        children: [
+          `/index.md`,
+          `/handson/pokemon.md`,
+          `/handson/liff_vite.md`,
+          `/handson/liff_nextjs.md`,
+          `/handson/tests.md`
+        ]
+      }
+    ],
+    sidebarDepth: 3,
+    sidebar: [
+      {
+        text: `はじめに`,
+        items: [
+          { text: 'Pokemon アプリ', link: '/handson/pokemon.md' },
+          { text: 'Vite で LIFF アプリ', link: '/handson/liff_vite.md' },
+          { text: 'Next.js で LIFF アプリ', link: '/handson/liff_nextjs.md' },
+          { text: 'ユニットテスト', link: '/handson/tests.md' }
+        ]
+      }
+    ]
+  },
+  markdown: {
+    toc: { level: [1, 2] }
+  },
+  extendsMarkdown: (md) => {
+    md.use(require('@nekohack/markdown-it-link-preview'))
+  }
+}

docs/.vitepress/config.ts

@@ -0,0 +1,187 @@
+:root {
+  --vp-c-brand: #00d8ff;
+  --vp-c-brand-light: #00d8ff;
+}
+
+a:hover {
+  color: #b5eef8 !important;
+}
+
+.profile {
+  padding: 1rem 0;
+  max-width: 800px;
+  margin: 40px auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  vertical-align: middle;
+  background-color: #fefefe;
+  border: 1px #ddd solid;
+  border-radius: 8px;
+}
+
+.profile-icon {
+  margin: 0 auto;
+  width: 40%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  max-width: 600px;
+}
+
+.profile-icon_image {
+  align-items: center;
+  display: block;
+  flex: none;
+  justify-content: center;
+}
+
+.profile-icon_image img {
+  height: 120px;
+  width: 120px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.profile-info {
+  width: 60%;
+}
+
+.info-title {
+  margin-bottom: 8px;
+  align-items: center;
+  flex-direction: row;
+  flex-shrink: 1;
+  min-width: 0;
+  font-size: 1.4rem;
+  color: #434343;
+}
+
+.info-description {
+  align-items: center;
+  flex-direction: row;
+  flex-shrink: 1;
+  min-width: 0;
+  font-size: 1rem;
+  color: #434343;
+}
+
+.info-social {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  vertical-align: middle;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.info-social li {
+  padding: 0 4px;
+  margin: 0;
+}
+
+.info-social li a {
+  color: #000;
+}
+
+.info-social li a img {
+  width: 32px;
+  height: 32px;
+}
+
+@media (max-width: 735px) {
+  .profile {
+    padding: 12px 8px;
+    margin: 0 10px;
+    flex-direction: column;
+  }
+
+  .profile-icon {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 16px;
+  }
+
+  .profile-info {
+    text-align: center;
+    width: 100%;
+  }
+
+  .info-social {
+    justify-content: center;
+  }
+}
+
+.link-preview {
+  display: table;
+  width: 100%;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+}
+
+.link-preview__title {
+  font-size: 16px;
+  font-weight: 700;
+  display: -webkit-box;
+  overflow: hidden;
+  margin-bottom: 8px;
+  word-break: break-all;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.link-preview__description {
+  font-size: 12px;
+  font-style: normal;
+  line-height: 1.5;
+  display: -webkit-box;
+  overflow: hidden;
+  max-height: 3em;
+  margin-bottom: 4px;
+  word-break: break-all;
+  color: #787c7b;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.link-preview__url {
+  font-size: 12px;
+  font-style: normal;
+  line-height: 1.5;
+  display: block;
+  margin-bottom: 0;
+  color: #222;
+}
+
+.link-preview > a {
+  display: table-cell;
+  flex-direction: column;
+  padding: 16px;
+  cursor: pointer;
+  vertical-align: middle;
+  text-decoration: none;
+  color: inherit;
+  background-color: transparent;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-box-flex: 1;
+  flex: 1;
+}
+
+.link-preview__image {
+  width: 225px;
+  min-width: 220px;
+  height: 150px;
+  padding: 0;
+  vertical-align: middle;
+  border-left: 1px solid #f2f2f2;
+  border-radius: 0 3px 3px 0;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: cover;
+  -webkit-box-flex: 0;
+  flex: 0;
+}

docs/.vuepress/public/ads.txt docs/.vitepress/public/ads.txt

@@ -0,0 +1,12 @@
+import DefaultTheme from 'vitepress/theme'
+import Profile from '../components/Profile.vue'
+import HistoryTags from '../components/HistoryTags.vue'
+import './custom.css'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('Profile', Profile)
+    app.component('HistoryTags', HistoryTags)
+  }
+}