Skip to content

Commit 3827706

Browse files
aster-voidaster-void
committed
complete /donation
1 parent 7b21bdd commit 3827706

File tree

10 files changed

+186
-97
lines changed

10 files changed

+186
-97
lines changed

‎.helix/languages.toml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ astro-ls = { command = "astro-ls", args = ["--stdio"] }
44
[[language]]
55
name = "astro"
66
formatter = { command = "bun", args = ["prettier", "--parser", "astro"] }
7-
language-servers = ["astro-ls"]
7+
language-servers = ["astro-ls", "tailwindcss-ls"]
8+
89
[[language]]
910
name = "typescript"
1011
formatter = { command = "bun", args = ["prettier", "--parser", "typescript"] }

‎_src/pages/contact.tsx‎

Lines changed: 0 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +0,0 @@
1-
import React, { useEffect, useState } from "react";
2-
import { StaticImage } from "gatsby-plugin-image";
3-
import GlobalFooter from "../components/GlobalFooter";
4-
import GlobalHeader from "../components/GlobalHeader";
5-
import CommonHead from "../components/CommonHead";
6-
import ActionButton from "../components/ActionButton";
7-
8-
export default function ContactPage() {
9-
// スパム対策
10-
const [emailAddress, setEmailAddress] = useState<string | null>(null);
11-
useEffect(() => {
12-
const timerId = setTimeout(() => {
13-
setEmailAddress(`contact${String.fromCharCode(64)}utcode.net`);
14-
}, 1000 * 3);
15-
return () => {
16-
clearTimeout(timerId);
17-
};
18-
}, []);
19-
20-
return (
21-
<>
22-
<GlobalHeader />
23-
<div className="container mx-auto px-4 pt-16 pb-12">
24-
<h1 className="text-4xl">ut.code(); に連絡する</h1>
25-
</div>
26-
<StaticImage
27-
alt=""
28-
src="../images/contact-header.jpg"
29-
class="w-full h-48"
30-
/>
31-
<main className="container mx-auto px-4 py-16">
32-
<div className="prose max-w-none">
33-
<h2>お問い合わせ</h2>
34-
<p>ut.code(); へのお問い合わせは、各種 SNS をご利用ください。</p>
35-
<p className="not-prose flex gap-4">
36-
<ActionButton to="https://twitter.com/utokyo_code">
37-
X (旧 Twitter)
38-
</ActionButton>
39-
<ActionButton to="https://line.me/ti/p/%40nlr3843e">
40-
LINE
41-
</ActionButton>
42-
</p>
43-
<p>
44-
メールでのお問い合わせをご希望の方は、次のメールアドレスまでご連絡ください。
45-
</p>
46-
<p>
47-
{emailAddress ? (
48-
<a href={`mailto:${emailAddress}`}>{emailAddress}</a>
49-
) : (
50-
"読み込み中です..."
51-
)}
52-
</p>
53-
<h2>ご寄付・ご協賛のお願い</h2>
54-
<p>
55-
{/* eslint-disable prettier/prettier */}
56-
ut.code();
57-
では、活動を支援していただける方を募集しております。詳細につきましては、次のページをご覧ください。
58-
{/* eslint-enable prettier/prettier */}
59-
</p>
60-
<p className="not-prose">
61-
<ActionButton to="/donation/">ご寄付・ご協賛のお願い</ActionButton>
62-
</p>
63-
</div>
64-
</main>
65-
<GlobalFooter />
66-
</>
67-
);
68-
}
69-
70-
export function Head() {
71-
return <CommonHead title="ut.code(); に連絡する" />;
72-
}

‎src/components/ActionButton.astro‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,33 @@ import { Icon } from "astro-icon/components";
44
interface Props {
55
to: string;
66
variant?: "light" | "dark";
7+
"no-motion"?: boolean;
78
class?: string;
89
}
9-
const { to, variant, class: className } = Astro.props;
10+
const props = Astro.props;
11+
const { to, variant = "dark" } = props;
1012
---
1113

