#How to get collection content as html or text to calculate reading time?

9 messages · Page 1 of 1 (latest)

valid ether
#

Title, I want to calculate reading time from collection content using a library but I'm not sure how, as the rendered Content variable seems to be a function and I'd need the text in a string.

grim mangoBOT
#

Hi @valid ether. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To calculate reading time for content from an Astro collection, you can use the render() function to access the raw content as a string. Here's how you can do it:

  1. First, query your collection entry using getEntry() or getCollection().
  2. Use the render() function from astro:content to get access to the raw content.
  3. Use the compiledContent() method to get the HTML string of the content.
  4. Pass this string to your reading time calculation library.

Here's an example of how you can implement this:

---
import { getEntry, render } from 'astro:content';
import getReadingTime from 'reading-time';

const entry = await getEntry('blog', 'my-blog-post');
const { Content, remarkPluginFrontmatter } = await render(entry);

// Get the compiled content as an HTML string
const htmlString = await entry.render().then(result => result.compiledContent());

// Calculate reading time
const readingTime = getReadingTime(htmlString);

// Access the reading time
const minutesRead = readingTime.text;
---

<h1>{entry.data.title}</h1>
<p>Reading time: {minutesRead}</p>
<Content />

This approach is based on the information from Astro's Reading Time Recipe (https://docs.astro.build/en/recipes/reading-time/#_top) and Content Collections API Reference (https://docs.astro.build/en/reference/modules/astro-content/#getentry).

Note that the compiledContent() method returns the Markdown document compiled to an HTML string, which should work well for most reading time calculation libraries. If you specifically need plain text, you might need to strip the HTML tags from this string before passing it to your reading time calculation function.

#

Remember to install any necessary reading time calculation libraries (like reading-time in this example) before using them in your project.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@valid ether Kapa.ai is still learning and improving, please let me know how I did by reacting below.

valid ether
#

@grim mango is this right? I'm not sure entry.render() exists, and I'm also not sure of the purpose of the await render(entry) before it in your example

grim mangoBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

You're right to question this, and I apologize for the confusion in my previous answer. Let me clarify the correct approach based on the latest Astro documentation:

  1. The entry.render() method indeed doesn't exist. This was an error in my previous response.

  2. The await render(entry) is the correct way to render an entry's content.

Here's the correct way to get the content and calculate reading time:

---
import { getEntry, render } from 'astro:content';
import getReadingTime from 'reading-time';

const entry = await getEntry('blog', 'my-blog-post');
const { Content, remarkPluginFrontmatter } = await render(entry);

// Get the compiled content as an HTML string
const htmlString = remarkPluginFrontmatter.compiledContent;

// Calculate reading time
const readingTime = getReadingTime(htmlString);

// Access the reading time
const minutesRead = readingTime.text;
---

<h1>{entry.data.title}</h1>
<p>Reading time: {minutesRead}</p>
<Content />

The purpose of await render(entry) is to compile the Markdown or MDX content into HTML and provide additional metadata. It returns an object with the following properties:

  • Content: A component used to render the document's contents in an Astro file.
  • headings: A generated list of headings.
  • remarkPluginFrontmatter: The modified frontmatter object after any remark or rehype plugins have been applied. This includes the compiledContent property, which contains the HTML string we need for calculating reading time.

This information is based on the Content Collections API Reference (https://docs.astro.build/en/reference/modules/astro-content/#render).

#

I apologize again for the confusion in my previous response. Thank you for bringing this to my attention, as it allows me to provide more accurate information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: