Added new elements to content renderer, Finished page's base for lscom

Update content.php, index.php, and 2 more files...

commons/content.php

@@ -165,6 +165,18 @@ function printErrorTextElement(string $text) : void {
 	}
 }
 
+function processStandardContentSubNode(mixed $elementNode) : void {
+	if(array_key_exists("content", $elementNode)) {
+		if (array_key_exists("parts", $elementNode["content"])) {
+			for ($iPart = 0; $iPart < count($elementNode["content"]["parts"]); $iPart++) {
+				createElementNode($elementNode["content"]["parts"][$iPart]);
+			}
+		} else {
+			echo(getContentItemText($elementNode["content"], false, true));
+		}
+	}
+}
+
 function createElementNode(mixed $elementNode) : void {
 	// Checking if we actually have a JSON object.
 	if(!is_array($elementNode)) {
@@ -177,6 +189,92 @@ function createElementNode(mixed $elementNode) : void {
 	}
 	
 	switch($elementNode["type"]) {
+		case "spacer":
+			// Defining the font size.
+			$_spacerSize = 1;
+			if(array_key_exists("size", $elementNode)) {
+				$_spacerSize = $elementNode["size"];
+			}
+			
+			// Adding element.
+			echo('<div class="m-0 pt-'.($_spacerSize*5).' pb-md-'.($_spacerSize*5).'"></div>');
+			
+			break;
+		case "h1":
+		case "h2":
+		case "h3":
+			// Defining the font size.
+			$_headingFontSize = ($elementNode["type"] == "h3" ? '18' : (($elementNode["type"] == "h2" ? '20' : '22')));
+			
+			// Opening heading.
+			echo('<'.$elementNode["type"].' class="font-weight-semi-bold font-size-'.$_headingFontSize.' m-0">');
+			
+			// Adding content.
+			processStandardContentSubNode($elementNode);
+			
+			// Closing heading.
+			echo('</'.$elementNode["type"].'>');
+			
+			break;
+		case "paragraph":
+			// Parsing properties.
+			$_indentLevel = 0;
+			if(array_key_exists("indent", $elementNode)) {
+				$_indentLevel = $elementNode["indent"];
+			}
+			
+			// Opening paragraph.
+			echo('<p'.($_indentLevel?' class="ml-md-'.($_indentLevel*5).'"':'').'>');
+			
+			// Adding content.
+			processStandardContentSubNode($elementNode);
+			
+			// Closing paragraph.
+			echo('</p>');
+			
+			break;
+		case "code":
+			// Parsing properties.
+			$_indentLevel = 0;
+			if(array_key_exists("indent", $elementNode)) {
+				$_indentLevel = $elementNode["indent"];
+			}
+			
+			// Reading and processing the modifiers.
+			$_modNoTopMargin = false;
+			$_modFullWidth = false;
+			$_modHorizontalScroll = false;
+			if(array_key_exists("modifiers", $elementNode)) {
+				for ($i = 0; $i < count($elementNode["modifiers"]); $i++) {
+					switch($elementNode["modifiers"][$i]) {
+						case "no-top-margin":
+							$_modNoTopMargin = true;
+							break;
+						case "full-width":
+							$_modFullWidth = true;
+							break;
+						case "horizontal-scroll":
+							$_modHorizontalScroll = true;
+							break;
+					}
+				}
+			}
+			
+			// Opening code element.
+			echo('<code class="code'.($_modNoTopMargin?'':' mt-10').($_modFullWidth?' w-full d-inline-block':'').
+				($_indentLevel?' ml-md-'.($_indentLevel*5):'').($_modHorizontalScroll?' overflow-x-scroll hide-scrollbar':'').'">');
+			
+			// Adding code lines.
+			if (array_key_exists("code", $elementNode)) {
+				for ($iCodeLine = 0; $iCodeLine < count($elementNode["code"]); $iCodeLine++) {
+					echo(htmlspecialchars($elementNode["code"][$iCodeLine]).'<br>');
+				}
+			}
+			
+			// Closing code element.
+			echo('</code>');
+			
+			break;
 		case "container":
 			// Grabbing the global padding.
 			$_containerPadding = "10";
@@ -187,6 +285,7 @@ function createElementNode(mixed $elementNode) : void {
 			// Reading and processing the modifiers.
 			$_modNoTopMargin = false;
 			$_modNoTopPadding = false;
+			$_modNoBottomPadding = false;
 			$_modNoSizePadding = false;
 			if(array_key_exists("modifiers", $elementNode)) {
 				for ($i = 0; $i < count($elementNode["modifiers"]); $i++) {
@@ -197,6 +296,9 @@ function createElementNode(mixed $elementNode) : void {
 						case "no-top-padding":
 							$_modNoTopPadding = true;
 							break;
+						case "no-bottom-padding":
+							$_modNoBottomPadding = true;
+							break;
 						case "no-side-padding":
 							$_modNoSizePadding = true;
 							break;
@@ -206,18 +308,10 @@ function createElementNode(mixed $elementNode) : void {
 			
 			// Opening container.
 			echo('<div class="p-'.$_containerPadding.($_modNoTopMargin?'':' mt-10').
-				($_modNoSizePadding?' px-0':'').($_modNoTopPadding?' pt-0':'').'">');
+				($_modNoSizePadding?' px-0':'').($_modNoBottomPadding?' pb-0':'').($_modNoTopPadding?' pt-0':'').'">');
 			
 			// Adding content.
-			if(array_key_exists("content", $elementNode)) {
+			processStandardContentSubNode($elementNode);
-				if (array_key_exists("parts", $elementNode["content"])) {
-					for ($iPart = 0; $iPart < count($elementNode["content"]["parts"]); $iPart++) {
-						createElementNode($elementNode["content"]["parts"][$iPart]);
-					}
-				} else {
-					echo(getContentItemText($elementNode["content"], false, true));
-				}
-			}
 			
 			// Closing container.
 			echo('</div>');
@@ -267,15 +361,7 @@ function createElementNode(mixed $elementNode) : void {
 					'"').'>');
 			
 			// Adding content.
-			if(array_key_exists("content", $elementNode)) {
+			processStandardContentSubNode($elementNode);
-				if (array_key_exists("parts", $elementNode["content"])) {
-					for ($iPart = 0; $iPart < count($elementNode["content"]["parts"]); $iPart++) {
-						createElementNode($elementNode["content"]["parts"][$iPart]);
-					}
-				} else {
-					echo(getContentItemText($elementNode["content"], false, true));
-				}
-			}
 			
 			// Closing button.
 			echo('</button>');

content/index.php

@@ -91,8 +91,7 @@ if($content_has_error) {
 								</div>
 							</div>
 						</div>
-						<div class="px-card py-20 bg-light-lm rounded-bottom px-20 bg-very-dark title-bkgd">
+						<div class="px-card py-20 bg-light-lm rounded-bottom px-20 bg-very-dark title-bkgd">');
-							<!--<h3 class="m-0 mb-5 font-size-20 text-center font-weight-semi-bold">This page is still under construction !</h3>-->');
                         echo('<p class="m-0 mb-5">REQUEST_URI: '.$_SERVER['REQUEST_URI'].'</p>');
                         echo('<p class="m-0 mb-5">$requested_content_display_type: '.$requested_content_display_type.'</p>');
                         echo('<p class="m-0 mb-5">$requested_tags: ['.implode(", ", $requested_tags).']</p>');
@@ -213,7 +212,7 @@ if($content_has_error) {
 						startMainCard($_title_icon, $_title_text_main, (is_null($_title_text_sub) ? "" : $_title_text_sub));
 						
 						// Opening the content container.
-						echo('<div id="content-item-container" class="py-01 pb-0 bg-light-lm rounded-bottom px-0 bg-very-dark title-bkgd">');
+						echo('<article id="content-item-container" class="py-01 pb-0 bg-light-lm rounded-bottom px-0 bg-very-dark title-bkgd">');
                         
                         // Adding elements defined in the JSON file.
                         if(array_key_exists("parts", $requested_item_data)) {
@@ -227,26 +226,10 @@ if($content_has_error) {
       
 						// New elements test zone. - START
       
-						/*echo('<div class="content m-0 mx-20">');
-                        echo('<p class="my-0">Text will go here...</p>');
-						echo('</div>');
-						
-						echo('<div class="sidebar-divider m-20 mx-0"></div>');/**/
-						//echo('<hr class="subtle">');
-						
-						/*<td>
-							<a href="#" class="d-flex justify-content-center align-items-center">
-							<p class="m-0 p-0 text-monospace">lscom_fra_x86.exe</p>
-							<button class="btn btn-sm btn-success font-size-18 px-5 ml-15" type="button">
-							<i class="fad fa-save"></i>
-							</button>
-							</a>
-						</td>*/
-      
 						// New elements test zone. - END
 						
 						// Closing the content container.
-						echo('</div>');
+						echo('</article>');
 						
                         // Printing the tags' section at the end of the card
 						echo('<div class="px-20 py-10 bg-light-lm bg-dark-dm rounded-bottom border-top">');

content/items/lscom-cli.json

@@ -19,11 +19,141 @@
   "parts": [
     {
       "type": "container",
-      "modifiers": [],
+      "padding": 20,
+      "modifiers": [
+        "no-top-padding",
+        "no-bottom-padding"
+      ],
       "content": {
-        "key": "lang.english"
+        "parts": [
+          {
+            "type": "h1",
+            "content": {
+              "en": "Introduction",
+              "fr": "Introduction"
             }
           },
+          {
+            "type": "paragraph",
+            "indent": 2,
+            "content": {
+              "en": "A simple cli tool that can list COM ports with their full name easily and cleanly."
+            }
+          },
+          {
+            "type": "paragraph",
+            "indent": 2,
+            "content": {
+              "en": "This tool is intended to replace the tedious task of having to use the <code class=\"code\">mode</code> command, and the <i>Device Manager</i> to find a newly plugged-in device that provides a COM port."
+            }
+          },
+          {
+            "type": "paragraph",
+            "indent": 2,
+            "content": {
+              "en": "The earliest version of Windows that can be used is Windows XP x64 or Windows Vista due to the fact that RegGetValueW is not available on older versions of Windows."
+            }
+          }
+        ]
+      }
+    },
+
+    {
+      "type": "container",
+      "padding": 20,
+      "modifiers": [
+        "no-top-padding",
+        "no-bottom-padding"
+      ],
+      "content": {
+        "parts": [
+          {
+            "type": "h1",
+            "content": {
+              "en": "Usage",
+              "fr": "Utilisation"
+            }
+          },
+          {
+            "type": "code",
+            "indent": 2,
+            "modifiers": [
+              "full-width",
+              "horizontal-scroll"
+            ],
+            "code": [
+              "lscom.exe [-a|--show-all] [-d|--show-device] [-D <str>|--divider <str>] [-f|--show-friendly]",
+              "          [-h|--help] [-n|--show-name-raw] [-P|--no-pretty] [-s|--sort] [-S|--sort-reverse]",
+              "          [-t|--tab-padding] [-v|--version] [-V|--version-only]",
+              "",
+              "Launch arguments:",
+              " -a, --show-all             Display the complete port's name (Equal to '-dfn')",
+              " -d, --show-device          Displays the port's device name",
+              " -D <str>, --divider <str>  Uses the given string or char as a separator (Can be empty string !)",
+              " -f, --show-friendly        Displays the port's friendly name",
+              " -h, --help                 Display this help text",
+              " -n, --show-name-raw        Displays the port's raw name (See remarks section)",
+              " -P, --no-pretty            Disables the pretty printing format (Equal to -D \" \")",
+              " -s, --sort                 Sorts the port based on their raw names in an ascending order",
+              " -S, --sort-reverse         Sorts the port based on their raw names in a descending order",
+              " -t, --tab-padding          Use tabs for padding between the types of names (Overrides '-D')",
+              " -v, --version              Shows the utility's version number and other info",
+              " -V, --version-only         Shows the utility's version number only (Overrides '-v')"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "type": "container",
+      "padding": 20,
+      "modifiers": [
+        "no-top-padding",
+        "no-bottom-padding"
+      ],
+      "content": {
+        "parts": [
+          {
+            "type": "h1",
+            "content": {
+              "en": "Output formatting",
+              "fr": "Formatage de sortie"
+            }
+          },
+          {
+            "type": "code",
+            "indent": 2,
+            "modifiers": [
+              "full-width",
+              "horizontal-scroll"
+            ],
+            "code": [
+              " *┬> No launch arguments:",
+              "  └──> ${Raw name}      => COM1",
+              " *┬> '-d' or '-f'",
+              "  ├──> ${Device name}   => \\Device\\Serial1",
+              "  └──> ${Friendly name} => Communications Port",
+              " *┬> '-d' and '-f'",
+              "  └──> ${Friendly name} [${Device name}]        => Communications Port [\\Device\\Serial1]",
+              " *┬> '-n' and '-d'",
+              "  └──> ${Raw name} [$DeviceName]        => COM1 [\\Device\\Serial1]",
+              " *┬> '-n' and '-f'",
+              "  └──> ${Raw name} - ${Friendly name}   => COM1 - Communications Port",
+              " *┬> '-ndf' or '-a'",
+              "  └──> ${Raw name} - ${Friendly name} [${Device name}]  => COM1 - Communications Port [\\Device\\Serial1]",
+              " *┬> '-ndfp' or '-ap'",
+              "  └──> ${Raw name} ${Friendly name} ${Device name}      => COM1 Communications Port \\Device\\Serial1",
+              " *┬> '-ndfD \";\"' or '-aD \";\"'",
+              "  └──> ${Raw name};${Friendly name};${Device name}      => COM1;Communications Port;\\Device\\Serial1"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "type": "spacer",
+      "size": 2
+    },
     {
       "type": "collapse",
       "title": {

resources/Azias/css/nibblepoker.lu.css

@@ -209,3 +209,7 @@ div.last-inner-collapse-border-fix {
 .content-wrapper {
 	max-width: 100vw;
 }
+
+code.w-full {
+	white-space: pre;
+}