Merge pull request #17 from taga3s/refac/styles

refac: change style object to style variables to reduce bundle size
taga3s · Sep 4, 2024 · a92deb6 · a92deb6
2 parents 1650009 + 990caed
commit a92deb6
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 88 deletions.
diff --git a/app/components/index.ts b/app/components/index.ts
@@ -1,2 +1,3 @@
 export * from "./Footer";
 export * from "./Header";
+export * from "./Section";
diff --git a/app/components/posts/Posts.css.ts b/app/components/posts/Posts.css.ts
@@ -1,25 +1,25 @@
 import { css } from "hono/css";
 
-const postsStyle = {
-  wrapper: css`
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    margin-top: 32px;
-  `,
-  item: css`
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: 100%;
-    padding: 16px;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-  `,
-  itemTitle: css`
-    font-size: 20px;
-    font-weight: bold;
-  `,
-};
+const postsWrapper = css`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+`;
 
-export { postsStyle };
+const postsItem = css`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  padding: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+`;
+
+const postsItemTitle = css`
+  font-size: 20px;
+  font-weight: bold;
+`;
+
+export { postsItem, postsItemTitle, postsWrapper };
diff --git a/app/components/posts/Posts.tsx b/app/components/posts/Posts.tsx
@@ -1,7 +1,7 @@
 import type { FC } from "hono/jsx";
 import type { Post } from "../../api/posts/model";
 import { Section } from "../Section";
