Merge pull request #715 from hiro0218/develop

develop
hiro0218 · May 6, 2023 · da8a399 · da8a399 · vercel · May 6, 2023
2 parents 3920e48 + f5ac691
commit da8a399
Show file tree

Hide file tree

Showing 25 changed files with 389 additions and 292 deletions.
diff --git a/.github/workflows/nextjs_bundle_analysis.yml b/.github/workflows/nextjs_bundle_analysis.yml
@@ -65,9 +65,9 @@ jobs:
       - name: Build next.js app
         # change this if your site requires a custom build command
         run: |
-          touch .env
-          echo "GITHUB_GRAPHQL_TOKEN=${{ secrets.GIT_GRAPHQL_TOKEN }}" >> .env
           npm run prebuild && ./node_modules/.bin/next build
+        #  touch .env
+        #  echo "GITHUB_GRAPHQL_TOKEN=${{ secrets.GIT_GRAPHQL_TOKEN }}" >> .env
 
       # Here's the first place where next-bundle-analysis' own script is used
       # This step pulls the raw bundle stats for the current bundle

diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@ This repository contains the source code for `b.0218.jp`, a web application buil
 
 - [Next.js](https://nextjs.org/)
 - [TypeScript](https://www.typescriptlang.org/)
+- [Emotion](https://emotion.sh/)
 
 Article data is managed in a separate repository and loaded via submodule.
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,10 +36,10 @@
     "last 2 versions and >= 1% in JP and not dead, last 2 Firefox versions"
   ],
   "dependencies": {
-    "@emotion/cache": "^11.10.8",
-    "@emotion/react": "^11.10.8",
-    "@emotion/server": "^11.10.0",
-    "@emotion/styled": "^11.10.8",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@radix-ui/colors": "^0.1.8",
     "css-in-js-easing": "^1.1.3",
     "mokuji.js": "^4.3.0",
@@ -48,7 +48,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
-    "shokika.css": "^1.6.0"
+    "shokika.css": "^1.6.1"
   },
   "devDependencies": {
     "@markuplint/jsx-parser": "^3.7.0",
@@ -82,7 +82,7 @@
     "feed": "^4.2.2",
     "fs-extra": "^11.1.1",
     "gray-matter": "^4.0.3",
-    "happy-dom": "^9.10.8",
+    "happy-dom": "^9.10.9",
     "hastscript": "^7.2.0",
     "husky": "^8.0.3",
     "jest": "^29.5.0",
@@ -96,7 +96,7 @@
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
     "reading-time": "^1.5.0",
-    "rehype-external-links": "^2.0.1",
+    "rehype-external-links": "^2.1.0",
     "rehype-highlight": "^6.0.0",
     "rehype-minify-whitespace": "^5.0.1",
     "rehype-raw": "^6.1.1",

diff --git a/public/hiro0218.svg b/public/hiro0218.svg
diff --git a/src/build/feed.ts b/src/build/feed.ts
@@ -58,5 +58,3 @@ function generatedRssFeed(): void {
 }
 
 generatedRssFeed();
-
-export default generatedRssFeed;
diff --git a/src/components/Functional/CssBaseline/Vendor/hljs.ts b/src/components/Functional/CssBaseline/Vendor/hljs.ts
@@ -4,8 +4,8 @@ import { css } from '@/ui/styled';
 
 export default css`
   .hljs {
-    background: ${gray.gray1};
     color: ${gray.gray12};
+    background: ${gray.gray1};
   }
 
   .hljs-comment,

diff --git a/src/components/Functional/CssIndividual/Pages/Post/Footnotes.ts b/src/components/Functional/CssIndividual/Pages/Post/Footnotes.ts
@@ -2,11 +2,11 @@ import { css } from '@/ui/styled';
 
 const Footnotes = css`
   [data-footnotes] {
-    margin-top: var(--space-6);
     padding-top: var(--space-3);
-    border-top: 1px solid var(--borders-6);
-    color: var(--text-11);
+    margin-top: var(--space-6);
     font-size: var(--font-size-sm);
+    color: var(--text-11);
+    border-top: 1px solid var(--borders-6);
 
     p,
     h2 {

diff --git a/src/components/Functional/CssIndividual/Pages/Post/LinkPreview.ts b/src/components/Functional/CssIndividual/Pages/Post/LinkPreview.ts
@@ -4,12 +4,12 @@ import { css } from '@/ui/styled';
 const LinkPreview = css`
   .p-link-preview {
     display: flex;
-    border: 1px solid var(--borders-7);
-    border-radius: var(--border-radius-8);
+    overflow: hidden;
+    color: var(--text-12);
     text-decoration-line: unset;
     background-color: var(--backgrounds-1);
-    color: var(--text-12);
-    overflow: hidden;
+    border: 1px solid var(--borders-7);
+    border-radius: var(--border-radius-8);
 
     &:hover {
       background-color: var(--component-backgrounds-4);
@@ -72,21 +72,21 @@ const LinkPreview = css`
 
   .p-link-preview-body__title {
     display: block;
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-sm);
     overflow: hidden;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .p-link-preview-body__description {
     display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
     margin-top: var(--space-½);
-    color: var(--text-11);
-    font-size: var(--font-size-sm);
     overflow: hidden;
+    font-size: var(--font-size-sm);
+    color: var(--text-11);
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 
     ${isMobile} {
       display: none;
@@ -95,9 +95,9 @@ const LinkPreview = css`
 
   .p-link-preview-body__url {
     display: block;
+    overflow: hidden;
     font-size: var(--font-size-sm);
     color: var(--text-11);
-    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

diff --git a/src/components/Functional/CssIndividual/Pages/Post/TableScroll.ts b/src/components/Functional/CssIndividual/Pages/Post/TableScroll.ts
@@ -3,23 +3,23 @@ import { css } from '@/ui/styled';
 const TableScroll = css`
   .p-table-scroll {
     position: relative;
-    isolation: isolate;
     margin-left: -0.5em;
     overflow: auto;
+    isolation: isolate;
 
     &::-webkit-scrollbar {
       width: 8px;
       height: 8px;
     }
 
     &::-webkit-scrollbar-track {
-      border-radius: var(--border-radius-4);
       background-color: var(--backgrounds-2);
+      border-radius: var(--border-radius-4);
     }
 
     &::-webkit-scrollbar-thumb {
-      border-radius: var(--border-radius-4);
       background-color: var(--solid-backgrounds-9);
+      border-radius: var(--border-radius-4);
     }
   }
 `;

diff --git a/src/components/Page/Home/Hero/index.tsx b/src/components/Page/Home/Hero/index.tsx
@@ -10,7 +10,7 @@ export const Hero = memo(function Hero() {
   return (
     <Container>
       <Avatar>
-        <img alt="" decoding="async" height={ICON_SIZE} src="/hiro0218@100x100.webp" width={ICON_SIZE} />
+        <img alt="" decoding="async" height={ICON_SIZE} src="/hiro0218.svg" width={ICON_SIZE} />
       </Avatar>
       <Title
         heading="Hi, I'm hiro."
@@ -35,7 +35,6 @@ const Avatar = styled.div`
   }
 
   img {
-    border: 5px solid var(--backgrounds-1);
     border-radius: var(--border-radius-full);
   }
 `;
diff --git a/src/components/Page/Home/LinkMore/index.tsx b/src/components/Page/Home/LinkMore/index.tsx
@@ -13,19 +13,10 @@ const IconArrow = memo(function IconArrow() {
   );
 });
 
-export const LinkMoreArchive = () => {
+export const LinkMore = ({ href, text }: { href: string; text: string }) => {
   return (
-    <Anchor href="/archive">
-      archive
-      <IconArrow />
-    </Anchor>
-  );
-};
-
-export const LinkMoreTag = () => {
-  return (
-    <Anchor href="/tags">
-      tags
+    <Anchor href={href}>
+      {text}
       <IconArrow />
     </Anchor>
   );

diff --git a/src/components/Page/Post/Header/index.tsx b/src/components/Page/Post/Header/index.tsx
@@ -4,29 +4,36 @@ import { READ_TIME_SUFFIX } from '@/constant';
 import { Post as PostProps } from '@/types/source';
 import { styled } from '@/ui/styled';
 
-type Props = Pick<PostProps, 'date' | 'updated' | 'readingTime'> & {
+type Props = Pick<PostProps, 'title' | 'date' | 'updated' | 'readingTime'> & {
   tagsWithCount: PostTagProps[];
 };
 
-const PostHeader = ({ date, updated, readingTime, tagsWithCount }: Props) => {
+const PostHeader = ({ title, date, updated, readingTime, tagsWithCount }: Props) => {
   return (
-    <List>
-      <Item>
-        <PostDate date={date} updated={updated} />
-        <Separator aria-hidden="true">・</Separator>
-        <span>{`${readingTime || 1} ${READ_TIME_SUFFIX}`}</span>
-      </Item>
-      <Item>
-        <PostTagGridContainer>
-          <PostTag tags={tagsWithCount} />
-        </PostTagGridContainer>
-      </Item>
-    </List>
+    <>
+      <Title dangerouslySetInnerHTML={{ __html: title }}></Title>
+      <List>
+        <Item>
+          <PostDate date={date} updated={updated} />
+          <Separator aria-hidden="true">・</Separator>
+          <span>{`${readingTime || 1} ${READ_TIME_SUFFIX}`}</span>
+        </Item>
+        <Item>
+          <PostTagGridContainer>
+            <PostTag tags={tagsWithCount} />
+          </PostTagGridContainer>
+        </Item>
+      </List>
+    </>
   );
 };
 
 export default PostHeader;
 
+const Title = styled.h1`
+  font-weight: var(--font-weight-bolder);
+`;
+
 const List = styled.div`
   margin-top: var(--space-2);
 

diff --git a/src/components/UI/Layout/Columns.tsx b/src/components/UI/Layout/Columns.tsx
@@ -4,7 +4,7 @@ import { SPACING_BASE_PX } from '@/components/Functional/CssBaseline/Settings/Sp
 import { isDesktop, isMobile } from '@/ui/lib/mediaQuery';
 import { styled } from '@/ui/styled';
 
-export interface ContainerProps {
+interface ContainerProps {
   title?: string;
   titleTagName?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   style?: CSSProperties;

diff --git a/src/components/UI/Search/SearchDialog.tsx b/src/components/UI/Search/SearchDialog.tsx
@@ -43,6 +43,7 @@ const Dialog = styled.dialog`
   position: fixed;
   top: 25vh;
   isolation: isolate;
+  border-radius: var(--border-radius-12);
 
   &[open] {
     z-index: var(--zIndex-search);

diff --git a/src/components/UI/Search/SearchPanel.tsx b/src/components/UI/Search/SearchPanel.tsx
@@ -104,6 +104,10 @@ const Anchor = styled(_Anchor)`
   font-size: var(--font-size-sm);
 
   &:hover {
+    background-color: var(--component-backgrounds-3);
+  }
+
+  &:active {
     background-color: var(--component-backgrounds-4);
   }
 `;
@@ -114,5 +118,11 @@ const SearchFooter = styled.div`
   padding: var(--space-½) var(--space-1);
   font-size: var(--font-size-sm);
   color: var(--text-11);
-  box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.16);
+  border-top: 1px solid var(--borders-6);
+
+  a {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 `;
diff --git a/src/components/UI/Search/useSearchHeader.tsx b/src/components/UI/Search/useSearchHeader.tsx
@@ -139,7 +139,7 @@ export const useSearchHeader = ({ closeDialog }: Props) => {
     () => (
       <Header>
         <HeaderIcon htmlFor={searchInputId}>
-          <RxMagnifyingGlass size="24" />
+          <RxMagnifyingGlass size="18" />
         </HeaderIcon>
         <SearchInput
           autoComplete="off"
@@ -162,19 +162,18 @@ export const useSearchHeader = ({ closeDialog }: Props) => {
 
 const Header = styled.div`
   display: flex;
-  height: var(--space-4);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
+  border-bottom: 1px solid var(--borders-6);
 `;
 
 const HeaderIcon = styled.label`
   display: flex;
   align-items: center;
-  padding: 0 var(--space-1);
+  padding: 0 var(--space-1) 0 var(--space-2);
 `;
 
 const SearchInput = styled.input`
   width: 100%;
-  height: 100%;
+  height: var(--space-4);
   padding: 0;
   font-size: var(--font-size-md);
   border: none;

diff --git a/src/constant.ts b/src/constant.ts
@@ -1,14 +1,12 @@
 export const AUTHOR_NAME = 'hiro';
 export const AUTHOR_ICON = 'https://b.0218.jp/hiro0218.png';
-export const AUTHOR_ICON_LOCAL = '/hiro0218.png';
 export const AUTHOR_PROFILE = 'Web Frontend Engineer / ex: Web Backend Engineer, Application Engineer';
 
 export const SITE_NAME = '零弐壱蜂';
 export const SITE_DESCRIPTION = '様々な情報をストックするサイバーメモ帳';
 export const SITE_URL = 'https://b.0218.jp';
 
 export const URL = {
-  SITE: SITE_URL,
   TWITTER: 'https://twitter.com/hiro0218',
   GITHUB: 'https://github.com/hiro0218',
   NPM: 'https://www.npmjs.com/~hiro0218',

diff --git a/src/hooks/useEffectOnce.ts b/src/hooks/useEffectOnce.ts