Merge pull request #933 from hiro0218/develop

develop
hiro0218 · May 15, 2024 · 3c28146 · 3c28146
2 parents 40cb1fb + 425c13f
commit 3c28146
Show file tree

Hide file tree

Showing 11 changed files with 1,965 additions and 3,412 deletions.
diff --git a/.github/workflows/nextjs_bundle_analysis.yml b/.github/workflows/nextjs_bundle_analysis.yml
@@ -78,7 +78,7 @@ jobs:
           GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: ${{ secrets.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY }}
         # change this if your site requires a custom build command
         run: |
-          npm run prebuild && ./node_modules/.bin/next build
+          npm run build:article && npm run build:similarity && npm run build:popular && ./node_modules/.bin/next build
 
       # touch .env
       # echo "TZ=Asia/Tokyo" >> .env

diff --git a/_article b/_article
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "browserslist": "4.23.0",
     "dependency-cruiser": "16.3.1",
     "dotenv": "16.4.5",
-    "esbuild": "0.20.2",
+    "esbuild": "0.21.2",
     "esbuild-register": "3.5.0",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.3",
@@ -100,7 +100,7 @@
     "hast-util-parse-selector": "4.0.0",
     "hast-util-select": "6.0.2",
     "hastscript": "9.0.0",
-    "hono": "4.3.0",
+    "hono": "4.3.7",
     "husky": "9.0.11",
     "jest": "29.7.0",
     "jsdom": "24.0.0",
@@ -110,7 +110,7 @@
     "next-build-id": "3.0.0",
     "next-compose-plugins": "2.2.1",
     "next-sitemap": "4.2.3",
-    "picocolors": "1.0.0",
+    "picocolors": "1.0.1",
     "playwright": "1.43.1",
     "postcss-media-hover-any-hover": "0.2.0",
     "postcss-styled-syntax": "0.6.4",

diff --git a/src/build/ogp/http.ts b/src/build/ogp/http.ts
@@ -19,22 +19,15 @@ const DUMMY_TITLE =
 
 const publicDirectoryPath = path.resolve(__dirname, '../../../public');
 
