From e1cac6ff057f83c6f61204bbe20e12d47cc3e0db Mon Sep 17 00:00:00 2001 From: Kenryu Shibata Date: Thu, 26 Sep 2024 23:59:47 +0900 Subject: [PATCH] added PageTop component, markdown styles, white background on logo svg, and documentation comments --- .nuxtignore | 1 + .prettierignore | 1 + CONTRIBUTING.md | 8 +- README.md | 14 +- assets/databases/news.db | Bin 8192 -> 8192 bytes assets/siteinfo.json | 26 +- assets/styles/app.css | 10 +- assets/styles/color-pallet.css | 22 +- assets/styles/markdown.css | 146 ++ components/DropDown.vue | 1 + components/NewsCard.vue | 149 ++ components/NewsList.vue | 7 - components/PageTop.vue | 29 + components/TheFooter.vue | 5 +- components/TheHeader.vue | 6 + composables/windowDimensions.ts | 11 +- error.vue | 21 + layouts/default.vue | 14 +- package-lock.json | 4346 ++++++++++++++++--------------- package.json | 9 +- pages/index.vue | 167 +- pages/news/[article].vue | 79 +- pages/news/index.vue | 45 +- public/sera-logo-no-text.svg | 1 + public/sera-logo-text.svg | 1 + server/api/getArticle.ts | 65 + server/api/getNewsList.ts | 50 + server/api/getTime.ts | 12 +- utils/asyncDatabase.ts | 65 + utils/dropDown.ts | 16 +- utils/generateSeoMeta.ts | 48 + utils/news.ts | 49 + utils/newsCard.ts | 18 + utils/pageTop.ts | 16 + 34 files changed, 3345 insertions(+), 2113 deletions(-) create mode 100644 assets/styles/markdown.css create mode 100644 components/NewsCard.vue delete mode 100644 components/NewsList.vue create mode 100644 components/PageTop.vue create mode 100644 error.vue create mode 100644 server/api/getArticle.ts create mode 100644 server/api/getNewsList.ts create mode 100644 utils/asyncDatabase.ts create mode 100644 utils/generateSeoMeta.ts create mode 100644 utils/news.ts create mode 100644 utils/newsCard.ts create mode 100644 utils/pageTop.ts diff --git a/.nuxtignore b/.nuxtignore index 9dd78f6..f6e18b4 100644 --- a/.nuxtignore +++ b/.nuxtignore @@ -1 +1,2 @@ src-manager/ +docs/ \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index 60302be..a3c69f1 100644 --- a/.prettierignore +++ b/.prettierignore @@ -27,3 +27,4 @@ src-manager *.md eslint.config.js nuxt.config.ts +docs diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b759944..43d5a49 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -15,7 +15,7 @@ このレポジトリには２つのプロジェクトが存在する： -1. SERA Website: メインプロジェクト、ソースディレクトリ：`assets/ components/ layouts/ pages/ public/ server/` +1. SERA Website: メインプロジェクト、ソースディレクトリ：`assets/ components/ composables/ layouts/ pages/ public/ server/ utils/` 2. Content Manager: ニュース等のためのデータベースの管理UI・API、ソースディレクトリ：`src-manager/` ## 問題の報告・新仕様の提案 @@ -92,7 +92,7 @@ * 変数、定数、型名、関数名での連番は極力避ける * 変数、定数、型名、関数名には3文字以上の略称でない意味のある名前をつける * 変数、定数、関数名にはcamelCase -* クラス名、型名、Vueコンポーネントファイル名・importにはPascalCase +* クラス名、型名、`components/`下のVueコンポーネントファイル名にはPascalCase * CSSクラス、id、`pages/`下のVueファイル・フォルダにはkebab-case * 上記に該当しないものはcamelCaseで命名するものとする @@ -117,8 +117,8 @@ * コメントは英語、日本語どちらでも良い * 無駄で間違ったコメントは書かない(参照：[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)) +* 仕様、使い方についてはコメントではなくドキュメンテーションに記載する +* APIには簡潔な英語のドキュメンテーションを書く([JSdoc](https://www.typescriptlang.org/ja/docs/handbook/jsdoc-supported-types.html)) #### その他 diff --git a/README.md b/README.md index ca7ded5..e18f74c 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,10 @@ * node npm * sqlite +## コンテンツの管理 + +ニュース等のコンテンツの管理は`src-manager/`内の`README.md`を参照すること + ## 開発を開始する > 初めてこのプロジェクトに参加する際には`CONTRIBUTING.md`を***必ず***読んでおくこと @@ -17,5 +21,13 @@ git clone https://git.kenryu.us/kenryuS/sera-new-hp.git # レポジトリをクローン cd sera-new-hp # 移動して npm install # 依存パッケージのインストール -npm run dev # デベロッパーモードでサイトを構築 +npm run dev # デベロッパーモードでサーバーを起動 +npm run generate # 静的サイトを生成 ``` + +## 便利・重要なファイル/フォルダ + +* `assets/databases/news.db`: ニュースを管理しているsqliteデータベース +* `assets/siteinfo.json`: 部長と顧問の名前、コピーライトの年、メンバーの学科・学年ごとの人数、など更新があまりされない情報を集めたファイル、`import`して使う +* `docs/`: `typedoc`で生成されたドキュメンテーションが入っている、`python -m http.server`などで`localhost`にホストして読む +* `dist/`, `.output/`: `npm run generate`で生成された静的ウェブサイト本体、プロダクションレディーな状態 `dist/`は`.output/`へのリンクである diff --git a/assets/databases/news.db b/assets/databases/news.db index 4c6d8f2cffc3261fdb2b9297f51583404515b1be..311138190d1cc3de3950d78418be27db69e38348 100644 GIT binary patch literal 8192 zcmeHM+fx%)7*DFUvMt4#*6Ca4IM^8y%@wGXGFr45#oCG(+d7VuS;CU6-Z$XQ{BnTUo~b~o&7%K~JfblM@8#0YdFM3n zs6Q0}6#*3i6#*3i6#*3i6#*3i6#*3i6#*52*9!r0ulB7EcJJ0o`vkVi!}++n5Pjb` zT4^h@+mOBN$VnTb98|zpqw=rpwqv$RR8d*}Wm)Ap^o8x*epJmuW}a@@k2s$Yykfr+ z$YMF!VD(YIPk<(5w|#5hkJzBVJ3U;w=HY#{6|CS+SDpS#T(I2By0~?wF89rZW``!A z$?M9~Y63aGZ~HZ8dF$VQc`%LMcNxu&ou}L0D;CdcJ9nLU`m>!238*YBc)k@GkX~I;&Y*?`-~FnV5KJ-ky7 zls+T`{XUmoq0<$VZl=sbsLJDa)}rsieu1Oa<6Mwaq;Ye|8}%3$#QU<_Q_Xth;bE`OH0hDiNM}fujKzq2VQ&>ITCEIVtXmm{TN#WVg?;{D^~RW& zGnlLBGP;VcpsPR`3jFniAP^bTGqFon1vYw-A8euK|%5V*^NF?7iV zJ+jwOZig}e)dc-sRO<9sbB6-qDmYA2sY$7ASv|dgbwhxk#h%Nm@nOT`A(c%tIi zVNi8rk#`vImQgusDpxdMu9Sqtpy98vg7khLM{)aHN6!a6NgmKl$h; znU+YriNtS_$0KBNG%?tn7@uEVxvhvcg(KqXaw~aq4NDRhA7ZHui;Gx{Vd)``g1qC3 zq_e9Ft?8}IEt9qzSn5p7!welDrXp-?bs-}6z`zGEq1-n?_+TQi%@NbNdV5|oqL;iDkTRS<%uEE*q-bGaC$ekywptMDHw0z z2%z_bPL;L&f4+CQAJChYqYY$m28&bZeCqVz#N?4lIK#wb3mjvzCjtiu&>pWysT`>M zbMCYb!SP_RduVi^*aAEuT%eiUJj^2 zd6PkL2(5cPDPx=%nWUzxX^G5$T7o$Nvq9}gJ_6;mf^w3j(Zs|=@h7D3ZnkoQX?wv0 zduaRwVNq6>_}chvVs4sIVmZ)t`Ic0YUczDq{kK|ySwQ*+|dkrE4uJx&gf6((ag#Y#Z0oP(51m@4TkPzCcL3nmlt_I<+Ll7?JZ3A;lznnGkoAbiYN z(>*k#U7Q2WW*iP`0C7y1NGHD5U0<6jhc~7NnvJ vWtQZmDulR3gy<+F7L{Zs!+ANGdD#VtB^h8zO^`Df1VF^b(kFZy8-y4E+OaZq diff --git a/assets/siteinfo.json b/assets/siteinfo.json index 7955e4b..344e7cd 100644 --- a/assets/siteinfo.json +++ b/assets/siteinfo.json @@ -3,21 +3,21 @@ "clubNameLong": "Space Engineering Research Association", "copyrightYear": 2024, "memberDepartmentRatio": { - "date": "2023-3-31", - "mechanicalEng": 10, - "elecAndComp": 5, - "elecControl": 4, - "civilEng": 1, - "architecture": 2 + "date": "2024-9-17", + "mechanicalEng": 12, + "elecAndComp": 3, + "elecControl": 14, + "civilEng": 2, + "architecture": 3 }, "memberGradeRatio": { - "date": "2022-3-31", - "first": 7, - "second": 4, - "third": 5, + "date": "2024-9-17", + "first": 14, + "second": 11, + "third": 7, "fourth": 1, - "fifth": 5 + "fifth": 1 }, - "advisorName": "枝本雅史(えだもとまさふみ)", - "headOfClub": "4年機械工学科 櫻井晴生" + "advisorName": "佐藤敦（さとうあつい）", + "headOfClub": "５年機械工学科 瀨 仁一郎" } diff --git a/assets/styles/app.css b/assets/styles/app.css index 5d0d48e..8eff43b 100644 --- a/assets/styles/app.css +++ b/assets/styles/app.css @@ -1,4 +1,5 @@ @import "~/assets/styles/color-pallet.css"; +@import "~/assets/styles/markdown.css"; @font-face { font-family: "Noto Sans JP"; @@ -15,15 +16,20 @@ .page-enter-active, .page-leave-active { - transition: all ease-in-out 0.6s; + transition: all ease-in-out 0.4s; } .page-enter-from, .page-leave-to { opacity: 0; - transform: translateY(100%); } body { margin: 0; } + +html { + font-size: 16px; + scrollbar-width: none; + scroll-behavior: smooth; +} diff --git a/assets/styles/color-pallet.css b/assets/styles/color-pallet.css index a3857b7..5936a02 100644 --- a/assets/styles/color-pallet.css +++ b/assets/styles/color-pallet.css @@ -1,12 +1,22 @@ /* Colors form https://simplicable.com/colors/ */ :root { - --deep-space: #000001; - --moonlight: #f6eed5; --andromeda: #abcdee; - --meteorite: #4a3b6a; --astronaut: #214559; + --comet2: #6e6970; + --deep-space: #000001; + --martian-moon: #c3e9d3; + --meteorite: #4a3b6a; + --moonlight: #f6eed5; --neptune1: #007dac; - --starlight: #efefe8; - --sunlight: #fff8df; + --neptune2: #7fbb9e; --ocean-blue: #009dc4; -} \ No newline at end of file + --starlight1: #dde2e6; + --starlight5: #bcc0cc; + --starlight: #efefe8; + --starship: #e3dd39; + --sun2: #ef8e38; + --sunlight: #fff8df; + --uranus: #ace5ee; + --venus1: #eed053; + --venus2: #397c80; +} diff --git a/assets/styles/markdown.css b/assets/styles/markdown.css new file mode 100644 index 0000000..8d64bbd --- /dev/null +++ b/assets/styles/markdown.css @@ -0,0 +1,146 @@ +.markdown *:first-child { + margin-top: 0; +} + +.markdown *:last-child { + margin-bottom: 0; +} + +.markdown { + display: grid; + font-size: 16px; +} + +.markdown > h1 { + color: var(--neptune1); + font-size: 2.5em; + text-align: center; + margin-bottom: 0.5rem; +} + +.markdown > h2, +.markdown > h3, +.markdown > h4, +.markdown > h5, +.markdown > h6 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.markdown > h2 { + color: var(--neptune2); + font-size: 2.125em; +} + +.markdown > h3 { + color: var(--venus2); + font-size: 1.75em; +} + +.markdown > h4 { + color: var(--venus2); + font-size: 1.5em; +} + +.markdown > h5, +.markdown > h6 { + color: var(--venus2); + font-size: 1.25em; +} + +.markdown > small { + margin: auto; +} + +.markdown > p { + font-size: 1em; + line-height: 1.4em; +} + +.markdown > p:has(img) { + width: fit-content; + margin: auto; + & > img { + width: 32rem; + height: auto; + } +} + +.markdown > p > em, +.markdown > p > strong { + color: var(--neptune1); +} + +.markdown > p > em:has(strong) { + color: var(--sun2); +} + +.markdown > blockquote { + position: relative; + width: fit-content; + color: var(--deep-space); + background-color: var(--starlight5); + padding: 1em 2em; + border-radius: 1em; + margin-left: 0; + &::after { + --offset-y: 15px; + position: absolute; + content: ""; + width: 3px; + height: calc(100% - (var(--offset-y) * 2)); + background-color: var(--neptune1); + top: var(--offset-y); + left: 0.75em; + } +} + +.markdown > figcaption { + text-align: center; + font-size: 0.9em; +} + +.markdown > ul li, +.markdown > ol li { + line-height: 1.4em; +} + +.markdown > ul li::marker, +.markdown > ol li::marker { + font-weight: bold; + color: var(--neptune1); +} + +.markdown > table { + min-width: 128px; + border: var(--deep-space) 1px solid; + border-collapse: collapse; + margin: auto; + & > thead { + background: var(--comet2); + color: var(--starlight); + } + & > tbody > tr { + background: var(--starlight1); + } + & > tbody > tr:nth-of-type(even) { + background: var(--starlight); + } + & th, + & td { + padding: 0 0.25em; + border: var(--deep-space) 1px solid; + } +} + +@media screen and (max-width: 1024px) { + .markdown > p:has(img) > img { + width: 70vw; + } +} + +@media screen and (max-width: 640px) { + .markdown > h1 { + font-size: 2em; + } +} diff --git a/components/DropDown.vue b/components/DropDown.vue index a066ac6..74957ea 100644 --- a/components/DropDown.vue +++ b/components/DropDown.vue @@ -133,6 +133,7 @@ const handleFocusOutEvent = () => { font-weight: bold; position: absolute; top: auto; + z-index: 100; min-width: 100%; width: fit-content; text-wrap: nowrap; diff --git a/components/NewsCard.vue b/components/NewsCard.vue new file mode 100644 index 0000000..a6aa521 --- /dev/null +++ b/components/NewsCard.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/components/NewsList.vue b/components/NewsList.vue deleted file mode 100644 index 3c75955..0000000 --- a/components/NewsList.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/components/PageTop.vue b/components/PageTop.vue new file mode 100644 index 0000000..4ee7b84 --- /dev/null +++ b/components/PageTop.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/components/TheFooter.vue b/components/TheFooter.vue index 85779be..43523a5 100644 --- a/components/TheFooter.vue +++ b/components/TheFooter.vue @@ -30,7 +30,9 @@ const showThePast = (event: Event) => {
-

