From 9f5f7ad417ff4a0d7c3e5d80fb0c619f21278170 Mon Sep 17 00:00:00 2001 From: calliope Date: Wed, 28 Sep 2022 23:18:56 +0900 Subject: [PATCH] fmt --- src/atoms/authAtom.ts | 4 +- src/atoms/codeStyleAtom.ts | 4 +- src/components/BlogDetail/BlogIndex.tsx | 135 +++--- src/components/BlogDetail/index.tsx | 68 +-- src/components/BlogList/index.tsx | 74 ++-- src/components/DashBoard/BlogTable.tsx | 374 ++++++++-------- src/components/DashBoard/index.tsx | 68 +-- src/components/Editor/AddCategoryModal.tsx | 148 +++---- src/components/Editor/EditorBase.tsx | 176 ++++---- src/components/Editor/MarkdownEditor.tsx | 162 +++---- src/components/Editor/MetaDataEditor.tsx | 404 +++++++++--------- src/components/Editor/contexts.ts | 6 +- src/components/Editor/index.tsx | 38 +- src/components/Editor/md-editor.module.scss | 12 +- src/components/Footer/index.tsx | 22 +- src/components/Icons/index.tsx | 54 +-- src/components/Loader/index.tsx | 16 +- src/components/LoginForm/index.tsx | 93 ++-- src/components/MarkdownView/CodeContainer.tsx | 160 +++---- src/components/MarkdownView/index.tsx | 101 ++--- .../MarkdownView/md-view.module.scss | 124 +++--- src/components/Navbar/NavItem.tsx | 70 +-- src/components/Navbar/index.tsx | 66 +-- .../SelfIntroduction/ContactForm/index.tsx | 110 ++--- .../SkillList/CertificationsList.tsx | 42 +- .../SkillList/ProgrammingSkillList.tsx | 268 ++++++------ .../SelfIntroduction/SkillList/index.tsx | 12 +- src/components/SelfIntroduction/index.tsx | 62 +-- src/components/ShareButtons/index.tsx | 149 +++---- src/components/index.ts | 32 +- src/layouts/client.tsx | 75 ++-- src/pages/_app.tsx | 28 +- src/pages/admin/[uuid].tsx | 26 +- src/pages/admin/index.tsx | 12 +- src/pages/blogs/index.tsx | 30 +- src/pages/index.tsx | 20 +- src/styles/index.ts | 10 +- src/types/index.ts | 34 +- src/utils/hooks.ts | 20 +- 39 files changed, 1691 insertions(+), 1618 deletions(-) diff --git a/src/atoms/authAtom.ts b/src/atoms/authAtom.ts index 6e349af..b80b680 100644 --- a/src/atoms/authAtom.ts +++ b/src/atoms/authAtom.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; export const isAuthenticatedState = atom({ - key: 'isAuthenticatedState', - default: false, + key: 'isAuthenticatedState', + default: false, }); diff --git a/src/atoms/codeStyleAtom.ts b/src/atoms/codeStyleAtom.ts index 577927a..cdefa59 100644 --- a/src/atoms/codeStyleAtom.ts +++ b/src/atoms/codeStyleAtom.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; export const isDarkState = atom({ - key: 'isDarkState', - default: true, + key: 'isDarkState', + default: true, }); diff --git a/src/components/BlogDetail/BlogIndex.tsx b/src/components/BlogDetail/BlogIndex.tsx index 4fe236b..0cf5a6f 100644 --- a/src/components/BlogDetail/BlogIndex.tsx +++ b/src/components/BlogDetail/BlogIndex.tsx @@ -2,14 +2,14 @@ import Link from 'next/link'; import { useState } from 'react'; import ReactMarkdown from 'react-markdown'; import { - Box, - Collapse, - IconButton, - Link as MuiLink, - List, - ListItem, - Stack, - Typography, + Box, + Collapse, + IconButton, + Link as MuiLink, + List, + ListItem, + Stack, + Typography, } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; import ListIcon from '@mui/icons-material/List'; @@ -17,60 +17,69 @@ import ListIcon from '@mui/icons-material/List'; import { COLORS } from '#src/styles'; export const BlogIndex: React.FC<{ body: string }> = ({ body }) => { - const [isHidden, setIsHidden] = useState(true); - return ( - - - - 目次 - - {isHidden ? ( - setIsHidden(false)}> - - - ) : ( - setIsHidden(true)}> - - - )} - - - - ( - - - + + + 目次 + + {isHidden ? ( + setIsHidden(false)}> + + + ) : ( + setIsHidden(true)}> + + + )} + + + + ( + + + + {`${ + index! + 1 + }. ${children.toString()}`} + + + + ), + }} > - {`${index! + 1}. ${children.toString()}`} - - - - ), - }} - > - {body} - - - - - ); + {body} + + + + + ); }; diff --git a/src/components/BlogDetail/index.tsx b/src/components/BlogDetail/index.tsx index f4759ef..c3806a4 100644 --- a/src/components/BlogDetail/index.tsx +++ b/src/components/BlogDetail/index.tsx @@ -7,38 +7,38 @@ import { BlogIndex } from './BlogIndex'; import { Blog } from '#src/types'; export const BlogDetail: React.FC<{ blog: Blog }> = ({ blog }) => { - return ( - <> - - {blog.title} - - - - - - - - {blog.title} - {blog.sub_title} - - - - - 作成日時:  - {dayjs.unix(blog.created_at).format('YYYY年MM月DD日')} - - - 更新日時:  - {dayjs.unix(blog.updated_at).format('YYYY年MM月DD日')} - - - - - - - - - - - ); + return ( + <> + + {blog.title} + + + + + + + + {blog.title} + {blog.sub_title} + + + + + 作成日時:  + {dayjs.unix(blog.created_at).format('YYYY年MM月DD日')} + + + 更新日時:  + {dayjs.unix(blog.updated_at).format('YYYY年MM月DD日')} + + + + + + + + + + + ); }; diff --git a/src/components/BlogList/index.tsx b/src/components/BlogList/index.tsx index cc3c096..3fae5ef 100644 --- a/src/components/BlogList/index.tsx +++ b/src/components/BlogList/index.tsx @@ -9,45 +9,45 @@ import { Loader } from '#src/components'; // ブログ一覧 export const BlogList: React.FC<{ blogs: Blog[] }> = ({ blogs }) => { - // 全カテゴリーデータ - const { data: categoryData } = useCategoriesState(); + // 全カテゴリーデータ + const { data: categoryData } = useCategoriesState(); - // 表示されるブログ数 - const [blogsDisplay, setBlogDisplay] = useState(10); + // 表示されるブログ数 + const [blogsDisplay, setBlogDisplay] = useState(10); - // 参照と参照先が画面内に表示されているか - // 表示されたらブログを追加表示 - const [ref, isDisplayed] = useInView(); - const LOAD_BLOG_COUNT = 10 - useEffect(() => { - if (isDisplayed) { - setBlogDisplay((prev) => prev + LOAD_BLOG_COUNT); - } - }, [isDisplayed]); + // 参照と参照先が画面内に表示されているか + // 表示されたらブログを追加表示 + const [ref, isDisplayed] = useInView(); + const LOAD_BLOG_COUNT = 10; + useEffect(() => { + if (isDisplayed) { + setBlogDisplay((prev) => prev + LOAD_BLOG_COUNT); + } + }, [isDisplayed]); - return ( - - {/* ブログ一覧 */} - - {blogs.slice(0, blogsDisplay).map((blogData) => ( - - ))} - + return ( + + {/* ブログ一覧 */} + + {blogs.slice(0, blogsDisplay).map((blogData) => ( + + ))} + - {/* 無限スクロール */} - {blogsDisplay >= (blogs.length || 0) ? ( - - No More Contents... - - ) : ( - - - - )} - - ); + {/* 無限スクロール */} + {blogsDisplay >= (blogs.length || 0) ? ( + + No More Contents... + + ) : ( + + + + )} + + ); }; diff --git a/src/components/DashBoard/BlogTable.tsx b/src/components/DashBoard/BlogTable.tsx index ceb1762..cb64fe6 100644 --- a/src/components/DashBoard/BlogTable.tsx +++ b/src/components/DashBoard/BlogTable.tsx @@ -4,28 +4,28 @@ import dayjs from 'dayjs'; import Link from 'next/link'; import { useState } from 'react'; import { - Box, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TablePagination, - TableRow, - TableSortLabel, - Paper, + Box, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TablePagination, + TableRow, + TableSortLabel, + Paper, } from '@mui/material'; // Array.prototype.sort(compareFn?)の引数の関数生成関数 // ソートの仕組みを制定 function descendingComparator(a: T, b: T, orderBy: keyof T) { - if (b[orderBy] < a[orderBy]) { - return -1; - } - if (b[orderBy] > a[orderBy]) { - return 1; - } - return 0; + if (b[orderBy] < a[orderBy]) { + return -1; + } + if (b[orderBy] > a[orderBy]) { + return 1; + } + return 0; } // 降順、昇順のUnion型 @@ -33,190 +33,206 @@ type Order = 'asc' | 'desc'; // Array.prototype.sort(compareFn?)の引数用関数 function getComparator( - order: Order, - orderBy: Key, + order: Order, + orderBy: Key, ): ( - a: { [key in Key]: number | string | Date | boolean }, - b: { [key in Key]: number | string | Date | boolean }, + a: { [key in Key]: number | string | Date | boolean }, + b: { [key in Key]: number | string | Date | boolean }, ) => number { - return order === 'desc' - ? (a, b) => descendingComparator(a, b, orderBy) - : (a, b) => -descendingComparator(a, b, orderBy); + return order === 'desc' + ? (a, b) => descendingComparator(a, b, orderBy) + : (a, b) => -descendingComparator(a, b, orderBy); } // tableのヘッダー用の型 interface HeadCell { - id: keyof BlogTableData; - label: string; + id: keyof BlogTableData; + label: string; } // tableヘッダーの生成 const headCells: readonly HeadCell[] = [ - { - id: 'title', - label: 'Titles', - }, - { - id: 'created_at', - label: '作成日時', - }, - { - id: 'updated_at', - label: '更新日時', - }, + { + id: 'title', + label: 'Titles', + }, + { + id: 'created_at', + label: '作成日時', + }, + { + id: 'updated_at', + label: '更新日時', + }, ]; // tableの機能の型(tableヘッダーと組み合わせる) interface EnhancedTableProps { - onRequestSort: ( - event: React.MouseEvent, - property: keyof BlogTableData, - ) => void; - order: Order; - orderBy: string; - rowCount: number; + onRequestSort: ( + event: React.MouseEvent, + property: keyof BlogTableData, + ) => void; + order: Order; + orderBy: string; + rowCount: number; } // 機能付きtableヘッダーのコンポーネント const EnhancedTableHead: React.FC = ( - props: EnhancedTableProps, + props: EnhancedTableProps, ) => { - const { order, orderBy, onRequestSort } = props; - - // TableSortLabelがclickされたらonRequestSortが呼ばれる - const createSortHandler = - (property: keyof BlogTableData) => (event: React.MouseEvent) => { - onRequestSort(event, property); - }; - - return ( - - - {headCells.map((headCell) => ( - - - {headCell.label} - - - ))} - - - ); + const { order, orderBy, onRequestSort } = props; + + // TableSortLabelがclickされたらonRequestSortが呼ばれる + const createSortHandler = + (property: keyof BlogTableData) => (event: React.MouseEvent) => { + onRequestSort(event, property); + }; + + return ( + + + {headCells.map((headCell) => ( + + + {headCell.label} + + + ))} + + + ); }; export const BlogTable: React.FC<{ rows: BlogTableData[] }> = ({ - rows, + rows, }: { - rows: BlogTableData[]; + rows: BlogTableData[]; }) => { - // 1ページあたりの行数一覧 - const ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100]; - // 降順、昇順の指定 - const [order, setOrder] = useState('desc'); - // ソート列 - const [orderBy, setOrderBy] = useState('updated_at'); - // 現在のページ - const [currentPage, setCurrentPage] = useState(0); - // 1ページあたりの行数 - const [rowsPerPage, setRowsPerPage] = useState(ROWS_PER_PAGE_OPTIONS[0]); - - const handleRequestSort = ( - event: React.MouseEvent, - property: keyof BlogTableData, - ) => { - const isAsc = orderBy === property && order === 'asc'; - setOrder(isAsc ? 'desc' : 'asc'); - setOrderBy(property); - }; - - const handleChangePage = (event: unknown, newPage: number) => { - setCurrentPage(newPage); - }; - - const handleChangeRowsPerPage = ( - event: React.ChangeEvent, - ) => { - setRowsPerPage(parseInt(event.target.value, 10)); - setCurrentPage(0); - }; - - // 空白である行数 - const emptyRows = - currentPage > 0 - ? Math.max(0, (1 + currentPage) * rowsPerPage - rows.length) - : 0; - - return ( - - - - - - - {rows - .slice() - .sort(getComparator(order, orderBy)) - .slice( - currentPage * rowsPerPage, - currentPage * rowsPerPage + rowsPerPage, - ) - .map((row, index) => { - const labelId = `enhanced-table-checkbox-${index}`; - - return ( - - - - {row.title} - - - - {dayjs.unix(row.updated_at).format('YYYY年MM月DD日')} - - - {dayjs.unix(row.created_at).format('YYYY年MM月DD日')} - - - ); - })} - {emptyRows > 0 && ( - - )} - -
- - - - - ); + // 1ページあたりの行数一覧 + const ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100]; + // 降順、昇順の指定 + const [order, setOrder] = useState('desc'); + // ソート列 + const [orderBy, setOrderBy] = useState('updated_at'); + // 現在のページ + const [currentPage, setCurrentPage] = useState(0); + // 1ページあたりの行数 + const [rowsPerPage, setRowsPerPage] = useState(ROWS_PER_PAGE_OPTIONS[0]); + + const handleRequestSort = ( + event: React.MouseEvent, + property: keyof BlogTableData, + ) => { + const isAsc = orderBy === property && order === 'asc'; + setOrder(isAsc ? 'desc' : 'asc'); + setOrderBy(property); + }; + + const handleChangePage = (event: unknown, newPage: number) => { + setCurrentPage(newPage); + }; + + const handleChangeRowsPerPage = ( + event: React.ChangeEvent, + ) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setCurrentPage(0); + }; + + // 空白である行数 + const emptyRows = + currentPage > 0 + ? Math.max(0, (1 + currentPage) * rowsPerPage - rows.length) + : 0; + + return ( + + + + + + + {rows + .slice() + .sort(getComparator(order, orderBy)) + .slice( + currentPage * rowsPerPage, + currentPage * rowsPerPage + rowsPerPage, + ) + .map((row, index) => { + const labelId = `enhanced-table-checkbox-${index}`; + + return ( + + + + + {row.title} + + + + + {dayjs + .unix(row.updated_at) + .format('YYYY年MM月DD日')} + + + {dayjs + .unix(row.created_at) + .format('YYYY年MM月DD日')} + + + ); + })} + {emptyRows > 0 && ( + + )} + +
+ + + + + ); }; diff --git a/src/components/DashBoard/index.tsx b/src/components/DashBoard/index.tsx index b605576..465dbd7 100644 --- a/src/components/DashBoard/index.tsx +++ b/src/components/DashBoard/index.tsx @@ -9,44 +9,44 @@ import { useBlogListState } from '#src/utils/hooks'; import { BlogTable } from './BlogTable'; export const DashBoard: React.FC = () => { - const { data, error } = useBlogListState(false); + const { data, error } = useBlogListState(false); - const rows: BlogTableData[] = data || []; + const rows: BlogTableData[] = data || []; - function getNewUuid() { - let uuidCreated = uuid1(); - while (rows.findIndex((blog) => blog.uuid === uuidCreated) !== -1) { - uuidCreated = uuid1(); + function getNewUuid() { + let uuidCreated = uuid1(); + while (rows.findIndex((blog) => blog.uuid === uuidCreated) !== -1) { + uuidCreated = uuid1(); + } + return uuidCreated; } - return uuidCreated; - } - if (error) { + if (error) { + return ( + + + 読み込みに失敗しました。 + + + ); + } + if (!data) { + return ; + } return ( - - - 読み込みに失敗しました。 - - + <> + + + + + ); - } - if (!data) { - return ; - } - return ( - <> - - - - - - ); }; diff --git a/src/components/Editor/AddCategoryModal.tsx b/src/components/Editor/AddCategoryModal.tsx index e5a84af..a7634c7 100644 --- a/src/components/Editor/AddCategoryModal.tsx +++ b/src/components/Editor/AddCategoryModal.tsx @@ -2,88 +2,90 @@ import React, { RefObject, useRef, useState } from 'react'; import AddIcon from '@mui/icons-material/Add'; import CloseIcon from '@mui/icons-material/Close'; import { - Box, - Button, - IconButton, - Modal, - Paper, - Stack, - TextField, - Tooltip, - Typography, + Box, + Button, + IconButton, + Modal, + Paper, + Stack, + TextField, + Tooltip, + Typography, } from '@mui/material'; import { adminPostCategory } from '#src/utils/api/auth'; // Categoryを追加するためのモーダル export const AddCategoryModal: React.FC = () => { - // Modalが表示されているか - const [isDisplayed, setIsDisplayed] = useState(false); + // Modalが表示されているか + const [isDisplayed, setIsDisplayed] = useState(false); - // inputの参照 - const ref = useRef(null) as RefObject; - return ( - <> - { - setIsDisplayed((prev) => !prev); - }} - > - - + // inputの参照 + const ref = useRef(null) as RefObject; + return ( + <> + { + setIsDisplayed((prev) => !prev); + }} + > + + - { - if (r !== 'backdropClick') { - setIsDisplayed(false); - } - }} - > - - - - - setIsDisplayed(false)}> - - - - + { + if (r !== 'backdropClick') { + setIsDisplayed(false); + } + }} + > + + + + + setIsDisplayed(false)} + > + + + + - Add Categories + Add Categories - + - - - - - - ); + + + + + + ); }; diff --git a/src/components/Editor/EditorBase.tsx b/src/components/Editor/EditorBase.tsx index e0f7e1e..b6e816f 100644 --- a/src/components/Editor/EditorBase.tsx +++ b/src/components/Editor/EditorBase.tsx @@ -10,106 +10,108 @@ import { MarkdownEditor } from './MarkdownEditor'; import { MetaDataEditor } from './MetaDataEditor'; type TabPanelProps = { - children: React.ReactNode; - index: number; - focus: number; - sx?: SxProps; + children: React.ReactNode; + index: number; + focus: number; + sx?: SxProps; }; const TabPanel: React.FC = ({ - children, - index, - focus, - sx = {}, + children, + index, + focus, + sx = {}, }: TabPanelProps) => { - return ( - - ); + return ( + + ); }; export const EditorBase: React.FC<{ blogData: Blog }> = ({ blogData }) => { - // フォーカスされているタブ - const [focus, setfocus] = useState(0); + // フォーカスされているタブ + const [focus, setfocus] = useState(0); - // ブログコンテクスト - const [blogDataContextValue, setBlogDataContextValue] = useState(blogData); + // ブログコンテクスト + const [blogDataContextValue, setBlogDataContextValue] = useState(blogData); - // タブ切り換え - const handleTabChange = (event: React.SyntheticEvent, newfocus: number) => { - setfocus(newfocus); - }; - - function a11yProps(index: number) { - return { - id: `blog-tab-${index}`, - 'aria-controls': `blog-tabpanel-${index}`, + // タブ切り換え + const handleTabChange = (event: React.SyntheticEvent, newfocus: number) => { + setfocus(newfocus); }; - } - return ( - - - - - - - - + + + + + + + - - - - - - + + + + + + - - - - - + + + + + - - - - - - - - ); + + + + + + + + ); }; diff --git a/src/components/Editor/MarkdownEditor.tsx b/src/components/Editor/MarkdownEditor.tsx index 55ad9e4..7c46fca 100644 --- a/src/components/Editor/MarkdownEditor.tsx +++ b/src/components/Editor/MarkdownEditor.tsx @@ -7,89 +7,95 @@ import { blogDataContext } from './contexts'; import { adminPostBlog } from '#src/utils/api/auth'; export const MarkdownEditor: React.FC = () => { - // saveされたか - const [isSaved, setIsSaved] = useState(false); + // saveされたか + const [isSaved, setIsSaved] = useState(false); - // markdown textareaの参照 - const contentRef = useRef(null!); + // markdown textareaの参照 + const contentRef = useRef(null!); - const blogData = useContext(blogDataContext); + const blogData = useContext(blogDataContext); - // バックエンドへ保存 - const saveBlogData = async () => { - if (blogData) { - blogData.setBlogDataContextValue((prev) => { - prev.content = contentRef.current.value; - return prev; - }); - await adminPostBlog(blogData.blogDataContextValue); - setIsSaved(() => true); - } - }; + // バックエンドへ保存 + const saveBlogData = async () => { + if (blogData) { + blogData.setBlogDataContextValue((prev) => { + prev.content = contentRef.current.value; + return prev; + }); + await adminPostBlog(blogData.blogDataContextValue); + setIsSaved(() => true); + } + }; - // ショートカットキー - const handleShortcutKey = async (e: React.KeyboardEvent) => { - // ctrl + sでsave - if (e.ctrlKey && e.key === 's') { - e.preventDefault(); - await saveBlogData(); - } - // ctrl + ]でインデント - if (e.ctrlKey && e.key === ']') { - let cursorPosition = contentRef.current.selectionStart; - const cursorRow = contentRef.current.value - .substring(0, cursorPosition) - .split('\n').length; - const bodies = contentRef.current.value.split('\n'); - bodies[cursorRow - 1] = ' ' + bodies[cursorRow - 1]; - cursorPosition += 2; - contentRef.current.value = bodies.join('\n'); - contentRef.current.setSelectionRange(cursorPosition, cursorPosition); - } - // ctrl + [でインデント削除 - if (e.ctrlKey && e.key === '[') { - let cursorPosition = contentRef.current.selectionStart; - const cursorRow = contentRef.current.value - .substring(0, cursorPosition) - .split('\n').length; - const bodies = contentRef.current.value.split('\n'); - if (' ' === bodies[cursorRow - 1].substring(0, 2)) { - bodies[cursorRow - 1] = bodies[cursorRow - 1].substring(2); - cursorPosition -= 2; - } - contentRef.current.value = bodies.join('\n'); - contentRef.current.setSelectionRange(cursorPosition, cursorPosition); - } - }; + // ショートカットキー + const handleShortcutKey = async (e: React.KeyboardEvent) => { + // ctrl + sでsave + if (e.ctrlKey && e.key === 's') { + e.preventDefault(); + await saveBlogData(); + } + // ctrl + ]でインデント + if (e.ctrlKey && e.key === ']') { + let cursorPosition = contentRef.current.selectionStart; + const cursorRow = contentRef.current.value + .substring(0, cursorPosition) + .split('\n').length; + const bodies = contentRef.current.value.split('\n'); + bodies[cursorRow - 1] = ' ' + bodies[cursorRow - 1]; + cursorPosition += 2; + contentRef.current.value = bodies.join('\n'); + contentRef.current.setSelectionRange( + cursorPosition, + cursorPosition, + ); + } + // ctrl + [でインデント削除 + if (e.ctrlKey && e.key === '[') { + let cursorPosition = contentRef.current.selectionStart; + const cursorRow = contentRef.current.value + .substring(0, cursorPosition) + .split('\n').length; + const bodies = contentRef.current.value.split('\n'); + if (' ' === bodies[cursorRow - 1].substring(0, 2)) { + bodies[cursorRow - 1] = bodies[cursorRow - 1].substring(2); + cursorPosition -= 2; + } + contentRef.current.value = bodies.join('\n'); + contentRef.current.setSelectionRange( + cursorPosition, + cursorPosition, + ); + } + }; - return ( - - setIsSaved(() => false)} - > - setIsSaved(() => false)} - severity="success" - > - Saved Successfully! - - + return ( + + setIsSaved(() => false)} + > + setIsSaved(() => false)} + severity="success" + > + Saved Successfully! + + - + - - - ); + + + ); }; diff --git a/src/components/Editor/MetaDataEditor.tsx b/src/components/Editor/MetaDataEditor.tsx index 5269320..3a1019e 100644 --- a/src/components/Editor/MetaDataEditor.tsx +++ b/src/components/Editor/MetaDataEditor.tsx @@ -4,18 +4,18 @@ import dayjs from 'dayjs'; import { useContext } from 'react'; import { useForm } from 'react-hook-form'; import { - Autocomplete, - Box, - Button, - FormControlLabel, - Stack, - Switch, - TextField, + Autocomplete, + Box, + Button, + FormControlLabel, + Stack, + Switch, + TextField, } from '@mui/material'; import { - LocalizationProvider, - MobileDatePicker, - MobileDateTimePicker, + LocalizationProvider, + MobileDatePicker, + MobileDateTimePicker, } from '@mui/lab'; import AdapterDayjs from '@mui/lab/AdapterDayjs'; @@ -25,198 +25,208 @@ import { AddCategoryModal } from './AddCategoryModal'; import { blogDataContext, BlogDataContextType } from './contexts'; export const MetaDataEditor: React.FC = () => { - // Blogについてのform設定 - const { - register, - handleSubmit, - watch, - setValue, - formState: { errors }, - } = useForm({ mode: 'onTouched' }); - - // blogDataの読み込み - const blogData = useContext(blogDataContext) as BlogDataContextType; - - // categoryDataの読み込み - const { data: categoryData } = useCategoriesState(); - - // submitした際の処理 - // 初期値無しや型キャスト対応 - const onSubmit = handleSubmit(async (data) => { - data.categories = - data.categories || blogData.blogDataContextValue.categories; - data.uuid = blogData.blogDataContextValue.uuid; - data.content = blogData.blogDataContextValue.content; - data.created_at = dayjs(data.created_at).unix(); - data.updated_at = dayjs(data.updated_at).unix(); - console.log(data); - - await adminPostBlog(data); - blogData.setBlogDataContextValue(() => data); - }); - - return ( - - - - - - - - - - - - value.label) : []} - defaultValue={ - categoryData - ? blogData.blogDataContextValue.categories.map( - (value) => categoryData[value].label, - ) - : [] - } - filterSelectedOptions - onChange={(e, val) => { - setValue( - 'categories', - val.map( - (categoryLabel) => - categoryData!.find((value) => value.label === categoryLabel)! - .key, - ), - ); - }} - renderInput={(params) => ( + // Blogについてのform設定 + const { + register, + handleSubmit, + watch, + setValue, + formState: { errors }, + } = useForm({ mode: 'onTouched' }); + + // blogDataの読み込み + const blogData = useContext(blogDataContext) as BlogDataContextType; + + // categoryDataの読み込み + const { data: categoryData } = useCategoriesState(); + + // submitした際の処理 + // 初期値無しや型キャスト対応 + const onSubmit = handleSubmit(async (data) => { + data.categories = + data.categories || blogData.blogDataContextValue.categories; + data.uuid = blogData.blogDataContextValue.uuid; + data.content = blogData.blogDataContextValue.content; + data.created_at = dayjs(data.created_at).unix(); + data.updated_at = dayjs(data.updated_at).unix(); + + await adminPostBlog(data); + blogData.setBlogDataContextValue(() => data); + }); + + return ( + - )} - /> - - - - - { - setValue('created_at', newDate!); - }} - renderInput={(p) => ( - - )} - /> - - { - setValue('updated_at', newDate!); - }} - renderInput={(p) => ( - + + - )} - /> + helperText="max length 100." + error={errors.sub_title ? true : false} + {...register('sub_title', { + maxLength: 100, + })} + /> + + + + + + value.label) + : [] + } + defaultValue={ + categoryData + ? blogData.blogDataContextValue.categories.map( + (value) => categoryData[value].label, + ) + : [] + } + filterSelectedOptions + onChange={(e, val) => { + setValue( + 'categories', + val.map( + (categoryLabel) => + categoryData!.find( + (value) => + value.label === categoryLabel, + )!.key, + ), + ); + }} + renderInput={(params) => ( + + )} + /> + + + + + { + setValue('created_at', newDate!); + }} + renderInput={(p) => ( + + )} + /> + + { + setValue('updated_at', newDate!); + }} + renderInput={(p) => ( + + )} + /> + + + + + } + {...register('is_published')} + /> + +
+ + - - - - } - {...register('is_published')} - /> - -
- - - - ); + ); }; diff --git a/src/components/Editor/contexts.ts b/src/components/Editor/contexts.ts index 5b463b2..8a4cf6c 100644 --- a/src/components/Editor/contexts.ts +++ b/src/components/Editor/contexts.ts @@ -3,10 +3,10 @@ import type { Blog } from '#src/types'; import { createContext, Dispatch, SetStateAction } from 'react'; export type BlogDataContextType = { - blogDataContextValue: Blog; - setBlogDataContextValue: Dispatch>; + blogDataContextValue: Blog; + setBlogDataContextValue: Dispatch>; }; export const blogDataContext = createContext( - undefined, + undefined, ); diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx index 0bba1f4..18eeb9c 100644 --- a/src/components/Editor/index.tsx +++ b/src/components/Editor/index.tsx @@ -7,23 +7,23 @@ import { useBlogListState } from '#src/utils/hooks'; import { EditorBase } from './EditorBase'; export const Editor: React.FC> = ({ uuid }) => { - function createNewBlog(): Blog { - return { - uuid: uuid, - title: 'default', - sub_title: '', - description: '', - content: '', - created_at: dayjs().unix(), - updated_at: dayjs().unix(), - is_published: false, - categories: [], - }; - } - const { data } = useBlogListState(); - if (!data) { - return ; - } - const blogData = data.find((blog) => blog.uuid === uuid) || createNewBlog(); - return ; + function createNewBlog(): Blog { + return { + uuid: uuid, + title: 'default', + sub_title: '', + description: '', + content: '', + created_at: dayjs().unix(), + updated_at: dayjs().unix(), + is_published: false, + categories: [], + }; + } + const { data } = useBlogListState(); + if (!data) { + return ; + } + const blogData = data.find((blog) => blog.uuid === uuid) || createNewBlog(); + return ; }; diff --git a/src/components/Editor/md-editor.module.scss b/src/components/Editor/md-editor.module.scss index 0e4c9bb..915c3f9 100644 --- a/src/components/Editor/md-editor.module.scss +++ b/src/components/Editor/md-editor.module.scss @@ -1,10 +1,10 @@ @use '../../../styles/globals.module.scss' as g; .mdEditor { - line-height: 22px; - width: stretch; - resize: none; - font-size: large; - border-radius: 8px; - font-family: sans-serif; + line-height: 22px; + width: stretch; + resize: none; + font-size: large; + border-radius: 8px; + font-family: sans-serif; } diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 778ff11..00456e1 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -4,15 +4,15 @@ import { Box, Container } from '@mui/material'; import { COLORS } from '#src/styles'; export const Footer: React.FC = () => { - return ( - - ©{dayjs().year()} - CaCaCa Blog - - ); + return ( + + ©{dayjs().year()} - CaCaCa Blog + + ); }; diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx index e952b28..cc33ae1 100644 --- a/src/components/Icons/index.tsx +++ b/src/components/Icons/index.tsx @@ -2,79 +2,79 @@ import { BsLine } from 'react-icons/bs'; import { FaPython, FaReact } from 'react-icons/fa'; import { IoLogoJavascript, IoLogoVue } from 'react-icons/io5'; import { - SiDjango, - SiFastapi, - SiNextdotjs, - SiNumpy, - SiNuxtdotjs, - SiPandas, - SiPytorch, - SiScikitlearn, - SiSelenium, - SiSvelte, - SiTypescript, + SiDjango, + SiFastapi, + SiNextdotjs, + SiNumpy, + SiNuxtdotjs, + SiPandas, + SiPytorch, + SiScikitlearn, + SiSelenium, + SiSvelte, + SiTypescript, } from 'react-icons/si'; export const LineIcon: React.FC = () => { - return ; + return ; }; export const PythonIcon: React.FC = () => { - return ; + return ; }; export const JavaScriptIcon: React.FC = () => { - return ; + return ; }; export const DjangoIcon: React.FC = () => { - return ; + return ; }; export const FastapiIcon: React.FC = () => { - return ; + return ; }; export const SeleniumIcon: React.FC = () => { - return ; + return ; }; export const PytorchIcon: React.FC = () => { - return ; + return ; }; export const NumpyIcon: React.FC = () => { - return ; + return ; }; export const PandasIcon: React.FC = () => { - return ; + return ; }; export const ScikitLearnIcon: React.FC = () => { - return ; + return ; }; export const ReactIcon: React.FC = () => { - return ; + return ; }; export const NextjsIcon: React.FC = () => { - return ; + return ; }; export const SvelteIcon: React.FC = () => { - return ; + return ; }; export const VueIcon: React.FC = () => { - return ; + return ; }; export const NuxtIcon: React.FC = () => { - return ; + return ; }; export const TypeScriptIcon: React.FC = () => { - return ; + return ; }; diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx index c127be0..8da405c 100644 --- a/src/components/Loader/index.tsx +++ b/src/components/Loader/index.tsx @@ -1,9 +1,15 @@ import { Box, CircularProgress } from '@mui/material'; export const Loader: React.FC = () => { - return ( - - - - ); + return ( + + + + ); }; diff --git a/src/components/LoginForm/index.tsx b/src/components/LoginForm/index.tsx index 03f8fff..87c15c0 100644 --- a/src/components/LoginForm/index.tsx +++ b/src/components/LoginForm/index.tsx @@ -9,58 +9,65 @@ import { isAuthenticatedState } from '#src/atoms/authAtom'; import { adminLogin } from '#src/utils/api/auth'; export const LoginForm: React.FC = () => { - const setIsAuthed = useSetRecoilState(isAuthenticatedState); + const setIsAuthed = useSetRecoilState(isAuthenticatedState); - // Userに関してのform設定 - const { register, handleSubmit } = useForm(); + // Userに関してのform設定 + const { register, handleSubmit } = useForm< + User & { securityCode: string } + >(); - // submit時 - const onSubmit = handleSubmit(async (data) => { - // security codeチェック - assert( - data.securityCode === process.env.ENV_SECURITY_CODE, - 'Invalid Security Code!', - ); + // submit時 + const onSubmit = handleSubmit(async (data) => { + // security codeチェック + assert( + data.securityCode === process.env.ENV_SECURITY_CODE, + 'Invalid Security Code!', + ); - const response = await adminLogin({ - username: data.username, - password: data.password, - }); + const response = await adminLogin({ + username: data.username, + password: data.password, + }); - if (response.status === 200) { - setIsAuthed(() => true); - } - }); + if (response.status === 200) { + setIsAuthed(() => true); + } + }); - return ( - -
- - username: - - + return ( + + + + username: + + -
+
- - password: - - + + password: + + -
+
- - security code: - - + + + security code: + + + -
+
- - -
- ); + + + + ); }; diff --git a/src/components/MarkdownView/CodeContainer.tsx b/src/components/MarkdownView/CodeContainer.tsx index 759fd21..f7c9375 100644 --- a/src/components/MarkdownView/CodeContainer.tsx +++ b/src/components/MarkdownView/CodeContainer.tsx @@ -8,93 +8,93 @@ import { COLORS } from '#src/styles'; import { useCurrentAbsUrl } from '#src/utils/hooks'; const FILE_EXTENSIONS: { [lang: string]: string } = { - python: '.py', - py: '.py', - javascript: '.js', - js: '.js', - jsx: '.jsx', - typescript: '.ts', - ts: '.ts', - tsx: '.tsx', - html: '.html', - css: '.css', - scss: '.scss', + python: '.py', + py: '.py', + javascript: '.js', + js: '.js', + jsx: '.jsx', + typescript: '.ts', + ts: '.ts', + tsx: '.tsx', + html: '.html', + css: '.css', + scss: '.scss', }; type PropType = { - filename?: string; - fileExtension: string; - node: Element; + filename?: string; + fileExtension: string; + node: Element; }; export const CodeContainer: React.FC = (props) => { - const [isDark, setIsDark] = useRecoilState(isDarkState); - const filename: string | undefined = props.filename; - const fileExtension: string | undefined = filename - ? filename.slice(1, -1) - : FILE_EXTENSIONS[props.fileExtension.toLocaleLowerCase()]; - const currentUrl = useCurrentAbsUrl(); + const [isDark, setIsDark] = useRecoilState(isDarkState); + const filename: string | undefined = props.filename; + const fileExtension: string | undefined = filename + ? filename.slice(1, -1) + : FILE_EXTENSIONS[props.fileExtension.toLocaleLowerCase()]; + const currentUrl = useCurrentAbsUrl(); - return ( - - {fileExtension && ( - - {fileExtension} - - )} + return ( + + {fileExtension && ( + + {fileExtension} + + )} - - setIsDark((prev) => !prev)} - sx={{ - top: '20px', - right: 'calc(13% - 20px)', - position: 'absolute', - zIndex: 500, - color: isDark ? 'rgb(248, 248, 242)' : 'default', - }} - > - - - + + setIsDark((prev) => !prev)} + sx={{ + top: '20px', + right: 'calc(13% - 20px)', + position: 'absolute', + zIndex: 500, + color: isDark ? 'rgb(248, 248, 242)' : 'default', + }} + > + + + - - { - const code = ( - props.node.children[0] as unknown as { - type: string; - value: string; - } - ).value; - await navigator.clipboard.writeText( - `"Copied from ${currentUrl}"\n\n${code}`, - ); - }} - sx={{ - top: '20px', - right: 'calc(14% + 11px)', - position: 'absolute', - zIndex: 500, - color: isDark ? 'rgb(248, 248, 242)' : 'default', - }} - > - - - - {props.children} - - ); + + { + const code = ( + props.node.children[0] as unknown as { + type: string; + value: string; + } + ).value; + await navigator.clipboard.writeText( + `"Copied from ${currentUrl}"\n\n${code}`, + ); + }} + sx={{ + top: '20px', + right: 'calc(14% + 11px)', + position: 'absolute', + zIndex: 500, + color: isDark ? 'rgb(248, 248, 242)' : 'default', + }} + > + + + + {props.children} + + ); }; diff --git a/src/components/MarkdownView/index.tsx b/src/components/MarkdownView/index.tsx index 225dd09..7abe406 100644 --- a/src/components/MarkdownView/index.tsx +++ b/src/components/MarkdownView/index.tsx @@ -8,57 +8,60 @@ import remarkGfm from 'remark-gfm'; import { Box } from '@mui/material'; import { CodeContainer } from './CodeContainer'; -import { isDarkState } from '../../atoms/codeStyleAtom'; +import { isDarkState } from '#src/atoms/codeStyleAtom'; export const MarkdownView: React.FC<{ body: string }> = ({ body }) => { - // codeのカラーモード - const isDark = useRecoilValue(isDarkState); + // codeのカラーモード + const isDark = useRecoilValue(isDarkState); - return ( - - - {String(children).replace(/\n$/, '')} - - ) : ( - // inlinecodeの時 - - {children} - - ); - }, - // h1は目次用にid付加・headerに隠れないようにsx設定 - h1: ({ children, node }) => ( - + + {String(children).replace(/\n$/, '')} + + ) : ( + // inlinecodeの時 + + {children} + + ); + }, + // h1は目次用にid付加・headerに隠れないようにsx設定 + h1: ({ children, node }) => ( + + {String(children)} + + ), + }} > - {String(children)} - - ), - }} - > - {body} - - - ); + {body} + + + ); }; diff --git a/src/components/MarkdownView/md-view.module.scss b/src/components/MarkdownView/md-view.module.scss index 742bafe..bf11423 100644 --- a/src/components/MarkdownView/md-view.module.scss +++ b/src/components/MarkdownView/md-view.module.scss @@ -1,71 +1,71 @@ @use '../../../styles/globals.module.scss' as g; .mdView { - background-color: g.$main-color; - color: g.$base-color; - min-height: 100vh; - & > :nth-child(1) { - margin-top: 0; - } - & > :nth-last-child(1) { - margin-bottom: 0; - } - - .inline-code { - background-color: rgb(238, 187, 195, 0.6); + background-color: g.$main-color; color: g.$base-color; - border-radius: 0.3em; - padding: 4px 5px; - white-space: nowrap; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - } - table { - border-collapse: collapse; - th, - td { - padding: 15px; - border: 1pt solid g.$base-color; + min-height: 100vh; + & > :nth-child(1) { + margin-top: 0; } - } - blockquote { - position: relative; - padding: 5px 15px 5px 55px; - box-sizing: border-box; - color: g.$base-color; - background: g.$accent-color; - border-radius: 8px; - &::before { - display: inline-block; - position: absolute; - top: -2px; - left: 9px; - width: 38px; - height: 32px; - text-align: center; - content: '☆'; - color: g.$white-color; - font-size: 18px; - line-height: 30px; - background: g.$accent-dark-color; - font-weight: 100; + & > :nth-last-child(1) { + margin-bottom: 0; + } + + .inline-code { + background-color: rgb(238, 187, 195, 0.6); + color: g.$base-color; + border-radius: 0.3em; + padding: 4px 5px; + white-space: nowrap; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; } - &::after { - content: ''; - position: absolute; - left: 9px; - top: 30px; - height: 0; - width: 0; - border-left: 19px solid g.$accent-dark-color; - border-right: 19px solid g.$accent-dark-color; - border-bottom: 10px solid transparent; + table { + border-collapse: collapse; + th, + td { + padding: 15px; + border: 1pt solid g.$base-color; + } } - p { - position: relative; - padding: 0; - margin: 10px 0; - z-index: 3; - line-height: 1.7; + blockquote { + position: relative; + padding: 5px 15px 5px 55px; + box-sizing: border-box; + color: g.$base-color; + background: g.$accent-color; + border-radius: 8px; + &::before { + display: inline-block; + position: absolute; + top: -2px; + left: 9px; + width: 38px; + height: 32px; + text-align: center; + content: '☆'; + color: g.$white-color; + font-size: 18px; + line-height: 30px; + background: g.$accent-dark-color; + font-weight: 100; + } + &::after { + content: ''; + position: absolute; + left: 9px; + top: 30px; + height: 0; + width: 0; + border-left: 19px solid g.$accent-dark-color; + border-right: 19px solid g.$accent-dark-color; + border-bottom: 10px solid transparent; + } + p { + position: relative; + padding: 0; + margin: 10px 0; + z-index: 3; + line-height: 1.7; + } } - } } diff --git a/src/components/Navbar/NavItem.tsx b/src/components/Navbar/NavItem.tsx index 47cbae4..9581141 100644 --- a/src/components/Navbar/NavItem.tsx +++ b/src/components/Navbar/NavItem.tsx @@ -1,42 +1,42 @@ -import type { navItem as navItemType } from '../../types'; +import type { navItem as navItemType } from '#src/types'; import Link from 'next/link'; import { Link as MuiLink, Typography } from '@mui/material'; -import { COLORS } from '../../styles'; +import { COLORS } from '#src/styles'; export const NavItem: React.FC<{ navItem: navItemType }> = ({ navItem }) => { - return ( - - - - {navItem.label} - - - - ); + return ( + + + + {navItem.label} + + + + ); }; diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 57e83fc..128fa29 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -8,40 +8,40 @@ import { COLORS } from '#src/styles'; // 画面上部のナビゲーションバー export const Navbar: React.FC = () => { - const navItems: navItem[] = [ - { label: 'Home', url: '/' }, - { label: 'Blog', url: '/blogs' }, - ]; + const navItems: navItem[] = [ + { label: 'Home', url: '/' }, + { label: 'Blog', url: '/blogs' }, + ]; - return ( - - - - - - - CaCaCa Blog - - - + + + + + + CaCaCa Blog + + + - - {navItems.map((navItem, idx) => ( - - ))} - - - - - ); + + {navItems.map((navItem, idx) => ( + + ))} + + + + + ); }; diff --git a/src/components/SelfIntroduction/ContactForm/index.tsx b/src/components/SelfIntroduction/ContactForm/index.tsx index 044cdf3..22d9e43 100644 --- a/src/components/SelfIntroduction/ContactForm/index.tsx +++ b/src/components/SelfIntroduction/ContactForm/index.tsx @@ -6,61 +6,65 @@ import { COLORS } from '#src/styles'; import { postContactForm } from '#src/utils/api/auth'; export type ContactContentType = { - subject?: string; - email: string; - body: string; + subject?: string; + email: string; + body: string; }; export const ContactForm = () => { - const { - register, - handleSubmit, - formState: { errors }, - } = useForm({ mode: 'onBlur' }); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ mode: 'onBlur' }); - async function submit(data: ContactContentType) { - await postContactForm(data); - } - return ( - - - - - - - ); + async function submit(data: ContactContentType) { + await postContactForm(data); + } + return ( + + + + + + + ); }; diff --git a/src/components/SelfIntroduction/SkillList/CertificationsList.tsx b/src/components/SelfIntroduction/SkillList/CertificationsList.tsx index fbcbc2f..94c11e5 100644 --- a/src/components/SelfIntroduction/SkillList/CertificationsList.tsx +++ b/src/components/SelfIntroduction/SkillList/CertificationsList.tsx @@ -3,25 +3,25 @@ import ListItem from '@mui/material/ListItem'; import { Divider, Typography } from '@mui/material'; export const CertificationsList: React.FC = () => { - return ( - - Certifications - - - } - > - - 英検 2級 - - - HSK 5級 - - - E資格 勉強中 - - - ); + return ( + + Certifications + + + } + > + + 英検 2級 + + + HSK 5級 + + + E資格 勉強中 + + + ); }; diff --git a/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx b/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx index a03b922..f2d8c86 100644 --- a/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx +++ b/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx @@ -9,148 +9,148 @@ import ExpandLess from '@mui/icons-material/ExpandLess'; import ExpandMore from '@mui/icons-material/ExpandMore'; import { Divider, Typography } from '@mui/material'; import { - DjangoIcon, - FastapiIcon, - JavaScriptIcon, - NextjsIcon, - NumpyIcon, - NuxtIcon, - PandasIcon, - PythonIcon, - PytorchIcon, - ReactIcon, - ScikitLearnIcon, - SeleniumIcon, - SvelteIcon, - TypeScriptIcon, - VueIcon, + DjangoIcon, + FastapiIcon, + JavaScriptIcon, + NextjsIcon, + NumpyIcon, + NuxtIcon, + PandasIcon, + PythonIcon, + PytorchIcon, + ReactIcon, + ScikitLearnIcon, + SeleniumIcon, + SvelteIcon, + TypeScriptIcon, + VueIcon, } from '#src/components'; export const ProgrammingSkillList: React.FC = () => { - const [openPython, setOpenPython] = useState(false); - const [openJavaScript, setOpenJavaScript] = useState(false); + const [openPython, setOpenPython] = useState(false); + const [openJavaScript, setOpenJavaScript] = useState(false); - const handleClickPython = () => { - setOpenPython((prev) => !prev); - }; + const handleClickPython = () => { + setOpenPython((prev) => !prev); + }; - const handleClickJavaScript = () => { - setOpenJavaScript((prev) => !prev); - }; + const handleClickJavaScript = () => { + setOpenJavaScript((prev) => !prev); + }; - return ( - - Programming - - - } - > - - - - - - {openPython ? : } - + return ( + + Programming + + + } + > + + + + + + {openPython ? : } + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - {openJavaScript ? : } - + + + + + + {openJavaScript ? : } + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - ); + ); }; diff --git a/src/components/SelfIntroduction/SkillList/index.tsx b/src/components/SelfIntroduction/SkillList/index.tsx index 2df2afd..1e30406 100644 --- a/src/components/SelfIntroduction/SkillList/index.tsx +++ b/src/components/SelfIntroduction/SkillList/index.tsx @@ -2,10 +2,10 @@ import { ProgrammingSkillList } from './ProgrammingSkillList'; import { CertificationsList } from './CertificationsList'; export const SkillList: React.FC = () => { - return ( - <> - - - - ); + return ( + <> + + + + ); }; diff --git a/src/components/SelfIntroduction/index.tsx b/src/components/SelfIntroduction/index.tsx index 36df8d3..fdc20fe 100644 --- a/src/components/SelfIntroduction/index.tsx +++ b/src/components/SelfIntroduction/index.tsx @@ -4,36 +4,38 @@ import { SkillList } from '#src/components'; import { ContactForm } from './ContactForm'; export const SelfIntroduction: React.FC = () => { - return ( - - - - About - - CaCaCa Blogをご覧いただきありがとうございます。 - - 初めまして、現在東京工業大学生命理工学系に所属している大学3年生(2022年4月時点)で、専攻とは別に趣味の一つとしてプログラミングをしており、Web開発をメインにしています。 - AtCoder(緑)にて競技プログラミングに参加したり、機械学習も勉強しています。 -
- 現在はLancers・CrowdWorksでのクラウドソーシング、ITベンチャー2社にてインターン、またプログラミングスクール1社にてメンターとして活動しています。 - - - 今回は、Next.js + TypeScript + - FastAPIをメインに当サイトを作成しました。 - 当サイトはポートフォリオ兼ブログサイトとなっています。 - プログラミングのことが主になると思いますが、その他のこともブログに作成していきたいと思います。 - + return ( + + + + About + + + CaCaCa Blogをご覧いただきありがとうございます。 + + + 初めまして、現在東京工業大学生命理工学系に所属している大学3年生(2022年4月時点)で、専攻とは別に趣味の一つとしてプログラミングをしており、Web開発をメインにしています。 + AtCoder(緑)にて競技プログラミングに参加したり、機械学習も勉強しています。 +
+ 現在はLancers・CrowdWorksでのクラウドソーシング、ITベンチャー2社にてインターン、またプログラミングスクール1社にてメンターとして活動しています。 + + + 今回は、Next.js + TypeScript + + FastAPIをメインに当サイトを作成しました。 + 当サイトはポートフォリオ兼ブログサイトとなっています。 + プログラミングのことが主になると思いますが、その他のこともブログに作成していきたいと思います。 + - - Skill - - + + Skill + + - - Contact - - - - - ); + + Contact + + + + + ); }; diff --git a/src/components/ShareButtons/index.tsx b/src/components/ShareButtons/index.tsx index 17da562..d43a777 100644 --- a/src/components/ShareButtons/index.tsx +++ b/src/components/ShareButtons/index.tsx @@ -10,82 +10,87 @@ import { COLORS } from '#src/styles'; import { useCurrentAbsUrl } from '#src/utils/hooks'; export const ShareButtons: React.FC = () => { - const [isClicked, setIsClicked] = useState(false); + const [isClicked, setIsClicked] = useState(false); - const shareUrlBase = useCurrentAbsUrl(); - const fbShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${shareUrlBase}`; - const lineShareUrl = `https://social-plugins.line.me/lineit/share?url=${shareUrlBase}`; - const twitterShareUrl = `https://twitter.com/intent/tweet?text=${shareUrlBase}`; + const shareUrlBase = useCurrentAbsUrl(); + const fbShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${shareUrlBase}`; + const lineShareUrl = `https://social-plugins.line.me/lineit/share?url=${shareUrlBase}`; + const twitterShareUrl = `https://twitter.com/intent/tweet?text=${shareUrlBase}`; - return ( - <> - - setIsClicked((prev) => !prev)} - aria-label="share" - sx={{ top: '50vh', right: '6vw', position: 'fixed', zIndex: 10000 }} - > - {isClicked ? ( - - ) : ( - - )} - - - {isClicked && ( + return ( <> - - - - - + + setIsClicked((prev) => !prev)} + aria-label="share" + sx={{ + top: '50vh', + right: '6vw', + position: 'fixed', + zIndex: 10000, + }} + > + {isClicked ? ( + + ) : ( + + )} + + + {isClicked && ( + <> + + + + + - - - - - + + + + + - - - - - + + + + + + + )} - )} - - ); + ); }; diff --git a/src/components/index.ts b/src/components/index.ts index e4bca8c..6a3c77a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -3,22 +3,22 @@ export { BlogList } from './BlogList'; export { Editor } from './Editor'; export { Footer } from './Footer'; export { - LineIcon, - PythonIcon, - JavaScriptIcon, - DjangoIcon, - FastapiIcon, - NextjsIcon, - NumpyIcon, - NuxtIcon, - PandasIcon, - PytorchIcon, - ReactIcon, - ScikitLearnIcon, - SeleniumIcon, - SvelteIcon, - TypeScriptIcon, - VueIcon, + LineIcon, + PythonIcon, + JavaScriptIcon, + DjangoIcon, + FastapiIcon, + NextjsIcon, + NumpyIcon, + NuxtIcon, + PandasIcon, + PytorchIcon, + ReactIcon, + ScikitLearnIcon, + SeleniumIcon, + SvelteIcon, + TypeScriptIcon, + VueIcon, } from './Icons'; export { DashBoard } from './DashBoard'; export { Loader } from './Loader'; diff --git a/src/layouts/client.tsx b/src/layouts/client.tsx index 4049f4e..d282751 100644 --- a/src/layouts/client.tsx +++ b/src/layouts/client.tsx @@ -4,46 +4,45 @@ import { Stack } from '@mui/material'; import { Footer, Navbar } from '#src/components'; type ClientLayoutPropType = { - isAdsExist?: boolean; + isAdsExist?: boolean; }; export const ClientLayout: React.FC = ({ - children, - isAdsExist, + children, + isAdsExist, }) => { - const AdmaxAd = ( - <> -
-