Zenn
Open1

Raycast Test

React
TypeScript
Raycast
kojikoji

シンプルなMenu Bar

  • 記事のタイトル
  • 投稿者のアイコン
  • tooltip like & comment
  • clickしたら記事をbrowserで開く

menu_bar

unofficial api
https://github.com/qiita-zenn/zenn-trend-api

たったの23行

import { useFetch } from "@raycast/utils";
import { Icon, MenuBarExtra, open } from "@raycast/api";
import { Response } from './types';

export default function Command() {
  const { data, isLoading } = useFetch<Response>("https://zenn-api.vercel.app/trendTech.json",
  )

  return (
    <MenuBarExtra icon="command-icon.png" isLoading={isLoading}>
      {data?.map((article) => (
        <MenuBarExtra.Item
          key={article.id}
          title={article.title}
          tooltip={`liked ${article.likedCount} comments: ${article.commentsCount}`}
          icon={{ source: article.user?.avatarSmallUrl }}
          onAction={() => open(`https://zenn.dev${article.path}`)}
        />
      ))}
    </MenuBarExtra>
  );
}

package.jsonのcommandsの中にintervalを入れると15分ごとにfetchを掛けてくれるので、楽チン

"commands": [
    {
      "name": "index",
      "title": "Update Bookmarks",
      "description": "menu bar teset",
      "mode": "menu-bar",
      "interval": "15m"
    }
  ],