Implementation Guide

A straightforward step by step guide on how to render NeuraFeed data on your frontend.

1. Understanding the Output

When you fetch data from the NeuraFeed API, you get back an object containing plain text fields and one HTML field. It is really important to know the difference before you start building your user interface.

Plain text fields: The title, summary, whyItMatters, and tags are just normal strings. You can display them directly in your app.
HTML field: The article body is pre formatted with HTML. You need to inject it directly into the DOM instead of rendering it as plain text.

2. Fetching the Data

You can fetch the data from any client or server component. We recommend doing this on the server side if you are using Next.js or a similar framework to get the best performance.

async function getLatestNews() {
  const response = await fetch('https://feed.neuraspheres.com/api/latest-news');
  const data = await response.json();
  return data.article;
}

3. Rendering the UI

To display the article safely in React, you will use dangerouslySetInnerHTML for the main body. The rest of the fields can just be mapped or displayed normally.

The sources array has a specific format that looks like "[1] Website Name: URL". You can write a quick helper function to split that string up so you can create clickable links.

// A quick helper to extract the number, name, and link
function parseSource(rawSource) {
  const match = rawSource.match(/^\[(\d+)\]\s+(.+?):\s*(https?:\/\/\S+)/);
  if (match) {
    return { num: match[1], name: match[2], url: match[3] };
  }
  return { num: null, name: rawSource, url: null };
}

export function NewsViewer({ article }) {
  if (!article) return <div>No news found.</div>;

  return (
    <article>
      <h1>{article.title}</h1>
      <p>{article.summary}</p>

      {/* Render the HTML body here */}
      <div 
        dangerouslySetInnerHTML={{ __html: article.article }} 
      />

      <div>
        <h3>Tags</h3>
        {article.tags.map((tag, index) => (
          <span key={index}>#{tag} </span>
        ))}
      </div>

      <div>
        <h3>Sources</h3>
        <ul>
          {article.sources.map((sourceText, index) => {
            const { num, name, url } = parseSource(sourceText);
            return (
              <li key={index}>
                {num && <span>[{num}] </span>}
                {url ? <a href={url}>{name}</a> : name}
              </li>
            );
          })}
        </ul>
      </div>
    </article>
  );
}

4. Styling the Content

Since the article field brings its own HTML tags like h2, p, and ul, you need to write some scoped CSS to make sure those elements look good inside your layout.

.article-container h2 {
  font-size: 24px;
  margin-top: 32px;
  font-weight: bold;
}

.article-container p {
  line-height: 1.6;
  margin-bottom: 16px;
}

.article-container sup {
  color: blue;
  font-size: 12px;
  vertical-align: super;
}

Final Thoughts

Make sure to handle the case where the article data is null. This can happen if the system has not generated the daily news yet. Otherwise, you just plug the data into your components and style it to match your site.