Merge pull request #31 from tokyorubykaigi12/terfno/add-talks

add talks

astro.config.mjs

@@ -1,8 +1,10 @@
 // @ts-check
 import { defineConfig } from "astro/config";
+import preact from '@astrojs/preact';
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://regional.rubykaigi.org",
   base: "/tokyo12",
+  integrations: [preact()],
 });

package.json

@@ -10,8 +10,16 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.15.12",
     "@astrojs/check": "^0.9.4",
-    "typescript": "^5.6.3"
+    "@astrojs/preact": "^3.5.4",
+    "@nanostores/preact": "^0.5.2",
+    "astro": "^4.15.12",
+    "nanostores": "^0.11.3",
+    "preact": "^10.25.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.7.2"
   }
 }

src/components/Layouts/Footer.astro

@@ -1,6 +1,4 @@
 ---
-import XLogoWhiteImage from "../../imgs/x-logo-white.png";
-import ArrowUpRightFromSquareIcon from "../icons/arrow-up-right-from-square-white.svg";
 ---
 
 <style>

src/components/Layouts/Main.astro

@@ -5,18 +5,13 @@
   main {
     display: flex;
     flex-direction: column;
-    gap: 48px;
+    padding: 24px;
+    gap: 24px;
     background-color: #fcece8;
-    padding-bottom: 200px;
   }
   @media screen and (width <= 960px) {
     main {
-      padding: 48px 0 80px 0;
-    }
-  }
-  @media screen and (width <= 480px) {
-    main {
-      padding: 48px 0 80px 0;
+      padding: 24px 0;
     }
   }
 </style>

src/components/Layouts/Panel.astro

@@ -1,34 +1,33 @@
 ---
 import PanelHeader from "./PanelHeader.astro";
-const { title, subtitle } = Astro.props;
+const { title } = Astro.props;
 ---
 
 <style>
   .panel {
-    margin-top: 48px;
-    width: min(1132px, 100% - 40px);
-    margin-left: auto;
-    margin-right: auto;
-    padding: 48px 96px;
+    display: flex;
+    align-items: center;
+    padding: 32px;
     border-radius: 32px;
     background-color: #fff;
   }
   @media screen and (width <= 960px) {
     .panel {
       padding: 32px 24px;
-    }
-  }
-  @media screen and (width <= 480px) {
-    .panel {
-      width: 100%;
       border-radius: 0;
-      margin: 0;
-      padding: 32px 24px;
     }
   }
+
+  .inner {
+    width: 100%;
+    max-width: 960px;
+    margin: 0 auto;
+  }
 </style>
 
 <div class="panel">
-  <PanelHeader title={title} subtitle={subtitle} />
-  <slot />
+  <div class="inner">
+    <PanelHeader title={title} />
+    <slot />
+  </div>
 </div>

src/components/Layouts/PanelHeader.astro

@@ -1,33 +1,23 @@
 ---
-const { title, subtitle } = Astro.props;
+const { title } = Astro.props;
 ---
 
 <style>
   .header {
-    display: flex;
-    align-items: baseline;
-    flex-wrap: wrap;
-    gap: 20px;
-    margin-bottom: 48px;
-  }
-
-  .header h2 {
-    font-family: "Futura", "Jost", sans-serif;
-    font-size: 40px;
-    font-weight: 500;
-    line-height: 53px;
-    vertical-align: middle;
-  }
+    text-align: center;
+    margin-bottom: 24px;
 
-  .header .subtitle {
-    display: inline-block;
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 36px;
+    h2 {
+      font-family: "Futura", "Jost", sans-serif;
+      font-size: 40px;
+      font-weight: 500;
+      line-height: 53px;
+      vertical-align: middle;
+      color: #dd451d;
+    }
   }
 </style>
 
 <div class="header">
   <h2 lang="en">{title}</h2>
-  <p class="subtitle">{subtitle}</p>
 </div>

src/components/talks/Main.astro

