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 @@