oucrc-org/web-2021

OUCRC公式HP（令和3年度〜）

web-2021's Issues

記事ページ OGP画像

並び替え

部員紹介のところで、年度の若い順に並べる必要がある

Google サチコ

nav 展開時 調整

フッター作成

/components/Footer.vueに書き込み
CSSは<style>タグ内に（できるだけTailwind CSSのクラスで）

ランディング 電算研の部室

記事一覧ページの作成

axiosで記事一覧を叩いてきて表示する

axios
  .get('https://oucrc.microcms.io/api/v1/article', {
    headers: {
    'X-API-KEY': '6d1b79a2-58de-49aa-bb5c-d2828e0d7d47'
    }
  })
  .then(response => {
    this.json = response.data
  });

ランディングページのお知らせが3件以下にならない

すぐ終わりそうなのでこっちで修正する
一応クエリの可読性を上げる書き方も置いとく
なお書き方はここ
https://document.microcms.io/content-api/get-list-contents

axios
  .get('https://oucrc.microcms.io/api/v1/article?' + Object.entries({
    limit: 9,
    offset: (currentPageNum - 1) * 9,
    fields: 'id,date,createdAt,title,series,image,body', // コンマ区切り 
    orders: '-date,-createdAt',
    filters: 'date[less_than]' + currentTime
  }).map(([key, value]) => key + '=' + value).join('&'), { // ここでクエリ変数とパラメータを=でつなげ、それを更に&でつなぐ
    headers: {
      "X-API-KEY": ...,
    },
  }).then(...)

これは以下と同値

axios
  .get('https://oucrc.microcms.io/api/v1/article?'
    + 'limit=9'
    + 'offset=' + (currentPageNum - 1) * 9
    + 'fields=id,date,createdAt,title,series,image,body'
    + 'orders=-date,-createdAt'
    + 'filters=date[less_than]' + currentTime,
    { headers: { "X-API-KEY": ... } }
).then(...)

article->articles

/article?tag=programming のリンク欲しい

1行コードブロック デザイン

記事ページの作成

テストできないと困るので早めでお願いします＞＜

axiosでAPIを叩いて記事データを持ってきてください
ルーティングはわからんので任せますが、URLは
/article/記事名or記事ID
などを想定？

axios
  .get('https://oucrc.microcms.io/api/v1/article', {
    headers: {
    'X-API-KEY': '6d1b79a2-58de-49aa-bb5c-d2828e0d7d47'
    }
  })
  .then(response => {
    this.json = response.data
  });

[記事検索実装後]各記事からシリーズ・カテゴリ一覧へのリンク

検索ページへのリンクを張って終わり！

記事サイドバー メンバーへのリンク

ページ共通の枠組み作成

検索アイコンを削除

ランディング お問い合わせ

ヘッダー作成

/components/Header.vueに書き込み
CSSは<style>タグ内に

404ページの作成

404ページに誘導を付けて直帰率を下げよう
routingの仕方は知らん

SEO（ちょっとだけ）

部員一覧 画像横長 修正

Header 影

opacity 0.9

ランディング 上部のスライドショー

入部お問合せフォーム

正直これはあとでもいいんじゃないかなと思ってます（申込みが4/1からなので）

Google Analytics 登録

部員一覧ページ メンバーリスト完成後 axios実装

Google Spreadsheet -> GAS経由で部員一覧データを読み込み
Slack APIからアイコン読み込み

もちろん方法が違ってもOKです

メンバー 1枚まで自己紹介画像

検索機能の実装

検索機能をつける

NuxtLinkで飛んだ後、\<pre\> → \<code\> 内がコードブロックの表示にならない

検索ページのデザイン

デザインをする

MathJaxの導入

記事中の数式を表示したい

webpを使用

カテゴリー＆シリーズ ...

部員詳細ページの作成

お知らせ詳細ページの作成

部の紹介ページ

ランディングの「部室に何があるの？」のボタンの遷移先の作成

これって新しいページを作って表示する感じであってますか？

カテゴリー＆シリーズ 選択で検索開始

ランディング 電子計算機研究会とは

お知らせ一覧ページの作成

記事詳細ページのアバターの画像の修正

URL等動作はしているが形がいろいろおかしいので修正お願いします

ランディングページの作成

/pages/index.vueに直で書き込んでよい
再利用しそうなものは/componentsにTekisetsunaNamae.vueファイルを作成し、<TekisetsunaNamae />タグを配置して読み込み

記事詳細ページ タグ表示

部員の部分

４年度の部分までは普通に表示
あとは折り畳み式にする＜－長期的なissue

（ユーザーAPI完成後）記事詳細 サイドバー axios

記事詳細画面 サイドバー

公開日時の問題

CSRにする場合、クライアントの時間を変えると未来の記事が見れてしまう
静的化したときに記事ページが生成されないなら問題なし(問題なければクローズしておいてください)

ナビゲーション スマホ時の対応

ランディング お知らせ

部員一覧、表示

年度入部で表示
アイコンは各自提出
４回生以降の人たちはslackから探して手動で保存
ないやつはデフォルトアイコンでGO

article リンクから飛んできた時 checkbox active