Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

タイトルが2024になってしまっているのを修正 #11

Merged
merged 6 commits into from
Nov 13, 2024
Merged

タイトルが2024になってしまっているのを修正 #11

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d503eac
タイトルが2024になってしまっているのを修正
PharaohKJ Nov 1, 2024
3aaca79
TOPへのリンクが死んでしまっていたのを修正
PharaohKJ Nov 1, 2024
0bd30be
ヒーローイメージ部分も分けた
PharaohKJ Nov 1, 2024
8df7c5b
ファイル名じゃなくてディレクトリ名で対応することにした
PharaohKJ Nov 3, 2024
44fc1fc
パス修正
PharaohKJ Nov 3, 2024
e1598fe
タイトルをかっこよくした
PharaohKJ Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions src/components/2024/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
177 changes: 177 additions & 0 deletions src/layouts/2024/Speaker.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
---
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 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>BuriKaigi | {title}</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>
171 changes: 171 additions & 0 deletions src/layouts/2024/Sponsor.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
---
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 allSponsors = await Astro.glob('../../pages/2024/sponsors/*.md');
const index = allSponsors.findIndex(speaker => speaker.frontmatter.name === frontmatter.name)
const first = index === 0
const last = index === allSponsors.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>BuriKaigi | {title}</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="sponsor-title"
class="font-display text-4xl font-medium tracking-tighter text-gray-600 sm:text-5xl"
>
{ frontmatter.type === "後援" ? frontmatter.type : `${frontmatter.type}スポンサー`}
</h2>
</div>
</Container>
<Container className="flex gap-8 mt-12 flex-col">
<div class="max-lg:flex max-lg:flex-col max-lg:items-center">
<div class="h-auto w-[30rem] max-w-full transform">
<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">
<a href={frontmatter.siteUrl} target="_blank" rel="noopener noreferrer">
{frontmatter.siteUrl}
</a>
</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>

</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={allSponsors[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={allSponsors[index + 1]?.url}>
<span>Next</span>
</Button>
</Container>
</section>
</main>
<Newsletter />
</body>
</html>

<style is:global>
.sponsor-title,
.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>
Loading