Skip to content

Commit d2a549d

Browse files
bdbchbdbch
committed
Initial Commit
0 parents  commit d2a549d

17 files changed

Lines changed: 464 additions & 0 deletions

‎.editorconfig‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[*]
2+
charset = utf-8
3+
end_of_line = lf
4+
indent_size = 2
5+
indent_style = space
6+
insert_final_newline = true
7+
root = true
8+
trim_trailing_whitespace = true

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
*.log
3+
dist
4+
.cache

‎LICENSE‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) 2018-present Dominik Biedebach
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# `@d2k/react-devto`
2+
3+
> React hooks for Dev.to integrations
4+
5+
> You'll need to install `react`, `react-dom`, etc at `^16.8.4`
6+
7+
## Install
8+
9+
```sh
10+
npm i @d2k/react-devto --save
11+
```

‎docs/app.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
*,
2+
*:before,
3+
*:after {
4+
box-sizing: border-box;
5+
}
6+
7+
html,
8+
body {
9+
margin: 0;
10+
}
11+
12+
body {
13+
background: #f3f3f3;
14+
height: 100%;
15+
}
16+
17+
:root {
18+
background: #f3f3f3;
19+
font-family: sans-serif;
20+
line-height: 1.45;
21+
}
22+
23+
:root.has-darkmode {
24+
filter: invert(1);
25+
}
26+
27+
:root.has-darkmode img {
28+
filter: invert(1);
29+
}

‎docs/components/Article.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.Article {
2+
background: #fff;
3+
box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
4+
color: inherit;
5+
display: block;
6+
text-decoration: none;
7+
transition: box-shadow .2s, transform .2s;
8+
width: 100%;
9+
}
10+
11+
:root.has-darkmode .Article {
12+
box-shadow: 0 12px 32px rgba(255, 255, 255, .1)
13+
}
14+
15+
.Article:hover {
16+
box-shadow: 0 16px 48px rgba(0, 0, 0, .13);
17+
position: relative;
18+
transform: translateY(2px);
19+
z-index: 2;
20+
}
21+
22+
:root.has-darkmode .Article:hover {
23+
box-shadow: 0 16px 48px rgba(255, 255, 255, .13)
24+
}
25+
26+
.Article--CoverImage {
27+
max-width: 100%;
28+
}
29+
30+
.Article--Content {
31+
padding: 32px;
32+
}

‎docs/components/Article.jsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from "react";
2+
import "./Article.css";
3+
4+
const Article = props => {
5+
if (!props.article) return null;
6+
7+
const date = new Date(props.article.published_at);
8+
const dateString = date.toLocaleDateString();
9+
const timeString = date.toLocaleTimeString();
10+
11+
return (
12+
<a
13+
class="Article"
14+
href={props.article.canonical_url}
15+
target="_blank"
16+
rel="nofollow noreferrer"
17+
>
18+
{props.article.cover_image && (
19+
<img class="Article--CoverImage" src={props.article.cover_image} />
20+
)}
21+
<div class="Article--Content">
22+
{props.article.tag_list && props.article.tag_list.length && (
23+
<div class="Article--Tags">
24+
{props.article.tag_list.map(tag => (
25+
<div class="Article--Tag">{tag}</div>
26+
))}
27+
</div>
28+
)}
29+
<h1 class="Article--Title">{props.article.title}</h1>
30+
{props.article.description && (
31+
<div class="Article--Description">{props.article.description}</div>
32+
)}
33+
<div class="Article--PublishDate">
34+
{dateString} - {timeString}
35+
</div>
36+
<div class="Article--Comments">
37+
{props.article.comments_count} comments
38+
</div>
39+
<div class="Article--Stats">
40+
{props.article.positive_reactions_count} reactions
41+
</div>
42+
</div>
43+
</a>
44+
);
45+
};
46+
47+
export default Article;

‎docs/components/ArticleList.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.ArticleList {
2+
background: #fff;
3+
margin: 0 auto;
4+
max-width: 800px;
5+
padding: 64px 0;
6+
}
7+
8+
.ArticleList--Header {
9+
background: #fff;
10+
left: 0;
11+
position: sticky;
12+
top: 0;
13+
padding: 32px 16px;
14+
box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
15+
z-index: 10;
16+
}
17+
18+
:root.has-darkmode .ArticleList--Header {
19+
box-shadow: 0 4px 4px rgba(255, 255, 255, .1)
20+
}
21+
22+
.ArticleList--Pagination {
23+
background: #fff;
24+
bottom: 0;
25+
box-shadow: 0 -4px 4px rgba(0, 0, 0, .1);
26+
left: 0;
27+
padding: 16px;
28+
position: sticky;
29+
z-index: 10;
30+
}
31+
32+
:root.has-darkmode .ArticleList--Pagination {
33+
box-shadow: 0 -4px 4px rgba(255, 255, 255, .1)
34+
}
35+
36+
.ArticleList--Item {
37+
margin: 24px 0;
38+
}

‎docs/components/ArticleList.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React, { useState, useCallback } from "react";
2+
import { useArticles } from "../../src";
3+
import Article from "./Article";
4+
import "./ArticleList.css";
5+
6+
const ArticleList = () => {
7+
const [page, setPage] = useState(1);
8+
const [tag, setTag] = useState(null);
9+
const [usernameValue, setUsernameValue] = useState("");
10+
const [username, setUsername] = useState("");
11+
const { articles, loading, error } = useArticles(page, tag, username);
12+
13+
const updateUsername = useCallback(e => {
14+
e.preventDefault();
15+
setPage(1);
16+
setTag(null);
17+
setUsername(usernameValue);
18+
});
19+
20+
return (
21+
<div className="ArticleList">
22+
<div className="ArticleList--Header">
23+
<form onSubmit={updateUsername}>
24+
<input
25+
type="text"
26+
placeholder="Search articles from users"
27+
onChange={e => setUsernameValue(e.target.value)}
28+
value={usernameValue}
29+
/>
30+
</form>
31+
</div>
32+
<div class="ArticleList--List">
33+
{articles.map(article => (
34+
<div class="ArticleList--Item" key={article.id}>
35+
<Article article={article} />
36+
</div>
37+
))}
38+
</div>
39+
<div className="ArticleList--Pagination">
40+
<button type="button" onClick={() => setPage(page - 1)}>
41+
Previous Page
42+
</button>
43+
<button type="button" onClick={() => setPage(page + 1)}>
44+
Next Page
45+
</button>
46+
</div>
47+
</div>
48+
);
49+
};
50+
51+
export default ArticleList;

‎docs/example.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 { render } from "react-dom";
3+
import ArticleList from "./components/ArticleList";
4+
import "./app.css";
5+
6+
function App() {
7+
return (
8+
<div>
9+
<ArticleList />
10+
</div>
11+
);
12+
}
13+
14+
render(<App />, window.root);

0 commit comments

Comments
 (0)