HTML Pages Creation Status

tajmone commented 6 years ago

Convert Page to HTML

The current status and pending tasks for the creation of "index.html" pages for every category:

[x] Page Contents:
- [x] Use README.md contents
- [x] Add SubCategories Links, if any (auto-generated)
- [x] Add Resume-Card of every resource in Category
  - [ ] Handle dependencies
    - [ ] Recursively?
    - [ ] Relative paths as browsable links?
    - [ ] Downloadable?
[x] Page Metadata:
- [x] Shared metadata read from "_assets/meta.yaml"
  - [x] header-title (page header)
  - [x] header-subtitle (page header)
  - [x] description (string: <meta name="description" ...>)
  - [x] keywords (list: <meta name="description" ...>)
- [x] Every README.md file can have YAML header to override metadata from meta.yaml (optional)
- [x] Auto-generate HTML category title (for <title> tag)
[x] Navigation Elements: (auto-generated as YAML)
- [x] Bread Crumbs
- [x] Sidbebar Menu:
  - [x] Root Categories
  - [x] Multi-Levels (show also siblings of current category and its parents):
    - [x] SubLevel 1

Quick Preview Links

Live HTML Preview links for the generated index.html pages of the Categories folder in the sample project:

[root]
- Date
- Gadget
  - HyperLinkGadget
  - ScintillaGadget

tajmone commented 6 years ago

@SicroAtGit, today I've added a first working draft of HTML pages creation.

Apart from using the contents of a catergories' README.md file it into the final document it doesn't currently do much else (sidebar and breadcrumbs are not generated, they use sample data only), but it's a good start.

You'll need pandoc >= v2.1.2 to run HTMLPagesCreator.pb app now (either install it globally or just unpack it in the "/_assets/" folder).

Now I'll have to take care of generating the SideBar categories list, with links to the actual categories (I'll start with a single level menu, only linking root categories; and implement multi-levels later on).

Then I'll add below the introductiory text of the README.md file autogenerated links to sub-categories (if any), and then of course the resume cards (the code is already there, just need to integrate and adapt it into the main application).

Currently I'm using just the prebuilt CSS of Bulma framework (ie: the full size, features-complete version). I'll also start to work on the Sass version, so I can include just the modules that are needed, and cut down the size of the final CSS.

tajmone commented 6 years ago

Question regarding maximum categories nesting levels.

Sidabar Menu: SubLevel 1 Implemented

@SicroAtGit, I've finally dedicated some time to multilevels in the Sidebar Menu. Now a single sublevel in the current category's path is shown in the Sidebar, along with the subcategory's siblings.

So, if the currently active category is Gadget » Scintilla Gadget, it's shown in the Sidebar as:

CATEGORIES

 - Date
 - ERRORS
 - Gadget (*)
   - HyperLinkGadget
   - ScintillaGadget (*)
 - TEST

... where the (*) indicates that the category is actively part of the current category path and is shown with a different style (colored background). Live Preview example:

https://tajmone.github.io/PBCodeArcProto/Gadget/ScintillaGadget/index.html

My original idea was to constrain multi-levels to a total of 3 Levels, and ignore in the Sidebar anything further down (there is always the Breadcrumbs bar for a full category path). Since I decided that in the project I wouldn't use a Tree structure for managing the Categories, in order to implement this Sublevel in the menu I had to write a dedicated block of code for each level — so, to implement SubLevel 2 I would need to write another dedicated code section.

Q — SubLevel 2, Is It Needed?

I was about to add some contents from the upstream repo, in order to test categories with 3 levels of nesting, but I didn't find any. So, I must ask you if this is because of a design choice or simply because there aren't any 3 level nested categories at present.

How deep can categories nest in the project? Did you set a fixed limit or is it open to accomodate needs?

Before starting to code the Second SubLevel in the Sidebar Menu I must first know if it's actually needed.

SicroAtGit commented 6 years ago

There is no deeper nesting in the archive. Currently and in the future I see no need to change this.

$ tree -d
.
├── 2DDrawing
│   ├── DOT (code-container)
│   └── Drawing3D (code-container)
├── Cipher
├── Conditional_Statements
├── Date
├── Debug
├── Desktop
├── DriveSystem
├── File
├── FileSystem
├── Font
├── Gadget
│   ├── BarcodeGadget (code-container)
│   ├── ButtonGadget
│   ├── CanvasGadget
│   ├── ContainerGadget
│   ├── EditorGadget
│   ├── HyperLinkGadget
│   ├── ListIconGadget
│   ├── MultiGraphGadget[Win] (code-container)
│   ├── ProgressBarGadget
│   ├── ScintillaGadget
│   │   └── ScintillaText (code-container)
│   ├── StringGadget
│   └── TextGadget
├── Hardware
├── Http
│   └── SendPostData[Win,Lin] (code-container)
├── Image
├── ImagePlugin
├── Keyboard
├── Language
├── Math
├── Memory
├── Network
├── OOP
├── PB-IDE-Tools
│   └── CreateLicenseFileForUsedPBExternalLibs (code-container)
├── Process
├── Queue
├── Requester
├── SerialPort
├── Sound
│   └── AudioIN_OUT[Win] (code-container)
├── StatusBar
├── Streaming
├── String
├── System
│   ├── Linux
│   ├── MacOs
│   └── Windows
├── Thread
└── Window

tajmone / PBCodeArcProto