OSDN Git Service

Adapt index.html to serve arbitrarily specified content.
authorKeith Marshall <keith@users.osdn.me>
Mon, 2 Nov 2020 21:41:07 +0000 (21:41 +0000)
committerKeith Marshall <keith@users.osdn.me>
Mon, 2 Nov 2020 21:41:07 +0000 (21:41 +0000)
* index.html (onload): Delegate content retrieval to...
(load_page): ...this new javascript function, passing URL.
(page-title, page-subtitle): Rename place-holders, using...
(as-page-title, as-page-subtitle): ...these alternative names.

* site.js (load_page): New function; it consolidates...
(new_page, load_page_overlay, load_page_content): ...these, but
excluding "page-title" and "page-subtitle" assignment; do this...
(load_content): ...here, using repeated invocations of...
(update_page_content_header): ...this new function; it propagates any
"page-title" and "page-subtitle" values from the loaded page fragment,
to their corresponding "index.html" place-holders, calling...
(no_break): ...this new function, to substitute non-breaking hyphens
in place of any included ASCII hyphen characters.

* header.html (navbar): Use fully qualified "href" URL links on all
tabs, replacing "onclick" actions.

* about.html fdl.html terms.html (page-title, page-subtitle): Assign
them to hidden <dt> elements, (in <dl style="display: none"> blocks),
whence they may be propagated, via javascript executed on loading of
the page fragment, to their visible "index.html" place-holders.

* terms.html: Additionally, use a fully qualified "href" link, for
reference to "fdl.html".

* missing.html (page-title): Add hidden <dt> entry.

* site.css (dl.masthead): Define new style, to conceal the <dl>
assignments for "page-title", and "page-subtitle"; adjust top margin
spacing for any immediately following paragraph.

about.html
fdl.html
header.html
index.html
missing.html
site.css
site.js
terms.html

index 5978eb9..80c9ac3 100644 (file)
@@ -2,6 +2,9 @@
  *
  * about.html
  *
+ * Default landing page content for the MinGW.org web-site.
+ *
+ *
  * $Id$
  *
  * Written by Keith Marshall <keith@users.osdn.me>
  *    &#8221;   right (closing) typographic double quote
  *
 -->
+<dl class="masthead"><!-- hidden for masthead class -->
+<!-- FIXME: is there a better way to do this?  We need to propagate
+ content to the "as-page-title" and "as-page-subtitle" place-holders,
+ within the "page-content" div of "index.html"; our javascript page
+ loader will explicitly look for these hidden elements, and copy
+ their content into the corresponding visible place-holders.
+-->
+ <dt id="page-title">Welcome to MinGW.org</dt>
+ <dt id="page-subtitle">Home of the MinGW and MSYS Projects</dt>
+</dl><!-- masthead -->
 <p><strong>MinGW</strong>,
 a contraction of &#8220;Minimalist GNU for Windows&#8221;,
 is a minimalist development environment
index 185a4c2..a99d4e2 100644 (file)
--- a/fdl.html
+++ b/fdl.html
  * DAMAGE.
  *
 -->
