Puppy Linux Discussion Forum

Hi all,

I have completed development of a new open source tool to document & share useful scripts, of any kind and uploaded that tool here : https://sourceforge.net/projects/websit ... ills-show/

Hope you find it useful.

Best Regards,

Nathan S.R.

Website_Design_For_Technical_Skills_Show

Yes, that's quite a nice web html5/css template. Simple and easy to understand and modify/use, and some good html tag info too.

Thanks to the encouragement given by wiak, I have further improved upon this tool, for readability purposes and uploaded it again, on the above mentioned website ( at the top post on this page ) .

Please re-download it and enjoy !

Also, note that the choices for Background / Foreground Colors, Widths & Heights of Various Elements, Font Choices etc. are left to the Viewers Satisfaction & their Tweaking. I have given clues for all these inside the file, along with a help note at the top.

Hi all,

As a Documenting Tool requires a lot more features like:

1. Navigation Menus For Multiple Pages
2. Embedding Supporting Documents like pdf etc.
3. Embedding Useful Youtube Videos & Other Multimedia References
4. Maps for providing directions to official places

I have added all these features and uploaded the new version of the tool / template now ( Project link is at the top post of this page ) .

Please Download it once again and get benefitted out of it.

Also, do share your feedback on this latest version. Thanks.

P.S. Please extract the zip file provided, first & then open / edit the My_Website.html file, according to your needs. Also, scroll through this file till the end, on the browser, to know all the features.

Best Regards,

Nathan S.R.

nathan-sr wrote: Fri May 27, 2022 10:12 am

P.S. Please extract the zip file provided, first & then open / edit the My_Website.html file, according to your needs. Also, scroll through this file till the end, on the browser, to know all the features.

Nicely expanded, nathan-sr.
I really like your approach to making simple but easily extendable websites. And particularly useful as a quick tutorial showing a great deal about how html5 works.
The other great thing about a template such as you provide is that such sites load super-fast and consume very little in the way of client system resources. Too many websites overdo the bloat, even when the content does not justify it. The other advantage is that you show in a very simple template that there is really no need to utilise heavy website builder sites, which overall produce ridiculously heavy websites that are super-slow in operation.

Yes, there are some great alternative static website building methods that use sophisticated techniques such as Jekyll and Hugo (my favourite), but it is a huge advantage to work with relatively simple and easy to understand css and html first to learn some of the basic principles involved, which is particularly advantageous when, as a starter, provided in a single page format such as your My_Website.html page. Nice work.

Thank you once again, Wiak. I fully agree with you.

The Drag and Drop culture of website designers nowadays, do not offer the flexibility, satisfaction & learning offered by a simple html / css template.

I experienced this myself, when I tried to create a website for my brother's own company and customizing it to my requirements was a pain.

P.S. One more feature is now added as a separate file attachment:

5. For implementing Dropdown Menus, Download the Wiki Page File Attachment on the Project Website Mentioned Above.
This is easy to implement as well and the html file provided, demonstrates it on the last web-designing menu item.

I forgot to mention that a few HTML sensitive / special characters, need to be replaced in our codes, before we can publish them, on the web, using the template that I had given earlier. This can also be easily achieved, using the sample codes, given below. I tested this code on a 187 lines of a shell script that I had, then copied the output generated, to the html template ( in between the pre tags ) & compared the html rendered on the browser, with my original .sh code, through a diff command ( diff -b ignores any whitespace changes ) and it was a Success !

diff -b tabulate1.sh tabulate1_rendered.sh

Though I will paste the code here, I will give an attachment of the same, for easier editing purposes.

As usual, your Feedback is essential to improve things of this sort. Thanks.

For processing a single file of script code, use this command, after changing the name of your input and output files:

cat "Some_File.txt" | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g; s/"/\&quot;/g; s/'"'"'/\&#39;/g' > "Some_File_Html_Passed.txt"

For processing multiple files of script code, use this command, after changing the .sh extension to your file's extension:

Note: install the very useful parallel utility first, before running this command. Also, adjust the -maxdepth value to suit your recursion needs.

find . -maxdepth 1 -iname "*.sh" -print0 | parallel -0 "sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g; s/\"/\&quot;/g; s/'\"'\"'/\&#39;/g' {} > {}_Html_Passed.txt"

For processing a single line of code, use this:
This will give the output on the terminal, which can be copied.

