Merge pull request #11 from BuriKaigi/fix-title-of-toppage

タイトルが2024になってしまっているのを修正
BuriKaigi · Nov 13, 2024 · 61fc164 · 61fc164
2 parents fbe81c2 + e1598fe
commit 61fc164
Show file tree

Hide file tree

Showing 64 changed files with 462 additions and 73 deletions.
diff --git a/src/components/2024/Hero.tsx b/src/components/2024/Hero.tsx
@@ -0,0 +1,42 @@
+import { BackgroundImage } from '../BackgroundImage.tsx'
+import { Button } from '../Button.tsx'
+import { Container } from '../Container.tsx'
+import clsx from 'clsx'
+
+export function Hero() {
+  return (
+    <div className="relative py-20 sm:pb-24 sm:pt-36">
+      <BackgroundImage className="-bottom-14 -top-36" position='full' />
+      <Container className="relative">
+        <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
+          <h1 className="font-display text-5xl font-bold tracking-tighter text-black-600 sm:text-7xl">
+            <a href="/2024/">BuriKaigi 2024</a>
+          </h1>
+          <div className="mt-6 space-y-6 font-display text-2xl tracking-tight text-graye-900">
+            <p>
+              北陸ITエンジニアカンファレンス<br />
+              <br />
+            </p>
+          </div>
+          <Button href="https://toyama-eng.connpass.com/event/303732/" className="mt-10 w-full lg:hidden" blank>
+            参加申し込み
+          </Button>
+          <dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-6 sm:mt-16 sm:gap-x-16 sm:gap-y-10 sm:text-center lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start lg:text-left">
+            {[
+              ['Date', '2024.1.20'],
+              ['Time', '11:50 - 18:30'],
+              ['Location', '富山県立大学 DX教育研究センター', "max-lg:col-span-2"],
+            ].map(([name, value, className]) => (
+              <div key={name} className={clsx(className)}>
+                <dt className="font-mono text-sm text-gray-600">{name}</dt>
+                <dd className="mt-0.5 text-2xl font-semibold tracking-tight text-gray-900">
+                  {value}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </div>
+  )
+}
diff --git a/src/components/Newsletter.tsx b/src/components/Newsletter.tsx
@@ -33,7 +33,7 @@ export function Newsletter() {
             </div>
             <div>
               <div className='flex gap-5'>
-                <Button href="/sponsor">
+                <Button href="/2024/sponsor">
                   <span>スポンサーのご協力</span>
                 </Button>
                 {/* <Button href="https://docs.google.com/forms/d/e/1FAIpQLSfbJS_gWQ5pHAnEKs6WLUs2dweYpD6vOVzgfYntg6mouCmJrw/viewform" target="_blank" rel="noopener noreferrer">

diff --git a/src/layouts/2024/Speaker.astro b/src/layouts/2024/Speaker.astro
@@ -0,0 +1,178 @@
+---
+import clsx from 'clsx'
+import { Header } from '~/components/Header';
+import { Hero } from '~/components/2024/Hero';
+import { Container } from "~/components/Container";
+import { Newsletter } from '~/components/Newsletter';
+import { Button } from '~/components/Button';
+
+interface Props {
+  title?: string;
+}
+
+const { title, frontmatter } = Astro.props;
+const myTitle = ['BuriKaigi', frontmatter.title, frontmatter.name].filter(Boolean).join(' | ')
+
+const allSpeakers =
+  await Astro.glob('../../pages/2024/speakers/*.md');
+const index = allSpeakers.findIndex(speaker => speaker.frontmatter.name === frontmatter.name)
+const first = index === 0
+const last = index === allSpeakers.length - 1;
+
+---
+
+
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-3ENE2XQ27C"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-3ENE2XQ27C');
+  </script>
+  <meta charset="UTF-8" />
+  <meta name="description" content="寒ブリとIT技術者のマリアージュ">
+  <meta name="viewport" content="width=device-width" />
+  <link rel="icon" sizes="16x16" href="/favicon.ico" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <meta name="generator" content={Astro.generator} />
+  <head prefix="og: https://ogp.me/ns#">
+    <meta property="og:url" content="https://burikaigi.dev" />
+    <meta property="og:title" content="BuriKaigi" />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="寒ブリとIT技術者のマリアージュ" />
+    <meta property="og:site_name" content="BuriKaigi" />
+    <meta property="og:image" content="https://burikaigi.dev/images/ogp.png" />
+    <title>{myTitle}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif:wght@400;700&display=swap" rel="stylesheet">
+  </head>
+<body>
+<Header />
+<main class="flex-auto">
+  <Hero />
+  <section class="py-20 sm:py-32">
+    <Container className="flex gap-8">
+      <div class="mx-auto max-w-2xl lg:mx-0">
+        <h2
+          id="speakers-title"
+          class="font-display text-4xl font-medium tracking-tighter text-gray-600 sm:text-5xl"
+        >
+          Speaker
+        </h2>
+      </div>
+    </Container>
+    <Container className="flex gap-8 mt-10 flex-col lg:flex-row">
+      <div class="flex-[0]">
+        <div class="group h-[17.5rem] w-[17.5rem] transform overflow-hidden rounded-4xl">
+          <img
+            class="inset-0 h-full w-full object-cover transition duration-300 group-hover:scale-110"
+            src={frontmatter.image}
+            alt=""
+          />
+        </div>
+        <div>
+          <h3 class="mt-8 font-display text-xl font-bold tracking-tight text-slate-900">
+            {frontmatter.name}
+          </h3>
+          <p class="mt-1 text-base tracking-tight text-slate-500">
+            {frontmatter.belong}
+          </p>
+          <p class="mt-1 text-base tracking-tight text-slate-500 text-sm">
+            {frontmatter.role}
+          </p>
+        </div>
+        <div class="mt-2 flex gap-2 items-center">
+          { frontmatter.twitter && (
+            <a href={`https://twitter.com/${frontmatter.twitter}`}>
+              <figure class="w-5 h-5">
+                <img src="/images/x.svg" class="w-full h-full" />
+              </figure>
+            </a>
+          )}
+          { frontmatter.github && (
+            <a href={`https://github.com/${frontmatter.github}`}>
+              <figure class="w-5 h-5">
+                <img src="/images/github.svg" class="w-full h-full" />
+              </figure>
+            </a>
+          )}
+          { frontmatter.facebook && (
+            <a href={`https://facebook.com/${frontmatter.facebook}`}>
+              <figure class="w-5 h-5">
+                <img src="/images/facebook.svg" class="w-full h-full" />
+              </figure>
+            </a>
+          )}
+          { frontmatter.linkedIn && (
+            <a href={`https://www.linkedin.com/in/${frontmatter.linkedIn}`}>
+              <figure class="w-5 h-5">
+                <img src="/images/linkedIn.svg" class="w-full h-full" />
+              </figure>
+            </a>
+          )}
+          { frontmatter.instagram && (
+            <a href={`https://www.instagram.com/${frontmatter.instagram}`}>
+              <figure class="w-5 h-5">
+                <img src="/images/instagram.svg" class="w-full h-full" />
+              </figure>
+            </a>
+          )}
+        </div>
+        { frontmatter.sponsor && (
+          <div class="mt-2 flex gap-2 items-center">
+            <span class="border-2	rounded-lg p-1 text-sm text-gray-400">SPONSOR SESSION</span>
+          </div>
+        )}
+      </div>
+      <div class="flex-1 session--info">
+        <slot />
+      </div>
+    </Container>
+    <Container className="flex gap-8 justify-between mt-10">
+      <Button className={clsx(["rounded-none py-2", { "invisible": first }])} href={allSpeakers[index - 1]?.url}>
+        <span>Prev</span>
+      </Button>
+      <Button className={clsx(["rounded-none py-2"])} href="/2024/">
+        <span>TOP</span>
+      </Button>
+      <Button className={clsx(["rounded-none py-2", { "invisible": last }])} href={allSpeakers[index + 1]?.url}>
+        <span>Next</span>
+      </Button>
+    </Container>
+  </section>
+</main>
+<Newsletter />
+</body>
+</html>
+
+<style is:global>
+  .session--info {
+    font-family: 'Noto Sans JP', sans-serif;
+  }
+
+  .session--info h1 {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .session--info p {
+    margin-top: 2rem;
+    line-height: 1.5rem;
+  }
+
+  /* FIXME 既存スタイルがが抑止されているので調整 */
+  .session--info a {
+    text-decoration: underline;
+    color: blue;
+  }
+
+
+
+</style>