+<dl class="masthead"><!-- hidden for masthead class -->
+<!-- FIXME: is there a better way to do this?  We need to propagate
+ content to the "as-page-title" and "as-page-subtitle" place-holders,
+ within the "page-content" div of "index.html"; our javascript page
+ loader will explicitly look for these hidden elements, and copy
+ their content into the corresponding visible place-holders.
+-->
+ <dt id="page-title">MinGW.org Licensing</dt>
+ <dt id="page-subtitle">The MinGW Free Documentation Licence</dt>
+</dl><!-- masthead -->
 <p>Copyright &copy; 2020, MinGW.org Project
 </p>
 <p>Redistribution and use in source and 'compiled' forms (SGML, HTML,
index 7d0c8ac..39e2ba1 100644 (file)
  * OF THIS DOCUMENTATION, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
  * DAMAGE.
  *
- *
- * Note: this page assumes browser support for the following numeric
- * HTML entity codes:
- *
- *    &#8209;  non-breaking hyphen
- *    &#8217;  typographic apostrophe
- *
 -->
 <a href="index.html"><div id="logo"></div></a>
 <div class="text">
   <h1>Minimalist GNU for Windows</h1>
   <ul id="navbar">
-    <li><a href="index.html">Home</a></li>
-    <li><a onclick="load_page_overlay('download.html',
-          'MinGW Downloads', 'MinGW.org File Release System')"
-        href="#"
-       >Downloads</a>
-    </li>
-    <li><a onclick="load_page_overlay('terms.html', 'MinGW Licensing',
-          'Terms of Use for MinGW.org Products and Resources')"
-          href="#"
-       >Licensing</a>
-    </li>
-    <li><a onclick="load_page_overlay('docrefs.html',
-          'MinGW Product Documentation',
-          'Links to Documentation Resources for MinGW.org Products')"
-        href="#"
-       >Documentation</a>
-    </li>
-    <li><a onclick="load_page_overlay('contact.html',
-          'Contacting MinGW.org',
-          'When the Web&#8209;Site doesn&#8217;t Provide an Answer')"
-        href="#"
-       >Contact Us</a>
-    </li>
+    <li><a href="index.html?page=about.html">Home</a></li>
+    <li><a href="index.html?page=terms.html">Licensing</a></li>
+    <li><a href="index.html?page=download.html">Downloads</a></li>
+    <li><a href="index.html?page=docs.html">Documentation</a></li>
+    <li><a href="index.html?page=contact.html">Contact Us</a></li>
   </ul>
 </div>
 
index 840ae87..3de3e67 100644 (file)
   <link rel="stylesheet" href="site.css" />
   <script src="site.js"></script>
  </head>
- <body onload="new_page('about.html', 'Home of the MinGW and MSYS Projects')">
+ <body onload="load_page(document.URL)">
   <div id="header"></div>
   <div class="page-view">
    <div class="masthead">
-    <h1 id="page-title"></h1>
-    <h2 id="page-subtitle"></h2>
+    <h1 id="as-page-title"></h1>
+    <h2 id="as-page-subtitle"></h2>
    </div><!-- masthead --><hr />
    <div id="page-content"></div>
   </div><!-- page-view -->
index 49a11fd..2fb995b 100644 (file)
  *    &#8217;  typographic apostrophe
  *
 -->
+<dl class="masthead"><!-- hidden for masthead class -->
+<!-- FIXME: is there a better way to do this?  We need to propagate
+ content to the "as-page-title" and "as-page-subtitle" place-holders,
+ within the "page-content" div of "index.html"; our javascript page
+ loader will explicitly look for these hidden elements, and copy
+ their content into the corresponding visible place-holders.
+-->
+ <dt id="page-title">MinGW.org Server Error</dt>
+</dl><!-- masthead -->
 <h2>Page Not Found</h2>
 <p>The MinGW.org web&#8209;site is undergoing an overhaul,
 whilst in the process of transferring to a new hosting provider.
index 6db77ac..4ace8d6 100644 (file)
--- a/site.css
+++ b/site.css
@@ -212,6 +212,23 @@ p+ul
    */
   margin: 0; padding-top: 1px; font-weight: normal;
 }
