Skip to content

Commit d40768a

Browse files
david-fernandodavid-fernando
committed
Update README.md
1 parent 28abb7c commit d40768a

File tree

1 file changed

+190
-6
lines changed

1 file changed

+190
-6
lines changed

‎README.md

Lines changed: 190 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,202 @@
11
<p align="center">
22
<a href="" rel="noopener">
3-
<img width=200px height=128px src="https://images2.imgbox.com/a8/bb/ISkyh3WP_o.png" alt="Medium Posts Card"></a>
3+
<img width=200px height=128px src="https://images2.imgbox.com/aa/22/t57NWwys_o.jpg" alt="Medium Posts Card"></a>
44
</p>
55

66
<h3 align="center">Medium Posts Card</h3>
77

88
<div align="center">
9+
<p align="center">React Isomorphic library that show your Medium articles.
10+
<br>
11+
</p>
912

10-
🚧 Under development
11-
13+
[![CSR](https://img.shields.io/badge/Client%20Side%20Rendering-Supported-green)]() [![SSR](https://img.shields.io/badge/Server%20Side%20Rendering-Supported-green)]() [![Licence](https://img.shields.io/github/license/david-fernando/medium-posts-card)]()
1214
</div>
1315

1416
---
1517

16-
<p align="center">React component that show your Medium articles. Coming soon.
17-
<br>
18-
</p>
18+
## 📝 Table of Contents
19+
20+
- [About](#about)
21+
- [Install](#install)
22+
- [Components](#components)
23+
- [Server Side Rendering](#server_side_rendering)
24+
- [How to contribute](#how_to_contribute)
25+
- [Author](#authors)
26+
27+
## <span id="about">About </span>
28+
29+
Are you looking for a React library to display your medium posts that render both the client side and on the server side? So you are in the right place! **Medium Posts Card** get your medium articles, and displays them on your website through an easy to use component.
30+
Just download and use, as simple as that.
31+
32+
## <span id="install">Install</span>
33+
34+
Install this library with one of the commands below
35+
36+
```bash
37+
yarn add mediumpostscard
38+
39+
//or
40+
41+
npm install mediumpostscard
42+
```
43+
44+
## <span id="components">Components</span>
45+
46+
### Carousel
47+
48+
- <h4>Describe</h4>
49+
Shows a Carousel with your Medium articles
50+
51+
- <h4>Carousel example</h4>
52+
<img height="170" src="https://i.imgur.com/FmVwAJ5.png" alt="Medium Posts Card Carousel Preview"></a>
53+
54+
- <h4>Basic usage (with example)</h4>
55+
56+
```javascript
57+
import { Carousel } from 'mediumpostscard'
58+
59+
function Example(){
60+
return (
61+
<Carousel username="alex.streza" />
62+
)
63+
}
64+
65+
export default Example
66+
```
67+
68+
- <h4>Valid Props</h4>
69+
70+
| Prop name | Description | Type | Default |
71+
| ---------- | :-----------------------------------------------: | -----------: | ------------:|
72+
| usernane | Sets your Medium username | _String_ | _underfined_
73+
| dataMedium | Set data Medium (_only_ to Server Side Rendering) | _Object_ | _underfined_
74+
| options | Object with options | _Object_ | _Object_|
75+
76+
- <h4>Valid Options</h4>
77+
78+
| Option | Description | Type | Default |
79+
| -------------| :------------------------------------------------: | -----------: | ------------:|
80+
| borderRadius | Set if the card will have rounded edges | _Boolean_ | true
81+
| openInNewTab | Set if the link of article will openned in new tab | _Boolean_ | true
82+
| showTags | Define if the card will show article tags | _Boolean_ | false
83+
| showDate | Set if the card will show the date of the article | _Boolean_ | false
84+
| ssr | Set if the component should rendered on server | _Boolean_ | false|
85+
86+
### List
87+
88+
- <h4>Describe</h4>
89+
Shows a list with your Medium articles
90+
91+
- <h4>List example</h4>
92+
<img width="780" height="500" src="https://i.imgur.com/J11pgwP.png" alt="Medium Posts Card List Preview"></a>
93+
94+
- <h4>Basic usage (with example)</h4>
95+
96+
```javascript
97+
import { List } from 'mediumpostscard'
98+
99+
function Example(){
100+
return (
101+
<List username="alex.streza" />
102+
)
103+
}
104+
105+
export default Example
106+
```
107+
108+
- <h4>Valid Props</h4>
109+
110+
| Prop name | Description | Type | Default |
111+
| ---------- | :-----------------------------------------------: | -----------: | ------------:|
112+
| usernane | Sets your Medium username | _String_ | _underfined_
113+
| dataMedium | Set data Medium (_only_ to Server Side Rendering) | _Object_ | _underfined_
114+
| options | Object with options | _Object_ | _Object_|
115+
116+
- <h4>Valid Options</h4>
117+
118+
| Option | Description | Type | Default |
119+
| -------------| :------------------------------------------------: | -----------: | ------------:|
120+
| openInNewTab | Set if the link of article will openned in new tab | _Boolean_ | true
121+
| showTags | Define if the card will show article tags | _Boolean_ | true
122+
| showDate | Set if the card will show the date of the article | _Boolean_ | true
123+
| borderRadius | Set if the card will have rounded edges | _Boolean_ | false
124+
| ssr | Set if the component should rendered on server | _Boolean_ | false|
125+
126+
127+
## <span id="server_side_rendering">Server Side Rendering</span>
128+
129+
- <h4>Usage</h4>
130+
To make the component render the server do the prefetching:
131+
```javascript
132+
const data = fetchMedium('yourmediumusername')
133+
```
134+
Next define _ssr_ as true, according to the example
135+
```javascript
136+
<Carousel dataMedium={dataMedium} options={{ssr: true}} />
137+
```
138+
In the example above, I used the Carousel component, but you do the same with the List component.
139+
140+
Next I will show an example of how to make server side on Next.js
141+
142+
```javascript
143+
import Head from 'next/head'
144+
import { List, fetchMedium } from 'mediumpostscard'
145+
146+
export default function Home({dataMedium}) {
147+
return (
148+
<div>
149+
<Head>
150+
<title>Create Next App</title>
151+
<meta name="description" content="Generated by create next app" />
152+
<link rel="icon" href="/favicon.ico" />
153+
</Head>
154+
155+
<List dataMedium={dataMedium} options={{ssr: true}} />
156+
157+
</div>
158+
)
159+
}
160+
161+
export async function getStaticProps() {
162+
const dataMedium = await fetchMedium('alex.streza')
163+
return {
164+
props: {
165+
dataMedium
166+
}
167+
}
168+
}
169+
170+
```
171+
172+
173+
## <span id="how_to_contribute">How to contribute</span>
174+
175+
Fork this repository, make clone for your machine.
176+
177+
Install the dependencies with the command below:
178+
179+
```bash
180+
yarn install
181+
```
182+
183+
To view on storybook
184+
185+
```bash
186+
yarn storybook
187+
```
188+
189+
To build
190+
191+
```bash
192+
yarn build
193+
```
194+
To run the tests.
195+
196+
```bash
197+
yarn test
198+
```
199+
200+
## ✍️ <span id="authors">Author</span>
201+
202+
- [@david-fernando](https://github.com/david-fernando) - Idea & Initial work

0 commit comments

Comments
 (0)