-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
230 lines (223 loc) · 8.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Medium-Feed</title>
<meta name="author" content="Caden Sumner" />
<meta
name="description"
content="A simple & small medium-utility to get article objects for any Medium user, topic, or tag."
/>
<meta name="keywords" content="medium-feed,demo-site" />
<link
rel="stylesheet"
href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
</head>
<body>
<div id="information">
<div class="container container-medium">
<div class="col col-sm-6">
<div class="panel">
<div class="panel-head">
<h2 class="panel-title">📰 Medium-Feed 👀</h2>
</div>
<div class="panel-body">
<p>
A simple & small medium-utility to get article objects for any Medium user, topic, or tag.
<br />
Additionally, medium-feed allows for both synchronous & asynchronous usage,
as well as a CORS proxy for local development.
</p>
<p>
Minified size: <b>2KB</b>
<br/>
Dependencies: <b>0</b>
</p>
<p>
<b>CDN (latest):</b> <pre><code>https://unpkg.com/medium-feed@latest/dist/medium-feed.min.js</code></pre>
</p>
<p>
<em>(Still not in 1.0 release - 🐞 reports & 💬 feedback appreciated!)</em>
<br/>
<a href="#demo-articles">Jump straight to the demo ➡</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div id="usage">
<div class="container container-medium">
<div class="col col-12">
<div class="panel">
<div class="panel-head"><h2 class="panel-title">Usage</h2></div>
<div class="panel-body">
<h4>Initialize a feed:</h4>
<pre><code class="language-javascript">var mediumFeed = new MediumFeed();
mediumFeed.useProxy = true; //Optionally enable a CORS proxy for local development
var mediumFeed = new MediumFeed({useProxy: true}); //Enables a CORS proxy for localhost development via options object
</code></pre>
<br />
<h4>Get articles:</h4>
<pre><code class="language-javascript">mediumFeed.getUserFeed("caden"); //Pass username of the feed you want
mediumFeed.getTopicFeed("technology"); //Pass topic (see: https://medium.com/topics)
mediumFeed.getTagFeed("reactjs"); //Pass a specific tag</code></pre>
<br />
<h4>Asynchronous:</h4>
<pre><code class="language-javascript">function alertCount(articles){alert(articles.length)} // function to print # of articles returned
mediumFeed.getUserFeed("caden", alertCount); //Pass a callback as second param</code></pre>
<br />
<h4>MediumArticle:</h4>
The MediumFeed functions return arrays of "MediumArticle" objects
which contain the following (if available):
<pre><code class="language-javascript">class MediumArticle {
title //String
link //String
creator //String
pubDate //Date
content //String
categories //Array of Strings
img // Article image
}</code></pre>
</div>
</div>
</div>
<div id="demo">
<div class="container container-medium">
<div class="col col-12">
<div class="panel">
<div class="panel-head">
<h2 class="panel-title">Demo & Final Notes</h2>
</div>
<div class="panel-body">
<p>Please note: medium-feed makes <b>no</b> assumptions on your styling and therefore only returns what the Medium api gives us.
This gives you unlimited freedom to how you display or integrate articles from any Medium source.
However... Medium does return some articles with styling. You can attempt to override their styles using the following css attributes
but there is <em>no guarantee</em> that these will be stable or will not change in the future.
</p>
<pre><code class="language-css">/* the containing div for medium-feed-snippet & medium-feed-link */
.medium-feed-item{}
/* the image (often feature image) */
.medium-feed-image{}
/* the snippet text of the article */
.medium-feed-snippet{}
/* a link to continue reading on Medium */
.medium-feed-link{}
</code></pre>
<br/>
<p>Some final notes: getUserFeed() returns more 'content' (potentially the full article)
than topics/tags, and returns HTML without the Medium css mentioned above.
<br/>
I recommend truncating the returned content if you just want a 'snippet', and applying your own HTML-element based css as needed.</p>
<br/>
<p>Below is the <b>topic</b> feed for 'technology' rendered with simple styling.</p>
</div>
</div>
<br/>
<hr/>
<br/>
<input id="tag-input" type="text" placeholder="Enter a tag" />
<button class="button" onClick="refreshArticles()">Refresh Articles</button>
<br/>
</div>
<div id="demo-articles" class="container container-small"></div>
</div>
</div>
<div class="container">
<div class="col col-sm-12 coffee">
<a href="https://www.buymeacoffee.com/caden" target="_blank"
><img src="https://i.imgur.com/I80eQwg.png"
/></a>
</div>
</div>
</body>
<script type="module">
import MediumFeed from 'https://unpkg.com/medium-feed@latest/dist/medium-feed.min.js';
window.MediumFeed = MediumFeed;
</script>
<script>
let _mediumFeed = null;
function refreshArticles() {
document.getElementById('demo-articles').innerHTML = '';
let tag = document.getElementById('tag-input').value;
if(tag) {
_mediumFeed.getTagFeed(tag, formatArticles);
} else {
_mediumFeed.getTopicFeed('technology', formatArticles);
}
}
document.onreadystatechange = function () {
if (document.readyState == "complete") {
_mediumFeed = new MediumFeed({ useProxy: true });
refreshArticles();
}
}
function formatArticles(a) {
a.forEach(article => {
let n = document.createElement('div');
let categories = document.createElement('ul');
categories.classList.add('tags')
article.categories.forEach(category => {
let tag = document.createElement('li');
tag.classList.add('tag');
tag.classList.add('tag-rounded');
tag.classList.add('tag-blue');
tag.innerHTML = category
categories.appendChild(tag)
})
n.innerHTML = `
<div class="panel">
<div class="panel-head">
<h2 class="panel-title">${article.title}</h2>
</div>
<div class="panel-body">
<p class="article">${article.content}</p>
<a href="${article.link}" target="_blank" class="read-medium button button-primary">👀 Read on Medium 📃</a>
<ul class="tags">
${categories.innerHTML}
</ul>
</div>
</div>
`;
document.getElementById('demo-articles').appendChild(n);
})
}
</script>
<style>
/* Begin Medium-Feed Demo Styling */
.medium-feed-image img {
height: auto;
width: 100%;
max-height: 300px;
object-fit: cover;
}
.medium-feed-link {
display: none;
}
.read-medium {
display: block;
text-align: center;
}
#demo-articles div .panel .panel-body {
padding-top: 0;
margin-top: 0;
}
#demo-articles div .panel .panel-head {
padding-bottom: 0;
margin-bottom: 0;
}
/* End Medium-Feed Demo Styling */
.coffee {
text-align: center;
margin: 0 auto;
}
</style>
</html>