feat: update project github

components/GithubRepo.tsx

@@ -1,22 +1,22 @@
 import type { GithubRepository } from '~/types'
 
 export function GithubRepo({ repo }: { repo: GithubRepository }) {
-  let mainLanguage = repo.languages[0]
+  const mainLanguage = repo.languages[0]
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center space-x-4">
         <div className="flex items-center space-x-1.5">
           <span
             className="inline-block h-4.5 w-4.5 rounded-full"
-            style={{ backgroundColor: mainLanguage.color }}
+            style={{ backgroundColor: mainLanguage?.color || 'black' }}
           />
-          <span>{mainLanguage.name}</span>
+          <span>{mainLanguage?.name}</span>
         </div>
         <div className="flex items-center space-x-1.5">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
-            className="h-4 w-4"
+            className="w-4 h-4"
             fill="currentColor"
           >
             <path d="M12 .25a.75.75 0 0 1 .673.418l3.058 6.197 6.839.994a.75.75 0 0 1 .415 1.279l-4.948 4.823 1.168 6.811a.751.751 0 0 1-1.088.791L12 18.347l-6.117 3.216a.75.75 0 0 1-1.088-.79l1.168-6.812-4.948-4.823a.75.75 0 0 1 .416-1.28l6.838-.993L11.328.668A.75.75 0 0 1 12 .25Zm0 2.445L9.44 7.882a.75.75 0 0 1-.565.41l-5.725.832 4.143 4.038a.748.748 0 0 1 .215.664l-.978 5.702 5.121-2.692a.75.75 0 0 1 .698 0l5.12 2.692-.977-5.702a.748.748 0 0 1 .215-.664l4.143-4.038-5.725-.831a.75.75 0 0 1-.565-.41L12 2.694Z"></path>
@@ -27,7 +27,7 @@ export function GithubRepo({ repo }: { repo: GithubRepository }) {
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
-            className="h-4 w-4"
+            className="w-4 h-4"
             fill="currentColor"
           >
             <path d="M8.75 19.25a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0ZM15 4.75a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0Zm-12.5 0a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0ZM5.75 6.5a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 5.75 6.5ZM12 21a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 12 21Zm6.25-14.5a1.75 1.75 0 1 0-.001-3.501A1.75 1.75 0 0 0 18.25 6.5Z"></path>
@@ -52,7 +52,7 @@ export function GithubRepo({ repo }: { repo: GithubRepository }) {
                 viewBox="0 0 16 16"
                 width="16"
                 height="16"
-                className="h-4 w-4"
+                className="w-4 h-4"
                 fill="currentColor"
               >
                 <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path>

components/ProjectCard.tsx

@@ -7,10 +7,10 @@ import { Image } from './Image'
 import { Link } from './Link'
 
 export function ProjectCard({ project }: ProjectCardProps) {
-  let { title, description, imgSrc, url, repo, builtWith, demo } = project
-  let { data } = useSWR(`/api/github?repo=${repo}`, fetcher)
-  let repository: GithubRepository = data?.repository
-  let href = repository?.url || url
+  const { title, description, imgSrc, url, repo, builtWith, demo } = project
+  const { data } = useSWR(`/api/github?repo=${repo}`, fetcher)
+  const repository: GithubRepository = data?.repository
+  const href = repository?.url || url
 
   return (
     <div className="p-4 md md:w-1/2" style={{ maxWidth: '544px' }}>

data/projectsData.tsx

@@ -43,36 +43,47 @@ export let projectsData: Project[] = [
     url: '/',
     builtWith: ['Nuxt.js', 'Vue', 'Amap', 'Baidu Map', 'Vuex'],
   },
+  {
+    type: 'self',
+    title: "mengke.me - Mengke's coding journey",
+    description: '',
+    imgSrc: '/static/images/home_page.jpg',
+    repo: 'mk965/mengke.me',
+    url: 'https://mengke.me',
+    builtWith: ['Next.js v13', 'React', 'Tailwind CSS'],
+  },
   {
     type: 'self',
     title: 'qiankun-demo - Quick Start Qiankun Micro Frontend',
     description: `Qiankun Micro frontend integrates various frameworks, including Vue2, Vue3, React, Nuxt, Angular, etc..`,
     imgSrc: '/static/images/projects/qiankun.png',
-    repo: '/',
     builtWith: ['qiankun', 'Vue', 'React', 'Nuxt', 'Angular'],
   },
   {
     type: 'self',
     title: 'coord-check - Geographic coordinate checking',
     description: `Quickly check a set of string coordinates for incorrect coordinates and format them.`,
     imgSrc: '/static/images/projects/coord-check.jpg',
-    repo: '/',
+    repo: 'mk965/check-coord',
+    url: 'https://www.npmjs.com/package/check-coord',
     builtWith: ['JavaScript'],
   },
   {
     type: 'self',
     title: '年龄计算器 - WeChat Mini-Program',
     description: `More than 2,800,000+ users. Calculate various age data of users by birthday.`,
     imgSrc: '/static/images/projects/AgeCalculator.jpg',
-    repo: 'https://github.com/mk965/AgeCalculator',
+    repo: 'mk965/AgeCalculator',
+    url: 'https://github.com/mk965/AgeCalculator',
     builtWith: ['Mini-Program Vanilla'],
   },
   {
     type: 'self',
     title: '恋爱匹配度 - TikTok Mini-Program',
     description: `More than 14,000,000+ users. Love theme app for teens.`,
     imgSrc: '/static/images/projects/LoveMatching.jpg',
-    repo: 'https://github.com/mk965/AgeCalculator',
+    repo: 'mk965/AgeCalculator',
+    url: 'https://github.com/mk965/AgeCalculator',
     builtWith: ['Mini-Program Vanilla'],
   },
 ]

libs/spotify.ts → libs/spotify.server.ts

@@ -1,16 +1,16 @@
 import fetch from 'isomorphic-unfetch'
 import { SPOTIFY_TOKEN_API, SPOTIFY_NOW_PLAYING_API, SPOTIFY_TOP_TRACKS_API } from '~/constant'
 
-let {
+const {
   SPOTIFY_CLIENT_ID: client_id,
   SPOTIFY_CLIENT_SECRET: client_secret,
   SPOTIFY_REFRESH_TOKEN: refresh_token,
 } = process.env
 
-let basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
-
+const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
+console.log(basic)
 async function getAccessToken() {
-  let response = await fetch(SPOTIFY_TOKEN_API, {
+  const response = await fetch(SPOTIFY_TOKEN_API, {
     method: 'POST',
     headers: {
       Authorization: `Basic ${basic}`,
@@ -21,13 +21,14 @@ async function getAccessToken() {
       refresh_token,
     }),
   })
+  console.log(refresh_token)
 
   return response.json()
 }
 
 export async function getNowPlaying() {
-  let { access_token } = await getAccessToken()
-  let url = new URL(SPOTIFY_NOW_PLAYING_API)
+  const { access_token } = await getAccessToken()
+  const url = new URL(SPOTIFY_NOW_PLAYING_API)
   url.searchParams.append('additional_types', 'track,episode')
 
   return fetch(url.toString(), {
@@ -38,7 +39,7 @@ export async function getNowPlaying() {
 }
 
 export async function getTopTracks() {
-  let { access_token } = await getAccessToken()
+  const { access_token } = await getAccessToken()
 
   return fetch(SPOTIFY_TOP_TRACKS_API, {
     headers: {

pages/api/github.ts

@@ -15,7 +15,7 @@ export default async function fetchGithubRepo(req: NextApiRequest, res: NextApiR
     ;[owner, repo] = repo.split('/')
   }
   try {
-    let { repository }: GraphQlQueryResponseData = await graphql(
+    const { repository }: GraphQlQueryResponseData = await graphql(
       `
         query repository($owner: String!, $repo: String!) {
           repository(owner: $owner, name: $repo) {

pages/api/spotify.ts

@@ -1,20 +1,20 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
-import { getNowPlaying } from '~/libs/spotify'
-import type { SpotifyNowPlayingData } from '~/types'
+import { getNowPlaying } from '~/libs/spotify.server'
+import type { SpotifyNowPlayingData } from '~/types/server'
 
 export default async function fetchNowPlaying(_: NextApiRequest, res: NextApiResponse) {
-  let response = await getNowPlaying()
+  const response = await getNowPlaying()
   if (response.status === 204 || response.status > 400) {
     return res.status(response.status).json({ isPlaying: false })
   }
 
-  let data = await response.json()
+  const data = await response.json()
   if (data?.currently_playing_type === 'episode') {
     return res
       .status(200)
       .json({ isPlaying: true, title: data.item.name, songUrl: data.item.external_urls.spotify })
   }
-  let songData: SpotifyNowPlayingData = {
+  const songData: SpotifyNowPlayingData = {
     isPlaying: data.is_playing,
     title: data.item.name,
     artist: data.item.artists.map((art: { name: string }) => art.name).join(', '),