|
| 1 | +<html> |
| 2 | + |
| 3 | +<head> |
| 4 | +<script src="https://unpkg.com/@tryghost/content-api@latest/umd/content-api.min.js"></script> |
| 5 | +<script src=" https://unpkg.com/@tryghost/[email protected]/umd/helpers.min.js" ></script> |
| 6 | +<script> |
| 7 | + const api = new GhostContentAPI({ |
| 8 | + url: 'https://demo.ghost.io', |
| 9 | + key: '22444f78447824223cefc48062', |
| 10 | + version: "v3" |
| 11 | + }); |
| 12 | + |
| 13 | + const {readingTime} = GhostHelpers; |
| 14 | + |
| 15 | + // Example 1: Calculate reading time for a single post page |
| 16 | + |
| 17 | + // Step 1: grab the slug for the post |
| 18 | + // This might be grabbed from a html data element on the page, or from the URL e.g. window.location.pathname.match(/\/([^\/]+)\/$/)[1]; |
| 19 | + let postSlug = 'publishing-options'; |
| 20 | + |
| 21 | + // Step 2: Make an API request to get the data we need |
| 22 | + api.posts.read({slug: postSlug, fields: 'html,feature_image'}) |
| 23 | + .then((post) => { |
| 24 | + // Step 3: Manipulate the HTML and remove any content you don't want included |
| 25 | + post.html = post.html.substring(0, post.html.length - 1000); |
| 26 | + |
| 27 | + // Step 4: Generate the reading time string passing our modified post to the readingTime helper |
| 28 | + let customTime = readingTime(post); |
| 29 | + |
| 30 | + // Step 5: Insert the string into the page |
| 31 | + document.querySelector('#single-result').textContent = customTime; |
| 32 | + }) |
| 33 | + .catch((err) => { |
| 34 | + console.error(err); |
| 35 | + }); |
| 36 | + |
| 37 | + // Example 2: Calculate reading time for all posts on an index page |
| 38 | + |
| 39 | + // Step 1: grab the slugs for all posts in the page that have reading time |
| 40 | + // Something like document.querySelectorAll('.post-card').forEach(link => { console.log(link.href.match(/\/([^\/]*)\/$/)[1]) }); |
| 41 | + let postSlugs = ['welcome','publishing-options','admin-settings']; |
| 42 | + |
| 43 | + // Step 2: Make an API request to get the data we need |
| 44 | + // We can fetch all posts at once this way |
| 45 | + api.posts.browse({filter: `slug:[${postSlugs.join(',')}]`, fields: 'title,html,feature_image'}) |
| 46 | + .then((posts) => { |
| 47 | + posts.forEach(post => { |
| 48 | + // Step 3: Manipulate the HTML and remove any content you don't want included |
| 49 | + post.html = post.html.substring(0, post.html.length - 1000); |
| 50 | + |
| 51 | + // Step 4: Generate the reading time string passing our modified post to the readingTime helper |
| 52 | + let customTime = readingTime(post); |
| 53 | + |
| 54 | + // Step 5: Insert the string into the page |
| 55 | + document.querySelector('#multi-result').innerHTML += `${post.title} - ${customTime} <br>`; |
| 56 | + }); |
| 57 | + |
| 58 | + }) |
| 59 | + .catch((err) => { |
| 60 | + console.error(err); |
| 61 | + }); |
| 62 | +</script> |
| 63 | +</head> |
| 64 | +<body> |
| 65 | + <h2>Single Post - Publishing Options</h2> |
| 66 | + <div id="single-result"></div> |
| 67 | + |
| 68 | + <h2>Multi Post</h2> |
| 69 | + <div id="multi-result"></div> |
| 70 | +</body> |
| 71 | +</html> |
0 commit comments