From 8b234bc2243c78c785da745b45a5c2eed474198f Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Sun, 29 Sep 2024 12:10:18 +0200
Subject: [PATCH] bibtex
---
src/components/makeSources.tsx | 129 ++++++++++++++++++++++++++++++---
src/contents/methods.tsx | 3 +-
src/soures/test-sources.tsx | 26 +++++++
3 files changed, 145 insertions(+), 13 deletions(-)
create mode 100644 src/soures/test-sources.tsx
diff --git a/src/components/makeSources.tsx b/src/components/makeSources.tsx
index 4314105a..74565b40 100644
--- a/src/components/makeSources.tsx
+++ b/src/components/makeSources.tsx
@@ -1,18 +1,123 @@
-import * as BibtexParser from 'bibtex-parser-js';
-
-interface BibTexEntry {
- author: string;
- title: string;
- year: string;
- url?: string;
- note?: string;
- institution?: string;
- howpublished?: string;
+import React, { useState } from "react";
+import bibtexParse from 'bibtex-parser-js';
+
+interface BibEntry {
+ ENTRYTYPE: string;
+ title?: string;
+ author?: string;
+ journal?: string;
+ volume?: string;
+ pages?: string;
+ year?: string;
+ doi?: string;
+ [key: string]: any;
}
-export function Sources{
+interface BibtexParserProps {
+ bibtexSources: string[]; // Accept an array of BibTeX strings
+}
+export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources }) => {
+ const [parsedEntries, setParsedEntries] = useState<BibEntry[]>([]);
-}
+ // Parse BibTeX on component mount or when sources change
+ // Inside the useEffect
+React.useEffect(() => {
+ try {
+ const allEntries: BibEntry[] = [];
+ bibtexSources.forEach((bibtex) => {
+ const parsed = bibtexParse.toJSON(bibtex);
+ allEntries.push(...parsed);
+ });
+ setParsedEntries(allEntries);
+ } catch (error) {
+ console.error("Error parsing BibTeX: ", error);
+ alert("An error occurred while parsing the BibTeX entries.");
+ }
+ }, [bibtexSources]);
+
+
+ // Helper function to render authors
+ const renderAuthors = (authors: string) => {
+ const authorList = authors.split(" and ");
+ return authorList.map((author, index) => (
+ <span key={index}>
+ {author}
+ {index < authorList.length - 1 ? ", " : ""}
+ </span>
+ ));
+ };
+
+ // Helper function to render individual citations based on their type
+// Helper function to render individual citations based on their type
+const renderCitation = (entry: BibEntry, index: number) => {
+ switch (entry.ENTRYTYPE) {
+ case "article":
+ return (
+ <li key={index}>
+ <span>{renderAuthors(entry.author || "")}</span>
+ <span>{entry.title}</span>.
+ <i>{entry.journal}</i>,
+ <b>{entry.volume}</b>,
+ <span>{entry.pages}</span> ({entry.year}).
+ {entry.doi && (
+ <a href={`https://doi.org/${entry.doi}`}>
+ doi: {entry.doi}
+ </a>
+ )}
+ </li>
+ );
+
+ case "book":
+ return (
+ <li key={index}>
+ <span>{renderAuthors(entry.author || entry.editor || "")}</span>
+ <span>{entry.title}</span>.
+ <i>{entry.publisher}</i>, {entry.year}.
+ </li>
+ );
+
+ case "misc":
+ return (
+ <li key={index}>
+ <span>{entry.author}</span>
+ <span>{entry.title}</span>.
+ <i>{entry.howpublished}</i>, {entry.year}.
+ </li>
+ );
+
+ // Handle additional entry types here
+ case "inproceedings":
+ return (
+ <li key={index}>
+ <span>{renderAuthors(entry.author || "")}</span>
+ <span>{entry.title}</span>. In <i>{entry.booktitle}</i>,
+ <b>{entry.editor}</b>, {entry.year}.
+ </li>
+ );
+
+ case "phdthesis":
+ return (
+ <li key={index}>
+ <span>{renderAuthors(entry.author || "")}</span>
+ <span>{entry.title}</span>, PhD thesis, {entry.school}, {entry.year}.
+ </li>
+ );
+
+ default:
+ return <li key={index}>Unknown entry type: {entry.ENTRYTYPE}</li>;
+ }
+ };
+
+ return (
+ <div>
+ <h2>Citations</h2>
+ <ol>
+ {parsedEntries.map((entry, index) => renderCitation(entry, index))}
+ </ol>
+ </div>
+ );
+};
+export default BibtexParser;
diff --git a/src/contents/methods.tsx b/src/contents/methods.tsx
index 05f1f236..031f6bcd 100644
--- a/src/contents/methods.tsx
+++ b/src/contents/methods.tsx
@@ -1,6 +1,7 @@
import { Section, Subesction } from "../components/sections";
import { useTabNavigation } from "../utils/TabNavigation";
import {H5} from "../components/Headings";
+import TestSource from "../soures/test-sources";
export function Methods() {
useTabNavigation();
@@ -92,7 +93,7 @@ export function Methods() {
<H5 text="Importance of Safety in LNP Development"></H5>
<p>Testing the safety of our LNPs was a critical step in their development. LNPs are increasingly being used in cutting-edge therapies, such as mRNA vaccines and targeted drug delivery systems. For these technologies to be viable, the nanoparticles must not harm the cells they are intended to interact with. The MTT and proliferation assays provided robust data, confirming the biocompatibility of our LNPs and reinforcing their potential for safe use in further research and clinical applications. </p>
</Subesction>
-
+ <TestSource/>
</Section>
<Section title="References" id="References">
<ol>
diff --git a/src/soures/test-sources.tsx b/src/soures/test-sources.tsx
new file mode 100644
index 00000000..77cce4c6
--- /dev/null
+++ b/src/soures/test-sources.tsx
@@ -0,0 +1,26 @@
+import BibtexParser from "../components/makeSources";
+
+export function TestSource(){
+ const bibtexSources = [
+ `
+ @article{doe2023,
+ author = {John Doe and Jane Smith},
+ title = {A Great Paper},
+ journal = {Important Journal},
+ volume = {12},
+ pages = {123-456},
+ year = {2023},
+ doi = {10.1000/journal-doi}
+ }
+ `
+ ];
+
+ return (
+ <div>
+ <h1>BibTeX to HTML in React</h1>
+ <BibtexParser bibtexSources={bibtexSources} />
+ </div>
+ );
+}
+
+export default TestSource;
\ No newline at end of file
--
GitLab