Scientific
1 import React, { createContext, useEffect, useState } from "react"; 2 import { 3 Tailwind, 4 CSS, 5 Latex, 6 PageBreak, 7 Footnote, 8 Markdown, 9 } from "@fileforge/react-print"; 10 11 export const SectionComponent = ({ title, content, isSection }) => { 12 return ( 13 <div> 14 {isSection ? ( 15 <h2 className="text-md italic text-center uppercase">{title}</h2> 16 ) : ( 17 <h3 className="text-sm italic">{title}</h3> 18 )} 19 {/* The content should have an indent on the first sentence, not after*/} 20 <div className="text-xs text-justify">{content}</div> 21 </div> 22 ); 23 }; 24 25 <React.Fragment> 26 {/* A CSS snippet to define the page size, margins, fonts, etc. 27 It also enforce the space between line to be small*/} 28 <CSS> 29 {String.raw` 30 @page { 31 size: A4; 32 margin: 2cm; 33 } 34 35 body { 36 line-height: 1.1; 37 } 38 39 `} 40 </CSS> 41 42 <Tailwind> 43 {/* A Header with the title of the research in large and bold, then the author name, the supervisor and the institute. All centered */} 44 <div className="text-center"> 45 <h1 className="text-2xl font-bold">Title of the Research Report</h1> 46 <p className="text-base">Author: Name of the Author</p> 47 <p className="text-base">Supervisor: Name of the Supervisor</p> 48 <p className="text-base">Institute: Name of the Institute</p> 49 </div> 50 51 <br /> 52 53 {/* A Tailwind component to define the layout of the page */} 54 55 {/* 2 columns */} 56 <div className="columns-2 gap-8" style={{ columnFill: "auto" }}> 57 {/* Abstract*/} 58 {/* <Abstract 59 text="Lorem ipsum dolor sit amet [1], consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." 60 /> */} 61 62 <p className="text-justify text-xs font-bold italic"> 63 Abstract -- Lorem ipsum dolor sit amet [1], consectetur adipiscing elit. 64 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 65 enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 66 aliquip ex ea commodo consequat. 67 </p> 68 69 <br /> 70 71 {/* An Introduction Section with no content*/} 72 <SectionComponent 73 title="1. Introduction" 74 content={null} 75 isSection={true} 76 /> 77 78 {/* A sub section with a title and a content */} 79 <SectionComponent 80 title="A. Sub Section" 81 content={ 82 <p className="text-justify text-xs"> 83 Lorem ipsum dolor sit amet [2], consectetur adipiscing elit. Sed do 84 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 85 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 86 aliquip ex ea commodo consequat. Duis aute irure dolor in 87 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 88 pariatur.{" "} 89 <Footnote style={{ float: "footnote page" }}>Footnote 1</Footnote> 90 </p> 91 } 92 isSection={false} 93 /> 94 95 <br /> 96 97 {/* A sub section with a title and a content with a formula */} 98 <SectionComponent 99 title="B. Sub section" 100 content={ 101 <React.Fragment> 102 <p> 103 Lorem ipsum dolor sit amet [3], consectetur adipiscing elit. Sed 104 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 105 enim ad minim veniam, quis nostrud exercitation ullamco laboris 106 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 107 reprehenderit in voluptate velit esse cillum dolore eu fugiat 108 nulla pariatur. 109 </p> 110 <br /> 111 112 {/* add the latex component to display a formula */} 113 <div className="text-center"> 114 <Latex> 115 {String.raw`f(x) = \int_{-\infty}^\infty \hat f(\xi) e^{2 \pi i \xi x} d\xi (1)`} 116 </Latex> 117 </div> 118 </React.Fragment> 119 } 120 isSection={false} 121 /> 122 123 <br /> 124 125 {/* A sub section with a title and content, and an image */} 126 <SectionComponent 127 title="C. Sub section" 128 content={ 129 <React.Fragment> 130 <p> 131 Lorem ipsum dolor sit amet [4], consectetur adipiscing elit. Sed 132 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 133 enim ad minim veniam, quis nostrud exercitation ullamco laboris 134 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 135 reprehenderit in voluptate velit esse cillum dolore eu fugiat 136 nulla pariatur. 137 </p> 138 {/* Add an image, with a caption display under */} 139 <div className="text-center"> 140 {/* <img src="varianceexplaine.png" alt="Image" /> */} 141 <img 142 src="https://machinelearningmastery.com/wp-content/uploads/2018/12/Example-of-Train-and-Validation-Learning-Curves-Showing-A-Good-Fit.png" 143 alt="Image" 144 /> 145 <p className="text-xs italic text-center"> 146 Figure 1: Caption of the image 147 </p> 148 </div> 149 </React.Fragment> 150 } 151 isSection={false} 152 /> 153 154 <br /> 155 156 {/* A section Data with */} 157 <SectionComponent title="2. Data" content={null} isSection={true} /> 158 159 {/* A sub section with a title and a content */} 160 <SectionComponent 161 title="A. Sub section" 162 content={ 163 <p> 164 Lorem ipsum dolor sit amet [5], consectetur adipiscing elit. Sed do 165 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 166 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 167 aliquip ex ea commodo consequat. Duis aute irure dolor in 168 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 169 pariatur. 170 </p> 171 } 172 isSection={false} 173 /> 174 175 <br /> 176 177 {/* A sub section with a title and a content, and a table in with 3 columns and 6 raws, the table should be centered and it must have 1 horizontal the first raw and the second one and then verticle line between each column */} 178 <SectionComponent 179 title="B. Sub section" 180 content={ 181 <React.Fragment> 182 <p> 183 Lorem ipsum dolor sit amet [6], consectetur adipiscing elit. Sed 184 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 185 enim ad minim veniam, quis nostrud exercitation ullamco laboris 186 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 187 reprehenderit in voluptate velit esse cillum dolore eu fugiat 188 nulla pariatur. 189 </p> 190 <br /> 191 <table className="table-auto mx-auto w-full border-collapse"> 192 <thead> 193 <tr> 194 <th className="border border-black px-1 py-1 text-center font-medium font-bold"> 195 {" "} 196 Header 1{" "} 197 </th> 198 <th className="border border-black px-1 py-1 text-center font-medium font-bold"> 199 {" "} 200 Header 2{" "} 201 </th> 202 <th className="border border-black px-1 py-1 text-center font-medium font-bold"> 203 {" "} 204 Header 3{" "} 205 </th> 206 </tr> 207 </thead> 208 <tbody> 209 <tr> 210 <td className="border border-black px-1 py-1 text-center"> 211 {" "} 212 Data 1{" "} 213 </td> 214 <td className="border border-black px-1 py-1 text-center"> 215 {" "} 216 Data 2{" "} 217 </td> 218 <td className="border border-black px-1 py-1 text-center"> 219 {" "} 220 Data 3{" "} 221 </td> 222 </tr> 223 <tr> 224 <td className="border border-black px-1 py-1 text-center"> 225 {" "} 226 Data 4{" "} 227 </td> 228 <td className="border border-black px-1 py-1 text-center"> 229 {" "} 230 Data 5{" "} 231 </td> 232 <td className="border border-black px-1 py-1 text-center"> 233 {" "} 234 Data 6{" "} 235 </td> 236 </tr> 237 </tbody> 238 </table> 239 {/* caption to the table */} 240 <p className="text-xs italic text-center"> 241 Table 1: Caption of the table 242 </p> 243 </React.Fragment> 244 } 245 isSection={false} 246 /> 247 248 <br /> 249 250 {/* A Section Methodology */} 251 <SectionComponent 252 title="3. Methodology" 253 content={null} 254 isSection={true} 255 /> 256 257 {/* A sub section with a title and a content */} 258 <SectionComponent 259 title="A. Sub section" 260 content={ 261 <p> 262 Lorem ipsum dolor sit amet [7], consectetur adipiscing elit. Sed do 263 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 264 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 265 aliquip ex ea commodo consequat. Duis aute irure dolor in 266 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 267 pariatur. 268 </p> 269 } 270 isSection={false} 271 /> 272 273 <br /> 274 275 {/* A sub section with a title and a content, and a code snippet */} 276 <SectionComponent 277 title="B. Sub section" 278 content={ 279 <React.Fragment> 280 <p> 281 Lorem ipsum dolor sit amet [8], consectetur adipiscing elit. Sed 282 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 283 enim ad minim veniam, quis nostrud exercitation ullamco laboris 284 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 285 reprehenderit in voluptate velit esse cillum dolore eu fugiat 286 nulla pariatur. 287 </p> 288 <br /> 289 <pre className="bg-gray-100 p-2"> 290 <code> 291 {String.raw`function helloWorld() { 292 293 console.log("Hello, World!"); 294 console.log("This is a code snippet"); 295 }`} 296 </code> 297 </pre> 298 </React.Fragment> 299 } 300 isSection={false} 301 /> 302 303 <br /> 304 <br /> 305 306 {/* A Section Results */} 307 <SectionComponent title="4. Results" content={null} isSection={true} /> 308 309 {/* A sub section with a title and a content */} 310 <SectionComponent 311 title="A. Sub section" 312 content={ 313 <p> 314 Lorem ipsum dolor sit amet [9], consectetur adipiscing elit. Sed do 315 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 316 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 317 aliquip ex ea commodo consequat. Duis aute irure dolor in 318 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 319 pariatur. 320 </p> 321 } 322 isSection={false} 323 /> 324 325 <br /> 326 327 {/* A sub section with a title and a content, and a list */} 328 <SectionComponent 329 title="B. Sub section" 330 content={ 331 <React.Fragment> 332 <p> 333 Lorem ipsum dolor sit amet [10], consectetur adipiscing elit. Sed 334 do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 335 enim ad minim veniam, quis nostrud exercitation ullamco laboris 336 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 337 reprehenderit in voluptate velit esse cillum dolore eu fugiat 338 nulla pariatur. 339 </p> 340 <br /> 341 <ul className="list-disc list-inside"> 342 <li> Item 1 </li> 343 <li> Item 2 </li> 344 <li> Item 3 </li> 345 </ul> 346 </React.Fragment> 347 } 348 isSection={false} 349 /> 350 351 <br /> 352 353 {/* A Section Conclusion */} 354 <SectionComponent title="5. Conclusion" content={null} isSection={true} /> 355 356 {/* A sub section with a title and a content */} 357 <SectionComponent 358 title="A. Sub section" 359 content={ 360 <p> 361 Lorem ipsum dolor sit amet{" "} 362 <Footnote children={undefined} style={{ float: "footnote page" }}> 363 {" "} 364 <Markdown 365 style={{ color: "blue" }} 366 >{`[The BEST open-source library](https://github.com/OnedocLabs/react-print-pdf)`}</Markdown>{" "} 367 </Footnote> 368 , consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut 369 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 370 exercitation ullamco laboris nisi ut aliquip ex ea commodo 371 consequat. Duis aute irure dolor in reprehenderit in voluptate velit 372 esse cillum dolore eu fugiat nulla pariatur. 373 </p> 374 } 375 isSection={false} 376 /> 377 378 <br /> 379 380 {/* A sub section with a title and a content, and a formula */} 381 <SectionComponent 382 title="B. Sub section" 383 content={ 384 <React.Fragment> 385 <p> 386 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do 387 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 388 enim ad minim veniam, quis nostrud exercitation ullamco laboris 389 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 390 reprehenderit in voluptate velit esse cillum dolore eu fugiat 391 nulla pariatur. 392 </p> 393 <br /> 394 <div className="text-center"> 395 <Latex> 396 {String.raw`f(x) = \int_{-\infty}^\infty \hat f(\xi) e^{2 \pi i \xi x} d\xi (1)`} 397 </Latex> 398 </div> 399 </React.Fragment> 400 } 401 isSection={false} 402 /> 403 404 <br /> 405 406 {/* A Section References where te content is 10 references starting with [1] and ending with [10] */} 407 <SectionComponent 408 title="References" 409 content={ 410 <React.Fragment> 411 <p className="italic"> 412 {" "} 413 [1] Reference 1 Author Name, Article Title, Journal, Year 414 </p> 415 <p className="italic"> 416 {" "} 417 [2] Reference 2 Author Name, Article Title, Journal, Year 418 </p> 419 <p className="italic"> 420 {" "} 421 [3] Reference 3 Author Name, Article Title, Journal, Year 422 </p> 423 <p className="italic"> 424 {" "} 425 [4] Reference 4 Author Name, Article Title, Journal, Year 426 </p> 427 <p className="italic"> 428 {" "} 429 [5] Reference 5 Author Name, Article Title, Journal, Year 430 </p> 431 <p className="italic"> 432 {" "} 433 [6] Reference 6 Author Name, Article Title, Journal, Year 434 </p> 435 <p className="italic"> 436 {" "} 437 [7] Reference 7 Author Name, Article Title, Journal, Year 438 </p> 439 <p className="italic"> 440 {" "} 441 [8] Reference 8 Author Name, Article Title, Journal, Year 442 </p> 443 <p className="italic"> 444 {" "} 445 [9] Reference 9 Author Name, Article Title, Journal, Year 446 </p> 447 <p className="italic"> 448 {" "} 449 [10] Reference 10 Author Name, Article Title, Journal, Year 450 </p> 451 </React.Fragment> 452 } 453 isSection={true} 454 /> 455 456 {/* Page Break */} 457 <PageBreak /> 458 </div> 459 </Tailwind> 460 </React.Fragment>;