+dl.masthead
+{ /* On page overlays, we use a definition list to specify the
+   * page title, and subtitle, which are to be propagated to the
+   * masthead section within the page content; the content of the
+   * definition list, itself, should not be directly visible.
+   */
+  display: none;
+}
+dl.masthead+p
+{ /* The masthead section is separated from the remaining page
+   * content, by a horizontal rule; to keep white space balanced,
+   * above and below this rule, when it is immediately followed
+   * by a paragraph, with no intervening heading, we need to
+   * explicitly adjust the paragraph margin.
+   */
+  margin-top: 1.3em;
+}
 
 /* Supplementary formatting for sections with numbered headings
  * ============================================================
diff --git a/site.js b/site.js
index c625c21..4c8cee2 100644 (file)
--- a/site.js
+++ b/site.js
@@ -39,6 +39,25 @@ function set_content( item, value )
   if( element ) element.innerHTML = value;
 }
 
+function no_break( text )
+{ /* Helper function to replace all occurrences of ASCII hyphen-minus,
+   * within "text", by substitution of HTML non-breaking hyphen.
+   */
+  return text.replace( /-/g, "&#8209;" );
+}
+
+function update_page_content_header( tag )
+{ /* Update the "page-title" and "page-subtitle" content-header text,
+   * by substitution into the "as-page-title" and "as-page-subtitle"
+   * place-holder elements, respectively.
+   */
+  var element = document.getElementById( "page-".concat( tag ));
+  if( element )
+  { if( tag == "title" ) document.title = element.innerHTML;
+    set_content( "as-page-".concat( tag ), no_break( element.innerHTML ));
+  }
+}
+
 function load_content( container, src )
 { /* Set the content of the specified HTML "container" element, by
    * injection of the entire contents of an external file which is
@@ -51,6 +70,8 @@ function load_content( container, src )
       switch( this.status )
       { case 200:
          set_content( container, this.responseText );
+         update_page_content_header( "title" );
+         update_page_content_header( "subtitle" );
          break;
        case 404:
          load_content( container, "missing.html" );
@@ -60,34 +81,19 @@ function load_content( container, src )
   request_handler.send();
 }
 
-function load_page_content( src, subtitle )
-{ /* Propagate the HTML document title to the "masthead" display,
-   * update the displayed page subtitle, (which may be null), and
-   * load the page content from the specified "src" file.
-   */
-  set_content( "page-content", null );
-  set_content( "page-title", document.title );
-  set_content( "page-subtitle", subtitle );
-  load_content( "page-content", src );
-}
-
-function load_page_overlay( src, title, subtitle )
-{ /* Replace the existing page content from the specified overlay
-   * "src" file, updating the page title, and subtitle, as may be
-   * appropriate.
-   */
-  if( title ) document.title = title;
-  load_page_content( src, subtitle );
-}
-
-function new_page( src, subtitle )
-{ /* Create a new page display, starting from scratch; assign the
-   * displayed title from the HTML document title attribute, adding
-   * the specified subtitle, lay out the standard page header block,
-   * and load the page content from the "src" file.
+function load_page( src )
+{ /* Load page content from the HTML fragment file, as determined
+   * from the specified "src" URL; if no alternative fragment name
+   * is specified, fall back to loading "about.html".
    */
+  const ref = "?page=";
+  const div = "page-content";
+  set_content( div, null );
   load_content( "header", "header.html" );
-  load_page_content( src, subtitle );
+  if( src.includes( ref ) )
+    src = src.substring( src.indexOf( ref ) + ref.length, src.length );
+  else src = "about.html";
+  load_content( div, src );
 }
 
 /* $RCSfile$: end of file */
index d7461d9..5ab8347 100644 (file)
  *    &#8221;   right (closing) typographic double quote
  *
 -->
+<dl class="masthead"><!-- hidden for masthead class -->
+<!-- FIXME: is there a better way to do this?  We need to propagate
+ content to the "as-page-title" and "as-page-subtitle" place-holders,
+ within the "page-content" div of "index.html"; our javascript page
+ loader will explicitly look for these hidden elements, and copy
+ their content into the corresponding visible place-holders.
+-->
+ <dt id="page-title">MinGW.org Licensing</dt>
+ <dt id="page-subtitle">Terms of Use for MinGW.org Products and Resources</dt>
+</dl><!-- masthead -->
 <div class="h3-numbered">
 <p>Each of the various packages,
 which are distributed by MinGW.org,
@@ -60,9 +70,7 @@ are as follows:&mdash;
 <h3>MinGW.org Web&#8209;Site Content</h3>
 <p>Publication of the content of this MinGW.org web&#8209;site is
 subject to the terms of
-<a href="#"
-onclick="load_page_content('fdl.html','The MinGW Free Documentation Licence')"
->this MinGW specific adaptation</a>
+<a href="index.html?page=fdl.html">this MinGW specific adaptation</a>
 of the
 <a rel="noopener noreferrer" target="_blank"
 href="https://www.freebsd.org/copyright/freebsd-doc-license.html"