-import { postsStyle } from "./Posts.css";
+import { postsItem, postsItemTitle, postsWrapper } from "./Posts.css";
 
 type Props = {
   posts: Post[];
@@ -10,12 +10,12 @@ type Props = {
 const Posts: FC<Props> = ({ posts }) => {
   return (
     <Section title="Posts">
-      <div class={postsStyle.wrapper}>
+      <div class={postsWrapper}>
         {posts.map((post) => {
           return (
-            <a key={post.id} href={`/${post.id}`} class={postsStyle.item}>
+            <a key={post.id} href={`/${post.id}`} class={postsItem}>
               <span>{post.publishedAt}</span>
-              <span class={postsStyle.itemTitle}>{post.title}</span>
+              <span class={postsItemTitle}>{post.title}</span>
             </a>
           );
         })}

diff --git a/app/components/profile/ProfileLinks.css.ts b/app/components/profile/ProfileLinks.css.ts
@@ -1,6 +1,6 @@
 import { css } from "hono/css";
 
-const linkCardContainer = css`
+const profileLinkCardContainer = css`
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
@@ -11,36 +11,36 @@ const linkCardContainer = css`
   }
 `;
 
-const linkCard = css`
+const profileLinkCard = css`
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100px;
   border-radius: 8px;
 `;
 
-const linkCardIcon = css`
+const profileLinkCardIcon = css`
   width: 67px;
   height: 67px;
 `;
 
 const github = css`
-  ${linkCard}
+  ${profileLinkCard}
   fill: #ffffff;
   background: rgb(205,188,255);
   background: linear-gradient(90deg, rgba(205,188,255,0.4515931372549019) -27%, rgba(92,80,118,1) 0%, rgba(116,84,205,1) 0%, rgba(118,83,196,1) 0%, rgba(129,92,200,1) 0%, rgba(46,47,62,0.9137780112044818) 0%, rgba(198,195,209,0.8521533613445378) 100%, rgba(230,14,221,1) 100%, rgba(237,235,246,1) 100%, rgba(0,0,82,1) 100%, rgba(3,1,9,0.4515931372549019) 100%);
 `;
 
 const qiita = css`
-  ${linkCard}
+  ${profileLinkCard}
   background: rgb(205,188,255);
   background: linear-gradient(90deg, rgba(205,188,255,0.4515931372549019) -27%, rgba(92,80,118,1) 0%, rgba(116,84,205,1) 0%, rgba(118,83,196,1) 0%, rgba(92,200,121,1) 0%, rgba(25,230,34,0.4515931372549019) 100%, rgba(106,217,191,0.9249824929971989) 100%, rgba(198,195,209,0.8521533613445378) 100%, rgba(230,14,221,1) 100%, rgba(237,235,246,1) 100%, rgba(0,0,82,1) 100%);
 `;
 
 const cosense = css`
-  ${linkCard}
+  ${profileLinkCard}
   background: rgb(2,0,36);
   background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(208,108,7,1) 0%, rgba(194,156,24,1) 0%, rgba(187,180,32,1) 40%, rgba(0,212,255,1) 100%);
 `;
 
-export { linkCardContainer, linkCard, linkCardIcon, github, qiita, cosense };
+export { profileLinkCard, profileLinkCardIcon, profileLinkCardContainer, github, qiita, cosense };
diff --git a/app/components/profile/ProfileLinks.tsx b/app/components/profile/ProfileLinks.tsx
@@ -1,6 +1,6 @@
 import { CosenseIcon, GitHubIcon, QiitaIcon } from "../icons";
 import { Section } from "../Section";
-import { cosense, github, linkCardContainer, linkCardIcon, qiita } from "./ProfileLinks.css";
+import { cosense, github, profileLinkCardContainer, profileLinkCardIcon, qiita } from "./ProfileLinks.css";
 
 const links = [
   {
@@ -26,10 +26,10 @@ const links = [
 const ProfileLinks = () => {
   return (
     <Section title="Links">
-      <div class={linkCardContainer}>
+      <div class={profileLinkCardContainer}>
         {links.map((link) => (
           <a href={link.url} class={link.style} key={link.title}>
-            <div class={linkCardIcon}>{link.icon}</div>
+            <div class={profileLinkCardIcon}>{link.icon}</div>
           </a>
         ))}
       </div>

diff --git a/app/components/profile/ProfileMain.css.ts b/app/components/profile/ProfileMain.css.ts
@@ -1,18 +1,18 @@
 import { css } from "hono/css";
 
-const main = css`
+const profileMain = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
 
-const mainBox = css`
+const profileMainBox = css`
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
 
-const mainImage = css`
+const profileMainImage = css`
   width: 100px;
   height: 100px;
   border-radius: 12px;
@@ -23,24 +23,31 @@ const mainImage = css`
   }
 `;
 
-const mainName = css`
+const profileMainName = css`
   font-size: 28px;
   font-weight: bold;
 `;
 
-const mainBelonging = css`
+const profileMainBelonging = css`
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-size: 16px;
 `;
 
-const mainIntroduction = css`
+const profileMainIntroduction = css`
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 32px;
   font-size: 16px;
 `;
 
-export { main, mainBox, mainImage, mainName, mainBelonging, mainIntroduction };
+export {
+  profileMain,
+  profileMainBox,
+  profileMainImage,
+  profileMainName,
+  profileMainBelonging,
+  profileMainIntroduction,
+};
diff --git a/app/components/profile/ProfileMain.tsx b/app/components/profile/ProfileMain.tsx
@@ -1,20 +1,27 @@
-import { main, mainBelonging, mainBox, mainImage, mainIntroduction, mainName } from "./ProfileMain.css";
+import {
+  profileMain,
+  profileMainBelonging,
+  profileMainBox,
+  profileMainImage,
+  profileMainIntroduction,
+  profileMainName,
+} from "./ProfileMain.css";
 
 const ProfileMain = () => {
   return (
     <section>
-      <div class={main}>
-        <div class={mainBox}>
-          <span class={mainName}>Seiya Tagami / taga3s</span>
-          <ul class={mainBelonging}>
+      <div class={profileMain}>
+        <div class={profileMainBox}>
+          <span class={profileMainName}>Seiya Tagami / taga3s</span>
+          <ul class={profileMainBelonging}>
             <li>Web Developer (working as an intern)</li>
           </ul>
         </div>
         <div>
-          <img class={mainImage} src="https://github.com/taga3s.png" alt="me" />
+          <img class={profileMainImage} src="https://github.com/taga3s.png" alt="me" />
         </div>
       </div>
-      <ul class={mainIntroduction}>
+      <ul class={profileMainIntroduction}>
         <li>🛠️ わくわくするようなモノづくりがしたい。</li>
         <li>🐳 Web、法律、ラーメン...な日常。</li>
         <li>🍀 アニメ/漫画やゲームが好き。</li>

diff --git a/app/components/works/WorksList.css.ts b/app/components/works/WorksList.css.ts
@@ -28,36 +28,46 @@ const worksListItemImg = css`
   border-radius: 8px;
 `;
 
-const worksListItemDetail = {
-  wrapper: css`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    width: 100%;
-    padding: 16px;
-    opacity: 0.9;
-    border-radius: 4px;
-    color: #6a5ed1;
-  `,
-  header: css`
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  `,
-  icon: css`
-    width: 24px;
-    height: 24px;
-    fill: #6a5ed1;
-  `,
-  title: css`
-    font-size: 24px;
-    font-weight: bold;
-  `,
-};
+const worksListItemDetailWrapper = css`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  padding: 16px;
+  opacity: 0.9;
+  border-radius: 4px;
+  color: #6a5ed1;
+`;
 
-export { worksListContainer, worksList, worksListItem, worksListItemImg, worksListItemDetail };
+const worksListItemDetailHeader = css`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const worksListItemDetailTitle = css`
+  font-size: 20px;
+  font-weight: bold;
+`;
+
+const worksListItemDetailIcon = css`
+  width: 24px;
+  height: 24px;
+  fill: #6a5ed1;
+`;
+
+export {
+  worksListContainer,
+  worksList,
+  worksListItem,
+  worksListItemImg,
+  worksListItemDetailWrapper,
+  worksListItemDetailHeader,
+  worksListItemDetailTitle,
+  worksListItemDetailIcon,
+};
diff --git a/app/components/works/WorksList.tsx b/app/components/works/WorksList.tsx
@@ -1,6 +1,14 @@
 import type { FC } from "hono/jsx";
 import { Section } from "../Section";
-import { worksList, worksListItem, worksListItemDetail, worksListItemImg } from "./WorksList.css";
+import {
+  worksList,
+  worksListItem,
+  worksListItemDetailHeader,
+  worksListItemDetailIcon,
+  worksListItemDetailTitle,
+  worksListItemDetailWrapper,
+  worksListItemImg,
+} from "./WorksList.css";
 import type { Work } from "../../api/works";
 import { GitHubIcon } from "../icons";
 
@@ -15,10 +23,10 @@ const WorksList: FC<Props> = ({ works }) => {
         {works.map((work) => (
           <li key={work.title} class={worksListItem}>
             <img src={work.image.url} alt={work.title} class={worksListItemImg} />
-            <div class={worksListItemDetail.wrapper}>
-              <div class={worksListItemDetail.header}>
-                <h3 class={worksListItemDetail.title}>{work.title}</h3>
-                <a href={work.githubUrl} class={worksListItemDetail.icon}>
+            <div class={worksListItemDetailWrapper}>
+              <div class={worksListItemDetailHeader}>
+                <h3 class={worksListItemDetailTitle}>{work.title}</h3>
+                <a href={work.githubUrl} class={worksListItemDetailIcon}>
                   <GitHubIcon />
                 </a>
               </div>

diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx
@@ -54,7 +54,7 @@ export default jsxRenderer(({ children, title }) => {
       <body class={bodyLayout}>
         <ErrorBoundary fallback={<p>Sorry, Out of Service.</p>}>
           <HeaderMemorized />
-          {children}
+          <main>{children}</main>
           <FooterMemorized />
         </ErrorBoundary>
       </body>