1214
<a
1315
href={to}
1416
{...!to.startsWith("/") ? { target: "_blank", rel: "noreferrer" } : {}}
1517
class:list={[
16-
"flex items-center w-max px-6 py-3 gap-4 rounded-full bg-white text-black font-bold hover:brightness-95",
17-
variant === "light" && "border border-black",
18-
className,
18+
"not-prose flex items-center w-max px-6 py-3 gap-4 rounded-full bg-white text-black font-bold hover:brightness-95",
19+
variant === "dark" && "border border-black",
20+
!props["no-motion"] && "motion",
21+
Astro.props.class,
1922
]}
2023
>
2124
<slot />
22-
<div>
23-
<Icon name="feather:arrow-right" class="w-8 h-8" />
24-
</div>
25+
<Icon id="icon" name="feather:arrow-right" class="w-8 h-8 relative" />
2526
</a>
27+
<style>
28+
/* TODO: @media not(prefers-reduced-motion) */
29+
#icon {
30+
left: -2px;
31+
transition: left 0.15s ease-out;
32+
}
33+
a:hover.motion #icon {
34+
left: 6px;
35+
}
36+
</style>

‎src/components/Header.astro‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const { focus } = Astro.props;
5050
href={link.to}
5151
class:list={[
5252
"flex items-center h-full px-6 navigation-bar",
53-
focus === link.focus && "text-amber-500",
53+
focus === link.focus && "current",
5454
]}
5555
>
5656
{link.title}
@@ -98,15 +98,17 @@ const { focus } = Astro.props;
9898
/* https://stackoverflow.com/questions/77042256/css-transition-animation-not-working-for-popover-attribute */
9999
/* TODO: not working now */
100100
[popover] {
101+
opacity: 0;
101102
&:popover-open {
103+
opacity: 1;
102104
@starting-style {
103105
opacity: 0;
104106
}
105-
opacity: 1;
106107
}
107108
transition:
108109
opacity 0.3s,
109-
display 0.3s allow-discrete;
110+
display 0.3s;
111+
transition-behavior: allow-discrete;
110112
}
111113

112114
.navigation-bar {
@@ -115,7 +117,14 @@ const { focus } = Astro.props;
115117
text-decoration: none;
116118
transition: background-size 0.5s;
117119
}
120+
.navigation-bar.current {
121+
background: linear-gradient(lawngreen 0 0) bottom left/
122+
var(--underline-width, 0%) 0.1em no-repeat;
123+
}
118124
.navigation-bar:hover {
119125
--underline-width: 100%;
126+
@starting-style {
127+
--underline-width: 0%;
128+
}
120129
}
121130
</style>

‎src/layouts/GlobalLayout.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ interface Props {
88
title: string | null;
99
description: string | null;
1010
focus: Focus;
11+
class?: string;
1112
}
1213
const { title, description, focus } = Astro.props;
1314
---
1415

1516
<Meta {title} {description} url="http://localhost:4321">
1617
<Header {focus} />
17-
<slot />
18+
<body class="min-h-full"> <slot /> </body>
1819
<Footer />
1920
</Meta>

‎src/layouts/meta.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const favicon = await getImage({
5151
<!-- <script type="application/ld+json">{JSON.stringify(linkedData)}</script> -->
5252
<!-- )} -->
5353
</head>
54+
<slot />
55+
5456

55-
<body class="min-h-full"> <slot /> </body>
5657
</html>