+const templateStyle = fs.readFileSync(path.join(__dirname, 'template.css'), 'utf-8');
 const template = fs.readFileSync(path.join(__dirname, 'template.html'), 'utf-8');
 const backgroundImageBuffer = fs.readFileSync(path.join(publicDirectoryPath, 'hiro0218_screen.png'));
 
 app.get('/', (c) => {
   c.header('Cache-Control', 'public, max-age=31536000');
-  const title = c.req.query('title');
+  const title = c.req.query('title') ?? DUMMY_TITLE;
 
-  if (!title) {
-    return c.html(template);
-  }
-
-  const modifiedContent = template.replace(
-    '{{title}}',
-    title.replace(/</g, '&lt;').replace(/>/g, '&gt;') ?? DUMMY_TITLE,
-  );
-  return c.html(modifiedContent);
+  return c.html(template.replace('{{title}}', title.replace(/</g, '&lt;').replace(/>/g, '&gt;')));
 });
 
 app.get('/hiro0218_screen.png', (c) => {
@@ -44,6 +37,13 @@ app.get('/hiro0218_screen.png', (c) => {
   return c.body(backgroundImageBuffer);
 });
 
+app.get('/template.css', (c) => {
+  c.header('Content-Type', 'text/css');
+  c.header('Cache-Control', 'public, max-age=31536000');
+
+  return c.body(templateStyle);
+});
+
 serve(app, (info) => {
   console.log(`Listening on http://localhost:${info.port}`); // Listening on http://localhost:3000
 });
diff --git a/src/build/ogp/template.css b/src/build/ogp/template.css
@@ -0,0 +1,70 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  background-color: #e4e4e4;
+}
+
+body {
+  width: 1200px;
+  height: 630px;
+  margin: 0;
+  color: #eee;
+}
+
+main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+  padding: 40px 60px;
+  overflow: hidden;
+  font-family: 'Noto Sans JP', 'Noto Color Emoji', sans-serif;
+  font-weight: 900;
+  font-feature-settings: 'palt';
+  text-align: center;
+  background-image: url('/hiro0218_screen.png');
+  background-size: contain;
+}
+
+main::before {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  content: '';
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+header {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+h1 {
+  display: -webkit-box;
+  margin: 0 auto;
+  overflow: hidden;
+  font-size: 56px;
+  line-height: 1.7;
+  letter-spacing: 0.0025em;
+  word-break: auto-phrase;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+footer {
+  z-index: 1;
+  width: 100%;
+  font-size: 24px;
+  text-align: left;
+}
diff --git a/src/build/ogp/template.html b/src/build/ogp/template.html
@@ -15,94 +15,14 @@
       href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans+JP:wght@900&display=swap"
       rel="stylesheet"
     />
-    <style>
-      *,
-      *::before,
-      *::after {
-        box-sizing: border-box;
-      }
-
-      html {
-        background-color: #e4e4e4;
-      }
-
-      body {
-        margin: 0;
-        width: 1200px;
-        height: 630px;
-      }
-
-      .container {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        flex-direction: column;
-        height: 100%;
-        padding: 40px 60px;
-        background-image: url('/hiro0218_screen.png');
-        background-size: contain;
-        text-align: center;
-        font-family: 'Noto Sans JP', 'Noto Color Emoji', sans-serif;
-        font-feature-settings: 'palt';
-        word-break: keep-all;
-        overflow-wrap: break-word;
-        line-break: strict;
-        overflow: hidden;
-      }
-
-      .container::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
-      }
-
-      .title-container {
-        display: flex;
-        align-items: center;
-        margin-bottom: 20px;
-        height: 100%;
-        width: 100%;
-        z-index: 1;
-      }
-
-      .title {
-        margin: 0 auto;
-        color: #eee;
-        font-size: 62px;
-        font-weight: 900;
-        line-height: 1.7;
-        letter-spacing: 0.0025em;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 3;
-        overflow: hidden;
-        word-break: auto-phrase;
-      }
-
-      .footer {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        color: #eee;
-        font-size: 26px;
-        font-weight: 900;
-        line-height: 1;
-        width: 100%;
-        z-index: 1;
-      }
-    </style>
+    <link href="/template.css" rel="stylesheet" />
   </head>
   <body>
-    <div class="container">
-      <div class="title-container">
-        <h1 class="title" id="title">{{title}}</h1>
-      </div>
-      <div class="footer">b.0218.jp</div>
-    </div>
+    <main>
+      <header>
+        <h1 id="title">{{title}}</h1>
+      </header>
+      <footer>b.0218.jp</footer>
+    </main>
   </body>
 </html>
diff --git a/src/components/App/Footer/index.tsx b/src/components/App/Footer/index.tsx
@@ -1,7 +1,6 @@
 import { memo } from 'react';
 
-import { Container } from '@/components/Functional/Container';
-import { WaveBottom } from '@/components/Functional/Wave';
+import { Container as _Container } from '@/components/Functional/Container';
 import { Anchor as _Anchor } from '@/components/UI/Anchor';
 import { LinkStyle } from '@/components/UI/LinkMenu';
 import { isMobile } from '@/ui/lib/mediaQuery';
@@ -17,46 +16,42 @@ const Links = [
 export default memo(function Footer() {
   return (
     <Root>
-      <WaveBottom />
-      <FooterContainer>
-        <Container size="large">
-          <List>
-            {Links.map(({ title, href }) => {
-              return (
-                <ListItem key={href + title}>
-                  <Anchor href={href}>{title}</Anchor>
-                </ListItem>
-              );
-            })}
-          </List>
-          <small>© hiro</small>
-        </Container>
-      </FooterContainer>
+      <Container size="default">
+        <Nav>
+          {Links.map(({ title, href }) => (
+            <Anchor href={href} key={href + title}>
+              {title}
+            </Anchor>
+          ))}
+        </Nav>
+        <small>© hiro</small>
+      </Container>
     </Root>
   );
 });
 
 const Root = styled.footer`
-  display: flex;
-  flex-direction: column;
+  padding: var(--space-5) 0;
   margin-top: var(--space-6);
+  background-color: var(--component-backgrounds-3);
 
   small {
-    ${isMobile} {
-      font-size: var(--font-size-sm);
-    }
+    font-size: var(--font-size-sm);
   }
 `;
 
-const FooterContainer = styled.div`
-  width: 100%;
-  padding: var(--space-4) 0;
+const Container = styled(_Container)`
+  display: flex;
+  flex-direction: row-reverse;
+  gap: var(--space-3);
+  justify-content: space-between;
+  margin: auto;
   font-size: var(--font-size-md);
   color: var(--text-12);
-  background-color: var(--component-backgrounds-3);
 
   ${isMobile} {
-    padding: var(--space-3) 0;
+    flex-direction: column;
+    align-items: center;
   }
 
   & > * {
@@ -65,18 +60,19 @@ const FooterContainer = styled.div`
     justify-content: space-between;
 
     ${isMobile} {
-      flex-direction: column;
       gap: var(--space-2);
       justify-content: unset;
     }
   }
 
   small {
-    font-size: var(--font-size-md);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+    color: var(--text-11);
   }
 `;
 
-const List = styled.ul`
+const Nav = styled.nav`
   display: inline-flex;
   gap: var(--space-2);
   align-items: center;
@@ -87,15 +83,6 @@ const List = styled.ul`
   }
 `;
 
-const ListItem = styled.li`
-  display: inline-flex;
-  justify-content: center;
-
-  ${isMobile} {
-    width: calc(100% / ${Links.length});
-  }
-`;
-
 const Anchor = styled(_Anchor)`
   ${LinkStyle}
 

diff --git a/src/components/UI/LinkCard/index.tsx b/src/components/UI/LinkCard/index.tsx
@@ -100,15 +100,18 @@ const Paragraph = styled.p`
 `;
 
 const Tags = styled.div`
-  display: flex;
-  gap: var(--space-1);
   margin-top: auto;
   overflow: hidden;
   font-size: var(--font-size-sm);
+
+  > * + * {
+    margin-left: var(--space-1);
+  }
 `;
 
 const TagItem = styled.span`
   ${PostTagAnchorStyle}
 
   padding: var(--space-1);
+  border-radius: var(--border-radius-2);
 `;
diff --git a/src/pages/[post]/_components/Content/style/index.tsx b/src/pages/[post]/_components/Content/style/index.tsx
@@ -146,7 +146,8 @@ const PostContentStyle = css`
       border-radius: var(--border-radius-4);
 
       & ~ * {
-        margin: var(--space-1) var(--space-2);
+        margin: 0 var(--space-2) var(--space-2);
+        font-size: var(--font-size-sm);
 
         > *:first-of-type {
           margin-top: auto;