Skip to content

Commit d51e616

Browse files
batora9batora9
committed
Merge branch 'main' of https://github.com/saitamau-maximum/public-website into feat/faq-page-design
2 parents baff72f + 2d6291e commit d51e616

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+897
-184
lines changed

‎docs/achievement/icpc.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
---
2-
title: "ICPC 国際大学対抗プログラミングコンテスト"
2+
title: "ICPC"
3+
subtitle: "国際大学対抗プログラミングコンテスト"
34
createdAt: "2024-03-06"
45
updatedAt: "2024-03-06"
5-
description: ""
6+
description: "ICPC は、同じ大学で 3 人 1 組のチームを作り、チームでプログラミングと問題解決の能力を競う大会です。これまでにも世界大会経験や、国内予選の継続的な突破といった好成績を収める実績を挙げています。"
7+
iconUrl: "/images/ICPC_icon.png"
8+
imageUrl: "/images/ICPC.png"
69
---
710

811
ICPC (International Collegiate Programming Contest / 国際大学対抗プログラミングコンテスト) とは、[ICPC Foundation](https://icpc.foundation/)が主催するプログラミングコンテストです。同じ大学で3人1組のチームを作り、チームでプログラミングと問題解決の能力を競う大会です。

‎docs/achievement/isucon.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
---
22
title: "ISUCON"
3+
subtitle: "Iikanjini Spped Up Contest"
34
createdAt: "2024-03-06"
45
updatedAt: "2024-03-06"
5-
description: ""
6+
description: "ISUCON は、与えられた Web サービスをどれだけ高速化できるかを競う、 LINE ヤフー社主催のコンテストです。"
7+
iconUrl: "https://avatars.githubusercontent.com/u/9019510?s=280&v=4"
8+
imageUrl: "/images/ISUCON.png"
69
---
710

811
[ISUCON](https://isucon.net/)は、与えられた Web サービスをどれだけ高速化できるかを競う、 LINE ヤフー社主催のコンテストです。

‎docs/achievement/ute-1.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
---
22
title: "UTE-1"
3+
subtitle: "ULTRA TAMAGO ENGINEER No.1"
34
createdAt: "2024-03-06"
45
updatedAt: "2024-03-06"
5-
description: ""
6+
description: "UTE-1 は、株式会社ウルシステムズが主催している Web アプリケーション開発に必要なバグフィックス・セキュリティ・パフォーマンスチューニング等の技術を期間内にどれだけ発揮できるかを競うバックエンドメインの大会です。"
7+
iconUrl: "/images/UTE-1_icon.jpg"
8+
imageUrl: "/images/UTE-1.png"
69
---
710

811
[UTE-1](https://uteone.jp/)は株式会社ウルシステムズが主催している Web アプリケーション開発に必要なバグフィックス・セキュリティ・パフォーマンスチューニング等の技術を期間内にどれだけ発揮できるかを競うバックエンドメインの大会です。

‎docs/achievement/wsh.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
---
22
title: "Web Speed Hackathon"
3+
subtitle: ""
34
createdAt: "2024-03-06"
45
updatedAt: "2024-03-06"
5-
description: ""
6+
description: "Web Speed Hackathon は株式会社サイバーエージェントが主催している、めちゃくちゃ重たいサイトの Core Web Vitals のスコアを期間内にどれだけ向上させられるかを競うフロントエンドメインの大会です。"
7+
iconUrl: "/images/wsh_icon.jpg"
8+
imageUrl: "/images/WSH.png"
69
---
710

8-
Web Speed Hackathon は株式会社サイバーエージェントが主催している、めちゃくちゃ重たいサイトの Core Web Vitals のスコアを期間内にどれだけ向上させられるかを競うフロントエンドメインの大会です。
11+
Web Speed Hackathon は株式会社サイバーエージェントが主催している、
12+
めちゃくちゃ重たいサイトの Core Web Vitals のスコアを期間内にどれだけ向上させられるかを競うフロントエンドメインの大会です。
913

1014
## 2024
1115
| 個人名 | 最終順位 | スコア順位 (学生内) | 備考 |

‎public/heros/hero-about.png

-512 KB
Binary file not shown.

‎public/heros/hero.png

407 KB
Loading

‎public/images/ICPC.png

276 KB
Loading

‎public/images/ICPC_icon.png

299 KB
Loading

‎public/images/ISUCON.png

244 KB
Loading

‎public/images/UTE-1.png

229 KB
Loading

‎public/images/UTE-1_icon.jpg

33.7 KB
Loading

‎public/images/WSH.png

429 KB
Loading

‎public/images/top1.png

525 KB
Loading

‎public/images/top2.png

207 KB
Loading

‎public/images/wsh_icon.jpg

132 KB
Loading

‎src/app/about/page.tsx

+87-76
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import type { Metadata } from 'next';
22
import Link from 'next/link';
3-
import { Header } from '../../components/Header/Header';
43
import style from './styles.module.css';
4+
import { Breadcrumb } from '@/components/Breadcrumb';
5+
import { HeroImage } from '@/components/HeroImage';
56

67
export const metadata: Metadata = {
78
title: 'サークルについて',
@@ -12,81 +13,91 @@ export const metadata: Metadata = {
1213
export default function About() {
1314
return (
1415
<div className={style.container}>
15-
{/*
16-
TODO: Hero 画像とタイトルを分離する
17-
ref: https://github.com/saitamau-maximum/public-website/pull/52#discussion_r1535109180
18-
*/}
19-
<img className={style.hero} src='/heros/hero-about.png' alt='hero' />
20-
<main className={style.box}>
21-
<h2 className={style.title}>
22-
埼玉大学プログラミングサークル　
23-
<span className={style.highlight}>Maximum</span>とは？
24-
</h2>
25-
<p className={style.text}>
26-
Maximumは、
27-
<span className={style.highlight}>
28-
国際大学対抗プログラミングコンテスト（ICPC）
29-
</span>
30-
へ参加し、 良い成績を上げるために成立したプログラミング研究会です。
31-
2022年度からは、
32-
<span className={style.highlight}>競技プログラミング</span>
33-
のみならず、
34-
<span className={style.highlight}>Web</span>や
35-
<span className={style.highlight}>その他プログラミング</span>
36-
の知識を高める活動を行っています。
37-
</p>
38-
<h2 className={style.title}>競技プログラミング</h2>
39-
<h3 className={style.subtitle}>活動内容</h3>
40-
<p className={style.text}>
41-
国際大学対抗プログラミングコンテスト(ICPC)に参加し、良い成績を上げるための活動を行っています。
42-
具体的には、ICPCなどの各種プログラミングコンテストへの参加、週2回の勉強会などを行っています。
43-
</p>
44-
<img className={style.image} src='/images/about.png' alt='活動風景' />
45-
<h3 className={style.subtitle}>競技プログラミングとは？</h3>
46-
<p className={style.text}>
47-
皆さんご存じの通り、コンピュータはとても高速に計算してくれます。
48-
しかし、その速さには限界があり、世界中の多くの問題は
49-
そのままコンピュータで解くと数万年・数億年単位の時間を要すると言われています。
50-
そこで、こういった問題の答えを高速かつ正確に出すための工夫を行って、
51-
プログラムとして記述するのが競技プログラミングです。
52-
</p>
53-
<p className={style.text}>
54-
工学部情報工学科のパンフレットに記載していただきました！
55-
例題も掲載されているので是非ご覧ください。
56-
<Link
57-
className={style.link}
58-
href='http://www.ics.saitama-u.ac.jp/content/uploads/pamphlet/ics_pamphlet.pdf'
59-
target='_blank'
60-
>
61-
情報工学科パンフレット（PDF）
62-
</Link>
63-
</p>
64-
<h2 className={style.title}>Web研究会</h2>
65-
<h3 className={style.subtitle}>講習</h3>
66-
<p className={style.text}>
67-
WebサイトやWebサーバーを制作・構築・運用するための基礎を一通り学びます。講習ではHTML,CSS,JabaScriptを触ります。
68-
Webに関しては
69-
<strong className={style.highlight}>アウトプットこそ正義</strong>
70-
なので「勉強する」よりも
71-
「作りながらその都度調べる」というフローで効率の良い学習ができるようサポートします!
72-
</p>
73-
<h3 className={style.subtitle}>サイト制作・アプリ制作</h3>
74-
<p className={style.text}>
75-
一通り基礎を学び終えたら、実際にX（旧twitter）やNoteのような投稿ができるサービスを
76-
自分たちで作ってもらいます。
77-
</p>
78-
<h3 className={style.subtitle}>パフォーマンスチューニング</h3>
79-
<p className={style.text}>
80-
Webの醍醐味は「制作」だけではありません。
81-
この世には「遅すぎる」や「セキュリティ的に危険」などの様々な問題を抱えたサイトがあります。
82-
こんなサイトを高速化したり安全に書き換えたりなどするのも、もちろんWebの範疇です。
83-
一見競技性のないWebの分野でも、こういった問題を解決する力を競う大会がいくつか開催されており、
84-
そこに出場することを目標にトレーニングもします。
85-
</p>
86-
<p className={style.text}>
87-
詳しく知りたい方は大会参加記を見てみてください。
88-
</p>
89-
</main>
16+
<div className={style.main}>
17+
<div className={style.heroBox}>
18+
<HeroImage title='Maximumの活動について' type='default' blur={true} />
19+
<Breadcrumb
20+
items={[
21+
{ title: 'Top', href: '/' },
22+
{ title: 'Maximumの活動について', href: '/about' },
23+
]}
24+
/>
25+
</div>
26+
<main className={style.box}>
27+
<h2 className={style.title}>
28+
埼玉大学プログラミングサークル　
29+
<span className={style.highlight}>Maximum</span>とは？
30+
</h2>
31+
<p className={style.text}>
32+
Maximumは、
33+
<span className={style.highlight}>
34+
国際大学対抗プログラミングコンテスト（ICPC）
35+
</span>
36+
へ参加し、 良い成績を上げるために成立したプログラミング研究会です。
37+
2022年度からは、
38+
<span className={style.highlight}>競技プログラミング</span>
39+
のみならず、
40+
<span className={style.highlight}>Web</span>や
41+
<span className={style.highlight}>その他プログラミング</span>
42+
の知識を高める活動を行っています。
43+
</p>
44+
<h2 className={style.title} id='kyopro'>
45+
競技プログラミング
46+
</h2>
47+
<h3 className={style.subtitle}>活動内容</h3>
48+
<p className={style.text}>
49+
国際大学対抗プログラミングコンテスト(ICPC)に参加し、良い成績を上げるための活動を行っています。
50+
具体的には、ICPCなどの各種プログラミングコンテストへの参加、週2回の勉強会などを行っています。
51+
</p>
52+
<img className={style.image} src='/images/about.png' alt='活動風景' />
53+
<h3 className={style.subtitle}>競技プログラミングとは？</h3>
54+
<p className={style.text}>
55+
皆さんご存じの通り、コンピュータはとても高速に計算してくれます。
56+
しかし、その速さには限界があり、世界中の多くの問題は
57+
そのままコンピュータで解くと数万年・数億年単位の時間を要すると言われています。
58+
そこで、こういった問題の答えを高速かつ正確に出すための工夫を行って、
59+
プログラムとして記述するのが競技プログラミングです。
60+
</p>
61+
<p className={style.text}>
62+
工学部情報工学科のパンフレットに記載していただきました！
63+
例題も掲載されているので是非ご覧ください。
64+
<Link
65+
className={style.link}
66+
href='http://www.ics.saitama-u.ac.jp/content/uploads/pamphlet/ics_pamphlet.pdf'
67+
target='_blank'
68+
>
69+
情報工学科パンフレット（PDF）
70+
</Link>
71+
</p>
72+
<h2 className={style.title} id='webken'>
73+
Web研究会
74+
</h2>
75+
<h3 className={style.subtitle}>講習</h3>
76+
<p className={style.text}>
77+
WebサイトやWebサーバーを制作・構築・運用するための基礎を一通り学びます。講習ではHTML,CSS,JavaScriptを触ります。
78+
Webに関しては
79+
<strong className={style.highlight}>アウトプットこそ正義</strong>
80+
なので「勉強する」よりも
81+
「作りながらその都度調べる」というフローで効率の良い学習ができるようサポートします!
82+
</p>
83+
<h3 className={style.subtitle}>サイト制作・アプリ制作</h3>
84+
<p className={style.text}>
85+
一通り基礎を学び終えたら、実際にX（旧twitter）やNoteのような投稿ができるサービスを
86+
自分たちで作ってもらいます。
87+
</p>
88+
<h3 className={style.subtitle}>パフォーマンスチューニング</h3>
89+
<p className={style.text}>
90+
Webの醍醐味は「制作」だけではありません。
91+
この世には「遅すぎる」や「セキュリティ的に危険」などの様々な問題を抱えたサイトがあります。
92+
こんなサイトを高速化したり安全に書き換えたりなどするのも、もちろんWebの範疇です。
93+
一見競技性のないWebの分野でも、こういった問題を解決する力を競う大会がいくつか開催されており、
94+
そこに出場することを目標にトレーニングもします。
95+
</p>
96+
<p className={style.text}>
97+
詳しく知りたい方は大会参加記を見てみてください。
98+
</p>
99+
</main>
100+
</div>
90101
</div>
91102
);
92103
}

‎src/app/about/styles.module.css

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
.container{
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
.main {
26
background-color: #f1f1f1;
3-
margin: 0 auto;
7+
padding-top: 72px;
48
}
59
.box{
610
background-color: #fff;
711
width: 54rem;
812
max-width: 100%;
9-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
10-
margin-bottom: 48px;
11-
margin-left: auto;
12-
margin-right: auto;
13+
box-shadow: 2px 2px 4px gray;
14+
margin: 40px auto;
1315
padding: 24px;
16+
box-sizing: border-box;
1417
}
1518
.title{
1619
font-size: 2rem;

‎src/app/achievements/[slug]/page.tsx

+45-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ import path from 'path';
33
import { parseMarkdownToHTML } from '@saitamau-maximum/markdown-processor/server';
44
import matter from 'gray-matter';
55
import { Metadata } from 'next';
6+
import { Article } from '../../../components/Article/Article';
7+
import Toc from '../../../components/Toc/Toc';
8+
import style from './slug-styles.module.scss';
9+
import { Breadcrumb } from '@/components/Breadcrumb';
10+
import { HeroImage } from '@/components/HeroImage';
611

712
interface Props {
813
params: {
@@ -11,6 +16,15 @@ interface Props {
1116
};
1217
searchParams: {};
1318
}
19+
/*目次のためのinterfaceです*/
20+
interface TocItem {
21+
depth: number;
22+
value: string;
23+
data: {
24+
id: string;
25+
};
26+
children: TocItem[];
27+
}
1428

1529
export async function generateStaticParams() {
1630
const docsDirectory = path.join(process.cwd(), `docs`, `achievement`);
@@ -49,11 +63,38 @@ export default async function AchievementsDetail({ params }: Props) {
4963
const fileContents = await fs.readFile(filePath, 'utf8');
5064
const { content, data } = matter(fileContents);
5165
const html = await parseMarkdownToHTML(content);
66+
67+
const tocData: TocItem[] = [
68+
{
69+
depth: 1,
70+
value: data.title,
71+
data: { id: 'container' },
72+
children: html.toc,
73+
},
74+
];
75+
5276
return (
53-
<main>
54-
<h1>{data.title}</h1>
55-
{/* 記事のタイトル等の動的コンテンツにXSSが発生する可能性が、信頼できるリソースからのみ提供されることとして許容する。 */}
56-
<article dangerouslySetInnerHTML={{ __html: html.content }} />
77+
<main className={style.main}>
78+
<div className={style.heroBox}>
79+
<HeroImage title='過去の実績' type='default' blur={true} />
80+
<Breadcrumb
81+
items={[
82+
{ title: 'Top', href: '/' },
83+
{ title: '過去の実績', href: '/achievements' },
84+
{ title: `${data.title}`, href: `/achievements/${slug}` },
85+
]}
86+
/>
87+
</div>
88+
<div id='container' className={style.container}>
89+
<div className={style.box}>
90+
<img className={style.image} src={data.imageUrl} />
91+
<h2 className={style.title}>{data.title}</h2>
92+
<hr className={style.line} />
93+
{/* 記事のタイトル等の動的コンテンツにXSSが発生する可能性が、信頼できるリソースからのみ提供されることとして許容する。 */}
94+
<Article content={html.content} />
95+
</div>
96+
<Toc tocData={tocData} />
97+
</div>
5798
</main>
5899
);
59100
}

‎src/app/achievements/[slug]/slug-styles.module.scss

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@use 'src/app/variables';
2+
3+
.main {
4+
background-color: variables.$background-color;
5+
}
6+
7+
.heroBox{
8+
padding-top: 72px;
9+
}
10+
11+
.container{
12+
width: 100%;
13+
background-color: variables.$background-color;
14+
padding-top: 48px;
15+
padding-bottom: 48px;
16+
display:flex;
17+
align-items: flex-start;
18+
}
19+
20+
.box{
21+
width: 848px;
22+
background-color: #fff;
23+
padding: 32px 20px;
24+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
25+
}
26+
27+
.image{
28+
width: 100%;
29+
border: 1px solid #D7D7D7 ;
30+
}
31+
32+
.title{
33+
font-size: 32px;
34+
font-weight: bold;
35+
margin-bottom: 0;
36+
}
37+
38+
.line{
39+
width:100%;
40+
margin-left: 0;
41+
}
42+
43+
@media (min-width: variables.$header-change-width) {
44+
.container{
45+
max-width: variables.$pages-max-width;
46+
margin: 0 auto;
47+
gap: 20px;
48+
}
49+
}
50+
51+
@media (max-width: variables.$header-change-width) {
52+
.container{
53+
justify-content: center;
54+
}
55+
}

0 commit comments

Comments
 (0)