Naughty Pinching Mannequins
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

qiita-widget

0.4.2 • Public • Published

hokey/qiita-widget-js

npm version build state Dependency Status

Qiita API V2に対応した、Qiitaのユーザー情報を表示するTypeScript製ブログウィジェットです。 コピペで簡単に導入できるiframe版と、柔軟にカスタマイズできるライブラリ版があります。

デモサイト

npm/webpackでの利用方法

npm i qiita-widget --save-dev
 
import QiitaWidget from 'qiita-widget';
 
const container = document.querySelector('.js-qiita-widget');
new QiitaWidget(container, {
  subject: '人気の記事',      // 見出し
  userId: 'qiita',          // QiitaのユーザーID
  useShuffle: false,        // trueで表示記事をランダムに選択する
  sortByLike: true,         // trueで投稿を「いいね」数順でソートする
  useTransition: true,      // trueでロード直後のアニメーションを表示
  filterByLikesFrom: 0,     // 表示する記事の最低いいね数(0でフィルタ無効)
  maxToShow: 5,             // 最終的に表示する記事の件数
  cacheAge: 15 * 60 * 1000, // JSONレスポンスのキャッシュ有効時間(ミリ秒)
  perPage: 100,             // 一度のリクエストで取得する記事数(1〜100)
  maxRequest: 10            // perPage * maxRequest = 取得を試みる最大記事件数 
}).init();
 

開発ビルド

git clone https://github.com/hokkey/qiita-widget-js.git
cd qiita-widget-js
npm i
 
# プロダクションビルド 
npm run build
 
# ファイル監視 + 開発サーバ立ち上げ 
npm run serve

仕様

  • IE11を含むすべてのIEに非対応です。
  • 公開されている投稿の「いいね」からContributionを算出しているため、Qiitaのプロフィールページの数値と完全に一致しないことがあります。

ToDo

  • エラー処理
  • ユニットテストの追加
  • ドキュメントの拡充
  • デザインの拡充

Changelog

  • 0.4.2
    • tsconfig.jsonでstrictNullChecksを有効化
    • axios-cache-adapterを2.0.0へ更新
    • localforageを1.5.3へ更新
  • 0.4.1
    • axiosをdependenciesからdevDependenciesへ移動
  • 0.4.0
    • いいね数で表示記事をフィルタできるパラメータfilterByLikesFromを追加
  • 0.3.1
    • ライブラリ版がimportできなかった問題を修正
  • 0.3.0
    • 依存ライブラリをバンドルした配布用ファイルを追加
  • 0.2.1
    • ビルド設定の修正
  • 0.2.0
    • 同じページ内へ複数のインスタンスを作成できるように修正
  • 0.1.0
    • NPMへの公開準備
    • コードレビュー指摘箇所の修正

Author

Acknowledgements

qiita-widget-js uses following libraries:

install

npm i qiita-widget

Downloadsweekly downloads

12

version

0.4.2

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability