Skip to content

Commit

Permalink
fmt
Browse files Browse the repository at this point in the history
  • Loading branch information
@calliope-pro
calliope-pro committed Sep 28, 2022
1 parent 3ee4241 commit 9f5f7ad
Show file tree
Hide file tree
Showing 39 changed files with 1,691 additions and 1,618 deletions.
4 changes: 2 additions & 2 deletions src/atoms/authAtom.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { atom } from 'recoil';

export const isAuthenticatedState = atom<boolean>({
key: 'isAuthenticatedState',
default: false,
key: 'isAuthenticatedState',
default: false,
});
4 changes: 2 additions & 2 deletions src/atoms/codeStyleAtom.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { atom } from 'recoil';

export const isDarkState = atom<boolean>({
key: 'isDarkState',
default: true,
key: 'isDarkState',
default: true,
});
135 changes: 72 additions & 63 deletions src/components/BlogDetail/BlogIndex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,75 +2,84 @@ 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';

import { COLORS } from '#src/styles';

export const BlogIndex: React.FC<{ body: string }> = ({ body }) => {
const [isHidden, setIsHidden] = useState(true);
return (
<Box>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography fontSize="24px" color={COLORS.baseColor}>
目次
</Typography>
{isHidden ? (
<IconButton onClick={() => setIsHidden(false)}>
<ListIcon
sx={{
fontSize: '40px',
color: COLORS.accentDarkColor,
cursor: 'pointer',
}}
/>
</IconButton>
) : (
<IconButton onClick={() => setIsHidden(true)}>
<CloseIcon
sx={{
fontSize: '40px',
color: COLORS.accentDarkColor,
cursor: 'pointer',
}}
/>
</IconButton>
)}
</Stack>
<Collapse in={!isHidden}>
<List>
<ReactMarkdown
allowedElements={['h1']}
includeElementIndex
components={{
h1: ({ children, node, index }) => (
<ListItem dense>
<Link href={`#${node.position!.start.line}`} passHref>
<MuiLink
underline="none"
color={COLORS.baseColor}
fontSize="18px"
const [isHidden, setIsHidden] = useState(true);
return (
<Box>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Typography fontSize="24px" color={COLORS.baseColor}>
目次
</Typography>
{isHidden ? (
<IconButton onClick={() => setIsHidden(false)}>
<ListIcon
sx={{
fontSize: '40px',
color: COLORS.accentDarkColor,
cursor: 'pointer',
}}
/>
</IconButton>
) : (
<IconButton onClick={() => setIsHidden(true)}>
<CloseIcon
sx={{
fontSize: '40px',
color: COLORS.accentDarkColor,
cursor: 'pointer',
}}
/>
</IconButton>
)}
</Stack>
<Collapse in={!isHidden}>
<List>
<ReactMarkdown
allowedElements={['h1']}
includeElementIndex
components={{
h1: ({ children, node, index }) => (
<ListItem dense>
<Link
href={`#${node.position!.start.line}`}
passHref
>
<MuiLink
underline="none"
color={COLORS.baseColor}
fontSize="18px"
>
{`${
index! + 1
}. ${children.toString()}`}
</MuiLink>
</Link>
</ListItem>
),
}}
>
{`${index! + 1}. ${children.toString()}`}
</MuiLink>
</Link>
</ListItem>
),
}}
>
{body}
</ReactMarkdown>
</List>
</Collapse>
</Box>
);
{body}
</ReactMarkdown>
</List>
</Collapse>
</Box>
);
};
68 changes: 34 additions & 34 deletions src/components/BlogDetail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,38 +7,38 @@ import { BlogIndex } from './BlogIndex';
import { Blog } from '#src/types';

export const BlogDetail: React.FC<{ blog: Blog }> = ({ blog }) => {
return (
<>
<Head>
<title>{blog.title}</title>
<meta name="description" content={blog.description} />
</Head>

<Container>
<ShareButtons />

<Box paddingTop={3} textAlign="center">
<Typography variant="h2">{blog.title}</Typography>
<Typography variant="h5">{blog.sub_title}</Typography>
</Box>

<Box textAlign="right">
<Typography variant="caption" display="block">
作成日時:&nbsp;
{dayjs.unix(blog.created_at).format('YYYY年MM月DD日')}
</Typography>
<Typography variant="caption" display="block">
更新日時:&nbsp;
{dayjs.unix(blog.updated_at).format('YYYY年MM月DD日')}
</Typography>
</Box>

<BlogIndex body={blog.content} />

<Divider sx={{ borderWidth: 'thin' }} />

<MarkdownView body={blog.content} />
</Container>
</>
);
return (
<>
<Head>
<title>{blog.title}</title>
<meta name="description" content={blog.description} />
</Head>

<Container>
<ShareButtons />

<Box paddingTop={3} textAlign="center">
<Typography variant="h2">{blog.title}</Typography>
<Typography variant="h5">{blog.sub_title}</Typography>
</Box>

<Box textAlign="right">
<Typography variant="caption" display="block">
作成日時:&nbsp;
{dayjs.unix(blog.created_at).format('YYYY年MM月DD日')}
</Typography>
<Typography variant="caption" display="block">
更新日時:&nbsp;
{dayjs.unix(blog.updated_at).format('YYYY年MM月DD日')}
</Typography>
</Box>

<BlogIndex body={blog.content} />

<Divider sx={{ borderWidth: 'thin' }} />

<MarkdownView body={blog.content} />
</Container>
</>
);
};
74 changes: 37 additions & 37 deletions src/components/BlogList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Container sx={{ flex: 1 }}>
{/* ブログ一覧 */}
<Stack gap={4}>
{blogs.slice(0, blogsDisplay).map((blogData) => (
<BlogListItem
blog={blogData}
categoryData={categoryData}
key={blogData.uuid}
/>
))}
</Stack>
return (
<Container sx={{ flex: 1 }}>
{/* ブログ一覧 */}
<Stack gap={4}>
{blogs.slice(0, blogsDisplay).map((blogData) => (
<BlogListItem
blog={blogData}
categoryData={categoryData}
key={blogData.uuid}
/>
))}
</Stack>

{/* 無限スクロール */}
{blogsDisplay >= (blogs.length || 0) ? (
<Typography textAlign="center" variant="h4" pt={5}>
No More Contents...
</Typography>
) : (
<Box ref={ref}>
<Loader />
</Box>
)}
</Container>
);
{/* 無限スクロール */}
{blogsDisplay >= (blogs.length || 0) ? (
<Typography textAlign="center" variant="h4" pt={5}>
No More Contents...
</Typography>
) : (
<Box ref={ref}>
<Loader />
</Box>
)}
</Container>
);
};
Loading

1 comment on commit 9f5f7ad

@vercel
Copy link

@vercel vercel bot commented on 9f5f7ad Sep 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

next-cacaca-blog – ./

next-cacaca-blog-git-feature-incorporate-se-ed68aa-calliope-pro.vercel.app
next-cacaca-blog-calliope-pro.vercel.app
cacaca-blog.vercel.app

Please sign in to comment.