[WIP] Nuxt3 project

[VortexExpansion]

Reviewer

@yabe-diverta @terasim

Related

https://github.com/diverta/front_kuroco_document_site/issues/348
https://github.com/diverta/Kuroco-opendev/issues/4907

Checklist

• Create front-end repository
• Kuroco backend creation
• Import the latest UI using sass
• Copying Kuroco content and other data
• Refine the front end with Nuxt3
• Refactor typescript to javascript
• Implement auth using auth.nuxtjs
• Refactor options API to compositions API

[yabe-diverta]

@VortexExpansion

• add .env.example to demonstrate clients how to setup env var
• make sure it works with FullStaticGeneration, especially for dynamic routes (like [id] route)
• deploy it on Kuroco front, provide GithubActions workflow (if you are not familiar with it, please notice me)
• remove warning on running dev, like:

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($value * 10, 2) or calc($value * 10 / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
79 │   .u-mt-#{$value * 10/2} {
   │           ^^^^^^^^^^^^^
   ╵
    assets/scss/object/utility/_utility.scss 79:11  @import
    assets/scss/style.scss 26:9                     root stylesheet

• clicking on Header on Phone mode menu does not work.
• seems some routes has not provided (/ltd-news/, /login/, /contact/)
• no favicon.
• GithubActions's workflow template (This is on Kuroco side update)

[yabe-diverta]

@HisashiHasebe

コンポーネント化する時のルールというか、指標みたいなのってありますか？

最低限同じコードを生成するものをコンポーネント化しています。

コンポーネント化するのは良いのですが、ユーザー側で再利用しやすい("ユーザー側で編集する前提"って観点で)とか読みやすいとかって場合に実施して欲しいです。

了解しました。
- AppFooter
- AppHeader
- ui > AlertSuccess
- ui > AlertError
- ui > SubmitButton

ぐらいは残しても良いかなと思っているのですが、
お手数ですが他にいる(orいらない)ものがあるかご確認お願いできますでしょうか。
https://github.com/VortexExpansion/front_nuxt_corporate/tree/refactored-javascript/components

失礼しました、ちょっと見直してみますね。

[KentaKatoh]

@yabe-diverta コンポーネント設計は阿部さんがやった方がいいと思うので、投げないでください。

[yabe-diverta]

• .envを削除
• extend-ofetchを削除
• コンポーネント > コンポーネント のネストをやめる
• PlainBodyとDetailBodyのように一見同じようで整合性が取れていないやつを治す
• DetailBodyのbuttonのように用途がわかりづらいpropsを削除or修正
• v-bindは使い方がわかりづらいから、propsに分解した方がよい
• HTMLの構造がいけてない(class="c-page-title"の位置がページで異なる)ので対応
  • 詳細ページ：https://diverta.gyazo.com/5fb0f16f072f0426ec26a36094fcf7a2
  • 一覧ページ：https://diverta.gyazo.com/31d9f61e8173dde2eaa727e30b5860c7
  • 事業ページ：https://diverta.gyazo.com/51bc5e6c5737c0994fecfa9d1224dc17

[yabe-diverta]

メモ:

useFetch()を使う時、

• arg1のURLを相対パスにする(/some/api)
• arg2のオプションにbaseURLを入れる

ケースでは、
SSRのデータ取得時にresponseがjsonに自動変換されない(textになる)

[email protected]で再現するが、
たまたま4d前に修正されている模様なので、近々修正されると思われる。

修正がバージョンに入るまではbaseURLの使用をやめて、
arg1のURLを絶対パスにして対応する。
修正バージョンが入り次第nuxtをアップデート

[yabe-diverta]

メモ:
@sidebar/nuxt-auth cookie feat req

[HisashiHasebe]

【追加】

• pages/index.vueのuseFetch('/rcms-api/1/ltd-news/list')にserver: falseのオプションを付ける
  時間がたつと見れなくなっちゃいます。
  https://diverta.gyazo.com/f6c3f619d16983983d232848fefaa7b7

[HisashiHasebe]

【メモ】
コピー元サイト作成準備のため、バックエンド側のコンテンツ定義やカスタム処理の名前などを英語にしました。
フロントへの影響はないはずです。

[yabe-diverta]

• partitioned cookie の設定, 動作確認

[HisashiHasebe]

【追加】

• pages/ltd-news/detail/[slug].vueのuseFetchにserver: falseのオプションを付ける
  会員種別による出し分けができなくなっています。
  https://diverta.gyazo.com/326adc7d6a92b902b8a6508749898a10

[yabe-diverta]

@HisashiHasebe @takel-shiba
レビュー一旦Doneとなったと確認できたと思っているのでマージしたいのですが、
阿部だとマージボタンが表示されないみたいです。
お手数ですがマージお願いしてもよいでしょうか。

[yabe-diverta]

@VortexExpansion
Sorry I forgot mentioning above to you.
Please merge it if you can?

[VortexExpansion]

@yabe-diverta san
Sorry, I don't have the write access to diverta:main too.

I think only @takel-shiba san has the merge authority. Please review.

[takel-shiba]

@VortexExpansion @yabe-diverta @HisashiHasebe
I have merged now!