From 394a3e2f3b3e642b716a771159aa2e8c14ecdec7 Mon Sep 17 00:00:00 2001 From: Rex Barzee Date: Sat, 2 Sep 2023 19:42:10 +0100 Subject: [PATCH] Display copyright notice and last modified data from structured data --- c_cpp/double_pointer.html | 2 - c_cpp/faster_c.html | 2 - c_cpp/index.html | 2 - database/auto_incr.html | 2 - database/example_queries.html | 2 - database/housing.html | 2 - database/identifying.html | 2 - database/index.html | 2 - database/normalized.html | 2 - database/sample_data.html | 2 - database/shuffle.html | 2 - database/sql_templates.html | 2 - database/unnormalized.html | 2 - database/workbench.html | 2 - excel/auto_date.html | 2 - excel/grade_book.html | 2 - excel/index.html | 2 - excel/split_names.html | 2 - index.html | 7 +- java/abstract.html | 2 - java/arrays.html | 2 - java/exceptions.html | 2 - java/index.html | 2 - java/intro.html | 2 - java/junit.html | 2 - java/methods.html | 2 - java/override.html | 2 - java/repetition.html | 2 - java/scope.html | 2 - java/selection.html | 2 - java/strings.html | 2 - java/thread_sys_out.html | 2 - java/threads.html | 2 - java/variables.html | 2 - java/visibility.html | 2 - js/array_methods.html | 2 - js/fund_js_code.html | 2 - js/index.html | 2 - math/compare_floats.html | 2 - math/count.html | 2 - math/index.html | 2 - math/loh_quadratic.html | 2 - math/number_guess.html | 2 - math/terms.html | 2 - python/index.html | 2 - python/pandas.html | 4 +- python/pandas_matplotlib.html | 2 - python/word_game.html | 2 - shell/index.html | 2 - shell/set_ops.html | 2 - site/barzee.js | 246 +++++++++++++++++++++------------- site/code.js | 13 ++ site/style.css | 229 ++++++++++++++----------------- teams/signin.html | 2 - web/index.html | 2 - web/symbols.html | 17 +-- 56 files changed, 275 insertions(+), 341 deletions(-) create mode 100644 site/code.js diff --git a/c_cpp/double_pointer.html b/c_cpp/double_pointer.html index 9f99135..26eed30 100644 --- a/c_cpp/double_pointer.html +++ b/c_cpp/double_pointer.html @@ -311,8 +311,6 @@

Further Reading

to understand why double pointer iterations works and is more efficient than single pointer iteration, see chapter 3 of Advanced Programming Techniques.

- -
Last modified: 2022-07-25
diff --git a/c_cpp/faster_c.html b/c_cpp/faster_c.html index f02f77b..b52c3d8 100644 --- a/c_cpp/faster_c.html +++ b/c_cpp/faster_c.html @@ -1179,8 +1179,6 @@

Image Processing Example: A Mode Filter

return dst; } - -
Last modified: 2022-08-02
diff --git a/c_cpp/index.html b/c_cpp/index.html index 2607575..73e4677 100644 --- a/c_cpp/index.html +++ b/c_cpp/index.html @@ -44,8 +44,6 @@

C and C++ Programming Articles

Faster C and C++ Code
Tips for writing faster C and C++ code.
- -
Last modified: 2022-08-02
diff --git a/database/auto_incr.html b/database/auto_incr.html index 1bbff82..0af7386 100644 --- a/database/auto_incr.html +++ b/database/auto_incr.html @@ -245,8 +245,6 @@

MySQL auto_increment

1 2 - -
Last modified: 2022-08-02
diff --git a/database/example_queries.html b/database/example_queries.html index 7f42389..d26d727 100644 --- a/database/example_queries.html +++ b/database/example_queries.html @@ -355,8 +355,6 @@

List of Active Subscriptions

Fishing in the Mojave Samantha Sanders Pine Cone Computing Samantha Sanders - -
Last modified: 2022-08-20
diff --git a/database/housing.html b/database/housing.html index 0fb6215..23e7881 100644 --- a/database/housing.html +++ b/database/housing.html @@ -289,8 +289,6 @@

Answer

housing complex to serve all the types of tenants. Of course, if you can’t imagine needing this extensibility in the future then choose one of the first three solutions.

- -
Last modified: 2022-08-20
diff --git a/database/identifying.html b/database/identifying.html index 4a6f847..0edea39 100644 --- a/database/identifying.html +++ b/database/identifying.html @@ -115,8 +115,6 @@

Example 4

title="Example of an identifying relationship" src="identifying/music_ident.gif"> - -
Last modified: 2022-08-01
diff --git a/database/index.html b/database/index.html index 54066dd..b1af751 100644 --- a/database/index.html +++ b/database/index.html @@ -75,8 +75,6 @@

Database Articles

algorithm for shuffling in place the values in a column of a single table. - -
Last modified: 2022-08-02
diff --git a/database/normalized.html b/database/normalized.html index f36615e..3244ffe 100644 --- a/database/normalized.html +++ b/database/normalized.html @@ -86,8 +86,6 @@

Personal Finance Ledger

A relational database design for a personal finance ledger - -
Last modified: 2022-08-01
diff --git a/database/sample_data.html b/database/sample_data.html index a336f9d..2404373 100644 --- a/database/sample_data.html +++ b/database/sample_data.html @@ -261,8 +261,6 @@

