{
    "asciidoc.preview.asciidoctorAttributes": {
        "use_asciidoctor_js": false,
        "source-highlighter": "highlight.js"
    }
}

$ mkdir /path/to/demo_process_site
$ cd /path/to/demo_process_site
node -e "fs.writeFileSync('package.json', '{}')"
$ npm install -D -E antora

{
  "devDependencies": {
    "antora": "3.1.10"
  }
}

/build/
/node_modules

= For loops in Python

[.normal]

== Simple for loops in Python

Here are some examples of some simple for loops written in Python.  One of the most common uses of for loops, is to iterate over some array-like object.  In Python, such an object would be a *list*.  Here is a very simple example of such a for loop iterating over a list of strings.

=== For each style of for loop

[source,python,linenums]
----
mylist = ['apple', 'banana', 'cherry', 'grapes', 'peach']

for fruit in mylist:
   print(fruit)
----

When run at the console, this would be the output:
[source,console]
apple
banana
cherry
grapes
peach

This style of for loop is often called a *for each* style, as it is basically saying:

For each fruit in mylist
   print fruit

=== Index-based for loop

Python also has a for loop style that is similar to index-based for loops common to many other programming languages.  Here is an example using the index-based style.

[source,python,linenums]
----
mylist = ['apple', 'banana', 'cherry', 'grapes', 'peach']

for i in range(0, len(mylist)):
   print(mylist[i])
----

Here *i* is an index that is used to select a single element from the list.  The *range()* function goes from the first argument (0) up until but not including the size of the list (len(mylist) returns the size of the list).  Although the index-based for loop is more work to implement, it is also more powerful as it is well suited to handling different elements in the list in a different manner.  The *for each* style of for loop is best suited for cases where you want to treat each element in the same way.

=== An accumulator example

For loops are often used in the *accumulator pattern*.  This pattern is useful for calculating things like totals and averages of a list.  Suppose we only want to get the average of numbers in a list, where the number is greater than 35.  Here is an example of how you can do this:

[source,python,linenums]
----
nums = [30,40,50,40,50,30]

total = 0
count = 0
for num in nums:
   if (num > 35):
      total += num
      count += 1

average = total/count
print("average:", average)
----

Here, *total* and *count* are called *accumulator* variables.  That is because they are used to accumulate a set of results.  The *accumulator* pattern is marked by setting an accumulator variable to 0 before a for loop.  Then inside the for loop the value of that accumulator is updated by adding the next value.  In this particular example, we also accumulate the *count*, because the average should only be based on the numbers that are greater than 35.  So, you could not get the correct average by dividing by the size of *nums*.

The result of running this program would be:

[source,console]
average: 45.0

= While loops in Python

[.normal]

== Simple while loops in Python

For loops are often used to iterate over array-like objects like lists.  So, the number of repeats (number of times the for loop runs), is set by the size of the list.  While loops are repetition statements that will repeat a variable number of times, depending on the actual run time events.  Here is an example of a while loop that will run until the user decides to end the input:

[source,python,linenums]
----
names = []
done = False
while (not done):
   name = input("Enter a name or 'done' if done: ")
   name = name.strip().capitalize()
   if (name == 'Done'):
      done = True
   else:
      names.append(name)

print("names:", names)
----

The while loop will run until the test condition (*not done*) is no longer true.  So, when the variable *done* becomes True, the while loop will end.  Note that we use a selection statement on lines 16-19 to handle the input name.  We use *if* with an *else* clause so that the *names* list does not include the name "Done".  Here is a sample run of this program:

[source,console]
Enter a name or 'done' if done: aaron
Enter a name or 'done' if done: Bob
Enter a name or 'done' if done: Joe
Enter a name or 'done' if done: Heather
Enter a name or 'done' if done: done
names: ['Aaron', 'Bob', 'Joe', 'Heather']

Note that the *capitalize()* function in Python capitalizes just the first letter of the word it is operating on.

[sidebar]
Python did not have Boolean variables at first.  So, like the *C* programming language, you could use any non-zero number for true and zero for false.  You could use things like empty lists for false too.  But, in version 2.3, Python added true Boolean variables.  They are: *True* and *False*.  Note that these variables must start with the capital letters as shown.

=== Using break

Here is a program that does essentially the same thing as the previous program.  But, it makes use of the *break* statement.  The *break* statement is used to immediately terminate the loop that directly contains the *break* statement.  This is the code:

[source,python,linenums]
----
names = []
while (True):
   name = input("Enter a name or leave blank when done: ")
   name = name.strip().capitalize()
   if (name == ""):
      break
   else:
      names.append(name)