echo; echo 'Your Single Line Code Here'|sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g; s/"/\&quot;/g; s/'"'"'/\&#39;/g'; echo;

Example:

echo; echo 'gsub(/</, "\\&lt;")'|sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g; s/"/\&quot;/g; s/'"'"'/\&#39;/g'; echo;

Just starting to play around with it!

nathan-sr wrote: Fri May 27, 2022 12:15 pm

P.S. One more feature is now added as a separate file attachment:

5. For implementing Dropdown Menus, Download the Wiki Page File Attachment on the Project Website Mentioned Above.
This is easy to implement as well and the html file provided, demonstrates it on the last Web Designing menu item.

This has been further upgraded now, to match real life situations.

Please download it from this direct link : https://sourceforge.net/p/website-desig ... s_Show.zip

Extract this zip file and then view the README.txt file for instructions.

Also, view the linux_fold_long_lines.txt file, for commands that can help in formatting our writeups, that we give, before our scripts / codes.

Please share your feedback, after testing these templates. Thanks.

At first I couldn't see how menu_dropdown.html worked, but I get it now: in the relevant <li class=""dropdown"> tag it calls up the other file writeup_fold.html which contains the same navbar code but also includes the text, which is selectable via <class="ANCHORS" ...>

Regarding 'folding' text, I've also used the 'fold' command many times in the past, but never used perl before for adding line breaks and so on - looks very similar to sed (swap command syntax).

Looking at the html (and for output-ii.html) I remember now a lot of this stuff. It jogged my memory from long time back when I used to write quite a lot of similar html pages. I don't myself do much of that now, but still very useful for quick document sites (and local documentation pages, including links between files) that load fast and can be as versatile as you wish to make them. html5 extras help a lot.

wiak wrote: Mon May 30, 2022 11:35 am

At first I couldn't see how menu_dropdown.html worked, but I get it now: in the relevant <li class=""dropdown"> tag it calls up the other file writeup_fold.html which contains the same navbar code but also includes the text, which is selectable via <class="ANCHORS" ...>

Regarding 'folding' text, I've also used the 'fold' command many times in the past, but never used perl before for adding line breaks and so on - looks very similar to sed (swap command syntax).

html5 extras help a lot.

Thank you for the clarifying posts, that you write, wiak. It is so helpful for others too !
As a bonus, I get more time to focus on the coding stuff, than spending time explaining them.

P.S. the perl command substitutions are easier than the sed ones, as they don't seem to require escaping characters.
I have collected some useful perl one-liners, in the past, for substitutions mainly, through google search and attaching them here.

Forgot to mention, that in the dropdown sub-menu items, we can add the

<br>

tag, in between, to produce line breaks, at the desired points.

This will make it more readable to the viewers of our webpage.

Adding the

<br>

tag even after every item, will make into a vertical list instead of a horizontal one !

HTML language is so flexible.

P.S. As you already mentioned, the dropdown code needs to be copied to every page, that we design, to make it look like the same menu.

nathan-sr wrote: Mon May 30, 2022 3:17 pm

P.S. As you already mentioned, the dropdown code needs to be copied to everye page, that we design, to make it look like the same menu.

Yes, that's another thing that brings back memories of some html static coding I've done. One alternative is to use php to automatically handle that insertion as far as I recall - I tried that back then, but disadvantage is the need to have php running on server of course, and never as fast on big sites.

I never did learn perl, despite it seeming like something all aspiring UNIX/Linux scripters should learn. It always came across as cryptic to me, though I do see that some of these one-liners are actually perfectly easy to understand, and perl is famous for its excellent regular expressions handling.

Most difficult thing I ever experimented with in terms of html and css was multi-column pages that scaled - meaning that if you made the browser window the multi-column webpage continued to be fully displayed (so automatically scaled down to fit via css). There was a nice website on the Internet that detailed the technique, and I followed that, but I can't remember where it was now. However, good though that scaling technique seemed it actually doesn't work well in modern mixed environment where people might view same website on smartphones with small screens - the scaled down text becomes unreadable so different way of presenting the webpage becomes necessary for mobile display. Nevertheless, that scaling (or whatever it was called) was an interesting technique to learn though I expect the newer css implementations make such manipulations easier than it was back then.

Ah, not the original page, but I found the author of the method I'm talking about in a more modern explanation of the techniques he uses for complicated but pretty layouts:
The original I used to use: https://matthewjamestaylor.com/perfect-3-column.html

