8 |
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/packages/frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true,
22 | "baseUrl": "."
23 | },
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/packages/frontend/src/callback.tsx:
--------------------------------------------------------------------------------
1 | import { useHandleSignInCallback } from "@logto/react";
2 | import { useNavigate } from "@tanstack/react-router";
3 | import { Spinner } from "@nextui-org/react";
4 |
5 | const CallBackPage = () => {
6 | // ログイン後にリダイレクトする関数をフックより取得
7 | const navigate = useNavigate({
8 | from: "/auth/callback",
9 | });
10 |
11 | // ログイン後にリダイレクト
12 | const { isLoading } = useHandleSignInCallback(() => {
13 | navigate({
14 | to: "/auth/posts",
15 | });
16 | });
17 |
18 | // ログインしている状態であれば
19 | if (isLoading) {
20 | return (
21 | callstack
10 |callstackボイラープレートのサンプルです。
11 |
22 |
24 | );
25 | }
26 | };
27 |
28 | export { CallBackPage };
29 |
--------------------------------------------------------------------------------
/packages/frontend/.storybook/preview.ts:
--------------------------------------------------------------------------------
1 | import type { Preview } from '@storybook/react';
2 | import { withThemeByClassName } from '@storybook/addon-styling';
3 | import '../src/index.css';
4 |
5 | const preview: Preview = {
6 | parameters: {
7 | actions: { argTypesRegex: '^on[A-Z].*' },
8 | controls: {
9 | matchers: {
10 | color: /(background|color)$/i,
11 | date: /Date$/,
12 | },
13 | },
14 | },
15 |
16 | decorators: [
17 | // Adds theme switching support.
18 | // NOTE: requires setting "darkMode" to "class" in your tailwind config
19 | withThemeByClassName({
20 | themes: {
21 | light: 'light',
22 | dark: 'dark',
23 | },
24 | defaultTheme: 'light',
25 | }),
26 | ],
27 | };
28 |
29 | export default preview;
30 |
--------------------------------------------------------------------------------
/packages/docs/docs/tutorial-basics/deploy-your-site.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 5
3 | ---
4 |
5 | # Deploy your site
6 |
7 | Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
8 |
9 | It builds your site as simple **static HTML, JavaScript and CSS files**.
10 |
11 | ## Build your site
12 |
13 | Build your site **for production**:
14 |
15 | ```bash
16 | npm run build
17 | ```
18 |
19 | The static files are generated in the `build` folder.
20 |
21 | ## Deploy your site
22 |
23 | Test your production build locally:
24 |
25 | ```bash
26 | npm run serve
27 | ```
28 |
29 | The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
30 |
31 | You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
32 |
--------------------------------------------------------------------------------
/packages/backend/prisma/migrations/20230704065830_init/migration.sql:
--------------------------------------------------------------------------------
1 | -- CreateTable
2 | CREATE TABLE "User" (
3 | "uuid" TEXT NOT NULL,
4 | "email" TEXT NOT NULL,
5 |
6 | CONSTRAINT "User_pkey" PRIMARY KEY ("uuid")
7 | );
8 |
9 | -- CreateTable
10 | CREATE TABLE "Profile" (
11 | "uuid" TEXT NOT NULL,
12 | "age" INTEGER NOT NULL,
13 | "name" TEXT NOT NULL,
14 | "userId" TEXT NOT NULL,
15 |
16 | CONSTRAINT "Profile_pkey" PRIMARY KEY ("uuid")
17 | );
18 |
19 | -- CreateIndex
20 | CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
21 |
22 | -- CreateIndex
23 | CREATE UNIQUE INDEX "Profile_uuid_key" ON "Profile"("uuid");
24 |
25 | -- CreateIndex
26 | CREATE UNIQUE INDEX "Profile_userId_key" ON "Profile"("userId");
27 |
28 | -- AddForeignKey
29 | ALTER TABLE "Profile" ADD CONSTRAINT "Profile_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("uuid") ON DELETE RESTRICT ON UPDATE CASCADE;
30 |
--------------------------------------------------------------------------------
/packages/docs/sidebars.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Creating a sidebar enables you to:
3 | - create an ordered group of docs
4 | - render a sidebar for each doc of that group
5 | - provide next/previous navigation
6 |
7 | The sidebars can be generated from the filesystem, or explicitly defined here.
8 |
9 | Create as many sidebars as you want.
10 | */
11 |
12 | // @ts-check
13 |
14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
15 | const sidebars = {
16 | // By default, Docusaurus generates a sidebar from the docs folder structure
17 | tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
18 |
19 | // But you can create a sidebar manually
20 | /*
21 | tutorialSidebar: [
22 | 'intro',
23 | 'hello',
24 | {
25 | type: 'category',
26 | label: 'Tutorial',
27 | items: ['tutorial-basics/create-a-document'],
28 | },
29 | ],
30 | */
31 | };
32 |
33 | module.exports = sidebars;
34 |
--------------------------------------------------------------------------------
/packages/frontend/src/env.ts:
--------------------------------------------------------------------------------
1 | // 環境変数を取得し、開発環境かどうかを判定
2 | const is_dev = import.meta.env.MODE === "development";
3 |
4 | // 開発環境であれば、環境変数からJWTを取得
5 | // 本番環境であれば、空文字を設定
6 | const dev_jwt_token = is_dev ? import.meta.env.VITE_JWT_TOKEN || "" : "";
7 |
8 | // 開発環境であれば、空文字を設定
9 | // 本番環境であれば、LogtoエンドポイントのURLを設定
10 | const logto_endpoint = is_dev ? "" : import.meta.env.VITE_LOGTO_ENDPOINT || "";
11 |
12 | // 開発環境であれば、空文字を設定
13 | // 本番環境であれば、LogtoのアプリケーションIDを設定
14 | const logto_app_id = is_dev ? "" : import.meta.env.VITE_LOGTO_APPID || "";
15 |
16 | // 開発環境であれば、空文字を設定
17 | // 本番環境であれば、Logtoのapiリソースを設定
18 | const logto_api_resource = is_dev ? "" : import.meta.env.VITE_LOGTO_API_RESOURCE || "";
19 |
20 | // ホスト名を取得
21 | // 開発環境であれば、localhostを設定
22 | // 本番環境であれば、環境変数から取得
23 | const hostname = is_dev ? "localhost:6173" : import.meta.env.VITE_HOSTNAME || "";
24 |
25 | export { is_dev, dev_jwt_token, logto_endpoint, logto_app_id, logto_api_resource, hostname };
26 |
--------------------------------------------------------------------------------
/packages/docs/README.md:
--------------------------------------------------------------------------------
1 | # Website
2 |
3 | This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
4 |
5 | ### Installation
6 |
7 | ```
8 | $ yarn
9 | ```
10 |
11 | ### Local Development
12 |
13 | ```
14 | $ yarn start
15 | ```
16 |
17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18 |
19 | ### Build
20 |
21 | ```
22 | $ yarn build
23 | ```
24 |
25 | This command generates static content into the `build` directory and can be served using any static contents hosting service.
26 |
27 | ### Deployment
28 |
29 | Using SSH:
30 |
31 | ```
32 | $ USE_SSH=true yarn deploy
33 | ```
34 |
35 | Not using SSH:
36 |
37 | ```
38 | $ GIT_USER=
26 |
28 | );
29 | }
30 | return My React page
25 |This is a React page
26 |
28 |
30 | );
31 |
32 | return (
33 |
34 |
40 | );
41 | // graphqlのフラグメントマスキングでやむを得ずmapのkeyでインデックスを使っているので、少し心配
42 | };
43 |
44 | export { UsersPage };
45 |
--------------------------------------------------------------------------------
/packages/frontend/src/features/posts/pages/PostsPage.tsx:
--------------------------------------------------------------------------------
1 | import { useQuery } from "urql";
2 | import { graphql } from "src/lib/generated/gql";
3 | import { PostCard } from "../components/PostCard";
4 | import { Spinner } from "@nextui-org/react";
5 |
6 | // 利用されるクエリの定義
7 | const GetAllPostsQuery = graphql(`
8 | query GetAllPostsQuery {
9 | getAllPosts(limit: 10) {
10 | ...PostFragment
11 | }
12 | }
13 | `);
14 |
15 | const PostsPage = () => {
16 | // graphqlに対してクエリを実行
17 | const [result] = useQuery({
18 | query: GetAllPostsQuery,
19 | });
20 |
21 | // クエリの結果を取得
22 | const { data, fetching } = result;
23 |
24 | // ローディング中であれば
25 | if (fetching)
26 | return (
27 |
35 | {data?.getAllUsers.map((user, i) => (
36 |
39 |
28 |
30 | );
31 |
32 | return (
33 |
34 |
40 | );
41 | // graphqlのフラグメントマスキングでやむを得ずmapのkeyでiを使っているので、少し心配
42 | };
43 |
44 | export { PostsPage };
45 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | # masterブランチへのpushに対応する
5 | push:
6 | branches: ["master"]
7 | # プルリクエストでのCIに対応する
8 | pull_request:
9 | types: [opened, synchronize]
10 |
11 | # 手動での実行に対応する
12 | workflow_dispatch:
13 |
14 |
15 | jobs:
16 | check:
17 | runs-on: ubuntu-latest
18 | timeout-minutes: 15
19 |
20 | # 環境変数の読み込み
21 | env:
22 | SCHEMA_PATH: ../graphql/schemas/*.graphql
23 | # OPERATION_PATH: ../graphql/operations/*.graphql
24 |
25 | # 実行ステップ
26 | steps:
27 | - uses: actions/checkout@v2
28 |
29 | - uses: pnpm/action-setup@v2.2.4
30 | with:
31 | version: 8.6.3
32 |
33 | - name: Setup Node.js environment
34 | uses: actions/setup-node@v3
35 | with:
36 | node-version: 18
37 | cache: "pnpm"
38 |
39 | # 依存関係のインストール
40 | - name: install dependencies
41 | run: pnpm install --frozen-lockfile
42 |
43 | # 型チェック
44 | - name: typecheck
45 | run: pnpm turbo typecheck
46 |
47 | # ビルド
48 | - name: build
49 | run: pnpm turbo build
50 |
51 | # - name: eslint
52 | # run: pnpm lint
53 |
54 | # - name: prettier
55 | # run: pnpm format
56 |
--------------------------------------------------------------------------------
/packages/backend/prisma/schema.prisma:
--------------------------------------------------------------------------------
1 | // This is your Prisma schema file,
2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
3 |
4 | // ロールを格納する列挙型を定義
5 | enum Role {
6 | ADMIN
7 | USER
8 | }
9 |
10 | // データベースソースの設定
11 | datasource db {
12 | provider = "postgresql"
13 | url = env("DATABASE_URL")
14 | }
15 |
16 | generator client {
17 | provider = "prisma-client-js"
18 | }
19 |
20 | // ユーザのモデルを定義
21 | // UUIDがプライマリキーの役割を果たす
22 | // ユーザとプロフィールは1対1の関係
23 | model User {
24 | user_uuid String @id @default(uuid())
25 | auth_sub String @unique
26 | handle String @unique
27 | screen_name String
28 | bio String
29 | image_url String
30 | created_at DateTime @default(now())
31 | updated_at DateTime @updatedAt
32 | role Role @default(USER)
33 | posts Post[]
34 | }
35 |
36 | // 投稿のモデルを定義
37 | // UUIDがプライマリキーの役割を果たす
38 | model Post {
39 | post_uuid String @id @default(uuid()) // UUIDはPrismaのデフォルトの関数を使用
40 | user User @relation(fields: [userUuid], references: [user_uuid])
41 | userUuid String
42 | title String
43 | body String
44 | created_at DateTime @default(now())
45 | updated_at DateTime @updatedAt
46 | is_public Boolean @default(false)
47 | }
48 |
--------------------------------------------------------------------------------
/packages/docs/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import clsx from "clsx";
3 | import Link from "@docusaurus/Link";
4 | import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
5 | import Layout from "@theme/Layout";
6 | import HomepageFeatures from "@site/src/components/HomepageFeatures";
7 |
8 | import styles from "./index.module.css";
9 |
10 | function HomepageHeader() {
11 | const { siteConfig } = useDocusaurusContext();
12 | return (
13 |
35 | {data?.getAllPosts.map((post, i) => (
36 |
39 |
15 |
23 | {siteConfig.title}
16 |{siteConfig.tagline}
17 |
18 |
19 | チュートリアルを確認する
20 |
21 |
22 |
37 |
39 | );
40 |
41 | return (
42 |
43 |
45 | );
46 | };
47 |
48 | export { PostDetailPage };
49 |
--------------------------------------------------------------------------------
/packages/backend/src/env.ts:
--------------------------------------------------------------------------------
1 | // 環境変数を取得し、開発環境かどうかを判定
2 | const is_dev = process.env.NODE_ENV === "development";
3 |
4 | // 環境変数が存在していれば、そのパスから読み込み
5 | // 環境変数が存在しなければ、../graphql/schema.graphqlから読み込み
6 | const schema_path = process.env.SCHEMA_PATH || "../graphql/schemas/*.graphql";
7 |
8 | // minioの内部エンドポイントを設定
9 | const minio_inside_endpoint = process.env.MINIO_INSIDE_ENDPOINT || "";
10 |
11 | // minioの外部エンドポイントを設定
12 | const minio_outside_endpoint = process.env.MINIO_OUTSIDE_ENDPOINT || "";
13 |
14 | // minioのユーザー名とパスワードを取得
15 | const minio_root_user = process.env.MINIO_ROOT_USER || "";
16 | const minio_root_password = process.env.MINIO_ROOT_PASSWORD || "";
17 |
18 | // minioのバケット名を設定
19 | const minio_bucket_name = process.env.MINIO_BUCKET_NAME || "";
20 |
21 | // 開発環境であれば、空文字を設定
22 | // 本番環境であれば、LogtoエンドポイントのURLを設定
23 | const logto_endpoint = is_dev ? "" : process.env.LOGTO_ENDPOINT || "";
24 |
25 | // 開発環境であれば、空文字を設定
26 | // 本番環境であれば、Logtoのオーディエンスを設定
27 | const logto_audience = is_dev ? "" : process.env.LOGTO_AUDIENCE || "";
28 |
29 | // 開発環境であれば、空文字を設定
30 | // 本番環境であれば、Logtoのwebhookの検証用シークレットを設定
31 | const logto_webhook_secret = is_dev ? "" : process.env.LOGTO_WEBHOOK_SECRET || "";
32 |
33 | export {
34 | is_dev,
35 | minio_inside_endpoint,
36 | minio_outside_endpoint,
37 | minio_root_user,
38 | minio_root_password,
39 | minio_bucket_name,
40 | logto_endpoint,
41 | logto_audience,
42 | schema_path,
43 | logto_webhook_secret,
44 | };
45 |
--------------------------------------------------------------------------------
/packages/backend/src/lib/scalars/ScreenNameString.ts:
--------------------------------------------------------------------------------
1 | import { ASTNode, GraphQLScalarType, Kind } from "graphql";
2 | import { createGraphQLError } from "graphql-yoga";
3 |
4 | const validate = (value: any, ast?: ASTNode) => {
5 | if (typeof value !== "string") {
6 | throw createGraphQLError(`Value is not a string: ${value}`, ast ? { nodes: ast } : undefined);
7 | }
8 |
9 | // 空文字列を許容しない
10 | if (!value.trim().length) {
11 | throw createGraphQLError(`Value cannot be an empty string: ${value}`, ast ? { nodes: ast } : undefined);
12 | }
13 |
14 | // 50文字を超える文字列を許容しない
15 | if (value.length > 50) {
16 | throw createGraphQLError(`Value cannot be longer than 50 characters: ${value}`, ast ? { nodes: ast } : undefined);
17 | }
18 |
19 | return value;
20 | };
21 |
22 | export const GraphQLScreenNameString = /*#__PURE__*/ new GraphQLScalarType({
23 | name: "ScreenNameString",
24 |
25 | description: "A string that is used for the screen name of a user",
26 |
27 | serialize: validate,
28 |
29 | parseValue: validate,
30 |
31 | parseLiteral(ast) {
32 | if (ast.kind !== Kind.STRING) {
33 | throw createGraphQLError(`Can only validate strings but got a: ${ast.kind}`, { nodes: ast });
34 | }
35 | return validate(ast.value, ast);
36 | },
37 | extensions: {
38 | codegenScalarType: "string",
39 | jsonSchema: {
40 | title: "ScreenNameString",
41 | type: "string",
42 | minLength: 1,
43 | },
44 | },
45 | });
46 |
--------------------------------------------------------------------------------
/packages/backend/prisma/seed.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from "@prisma/client";
2 |
3 | const prisma = new PrismaClient();
4 |
5 | function generateRandomString(num_chars = 8) {
6 | return Math.random().toString(num_chars).substring(2, 15) + Math.random().toString(36).substring(2, 15);
7 | }
8 |
9 | async function main() {
10 | const auth_subs = ["1g2h3j4k5l6", "9h8g7f6d5s4"];
11 |
12 | await prisma.user.createMany({
13 | data: [
14 | {
15 | auth_sub: auth_subs[0],
16 | handle: generateRandomString(),
17 | screen_name: generateRandomString(),
18 | bio: generateRandomString(),
19 | image_url: "https://picsum.photos/200",
20 | },
21 |
22 | {
23 | auth_sub: auth_subs[1],
24 | handle: generateRandomString(),
25 | screen_name: generateRandomString(),
26 | bio: generateRandomString(),
27 | image_url: "https://picsum.photos/200",
28 | },
29 | ],
30 | });
31 |
32 | await Promise.all(
33 | auth_subs.map(async (auth_sub) => {
34 | await prisma.post.create({
35 | data: {
36 | title: generateRandomString(),
37 | body: generateRandomString(36),
38 | user: {
39 | connect: {
40 | auth_sub: auth_sub,
41 | },
42 | },
43 | },
44 | });
45 | })
46 | );
47 | }
48 |
49 | main()
50 | .catch((e) => {
51 | throw e;
52 | })
53 | .finally(async () => {
54 | await prisma.$disconnect();
55 | });
56 |
--------------------------------------------------------------------------------
/packages/docs/docs/tutorial-extras/manage-docs-versions.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 1
3 | ---
4 |
5 | # Manage Docs Versions
6 |
7 | Docusaurus can manage multiple versions of your docs.
8 |
9 | ## Create a docs version
10 |
11 | Release a version 1.0 of your project:
12 |
13 | ```bash
14 | npm run docusaurus docs:version 1.0
15 | ```
16 |
17 | The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created.
18 |
19 | Your docs now have 2 versions:
20 |
21 | - `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs
22 | - `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs**
23 |
24 | ## Add a Version Dropdown
25 |
26 | To navigate seamlessly across versions, add a version dropdown.
27 |
28 | Modify the `docusaurus.config.js` file:
29 |
30 | ```js title="docusaurus.config.js"
31 | module.exports = {
32 | themeConfig: {
33 | navbar: {
34 | items: [
35 | // highlight-start
36 | {
37 | type: "docsVersionDropdown",
38 | },
39 | // highlight-end
40 | ],
41 | },
42 | },
43 | };
44 | ```
45 |
46 | The docs version dropdown appears in your navbar:
47 |
48 | 
49 |
50 | ## Update an existing version
51 |
52 | It is possible to edit versioned docs in their respective folder:
53 |
54 | - `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello`
55 | - `docs/hello.md` updates `http://localhost:3000/docs/next/hello`
56 |
--------------------------------------------------------------------------------
/packages/infra/Dockerfiles/Frontend-Dockerfile:
--------------------------------------------------------------------------------
1 | # ビルド用ステージ
2 | FROM node:latest as build-stage
3 |
4 | # 作業ディレクトリを指定
5 | WORKDIR /home
6 |
7 | # パッケージの存在するパス
8 | ARG PACKAGE_PATH=packages/frontend
9 | ARG SCHEMA_PATH=./graphql/schemas/*.graphql
10 | # ARG OPERATION_PATH=/home/graphql/operations/*.graphql
11 |
12 | # logtoのエンドポイントを指定
13 | ARG VITE_LOGTO_ENDPOINT=https://auth.localhost
14 | # logtoのアプリケーションIDを指定
15 | ARG VITE_LOGTO_APPID=dummy
16 | # logtoのAPIリソースを指定
17 | ARG VITE_LOGTO_API_RESOURCE=https://dummy
18 |
19 | # ホスト名(バックエンドへのフェッチに必須)
20 | ARG VITE_HOSTNAME=dummy.dummy
21 |
22 | # package.jsonのみをコピーする
23 | COPY ${PACKAGE_PATH}/package.json ./
24 |
25 | # pnpmに切り替える
26 | RUN corepack enable pnpm
27 | RUN corepack prepare pnpm@latest --activate
28 |
29 | # 依存関係をインストールする
30 | RUN pnpm install
31 |
32 | # データの引継ぎ
33 | COPY ${PACKAGE_PATH}/ ./
34 | COPY ${PACKAGE_PATH}/../graphql/ ./graphql/
35 |
36 | # graphql codegenを実行する
37 | RUN pnpm codegen
38 |
39 | # ビルドする
40 | # 環境変数としてホスト名、エンドポイント、アプリケーションID、APIリソースを渡す
41 | RUN VITE_HOSTNAME=${VITE_HOSTNAME} VITE_LOGTO_ENDPOINT=${VITE_LOGTO_ENDPOINT} VITE_LOGTO_APPID=${VITE_LOGTO_APPID} VITE_LOGTO_API_RESOURCE=${VITE_LOGTO_API_RESOURCE} pnpm build
42 |
43 | # 本番用ステージ
44 | # nginxイメージを利用
45 | FROM nginx:latest as production-stage
46 |
47 | # nginx構成ファイルのディレクトリ
48 | ARG INFRADIR=packages/infra
49 |
50 | # データを引き継ぐ
51 | COPY --from=build-stage /home/dist /usr/share/nginx/dist
52 |
53 | # COPY ${INFRADIR}/config/nginx-prod /etc/nginx/conf.d
54 | COPY ${INFRADIR}/config/nginx-prod /etc/nginx/templates
--------------------------------------------------------------------------------
/packages/backend/src/resolver.ts:
--------------------------------------------------------------------------------
1 | import { GraphQLContext } from "./context";
2 | import { Resolvers } from "./lib/generated/resolver-types";
3 | import { resolvers as scalarResolvers } from "graphql-scalars";
4 | import { UserTypeResolver } from "./resolvers/types/userType";
5 | import { PostTypeResolver } from "./resolvers/types/postType";
6 | import { PanelQueryResolver } from "./resolvers/queries/panelQuery";
7 | import { PanelMutationResolver } from "./resolvers/mutations/panelMutation";
8 | import { GraphQLHandleString } from "./lib/scalars/HandleString";
9 | import { GraphQLTitleString } from "./lib/scalars/TitleString";
10 | import { GraphQLBodyString } from "./lib/scalars/BodyString";
11 | import { GraphQLScreenNameString } from "./lib/scalars/ScreenNameString";
12 | import { GraphQLBioString } from "./lib/scalars/BioString";
13 |
14 | // リゾルバーの定義
15 | export const resolvers: Resolvers{data ?
44 | 投稿が見つかりませんでした
}
44 |
49 | );
50 | };
51 |
52 | export { UserDetailProfileImageInput };
53 |
--------------------------------------------------------------------------------
/packages/frontend/src/features/users/components/PostCardForUser.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "@tanstack/react-router";
2 | import { Card, CardBody, CardFooter, Button } from "@nextui-org/react";
3 | import { FragmentType, useFragment } from "src/lib/generated";
4 | import { graphql } from "src/lib/generated/gql";
5 |
6 | // クエリするフラグメントを定義
7 | const PostPopupFragment = graphql(`
8 | fragment PostPopupFragment on Post {
9 | post_uuid
10 | title
11 | body
12 | }
13 | `);
14 |
15 | // フラグメントの定義
16 | // ユーザ画面でポップアップとして表示される投稿カード
17 | const PostCardForUser = ({ post: post_frag }: { post: FragmentType
25 |
32 |
26 |
28 | {post.title}
27 |
29 |
31 | {post.body}
30 |
35 |
45 |
46 | docs directory.
17 |
18 | ),
19 | },
20 | {
21 | title: "Powered by React",
22 | Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
23 | description: <>Extend or customize your website layout by reusing React. Docusaurus can be extended while reusing the same header and footer.,
24 | },
25 | ];
26 |
27 | function Feature({ Svg, title, description }) {
28 | return (
29 |
30 |
38 | );
39 | }
40 |
41 | export default function HomepageFeatures() {
42 | return (
43 |
31 |
32 |
33 |
34 |
37 | {title}
35 |{description}
36 |
45 |
51 |
46 | {FeatureList.map((props, idx) => (
47 |
50 |
24 |
32 |
25 |
28 | {user.screen_name}
26 |@{user.handle}
27 |
29 |
31 | {user.bio}
30 |
35 |
45 |
46 |
58 |
60 | );
61 |
62 | return (
63 |
64 |
68 | );
69 | };
70 |
71 | export { UserDetailPage };
72 |
--------------------------------------------------------------------------------
/packages/frontend/vite.config.ts.timestamp-1694775590419-7203cb0b93586.mjs:
--------------------------------------------------------------------------------
1 | // vite.config.ts
2 | import { defineConfig } from "file:///workspaces/callstack/node_modules/.pnpm/vite@4.4.8_@types+node@20.4.8_less@4.2.0/node_modules/vite/dist/node/index.js";
3 | import tsConfigPaths from "file:///workspaces/callstack/node_modules/.pnpm/vite-tsconfig-paths@4.2.0_typescript@5.1.6_vite@4.4.8/node_modules/vite-tsconfig-paths/dist/index.mjs";
4 | import react from "file:///workspaces/callstack/node_modules/.pnpm/@vitejs+plugin-react-swc@3.3.2_vite@4.4.8/node_modules/@vitejs/plugin-react-swc/index.mjs";
5 | var vite_config_default = defineConfig({
6 | server: {
7 | host: true,
8 | port: 5173
9 | },
10 | plugins: [react(), tsConfigPaths()]
11 | });
12 | export {
13 | vite_config_default as default
14 | };
15 | //# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvd29ya3NwYWNlcy9jYWxsc3RhY2svcGFja2FnZXMvZnJvbnRlbmRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi93b3Jrc3BhY2VzL2NhbGxzdGFjay9wYWNrYWdlcy9mcm9udGVuZC92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vd29ya3NwYWNlcy9jYWxsc3RhY2svcGFja2FnZXMvZnJvbnRlbmQvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiO1xuaW1wb3J0IHRzQ29uZmlnUGF0aHMgZnJvbSBcInZpdGUtdHNjb25maWctcGF0aHNcIjtcbmltcG9ydCByZWFjdCBmcm9tIFwiQHZpdGVqcy9wbHVnaW4tcmVhY3Qtc3djXCI7XG5cbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICBzZXJ2ZXI6IHtcbiAgICBob3N0OiB0cnVlLFxuICAgIHBvcnQ6IDUxNzMsXG4gIH0sXG4gIHBsdWdpbnM6IFtyZWFjdCgpLCB0c0NvbmZpZ1BhdGhzKCldLFxufSk7XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXVTLFNBQVMsb0JBQW9CO0FBQ3BVLE9BQU8sbUJBQW1CO0FBQzFCLE9BQU8sV0FBVztBQUdsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixRQUFRO0FBQUEsSUFDTixNQUFNO0FBQUEsSUFDTixNQUFNO0FBQUEsRUFDUjtBQUFBLEVBQ0EsU0FBUyxDQUFDLE1BQU0sR0FBRyxjQUFjLENBQUM7QUFDcEMsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
16 |
--------------------------------------------------------------------------------
/packages/docs/docs/tutorial-extras/translate-your-site.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 2
3 | ---
4 |
5 | # Translate your site
6 |
7 | Let's translate `docs/intro.md` to French.
8 |
9 | ## Configure i18n
10 |
11 | Modify `docusaurus.config.js` to add support for the `fr` locale:
12 |
13 | ```js title="docusaurus.config.js"
14 | module.exports = {
15 | i18n: {
16 | defaultLocale: "en",
17 | locales: ["en", "fr"],
18 | },
19 | };
20 | ```
21 |
22 | ## Translate a doc
23 |
24 | Copy the `docs/intro.md` file to the `i18n/fr` folder:
25 |
26 | ```bash
27 | mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
28 |
29 | cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
30 | ```
31 |
32 | Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.
33 |
34 | ## Start your localized site
35 |
36 | Start your site on the French locale:
37 |
38 | ```bash
39 | npm run start -- --locale fr
40 | ```
41 |
42 | Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated.
43 |
44 | :::caution
45 |
46 | In development, you can only use one locale at a same time.
47 |
48 | :::
49 |
50 | ## Add a Locale Dropdown
51 |
52 | To navigate seamlessly across languages, add a locale dropdown.
53 |
54 | Modify the `docusaurus.config.js` file:
55 |
56 | ```js title="docusaurus.config.js"
57 | module.exports = {
58 | themeConfig: {
59 | navbar: {
60 | items: [
61 | // highlight-start
62 | {
63 | type: "localeDropdown",
64 | },
65 | // highlight-end
66 | ],
67 | },
68 | },
69 | };
70 | ```
71 |
72 | The locale dropdown now appears in your navbar:
73 |
74 | 
75 |
76 | ## Build your localized site
77 |
78 | Build your site for a specific locale:
79 |
80 | ```bash
81 | npm run build -- --locale fr
82 | ```
83 |
84 | Or build your site to include all the locales at once:
85 |
86 | ```bash
87 | npm run build
88 | ```
89 |
--------------------------------------------------------------------------------
/packages/backend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "backend",
3 | "version": "0.0.1",
4 | "type": "commonjs",
5 | "scripts": {
6 | "dev": "NODE_ENV=development tsx watch ./src/index.ts",
7 | "build": "swc src -d dist/src && tsc-alias",
8 | "start": "NODE_ENV=production node ./dist/src/index.js",
9 | "typecheck": "tsc --noEmit",
10 | "lint": "eslint src --ext .ts",
11 | "format": "prettier --write \"src/**/*.ts\"",
12 | "codegen": "graphql-codegen --config codegen.ts",
13 | "prigen": "prisma generate",
14 | "primig": "prisma migrate deploy",
15 | "priseed": "prisma db seed"
16 | },
17 | "keywords": [],
18 | "author": "",
19 | "license": "ISC",
20 | "dependencies": {
21 | "@envelop/auth0": "^5.0.0",
22 | "@envelop/core": "^4.0.0",
23 | "@envelop/disable-introspection": "^5.0.0",
24 | "@envelop/generic-auth": "^6.0.0",
25 | "@envelop/graphql-jit": "^6.0.1",
26 | "@escape.tech/graphql-armor": "^2.2.0",
27 | "@graphql-tools/load-files": "^7.0.0",
28 | "@graphql-tools/merge": "^9.0.0",
29 | "@prisma/client": "^5.1.1",
30 | "@swc/helpers": "^0.5.1",
31 | "@types/jsonwebtoken": "^9.0.2",
32 | "@types/uuid": "^9.0.3",
33 | "graphql": "^16.7.1",
34 | "graphql-middleware": "^6.1.35",
35 | "graphql-scalars": "^1.22.2",
36 | "graphql-shield": "^7.6.5",
37 | "graphql-yoga": "^4.0.3",
38 | "jimp": "^0.22.10",
39 | "jsonwebtoken": "^9.0.1",
40 | "jwks-rsa": "^3.0.1",
41 | "minio": "^7.1.3",
42 | "prisma": "^5.1.1",
43 | "ts-patch": "^3.0.2",
44 | "tsc-alias": "^1.8.7",
45 | "tsx": "^3.12.7",
46 | "uuid": "^9.0.0"
47 | },
48 | "devDependencies": {
49 | "@graphql-codegen/cli": "5.0.0",
50 | "@graphql-codegen/typescript": "4.0.1",
51 | "@graphql-codegen/typescript-resolvers": "4.0.1",
52 | "@swc/cli": "^0.1.62",
53 | "@swc/core": "^1.3.74",
54 | "@typescript-eslint/eslint-plugin": "^5.62.0",
55 | "@typescript-eslint/parser": "^5.62.0",
56 | "eslint": "^8.46.0",
57 | "typescript": "^5.1.6"
58 | },
59 | "prisma": {
60 | "seed": "tsx prisma/seed.ts"
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/packages/docs/docs/intro.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 1
3 | ---
4 |
5 | # callstack とは
6 |
7 | callstack とは、**pnpm workspace** + **turborepo**で構成されたモノレポのボイラープレートです。
8 |
9 | ⚠️ このプロジェクトはまだ **開発中** です。
10 |
11 | # 特徴
12 |
13 | - [pnpm](https://pnpm.io/) と[turborepo](https://turbo.build/) を使ったモノレポのボイラープレート
14 | - [husky](https://github.com/typicode/husky) 等のツールによるコード品質の維持
15 | - devcontainer による開発環境の管理
16 | - [react](https://reactjs.org/) によるフロントエンドの構築
17 | - [graphql-yoga](https://the-guild.dev/graphql/yoga-server) によるバックエンドの構築
18 | - [prisma](https://www.prisma.io/) によるデータベース管理
19 | - docker compose による本番環境のコンテナ管理
20 | - 組み込まれた認証とユーザ管理基盤
21 | - graphql-yoga の認可モジュールによる認可管理
22 |
23 | ## Getting Started
24 |
25 | Get started by **creating a new site**.
26 |
27 | Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
28 |
29 | ### What you'll need
30 |
31 | - [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
32 | - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
33 |
34 | ## Generate a new site
35 |
36 | Generate a new Docusaurus site using the **classic template**.
37 |
38 | The classic template will automatically be added to your project after you run the command:
39 |
40 | ```bash
41 | npm init docusaurus@latest my-website classic
42 | ```
43 |
44 | You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
45 |
46 | The command also installs all necessary dependencies you need to run Docusaurus.
47 |
48 | ## Start your site
49 |
50 | Run the development server:
51 |
52 | ```bash
53 | cd my-website
54 | npm run start
55 | ```
56 |
57 | The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
58 |
59 | The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
60 |
61 | Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
62 |
--------------------------------------------------------------------------------
/packages/backend/src/lib/error/error.ts:
--------------------------------------------------------------------------------
1 | import { GraphQLError } from "graphql";
2 |
3 | // エラーコード
4 | const error_code = {
5 | // JWTのエラー
6 | // JWTの期限切れエラー
7 | jwt_expired: "JWT_EXPIRED",
8 | // JWTの署名エラー
9 | jwt_invalid_signature: "JWT_INVALID_SIGNATURE",
10 | // JWTの有効期限が開始前エラー
11 | jwt_not_before: "JWT_NOT_BEFORE",
12 | // JWTトークンのエラー
13 | jwt_web_token_error: "JWT_WEB_TOKEN_ERROR",
14 |
15 | // 認可において対応するユーザが存在しないエラー(ログインしていない またはログインが無効)
16 | authz_not_logged_in: "AUTHZ_NOT_LOGGED_IN",
17 | // 認可ディレクティブで指定した引数に対応するロールが存在しないエラー
18 | authz_role_not_found: "AUTHZ_ROLE_NOT_FOUND",
19 | // ログインユーザでの認可に失敗したエラー
20 | authz_failed: "AUTHZ_FAILED",
21 |
22 | // 存在しないアイテムのエラー
23 | item_not_found: "ITEM_NOT_FOUND",
24 | // 存在するアイテムのエラー
25 | item_already_exists: "ITEM_ALREADY_EXISTS",
26 |
27 | // アイテムのオーナが自分ではないエラー
28 | item_not_owned: "ITEM_NOT_OWNED",
29 |
30 | // その他のエラー
31 | unknown_error: "UNKNOWN_ERROR",
32 | };
33 |
34 | // エラーコードの型
35 | type ErrorCode = keyof typeof error_code;
36 |
37 | // エラーコードのメッセージ
38 | const error_message: { [key in ErrorCode]: string } = {
39 | jwt_expired: "⏰ JWT is expired",
40 | jwt_invalid_signature: "❌ JWT signature is invalid",
41 | jwt_not_before: "⏳ JWT is not before",
42 | jwt_web_token_error: "🚫 JWT is invalid",
43 | authz_not_logged_in: "👤 Not logged in",
44 | authz_role_not_found: "🔍 Role not found",
45 | authz_failed: "🔐 Authorization failed",
46 | item_not_found: "🔎 Item not found",
47 | item_already_exists: "🔄 Item already exists",
48 | item_not_owned: "🚷 Item is not owned",
49 | unknown_error: "❓ Unknown error",
50 | };
51 |
52 | // カスタムのエラークラス
53 | class GraphQLErrorWithCode extends GraphQLError {
54 | constructor(code: ErrorCode, message?: string) {
55 | // 拡張フィールドの定義
56 | const extensions = {
57 | code: code,
58 | };
59 |
60 | // エラーの内容を表示
61 | console.error(`[ERROR] ${code}: ${message ? message : error_message[code]}`);
62 |
63 | // 親クラスのコンストラクタを呼び出す
64 | super(message ? message : error_message[code], {
65 | extensions: extensions,
66 | });
67 | }
68 | }
69 |
70 | export { GraphQLErrorWithCode, error_code };
71 |
--------------------------------------------------------------------------------
/.github/workflows/gh-pages.yml:
--------------------------------------------------------------------------------
1 | # Sample workflow for building and deploying a Docusaurus site to GitHub Pages
2 | name: Deploy Docusaurus with GitHub Pages dependencies preinstalled
3 |
4 | on:
5 | # masterブランチへのpushに対応する
6 | push:
7 | branches: ["master"]
8 | # プルリクエストでのCIに対応する
9 | pull_request:
10 | types: [opened, synchronize]
11 |
12 | # 手動での実行に対応する
13 | workflow_dispatch:
14 |
15 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
16 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
17 | concurrency:
18 | group: "pages"
19 | cancel-in-progress: false
20 |
21 | jobs:
22 | build:
23 | runs-on: ubuntu-latest
24 | timeout-minutes: 15
25 |
26 | # 環境変数の読み込み
27 | env:
28 | SCHEMA_PATH: ../graphql/schemas/*.graphql
29 | # OPERATION_PATH: ../graphql/operations/*.graphql
30 |
31 | # 実行ステップ
32 | steps:
33 | - uses: actions/checkout@v2
34 |
35 | - uses: pnpm/action-setup@v2.2.4
36 | with:
37 | version: 8.6.3
38 |
39 | - name: Setup Node.js environment
40 | uses: actions/setup-node@v3
41 | with:
42 | node-version: 18
43 | cache: "pnpm"
44 |
45 | # 依存関係のインストール
46 | - name: install dependencies
47 | run: pnpm install --frozen-lockfile
48 |
49 | - name: Build
50 | run: |
51 | pnpm run docbuild
52 | working-directory: packages/docs
53 |
54 | - name: Upload artifact
55 | uses: actions/upload-pages-artifact@v2
56 | with:
57 | path: packages/docs/build
58 |
59 | # Deployment job
60 | deploy:
61 | # masterブランチのときのみ実行する
62 | if : github.ref == 'refs/heads/master'
63 | # 必要な権限を付与する
64 | permissions:
65 | pages: write # to deploy to Pages
66 | id-token: write
67 | environment:
68 | name: github-pages
69 | url: ${{ steps.deployment.outputs.page_url }}
70 | runs-on: ubuntu-latest
71 | needs: build
72 | steps:
73 | - name: Deploy to GitHub Pages
74 | id: deployment
75 | uses: actions/deploy-pages@v2
76 |
--------------------------------------------------------------------------------
/packages/backend/src/lib/security/authz.ts:
--------------------------------------------------------------------------------
1 | import { User, Role } from "@prisma/client";
2 | import { GraphQLContext } from "src/context";
3 | import { ResolveUserFn, ValidateUserFn } from "@envelop/generic-auth";
4 | import { Kind } from "graphql";
5 | import { GenericAuthPluginOptions } from "@envelop/generic-auth";
6 | import { GraphQLErrorWithCode } from "src/lib/error/error";
7 |
8 | const resolveUserFn: ResolveUserFn
65 | {data ?
67 | ユーザが見つかりませんでした
}
66 |
23 |
24 |
47 |
60 |
61 |
62 | );
63 | };
64 |
65 | export { UserCard };
66 |
--------------------------------------------------------------------------------
/packages/frontend/tailwind.config.js:
--------------------------------------------------------------------------------
1 | // tailwind.config.js
2 | const { nextui } = require("@nextui-org/react");
3 |
4 | /** @type {import('tailwindcss').Config} */
5 | module.exports = {
6 | content: [
7 | // ...
8 | "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
9 | "./src/*.{js,ts,jsx,tsx}",
10 | "./src/**/*.{js,ts,jsx,tsx}",
11 | "./src/features/**/**/*.{js,ts,jsx,tsx}",
12 | ],
13 | theme: {
14 | extend: {
15 | fontFamily: {
16 | sans: ["Inter", "Noto Sans JP"],
17 | },
18 | },
19 | },
20 | darkMode: ["media", "class"],
21 | plugins: [
22 | nextui({
23 | themes: {
24 | light: {
25 | colors: {
26 | default: "#fdfdfd", // 中立的なデフォルト色
27 | background: "#fdfdfd", // 薄い色で柔らかい背景
28 | foreground: "#4e4e4e", // 読みやすさを保つためのフォント色
29 | primary: "#d2e5fc", // 主要な色で、強調したい場所に使用
30 | secondary: "#f5f8fb", // 補助的な色で、主要色とのバランスを取る
31 | success: "#28a745", // 成功を示す色
32 | warning: "#ffc107", // 警告に使用
33 | danger: "#dc3545", // 危険を示す色で、緊急性を強調
34 | divider: "#e0e0e0", // 区切り線に使用、目立たず機能する色
35 | overlay: "#FBF8F1", // モーダルなどに使用、背景と調和する色
36 | focus: "#54BAB9", // フォーカス時に使用、強調したい部分に目を引く色
37 | content1: "#f5f8fb", // コンテンツ階層1
38 | content2: "#F7ECDE", // コンテンツ階層2
39 | content3: "#F7ECDE", // コンテンツ階層3
40 | content4: "#F7ECDE", // コンテンツ階層4
41 | },
42 | },
43 | dark: {
44 | colors: {
45 | default: "#54BAB9", // 中立的なデフォルト色
46 | background: "#000511", // より暗い背景
47 | foreground: "#FFFFFF", // 白い文字色
48 | primary: "#0e3765", // 主要な色で、強調したい場所に使用
49 | secondary: "#323753", // 補助的な色で、主要色とのバランスを取る（暗い色）
50 | success: "#28a745", // 成功を示す色
51 | warning: "#ffc107", // 警告に使用
52 | danger: "#dc3545", // 危険を示す色で、緊急性を強調
53 | divider: "#3e3e3e", // 区切り線に使用、目立たず機能する暗い色
54 | overlay: "#2e2e2e", // モーダルなどに使用、背景と調和するより暗い色
55 | focus: "#54BAB9", // フォーカス時に使用、強調したい部分に目を引く色
56 | content1: "#2e2e2e", // コンテンツ階層1（より暗い背景）
57 | content2: "#3e3e3e", // コンテンツ階層2（暗い背景）
58 | content3: "#4e4e4e", // コンテンツ階層3（少し明るい背景）
59 | content4: "#5e5e5e", // コンテンツ階層4（さらに明るい背景）
60 | },
61 | },
62 | },
63 | }),
64 | ],
65 | };
66 |
--------------------------------------------------------------------------------
/.devcontainer/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: "3.8"
2 |
3 | # ネットワークを作成
4 | networks:
5 | app-network:
6 |
7 | services:
8 | app:
9 | build:
10 | context: .
11 | dockerfile: Dockerfile
12 |
13 | volumes:
14 | # - ../..:/workspaces:cached
15 | # ワークスペースにリポジトリのデータをマウント
16 | - type: bind
17 | source: ../
18 | target: /workspaces/repo
19 | consistency: cached
20 | # ルートのnode_modulesをボリュームにマウント
21 | - type: volume
22 | source: root-data
23 | target: /workspaces/repo/node_modules
24 | # フロントのnode_modulesをボリュームにマウント
25 | - type: volume
26 | source: frontend-data
27 | target: /workspaces/repo/packages/frontend/node_modules
28 | # バックのnode_modulesをボリュームにマウント
29 | - type: volume
30 | source: backend-data
31 | target: /workspaces/repo/packages/backend/node_modules
32 |
33 | environment:
34 | - SCHEMA_PATH=../graphql/schemas/*.graphql
35 | # バックエンドのminioのユーザー名とパスワードを指定
36 | - MINIO_ROOT_USER=${MINIO_ROOT_USER}
37 | - MINIO_ROOT_PASSWORD=${MINIO_ROOT_PASSWORD}
38 | # バックエンドのminioのバケット名を指定
39 | - MINIO_BUCKET_NAME=${MINIO_BUCKET_NAME}
40 | # - OPERATION_PATH=../graphql/operations/*.graphql
41 | # アプリケーションコンテナの環境変数を読み込む
42 | env_file: ${CODESPACE_ENV}
43 |
44 | # Overrides default command so things don't shut down after the process ends.
45 | command: sleep infinity
46 |
47 | # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
48 | networks:
49 | - app-network
50 | # depends_on:
51 | # db:
52 | # condition: service_healthy
53 |
54 | db:
55 | image: postgres:latest
56 | restart: unless-stopped
57 | volumes:
58 | - type: volume
59 | source: postgres-data
60 | target: /var/lib/postgresql/data
61 | # ポスグレの環境変数を読み込む
62 | env_file: ${POSTGRES_ENV}
63 | networks:
64 | - app-network
65 |
66 | minio:
67 | build:
68 | context: .
69 | dockerfile: Dockerfile.minio
70 | restart: unless-stopped
71 | volumes:
72 | - type: volume
73 | source: minio-data
74 | target: /data
75 | environment:
76 | - MINIO_ROOT_USER=${MINIO_ROOT_USER}
77 | - MINIO_ROOT_PASSWORD=${MINIO_ROOT_PASSWORD}
78 | networks:
79 | - app-network
80 | ports:
81 | - 9000:9000
82 | - 9001:9001
83 | volumes:
84 | postgres-data:
85 | minio-data:
86 | root-data:
87 | frontend-data:
88 | backend-data:
89 |
--------------------------------------------------------------------------------
/packages/frontend/src/features/posts/components/PostDetailCard.tsx:
--------------------------------------------------------------------------------
1 | import { Card, CardBody, CardFooter, CardHeader, Button, Image, Spacer } from "@nextui-org/react";
2 | import { DotsVertical, Heart, MessageChatbot } from "tabler-icons-react";
3 | import { graphql } from "src/lib/generated/gql";
4 | import { FragmentType, useFragment } from "src/lib/generated";
5 | import { UserCard } from "src/features/users/components/UserCard";
6 |
7 | // クエリするフラグメントを定義
8 | const PostDetailFragment = graphql(`
9 | fragment PostDetailFragment on Post {
10 | post_uuid
11 | title
12 | body
13 | created_at
14 | updated_at
15 | is_public
16 | user {
17 | ...UserFragment
18 | }
19 | }
20 | `);
21 |
22 | const PostDetailCard = ({ post: post_frag }: { post: FragmentType
33 |
35 |
45 |
46 |
36 |
44 |
37 |
40 | {user.screen_name}
38 |@{user.handle}
39 |
41 |
43 | {user.bio}
42 |
48 |
58 |
59 |
28 |
64 | );
65 | };
66 |
67 | export { PostDetailCard };
68 |
--------------------------------------------------------------------------------
/packages/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "private": true,
4 | "version": "0.0.1",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "typecheck": "tsc --noEmit",
10 | "lint": "eslint src --ext ts,tsx",
11 | "format": "prettier --write \"src/**/*.{ts,tsx}\"",
12 | "preview": "vite preview",
13 | "storybook": "storybook dev -p 6006",
14 | "build-storybook": "storybook build",
15 | "codegen": "graphql-codegen --config codegen.ts"
16 | },
17 | "dependencies": {
18 | "@logto/react": "^2.1.1",
19 | "@nextui-org/react": "^2.0.8",
20 | "@nextui-org/system": "^2.0.3",
21 | "@nextui-org/theme": "^2.0.4",
22 | "@storybook/addon-styling": "^1.3.5",
23 | "@tailwindcss/line-clamp": "^0.4.4",
24 | "@tanstack/react-router": "0.0.1-beta.145",
25 | "@tanstack/router-devtools": "0.0.1-beta.147",
26 | "@urql/devtools": "^2.0.3",
27 | "@urql/exchange-auth": "^2.1.6",
28 | "autoprefixer": "^10.4.14",
29 | "class-variance-authority": "^0.6.1",
30 | "clsx": "^1.2.1",
31 | "framer-motion": "^10.15.1",
32 | "graphql": "^16.7.1",
33 | "lucide-react": "^0.264.0",
34 | "react": "^18.2.0",
35 | "react-dom": "^18.2.0",
36 | "react-hot-toast": "^2.4.1",
37 | "storybook": "^7.2.1",
38 | "tabler-icons-react": "^1.56.0",
39 | "tailwind-merge": "^1.14.0",
40 | "tailwindcss": "^3.3.3",
41 | "tailwindcss-animate": "^1.0.6",
42 | "urql": "^4.0.5",
43 | "valibot": "^0.19.0",
44 | "vite-tsconfig-paths": "^4.2.0",
45 | "windy-radix-palette": "^0.6.1",
46 | "zod": "^3.21.4"
47 | },
48 | "devDependencies": {
49 | "@graphql-codegen/cli": "5.0.0",
50 | "@graphql-codegen/client-preset": "4.1.0",
51 | "@graphql-typed-document-node/core": "^3.2.0",
52 | "@storybook/addon-essentials": "7.0.22",
53 | "@storybook/addon-interactions": "7.0.22",
54 | "@storybook/addon-links": "7.0.22",
55 | "@storybook/blocks": "7.0.22",
56 | "@storybook/react": "7.0.22",
57 | "@storybook/react-vite": "7.0.22",
58 | "@storybook/testing-library": "0.0.14-next.2",
59 | "@types/react": "^18.2.18",
60 | "@types/react-dom": "^18.2.7",
61 | "@typescript-eslint/eslint-plugin": "^5.62.0",
62 | "@typescript-eslint/parser": "^5.62.0",
63 | "@vitejs/plugin-react-swc": "^3.3.2",
64 | "eslint": "^8.46.0",
65 | "eslint-plugin-react-hooks": "^4.6.0",
66 | "eslint-plugin-react-refresh": "^0.3.5",
67 | "graphql-codegen-typescript-validation-schema": "^0.11.1",
68 | "prop-types": "15.8.1",
69 | "typescript": "^5.1.6",
70 | "vite": "^4.4.8"
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the
2 | // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node-postgres
3 | {
4 | "name": "Node.js & PostgreSQL",
5 | "dockerComposeFile": "docker-compose.yml",
6 | "service": "app",
7 | "workspaceFolder": "/workspaces/repo",
8 | "features": {
9 | "ghcr.io/devcontainers-contrib/features/pnpm:2": {
10 | "version": "latest"
11 | },
12 | "ghcr.io/devcontainers-contrib/features/turborepo-npm:1": {
13 | "version": "latest"
14 | },
15 | "ghcr.io/devcontainers-contrib/features/zsh-plugins:0": {
16 | "plugins": "ssh-agent npm",
17 | "omzPlugins": "https://github.com/zsh-users/zsh-autosuggestions",
18 | "username": "vscode"
19 | }
20 | },
21 | // Features to add to the dev container. More info: https://containers.dev/features.
22 | // "features": {},
23 | // Use 'forwardPorts' to make a list of ports inside the container available locally.
24 | // This can be used to network with other containers or with the host.
25 | "forwardPorts": [6173, 5173, 9000, 9001],
26 | // Use 'postCreateCommand' to run commands after the container is created.
27 | "postCreateCommand": "pnpm install && pnpm primig && pnpm priseed",
28 | // Configure tool-specific properties.
29 | "customizations": {
30 | "vscode": {
31 | "extensions": [
32 | "GitHub.copilot",
33 | "dbaeumer.vscode-eslint",
34 | "esbenp.prettier-vscode",
35 | // deprecated "ms-vscode.vscode-typescript-tslint-plugin",
36 | // "ms-vscode.vscode-typescript-tslint-plugin",
37 | "ms-vscode.vscode-typescript-next",
38 | "prisma.prisma",
39 | "redhat.vscode-yaml",
40 | "zhuangtongfa.material-theme",
41 | "dsznajder.es7-react-js-snippets",
42 | "VisualStudioExptTeam.vscodeintellicode",
43 | "yzhang.markdown-all-in-one",
44 | "naumovs.color-highlight",
45 | "vscode.json-language-features",
46 | "GraphQL.vscode-graphql",
47 | "vscode.git",
48 | "bradlc.vscode-tailwindcss",
49 | "formulahendry.auto-rename-tag",
50 | "PKief.material-icon-theme",
51 | "oderwat.indent-rainbow",
52 | "formulahendry.auto-close-tag",
53 | "markdown.showPreview",
54 | "eamodio.gitlens",
55 | "GitHub.vscode-pull-request-github",
56 | "ms-azuretools.vscode-docker",
57 | "capaj.graphql-codegen-vscode"
58 | ],
59 | "settings": {
60 | "editor.defaultFormatter": "esbenp.prettier-vscode"
61 | }
62 | }
63 | },
64 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
65 | "remoteUser": "root"
66 | }
67 |
--------------------------------------------------------------------------------
/packages/frontend/src/lib/provider/authn/AuthnProvider.tsx:
--------------------------------------------------------------------------------
1 | import { useState, createContext, ReactNode } from "react";
2 | import { useLogto, InteractionMode, LogtoProvider } from "@logto/react";
3 | import { is_dev, dev_jwt_token } from "src/env";
4 | import { logto_config } from "src/config";
5 |
6 | // コンテキストの型をあらかじめ定義
7 | // fetchUserInfoやgetIdTokenClaimsは利用しない方針
8 | type AuthnContext = {
9 | isAuthenticated: boolean;
10 | isLoading: boolean;
11 | signIn: (redirectUrl: string, interactionMode?: InteractionMode) => Promise
30 |
31 |
32 |
36 |
37 |
43 |
45 |
46 |
47 |
51 |
55 |
58 |
59 |
60 |
61 |
33 |
35 | {post.title}
34 |
38 |
42 |
39 |
41 | {post.body}
40 |
26 |
27 |
29 |
30 |
31 |
32 |
36 |
37 |
56 |
57 |
82 |
83 |
84 | );
85 | };
86 |
87 | export { PostCard };
88 |
--------------------------------------------------------------------------------
/packages/backend/src/lib/webhook/webhook.ts:
--------------------------------------------------------------------------------
1 | import { createHmac } from "crypto";
2 | import { logto_webhook_secret } from "../../env";
3 | import { Plugin } from "graphql-yoga/typings/plugins/types";
4 | import { PrismaClient } from "@prisma/client";
5 |
6 | type WebHookBodyType = {
7 | // hookId: string;
8 | // event: string;
9 | // interactionEvent: string;
10 | // createdAt: string;
11 | // sessionId: string;
12 | // userAgent: string;
13 | userId: string;
14 | user: {
15 | // id: string;
16 | username: string | null;
17 | primaryEmail: string | null;
18 | // primaryPhone: string | null;
19 | // name: string | null;
20 | // avatar: string | null;
21 | // customData: Record
33 |
35 | {post.title}
34 |
38 |
55 |
39 |
41 | {post.body}
40 |
42 |
54 |
43 |
46 |
47 |
50 |
53 |
58 |
59 |
60 |
63 |
64 |
65 |
66 |
68 |
69 |
70 |
80 |
81 | Hello, Docusaurus!
68 | ) 69 | } 70 | ``` 71 | 72 | ```jsx title="src/components/HelloDocusaurus.js" 73 | function HelloDocusaurus() { 74 | returnHello, Docusaurus!
; 75 | } 76 | ``` 77 | 78 | ## Admonitions 79 | 80 | Docusaurus has a special syntax to create admonitions and callouts: 81 | 82 | :::tip My tip 83 | 84 | Use this awesome feature option 85 | 86 | ::: 87 | 88 | :::danger Take care 89 | 90 | This action is dangerous 91 | 92 | ::: 93 | 94 | :::tip My tip 95 | 96 | Use this awesome feature option 97 | 98 | ::: 99 | 100 | :::danger Take care 101 | 102 | This action is dangerous 103 | 104 | ::: 105 | 106 | ## MDX and React Components 107 | 108 | [MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**: 109 | 110 | ```jsx 111 | export const Highlight = ({children, color}) => ( 112 | { 121 | alert(`You clicked the color ${color} with label ${children}`) 122 | }}> 123 | {children} 124 | 125 | ); 126 | 127 | This iscallstack
2 |
3 | 
4 |
pnpm + turborepoで構成されたモノリポ構成のボイラープレート
7 | 8 |
9 |
58 | @{user.handle}
59 |
63 | {user.bio}
64 | 
42 |
95 | );
96 | };
97 |
98 | export { UserDetailCard };
99 |
--------------------------------------------------------------------------------
/packages/frontend/src/lib/provider/urql/UrqlProvider.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode, useState, useCallback } from "react";
2 | import { Provider, Client, cacheExchange, fetchExchange, mapExchange, MapExchangeOpts } from "urql";
3 | import { authExchange, AuthUtilities, AuthConfig } from "@urql/exchange-auth";
4 | import toast from "react-hot-toast";
5 | import { devtoolsExchange } from "@urql/devtools";
6 |
7 | import { is_dev, hostname, logto_api_resource } from "src/env";
8 | import { useAuthn } from "src/lib/provider/authn/useAuthn";
9 |
10 | // TODO: エラーハンドリングをMapExchangeで行う
11 | const UrqlProvider = ({ children }: { children: ReactNode }) => {
12 | // urqlクライアントの設定
13 | const { isAuthenticated, getAccessToken, signIn } = useAuthn();
14 | // jwtの状態
15 | const [jwt, setJwt] = useState("");
16 | // フェッチしているかを判定するフラグ
17 | const [isFetching, setIsFetching] = useState(false);
18 |
19 | // urqlのauth Exchange用の設定
20 | const authInit: (utilities: AuthUtilities) => Promise
43 |
49 |
45 |
48 |
53 |
67 |
54 |
61 |
55 | {user.screen_name}
56 |
57 |
62 |
66 |
70 | {is_myself && (
71 | <>
72 |
92 |
34 |
129 | );
130 | };
131 |
--------------------------------------------------------------------------------
/packages/docs/static/img/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/backend/src/lib/plugins/useAuthMock.ts:
--------------------------------------------------------------------------------
1 | // ESLintの特定のルールを無効にする
2 | /* eslint-disable no-console */
3 | /* eslint-disable dot-notation */
4 |
5 | // 必要なライブラリをインポートする
6 | import { sign, decode, verify } from "jsonwebtoken"; // JWTの生成と検証を行うライブラリ
7 | import { Plugin } from "@envelop/core"; // GraphQLサーバーのプラグインシステムを提供するライブラリ
8 | import { generateKeyPairSync } from "crypto";
9 |
10 | // JWTの鍵ペアを生成するユーティリティ
11 | // これはテスト環境でのみ使用する
12 | const generateJWTKeyPair = () => {
13 | // 鍵ペアを生成
14 | const { publicKey, privateKey } = generateKeyPairSync("ec", {
15 | namedCurve: "secp384r1", // P-384 curve
16 | publicKeyEncoding: {
17 | type: "spki",
18 | format: "pem",
19 | },
20 | privateKeyEncoding: {
21 | type: "pkcs8",
22 | format: "pem",
23 | },
24 | });
25 |
26 | return { publicKey, privateKey };
27 | };
28 |
29 | // プラグインの設定を定義する型
30 | export type AuthMockPluginOptions = {
31 | preventUnauthenticatedAccess?: boolean; // 認証されていないアクセスを防ぐかどうか
32 | onError?: (error: Error) => void; // エラーハンドリングの方法
33 | extendContextField?: "_auth0" | string; // コンテキストに追加するフィールドの名前
34 | tokenType?: string; // トークンの種類
35 | headerName?: string; // JWTを含むヘッダーの名前
36 | };
37 |
38 | // 認証が失敗した場合にスローされるエラークラス
39 | export class UnauthenticatedError extends Error {}
40 |
41 | // デコードされたJWTのペイロードを表す型
42 | export type UserPayload = {
43 | sub: string; // ユーザーの一意の識別子
44 | [key: string]: unknown; // 任意の追加フィールド
45 | };
46 |
47 | // GraphQLのコンテキストに追加するフィールドを定義する型
48 | type BuildContext
35 |
128 |
122 | {" "}
123 |
127 |