‎src/pages/contact.astro‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
import { Image } from "astro:assets";
3+
4+
import GlobalLayout from "../layouts/GlobalLayout.astro";
5+
import { Focus } from "../schema";
6+
7+
import ActionButton from "../components/ActionButton.astro";
8+
import ContactHeader from "../images/contact-header.jpg";
9+
---
10+
11+
<GlobalLayout
12+
title="連絡"
13+
description="ut.code(); 連絡する手段"
14+
focus={Focus.contact}
15+
>
16+
<div class="container mx-auto px-4 pt-16 pb-12">
17+
<h1 class="text-4xl">ut.code(); に連絡する</h1>
18+
</div>
19+
<Image
20+
alt=""
21+
src={ContactHeader}
22+
width="1920"
23+
height="600"
24+
class="h-150 object-cover"
25+
/>
26+
<main class="container mx-auto px-4 py-16">
27+
<div class="prose max-w-none">
28+
<h2>お問い合わせ</h2>
29+
<p>ut.code(); へのお問い合わせは、各種 SNS をご利用ください。</p>
30+
<p class="not-prose flex gap-4">
31+
<ActionButton to="https://twitter.com/utokyo_code">
32+
X (旧 Twitter)
33+
</ActionButton>
34+
</p>
35+
<p>
36+
メールでのお問い合わせをご希望の方は、次のメールアドレスまでご連絡ください。
37+
</p>
38+
<p id="email-loader">読込中...</p>
39+
<script>
40+
// スパム対策
41+
setTimeout(() => {
42+
const elem = document.getElementById("email-loader");
43+
if (!elem) throw new Error("email loader: failed to get element");
44+
const addr = `contact${String.fromCharCode(64)}utcode.net`;
45+
elem.innerHTML = `<a href=${`mailto:${addr}`}>${addr}</a>`;
46+
}, 3000);
47+
</script>
48+
<h2>ご寄付・ご協賛のお願い</h2>
49+
<p>
50+
ut.code();
51+
では、活動を支援していただける方を募集しております。詳細につきましては、次のページをご覧ください。
52+
</p>
53+
<p class="not-prose">
54+
<ActionButton to="/donation">ご寄付・ご協賛のお願い</ActionButton>
55+
</p>
56+
</div>
57+
</main>
58+
</GlobalLayout>

‎src/pages/donation.astro‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
import { Image } from "astro:assets";
3+
4+
import GlobalLayout from "../layouts/GlobalLayout.astro";
5+
import { Focus } from "../schema";
6+
7+
import DonationHeader from "../images/donation-header.jpg";
8+
import ActionButton from "../components/ActionButton.astro";
9+
---
10+
11+
<GlobalLayout
12+
title="ご寄付・ご協賛のお願い"
13+
description="ご寄付・ご協賛をお願いしております"
14+
focus={Focus.contact}
15+
class="prose"
16+
>
17+
<h1 class="text-4xl mt-12 ml-[20%]">ご寄付・ご協賛のお願い</h1>
18+
<Image
19+
alt=""
20+
src={DonationHeader}
21+
width="1920"
22+
height="600"
23+
class="w-full h-150 object-cover my-8"
24+
/>
25+
<article class="prose mb-20">
26+
<p>ut.code(); は、学生の手で自主的に運営されている団体です。</p><p>
27+
多くの方にソフトウェア開発の魅力を知っていただくため、活動はすべて無償で行っています。
28+
</p>
29+
<p>
30+
現在のところ活動資金は寄付によって賄われていますが、十分とはいえない状況です。
31+
皆様のご支援をいただけますと幸いです。
32+
</p>
33+
<h2>協賛による支援</h2>
34+
<p>
35+
ut.code();は、ウェブサイトにご協賛いただいた企業様のロゴを掲載しております。
36+
</p>
37+
<h2>ご寄付による支援</h2>
38+
<p>ご寄付いただける方は、以下の口座にお振込みください。</p>
39+
<p>
40+
誤操作の防止と、感謝の気持ちをお伝えするため、事前にご一報いただけますと幸いです。
41+
</p>
42+
<ul>
43+
<li>金融機関: 三菱 UFJ 銀行 (0005)</li>
44+
<li>支店: 本郷 (351)</li>
45+
<li>口座番号: 0339615</li>
46+
</ul>
47+
<ActionButton class="mt-8" to="/contact">ut.code(); の連絡先</ActionButton>
48+
49+
<h2>使用しなくなったノートパソコンの譲渡</h2>
50+
<p>
51+
ut.code();
52+
では例年、五月祭・駒場祭で外部のお客様向けにプログラミングを学ぶことのできる企画を行っています。
53+
</p>
54+
<p>
55+
この企画では、皆様に気軽にお越しいただけるよう、会場内でノートパソコンを貸し出しています。
56+
各々が持ち寄ったノートパソコンを使用してはいますが、それだけでは台数が足りないため、外部の事業者にレンタルを依頼せざるを得ず、その費用負担が問題となっています。
57+
</p>
58+
<p>
59+
そこで、ut.code();
60+
では、使用しなくなったノートパソコンを譲渡していただける方を募集しています。
61+
</p>
62+
<p>
63+
保存されているデータは幣団体で削除する処理を行いますが、情報漏洩については責任を負うことができませんので、送付前にデータの削除をお願いいたします。
64+
</p>
65+
66+
<ActionButton to="/contact">ut.code(); の連絡先</ActionButton>
67+
68+
<h2>ご支援いただいた皆様</h2>
69+
<ul>
70+
<li>2024/3/11 コウノマサノリ様</li>
71+
</ul>
72+
</article>
73+
74+
<style>
75+
@import "tailwindcss";
76+
article {
77+
@apply mx-[20%];
78+
}
79+
</style>
80+
</GlobalLayout>

