Content-Length: 650763 | pFad | http://github.com/MicheleBertoli/css-in-js/commit/d42b4f703cd06b69187171ac8af16ff43b6c239a

C6 add @thi.ng/hiccup-css, fix npm stats fetching (revised) (#93) · MicheleBertoli/css-in-js@d42b4f7 · GitHub
Skip to content

Commit d42b4f7

Browse files
Karsten SchmidtMicheleBertoli
Karsten Schmidt
authored and
MicheleBertoli
committed
add @thi.ng/hiccup-css, fix npm stats fetching (revised) (#93)
* feat: add @thi.ng/hiccup-css example * fix: update NPM registry stats fetching - support scoped packages (see npm/registry#45) - switch to monthly download stats due to NPM returning zero for weekly endpoints * chore: update re-generated data.json & readme
1 parent c9c1a0c commit d42b4f7

File tree

9 files changed

+339
-203
lines changed

9 files changed

+339
-203
lines changed

‎README.md

Lines changed: 63 additions & 62 deletions
Large diffs are not rendered by default.

‎ReadmeSrc/Rows.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,14 +71,14 @@ const stats = obj => {
7171
alt: 'open / closed issues'
7272
})
7373

74-
const lastWeekDl = divWithIcon({
74+
const lastMonthDl = divWithIcon({
7575
link: `https://www.npmjs.com/package/${npm}`,
7676
icon: 'download',
7777
value: npmData.downloads,
78-
alt: 'weekly downloads'
78+
alt: 'monthly downloads'
7979
})
8080

81-
return spacer + issues + lastWeekDl
81+
return spacer + issues + lastMonthDl
8282
})
8383
.join('')
8484
}

‎ReadmeSrc/scripts/fetchData.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,18 @@ async function getNpmStats(npm) {
3232
}
3333
}
3434

35+
// don't use "latest" API endpoint due to failure w/ scoped packages
36+
// https://github.com/npm/registry/issues/45
3537
const getNpmData = npm =>
36-
axios.get(`https://registry.npmjs.org/${npm}/latest`).then(response => ({
37-
version: response.data.version
38+
axios.get(`https://registry.npmjs.org/${npm}`).then(response => ({
39+
version: response.data["dist-tags"].latest
3840
}))
3941

42+
// using monthly DL stats since npm API seems to return "0" for most weekly stats
4043
const getNpmDownloads = npm =>
4144
axios
42-
.get(`https://api.npmjs.org/downloads/point/last-week/${npm}`)
43-
.then(response => ({downloads: response.data.downloads}))
45+
.get(`https://api.npmjs.org/downloads/point/last-month/${npm}`)
46+
.then(response => ({ downloads: response.data.downloads }))
4447

4548
const getIssueCount = (github, state) =>
4649
axios
@@ -56,7 +59,7 @@ const getGithubRepoStats = github =>
5659

5760
async function getGithubStats(github) {
5861
const repoData = await getGithubRepoStats(github)
59-
const {open_issues, stargazers_count} = repoData
62+
const { open_issues, stargazers_count } = repoData
6063
const closed_issues = await getIssueCount(github, 'closed')
6164
return {
6265
closed_issues,

‎hiccup-css/button.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import styles from './styles';
3+
4+
const Button = React.createClass({
5+
render() {
6+
return (
7+
<div className={styles.container}>
8+
<button className={styles.button}>Click me!</button>
9+
</div>
10+
);
11+
}
12+
});
13+
14+
React.render(<Button />, document.getElementById('content'));

‎hiccup-css/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>@thi.ng/hiccup-css - CSS in JS</title>
6+
</head>
7+
8+
<body>
9+
<div id="content"></div>
10+
<script src="bundle.js"></script>
11+
</body>
12+
13+
</html>

‎hiccup-css/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "hiccup-css-css-in-js",
3+
"version": "1.0.0",
4+
"description": "@thi.ng/hiccup-css example",
5+
"scripts": {
6+
"build": "webpack ./button.js bundle.js"
7+
},
8+
"author": "Karsten Schmidt",
9+
"license": "MIT",
10+
"dependencies": {
11+
"@thi.ng/hiccup-css": "^0.2.0",
12+
"react": "^0.13.3"
13+
},
14+
"devDependencies": {
15+
"babel-loader": "^5.1.3",
16+
"webpack": "^1.9.9"
17+
}
18+
}

‎hiccup-css/styles.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { css } from "@thi.ng/hiccup-css/css";
2+
import { at_media } from "@thi.ng/hiccup-css/media";
3+
import { injectStyleSheet } from "@thi.ng/hiccup-css/inject";
4+
import { px } from "@thi.ng/hiccup-css/units";
5+
6+
injectStyleSheet(
7+
css(
8+
[
9+
[".container",
10+
{
11+
"text-align": "center"
12+
}],
13+
[".button",
14+
{
15+
"background-color": "#ff0000",
16+
width: px(320),
17+
padding: px(20),
18+
"border-radius": px(5),
19+
border: "none",
20+
outline: "none",
21+
},
22+
[":hover",
23+
{
24+
color: "#fff",
25+
}],
26+
[":active",
27+
{
28+
position: "relative",
29+
top: px(2),
30+
}]],
31+
at_media(
32+
{ screen: true, "max-width": px(640) },
33+
[
34+
".button", {
35+
width: px(160)
36+
}
37+
]
38+
)
39+
],
40+
{ scope: "_foo" }
41+
)
42+
);
43+
44+
export default {
45+
button: "button_foo",
46+
container: "container_foo",
47+
};

‎hiccup-css/webpack.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
module: {
3+
loaders: [{
4+
test: /\.jsx?$/,
5+
exclude: /(node_modules|bower_components)/,
6+
loader: 'babel?stage=0'
7+
}]
8+
}
9+
}

0 commit comments

Comments
 (0)








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/MicheleBertoli/css-in-js/commit/d42b4f703cd06b69187171ac8af16ff43b6c239a

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy