<|start_filename|>components/Answer.js<|end_filename|>
import React from "react";
import Link from "next/link";

const Answer = ({ text }) => (
  <div>
    <style jsx>
      {`
        .answer {
          display: flex;
          justify-content: center;
          align-items: left;
          flex-direction: column;
          height: 100%;
          font-size: 1.4rem;
          color: white;
          font-weight: 400;
          padding-left: 100px;
        }
      `}
    </style>
    <p className="answer">{text}</p>
  </div>
);

export default Answer;


<|start_filename|>utils/constants.js<|end_filename|>
const host =
  process.env.NODE_ENV === "production"
    ? "https://bub2.toolforge.org"
    : "http://localhost:5000"; //If you have port set in env file, replace 5000 with "process.env.PORT"
export const stats_data_endpoint = `${host}/getstats`;
export const queue_data_endpoint = `${host}/getqueue`;
export const queuelist_data_endpoint = `${host}/getqueuelist`;
export const faq_data = [
  {
    que: "What is Book Uploader Bot?",
    ans:
      "A Book Uploader Bot transfers documents from public libraries such as Google Books, and Punjab Digital Library etc to Internet Archive.",
  },
  {
    que: "What does this tool do?",
    ans:
      "The tool is built to help the community with free books that are available in the online public libraries. It makes the integration of books easier.",
  },
  {
    que: "Who can benefit from this tool?",
    ans:
      "The tool, under the hood, compiles all the book images/pdf and its meta data at one place where it can be accessed by anyone in the world.",
  },
  {
    que: "What are the future enhancements?",
    ans:
      "Bulk upload future, MediaWiki OAuth integration and Direct uploading to Commons.",
  },
  {
    que: "Can I upload my own book?",
    ans:
      "If an appropriate license is attached to the book which allows it to be archived(which doesn't allow copyright infringement suits, etc.), then book can be uploaded.",
  },
  {
    que: "Can I delete or undo an upload?",
    ans:
      "Archives are supposed to be read-only and deleting is a 'write' operation. So it doesn't support.",
  },
];


<|start_filename|>utils/scraper.js<|end_filename|>
const request = require("request-promise");
const cheerio = require("cheerio");

export const PdlDetails = async (id, categoryId) => {
  const pdlURI = `http://www.panjabdigilib.org/webuser/searches/displayPage.jsp?ID=${id}&page=1&CategoryID=${categoryId}&Searched=W3GX`;
  const response = await request({
    uri: pdlURI,
    headers: {
      Accept:
        "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
      "Accept-Encoding": "gzip, deflate",
      "Accept-Language": "en-US,en;q=0.9,hi;q=0.8",
      Host: "www.panjabdigilib.org",
      "Upgrade-Insecure-Requests": 1,
    },
  });

  let $ = cheerio.load(response);
  let title = $(
    "#Nanakshahi>tbody>tr:nth-child(3)>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(2)>table:nth-child(22)>tbody>tr:nth-child(3)>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(2)>div>table>tbody>tr:nth-child(1)>td>a"
  )
    .text()
    .trim();
  let authorLabel = $(
    "#Nanakshahi>tbody>tr:nth-child(3)>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(2)>table:nth-child(22)>tbody>tr:nth-child(3)>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(2)>div>table>tbody>tr:nth-child(3)>td>table>tbody>tr>td:nth-child(1)"
  )
    .text()
    .trim();
  let author = $(
    "#Nanakshahi>tbody>tr:nth-child(3)>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(2)>table:nth-child(22)>tbody>tr:nth-child(3)>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(2)>div>table>tbody>tr:nth-child(3)>td>table>tbody>tr>td:nth-child(2)>a"
  )
    .text()
    .trim();
  let description = $(
    "#Nanakshahi>tbody>tr:nth-child(3)>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(2)>table:nth-child(22)>tbody>tr:nth-child(3)>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(2)>div>table>tbody>tr:nth-child(2)>td>table>tbody>tr:nth-child(1)>td:nth-child(2)"
  )
    .text()
    .trim();
  let preview = $(
    "#Nanakshahi>tbody>tr:nth-child(3)>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(2)>table:nth-child(22)>tbody>tr:nth-child(3)>td>table>tbody>tr:nth-child(2)>td>table>tbody>tr>td:nth-child(1)>table>tbody>tr:nth-child(1)>td>table>tbody>tr>td>a>img"
  )
    .attr("src")
    .slice(8);

  const details = {
    title: title,
    author: authorLabel != "Author" ? "" : author,
    description:
      description == "Click here to add description"
        ? "No description available"
        : description,
    preview: "http://www.panjabdigilib.org" + preview,
  };

  return details;
};


<|start_filename|>components/Question.js<|end_filename|>
import React from "react";
import Link from "next/link";

const Question = ({ text }) => (
  <div>
    <style jsx>
      {`
        .question {
          display: flex;
          justify-content: center;
          align-items: left;
          flex-direction: column;
          height: 100%;
          font-size: 1.8rem;
          color: black;
          font-weight: 600;
          padding-left: 50px;
        }
      `}
    </style>
    <p className="question">{text}</p>
  </div>
);

export default Question;


<|start_filename|>pages/faq.js<|end_filename|>
import React, { Component } from "react";
import { render } from "react-dom";
import { faq_data } from "../utils/constants.js";
import Question from "../components/Question";
import Answer from "../components/Answer";

export default class Faq extends Component {
  render() {
    return (
      <div className="faq">
        <style jsx>
          {`
            .faq {
              display: flex;
              justify-content: center;
              flex-direction: column;
              height: 100%;
              background-color: #3ec6ff;
              font-family: "arial";
              padding-bottom: 50px;
            }
            .heading {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              height: 100%;
              font-size: 2rem;
              color: black;
              font-weight: 600;
            }
          `}
        </style>
        <div className="faq">
          <p className="heading">FREQUENTLY ASKED QUESTIONS</p>
          <div className="data-1">
            {faq_data.map(function (item, index) {
              return (
                <div key={index}>
                  <Question text={item.que} />
                  <Answer text={item.ans} />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