Newer variants:

https://matthewjamestaylor.com/responsive-columns
https://matthewjamestaylor.com/equal-height-columns
https://wiki.phpwcms.org/doku.php/engli ... mes-taylor

And I see he now also covers how to use the technique for different display devices and screen sizes so works for desktops and mobiles for example. EDIT: What he now explains is about same sort of multi-column design but now using tiny custom tags - I've never seen that before and can't say I understand them on quick look... probably just a refinement/trick to shorten things I imagine.

Probably still very useful, though as I say, I personally resort to static websites using Hugo nowadays since I'm short of dev time overall, and increasingly lazy actually...

Interesting thread this one.

much can be done globally with CSS files steering the actual page construction. Add a CSS editing capability and or CSS templates. This would help having to do repeated insertions of code for each page.

The page navigation is a good example.

This is the code I am using for https://rockedge.org/kernels . The code is orginally for a collapsing expanding navigation menu. I just modified it for a pseudo web file manager to offer some kernels and ISO's. It uses javascript with 1 CSS and 1 JS file. I am using PHP but as a navigation menu can be 100% html.
index.php

<!DOCTYPE html> 

  <head>
   <title>PL-KLV-WDL</title>
    <link rel="stylesheet" type="text/css" href="simpletree.css" />
    <link rel="stylesheet" type="text/css" href="kern.css" />
    <script type="text/javascript" src="simpletreemenu.js"></script>
  </head>
<?php
    
    include  "functions.php";
    include  "scandr2.php";
?>

<body>
<div class="controlBox">
<center>
<a href="javascript:ddtreemenu.flatten('treemenu3', 'expand')" style="font-family:'Arial';font-size:14pt;color:black;">Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu3', 'contract')"style="font-family:'Arial';font-size:14pt;color:#000000;">Collapse All</a>
</center></div>

<div class="Box">
<img src='puppylinux-logo.png'  width='150px' alt='image' onclick="this.style.display = 'none';">
</div>

<div><h2>Puppy Linux, WDL, KLV</h2></div>
 <div id="tree" style="float:left; width:55%; border: 1px solid black;"> 
  <ul id="treemenu3" class="treeview">
<?php
    
//     $path = "/mnt/home/music";
//     $path = "/mnt/home/kernel";
//     $path = "/home/rockedg1/public_html/kernels/data";
       $path = "/var/www";

   $filestructure= scan_directory_recursively($path, false);
   
foreach($filestructure  as $subcontent) {

  if ($subcontent[kind] =='directory'){
	 echo "<li>".$subcontent[name]."\n";
	 echo "<ul>"."\n";

     echo scan_dd($subcontent[content]);
     echo "</ul>"."\n";

 }else{
           if ($subcontent[kind] =='file'){
              $url =($subcontent[path]).($subcontent[name]);
              //echo "<li><a href=".$url." download >".($subcontent[name])." ------------ ".($subcontent[size]/1024)." Kbytes</a>";
              echo "<li><a href=".$url." download >".($subcontent[name])." ------------ ".huf($subcontent[size])."</a>";
          }
        }
}

?>
</ul>
<script type="text/javascript">
       ddtreemenu.createTree("treemenu3", true)
</script>
</div>
</body>

simpletreemenu.js

var persisteduls=new Object()
var ddtreemenu=new Object()

ddtreemenu.closefolder="closed.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="open.gif" //set image path to "open" folder image

//////////No need to edit beyond here///////////////////////////

ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
if (typeof persisteduls[treeid]=="undefined")
persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
for (var i=0; i<ultags.length; i++)
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist==true){ //if enable persist feature
var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload
}
}

ddtreemenu.buildSubTree=function(treeid, ulelement, index){
ulelement.parentNode.className="submenu"
if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index)){
ulelement.setAttribute("rel", "open")
ulelement.style.display="block"
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else
ulelement.setAttribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
ulelement.parentNode.onclick=function(e){
var submenu=this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel")=="closed"){
submenu.style.display="block"
submenu.setAttribute("rel", "open")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else if (submenu.getAttribute("rel")=="open"){
submenu.style.display="none"
submenu.setAttribute("rel", "closed")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")"
}
ddtreemenu.preventpropagate(e)
}
ulelement.onclick=function(e){
ddtreemenu.preventpropagate(e)
}
}

ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
var rootnode=document.getElementById(treeid)
var currentnode=ulelement
currentnode.style.display="block"
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
while (currentnode!=rootnode){
if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
currentnode.style.display="block"
currentnode.setAttribute("rel", "open") //indicate it's open
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
currentnode=currentnode.parentNode
}
}

ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
for (var i=0; i<ultags.length; i++){
ultags[i].style.display=(action=="expand")? "block" : "none"
var relvalue=(action=="expand")? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i].parentNode.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
}
}

ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
}
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
}