Using the Sample Database

-- will insert 1000 people into the customer table. CALL addCustomers(1000) ; - -
Last modified: 2022-08-20
diff --git a/database/shuffle.html b/database/shuffle.html index 28239e9..ad8af6e 100644 --- a/database/shuffle.html +++ b/database/shuffle.html @@ -100,8 +100,6 @@

Shuffle Column Values

course the table has an index on the primary key. I know that I could simply use ORDER BY RAND(), but this is simply a random permutation of the order and not the same as a shuffle.

- -
Last modified: 2022-08-20
diff --git a/database/sql_templates.html b/database/sql_templates.html index f147abf..182aff8 100644 --- a/database/sql_templates.html +++ b/database/sql_templates.html @@ -163,8 +163,6 @@

Execution Order

4. HAVING aggregate_filter 6. ORDER BY column1, column2, … 7. LIMIT offset, count - -
Last modified: 2022-08-01
diff --git a/database/unnormalized.html b/database/unnormalized.html index 9e454f8..843f9aa 100644 --- a/database/unnormalized.html +++ b/database/unnormalized.html @@ -850,8 +850,6 @@

Normalized to Third Normal Form

WA 98003 - -
Last modified: 2022-08-12
diff --git a/database/workbench.html b/database/workbench.html index 96f2104..216e673 100644 --- a/database/workbench.html +++ b/database/workbench.html @@ -95,8 +95,6 @@

Entering Data with MySQL Workbench

NULL in a cell, right click on the cell and click Set Field To NULL. - -
Last modified: 2022-08-01
diff --git a/excel/auto_date.html b/excel/auto_date.html index 4dc5b7f..a926d42 100644 --- a/excel/auto_date.html +++ b/excel/auto_date.html @@ -174,8 +174,6 @@

Further Reading

programming in VBA from the book Programming Fundamentals in Visual Basic.

- -
Last modified: 2022-08-09
diff --git a/excel/grade_book.html b/excel/grade_book.html index 89dfedf..9a3c4d4 100644 --- a/excel/grade_book.html +++ b/excel/grade_book.html @@ -95,8 +95,6 @@

Excel Features Used

