diff --git a/src/pages/Github.js b/src/pages/Github.js index 084fc71b..473024e1 100644 --- a/src/pages/Github.js +++ b/src/pages/Github.js @@ -9,13 +9,19 @@ import optionLang from '../source/trending.json'; const githublist = localStorage.getItem('github-list'); +const starSVG = ( + + + +); + export default class Github extends Component { - static typeName = 'trending' + static typeName = 'trending'; constructor(props) { super(props); this.state = { loading: false, - content: githublist, + content: githublist ? JSON.parse(githublist) : null, option: [ { label: '今天', @@ -49,8 +55,11 @@ export default class Github extends Component { return url; } getTrending(type) { - const localContent = localStorage.getItem('github-list'); + let localContent = localStorage.getItem('github-list'); if (!localContent) type = 'select'; // 判断是否直接选择 + else { + localContent = JSON.parse(localContent); + } this.setState({ loading: true }); const getDate = type === 'select' ? fetchTimely(this.getURL()) : fetchInterval(this.getURL(), 3, 'github-trending'); getDate.then((response) => { @@ -64,23 +73,36 @@ export default class Github extends Component { } return node; }); + const resultData = []; const $ = cheerio.load(response); - // 清除头像，避免被和谐 - $('.f6 .mr-3').not('.mr-3:first-child').empty(); - $('.starring-container').empty(); - const _html = $('div.explore-content').html(); - if (!_html) return; - localStorage.setItem('github-list', _html); + $('.Box-row').each(function (idx, item) { + // 不需要头像，避免被和谐 + const full_name = $(item).find('h1 a').text().replace(/(\n|\s)/g, ''); + const href = $(item).find('h1 a').attr('href').replace(/(\n|\s)/g, ''); + const language = $(item).find('span[itemprop=programmingLanguage]').text().replace(/(\n|\s)/g, ''); + const languageColor = $(item).find('span.repo-language-color'); + const stargazers_count = $(item).find('svg[aria-label="star"].octicon.octicon-star').parent().text().replace(/(\n|\s|,)/g, ''); + const forked = $(item).find('svg[aria-label="fork"].octicon.octicon-repo-forked').parent().text().replace(/(\n|\s|,)/g, ''); + const todayStar = $(item).find('.float-sm-right svg.octicon.octicon-star').parent().text().replace(/(\n|,)/g, '').trim(); + const description = $(item).find('p.text-gray').text().replace(/(\n)/g, '').trim(); + let color = ''; + if (language && languageColor && languageColor.css) { + color = languageColor.css('background-color'); + } + resultData.push({ full_name, language, color, description, forked, stargazers_count: Number(stargazers_count), todayStar, html_url: href, rank: idx + 1 }); + }); + if (!resultData) return; + localStorage.setItem('github-list', JSON.stringify(resultData)); if (!this.mounted) return; this.setState({ loading: false, - content: _html, + content: resultData, }); - }).catch(() => { + }).catch((err) => { this.setState({ loading: false }); if (!this.mounted) return; this.setState({ - content: githublist || '请求错误，请检查网路，或者重新刷新请求数据！', + content: this.state.content || '请求错误，请检查网路，或者重新刷新请求数据！', }); }); } @@ -98,6 +120,7 @@ export default class Github extends Component { }); } render() { + const { content } = this.state; return (
@@ -115,7 +138,40 @@ export default class Github extends Component { />
-
+
+ {!content ? ( +
Loading...
+ ) : ( + + )} +
{githublist && }
); diff --git a/src/pages/Github.module.less b/src/pages/Github.module.less index 15ed9a94..9aaa05f5 100644 --- a/src/pages/Github.module.less +++ b/src/pages/Github.module.less @@ -30,26 +30,31 @@ } .list { - padding: 0 10px; + ul { + box-sizing: border-box; + display: flex; + flex-direction: row; + flex-wrap: wrap; + } a { text-decoration: none; } - ol, li, h3 { + li, h3 { margin: 0; padding: 0; } - ol, li { - list-style: none; - } li { + list-style: none; + min-width: 0; + box-sizing: border-box; background-color: #fff; + border-radius: 3px; + transition: all .3s; margin-bottom: 10px; + padding: 10px; + flex: calc(~"50% - 10px"); margin-left: 5px; margin-right: 5px; - padding: 10px; - border-radius: 3px; - transition: all .3s; - width: calc(~"50% - 10px"); display: inline-block; &:hover { background-color: #f9f9f9; @@ -65,61 +70,33 @@ text-decoration: underline; } } - } - :global { - .repo-list { - display: flex; - flex-wrap: wrap; - font-size: 12px; - } - .repo-language-color { - position: relative; - top: 1px; - display: inline-block; - width: 12px; - height: 12px; - border-radius: 50%; - } - .avatar { - display: inline-block; - overflow: hidden; - line-height: 1; - vertical-align: middle; - border-radius: 3px; - border-style: none; - height: 12px; - width: 12px; - } - .mr-3 { - margin-right: 10px; - } - .float-sm-right { - float: right; + .description { + padding: 8px 0; + line-height: 14px; + min-height: 28px; } - .octicon { - vertical-align: text-bottom; + .star, .language, .forked, .todayStar { display: inline-block; - fill: currentColor; - } - .d-inline-block { - display: inline-block; - } - .float-right { - float: right; - a { - color: #0366d6; + margin-right: 8px!important; + svg { + vertical-align: middle; + margin-right: 5px; + height: 14px; + margin-top: -3px; } } - .text-gray { - color: #586069; - a:first-child { - margin-right: 10px; - } - span + a, a + a { - margin-right: 10px; - } - a { - color: #586069; + .star { + svg {} + } + .language { + span { + border-radius: 50%; + display: inline-block; + height: 12px; + position: relative; + top: 1px; + width: 12px; + margin-right: 5px; } } }