53F-Notebook

53F Notebook made using HTML/CSS and compiled using JS

Installation

How to Download the Notebook

• You can download the notebook in the releases page (NOTE: the notebook is not complete, if you wish to download the lastest current version you can download the Nodebook.pdf in the file list) releases

How to Compile/Contribute to the Notebook

Node.js packages used are:

• Chokidar
• Puppeteer
• pdf-lib

1. To install make sure to have nodejs, npm and git installed according to your OS. (and also the node packages)

npm install chokidar puppeteer pdf-lib

2. Clone the repository

git clone https://github.com/Area-53-Robotics/53F-Notebook/releases
cd 53F-Notebookw

3. Compiling the notebook (This will also start the watcher, mean you will have to manully stop the code to turn it off. To do this press CTRL+C in the terminal)

node ./compile.js

Features

Things added onto the notebook:

• Automatic table of contents sorter
• Template/theme importer (can custom make)
• Organize/sort all the pages in which ever order you like
• Easy management (Adding title, date, attendance, witnessed/designed seemlessly)
  and more....

Things not added to the notebook "natively" (Due to things hard coded in the compiler - you can change these things there)

• Customizing the page number
• Customizing "semi-calling"
• Customizing the TOC

Navigating the notebook AND how to use them

Folder/Files

There are alot of different files and folder and at first it might be difficult to understand.

1. /Assets
   This contains the all of the images (aka assets) that are used in the notebook. This includes things like background, icons, etc etc
2. /BuildingBlocks (not made yet)
   This is going to be used later on for things like code blocks, tables, and other "blocks" that can be quickly imported into the notebook instead of having to manully make it everytime. (There is a high chance I will scrap this but idk)
3. /Notebook
   This includes all of the entries (pages) for this notebook. The pages can be sperated into folders/sub-categories for organization.
4. /Render
   This won't show in github or after you cloned the repo but it will appear while/after you compile the notebook (idk github just won't get empty folders when publishing the code).
   This folder is very important since it will "render" the html pages into this folder and after it has "rendered" it will orginize them into the final PDF. So you might see html files going in and out while it is compiling.
5. [Part A]: /Template
   This contains the template for the notebook entries, essentially, this is like a blueprint or a theme for each of the pages. If I want to call a template, I just have to put a html comment at the top (you technically can put it anywhere but at the top just sounds right) of the html file like this.
   When customizing these templates, MAKE SURE, not to remove the {{content}} in the file(s), the whole purpose of that is of how templates work, if you have html code and you called a template, it will take what ever html code is in that file and replace it where the {{content}} is.

<!-- name_of_file.html -->

Example:

<!-- About.html -->

5. [Part B]: There is also a way to "semi-call" the template, this is useful if you want to call a template but you don't actually want to import the theme onto the page. The reason to do this that you cannot change a part of the template after it is imported on the page. The importing is done during the compiling of the PDF. For example, if you want to change the footer size for one of the pages, you could copy the template in the /Template folder and resize the footer, but after calling the template, it will overlap your edited template and the template you called. So "semi-calling" the template will just assign the page to the template (so it will show in the TOC and page number color as one of the templates) but it wont import it to the final PDF. To do this, just don't add the .html in the comment.
   (IMPORTANT: These values are hard-coded into the compiler at the moment and I am NOT planning on adding a feature for customizing this, however you can customize the template.html fully and it will work, page numbers are also hard-coded in the compiler so if you want to customize that, all of that is in compile.js)
   Values:

<!-- About -->
<!-- Brainstorm -->
<!-- Build -->
<!-- Comp -->
<!-- Decide -->
<!-- Identify -->
<!-- Program -->
<!-- Text -->

6. compile.js
   This is the compiler this is where all the brains of the notebook happen.
7. index.js
   This is supposed to be like a control panel thing for the notebook to toggle features on/off but I couldn't think of anything useful so right now it only has one toggle to make it output the final PDF pages from the /template folder so it is easier for customizing the templates.
8. page-order.json This is where you change the order of the pages for the final PDF. Over here you can change the:

• title
• date
• attendance
• designed by [name]
• witnessed by [names]
• showInTOC (bool - rather to show the page in the table of contents)
• pageNumberSet (int or string - set the page number to start from the assigned page number)
• pageNumber (bool - rather to show the page number in the page)
• useRoman (bool - rather to show the number in roman numerals)

9. styles.css
   Here is where you can change and set the global styles for all of your pages, this includes your title, entries, and everything.

Thanks To

• Terry for notebooking advice
• CHATGPT - helped me cuz no one else knows js (and neither do i), so tytytyty