Giter Club home page Giter Club logo

qiita-widget's Introduction

Qiita Widget

Qiitaの新着投稿をウェブサイトに埋め込むことができるウィジェットです。

Qiita Widgetのデモ

ウィジェットの設置方法

下記のコードのsuinの部分を表示したいユーザ名に置換えてお使いください。

<a href="https://qiita.com/suin" data-qiita-widget data-username="suin">suinのQiita投稿</a>
<script src="https://qiita-widget.suin.io/widget.js" defer></script>

ウィジェットのカスタマイズ

data-*属性を設定することで、ウィジェットの表示をカスタマイズできます。

コンテンツのカスタマイズ

表示するコンテンツは「ユーザ投稿」「タグへの投稿」「キーワード検索結果」のいずれかを選択することができます。

属性 説明
data-username="ユーザ名" ユーザ名: string ユーザの新着投稿が表示される
data-tag="タグ" タグ: string タグへの新着投稿が表示される
data-search="キーワード" キーワード: string 検索キーワードに合致する新着投稿が表示される

見た目のカスタマイズ

ウィジェットの大きさや表示件数といった見た目をカスタマイズすることができます。

属性 説明
data-items 表示件数: int 表示する投稿数
data-width 幅: string ウィジェットの幅。値はCSSのwidthで使用可能なもの。デフォルト: 100%
data-height 高さ: string ウィジェットの高さ。値はCSSのheightで使用可能なもの。デフォルト: 400px
data-hide-header Qiitaのロゴを非表示にする
data-hide-footer Qiita Widgetへのリンクが非表示になる

開発

git clone [email protected]:suin/qiita-widget.git
cd qiita-widget
npm install
open demo.html
npm run watch

ビルド

npm run build

License

MIT License

qiita-widget's People

Contributors

suin avatar yuku avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

qiita-widget's Issues

cors.jsのエラー処理がおかしい

Qiita APIの利用制限を超過しているとき、以下のようなレスポンスが返ってきます。

{"message":"Rate limit exceeded","type":"rate_limit_exceeded"}

cors.jsファイル内で以下のような記述がありますが、上記の場合result.errorは存在しないので、
コンソールにUncaught undefinedというエラーメッセージが表示されます。

const result = JSON.parse(request.response);
if (request.status < 200 || request.status >= 300) {
  throw result.error;
}

こんな感じにするといいのではないかと思います。

const result = JSON.parse(request.response);
if (request.status < 200 || request.status >= 300) {
  throw new Error(result.error || 'response error');
}

投稿日時を「○時間前」といった相対表示にする

Qiita API v1が廃止されたためv2に急遽対応したが、v1ではサーバ側で投稿日の相対的時間を計算した「created_at_in_words」があったがこれがなくなってしまった。

v2ではクライアントサイドでこれを計算しなければならない。

TODO

  • JavaScriptで「○時間前」「○日前」を計算してくれるライブラリを選定する
    • \オススメがあれば教えてください!/
  • それをQiita Widgetに組み込む

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.