zli-uoa / website

Zli's website

zli-website

StoryBook

WebSite

Prototype

Website Design (figma)

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Run your end-to-end tests

yarn run test:e2e

Run your unit tests

yarn run test:unit

Start storybook

yarn storybook

Build storybook

yarn build-storybook

Customize configuration

See Configuration Reference.

website's Issues

Lighthouse CI入れてみたい

（個人的にCl系入れる体験をしたい）

ソーシャルリンクを追加する

Zli公式のYouTubeとTwitterのリンクを追加する

AboutItemの説明分がはみ出てる

こんな感じになっているので直す

EventsComponentsを作成

MemberComponentsを作成

TypeScriptつかいたい

使いたいけど設定がめんどい

ContactComponentsを作成

navbarのcontentsをhoverした時のanimationがダサい

TopComponentを作成

素材

画像データとかがほしい

MemberItemViewを作成

PRのコメントにLGTMを書いたらいい感じの画像を貼ってくれる君を作りたい

楽しそうなので

Routerを作る

部員個人のページとイベント一覧ページがあるのでRouterが欲しそう
ルートのときにハッシュがついてたらジャンプもしたい

デプロイがしくじる

原因不明
GitHubActions上では成功している

設計とか

個人的に勝手に考えてるアーキテクチャ
気持ち伝わって

• App.vue
  • ここでは基本的にContainerの呼び出しだけ。必要なら定数の注入とかも
• Containers
  • APIの呼び出しとか、下のContentが必要なPropsの解決
• Content
  • Propsで受け取ったものを使って描画だけをする
• その他
  • Contentで使うパーツ

雰囲気こんな感じで
多分Vuexいらないかな？

レスポンシブ対応

メンドイ、やりたくない

コードのリファクタ

コードのリファクタリングをしたい
スタイルの周りとか結構適当なので

モバイル向けハンバーガーメニューを作成

現在、ヘッダーのナビゲーションは文字が横並びしているが、モバイル向けにはハンバーガーメニュウを追加した方が良さそう。

Footerにcopyrightを追加する

Copyright © 2019 Zli. 

TitleViewを作成

AboutItemを作成

トップページのイベント一覧の表示数の上限を3にする

TypographyComponentを作成する

EventItemを作成する

PostCSSを使うとStoryBookが使えなくなるらしい

vue add storybook で導入しないといけなかったっぽい
まだ使ってないからどうにかなってるっぽいけど使うようなら対応したほうがいいかも

動かなくなったときに考えよう

ドメインどうしよう

どうしよう

SEOがちょい低い

Metaタグあたりは入れたほうが良さげかも

now.sh でSPAするとバグる

ダイレクトにURLを叩くと死ぬ

SearchBoxを作成

APIとか

データをおいておくDBとかそれを取得するAPIとかをどうするか

とりあえず、GASでスプレッドシートからJSONを作って取得するようにした
フォームからデータ入れて貰えればよしなに反映してくれるので運用が楽かなーって思った。
デメリットとしては、コードがgitで管理できない（やればできるらしいがめんどくさそう）

MemberのIDを学籍にする

現状のIDはFaunaDBが勝手につけるIDなのだがそれを学籍番号に変更したい

やれるようになること

• 学籍番号で一意にメンバーを特定、編集できる
• 学籍でソートすることで学年順にできる

スタイル関係の値を定数化する

• 色
• フォントサイズ
• フォント(?)

必要なコンポーネントの列挙

詳しくはFigmaを見てね

• Logo
  • Propsで色を3色変えられる
  • Propsでサイズを変えられる
• Image
  • サイズを変更出来る
  • 四角、丸にできる
  • 上から任意の色をoverlay出来る
• EventItem
• Typography
  • タイプを指定するとフォントが変わる
  • サイズを指定出来る
• NavBar
• SearchBox
• TitleView
• MemberItemView
• AboutItem
• 各Content
  • 各コンテンツに必要なデータを取得してデータを下に流す

デプロイを自動化したい

したくない？

IconSetを導入する

FontAwesomeとかでいいかな？

いい感じのアニメーションをめっちゃつけたい

シュッと実装

各コンテンツのComponentsを作成

AboutComponentsを作成

Memberのitemに`object-fit: cover;` を追加する。

いいかんじにトリミングしてくれるやつ。

APIのcacheをvuexとかで管理したい

毎回叩くと遅いのでcacheする用にしたい

NavBarを作成