print("names:", names)
----

Here on line 2, the while loop's test condition is always True, so this loop will run indefinitely.  So, on line 5 and 6, we test to see if the user has entered a blank name and if so, the *break* statement on line 6 ends the while loop.  If you run the program, you will see the same kind of output as the previous program:

[source,console]
Enter a name or leave blank when done: alice
Enter a name or leave blank when done: Douglas
Enter a name or leave blank when done: rambo
Enter a name or leave blank when done:
names: ['Alice', 'Douglas', 'Rambo']

= For loops in JavaScript

[.normal]

== Simple for loops in JavaScript

Here are some examples of some simple for loops in JavaScript. As with other programming languages, for loops in JavaScript are useful for iterating through arrays or array-like objects.  Here are some exaamples.

=== JavaScript's for each style of for loop

Here is a simple example of a "*for each*" style for loop in JavaScript:

[source,javascript,linenums]
----
let nums = [1, 3, 8, 12, 15];

for (let num of nums) {
  console.log(num);
}
----

The *for (let item of array)* pattern is the JavaScript way of doing a *for each* style for loop.  Take special not of the keyword *of*.  This is how you iterate over all the objects in the array.

[sidebar]
In JavaScript, there is also a *for (let key in object)* pattern.  Note the use of *in*, instead of *of*.  This pattern is used to iterate over all the *keys* (properties) of an object.  This is different from the *for (let item of array)* pattern which iterates over all the *values* in the array.

If you run the above program, this will produce the following output:

[source,console]
1
3
8
12
15

=== Index-based for loop in JavaScript

As with most other programming languages, JavaScript has an index-based style of for loop too.  Here is an example:

[source,javascript,linenums]
----
let nums = [1, 3, 8, 12, 15];

for (let i = 0; i < nums.length; i++) {
  console.log(nums[i]);
}
----

The index-based for loop, makes it easier to treat different elements in the array differently, but is a little more work to set up than the "*for each*" style.  The output produced in this case is:

[source,console]
1
3
8
12
15

Let's rewrite the code, to only print out the elements of the array which have an odd index.

[source,javascript,linenums]
----
let nums = [1, 3, 8, 12, 15];

for (let i = 0; i < nums.length; i++) {
  if ((i%2) == 1) {
    console.log(nums[i]);
  }
}
----

On lines 4-6, we have a selection statement that only prints out the element if the index (*i*) is an odd number.  So, the output when this program is run would be:

[source,console]
3
12

That is because the index is odd for those elements: +
nums[1] is 3 +
nums[3] is 12

=== Iterating over keys of an object

Here is an example of using a for loop to iterate over all the keys of an object:

[source,javascript,linenums]
----
let student = {}
student.name = 'Jane Doe';
student.major = 'ICS';
student.gpa = 3.8;

console.log('Student Jane Doe:');
for (let key in student) {
  console.log(`${key}: ${student[key]}`);
}
----

Lines 1-4 create an object named *student* and define some properties for that *student*.  Line 6 prints a little header.  The for loop on lines 7-9 iterate over all the keys in *student* and display the *key* and the key's *value*.  Here is the output from running this program.

[source,console]
Student Jane Doe:
name: Jane Doe
major: ICS
gpa: 3.8

= While loops in JavaScript

[.normal]

== Simple while loops in JavaScript

Here are some simple examples of while loops in JavaScript.  Like while loops in other programming languages, while loops in JavaScript are repetition statements that repeat until some condition is met.  The number of repetitions for a while loop depend on the code that the while loop is running within.  So, they are useful when you don't know how many repetitions will be needed while writing the code.

=== While loops that run until something is used up

Here is program that uses while loops that would work irrespective of the size of the arrays that are being used:

[source,javascript,linenums]
----
let names = ['Alice', 'Bob', 'Carol']; // assume the contents is determined by something else
let names2 = [];

while (names.length > 0) {
  names2.push(names.pop());
}

while (names2.length > 0) {
  console.log(names2.shift());
}
----

On line 1, we hard-coded the *names* array.  But, assume that we don't know what the *names* array looks like.  The while loop on lines 4-6 will work for any array called *names*.  What it does, is fill an array called *names2* that will have the same elements as *names* but in reverse order.  The while loop on lines 8-10, will just print out the contents of *names2*.  As you can see from the output below, the order of the elements is reversed from the original hard-coded array.

[source,console]
Carol
Bob
Alice

=== Making use of an iterator

