+
ツール
+
+ {["IntelliJ IDEA", "Slack", "VSCode"].map((tech) => (
+
{tech}
))}
-
+
);
-};
-
-export default Works;
+}
diff --git a/apps/frontend/src/app/apple-icon.png b/apps/frontend/src/app/apple-icon.png
deleted file mode 100644
index cb85e764..00000000
Binary files a/apps/frontend/src/app/apple-icon.png and /dev/null differ
diff --git a/apps/frontend/src/app/favicon.ico b/apps/frontend/src/app/favicon.ico
index bb363b89..718d6fea 100644
Binary files a/apps/frontend/src/app/favicon.ico and b/apps/frontend/src/app/favicon.ico differ
diff --git a/apps/frontend/src/app/globals.css b/apps/frontend/src/app/globals.css
new file mode 100644
index 00000000..f93e188a
--- /dev/null
+++ b/apps/frontend/src/app/globals.css
@@ -0,0 +1,142 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ ::selection {
+ @apply bg-black text-white;
+ }
+
+ html,
+ body {
+ /*@apply bg-violet-50;*/
+ @apply bg-[#FBF9FF];
+ /*color: rgb(var(--foreground-rgb));*/
+ }
+
+ html {
+ @apply scroll-smooth antialiased;
+ text-size-adjust: 100%;
+ text-rendering: optimizeLegibility;
+ }
+
+ body {
+ @apply font-sans text-base text-gray-500;
+ }
+
+ #__next {
+ /*@apply min-h-dynamic-screen;*/
+ }
+
+ article {
+ @apply flex flex-col;
+ }
+
+ p {
+ @apply mb-6 leading-relaxed;
+ }
+
+ a,
+ button {
+ @apply cursor-pointer outline-none;
+ }
+
+ a {
+ @apply transition-colors duration-300;
+ }
+
+ button:focus {
+ @apply outline-none;
+ }
+
+ button:disabled,
+ button[disabled] {
+ @apply cursor-not-allowed bg-gray-100;
+ }
+
+ h1,
+ h2,
+ h3 {
+ @apply scroll-mt-16 font-semibold slashed-zero tracking-tighter lg:scroll-mt-8;
+ }
+
+ h1 {
+ @apply text-2xl md:text-3xl;
+ }
+
+ h2 {
+ @apply text-lg md:text-xl;
+ }
+
+ h3 {
+ @apply md:text-lg;
+ }
+
+ h2 + h3 {
+ @apply !mt-0;
+ }
+
+ ol > li::marker {
+ @apply font-semibold;
+ }
+
+ ul > li {
+ @apply pl-2;
+ }
+
+ ul > li::marker {
+ @apply text-gray-400;
+ }
+
+ li div {
+ @apply inline;
+ }
+
+ li p,
+ li div,
+ li h1,
+ li h2 {
+ @apply my-0;
+ }
+
+ hr {
+ @apply my-6 border-gray-200;
+ }
+
+ pre {
+ @apply overflow-x-auto break-normal rounded-b-lg border-x border-b border-gray-500 p-3 text-left text-xs leading-relaxed;
+ }
+
+ code {
+ @apply whitespace-pre-wrap;
+ }
+
+ code .sh__line::before {
+ counter-increment: sh-line-number 1;
+ content: counter(sh-line-number);
+ margin-right: 24px;
+ text-align: right;
+ color: #a4a4a4;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ ::selection {
+ @apply bg-indigo-700 text-white;
+ }
+
+ html,
+ body {
+ @apply bg-zinc-800;
+ }
+
+ body {
+ @apply text-white;
+ }
+}
+
+@layer utilities {
+ .text-balance {
+ text-wrap: balance;
+ }
+}
diff --git a/apps/frontend/src/app/icon.svg b/apps/frontend/src/app/icon.svg
deleted file mode 100644
index 3c4276d0..00000000
--- a/apps/frontend/src/app/icon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
index 16452a55..c3c08199 100644
--- a/apps/frontend/src/app/layout.tsx
+++ b/apps/frontend/src/app/layout.tsx
@@ -1,63 +1,73 @@
-import '@/styles/globals.css';
-// include styles from the ui package
-import '@tatsutakeinjp/core-ui/styles.css';
-import GoogleAnalytics from '@/components/Utils/GoogleAnalytics';
-import { env } from '@/env.mjs';
-import { Analytics } from '@vercel/analytics/react';
-import { Metadata } from 'next';
-import React from 'react';
-
-const siteName = env.NEXT_PUBLIC_SITE_NAME;
-const description = 'Ryo Takeuchi のポートフォリオサイトです。';
-const url = env.NEXT_PUBLIC_SITE_URL;
+import type { Metadata, Viewport } from "next";
+import { env } from "@/env";
+import { GeistMono } from "geist/font/mono";
+import { GeistSans } from "geist/font/sans";
+
+import { cn } from "@tatsutakeinjp/ui";
+import { ThemeProvider } from "@tatsutakeinjp/ui/theme";
+import { Toaster } from "@tatsutakeinjp/ui/toast";
+
+import "@/app/globals.css";
+
+import type { JSX, ReactNode } from "react";
+import { Footer, Header } from "@/app/_components/navigation";
+
+const siteName = env.SITE_NAME;
export const metadata: Metadata = {
- metadataBase: new URL(env.NEXT_PUBLIC_SITE_URL),
+ metadataBase: new URL(env.VERCEL_ENV === "production" ? env.SITE_URL : "http://localhost:3000"),
title: {
+ template: `%s — ${siteName}`,
default: siteName,
- /** `next-seo`の`titleTemplate`に相当する機能 */
- template: `%s | ${siteName}`,
},
- description,
+ description: "Simple monorepo with shared backend for web & mobile apps",
openGraph: {
- title: siteName,
- description,
- url,
- siteName,
- locale: 'ja_JP',
- type: 'website',
+ title: {
+ template: `%s — ${siteName}`,
+ default: siteName,
+ },
+ description: "Simple monorepo with shared backend for web & mobile apps",
+ type: "website",
+ url: "/",
+ siteName: siteName,
+ locale: "ja_JP",
},
twitter: {
- card: 'summary_large_image',
+ card: "summary_large_image",
title: siteName,
- description,
- creator: '@tatsutakein',
- },
- alternates: {
- canonical: url,
+ site: "@tatsutakein",
+ creator: "@tatsutakein",
},
};
-// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'force-dynamic';
-
-interface LayoutProps {
- children: React.ReactNode;
-}
+export const viewport: Viewport = {
+ themeColor: [
+ { media: "(prefers-color-scheme: light)", color: "white" },
+ { media: "(prefers-color-scheme: dark)", color: "black" },
+ ],
+};
-const RootLayout: React.FC
= ({ children }) => {
- // noinspection HtmlRequiredTitleElement
+export default function RootLayout(props: { children: ReactNode }): JSX.Element {
return (
-
-
-
-
-
- {children}
-
+
+
+
+
+ {props.children}
+
+
+ {/**/}
+ {/* */}
+ {/*
*/}
+
+
);
-};
-
-export default RootLayout;
+}
diff --git a/apps/frontend/src/app/not-found.tsx b/apps/frontend/src/app/not-found.tsx
index c1fa8bdb..8f4636e5 100644
--- a/apps/frontend/src/app/not-found.tsx
+++ b/apps/frontend/src/app/not-found.tsx
@@ -1,48 +1,30 @@
-import { ContentsLayout } from '@/components/Layout';
-import { PagePath } from '@/lib/router';
-import Link from 'next/link';
+import type { JSX } from "react";
+import Link from "next/link";
+import { PagePath } from "@/lib/router";
-const NotFound: React.FC = () => {
+export default function NotFoundPage(): JSX.Element {
return (
-
-
-
-
-
- 404
-
+
+
+
+ 404
-
-
-
- Page not found
-
+
+
+
Page not found
-
- Please check the URL in the address bar and try again.
-
-
+
Please check the URL in the address bar and try again.
-
-
-
-
- Go back home
- →
-
+
+
+
+
+ Go back home
+ →
+
-
+
Ryo Takeuchi
+
);
-};
-
-export default Index;
+}
diff --git a/apps/frontend/src/app/patron/page.tsx b/apps/frontend/src/app/patron/page.tsx
index 26be931b..9b3354a7 100644
--- a/apps/frontend/src/app/patron/page.tsx
+++ b/apps/frontend/src/app/patron/page.tsx
@@ -1,89 +1,67 @@
-import { ContentsLayout } from '@/components/Layout';
-import { env } from '@/env.mjs';
-import { PagePath } from '@/lib/router';
-import { ExternalLinkIcon } from '@radix-ui/react-icons';
-import clsx from 'clsx';
-import { Metadata, NextPage } from 'next';
-import Link from 'next/link';
+import type { Metadata } from "next";
+import type { JSX } from "react";
+import Link from "next/link";
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import clsx from "clsx";
export const metadata: Metadata = {
- title: 'Patron',
- description: 'ご支援に関して',
+ title: "Patron",
+ description: "ご支援に関して",
};
-const Patron: NextPage = () => {
+export default function PatronPage(): JSX.Element {
return (
-
- ご支援に関して
- ご支援に関する内容とリンクをまとめます。
+
+ ご支援に関して
+ ご支援に関する内容とリンクをまとめます。
- 支援先
-
+ 支援先
+
-
Amazon
- {false && (
- -
-
- Stripe ( 準備中... )
-
-
- )}
-
+
);
-};
-
-export default Patron;
+}
-const AmazonWishListLinks: React.FC = () => (
-
- -
-
- いまほしいもの
-
-
-
- -
-
- いつでもほしいもの
-
-
-
- -
-
- ほしい Kindle 本
-
-
-
-
-);
+function AmazonWishListLinks(): JSX.Element {
+ return (
+
+ -
+
+ いまほしいもの
+
+
+
+ -
+
+ いつでもほしいもの
+
+
+
+ -
+
+ ほしい Kindle 本
+
+
+
+
+ );
+}
diff --git a/apps/frontend/src/app/policy/page.tsx b/apps/frontend/src/app/policy/page.tsx
index 883e1cc0..f606f322 100644
--- a/apps/frontend/src/app/policy/page.tsx
+++ b/apps/frontend/src/app/policy/page.tsx
@@ -1,92 +1,67 @@
-import { ContentsLayout } from '@/components/Layout';
-import { PagePath } from '@/lib/router';
-import clsx from 'clsx';
-import { Metadata, NextPage } from 'next';
+import type { Metadata } from "next";
+import type { JSX } from "react";
+import clsx from "clsx";
export const metadata: Metadata = {
- title: 'プライバシーポリシー',
- description: 'Ryo Takeuchi のポートフォリオサイトです。',
+ title: "プライバシーポリシー",
+ description: "Ryo Takeuchi のポートフォリオサイトです。",
};
-const Policy: NextPage = () => {
+export default function PrivacyPolicyPage(): JSX.Element {
return (
-
- プライバシーポリシー
+
+ プライバシーポリシー
-
+
本プライバシーポリシーは、当Webサイト(tatsutakein.jp)が収集し、利用する全ての個人情報を対象として、当Webサイトが保有する個人情報に関する基本的な取り決めを定めるものとします。
- 法律、法令等の遵守
-
+
法律、法令等の遵守
+
当Webサイトは個人情報を取り扱うにあたっては個人情報の保護に関する法令、ガイドラインおよび本プライバシーポリシーを遵守致します。
- 個人情報の収集について
-
- 提供する当Webサイトの運営に必要な範囲で個人情報を収集致します。
-
-
+
個人情報の収集について
+ 提供する当Webサイトの運営に必要な範囲で個人情報を収集致します。
+
当Webサイトでは、サイトの利用状況やユーザー属性情報（年齢、性別、興味や関心など）を把握するためにGoogle
Analyticsを利用しております。
- Google
- Analyticsではクッキー（cookie）を使用し個人を特定する情報を含まずにログを収集します。
+ Google Analyticsではクッキー（cookie）を使用し個人を特定する情報を含まずにログを収集します。
- なお、Google
- Analyticsの利用により収集されるログはGoogle社のプライバシーポリシーに基づいて管理されます。
+ なお、Google Analyticsの利用により収集されるログはGoogle社のプライバシーポリシーに基づいて管理されます。
- Google
- Analyticsについて、およびGoogle社のプライバシーポリシーについてはGoogle
- Analytics概要をご覧ください。
+ Google Analyticsについて、およびGoogle社のプライバシーポリシーについてはGoogle Analytics概要をご覧ください。
- 個人情報の利用
-
+
個人情報の利用
+
当Webサイトは、ユーザーご本人の同意を得た場合、および法令により例外として取り扱うことが認められている場合を除き、収集した個人情報について、収集の際に予め明示した目的または公表している利用目的においてのみ利用いたします。
- 個人情報の提供
-
+
個人情報の提供
+
当Webサイトは、個人情報をユーザーご本人の同意なしに、業務委託先以外の第三者に開示・提供することはありません。
ただし、裁判所、警察等の公的機関から開示を求められた場合には、ご本人の同意なく個人情報を開示・提供することがあります。
- 個人情報の開示および訂正等
-
+
個人情報の開示および訂正等
+
当Webサイトはユーザーご本人から、個人情報の訂正、削除、利用停止を求められた場合には、ご本人からのご請求であることを確認の上で遅滞なく必要な調査を行い、その結果に基づき、個人情報の内容の訂正、削除、利用停止を行い、その旨をご本人に通知します。
なお、合理的な理由に基づいて訂正または利用停止を行わない旨の決定をしたときは、ユーザーに対しその旨を通知します。
- 免責
-
+
免責
+
以下の場合は、第三者による個人情報の取得に関し、当Webサイトは何らの責任を負いません。
-
- -
- ユーザー自らが当Webサイト上の機能または別の手段を用いて第三者に個人情報を明らかにする場合
-
- -
- ユーザーが当Webサイト上に入力した情報、活動情報等により、期せずして個人が特定できてしまった場合
-
+
+ - ユーザー自らが当Webサイト上の機能または別の手段を用いて第三者に個人情報を明らかにする場合
+ - ユーザーが当Webサイト上に入力した情報、活動情報等により、期せずして個人が特定できてしまった場合
- 第三者が当Webサイト外で個人情報その他の利用者情報を取得した場合
-
+
);
-};
-
-export default Policy;
+}
diff --git a/apps/frontend/src/app/posts/[id]/page.tsx b/apps/frontend/src/app/posts/[id]/page.tsx
new file mode 100644
index 00000000..5f14b290
--- /dev/null
+++ b/apps/frontend/src/app/posts/[id]/page.tsx
@@ -0,0 +1,96 @@
+import type { Metadata } from "next";
+import type { JSX } from "react";
+import { notFound } from "next/navigation";
+import { PostContent } from "@/app/_features/post/components";
+import { getPostIdsQuery, getPostMetadataQuery, getPostQuery } from "@/app/_features/post/gql";
+import { env } from "@/env";
+import { queryClient } from "@/lib/query-client";
+import { PagePath } from "@/lib/router";
+import request from "graphql-request";
+
+interface PageProps {
+ params: { id: string };
+ searchParams: Record
;
+}
+
+// @see https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params
+export async function generateStaticParams(): Promise {
+ const data = await queryClient.fetchQuery({
+ queryKey: ["post-ids"],
+ queryFn: async () =>
+ request(
+ "https://tatsutakeinjp.hasura.app/v1/graphql",
+ getPostIdsQuery,
+ // variables are type-checked too!
+ { now: new Date() },
+ ),
+ });
+ const posts = data?.posts ?? [];
+ return posts.map((post) => ({ id: post.id }));
+}
+
+// @see https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating
+export const revalidate = 60;
+
+// @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
+export async function generateMetadata({ params: { id } }: PageProps): Promise {
+ const { posts_by_pk: post } = await queryClient.fetchQuery({
+ queryKey: ["post-metadata"],
+ queryFn: async () =>
+ request(
+ "https://tatsutakeinjp.hasura.app/v1/graphql",
+ getPostMetadataQuery,
+ // variables are type-checked too!
+ { id: id },
+ ),
+ });
+
+ if (!post) {
+ return {
+ title: "Post",
+ };
+ }
+
+ const url = `${env.SITE_NAME}${PagePath.blogDetail(id)}`;
+
+ return {
+ title: post.title,
+ description: post.excerpt,
+ openGraph: {
+ title: post.title,
+ description: post.excerpt ?? undefined,
+ url,
+ siteName: env.SITE_NAME,
+ locale: "ja_JP",
+ type: "article",
+ },
+ twitter: {
+ card: "summary_large_image",
+ title: `${post.title} | ${env.SITE_NAME}`,
+ description: post.excerpt ?? undefined,
+ creator: "@tatsutakein",
+ },
+ alternates: {
+ canonical: url,
+ },
+ };
+}
+
+export default async function PostPage({ params: { id } }: PageProps): Promise {
+ const { posts_by_pk: post } = await queryClient.fetchQuery({
+ queryKey: ["post"],
+ queryFn: async () =>
+ request(
+ "https://tatsutakeinjp.hasura.app/v1/graphql",
+ getPostQuery,
+ // variables are type-checked too!
+ { id: id },
+ ),
+ });
+
+ if (!post) {
+ notFound();
+ }
+
+ return <>{post && };
+}
diff --git a/apps/frontend/src/app/posts/[slug]/page.tsx b/apps/frontend/src/app/posts/[slug]/page.tsx
deleted file mode 100644
index d2c00b55..00000000
--- a/apps/frontend/src/app/posts/[slug]/page.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { getClient } from '@/app/ApolloClient';
-import { ContentsLayout } from '@/components/Layout';
-import { env } from '@/env.mjs';
-import { BlogContent } from '@/features/blog/components';
-import { HeroImage } from '@/features/blog/components/HeroImage';
-import {
- getPostMetadataQuery,
- getPostQuery,
- getPostSlugsQuery,
-} from '@/features/blog/gql';
-import { PagePath } from '@/lib/router';
-import { Metadata, NextPage } from 'next';
-import { notFound } from 'next/navigation';
-
-interface PageProps {
- params: { slug: string };
- searchParams: { [key: string]: string | string[] | undefined };
-}
-
-// @see https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params
-export async function generateStaticParams(): Promise {
- const {
- data: { posts },
- } = await getClient().query({
- query: getPostSlugsQuery,
- variables: {
- now: new Date(),
- },
- });
- return posts.map((post) => ({ slug: post.slug }));
-}
-
-// @see https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating
-export const revalidate = 60;
-
-// @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
-export async function generateMetadata({
- params: { slug },
-}: PageProps): Promise {
- const {
- data: { post },
- } = await getClient().query({
- query: getPostMetadataQuery,
- variables: {
- slug,
- },
- });
-
- if (!post) {
- return {
- title: 'Post',
- };
- }
-
- const url = `${env.NEXT_PUBLIC_SITE_URL}${PagePath.blogDetail(slug)}`;
-
- return {
- title: post.title,
- description: post.excerpt,
- openGraph: {
- title: post.title,
- description: post.excerpt,
- url,
- siteName: env.NEXT_PUBLIC_SITE_NAME,
- locale: 'ja_JP',
- type: 'article',
- },
- twitter: {
- card: 'summary_large_image',
- title: `${post.title} | ${env.NEXT_PUBLIC_SITE_NAME}`,
- description: post.excerpt,
- creator: '@tatsutakein',
- },
- alternates: {
- canonical: url,
- },
- };
-}
-
-const PostPage: NextPage = async ({ params: { slug } }) => {
- const {
- data: { post },
- } = await getClient().query({
- query: getPostQuery,
- variables: {
- slug,
- },
- });
-
- if (!post) {
- notFound();
- }
-
- return (
-
- }
- >
- {post && }
-
- );
-};
-
-export default PostPage;
diff --git a/apps/frontend/src/app/posts/page.tsx b/apps/frontend/src/app/posts/page.tsx
index 691a71fa..5005ec7d 100644
--- a/apps/frontend/src/app/posts/page.tsx
+++ b/apps/frontend/src/app/posts/page.tsx
@@ -1,69 +1,50 @@
-import { getClient } from '@/app/ApolloClient';
-import { ContentsLayout } from '@/components/Layout';
-import { PostCard } from '@/components/Surfaces';
-import { gql } from '@/gql';
-import { PagePath } from '@/lib/router';
-import { Metadata, NextPage } from 'next';
+import type { Metadata } from "next";
+import type { JSX } from "react";
+import { Suspense } from "react";
+import { LoadingSpinner } from "@/app/_components/utils";
+import { PostCard } from "@/app/_features/post/components";
+import { getPostsQuery } from "@/app/_features/post/gql";
+import { queryClient } from "@/lib/query-client";
+import request from "graphql-request";
export const metadata: Metadata = {
- title: 'Posts',
- description: 'Ryo Takeuchi のポートフォリオサイトです。',
+ title: "Posts",
+ description: "Ryo Takeuchi のポートフォリオサイトです。",
};
-const getPostsQuery = gql(`
- query Posts($now: DateTime!) {
- posts(
- where: {publishedAt_lte: $now}
- stage: PUBLISHED
- orderBy: publishedAt_DESC
- ) {
- slug
- title
- excerpt
- publishedAt
- coverImage {
- url
- }
- }
- }
-`);
+// @see https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating
+export const revalidate = 60;
-const PostListPage: NextPage = async () => {
- const { data } = await getClient().query({
- query: getPostsQuery,
- variables: {
- now: new Date(),
- },
+export default async function PostListPage(): Promise {
+ const data = await queryClient.fetchQuery({
+ queryKey: ["posts"],
+ queryFn: async () =>
+ request(
+ "https://tatsutakeinjp.hasura.app/v1/graphql",
+ getPostsQuery,
+ // variables are type-checked too!
+ { now: new Date() },
+ ),
});
const posts = data?.posts ?? [];
- const postList = posts.map(
- ({ slug, title, excerpt, publishedAt, coverImage }) => (
-
- ),
- );
+ const postList = posts.map(({ id, title, excerpt, published_at, coverImage }) => (
+
+ ));
return (
-
-
- {postList}
-
-
+
+ }>
+ {postList}
+
+
);
-};
-
-export default PostListPage;
-
-export const revalidate = 60;
+}
diff --git a/apps/frontend/src/app/products/page.tsx b/apps/frontend/src/app/products/page.tsx
index 1d79a8cb..99568417 100644
--- a/apps/frontend/src/app/products/page.tsx
+++ b/apps/frontend/src/app/products/page.tsx
@@ -1,55 +1,35 @@
-import { ContentsLayout } from '@/components/Layout';
-import { ProductCard } from '@/features/product/components/ProductCard';
-import { Product } from '@/features/product/types/product';
-import { PagePath } from '@/lib/router';
-import clsx from 'clsx';
-import { Metadata, NextPage } from 'next';
+import type { Product } from "@/app/_features/product";
+import type { Metadata } from "next";
+import type { JSX } from "react";
+import { ProductCard } from "@/app/_features/product";
+import clsx from "clsx";
export const metadata: Metadata = {
- title: 'Products',
- description: 'Ryo Takeuchi が制作したプロダクトを紹介します。',
+ title: "Products",
+ description: "Ryo Takeuchi が制作したプロダクトを紹介します。",
};
const products: Product[] = [
{
- href: 'https://play.google.com/store/apps/details?id=com.takechee.qrcodereader',
- title: 'バーコードリーダーアプリ',
+ href: "https://play.google.com/store/apps/details?id=com.takechee.qrcodereader",
+ title: "バーコードリーダーアプリ",
description: [
- '読み取り履歴があるバーコードリーダーアプリです。',
- 'AndroidView を利用してマルチモジュールな構成で構築しています。',
- '標準のカメラ機能が優秀になって利用頻度が減ってしまいました。',
- ].join('\n'),
- src: '/images/products/android-barcode-reader.png',
- techs: [
- 'Android',
- 'Kotlin',
- 'MultiModule',
- 'buildSrc',
- 'AndroidView',
- 'ZXing',
- 'Room',
- ],
+ "読み取り履歴があるバーコードリーダーアプリです。",
+ "AndroidView を利用してマルチモジュールな構成で構築しています。",
+ "標準のカメラ機能が優秀になって利用頻度が減ってしまいました。",
+ ].join("\n"),
+ src: "/images/products/android-barcode-reader.png",
+ techs: ["Android", "Kotlin", "MultiModule", "buildSrc", "AndroidView", "ZXing", "Room"],
},
];
-const Products: NextPage = () => {
- const productList = products.map((work) => (
-
- ));
+export default function ProductsPage(): JSX.Element {
+ const productList = products.map((work) => );
return (
-
- Products
- {productList}
-
+
+ Products
+ {productList}
+
);
-};
-
-export default Products;
+}
diff --git a/apps/frontend/src/app/tags/[...slug]/page.tsx b/apps/frontend/src/app/tags/[...slug]/page.tsx
deleted file mode 100644
index 23cbd350..00000000
--- a/apps/frontend/src/app/tags/[...slug]/page.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ContentsLayout } from '@/components/Layout';
-import { PagePath } from '@/lib/router';
-import clsx from 'clsx';
-import { Metadata, NextPage } from 'next';
-import Link from 'next/link';
-
-export const metadata: Metadata = {
- title: 'Tags',
- description: 'Ryo Takeuchi のポートフォリオサイトです。',
-};
-
-interface PageProps {
- params: { slug: string[] };
- searchParams: { [key: string]: string | string[] | undefined };
-}
-
-const Tags: NextPage = ({ params: { slug } }) => {
- const tags = slug;
-
- return (
-
- Tags
-
- {/* Tags */}
-
- {tags.map((tag) => (
-
- # {tag}
-
- ))}
-
-
- );
-};
-
-export default Tags;
diff --git a/apps/frontend/src/app/works/page.tsx b/apps/frontend/src/app/works/page.tsx
index d9f1e4b5..ccd40780 100644
--- a/apps/frontend/src/app/works/page.tsx
+++ b/apps/frontend/src/app/works/page.tsx
@@ -1,70 +1,55 @@
-import { ContentsLayout } from '@/components/Layout';
-import { WorkCard } from '@/features/work/components';
-import { Work } from '@/features/work/types';
-import { PagePath } from '@/lib/router';
-import clsx from 'clsx';
-import { Metadata, NextPage } from 'next';
+import type { Work } from "@/app/_features/work/types";
+import type { Metadata } from "next";
+import type { JSX } from "react";
+import { WorkCard } from "@/app/_features/work/components";
+import clsx from "clsx";
export const metadata: Metadata = {
- title: 'Works',
- description: 'Ryo Takeuchi が携わったお仕事を紹介します。',
+ title: "Works",
+ description: "Ryo Takeuchi が携わったお仕事を紹介します。",
};
const works: Work[] = [
{
- status: 'In Progress',
+ status: "In Progress",
href: null,
- title: 'Unknown',
- description:
- 'フロントエンドに Next.js, バックエンドに Golang を用いたサービスの開発に携わっています。',
- src: '/images/hero-default.png',
- techs: ['Next.js', 'TypeScript', 'Tailwind CSS', 'Golang'],
+ title: "Unknown",
+ description: "フロントエンドに Next.js, バックエンドに Golang を用いたサービスの開発に携わっています。",
+ src: "/images/hero-default.png",
+ techs: ["Next.js", "TypeScript", "Tailwind CSS", "Golang"],
},
{
- status: 'Done',
- href: 'https://yoshikawa-fc.com/',
- title: 'YOSHiKAWA CiTY FC',
+ status: "Done",
+ href: "https://yoshikawa-fc.com/",
+ title: "YOSHiKAWA CiTY FC",
description: [
- '埼玉県吉川市のサッカーチーム YOSHiKAWA CiTY FC の公式サイトです。',
- 'React(Next.js), Tailwind CSS, Supabase などを利用して作成しました。',
- ].join('\n'),
- src: '/images/works/yoshikawa-city-fc.png',
- techs: ['Next.js', 'TypeScript', 'Tailwind CSS', 'Supabase', 'Vercel'],
+ "埼玉県吉川市のサッカーチーム YOSHiKAWA CiTY FC の公式サイトです。",
+ "React(Next.js), Tailwind CSS, Supabase などを利用して作成しました。",
+ ].join("\n"),
+ src: "/images/works/yoshikawa-city-fc.png",
+ techs: ["Next.js", "TypeScript", "Tailwind CSS", "Supabase", "Vercel"],
},
{
- status: 'Done',
- href: 'https://fc-puentet.com/',
- title: 'FCプエンテット',
+ status: "Done",
+ href: "https://fc-puentet.com/",
+ title: "FCプエンテット",
description: [
- '埼玉県吉川市、越谷市、三郷市で活動する社会人サッカークラブの公式サイトです。',
- 'React(Next.js), Tailwind CSS, Framer Motion, Supabase などを利用して作成しました。',
- '2023年07月以降は別の技術を利用して運用されているようです。',
- ].join('\n'),
- src: '/images/works/fc-puentet.webp',
- techs: ['Next.js', 'TypeScript', 'Tailwind CSS', 'Supabase', 'Vercel'],
+ "埼玉県吉川市、越谷市、三郷市で活動する社会人サッカークラブの公式サイトです。",
+ "React(Next.js), Tailwind CSS, Framer Motion, Supabase などを利用して作成しました。",
+ "2023年07月以降は別の技術を利用して運用されているようです。",
+ ].join("\n"),
+ src: "/images/works/fc-puentet.webp",
+ techs: ["Next.js", "TypeScript", "Tailwind CSS", "Supabase", "Vercel"],
},
];
-const Works: NextPage = () => {
- const workList = works.map((work) => (
-
- ));
+export default function WorksPage(): JSX.Element {
+ const workList = works.map((work) => );
return (
-
- Works
-
- {workList}
-
-
+
+ Works
+ {workList}
+
);
-};
-
-export default Works;
+}
diff --git a/apps/frontend/src/components/Assets/ProfileImage.tsx b/apps/frontend/src/components/Assets/ProfileImage.tsx
deleted file mode 100644
index ead834f3..00000000
--- a/apps/frontend/src/components/Assets/ProfileImage.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Image from 'next/image';
-import { CSSProperties } from 'react';
-
-interface Props {
- className?: string;
- style?: CSSProperties;
-}
-
-export const ProfileImage: (props: Props) => JSX.Element = ({
- className,
- style,
-}) => {
- return (
-
- );
-};
diff --git a/apps/frontend/src/components/Assets/index.ts b/apps/frontend/src/components/Assets/index.ts
deleted file mode 100644
index f03abf80..00000000
--- a/apps/frontend/src/components/Assets/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './About';
-export * from './Blog';
-export * from './Contact';
-export * from './Logo';
-export * from './ProfileImage';
-export * from './Products';
diff --git a/apps/frontend/src/components/DataDisplay/DropdownMenu.tsx b/apps/frontend/src/components/DataDisplay/DropdownMenu.tsx
deleted file mode 100644
index 4717dc54..00000000
--- a/apps/frontend/src/components/DataDisplay/DropdownMenu.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { filterElement, findElement } from '@/utils/element';
-import { Menu, Transition } from '@headlessui/react';
-import clsx from 'clsx';
-import React, {
- Fragment,
- MouseEvent,
- MouseEventHandler,
- ReactNode,
-} from 'react';
-
-interface Props {
- children: ReactNode | ReactNode[];
- rootClassName?: string;
- itemsClassName?: string;
- as?: React.ElementType;
- divide?: boolean;
-}
-
-export const DropdownMenu = ({
- as = 'div',
- divide = true,
- ...props
-}: Props): JSX.Element => {
- const childElements = React.Children.toArray(props.children);
- const ButtonElement = findElement(childElements, DropdownMenu.Button);
- const ItemElements = filterElement(childElements, DropdownMenu.MenuItem);
-
- return (
-
- );
-};
-
-// ---
-
-interface DropdownMenuButtonProps {
- children: ReactNode;
- disabled?: boolean;
- className?: string;
- as?: React.ElementType;
- onClick?: MouseEventHandler;
-}
-
-// eslint-disable-next-line react/display-name
-DropdownMenu.Button = ({
- as = 'button',
- ...props
-}: DropdownMenuButtonProps): JSX.Element => {
- return (
-
- {props.children}
-
- );
-};
-
-// ---
-
-interface DropdownMenuItemProps {
- children: ReactNode;
- disabled?: boolean;
- className?: string;
- as?: React.ElementType;
- href?: string;
- target?: string;
- onClick?: MouseEventHandler;
-}
-
-// eslint-disable-next-line react/display-name
-DropdownMenu.MenuItem = ({
- as = 'div',
- ...props
-}: DropdownMenuItemProps): JSX.Element => {
- const handleClick = (event: MouseEvent) => {
- if (props.onClick && !props.disabled) {
- props.onClick(event);
- }
- };
-
- return (
-
-
- {props.children}
-
-
- );
-};
diff --git a/apps/frontend/src/components/DataDisplay/Markdown.tsx b/apps/frontend/src/components/DataDisplay/Markdown.tsx
deleted file mode 100644
index 662a6324..00000000
--- a/apps/frontend/src/components/DataDisplay/Markdown.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-'use client';
-
-import { CopyIcon, ExternalLinkIcon } from '@radix-ui/react-icons';
-import clsx from 'clsx';
-import { useState } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import ReactMarkdown from 'react-markdown';
-import { CodeProps } from 'react-markdown/lib/ast-to-react';
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-
-interface Props {
- markdown: string;
- className?: string;
-}
-
-/**
- * Markdown
- */
-export const Markdown = ({ markdown, className }: Props): JSX.Element => {
- const markdownText = markdown.replace(/\n/g, ' \n');
-
- return (
-
-
{children}
,
- h2: ({ children }) => {children}
,
- h3: ({ children }) => {children}
,
- p: ({ children }) => {
- return {children}
;
- },
- a: ({ href, children }) => {
- return (
-
- {children}
-
-
- );
- },
- }}
- >
- {markdownText}
-
-
- {codeText}
-
- );
- }
-
- return (
-
-
-
- {showCopied && Copied!}
-
-
-
-
- {fileName && (
-
-
- {fileName}
-
-
- )}
-
- {matchLang ? (
-
- {codeText}
-
- ) : (
-
- {codeText}
-
- )}
-
- {heroImage}
-
-
- {children}
-
-
-
-
-
- );
-};
diff --git a/apps/frontend/src/components/Layout/index.ts b/apps/frontend/src/components/Layout/index.ts
deleted file mode 100644
index 44866726..00000000
--- a/apps/frontend/src/components/Layout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ContentsLayout';
diff --git a/apps/frontend/src/components/Navigation/Footer.tsx b/apps/frontend/src/components/Navigation/Footer.tsx
deleted file mode 100644
index 3589bbb0..00000000
--- a/apps/frontend/src/components/Navigation/Footer.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { PagePath } from '@/lib/router';
-import {
- faGithub,
- faInstagram,
- faTwitter,
-} from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { NoteIcon } from '@tatsutakeinjp/core-ui';
-import Link from 'next/link';
-
-const NAVIGATIONS = {
- main: [
- { name: 'About', href: PagePath.about() },
- { name: 'Blog', href: PagePath.blogIndex() },
- { name: 'Products', href: PagePath.products() },
- { name: 'Works', href: PagePath.works() },
- { name: 'Patron', href: PagePath.patron() },
- { name: 'Policy', href: PagePath.policy() },
- ],
- social: [
- {
- name: 'GitHub',
- href: 'https://github.com/tatsutakein',
- icon: () => (
-
- ),
- },
- {
- name: 'Twitter',
- href: 'https://twitter.com/tatsutakein',
- icon: () => (
-
- ),
- },
- {
- name: 'Instagram',
- href: 'https://www.instagram.com/tatsutakein/',
- icon: () => (
-
- ),
- },
- {
- name: 'Note',
- href: 'https://note.com/tatsutakein/',
- icon: () => (
-
- ),
- },
- ],
-};
-
-export const Footer = (): JSX.Element => (
-
-);
diff --git a/apps/frontend/src/components/Navigation/Header.tsx b/apps/frontend/src/components/Navigation/Header.tsx
deleted file mode 100644
index 845952a7..00000000
--- a/apps/frontend/src/components/Navigation/Header.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { About, Blog, Logo, Products } from '@/components/Assets';
-import { Works } from '@/components/Assets/Works';
-import { MobileHeaderMenu } from '@/components/Navigation/MobileHeaderMenu';
-import { PagePath } from '@/lib/router';
-import Link from 'next/link';
-import React from 'react';
-
-const MENUS = [
- {
- a: {
- name: 'About',
- href: PagePath.about(),
- },
- text: () => {
- return (
-
- );
- },
- },
- {
- a: {
- name: 'Blog',
- href: PagePath.blogIndex(),
- },
- text: () => {
- return (
-
- );
- },
- },
- {
- a: {
- name: 'Products',
- href: PagePath.products(),
- },
- text: () => {
- return (
-
- );
- },
- },
- {
- a: {
- name: 'Works',
- href: PagePath.works(),
- },
- text: () => {
- return (
-
- );
- },
- },
-];
-
-export const Header = (): JSX.Element => {
- const siteName = 'tatsutakein';
-
- return (
-
- );
-};
diff --git a/apps/frontend/src/components/Navigation/index.ts b/apps/frontend/src/components/Navigation/index.ts
deleted file mode 100644
index 3384cbe2..00000000
--- a/apps/frontend/src/components/Navigation/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Footer';
-export * from './Header';
diff --git a/apps/frontend/src/components/Surfaces/PostCard.tsx b/apps/frontend/src/components/Surfaces/PostCard.tsx
deleted file mode 100644
index a16687e4..00000000
--- a/apps/frontend/src/components/Surfaces/PostCard.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { formatDateEn, utcToJstTime } from '@/utils/date';
-import { countText, hasJa } from '@/utils/text';
-import clsx from 'clsx';
-import Image from 'next/image';
-import Link from 'next/link';
-import React from 'react';
-
-interface Props {
- href: string;
- title: string;
- description?: string | undefined | null;
- publishedAt?: string;
- heroImage: string | null;
- heroText?: string | undefined | null;
-}
-
-export const PostCard: React.FC = ({
- href,
- title,
- description,
- publishedAt,
- heroImage,
- heroText,
-}) => {
- return (
-
-
- {/* ヒーロー画像 */}
-
-
-
- 6
- ? 'text-2xl'
- : 'text-3xl',
- )}
- style={{ textShadow: '1px 1px 4px rgb(0 0 0 / 25%)' }}
- >
- {heroText}
-
-
-
- {/* 記事情報 */}
-
-
{title}
-
- {description && (
-
- {description}
-
- )}
-
-
-
-
-
*/}
- {/* {post?.description}*/}
- {/*
*/}
- {/*)}*/}
-
-
-
- {/* Header */}
-
-
-
- {/* eslint-disable-next-line @typescript-eslint/no-unsafe-argument */}
-
-
-
-
- {/* Body */}
-
-
-
-
- );
-};
diff --git a/apps/frontend/src/features/blog/components/BlogSection.tsx b/apps/frontend/src/features/blog/components/BlogSection.tsx
deleted file mode 100644
index 77b838e7..00000000
--- a/apps/frontend/src/features/blog/components/BlogSection.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-
-interface Props {
- children?: ReactNode;
-}
-
-export const BlogSection = (props: Props): JSX.Element => {
- return (
-
- );
-};
diff --git a/apps/frontend/src/features/blog/components/HeroImage.tsx b/apps/frontend/src/features/blog/components/HeroImage.tsx
deleted file mode 100644
index 76eb99ea..00000000
--- a/apps/frontend/src/features/blog/components/HeroImage.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { CONTENTS_MAX_WIDTH } from '@/components/Layout';
-import { PagePath } from '@/lib/router';
-import { formatDateEn, utcToJstTime } from '@/utils/date';
-import { CalendarIcon } from '@radix-ui/react-icons';
-import clsx from 'clsx';
-import Image from 'next/image';
-import Link from 'next/link';
-
-interface Props {
- heroImage?: string;
- heroText?: string | null;
- title: string;
- publishedAt: string;
- tags: string[];
-}
-
-export const HeroImage = ({
- heroImage,
- heroText,
- title,
- publishedAt,
- tags,
-}: Props): JSX.Element => {
- const localPublishedAt = formatDateEn(utcToJstTime(new Date(publishedAt)));
-
- return (
-
- {/* Image */}
- {heroImage && (
-
- )}
- {!heroImage && (
-
- )}
-
- {/* Blur */}
-
-
-
-
- {/* Hero Text */}
- {heroText &&
{heroText}
}
-
- {/* Title */}
-
- {title}
-
-
- {/* Update Date */}
-
-
-
-
-
- {/* Tags */}
-
- {tags.map((tag) => (
-
- # {tag}
-
- ))}
-
-
-
-
-
-
-
- {/* 記事情報 */}
-
-
{title}
-
-
- {description}
-
-
-
- {techs.map((tech) => (
-
- {tech}
-
- ))}
-
-
-
-
-
- {/* 記事情報 */}
-
-
-
-
- {description}
-
-
-
- {techs.map((tech) => (
-
- {tech}
-
- ))}
-
-
+[](https://opensource.org/licenses/MIT)
+[](https://docs.github.com/en/code-security/dependabot)
+[](https://app.renovatebot.com/dashboard)
+
# tatsutakein.jp
-https://tatsutakein.jp
-
-## Tech Stacks
+
+ )}
+
+ {/* Blur */}
+
+
+