Implement Static Rendering of Jupyter Notebook in Next.js Web App

[jefroy]

Description

To enhance our web application's user experience, we need to integrate a Jupyter notebook into one of our pages. The notebook contains insights from exploratory analysis of hate crime data. Since the users only need to view this information and do not require any interactivity with the notebook's contents, the notebook will be rendered statically.

Objective

Convert the Jupyter notebook into a static format (HTML or Markdown) and embed it into the Next.js application, ensuring that it is displayed cleanly and is easy to read.

Tasks

• [x] Convert the Jupyter notebook to HTML/Markdown.
  • Use nbconvert to transform the notebook:

    jupyter nbconvert --to html path/to/notebook.ipynb
    # or
    jupyter nbconvert --to markdown path/to/notebook.ipynb

• [x] Add the converted file to the project (consider placing it in the public directory for HTML or importing Markdown directly).

• [x] Create a Next.js component to display the notebook content.

  • For HTML:

    const NotebookComponent = () => {
    const notebookHtml = require('path/to/converted.html');
    return <div dangerouslySetInnerHTML={{ __html: notebookHtml }} />;
    };

  • For Markdown:

    
    import ReactMarkdown from 'react-markdown';

  const NotebookComponent = () => { const markdownContent = require('path/to/converted.md'); return {markdownContent}; };

• [x] Ensure the styling is consistent with the rest of the application.

Acceptance Criteria

• The notebook is rendered accurately on the web page.
• The content should be clearly readable and formatted properly.
• The page should maintain the overall style and responsiveness of the web application.

Notes

• Ensure that any HTML content embedded is sanitized or trusted to avoid XSS vulnerabilities.
• Review the conversion output to verify that all notebook elements (images, tables, etc.) are rendered as expected.