While loops can make use of an iterator.  In this next program, we will use the *makeIterator()* function that will create an iterator out of the passed array.  An iterator is an object that will return the next element in the object by calling the *next()* function.  That *next()* function will return false, when all the elements have been processed.

[source,javascript,linenums]
----
function makeIterator(array) {
  let index = 0;

  return {
    next: function() {
      if (index < array.length) {
        return array[index++];
      }
      else {
        return false;
      }
    }
  }
}

const myArray = ['Alice', 'Carol', 'David'];
const myIterator = makeIterator(myArray);

let num;
while ((num = myIterator.next())) {
  console.log(num);
}
----

Lines 1-14 define the *makeIterator()* function.  This creates an *iterator* from the passed array.  On line 2, the variable *index* is declared and set to 0.  When *index* is incremented (on line 7), this makes it so that the selection statement that starts on line 6 can control the number of times that *next()* will return a value from the array.  When the array has been exhausted, the *next()* function will return false (line 10).

Line 16 defines a hard-coded array, called *myArray*.  Line 17 calls the *makeIterator()* function to create the iterator called *myIterator*.  Line 58 defines the variable, *num*, to hold the value returned by *myIterator.next()*.  Lines 18-20 define the while loop that will run, as long as the statement *num = myIterator.next()* is true.  Line 19 just prints out the value from the array.  The output from running this program is:

[source,console]
Alice
Carol
David

[sidebar]
The *for (let item of array)* pattern uses a built-in iterator similar to this iterator to process each item of the array, in the order of the items of the array.  Hopefully, you can see that this pattern makes it simpler to iterate over an array, as opposed to having to define your own iterator.

= Home page

[.normal]

== Click on links on left to navigate site

    <link rel="stylesheet" href="./prism.css">

    <script src="./prism.js">

Prism
	Themes:
		Default
	Languages:
		Markup (html, xml, svg)
		CSS
		C-like
		JavaScript
		AsciiDoc
		C, C#, C++
		Java
		JSON + Web App Manifest
		MongoDB
		PHP
		Python
		React JSX
		Ruby
		Shell session
		SQL
		TypeScript
		XML doc
		YAML
	Plugins:
		Line Highlight
		Line Numbers
		Remove initial line feed
		Normalize Whitespace
		Match braces

= For loops in Python
:source-highlighter: prism
:docinfo: shared-head, shared-footer
:docinfodir: /path/to/demo_process_site/docinfo_files

[.normal]

== Simple for loops in Python

Here are some examples of some simple for loops written in Python.  One of the most common uses of for loops, is to iterate over some array-like object.  In Python, such an object would be a *list*.  Here is a very simple example of such a for loop iterating over a list of strings.

=== For each style of for loop
// rest of file is unchanged

$ cd /path/to/demo_process_site
$ asciidoctor -r prism-syntax-highlighter.rb -a linkcss -a source-highlighter=prism modules/module1/prebuilt/*.adoc
$ asciidoctor -r prism-syntax-highlighter.rb -a linkcss -a source-highlighter=prism modules/module2/prebuilt/*.adoc

$ cd /path/to/demo_process_site
$  tree modules -P "*.html|*.adoc|*.css|*.js" -I node_modules --prune
modules
├── module1
│   ├── nav1.adoc
│   ├── pages
│   │   ├── for_loops.adoc
│   │   └── while_loops.adoc
│   └── prebuilt
│       ├── asciidoctor.css
│       ├── for_loops_pre.adoc
│       ├── for_loops_pre.html
│       ├── prism.css
│       ├── prism.js
│       ├── while_loops_pre.adoc
│       └── while_loops_pre.html
├── module2
│   ├── nav2.adoc
│   ├── pages
│   │   ├── for_loops.adoc
│   │   └── while_loops.adoc
│   └── prebuilt
│       ├── asciidoctor.css
│       ├── for_loops_pre.adoc
│       ├── for_loops_pre.html
│       ├── prism.css
│       ├── prism.js
│       ├── while_loops_pre.adoc
│       └── while_loops_pre.html
└── ROOT
    └── pages
        └── index.adoc

name: demo-process-site
version: ~
title: Demonstration of Antora with Prism
nav:
  - modules/module1/nav1.adoc
  - modules/module2/nav2.adoc

ext:
  collector:
    clean:
      dir: build
    scan:
      - dir: build/generated
        file: '**/*.adoc'
      - dir: ./modules/module1/prebuilt/
        into: ./modules/module1/examples/
      - dir: ./modules/module2/prebuilt/
        into: ./modules/modle2/examples/

site:
  title: Demonstration of Antora with Prism
  start_page: demo-process-site::index.adoc

