Add file.timestamp variable for <time> tags

center-key · Aug 13, 2024 · 8461744 · 8461744
1 parent 4c20794
commit 8461744
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -150,21 +150,22 @@ const msg2: string = 'This file is: my-app.ts';
 ```
 
 Example outputs and formatters:
-| Source file text               | Example output value     | Note                                           |
-| ------------------------------ | ------------------------ | ---------------------------------------------- |
-| `{{package.name}}`             | `my-project`             | Value from `name` field in **package.json**    |
-| `{{package.version}}`          | `3.1.4`                  | Value from `version` field in **package.json** |
-| `{{package.version\|size}}`    | `5`                      | Length of the version number string            |
-| `{{file.path}}`                | `src/web/sign-in.html`   | Full path to source file                       |
-| `{{file.folder}}`              | `web`                    | Name of parent folder of the source file       |
-| `{{file.base}}`                | `sign-in.html`           | Source filename with the file extension        |
-| `{{file.name}}`                | `sign-in`                | Source filename without the file extension     |
-| `{{file.ext}}`                 | `.html`                  | File extension of the source file              |
-| `{{file.modified}}`            | `April 7, 2030`          | Formatted date of when file was last modifiled |
-| `{{file.date\|date:"%A"}}`     | `Sunday`                 | Date object for when file was last modifiled   |
-| `<a href={{webRoot}}>Home</a>` | `<a href=../..>Home</a>` | Link is relative to the source folder          |
-| `{{"now"\|date:"%Y-%m-%d"}}`   | `2024-01-21`             | Build date timestamp                           |
-| `{{myVariable\|upcase}}`       | `DARK MODE`              | Custom variable set with: `{% assign myVariable = 'dark mode' %}` |
+| Source file text               | Example output value       | Note                                           |
+| ------------------------------ | -------------------------- | ---------------------------------------------- |
+| `{{package.name}}`             | `my-project`               | Value from `name` field in **package.json**    |
+| `{{package.version}}`          | `3.1.4`                    | Value from `version` field in **package.json** |
+| `{{package.version\|size}}`    | `5`                        | Length of the version number string            |
+| `{{file.path}}`                | `src/web/sign-in.html`     | Full path to source file                       |
+| `{{file.folder}}`              | `web`                      | Name of parent folder of the source file       |
+| `{{file.base}}`                | `sign-in.html`             | Source filename with the file extension        |
+| `{{file.name}}`                | `sign-in`                  | Source filename without the file extension     |
+| `{{file.ext}}`                 | `.html`                    | File extension of the source file              |
+| `{{file.modified}}`            | `April 7, 2030`            | Formatted date of when file was last modifiled |
+| `{{file.date\|date:"%A"}}`     | `Sunday`                   | Date object for when file was last modifiled   |
+| `{{file.timestamp}}`           | `2030-04-07T07:01:36.037Z` | Value for the `datetime` attribute of `<time>` |
+| `<a href={{webRoot}}>Home</a>` | `<a href=../..>Home</a>`   | Link is relative to the source folder          |
+| `{{"now"\|date:"%Y-%m-%d"}}`   | `2024-01-21`               | Build date timestamp                           |
+| `{{myVariable\|upcase}}`       | `DARK MODE`                | Custom variable set with: `{% assign myVariable = 'dark mode' %}` |
 
 _**Note:** Use the `--no-liquid` flag if characters in your source files are inadvertently being interpreted as templating commands and causing errors._
 
@@ -194,6 +195,28 @@ For example, CDN links for the packages `"@fortawesome/fontawesome-free"` and `"
 <script src=https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@{{package.devDependencies.highlight-js|version}}/build/highlight.min.js></script>
 ```
 
+### 7. Last Updated
+The special `file` varaible can be leveraged to create a "Last Updated" field that is
+automatically populated with the date the HTML was most recenlty modified.
+
+For example, an HTML file with following lines:
+```html
+<header>
+   <h1>My Blog</h1>
+   <h2>🚀 How to Watch a Rocket Launch 🚀</h2>
+   <time datetime={{file.timestamp}}>{{file.modified}}</time>
+</header>
+```
+
+will be transformed into something similar to:
+```html
+<header>
+   <h1>My Blog</h1>
+   <h2>🚀 How to Watch a Rocket Launch 🚀</h2>
+   <time datetime=2030-04-07T07:01:36.037Z>April 7, 2030</time>
+</header>
+```
+
 ## C) Application Code
 Even though **replacer-util** is primarily intended for build scripts, the package can be used programmatically in ESM and TypeScript projects.
 

diff --git a/replacer.ts b/replacer.ts
@@ -134,7 +134,8 @@ const replacer = {
          const date =       fs.statSync(origin).mtime;
          const dateFormat = { day: 'numeric', month: 'long', year: 'numeric' } as const;
          const modified =   date.toLocaleString([], dateFormat);  //ex: "April 7, 2030"
-         return { ...parsedPath, dir: dir, folder: folder, path: filePath, date, modified };
+         const timestamp =  date.toISOString();                   //ex: "2030-04-07T07:01:36.037Z"
+         return { ...parsedPath, dir, folder, path: filePath, date, modified, timestamp };
          };
       const getWebRoot = (origin: string) => {
          const depth = origin.substring(source.length).split('/').length - 2;

diff --git a/spec/fixtures/source/mock1.html b/spec/fixtures/source/mock1.html
@@ -15,8 +15,8 @@
       <header>
          <h1>🔍🔍🔍 {{package.name}} 🔍🔍🔍</h1>
          <h2>{{package.description}}</h2>
-         <h3>Last Updated: {{file.modified}}</h3>
          <h3>Weekday: {{file.date | date: "%A"}}</h3>
+         <time datetime={{file.timestamp}}>{{file.modified}}</time>
       </header>
       <main>
          <p>{{slogan}}</p>

diff --git a/spec/fixtures/target/bundle.js b/spec/fixtures/target/bundle.js
diff --git a/spec/fixtures/target/mock1.html b/spec/fixtures/target/mock1.html
@@ -13,8 +13,8 @@
       <header>
          <h1>🔍🔍🔍 replacer-util 🔍🔍🔍</h1>
          <h2>Find and replace strings or template outputs in text files (CLI tool designed for use in npm package.json scripts)</h2>
-         <h3>Last Updated: August 12, 2024</h3>
          <h3>Weekday: Monday</h3>
+         <time datetime=2024-08-13T04:04:52.851Z>August 12, 2024</time>
       </header>
       <main>
          <p>I, for one, welcome our new A.I. module overlords.</p>
@@ -33,7 +33,7 @@ <h3>Weekday: Monday</h3>
    banner:      '🔍🔍🔍 replacer-util v1.3.1 🔍🔍🔍',
    description: 'Find and replace strings or template outputs in text files (CLI tool designed for use in npm package.json scripts)',
    code:        'mock1',
-   file:        '{"root":"","dir":"spec/fixtures/source","base":"mock1.html","ext":".html","name":"mock1","folder":"source","path":"spec/fixtures/source/mock1.html","date":"2024-08-13T03:31:37.663Z","modified":"August 12, 2024"}',
+   file:        '{"root":"","dir":"spec/fixtures/source","base":"mock1.html","ext":".html","name":"mock1","folder":"source","path":"spec/fixtures/source/mock1.html","date":"2024-08-13T04:04:52.851Z","modified":"August 12, 2024","timestamp":"2024-08-13T04:04:52.851Z"}',
    year:        '2024',
    list1:       'A.I. module, A.I. module, A.I. module',
    list2:       'A.I. module, iNsEcT, INSECT, A.I. module',

diff --git a/spec/fixtures/target/subfolder-a/mock2.js b/spec/fixtures/target/subfolder-a/mock2.js
@@ -8,7 +8,7 @@ const info2 = {
    banner:      '🔍🔍🔍 replacer-util v1.3.1 🔍🔍🔍',
    description: 'Find and replace strings or template outputs in text files (CLI tool designed for use in npm package.json scripts)',
    code:        'mock2',
-   file:        '{"root":"","dir":"spec/fixtures/source/subfolder-a","base":"mock2.js","ext":".js","name":"mock2","folder":"subfolder-a","path":"spec/fixtures/source/subfolder-a/mock2.js","date":"2024-02-02T15:02:19.837Z","modified":"February 2, 2024"}',
+   file:        '{"root":"","dir":"spec/fixtures/source/subfolder-a","base":"mock2.js","ext":".js","name":"mock2","folder":"subfolder-a","path":"spec/fixtures/source/subfolder-a/mock2.js","date":"2024-02-02T15:02:19.837Z","modified":"February 2, 2024","timestamp":"2024-02-02T15:02:19.837Z"}',
    year:        '2024',
    list1:       'A.I. module, A.I. module, A.I. module',
    list2:       'A.I. module, iNsEcT, INSECT, A.I. module',

diff --git a/spec/fixtures/target/web/index.html b/spec/fixtures/target/web/index.html
@@ -13,8 +13,8 @@
       <header>
          <h1>🔍🔍🔍 replacer-util 🔍🔍🔍</h1>
          <h2>Find and replace strings or template outputs in text files (CLI tool designed for use in npm package.json scripts)</h2>
-         <h3>Last Updated: August 12, 2024</h3>
          <h3>Weekday: Monday</h3>
+         <time datetime=2024-08-13T04:04:52.851Z>August 12, 2024</time>
       </header>
       <main>
          <p>I, for one, welcome our new insect overlords.</p>
@@ -33,7 +33,7 @@ <h3>Weekday: Monday</h3>
    banner:      '🔍🔍🔍 replacer-util v1.3.1 🔍🔍🔍',
    description: 'Find and replace strings or template outputs in text files (CLI tool designed for use in npm package.json scripts)',
    code:        'mock1',
-   file:        '{"root":"","dir":"spec/fixtures/source","base":"mock1.html","ext":".html","name":"mock1","folder":"source","path":"spec/fixtures/source/mock1.html","date":"2024-08-13T03:31:37.663Z","modified":"August 12, 2024"}',
+   file:        '{"root":"","dir":"spec/fixtures/source","base":"mock1.html","ext":".html","name":"mock1","folder":"source","path":"spec/fixtures/source/mock1.html","date":"2024-08-13T04:04:52.851Z","modified":"August 12, 2024","timestamp":"2024-08-13T04:04:52.851Z"}',
    year:        '2024',
    list1:       'insect, insect, insect',
    list2:       'insect, iNsEcT, INSECT, insect',