每個 project-card 都需要以下資訊：

我希望「上次更新時間」能隨著 GitHub repo 的 commit 更新而自動同步。當我每次推送新版本（push commit）時，作品集卡片上的時間也能即時更新。這個時間點可以透過 GitHub API 取得 repo 的最新 commit 時間。如果是私有 repo，則需要額外提供 Access Token 才能存取。

1. api 如下，需搜集所有專案的repo名，整理成 api 路徑

// repo 資訊
GET https://api.github.com/repos/:owner/:repo

// repo 中某個 branch 資訊
GET https://api.github.com/repos/:owner/:repo/branches/:branchname

2. 建立 access token

頭像 > Settings > Developer settings > Personal access tokens > Tokens > Generate new token > Generate new token**(classic)**

建立完成後，要複製 access token（重刷頁面會不見，不見就要重建），把 token 放在專案的 env 中，避免有心人士讀取使用。

要把token 中的 Select scopes 的 repo scope 勾起，目的是要可以取得別人帳號下、我有push權限的 repo。

注意：

1. 我有和他人共編的repo，所以需要用Classic PAT，否則怎麼打api都會是404
   

2. api 的網址和repo的名字要一模一樣，不然怎麼打也會404（害我試超久＠＠）

程式碼

const projects = ref([
  {
    title: '線上作品集',
    repoInfo: 'supeihau/my-profolio-2025',
    pushAt: '', // api 補值
    skills: ['UIUX', 'FrontEnd', 'Vue'],
    picture: '/images/propject/timetable.png',
    designConceptUrl: 'https://ithelp.ithome.com.tw/users/20178581/ironman/8757?page=1',
    productUrl: 'TODO',
  },
]);

onMounted(() => {
  projects.value.forEach(async (project) => {
    if (project.repoInfo) {
      const data = await getRepoInfo(project.repoInfo);
      if (data && data.pushed_at) {
        project.pushAt = new Date(data.pushed_at).toLocaleDateString();
        console.log('project.pushAt', project.pushAt);
      } else {
        project.pushAt = new Date(data.commit.commit.author.date).toLocaleDateString();
      }
    } else {
      project.pushAt = '無更新時間';
    }
  });
});

const getRepoInfo = async (repo) => {
  const res = await fetch(
    `https://api.github.com/repos/${repo}`,
    {
      headers: {
        Authorization: `Bearer ${import.meta.env.VITE_GITHUB_TOKEN}`, // 要寫在.env裡
        Accept: "application/vnd.github+json"
      }
    }
  );
  const data = await res.json();
  return data;
};

這邊是只有用 api 取得更新時間，感覺之後優化可以把所有卡片上的資訊都寫在repo裡，就不需要每次寫新專案都得更新陣列啦！今天任務結束！