-
Notifications
You must be signed in to change notification settings - Fork 13
/
custom-reading-time.html
71 lines (57 loc) · 2.72 KB
/
custom-reading-time.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
<html>
<head>
<script src="https://unpkg.com/@tryghost/content-api@latest/umd/content-api.min.js"></script>
<script src="https://unpkg.com/@tryghost/[email protected]/umd/helpers.min.js"></script>
<script>
const api = new GhostContentAPI({
url: 'https://demo.ghost.io',
key: '22444f78447824223cefc48062',
version: "v3"
});
const {readingTime} = GhostHelpers;
// Example 1: Calculate reading time for a single post page
// Step 1: grab the slug for the post
// This might be grabbed from a html data element on the page, or from the URL e.g. window.location.pathname.match(/\/([^\/]+)\/$/)[1];
let postSlug = 'publishing-options';
// Step 2: Make an API request to get the data we need
api.posts.read({slug: postSlug, fields: 'html,feature_image'})
.then((post) => {
// Step 3: Manipulate the HTML and remove any content you don't want included
post.html = post.html.substring(0, post.html.length - 1000);
// Step 4: Generate the reading time string passing our modified post to the readingTime helper
let customTime = readingTime(post);
// Step 5: Insert the string into the page
document.querySelector('#single-result').textContent = customTime;
})
.catch((err) => {
console.error(err);
});
// Example 2: Calculate reading time for all posts on an index page
// Step 1: grab the slugs for all posts in the page that have reading time
// Something like document.querySelectorAll('.post-card').forEach(link => { console.log(link.href.match(/\/([^\/]*)\/$/)[1]) });
let postSlugs = ['welcome','publishing-options','admin-settings'];
// Step 2: Make an API request to get the data we need
// We can fetch all posts at once this way
api.posts.browse({filter: `slug:[${postSlugs.join(',')}]`, fields: 'title,html,feature_image'})
.then((posts) => {
posts.forEach(post => {
// Step 3: Manipulate the HTML and remove any content you don't want included
post.html = post.html.substring(0, post.html.length - 1000);
// Step 4: Generate the reading time string passing our modified post to the readingTime helper
let customTime = readingTime(post);
// Step 5: Insert the string into the page
document.querySelector('#multi-result').innerHTML += `${post.title} - ${customTime} <br>`;
});
})
.catch((err) => {
console.error(err);
});
</script>
</head>
<body>
<h2>Single Post - Publishing Options</h2>
<div id="single-result"></div>
<h2>Multi Post</h2>
<div id="multi-result"></div>
</body>
</html>