@@ -0,0 +1,13 @@
+---
+import Panel from '../Layouts/Panel.astro';
+
+import TabToggle from './TabToggle';
+import Talks from './Talks';
+import ZenyasaiTalks from './ZenyasaiTalks';
+---
+
+<Panel title="Talks">
+  <TabToggle client:load/>
+  <Talks client:load />
+  <ZenyasaiTalks client:load/>
+</Panel>

src/components/talks/TabToggle.css

@@ -0,0 +1,36 @@
+.tabs {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+
+  button {
+    text-align: center;
+
+    font-family: "Futura", "Jost", sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 27px;
+
+    border-radius: 4px;
+    border: none;
+    padding: 16px 32px;
+  }
+
+  .default {
+    background-color: #aeaeb2;
+    color: #fff;
+  }
+
+  .selected {
+    background-color: #000;
+    color: #fff;
+  }
+}
+@media screen and (width <= 720px) {
+  .tabs {
+    button {
+      font-size: 15px;
+    }
+  }
+}

src/components/talks/TabToggle.tsx

@@ -0,0 +1,36 @@
+import {useStore} from '@nanostores/preact';
+import {selectedTabStore, type Tab} from './tabStore';
+import './TabToggle.css';
+
+export default function Tabs() {
+  const $tab = useStore(selectedTabStore);
+
+  const isSelected = (tabName: Tab) => {
+    return $tab === tabName;
+  }
+
+  const handleClick = (tabName: Tab) => {
+    selectedTabStore.set(tabName);
+  }
+
+  return (
+    <>
+      <div class="tabs">
+        <button
+          type="button"
+          onClick={() => handleClick('fri')}
+          className={isSelected('fri') ? 'selected' : 'default'}
+        >
+          前夜祭 2025/1/17
+        </button>
+        <button
+          type="button"
+          onClick={() => handleClick('sat')}
+          className={isSelected('sat') ? 'selected' : 'default'}
+        >
+          2025/1/18
+        </button>
+      </div>
+    </>
+  );
+}

src/components/talks/Talk.css

@@ -0,0 +1,113 @@
+.talk {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+
+  padding: 24px;
+  border-radius: 24px;
+  background-color: #F5F5F5;
+
+  .speaker-icon {
+    img {
+      border-radius: 12px;
+      height: auto;
+      width: 240px;
+    }
+  }
+  @media screen and (width <= 720px) {
+    .speaker-icon {
+      img {
+        width: 160px;
+      }
+    }
+  }
+
+  .description {
+    .session-title {
+      font-size: 20px;
+      line-height: 30px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .session-introduction {
+      text-wrap: wrap;
+      margin-bottom: 16px;
+
+      li {
+        margin-left: 24px;
+      }
+    }
+
+    .line {
+      border: 1px solid #AEAEB2;
+      margin-bottom: 16px;
+    }
+
+    .speaker-name {
+      font-family: "Futura", "Jost", sans-serif;
+      font-size: 16px;
+      font-weight: 500;
+
+      margin-bottom: 16px;
+    }
+
+    .speaker-socials {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px 24px;
+
+      a {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 21px;
+        text-decoration: none;
+        vertical-align: top;
+      }
+      @media screen and (width <= 480px) {
+        a {
+          font-size: 16px;
+        }
+      }
+
+      .social-x, .social-github {
+        display: flex;
+        align-items: center;
+      }
+
+      .social-x {
+        img {
+          width: 24px;
+          height: 24px;
+          margin: 0 8px 0 0;
+        }
+        @media screen and (width <= 480px) {
+          img {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+
+      .social-github {
+        img {
+          width: 30px;
+          height: 30px;
+          margin: 0 8px 0 0;
+        }
+        @media screen and (width <= 480px) {
+          img {
+            width: 18px;
+            height: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+@media screen and (width <= 960px) {
+  .talk {
+    flex-direction: column;
+    align-items: center;
+  }
+}