////A few utility functions below//////////////////////

ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
isfound=true
thearray.shift() //delete this element from array for efficiency sake
break
}
}
return isfound
}

ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
if (typeof e!="undefined")
e.stopPropagation()
else
event.cancelBubble=true
}

ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

simpletree.css

@charset "windows-1252";
.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
font: 10px arial, sans-serif;
}

.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: #D3D3EA url(b_globe.gif) no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
opacity: 0.95;
filter:alpha(opacity=95); /* For IE8 and earlier */
font: 12px arial, sans-serif;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: white url(closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
font: 12px arial, sans-serif;
font-weight:bold;
color:#000000;
}


.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */	
font-weight:bold; 
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
font-weight: ;
color:#000000;
}

A:link {text-decoration: none; color:#000000;}
A:visited {text-decoration: none; color:#000000;}
A:active {text-decoration: none;  color:#000000;}
A:hover {text-decoration: underline; color: red;}
}

functions.php

<?php
# functions pack

function scan_dd($array) {

  foreach($array as $subcontent) {
 $songs[$i][path] = $subcontent[path];
 $songs[$i][name] = $subcontent[name];
 $songs[$i][kind] = $subcontent[kind];
 $songs[$i][size] = $subcontent[size];
 $songs[$i][content] = $subcontent[content];
    if ($songs[$i][kind] =='directory'){
	 echo "<li>".$subcontent[name]." \n";
     echo "<ul>"."\n";;
	$go_array = $subcontent[content];
	echo scan_dd ($go_array);
    echo "</ul>"."\n";
    }
++$i;
 }
  $data = orderBy($songs);

  foreach($data as $subcontent) {

           if ($subcontent[kind] =='file'){
                 $url =get_path($subcontent[path]);
                 echo "<li><a href=".$url." download >".($subcontent[name])." ------------ ".($subcontent[size])." bytes</a>";
         }
    }
}

function orderBy($data) { 
	usort($data, function($a, $b) {
    return $a['name'] <=> $b['name'];
});
 	 return $data;
}

function get_path($path) {
    $len = strlen($path);
    $pos = (strpos($path,'/hiawatha/'))+(strlen('/hiawatha'));
    $http_path =  substr($path,$pos,$len);
    $go_path = "http://".$_SERVER['SERVER_NAME'].$http_path;
	  return $go_path;
}

function huf($bytes, $decimals = 2) {
  $sz = 'BKMGTP';
  $factor = floor((strlen($bytes) - 1) / 3);
  return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor];
}
?>

It all works with <table>, <ul>, <li> tags. Make the menu using the list tags and the js can hide and display making a expanding collapsing menu.

Hi all,

A further update to this tool/template was necessary, for providing features such as:

1. Drop Down Menu integration for categorising our skills
2. Font-awesome inclusion for enriching menus and sub-menus with icons

Direct link for download : https://sourceforge.net/projects/websit ... t/download

Request your feedback on this latest version. Thanks.

A full list of Font-awesome icons are given on this page : https://www.w3schools.com/icons/fontawe ... _intro.asp

Also, a screenshot of this latest version is given below

Regards,

Nathan S.R.

Getting better all the time..... (you might know the tune)

Always looking to produce better documentation and access to it.

Despite rockedge and myself adding comments about some more complex techniques, including some javascript, what I particularly like about your template document is that it documents how to produce a relatively complex and very nice looking website using relatively straightforward html5 and css. That approach is not only a great teaching/learning methodology but also makes it easy to use by newcomers to such matters too. Until a website becomes particularly huge, or needs complex modifications often, it is really no problem to cut and paste code snippets between new pages. Of course, static website tools, such as Hugo and Jekyll, do automate that work (via client-side javascript and similar) without having to resort to server-side php or similar.
Keep up the good work. Your exemplars of the site improvements as your work progresses are very encouraging.