diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 43d5a49..6fa6583 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -5,12 +5,19 @@
分からなかったらリストにはられているリンクを参照すること。
* HTML, CSS, JavaScriptの基本的な知識 [MDN Web Docs](https://developer.mozilla.org/ja/docs/Web)
-* (Optional) TypeScript [The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
+* TypeScript [The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
* フロントエンド([Vue.js](https://ja.vuejs.org/)/[Nuxt](https://nuxt.com), [htmx](https://htmx.org/))とバックエンド([sqlite](https://www.sqlite.org/), Nuxt, [Express](https://expressjs.com/))の基本的な知識
* GitとGitHubの基本的な知識 [GitHubとGitについて](https://docs.github.com/ja/get-started/start-your-journey/about-github-and-git)
* Markdownの基本的な知識 [Markdown記法一覧](https://qiita.com/oreo/items/82183bfbaac69971917f)
* 中学卒業レベル以上の英語力 [**頑張れ**](https://jstc.jma.or.jp/)
+その他資料:
+* [TypeScriptの特徴とは?JavaScriptとの違いを交えて解説](https://hnavi.co.jp/knowledge/blog/typescript/)
+* [Vue.js入門(Vue.jsの初心者は必ず読め‼︎)](https://qiita.com/Hashimoto-Noriaki/items/ea60d5932f13a9cd5707)
+* [Nuxt.jsとは、Vue.jsを効果的に使うためのフレームワーク!導入のメリットは?【入門編】](https://www.webstaff.jp/guide/trend/webit/nuxtjs/)
+* [Express.js完全入門](https://qiita.com/ryome/items/16659012ed8aa0aa1fac)
+* [htmxとは何なのか? その背景にある思想について](https://qiita.com/tsmd/items/0d07feb8e02cfa213cc4)
+
## レポジトリの構成
このレポジトリには2つのプロジェクトが存在する:
@@ -20,7 +27,7 @@
## 問題の報告・新仕様の提案
-ウェブサイトで起こったバグの報告や新しい仕様の提案はIssueから行う。
+ウェブサイトで起こったバグの報告や新しい仕様・ページデザイン案等の提案はIssueから行う。
### バグ報告
@@ -72,7 +79,24 @@
### PRテンプレート
```markdown
+**タイトル** [簡潔で明確に問題やリクエストを記述してください]
+**PRタイプ** [以下から選ぶ:]
+
+- [ ] バグ修正
+- [ ] 新仕様実装
+
+**関連するISSUE** [ISSUE番号を列挙します。(例;#1、#123)]
+
+**変更とその理由** [1、2文で簡潔に変更箇所を書き、その理由を述べる]
+
+**確認箇所** [以下のチェックリストに従う;]
+
+- [ ] 書いたコードは`CONTRIBUTING.md`内のコーディング規約に従っているか
+- [ ] `npm run lint`, `npm run format`を最低1回実行したか
+- [ ] (任意) 新たな型定義等でJSDoc対応のコメントを残し、`npm run documentation`でドキュメンテーションを生成したか
+
+**補足** [その他必要だと思う情報を書き足す]
```
## コーディング規約
@@ -81,16 +105,16 @@
#### ファイル
-* タブ・インデントは半角スペース4個分とし、タブ文字は使わないとする
+* タブ・インデントは半角スペース4個分とし、タブ文字は**使わない**とする
* ファイルは**必ず**UTF-8で保存する
#### 変数、定数など
##### 命名規則
-* 変数、定数、型名、関数名にローマ字を使用しない
-* 変数、定数、型名、関数名での連番は極力避ける
-* 変数、定数、型名、関数名には3文字以上の略称でない意味のある名前をつける
+* 変数、定数、型名、関数名に**ローマ字を使用しない**
+* 変数、定数、型名、関数名での連番は**極力避ける**
+* 変数、定数、型名、関数名には3文字以上の略称でない**意味のある名前をつける**
* 変数、定数、関数名にはcamelCase
* クラス名、型名、`components/`下のVueコンポーネントファイル名にはPascalCase
* CSSクラス、id、`pages/`下のVueファイル・フォルダにはkebab-case
@@ -98,19 +122,18 @@
##### その他
-* (TypeScript): 関数名・クラス名から判断できる場合のみ型の明記を省略しても良い、それ以外は明記する必要がある
-* 変数・定数定義以外でMagic Values(生の値)の使用は極力避け、代わりに列挙体や定数を使う
+* (TypeScript): 関数名・クラス名から**判断できる場合のみ**型の明記を省略しても良い、それ以外は**明記する必要がある**
+* 変数・定数定義以外でMagic Values(生の値)の使用は**極力避け**、代わりに列挙体や定数を使う
* 変数・定数には内容に合った型を明記する(TypeScript)
#### 括弧の使用について
* if文、for文、while文、関数定義、CSSのセレクターの中括弧は同じ行に書く
-* if文、for文、while文の内容が1行だけならば中括弧は省略しても良いとする
-* JavaScript/TypeScriptでのネスティングは4段以上にしない(参照:[Why You Shouldn't Nest Your Code](https://www.youtube.com/watch?v=CFRhGnuXG-4))
+* JavaScript/TypeScriptでのネスティングは**4段以上にしない**(参照:[Why You Shouldn't Nest Your Code](https://www.youtube.com/watch?v=CFRhGnuXG-4))
#### プログラミングパラダイム
-* JavaScript/TypeScriptでクラスを使用したい場合、継承を避け、合成を採用する。抽象化は冗長解消より本来のモノの概念をソースに起こすことを優先する(参照:[The Flaws of Inheritance](https://www.youtube.com/watch?v=hxGOiiR9ZKg), [Abstracion Can Make Your Code Worse](https://www.youtube.com/watch?v=rQlMtztiAoA))
+* JavaScript/TypeScriptでオブジェクト指向プログラミングを使用したい場合、継承を避け、合成を採用する。抽象化は冗長解消より本来のモノの概念をソースに起こすことを優先する(参照:[The Flaws of Inheritance](https://www.youtube.com/watch?v=hxGOiiR9ZKg), [Abstracion Can Make Your Code Worse](https://www.youtube.com/watch?v=rQlMtztiAoA))
* 関数型言語の特徴を取り入れても良いとする
#### コメント・ドキュメンテーション
@@ -119,6 +142,7 @@
* 無駄で間違ったコメントは書かない(参照:[Don't Write Comments](https://www.youtube.com/watch?v=Bf7vDBBOBUA&ab_channel=CodeAesthetic))
* 仕様、使い方についてはコメントではなくドキュメンテーションに記載する
* APIには簡潔な英語のドキュメンテーションを書く([JSdoc](https://www.typescriptlang.org/ja/docs/handbook/jsdoc-supported-types.html))
+* `composables/`, `server/`, `utils/`, `src-manager/`下に記載された関数や型定義等は**必ず**ドキュメンテーションを書くこと、それ以外は任意で記載する
#### その他
diff --git a/assets/styles/app.css b/assets/styles/app.css
index e9396be..8a649e2 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -17,6 +17,7 @@
#App {
display: grid;
+ height: max-content;
}
body {
@@ -25,10 +26,10 @@ body {
main {
margin: var(--main-margin-top-bottom) var(--main-margin-left-right);
+ min-height: 64vh;
}
html {
font-size: 16px;
- scrollbar-width: none;
scroll-behavior: smooth;
}
diff --git a/assets/styles/page.css b/assets/styles/page.css
index 1c98cb9..4df1aba 100644
--- a/assets/styles/page.css
+++ b/assets/styles/page.css
@@ -1,6 +1,7 @@
main {
display: grid;
width: 50%;
+ min-height: 75vh;
justify-self: center;
}
diff --git a/components/BackToTop.vue b/components/BackToTop.vue
index 237c872..eac4c55 100644
--- a/components/BackToTop.vue
+++ b/components/BackToTop.vue
@@ -19,8 +19,8 @@ const triggerDistance = 100;
position: fixed;
bottom: 2rem;
right: 2rem;
+ z-index: 5;
display: flex;
- justify-self: end;
width: 6rem;
height: 6rem;
border-radius: 5rem;
diff --git a/components/DropDown.vue b/components/DropDown.vue
index ad192d1..a7675f5 100644
--- a/components/DropDown.vue
+++ b/components/DropDown.vue
@@ -1,5 +1,8 @@
@@ -20,7 +20,7 @@ const doesNotHaveImage = ref(property.imagePath === undefined);
a {
display: grid;
width: 25rem;
- height: 30rem;
+ height: clamp(10rem, 15vh, max(30rem, fit-content));
grid: 2fr 1fr 1.5fr / 1fr;
background-color: var(--starlight);
border-radius: 1rem;
@@ -39,7 +39,6 @@ a > * {
.withoutImage {
grid: 1fr 1.5fr / 1fr;
- height: 15rem;
}
.image {
@@ -58,10 +57,11 @@ h2 {
color: var(--neptune1);
background-color: var(--starlight5);
border-radius: 1rem;
- margin: 0 2rem;
+ margin: 0.75rem 2rem;
padding: 1rem 1.75rem;
align-self: center;
line-height: 2rem;
+ font-size: clamp(16pt, 3vw, 20pt);
}
h2::after {
@@ -69,9 +69,10 @@ h2::after {
content: "";
position: absolute;
width: 7px;
- height: 2rem;
- top: 1rem;
+ height: max(2rem, 60%);
+ top: 50%;
left: 0.75rem;
+ transform: translateY(-50%);
background-color: var(--neptune1);
border-radius: 3px;
}
@@ -84,13 +85,9 @@ p {
@media screen and (max-width: 1024px) {
a {
width: 20rem;
- height: 25rem;
}
a > * {
- margin: 0 1rem;
- }
- h2 {
- font-size: 16pt;
+ margin: unset 0.25rem;
}
.image {
width: 16rem;
@@ -101,13 +98,9 @@ p {
@media screen and (max-width: 640px) {
a {
width: 16rem;
- height: 21rem;
}
a > * {
- margin: 0 0.75rem;
- }
- h2 {
- font-size: 16pt;
+ margin: unset 0.75rem;
}
.image {
width: 12rem;
diff --git a/components/NewsCard.vue b/components/NewsCard.vue
index 7cd4701..229a871 100644
--- a/components/NewsCard.vue
+++ b/components/NewsCard.vue
@@ -1,5 +1,5 @@
diff --git a/components/PankuzuList.vue b/components/PankuzuList.vue
index 3996a76..a04ee69 100644
--- a/components/PankuzuList.vue
+++ b/components/PankuzuList.vue
@@ -1,6 +1,6 @@
diff --git a/components/Slide.vue b/components/Slide.vue
index ed46610..152e91d 100644
--- a/components/Slide.vue
+++ b/components/Slide.vue
@@ -1,10 +1,17 @@