‎src/pages/index.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ const articles = (await getCollection("articles"))
5050
<div class="container mx-auto px-4">
5151
<div class="bg-white max-w-lg p-8">
5252
<h1 class="text-2xl md:text-3xl">
53-
<span class="inline-block">東京大学の</span>
54-
<span class="inline-block">ソフトウェア開発</span>
55-
<span class="inline-block">コミュニティ</span>
53+
<span class="inline-block">東京大学の</span><span
54+
class="inline-block">ソフトウェア開発</span
55+
><span class="inline-block">コミュニティ</span>
5656
</h1>
5757
<div class="prose mt-3">
5858
<p>
@@ -240,7 +240,7 @@ const articles = (await getCollection("articles"))
240240
</span>
241241
</p>
242242
</div>
243-
<ActionButton to="/donation/" class="mt-8 mx-auto">
243+
<ActionButton to="/donation/" class="mt-8 mx-auto" no-motion>
244244
寄付する
245245
</ActionButton>
246246
</div>

‎src/pages/join.astro‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,20 @@ import JoinHeader from "../images/join-header.jpg";
1313
description="ut.code(); に参加する"
1414
focus={Focus.join}
1515
>
16-
<div class="container mx-auto px-4 pt-16 pb-12">
17-
<h1 class="text-4xl">ut.code(); に参加する</h1>
18-
</div>
1916
<Image
2017
alt=""
2118
src={JoinHeader}
2219
width="1920"
2320
height={60 * 8}
24-
class="w-full h-60 object-cover"
21+
class="w-full h-[35rem] object-cover"
2522
/>
2623
<main class="container mx-auto px-4 py-16">
2724
<div class="prose max-w-none">
28-
<main class="container mx-auto px-4 py-16">
25+
<main class="container mx-auto px-4">
2926
<div class="prose max-w-none">
30-
{/* ut.code(); 新歓情報 */}
27+
<div class="container mx-auto px-4 pb-6">
28+
<h1 class="text-4xl font-medium">ut.code(); に参加する</h1>
29+
</div>
3130
<p>
3231
ut.code();
3332
は、プログラミングはもちろん、ものづくりが好きな人、デザインに興味がある人、アイデアを形にしたい人など、幅広い人を歓迎しています！
@@ -45,6 +44,7 @@ import JoinHeader from "../images/join-header.jpg";
4544
</p>
4645
<div class="not-prose">
4746
<ActionButton
47+
variant="dark"
4848
to="https://sites.google.com/g.ecc.u-tokyo.ac.jp/utcode/discord-%E6%96%B0%E6%AD%93%E3%81%AE%E6%96%B9%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89"
4949
>
5050
参加したい方はこちら
@@ -110,5 +110,5 @@ import JoinHeader from "../images/join-header.jpg";
110110
</div>
111111
</main>
112112
</div>
113-
</main></GlobalLayout
114-
>
113+
</main>
114+
</GlobalLayout>

0 commit comments

Comments
 (0)