earned each letter grade
  • Nice examples of XY scatter and column charts
    • - -
    Last modified: 2022-08-01
    diff --git a/excel/index.html b/excel/index.html index de7c178..0582a0a 100644 --- a/excel/index.html +++ b/excel/index.html @@ -47,8 +47,6 @@

    Articles about Microsoft Excel

    Explains how to write two formulas to split full names into family and given names
    - -
    Last modified: 2022-08-02
    diff --git a/excel/split_names.html b/excel/split_names.html index c6cb944..409e3e5 100644 --- a/excel/split_names.html +++ b/excel/split_names.html @@ -189,8 +189,6 @@

    Split Full Names in a Spreadsheet

    5 Dalton Wilhemina - -
    Last modified: 2022-08-02
    diff --git a/index.html b/index.html index 33c0756..a3ebd43 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,8 @@ - - + + @@ -52,8 +52,7 @@

    Barzee’s Software Development Notes

    Welcome! I’m glad that you’re here. At this website, you’ll find many articles about developing great software. Each article includes practical code examples that you can use in your software. To get -started, click one of the category links that appear -aboveon the left.

    +started, click one of the category links that appear above.

    May peace be with you always.
    —Rex

    diff --git a/java/abstract.html b/java/abstract.html index 089be00..dc94ab2 100644 --- a/java/abstract.html +++ b/java/abstract.html @@ -367,8 +367,6 @@

    Example

    ⋮ } } - -
    Last modified: 2022-08-03
    diff --git a/java/arrays.html b/java/arrays.html index 1d1f2f7..e42e320 100644 --- a/java/arrays.html +++ b/java/arrays.html @@ -392,8 +392,6 @@

    Further Reading

    You can learn much more about arrays from chapter 1 of Advanced Programming Techniques.

    - -
    Last modified: 2022-07-25
    diff --git a/java/exceptions.html b/java/exceptions.html index dd3e1f6..9c44639 100644 --- a/java/exceptions.html +++ b/java/exceptions.html @@ -501,8 +501,6 @@

    Correct

    } - -
    Last modified: 2022-08-03
    diff --git a/java/index.html b/java/index.html index cb7fbff..eb66f5a 100644 --- a/java/index.html +++ b/java/index.html @@ -90,8 +90,6 @@

    Java Programming Articles

    In a multi-threaded program, how to make System.out write to a different text file for each thread.
    - -
    Last modified: 2022-08-02
    diff --git a/java/intro.html b/java/intro.html index cbca91a..959cdcb 100644 --- a/java/intro.html +++ b/java/intro.html @@ -102,8 +102,6 @@

    Example

    public class MainActivity extends AppCompatActivity { } - -
    Last modified: 2022-08-01
    diff --git a/java/junit.html b/java/junit.html index 8847af3..634bcb1 100644 --- a/java/junit.html +++ b/java/junit.html @@ -371,8 +371,6 @@

    Example

    assertEquals(25, acc.getBalance(), DELTA); } } - -
    Last modified: 2022-08-25
    diff --git a/java/methods.html b/java/methods.html index 4e5e88f..48d58b0 100644 --- a/java/methods.html +++ b/java/methods.html @@ -183,8 +183,6 @@

    Method Overloading

    The Java programmer has to remember only one function name to compute the absolute value: Math.abs - -
    Last modified: 2022-08-03
    diff --git a/java/override.html b/java/override.html index 73ac1f3..db3b38b 100644 --- a/java/override.html +++ b/java/override.html @@ -139,8 +139,6 @@

    Demonstration

    p.m(72.1, "Wow"); // Compile error! No such method in the Parent class. c.m(72.1, "Wow"); - -
    Last modified: 2022-08-03
    diff --git a/java/repetition.html b/java/repetition.html index c6c6293..0ccb19d 100644 --- a/java/repetition.html +++ b/java/repetition.html @@ -227,8 +227,6 @@

    Nested Loops

    } - -
    Last modified: 2022-08-03
    diff --git a/java/scope.html b/java/scope.html index ad64496..bf7d9f7 100644 --- a/java/scope.html +++ b/java/scope.html @@ -350,8 +350,6 @@

    Demonstration

    } } - -
    Last modified: 2022-08-03
    diff --git a/java/selection.html b/java/selection.html index 030a4be..5316b02 100644 --- a/java/selection.html +++ b/java/selection.html @@ -326,8 +326,6 @@

    Operator Precedence

  • || (or)
  • = += -= *= /= %= (assignment operators)
    • - -
    Last modified: 2022-07-22
    diff --git a/java/strings.html b/java/strings.html index 0da0f2c..ae57f3d 100644 --- a/java/strings.html +++ b/java/strings.html @@ -282,8 +282,6 @@

    Other String Methods

  • .toLowerCase()
  • .toUpperCase()
    • - -
    Last modified: 2022-07-22
    diff --git a/java/thread_sys_out.html b/java/thread_sys_out.html index 5cc24ea..5512c59 100644 --- a/java/thread_sys_out.html +++ b/java/thread_sys_out.html @@ -272,8 +272,6 @@

    ThreadPrintStream

    @Override public void close() { getThreadOut().close(); } } - -
    Last modified: 2022-08-03
    diff --git a/java/threads.html b/java/threads.html index a246634..7001136 100644 --- a/java/threads.html +++ b/java/threads.html @@ -422,8 +422,6 @@

    Example

    } } } - -
    Last modified: 2022-08-03
    diff --git a/java/variables.html b/java/variables.html index 58aca89..812e5a8 100644 --- a/java/variables.html +++ b/java/variables.html @@ -252,8 +252,6 @@

    Type Casting Primitive Variables

    // i will store the value 6 - -
    Last modified: 2022-08-02
    diff --git a/java/visibility.html b/java/visibility.html index 8909d48..21b3b21 100644 --- a/java/visibility.html +++ b/java/visibility.html @@ -242,8 +242,6 @@

    Demonstration

    - -
    Last modified: 2022-08-03
    diff --git a/js/array_methods.html b/js/array_methods.html index 46ad7eb..865b14c 100644 --- a/js/array_methods.html +++ b/js/array_methods.html @@ -385,8 +385,6 @@

    Futher Reading

    Programming Techniques in Chapter 1 in the "Binary Search" section - -
    Last modified: 2022-08-09
    diff --git a/js/fund_js_code.html b/js/fund_js_code.html index 4e12bb3..f7ce3f0 100644 --- a/js/fund_js_code.html +++ b/js/fund_js_code.html @@ -1764,8 +1764,6 @@

    Further Reading

    All the example programs in this article came from the book Programming Fundamentals in JavaScript.

    - -
    Last modified: 2022-08-06
    diff --git a/js/index.html b/js/index.html index 45d02f1..e9bd27b 100644 --- a/js/index.html +++ b/js/index.html @@ -48,8 +48,6 @@

    JavaScript Programming Articles

    unique. Shows how to add and use these functions in your JavaScript code. - -
    Last modified: 2022-08-05
    diff --git a/math/compare_floats.html b/math/compare_floats.html index 6307abb..d0d70e7 100644 --- a/math/compare_floats.html +++ b/math/compare_floats.html @@ -236,8 +236,6 @@

    Futher Reading

    numbers, check out the book Really Understand Binary.

    - -
    Last modified: 2022-08-20
    diff --git a/math/count.html b/math/count.html index a94c301..0bf8c7a 100644 --- a/math/count.html +++ b/math/count.html @@ -127,8 +127,6 @@

    Futher Reading

    to perform calculations, check out the book Really Understand Binary.

    - -
    Last modified: 2022-08-01
    diff --git a/math/index.html b/math/index.html index 5257166..655ec5f 100644 --- a/math/index.html +++ b/math/index.html @@ -54,8 +54,6 @@

    Math Articles

    Demonstrates how to correctly compare floating-point numbers for equality
    - -
    Last modified: 2022-08-02
    diff --git a/math/loh_quadratic.html b/math/loh_quadratic.html index 9dccab2..9c21e74 100644 --- a/math/loh_quadratic.html +++ b/math/loh_quadratic.html @@ -182,8 +182,6 @@

    Po-Shen Loh’s Quadratic Method

    same way as we counted for the quadratic method, Loh’s method requires 9 computations, which is fewer than the 11 required by the traditional quadratic formula.

    - -
    Last modified: 2022-08-25
    diff --git a/math/number_guess.html b/math/number_guess.html index 7951f25..b35a082 100644 --- a/math/number_guess.html +++ b/math/number_guess.html @@ -203,8 +203,6 @@

    Python Program

    # Use an f-string to print the user's # integer for the user to see. print(f"Your integer is {n}.") - -
    Last modified: 2022-08-20
    diff --git a/math/terms.html b/math/terms.html index d3244f6..8ba340b 100644 --- a/math/terms.html +++ b/math/terms.html @@ -157,8 +157,6 @@

    Geometry

    and 3 cm tall? 5 cm * 4 cm * 3 cm = 60 cm3 - -
    Last modified: 2022-08-03
    diff --git a/python/index.html b/python/index.html index ee38b5d..38602eb 100644 --- a/python/index.html +++ b/python/index.html @@ -47,8 +47,6 @@

    Python Programming Articles

    A brief introduction for using Pandas and Mathplotlib to draw plots (charts)
    - -
    Last modified: 2022-08-17
    diff --git a/python/pandas.html b/python/pandas.html index d6c64f2..65898e8 100644 --- a/python/pandas.html +++ b/python/pandas.html @@ -39,7 +39,7 @@
    -

    Data Analysis with Pandas--a brief introduction

    +

    Data Analysis with Pandas—a brief introduction

    Data analysis is a process of inspecting, transforming, and viewing data with the goal of discovering useful information.

    @@ -285,8 +285,6 @@

    Further Reading

  • Read and write tabular data
  • Select columns from a DataFrame
    • - -
    Last modified: 2022-08-20
    diff --git a/python/pandas_matplotlib.html b/python/pandas_matplotlib.html index 8e35ee2..ab02780 100644 --- a/python/pandas_matplotlib.html +++ b/python/pandas_matplotlib.html @@ -336,8 +336,6 @@

    Documentation

  • The pandas User Guide contains a long section about creating plots.
    • - -
    Last modified: 2022-08-20
    diff --git a/python/word_game.html b/python/word_game.html index af20b4f..1192a49 100644 --- a/python/word_game.html +++ b/python/word_game.html @@ -394,8 +394,6 @@

    Best Words

    Congratulations! - -
    Last modified: 2022-08-29
    diff --git a/shell/index.html b/shell/index.html index 4c66e5e..cdde1cb 100644 --- a/shell/index.html +++ b/shell/index.html @@ -40,8 +40,6 @@

    Shell Script Articles

    relative complement, and symmetric difference using bash shell script commands - -
    Last modified: 2022-08-02
    diff --git a/shell/set_ops.html b/shell/set_ops.html index 03243b1..754a6f4 100644 --- a/shell/set_ops.html +++ b/shell/set_ops.html @@ -187,8 +187,6 @@

    Symmetric Difference

    comm -3 $TMP1 $TMP2 | sed 's/\t//g' exit 0 - -
    Last modified: 2022-08-20
    diff --git a/site/barzee.js b/site/barzee.js index 63cf217..e216010 100644 --- a/site/barzee.js +++ b/site/barzee.js @@ -2,6 +2,24 @@ if (! window.hasOwnProperty('barzee')) { window.barzee = { + strings : { + siteTitle : 'Barzee’s Notes', + slogan : 'Smart Software Development', + + copyHint : 'Copy code to the clipboard', + + offHint : 'Click to turn off highlights.', + onHint : 'Move mouse over to turn on highlights.\n' + + 'Click to keep highlights on.', + + upHint : 'Scroll to the top of this document', + + modified : 'Last modified', + copyrightNotice : 'Copyright © 2020 Rex A. Barzee. All rights reserved.', + aboutAuthor : 'About the Author', + disclaimer : 'Disclaimer' + }, + /** Reorganizes the structure of the home index.html * file. Surrounds the article with this structure: * @@ -19,18 +37,16 @@ if (! window.hasOwnProperty('barzee')) { let article = document.querySelector('article'); body.removeChild(article); - let top = this.createElem('div', 'top'); - let page = this.createElem('div', 'page'); - body.appendChild(top); - body.appendChild(page); - - let header = this.createHeader('', window.location.protocol); - let nav = this.createNav('', window.location.protocol, null); + let header = this.createHeader('', window.location.protocol, null); let footer = this.createHomeFooter(); + let page = this.createElem('div', 'page'); page.appendChild(header); - page.appendChild(nav); page.appendChild(article); page.appendChild(footer); + + let top = this.createElem('div', 'top'); + body.appendChild(top); + body.appendChild(page); }, @@ -41,72 +57,67 @@ if (! window.hasOwnProperty('barzee')) { let article = document.querySelector('article'); body.removeChild(article); - let top = this.createElem('div', 'top'); + let header = this.createHeader('../', window.location.protocol, + window.location.pathname); let page = this.createElem('div', 'page'); - body.appendChild(top); - body.appendChild(page); - - let header = this.createHeader('../', window.location.protocol); - let nav = this.createNav('../', - window.location.protocol, window.location.pathname); page.appendChild(header); - page.appendChild(nav); page.appendChild(article); + + let top = this.createElem('div', 'top'); + body.appendChild(top); + body.appendChild(page); }, - /** Reorganizes the structure of an HTML document. */ + /** Reorganizes the structure of the other HTML files. */ surroundArticle : function() { let body = document.querySelector('body'); let article = document.querySelector('article'); body.removeChild(article); + let copy = this.createCopyright(); + article.appendChild(copy); - let top = this.createElem('div', 'top'); + let header = this.createHeader('../', + window.location.protocol, null); + let footer = this.createFooter(); let page = this.createElem('div', 'page'); - body.appendChild(top); - body.appendChild(page); - - let header = this.createHeader('../', window.location.protocol); - let nav = this.createNav('../', window.location.protocol, null); - let footer = this.createFooter(article); page.appendChild(header); - page.appendChild(nav); page.appendChild(article); page.appendChild(footer); + + let top = this.createElem('div', 'top'); + body.appendChild(top); + body.appendChild(page); }, - createHeader : function(prefix, protocol) { - let header = this.createElem('header'); + createHeader : function(prefix, protocol, pathname) { + const strings = this.strings; + const createElem = this.createElem; let h2; if (prefix == '') { - h2 = this.createElem('h2', null, null, 'Barzee’s Notes'); + h2 = createElem('h2', null, null, strings.siteTitle); } else { - h2 = this.createElem('h2'); + h2 = createElem('h2'); let suffix = (protocol == 'file:' ? 'index.html' : ''); - let a = this.createElem('a', null, - {href: prefix + suffix}, 'Barzee’s Notes'); + let a = createElem('a', null, + {href : prefix + suffix}, strings.siteTitle); h2.appendChild(a); } - let h3 = this.createElem('h3', null, null, - 'Smart Software Development'); + let h3 = createElem('h3', null, null, strings.slogan); + let nav = this.createNav(prefix, protocol, pathname); + + let header = createElem('header'); header.appendChild(h2); header.appendChild(h3); + header.appendChild(nav); return header; }, createNav : function(prefix, protocol, pathname) { - let nav = this.createElem('nav'); - - let h2 = this.createElem('h2', null, null, 'Categories'); - nav.appendChild(h2); - - let ul = this.createElem('ul'); - nav.appendChild(ul); - let folder = null; if (pathname) { let slash = pathname.lastIndexOf('/'); @@ -116,6 +127,7 @@ if (! window.hasOwnProperty('barzee')) { } let suffix = (protocol == 'file:' ? '/index.html' : '/'); + const createElem = this.createElem; const items = [ ['python', 'Python'], ['js', 'JavaScript'], @@ -127,17 +139,19 @@ if (! window.hasOwnProperty('barzee')) { ['math', 'Math'], ['shell', 'Shell Scripts'] ]; + let ul = createElem('ul'); for (let [directory, name] of items) { - let li = this.createElem('li'); - let div = this.createElem('div'); + let li = createElem('li'); let a = (directory == folder ? - this.createElem('em', null, null, name) : - this.createElem('a', null, - {'href': prefix + directory + suffix}, name)); - div.appendChild(a); - li.appendChild(div); + createElem('em', null, null, name) : + createElem('a', null, + {href : prefix + directory + suffix}, name)); + li.appendChild(a); ul.appendChild(li); } + + let nav = createElem('nav'); + nav.appendChild(ul); return nav; }, @@ -152,55 +166,81 @@ if (! window.hasOwnProperty('barzee')) { * main branch. createModified : function() { let modified = new Date(document.lastModified); - let text = 'Last modified: ' + modified.toLocaleDateString(); + let text = 'Last modified ' + modified.toLocaleDateString(); let div = this.createElem('div', 'modified', null, text); return div; },*/ + createCopyright : function() { + const strings = this.strings; + const createElem = this.createElem; + const copyData = this.getCopyrightData(); + + let inner = createElem('div'); + if (copyData.modified) { + let mod = document.createTextNode( + strings.modified + ' ' + copyData.modified); + inner.appendChild(mod); + } + inner.appendChild(createElem('br')); + let copy = document.createTextNode(copyData.notice); + inner.appendChild(copy); + + //let svg = cse111.createSVG('svgArrowUp', null, strings.upHint); + /* TODO + let svg = document.createTextNode('Up'); + let button = createElem('button', 'up', + {type : 'button', title : strings.upHint}); + button.appendChild(svg); + button.addEventListener('click', function(){window.scroll(0, 0);}); + */ + + let outer = createElem('div', 'modcopy'); + outer.appendChild(inner); + //outer.appendChild(button); + return outer; + }, + + createHomeFooter : function() { - let img = this.createElem('img', null, - {src:'site/images/rappelling.jpg'}); - let about = this.createElem('h2', null, null, 'About the Author'); + const strings = this.strings; + const createElem = this.createElem; + + let about = createElem('h2', null, null, strings.aboutAuthor); + let img = createElem('img', null, + {src : 'site/images/rappelling.jpg'}); let author = this.createAuthor(); + let clear = createElem('div', 'clear'); - let footer = this.createElem('footer'); + let footer = createElem('footer'); footer.appendChild(img); footer.appendChild(about); footer.appendChild(author); + footer.appendChild(clear); return footer; }, - createFooter : function(article) { - let year; - let mod = article.querySelector('.modified'); - if (mod) { - let match = /2[0-9]{3}-[0-9]{2}-[0-9]{2}/.exec(mod.innerText); - if (match) { - year = new Date(match[0]).getFullYear(); - } - } - if (! year) { - year = new Date(document.lastModified).getFullYear(); - } + createFooter : function() { + const strings = this.strings; + const createElem = this.createElem; - let copy = this.createElem('p', 'clear', null, - 'Copyright © '+year+' Rex A. Barzee. All rights reserved.'); - let about = this.createElem('h2', null, null, 'About the Author'); - let img = this.createElem('img', null, - {src:'../site/images/rappelling.jpg'}); + let about = createElem('h2', null, null, strings.aboutAuthor); + let img = createElem('img', null, + {src : '../site/images/rappelling.jpg'}); let author = this.createAuthor(); - let h2 = this.createElem('h2', null, null, 'Disclaimer'); + let h2 = createElem('h2', null, null, strings.disclaimer); let disclaim = this.createDisclaimer(); + let clear = createElem('div', 'clear'); - let footer = this.createElem('footer'); - footer.appendChild(copy); + let footer = createElem('footer'); footer.appendChild(about); footer.appendChild(img); footer.appendChild(author); footer.appendChild(h2); footer.appendChild(disclaim); + footer.appendChild(clear); return footer; }, @@ -218,6 +258,27 @@ if (! window.hasOwnProperty('barzee')) { }, + /** Gets the copyright notice and the last modified date, from + * the search engine structured data in this document's head. + * Returns the two values in an object. */ + getCopyrightData : function() { + let notice = this.strings.copyrightNotice; + let modified; + const query = 'script[type="application/ld+json"]'; + const script = document.head.querySelector(query); + if (script) { + const object = JSON.parse(script.innerHTML); + if (object.hasOwnProperty('copyrightNotice')) { + notice = object.copyrightNotice; + } + if (object.hasOwnProperty('dateModified')) { + modified = object.dateModified; + } + } + return {notice : notice, modified : modified}; + }, + + /** Creates and returns an HTML element in the current document. */ createElem : function(tagName, clss, attrs, text) { let elem = document.createElement(tagName); @@ -230,18 +291,12 @@ if (! window.hasOwnProperty('barzee')) { } } if (text) { - elem.innerText = text; + elem.textContent = text; } return elem; }, - /** Creates and returns a text node in the current document. */ - createText : function(text) { - return document.createTextNode(text); - }, - - /** Fetches the contents from many files on the server. */ fetchFiles : function(protocol, folder, examples) { const self = this; @@ -286,23 +341,23 @@ if (! window.hasOwnProperty('barzee')) { /** Adds line numbers to all 
     elements. */
 		addLineNumbers : function() {
+			const createElem = this.createElem;
 			const newline = /\n|
    /g;
 			const elements = document.querySelectorAll('pre.linenums');
 			for (let pre of elements) {
-				let code = pre.nextElementSibling.innerHTML;
+				let code = pre.nextElementSibling.textContent;
 				if (code.length > 0) {
 
 					// If the pre.linenums element contains
 					// any children nodes, remove them.
 					pre.replaceChildren();
 
-					let span = this.createElem('span', null, null, '1');
+					let span = createElem('span', null, null, '1');
 					pre.appendChild(span);
 					let count = code.split(newline).length;
 					for (let n = 2;  n <= count;  ++n) {
-						pre.appendChild(this.createText('\n'));
-						let span = this.createElem('span',
-								null, null, n.toString());
+						pre.appendChild(document.createTextNode('\n'));
+						let span = createElem('span', null, null, n.toString());
 						pre.appendChild(span);
 					}
 				}
@@ -349,7 +404,7 @@ if (! window.hasOwnProperty('barzee')) {
 				// Notice the dash and en dash in the character class.
 				const dash = /[-–]|–/;
 
-				let text = target.innerText;
+				let text = target.textContent;
 				let candidates = text.split(space);
 				let references = [];
 				for (let candidate of candidates) {
@@ -410,6 +465,7 @@ if (! window.hasOwnProperty('barzee')) {
 			}
 
 			function toggle(event) {
+				const strings = barzee.strings;
 				let target = event.target;
 				let state = target.getAttribute('data-on');
 				if (state == null) {
@@ -420,7 +476,7 @@ if (! window.hasOwnProperty('barzee')) {
 					target.removeEventListener('mouseover', on);
 					target.removeEventListener('mouseout', off);
 					target.setAttribute('data-on', 'true');
-					target.setAttribute('title', 'Click to turn off highlights.');
+					target.setAttribute('title', strings.offHint);
 				}
 				else {
 					// Highlights are on because the user clicked on the
@@ -435,7 +491,7 @@ if (! window.hasOwnProperty('barzee')) {
 					target.removeAttribute('data-on');
 					target.addEventListener('mouseover', on);
 					target.addEventListener('mouseout', off);
-					target.setAttribute('title', 'Move mouse over to turn on highlights.\nClick to keep highlights on.');
+					target.setAttribute('title', strings.onHint);
 				}
 			}
 
@@ -445,7 +501,7 @@ if (! window.hasOwnProperty('barzee')) {
 				target.addEventListener('mouseover', on);
 				target.addEventListener('mouseout', off);
 				target.addEventListener('click', toggle);
-				target.setAttribute('title', 'Move mouse over to turn on highlights.\nClick to keep highlights on.');
+				target.setAttribute('title', strings.onHint);
 			}
 		},
 
@@ -462,14 +518,14 @@ if (! window.hasOwnProperty('barzee')) {
 				self.copyToClipboard(pre);
 			}
 
+			const copyHint = self.strings.copyHint;
+			const createElem = self.createElem;
 			const elements = document.querySelectorAll('div.pre');
 			for (let div of elements) {
-				let image = this.createElem('img', null,
-						{'src': '../site/icons/copy.png',
-						 'alt': 'Copy code to the clipboard'});
-				let button = this.createElem('button', 'copy',
-						{'type': 'button',
-						 'title': 'Copy code to the clipboard'});
+				let image = createElem('img', null,
+						{src : '../site/icons/copy.png', alt : copyHint});
+				let button = createElem('button', 'copy',
+						{type : 'button', title : copyHint});
 				button.addEventListener('click', copyFunc);
 				button.appendChild(image);
 				div.appendChild(button);
diff --git a/site/code.js b/site/code.js
new file mode 100644
index 0000000..7c76a68
--- /dev/null
+++ b/site/code.js
@@ -0,0 +1,13 @@
+'use strict';
+
+if (window.hasOwnProperty('barzee')) {
+	window.addEventListener('DOMContentLoaded', function() {
+		barzee.surroundArticle();
+		//barzee.fetchSourceCode();
+		//barzee.addLineNumbers();
+	});
+
+	window.addEventListener('load', function() {
+		hljs.highlightAll();
+	});
+}
diff --git a/site/style.css b/site/style.css
index d849519..79c2450 100644
--- a/site/style.css
+++ b/site/style.css
@@ -65,12 +65,12 @@ body {
 	line-height: 1.3;
 }
 
-@media (max-width: 60em) {
-	/* Devices with a small screen or in a small window. */
+@media (max-width: 50em) {
+	/* Devices with a small or medium screen or in a small or medium window. */
 	body > div.top { display: none; }
 }
-@media (min-width: 60em) {
-	/* In a medium or large window. */
+@media (min-width: 50em) {
+	/* Large screen or window. */
 	body {
 		z-index: 0;
 		padding-bottom: 2em;
@@ -86,131 +86,82 @@ body {
 		background:
 	linear-gradient(0deg, var(--outside-grad-bottom), var(--outside-grad-top));
 	}
-}
-
-body > div.page {
-	background-color: var(--bg-color);
-	color: var(--fg-color);
-}
 
-div.page > header {
-	margin: 0 2em 1em 2em;
-	padding: 0.5em 0 1em 0;
-	border-bottom: 1px solid var(--border-color);
-}
-
-@media (max-width: 60em) {
-	div.page > nav {
-		display: block;
-		margin: 0 2em 2em 2em;
-	}
-	nav > h2 {
-		display: none;
-	}
-	nav > ul {
-		list-style-type: none;
-	}
-	nav > ul > li {
-		display: inline-block;
-		margin: 0 1em 0.5em 0;
-	}
-}
-@media (min-width: 60em) {
 	body > div.page {
 		position: relative;
 		z-index: 2;
 		box-shadow: 0 0 40px rgba(0, 0, 0, .15);
 		margin: 0 auto;
-		width: 60em;
-	}
-
-	div.page > nav {
-		display: inline-block;
-		margin-left: 2em;
-		width: 8em;
-		vertical-align: top;
-		line-height: 1.2;
-	}
-
-	div.page > article {
-		display: inline-block;
-		width: 46em;
-	}
-
-	nav > h2 {
-		font-size: 120%;
-		font-weight: bold;
-		margin-bottom: 0.5em;
-	}
-	nav > ul {
-		margin-left: 1.25em;
-		list-style-type: disc;
-	}
-	nav > ul > li {
-		margin-bottom: 0.75em;
-		color: var(--bullet-fg-color);
-	}
-	nav > ul > li > div {
-		color: var(--fg-color);
+		width: 50em;
 	}
 }
 
-div.page > article {
-	margin: 0 2em 1em 2em;
-}
 
-div.page > footer {
-	background-color: var(--footer-bg-color);
-	padding: 2em 2em 1em 2em;
-	font-size: 90%;
-}
+/* Links */
+a:link { color: var(--link-before-fg-color); }
+a:hover { color: var(--link-hover-fg-color); }
+a:active { color: var(--link-active-fg-color); }
+a:visited { color: var(--link-visited-fg-color); }
 
 
-footer > h2 {
-	font-size: 135%;
-	font-weight: bold;
-	margin-bottom: 0.5em;
-}
-footer > img {
-	float: right;
-	margin: 0 0 0.5em 0.5em;
-}
-@media (max-width: 60em) {
-	footer > img {
-		width: 6em;
-	}
-}
-@media (min-width: 60em) {
-	footer > img {
-		width: 10em;
-	}
-}
-footer > p {
-	margin-bottom: 1em;
+body > div.page {
+	background-color: var(--bg-color);
+	color: var(--fg-color);
 }
 
+div.page > header {
+	margin: 0 2em 2em 2em;
+	padding-top: 1em;  /* We must use top padding instead of top margin
+			because the browser collapses the top margin for the first
+			child. */
+}
 
 header > h2 {
 	font-size: 250%;
 	font-weight: bold;
+	margin: 0 0;
+	padding: 0 0;
+	line-height: 1;
 	color: var(--outside-grad-top);
 }
-
 header > h3 {
 	font-family: Neucha, "Brush Script MT", cursive;
 	font-size: 150%;
 	color: var(--border-color);
-	margin: 0.5em 0 0 0;
-}
-
-header a:link,
-header a:hover,
-header a:active,
-header a:visited {
+	margin: 0.8em 0 0 0;
+	padding: 0 0;
+	line-height: 1;
+}
+header > h2 > a:link,
+header > h2 > a:hover,
+header > h2 > a:active,
+header > h2 > a:visited {
 	text-decoration: none;
 	color: inherit;
 }
 
+header > nav {
+	margin-top: 1em;
+	border-top: 1px solid var(--border-color);
+	padding-top: 1em;
+	line-height: 1.8;
+}
+header > nav > ul {
+	list-style: none;
+}
+header > nav > ul > li {
+	display: inline-block;
+	margin: 0 0.5em;
+}
+
+
+div.page > article {
+	margin: 0 2em;
+	padding-bottom: 1em;  /* We must use bottom padding instead of
+			bottom margin because the browser collapses the bottom
+			margin for the last child and the article is the last child
+			for index.html files. */
+}
 
 article.home h1 {
 	display: none;
@@ -220,15 +171,7 @@ article.home div.welcome {
 	font-size: 140%;
 	color: var(--border-color);
 	max-width: 27em;
-	margin: 1.5em auto 0 auto;
-}
-@media (max-width: 60em) {
-	article.home div.welcome span.small_win { display: inline; }
-	article.home div.welcome span.medium_win { display: none; }
-}
-@media (min-width: 60em) {
-	article.home div.welcome span.small_win { display: none; }
-	article.home div.welcome span.medium_win { display: inline; }
+	margin: 0 auto;
 }
 
 
@@ -310,13 +253,6 @@ article p {
 }
 
 
-/* Links */
-article a:link { color: var(--link-before-fg-color); }
-article a:hover { color: var(--link-hover-fg-color); }
-article a:active { color: var(--link-active-fg-color); }
-article a:visited { color: var(--link-visited-fg-color); }
-
-
 /* Lists */
 article ol {
 	margin: 0 0 1em 2em;
@@ -414,7 +350,7 @@ article table.features > tbody > tr > td:first-child {
 	text-align: right;
 }
 
-/*  variable promotions */
+/* variable promotions */
 article table.var_promos {
 	margin: 1em auto 1em 0;
 }
@@ -609,9 +545,9 @@ article span.null {
 }
 
 
-/* These elements are normally indented slightly to help distinguish
- * them from text. However, if they are inside a list element (li),
- * don't indent them. */
+/* The following elements are normally indented slightly to help
+ * distinguish them from text. However, if they are inside a list
+ * element (li), don't indent them. */
 article li table.classdia,
 article li div.pre,
 article li pre.console {
@@ -945,22 +881,59 @@ figure.pitch {
 	box-shadow: 0 0 40px rgba(0, 0, 0, .15);
 	background-color: var(--bg-color);
 }
-@media (max-width: 60em) {
+@media (max-width: 50em) {  /* small or medium */
 	figure.pitch {
 		width: 10em;
 	}
 }
-@media (min-width: 60em) {
+@media (min-width: 50em) {  /* large */
 	figure.pitch {
 		width: 20em;
 	}
 }
 
-article div.modified {
+article div.modcopy {
+	margin-top: 2em;
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: end;
+}
+article div.modcopy > div {
+	flex: 1 1 auto;
+	font-size: 90%;
+	line-height: 1.4;
+}
+article div.modcopy > .up {
+	flex: 0 0 auto;
+	margin-left: 1em;
+	cursor: pointer;
+}
+
+
+div.page > footer {
 	clear: both;
-	text-align: right;
-	margin: 2.5em 0 0 0;
+	font-size: 90%;
+	padding: 1em 2em;  /* We must use padding instead of margin so
+			that this entire div has the correct background color. */
+	background-color: var(--footer-bg-color);
 }
-figure.pitch ~ div.modified {
-	text-align: left;
+
+footer h2 {
+	font-size: 135%;
+	font-weight: bold;
+	margin-bottom: 0.5em;
+}
+footer h2:not(:first-child) {
+	margin-top: 1em;
+}
+footer .clear { clear: both; }
+footer img {
+	float: right;
+	margin: 0 0 0.5em 0.5em;
+}
+@media (max-width: 50em) {  /* small or medium */
+	footer img { width: 6em; }
+}
+@media (min-width: 50em) {  /* large */
+	footer img { width: 10em; }
 }
diff --git a/teams/signin.html b/teams/signin.html
index 3361b0e..0b47a47 100644
--- a/teams/signin.html
+++ b/teams/signin.html
@@ -81,8 +81,6 @@ 
    Sign into Microsoft Teams
    
     
    
     
 
-
-
    Last modified: 2022-08-01
    
 
 
 
diff --git a/web/index.html b/web/index.html
index 7d948c4..065b4a1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -39,8 +39,6 @@ 
    Web Programming Articles
    
     
    A web page that enables a developer or writer to easily copy and
     paste common Unicode characters into a document
    
 
-
-
    Last modified: 2023-02-01
    
 
 
 
diff --git a/web/symbols.html b/web/symbols.html
index 204b210..19ec442 100644
--- a/web/symbols.html
+++ b/web/symbols.html
@@ -4,7 +4,6 @@
     
     
     Copy Unicode Characters
-    
 
     
     
@@ -14,6 +13,12 @@
     
     
 
+    
+    
+    
+    
+
+    
     
     
 
-    
-    
-    
-    
-