{{ SiteInfo.clubNameLong }}

+

+ 岐阜高専宇宙工学研究会 - {{ SiteInfo.clubNameLong }} +

宇宙分野に興味ある学生が集い、宇宙理工学に関する知識を身に付けると共に、 宇宙分野に関連する各種競技会へ参加して人間力と実践力を養うことを目的に活動しています。 @@ -181,6 +183,7 @@ footer { & svg { width: auto; height: 56px; + background: transparent !important; } } diff --git a/components/TheHeader.vue b/components/TheHeader.vue index 895d6f6..ef8fa19 100644 --- a/components/TheHeader.vue +++ b/components/TheHeader.vue @@ -49,12 +49,17 @@ const mediaDropDownEntries: Array = [ diff --git a/composables/windowDimensions.ts b/composables/windowDimensions.ts index 79d87ef..abc6b06 100644 --- a/composables/windowDimensions.ts +++ b/composables/windowDimensions.ts @@ -5,13 +5,14 @@ /** * Enums for viewport types + * @readonly * @enum {number} */ export const enum ViewPortType { DESKTOP, TABLET, - MOBILE -}; + MOBILE, +} /** * Vue Composable for getting window dimensions and viewport type based on width @@ -27,11 +28,9 @@ export function useWindowDimensions() { height.value = window.innerHeight; if (width.value >= 1024) { viewPortType.value = ViewPortType.DESKTOP; - } - else if (width.value < 640) { + } else if (width.value < 640) { viewPortType.value = ViewPortType.MOBILE; - } - else { + } else { viewPortType.value = ViewPortType.TABLET; } } diff --git a/error.vue b/error.vue new file mode 100644 index 0000000..3bbcd0e --- /dev/null +++ b/error.vue @@ -0,0 +1,21 @@ + + + diff --git a/layouts/default.vue b/layouts/default.vue index ce8303c..8314338 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,6 +1,5 @@