diff --git a/aurora.config.json b/aurora.config.json index ba44038..91c7849 100644 --- a/aurora.config.json +++ b/aurora.config.json @@ -1,6 +1,6 @@ { "files": [ - "./prisma/base.prisma" + "./prisma/models/" ], "output": "./prisma/schema.prisma" } diff --git a/package.json b/package.json index 8269d13..4c79242 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,20 @@ "lint": "next lint", "migration": "npx aurora && npx prisma migrate dev --name $npm_config_name", "migration:prod": "npx aurora && npx prisma generate && npx prisma migrate deploy", - "migrate": "npx aurora && npx prisma migrate dev" + "migrate": "npx aurora && npx prisma migrate dev", + "make-element": "ts-node ./src/commands/makeElementTree.ts" }, "dependencies": { "@apollo/client": "^3.7.12", "@apollo/server": "^4.7.0", "@as-integrations/next": "^1.3.0", + "@emotion/react": "^11.11.1", + "@emotion/server": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@material-ui/core": "^4.12.4", + "@material-ui/icons": "^4.11.3", + "@mui/icons-material": "^5.11.16", + "@mui/material": "^5.13.6", "@nextui-org/react": "^1.0.0-beta.12", "@types/react": "18.2.0", "@types/react-dom": "18.2.1", @@ -28,9 +36,12 @@ "next": "13.3.0", "postcss": "8.4.23", "prisma": "^4.13.0", - "react": "18.2.0", - "react-dom": "18.2.0", - "tailwindcss": "^3.3.2" + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-type-animation": "^3.1.0", + "sass": "^1.63.6", + "tailwindcss": "^3.3.2", + "ts-node": "^10.9.1" }, "devDependencies": { "@graphql-codegen/cli": "^3.3.1", diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index 1aeeb12..0000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import '@/styles/globals.css' -import type { AppProps } from 'next/app' -import { NextUIProvider, createTheme } from '@nextui-org/react'; -import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client' - -const client = new ApolloClient({ - uri: '/api/graphql', - cache: new InMemoryCache(), -}) - -export default function App({ Component, pageProps }: AppProps) { - - const theme = createTheme({ - type: "dark", // it could be "light" or "dark" - theme: { - colors: { - primary: '#4ADE7B', - secondary: '#F9CB80', - error: '#FCC5D8', - }, - } - }) - - return ( - - - - - - ) -} diff --git a/pages/_document.tsx b/pages/_document.tsx deleted file mode 100644 index 5337175..0000000 --- a/pages/_document.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document'; -import { CssBaseline } from '@nextui-org/react'; - -class MyDocument extends Document { - static async getInitialProps(ctx: any) { - const initialProps = await Document.getInitialProps(ctx); - return { - ...initialProps, - styles: <>{initialProps.styles} - }; - } - - render() { - return ( - - {CssBaseline.flush()} - -
- - - - ); - } -} - -export default MyDocument; diff --git a/pages/index.tsx b/pages/index.tsx deleted file mode 100644 index 8742291..0000000 --- a/pages/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { useQuery } from "@apollo/client"; -import { BOOKS_QUERY, BooksQuery } from "../graphql/queries/books.query"; -import { NextPage } from "next"; - -const Home: NextPage = () => { - const { loading, error, data } = useQuery(BOOKS_QUERY); - - if (loading) return

Loading...

; - if (error) return

Error : {error.message}

; - - return ( -
- {JSON.stringify(data)} -
- ) -} - -export default Home; diff --git a/src/assets/DragonQuestFC.ttf b/src/assets/DragonQuestFC.ttf new file mode 100644 index 0000000..15a8b15 Binary files /dev/null and b/src/assets/DragonQuestFC.ttf differ diff --git a/src/commands/makeElementTree.ts b/src/commands/makeElementTree.ts new file mode 100644 index 0000000..6e489dd --- /dev/null +++ b/src/commands/makeElementTree.ts @@ -0,0 +1,112 @@ +const fs = require('fs'); +const path = require('path'); + +// ツリー構造を定義 +interface TreeNode { + name: string; + children?: TreeNode[]; +} + +const elementTreeStructure: TreeNode[] = [ + { + name: 'index.tsx', + }, + { + name: 'elements', + children: [], + }, + { + name: 'hooks', + children: [], + }, + { + name: 'contexts', + children: [], + }, + { + name: 'styles', + children: [], + }, + ]; + +const extractBottomDirectoryName = (directoryPath: string): string => { + const directoryName = path.basename(directoryPath); + return directoryName; +}; + +const capitalizeFirstLetter = (str: string): string => { + return str.charAt(0).toUpperCase() + str.slice(1); +}; + +const writeFileIfNotExists = (filePath: string, content: string): void => { + // ファイルがなければ作成 + if (!fs.existsSync(filePath)) { + fs.writeFileSync(filePath, content); + } +}; + +const mkdirIfNotExists = (directoryPath: string): void => { + // ディレクトリがなければ作成 + if (!fs.existsSync(directoryPath)) { + fs.mkdirSync(directoryPath, { recursive: true }); + } +}; + +// ツリーを生成する関数 +const createElementTree = (directoryPath: string, structure: TreeNode[]): void => { + // ディレクトリを作成 + fs.mkdirSync(directoryPath, { recursive: true }); + + const bottomDirectoryName = extractBottomDirectoryName(directoryPath); + + for (const element of structure) { + // ディレクトリを作成 + const elementPath = path.join(directoryPath, element.name); + + switch (element.name) { + case 'index.tsx': + // 存在しなければファイル作成 + writeFileIfNotExists(elementPath, ''); + break; + case 'elements': + // 存在しなければディレクトリ作成 + mkdirIfNotExists(elementPath); + break; + case 'hooks': + // 存在しなければディレクトリ作成 + mkdirIfNotExists(elementPath); + + // ファイル作成 + writeFileIfNotExists(path.join(elementPath, 'use' + capitalizeFirstLetter(bottomDirectoryName) + '.tsx'), ''); + break; + case 'contexts': + // 存在しなければディレクトリ作成 + mkdirIfNotExists(elementPath); + + // 存在しなければファイル作成 + writeFileIfNotExists(path.join(elementPath, bottomDirectoryName + 'Context.tsx'), ''); + break; + case 'styles': + // 存在しなければディレクトリ作成 + mkdirIfNotExists(elementPath); + + // 存在しなければファイル作成 + writeFileIfNotExists(path.join(elementPath, bottomDirectoryName + '.tsx'), ''); + break; + default: + // 何もしない + break; + } + } +} + +const ROOT = './src/components'; +const directoryPath = process.argv[2]; + +if (!directoryPath) { + console.error('ディレクトリパスが指定されていません。'); + process.exit(1); +} + +// ツリーを生成 +createElementTree(path.join(ROOT, directoryPath), elementTreeStructure); diff --git a/src/components/about/contexts/aboutContext.tsx b/src/components/about/contexts/aboutContext.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/about/hooks/useAbout.tsx b/src/components/about/hooks/useAbout.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx new file mode 100644 index 0000000..d874a54 --- /dev/null +++ b/src/components/about/index.tsx @@ -0,0 +1,11 @@ +import { FC } from 'react' + +export const AboutPage: FC = () => { + return ( +
+ About +
+ ) +} + +export default AboutPage diff --git a/src/components/about/styles/about.tsx b/src/components/about/styles/about.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/blog/contexts/blogContext.tsx b/src/components/blog/contexts/blogContext.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/blog/hooks/useBlog.tsx b/src/components/blog/hooks/useBlog.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/blog/index.tsx b/src/components/blog/index.tsx new file mode 100644 index 0000000..d9d46b2 --- /dev/null +++ b/src/components/blog/index.tsx @@ -0,0 +1,11 @@ +import { FC } from 'react' + +export const BlogPage: FC = () => { + return ( +
+ Blog +
+ ) +} + +export default BlogPage diff --git a/src/components/blog/styles/blog.tsx b/src/components/blog/styles/blog.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/contexts/homeContext.tsx b/src/components/home/contexts/homeContext.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/homeLeft/contexts/homeLeftContext.tsx b/src/components/home/elements/homeLeft/contexts/homeLeftContext.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/homeLeft/hooks/useHomeLeft.tsx b/src/components/home/elements/homeLeft/hooks/useHomeLeft.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/homeLeft/index.tsx b/src/components/home/elements/homeLeft/index.tsx new file mode 100644 index 0000000..96bb89e --- /dev/null +++ b/src/components/home/elements/homeLeft/index.tsx @@ -0,0 +1,36 @@ +import { FC } from "react"; +import { TypeAnimation } from 'react-type-animation'; +import Box from '@mui/material/Box'; + + +export const HomeLeft: FC = () => { + return ( + <> + + + + + ) +} + +export default HomeLeft \ No newline at end of file diff --git a/src/components/home/elements/homeLeft/styles/homeLeft.tsx b/src/components/home/elements/homeLeft/styles/homeLeft.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/homeRight/contexts/homeRightContext.tsx b/src/components/home/elements/homeRight/contexts/homeRightContext.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/homeRight/elements/navigationCard/contexts/navigationCardContext.tsx b/src/components/home/elements/homeRight/elements/navigationCard/contexts/navigationCardContext.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/homeRight/elements/navigationCard/hooks/useNavigationCard.tsx b/src/components/home/elements/homeRight/elements/navigationCard/hooks/useNavigationCard.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/homeRight/elements/navigationCard/index.tsx b/src/components/home/elements/homeRight/elements/navigationCard/index.tsx new file mode 100644 index 0000000..d9e246d --- /dev/null +++ b/src/components/home/elements/homeRight/elements/navigationCard/index.tsx @@ -0,0 +1,39 @@ +import { FC } from 'react' +import Card from '@mui/material/Card'; +import { CardActionArea, CardContent, Typography } from '@mui/material'; + +interface Props { + name: string +} + +export const NavigationCard: FC = ({ name }: Props) => { + return ( + + + + + { `${name} ->` } + + + description + + + + + ) +} + +export default NavigationCard diff --git a/src/components/home/elements/homeRight/elements/navigationCard/styles/navigationCard.tsx b/src/components/home/elements/homeRight/elements/navigationCard/styles/navigationCard.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/homeRight/hooks/useHomeRight.tsx b/src/components/home/elements/homeRight/hooks/useHomeRight.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/homeRight/index.tsx b/src/components/home/elements/homeRight/index.tsx new file mode 100644 index 0000000..64ce4b6 --- /dev/null +++ b/src/components/home/elements/homeRight/index.tsx @@ -0,0 +1,30 @@ +import { FC } from "react"; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +import { NavigationCard } from './elements/navigationCard'; + + +export const HomeLeft: FC = () => { + return ( + <> + + + + + + + + + ) +} + +export default HomeLeft \ No newline at end of file diff --git a/src/components/home/elements/homeRight/styles/homeRight.tsx b/src/components/home/elements/homeRight/styles/homeRight.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/icons/contexts/iconsContext.tsx b/src/components/home/elements/icons/contexts/iconsContext.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/icons/hooks/useIcons.tsx b/src/components/home/elements/icons/hooks/useIcons.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/elements/icons/index.tsx b/src/components/home/elements/icons/index.tsx new file mode 100644 index 0000000..6f6f055 --- /dev/null +++ b/src/components/home/elements/icons/index.tsx @@ -0,0 +1,36 @@ +import { FC } from 'react'; +import Link from '@mui/material/Link'; +import Box from '@mui/material/Box'; +import { GitHub, Twitter } from '@material-ui/icons'; + +export const Icons: FC = () => { + return ( + <> + + + + + + + + + + ) +} + +export default Icons diff --git a/src/components/home/elements/icons/styles/icons.tsx b/src/components/home/elements/icons/styles/icons.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/hooks/useHome.tsx b/src/components/home/hooks/useHome.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx new file mode 100644 index 0000000..e674001 --- /dev/null +++ b/src/components/home/index.tsx @@ -0,0 +1,37 @@ +import { FC } from 'react' +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +import HomeLeft from './elements/homeLeft'; +import HomeRight from './elements/homeRight'; +import Icons from './elements/icons'; + + +export const HomePage: FC = () => { + return ( + <> + + + + + + + + + + + + + + + ) +} + +export default HomePage diff --git a/src/components/home/styles/home.tsx b/src/components/home/styles/home.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/product/contexts/productContext.tsx b/src/components/product/contexts/productContext.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/product/hooks/useProduct.tsx b/src/components/product/hooks/useProduct.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx new file mode 100644 index 0000000..886406e --- /dev/null +++ b/src/components/product/index.tsx @@ -0,0 +1,11 @@ +import { FC } from 'react' + +export const ProductPage: FC = () => { + return ( +
+ Product +
+ ); +} + +export default ProductPage diff --git a/src/components/product/styles/product.tsx b/src/components/product/styles/product.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/createEmotionCache.ts b/src/createEmotionCache.ts new file mode 100644 index 0000000..f64ea60 --- /dev/null +++ b/src/createEmotionCache.ts @@ -0,0 +1,19 @@ +import createCache from '@emotion/cache'; + +const isBrowser = typeof document !== 'undefined'; + +// On the client side, Create a meta tag at the top of the and set it as insertionPoint. +// This assures that MUI styles are loaded first. +// It allows developers to easily override MUI styles with other styling solutions, like CSS modules. +export default function createEmotionCache() { + let insertionPoint; + + if (isBrowser) { + const emotionInsertionPoint = document.querySelector( + 'meta[name="emotion-insertion-point"]', + ); + insertionPoint = emotionInsertionPoint ?? undefined; + } + + return createCache({ key: 'mui-style', insertionPoint }); +} diff --git a/graphql/queries/books.query.ts b/src/graphql/queries/books.query.ts similarity index 82% rename from graphql/queries/books.query.ts rename to src/graphql/queries/books.query.ts index 51f1259..73cf8f8 100644 --- a/graphql/queries/books.query.ts +++ b/src/graphql/queries/books.query.ts @@ -1,5 +1,5 @@ import { gql } from '@apollo/client'; -import { Book } from '../../types/book'; +import { Book } from '../schemas/book'; export const BOOKS_QUERY = gql` #graphql diff --git a/types/book.ts b/src/graphql/schemas/book.ts similarity index 100% rename from types/book.ts rename to src/graphql/schemas/book.ts diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx new file mode 100644 index 0000000..7ad0160 --- /dev/null +++ b/src/pages/_app.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import Head from 'next/head'; +import { AppProps } from 'next/app'; +import { ThemeProvider } from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import { CacheProvider, EmotionCache } from '@emotion/react'; +import theme from '../theme'; +import createEmotionCache from '../createEmotionCache'; +import '@/styles/globals.scss'; + +// Client-side cache, shared for the whole session of the user in the browser. +const clientSideEmotionCache = createEmotionCache(); + +export interface MyAppProps extends AppProps { + emotionCache?: EmotionCache; +} + +export default function MyApp(props: MyAppProps) { + const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; + return ( + + + + + + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} + + + + + ); +} \ No newline at end of file diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 0000000..30f9a14 --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; +import Document, { + Html, + Head, + Main, + NextScript, + DocumentProps, + DocumentContext, +} from 'next/document'; +import createEmotionServer from '@emotion/server/create-instance'; +import { AppType } from 'next/app'; +import theme, { roboto } from '../theme'; +import createEmotionCache from '../createEmotionCache'; +import { MyAppProps } from './_app'; + +interface MyDocumentProps extends DocumentProps { + emotionStyleTags: JSX.Element[]; +} + +export default function MyDocument({ emotionStyleTags }: MyDocumentProps) { + return ( + + + {/* PWA primary color */} + + + + {emotionStyleTags} + + +
+ + + + ); +} + +// `getInitialProps` belongs to `_document` (instead of `_app`), +// it's compatible with static-site generation (SSG). +MyDocument.getInitialProps = async (ctx: DocumentContext) => { + // Resolution order + // + // On the server: + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. document.getInitialProps + // 4. app.render + // 5. page.render + // 6. document.render + // + // On the server with error: + // 1. document.getInitialProps + // 2. app.render + // 3. page.render + // 4. document.render + // + // On the client + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. app.render + // 4. page.render + + const originalRenderPage = ctx.renderPage; + + // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance. + // However, be aware that it can have global side effects. + const cache = createEmotionCache(); + const { extractCriticalToChunks } = createEmotionServer(cache); + + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App: React.ComponentType & MyAppProps>) => + function EnhanceApp(props) { + return ; + }, + }); + + const initialProps = await Document.getInitialProps(ctx); + // This is important. It prevents Emotion to render invalid HTML. + // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 + const emotionStyles = extractCriticalToChunks(initialProps.html); + const emotionStyleTags = emotionStyles.styles.map((style) => ( +