content:
  sources:
    - url: .
      branches: HEAD

ui:
  bundle:
    url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/HEAD/raw/build/ui-bundle.zip?job=bundle-stable
    snapshot: true

antora:
  extensions:
    - '@antora/collector-extension'

#!/bin/bash

asciidoctor -r prism-syntax-highlighter.rb -a linkcss -a source-highlighter=prism modules/module1/prebuilt/*.adoc
asciidoctor -r prism-syntax-highlighter.rb -a linkcss -a source-highlighter=prism modules/module2/prebuilt/*.adoc

cp modules/module1/prebuilt/*.html modules/module1/examples/
cp modules/module2/prebuilt/*.html modules/module2/examples/

npx antora --log-level=debug antora-playbook.yml --stacktrace

site:
  title: Demonstration of Antora with Prism
  start_page: demo-process-site::index.adoc

content:
  sources:
    - url: .
      branches: HEAD

ui:
  bundle:
    url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/HEAD/raw/build/ui-bundle.zip?job=bundle-stable
    snapshot: true
  supplemental_files: ./supplemental-ui

antora:
  extensions:
    - '@antora/collector-extension'

$ cd /path/to/demo_process_site
$ tree -P "*.css|*.js" -I "node_modules|build|test_files" --prune
.
├── modules
│   ├── module1
│   │   └── prebuilt
│   │       ├── asciidoctor.css
│   │       ├── prism.css
│   │       └── prism.js
│   └── module2
│       └── prebuilt
│           ├── asciidoctor.css
│           ├── prism.css
│           └── prism.js
└── supplemental-ui
    ├── css
    │   ├── asciidoctor.css
    │   └── prism.css
    └── js
        └── prism.js

$ cd /path/to/demo_process_site
$ tree build -P "*.css|*.js|*.html" --prune
build
└── site
    ├── _
    │   ├── css
    │   │   ├── asciidoctor.css
    │   │   ├── prism.css
    │   │   └── site.css
    │   └── js
    │       ├── prism.js
    │       ├── site.js
    │       └── vendor
    │           └── highlight.js
    ├── demo-process-site
    │   ├── index.html
    │   ├── module1
    │   │   ├── for_loops.html
    │   │   └── while_loops.html
    │   └── module2
    │       ├── for_loops.html
    │       └── while_loops.html
    └── index.html

    <link rel="stylesheet" href="../../_/css/prism.css">

    <script src="../../_/js/prism.js"></script>

#!/bin/bash

asciidoctor -r ./prism-syntax-highlighter.rb -a toc=right -a linkcss -a source-highlighter=prism modules/module1/prebuilt/*.adoc
asciidoctor -r ./prism-syntax-highlighter.rb -a toc=right -a linkcss -a source-highlighter=prism modules/module2/prebuilt/*.adoc

cp modules/module1/prebuilt/*.html modules/module1/examples/
cp modules/module2/prebuilt/*.html modules/module2/examples/

npx antora --log-level=debug antora-playbook.yml --stacktrace

  <body class="article toc2 toc-right">

    <link rel="stylesheet" href="../../_/css/asciidoctor.css">

"use_strict";

const cheerio = require('cheerio');
const fs = require('fs');

function register() {
  this.once('sitePublished', ({ contentCatalog }) => {
    contentCatalog.getComponents().forEach(({ versions }) => {
      versions.forEach(({ name: component, version, url }) => {
        const pages = contentCatalog
          .findBy({ component, version, family: 'page' });
        for (const page of pages) {
          //console.log(`path: ${page.out.path}`);
          let path = './build/site/' + page.out.path;
          const $ = cheerio.load(fs.readFileSync(path));
          let body = $(`body[class="article"]`);
          body.attr('class', 'article toc2 toc-right');
          let link = $(`link[href="./asciidoctor.css"]`);
          link.attr('href', '../../_/css/asciidoctor.css');
          fs.writeFile(path, $.html(), function(err) {
            if (err) {
              throw err;
            }
            console.log(`${path} saved`);
          });
        }
      });
    });
  });
}

module.exports = { register };

$ cd /path/to/demo_process_site
$ ./make_all.sh
Site generation complete!
Open file:///home/vern/Documents/demo_process_site/build/site/index.html in a browser to view your site.
./build/site/demo-process-site/module2/while_loops.html saved
./build/site/demo-process-site/index.html saved
./build/site/demo-process-site/module1/for_loops1.html saved
./build/site/demo-process-site/module1/while_loops1.html saved
./build/site/demo-process-site/module2/for_loops.html saved