yamashin01/qin_portfolio

記事やポートフォリオ、SNSを案内するためのサイトです。

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

qin_portfolio's Issues

hover:cursor-pointerについて

cursor-pointerは「ホバーした時にカーソルが指マークになるプロパティ」なので、Tailwindのhover:をつけなくても正常に効きます。
なのでhover:は不要です。

Buttonのリンクの方法

 <Button color={theme.colorScheme === 'dark' ? "gray" : "dark"} radius="xl" onClick={handleGoTwitter}>
          View on Twitter
        </Button>

このように書かれていますが、下の書き方の方が自然だと思います。

<Button
      component="a"
      target="_blank"
      rel="noopener noreferrer"
      href="https://twitter.com/mantinedev"
    >
      Follow on Twitter
    </Button>

mantineのドキュメントが参考になります。
https://mantine.dev/core/button/

StarアイコンとForkアイコンの整列

こちら、divクラスのclassNameにflexと、items-center を追加すると、Starとforkのアイコンが上下**になってきれいに整列されると思います！

qin_portfolio/src/components/Github.tsx

Lines 53 to 58 in e5e2fa8

	<div className="mb-2 align-middle">
	<FaRegStar />
	<span className="ml-2 mr-4 text-xs items-center">{repositoryObj.basicData.stargazerCount}</span>
	<IconGitFork />
	<span className="ml-2 text-xs items-center">{repositoryObj.basicData.forkCount}</span>
	</div>

ジェネリクスに型をいれましょう

以下、取得するデータに型をつけることができます。

qin_portfolio/src/components/Github.tsx

Line 12 in 3267165

const {data, loading, error } = useQuery(GET_REPO_QUERY);

このようにすればいいかもしれません。
useQuery< GitHubRepoType>(GET_REPO_QUERY)

参考は公式から！
https://www.apollographql.com/docs/react/development-testing/static-typing/

省略してかけます

qin_portfolio/src/components/Github.tsx

Line 32 in 3267165

return {basicData: repositoryBasicData, languageDataList: languageDataList, langAreaList: langAreaList};

以下のように書けます。

{basicData: repositoryBasicData, languageDataList, langAreaList};

Next.jsでの外部リンクの取り扱い

 <div className="mr-2 cursor-pointer">
            <Link href="https://twitter.com/yamashin0413">
              <>
                <FaTwitter />
              </>
            </Link>
          </div>
          <div className="mr-2 cursor-pointer">
            <Link href="https://www.facebook.com/syamada01">
              <>
                <FaFacebook />
              </>
            </Link>
          </div>

index.tsx内で上のように書かれていますが、nextのLinkは外部リンクには使えないので、以下の記事を参考に、aタグで書き換えましょう！
https://maku.blog/p/vgs4dnw/

hundleGoBlog, hundleGoPortfolioについて

 <Button color={theme.colorScheme === 'dark' ? "gray" : "dark"} radius="xl" onClick={handleGoBlog}>
              View All
            </Button>

index.tsxで上のように書かれていますが、mantineのButtonにnextのLinkを使う書き方の方が自然だと思います。
少し特殊な書き方をするので、下の記事のusage-with-nextjsを参考にしましょう！
https://mantine.dev/core/button/#usage-with-nextjs

半角スペースが入っています

qin_portfolio/src/components/Github.tsx

Line 60 in 3267165

<Progress sections= {repositoryObj.langAreaList} />

変数名について

repositoryListで大丈夫かなと思います！

qin_portfolio/src/components/Github.tsx

Line 17 in 3267165

const repositoryObjList = data.user.repositories.edges.map((edge: any) => {

GraphQLの指定

次のように、privacyの指定や、orderByで並び替えをしているのが良いなと思いました！
repositories(last: 5, privacy: PUBLIC, orderBy: {field: UPDATED_AT, direction: ASC}) {

https://github.com/yamashin01/qin_portfolio/blob/main/src/utils/query.ts

githubのパーセンテージ

https://github.com/yamashin01/qin_portfolio/blob/main/src/components/Github.tsx

%の表示で小数点以下の桁数が異なるのが気になりました。好みもあるかと思いますが😅

現状

22行目（割合を算出）
const percentage = language.size / repositoryBasicData.languages.totalSize * 100;

68行目（有効桁数２桁に→0.の場合に0.xxとなってしまう）
<span className="text-gray-600 mr-4">{language.percentage.toPrecision(2)}%</span>

自分はこのようにしました。

const percentage = Math.round((language.size / repositoryBasicData.languages.totalSize )* 1000)/10;
<span className="text-gray-600 mr-4">{language.percentage}%</span>

*1000にした上で、Math.roundを使い小数点第一位で四捨五入
その後10で割ることで、xx.xの表示に

参考（Math.round　MDN）
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/round

markdownの表示方法

Blog記事の、markdownでの表示を見やすいように改善したい（現状のmicroCMSのmarkdown機能では不十分）。

• <code> ~ </code> の表示
  記載されているプログラミング言語に応じて、色付けした出力にしたい
• ページ内リンク
  目次からページ内の各項目に飛べるようにしたい

mapの書き方

qin_portfolio/src/components/Github.tsx

Lines 42 to 43 in 3267165

	{repositoryObjList.map((repositoryObj: any) => {
	return(

{repositoryObjList.map((repositoryObj: any) => (
 ...
)

microCMSからのデータ取得

microCMS上のブログやポートフォリオのデータに更新があるたびに、リアルタイムで取得、出力できるようにする

GraphQLのクエリ用コンポーネント

クエリだけコンポーネントをわけて保持しているのですね！可読性が良いので参考にさせて頂きます！

qin_portfolio/src/utils/query.ts

Line 1 in e5e2fa8

import { gql } from "@apollo/client";

Languageの表示

Languagesのパーセンテージバーのところですが、数字の大きいものから順に左側から表示させるのであれば、

languages(first: 100, orderBy: { field: SIZE, direction: DESC }) {
                totalCount...
                }

などとしてSIZEの大きいものから表示させると良いかなと思いました。

qin_portfolio/src/utils/query.ts

Lines 14 to 21 in e5e2fa8

	languages(first: 10) {
	edges {
	size
	node {
	id
	color
	name
	}