Skip to content

Commit

Permalink
Framework for articles
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpilafian
dpilafian committed Apr 20, 2024
1 parent 38102fb commit 1149415
Show file tree
Hide file tree
Showing 18 changed files with 532 additions and 282 deletions.
21 changes: 14 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,37 @@
<img src=https://think-metric.org/graphics/think-metric-logo.png width=100 alt=logo>

# Think Metric
## 🇺🇸 Americans for Metrication 🇺🇸

_We promote metric units for casual everyday use in America._
### 🇺🇸 Americans for Metrication 🇺🇸

[![License:MIT](https://img.shields.io/badge/License-CC0-blue.svg)](https://github.com/center-key/think-metric/blob/main/LICENSE.txt)
[![Build](https://github.com/center-key/think-metric/actions/workflows/run-spec-on-push.yaml/badge.svg)](https://github.com/center-key/think-metric/actions/workflows/run-spec-on-push.yaml)
[![Publish Website](https://github.com/center-key/think-metric/actions/workflows/publish-website.yaml/badge.svg)](https://github.com/center-key/think-metric/actions/workflows/publish-website.yaml)

This project manages the website:
This project manages the website:<br>
https://think-metric.org

The logo is built using:
The logo is built using:<br>
https://think-metric.org/logo.html

Pull requests welcome.
## Practical Ways to Go Metric

We promote metric units for casual everyday use in America. The goal is to speed up metrication to boost America's economic competitiveness and champion good jobs.

This project and the content published is free to reuse under a permissive Creative Commons license.

### Contributor Notes
## Contributor Notes
```shell
$ cd think-metric
$ npm install
$ npm test
$ npm run interactive
```

To push changes to the live website:<br>
github.com project page > _Actions_ > _Publish Website_ > _Run workflow_

Pull requests welcome. You can help by contributing anything from minor typo fixes to writing new articles.

<br>

---
Expand Down
10 changes: 7 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,22 @@
"clean": [
"rimraf docs"
],
"generated": [
"replacer src/website/article --ext=.html --content={{lt}}li{{gt}}{{lt}}a{{space}}href{{equals}}{[webRoot]}/article/{{file.folder}}{{gt}}{{articleTitle}}{{lt}}/a{{gt}}{{lt}}/li{{gt}} src/templates/generated --find=[webRoot] --replacement={webRoot} --concat=articles.html"
],
"build": [
"copy-file src/cname.txt docs/CNAME",
"copy-folder src/website/graphics docs/graphics",
"copy-folder src/website/article docs/article --ext=.png,.jpg",
"lessc src/website/style.less docs/style.css",
"replacer src/website --ext=.html docs"
]
},
"scripts": {
"pretest": "run-scripts clean build",
"pretest": "run-scripts clean generated build",
"test": "html-validator docs '--ignore=Section lacks heading.'",
"preinteractive": "npm test",
"interactive": "browser-sync . --startPath docs/index.html --files docs"
"interactive": "browser-sync . --startPath docs --files docs"
},
"dependencies": {
"@fortawesome/fontawesome-free": "~6.5",
Expand All @@ -41,7 +45,7 @@
"copy-folder-util": "~1.1",
"dna-engine": "~3.1",
"less": "~4.2",
"replacer-util": "~1.2",
"replacer-util": "~1.3",
"rimraf": "~5.0",
"run-scripts-util": "~1.2",
"w3c-html-validator": "~1.7",
Expand Down
63 changes: 47 additions & 16 deletions src/templates/doc-begin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,44 +7,70 @@
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name=robots content="index, follow">
<meta name=description content="Think Metric 🇺🇸 {{pageTitle}} 🇺🇸 Practical ways to go metric">
<meta name=description content="Think Metric 🇺🇸 {{articleTitle}} 🇺🇸 Practical ways to go metric">
<meta name=apple-mobile-web-app-title content="Think Metric">
<meta name=twitter:card content="summary_large_image">
<meta name=twitter:title content="{{pageTitle}}">
<meta name=twitter:title content="{{articleTitle}}">
<meta name=twitter:description content="Think Metric 🇺🇸 Americans for Metrication: Practical ways to go metric">
<meta property=og:title content="{{pageTitle}}">
<meta property=og:title content="{{articleTitle}}">
<meta property=og:description content="Think Metric 🇺🇸 Americans for Metrication: Practical ways to go metric">
<meta property=og:type content="website">
<meta property=og:image content="https://think-metric.org/graphics/social-media/think-metric-logo-card.png">
<meta property=og:image:alt content="Logo">
<title>{{pageTitle}} 🇺🇸 Think Metric</title>
<title>{{articleTitle}} 🇺🇸 Think Metric</title>
<link rel=icon href={{webRoot}}/graphics/bookmark.png>
<link rel=apple-touch-icon href={{webRoot}}/graphics/think-metric-logo.png>
<link rel=preconnect href=https://fonts.googleapis.com>
<link rel=preconnect href=https://fonts.gstatic.com crossorigin>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@{{pkg.dependencies.-fortawesome-fontawesome-free|version}}/css/all.min.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@{{pkg.dependencies.web-ignition|version}}/dist/reset.min.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@{{pkg.dependencies.web-ignition|version}}/dist/layouts/zebra-sections.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@{{package.dependencies.-fortawesome-fontawesome-free|version}}/css/all.min.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna-engine@{{package.dependencies.dna-engine|version}}/dist/dna-engine.min.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@{{package.dependencies.web-ignition|version}}/dist/reset.min.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@{{package.dependencies.web-ignition|version}}/dist/layouts/zebra-sections.css>
<link rel=stylesheet href={{webRoot}}/style.css>
<script src=https://cdn.jsdelivr.net/npm/web-ignition@{{pkg.dependencies.web-ignition|version}}/dist/lib-x.min.js></script>
<script>
<script defer src=https://cdn.jsdelivr.net/npm/dna-engine@{{package.dependencies.dna-engine|version}}/dist/dna-engine.min.js></script>
<script defer src=https://cdn.jsdelivr.net/npm/web-ignition@{{package.dependencies.web-ignition|version}}/dist/lib-x.min.js></script>
<script data-on-load=app.start>
const app = {
setupArticlePage() {
// <div id=article-nav>
// <i data-icon=circle-left></i>
// <i data-icon=circle-right></i>
// <ul><li><a href=../../article/go-metric>Go Metric<a><li>...
// </div>
const container = globalThis.document.getElementById('article-nav');
const articles = [...container.querySelectorAll('ul >li >a')];
const header = 'main >section:first-child >h2';
const title = globalThis.document.querySelector(header).textContent;
const index = articles.findIndex(article => article.textContent === title);
const configure = (button, index) => {
button.setAttribute('data-href', articles[index]?.getAttribute('href'));
button.setAttribute('title', articles[index]?.textContent);
button.classList.add(index > -1 && index < articles.length ? 'show' : 'hide');
};
configure(container.children[0], index - 1); //previous article
configure(container.children[1], index + 1); //next article
container.classList.add('show');
},
start() {
if (globalThis.location.href.includes('/article/'))
app.setupArticlePage();
console.log(globalThis.document.getElementById('article-nav')); ///////
// Link Menu HTML example:
// <nav id=link-menu><a href=.>Home</a><a href=about>About</a></nav>
const linkMenu = globalThis.document.getElementById('link-menu');
const setCurrentPage = () => {
const pageName = globalThis.location.pathname.replace(/index.[a-z]*$/, '').replace(/\/$/, '').replace(/.*\//, '');
const active = linkMenu.querySelector(`a[href$="${pageName}"]`);
const current = active || linkMenu.firstElementChild;
current.classList.add('current');
console.log({name, active, current});
const pageName = globalThis.location.pathname
.replace(/index.[a-z]*$/, '').replace(/\/$/, '').replace(/.*\//, '');
const active = linkMenu.querySelector(`a[href$="${pageName}"]`);
const isDefaultPage = /(\/|index\.[a-z]*)$/.test(globalThis.location.href);
const onHomePage = linkMenu.children[0].getAttribute('href') === '.' && isDefaultPage;
const current = onHomePage ? linkMenu.firstElementChild : active;
current?.classList.add('current');
}
if (linkMenu)
setCurrentPage();
},
};
libX.dom.onReady(app.start);
</script>
</head>
<body>
Expand All @@ -53,10 +79,15 @@
<nav id=link-menu>
<a href={{webRoot}}>Home</a>
<a href={{webRoot}}/products>Products</a>
<a href={{webRoot}}/poetry>Poetry</a>
<a href={{webRoot}}/just-use-it>Just Use It</a>
<a href={{webRoot}}/elsewhere>Elsewhere</a>
</nav>
<h1>Think Metric</h1>
<h2>🇺🇸&nbsp;Americans for Metrication&nbsp;🇺🇸</h2>
<img src={{webRoot}}/graphics/think-metric-logo.png alt=logo>
<div id=article-nav>
<i data-icon=circle-left></i>
<i data-icon=circle-right></i>
<ul>{% render 'src/templates/generated/articles.html' %}</ul>
</div>
</header>
2 changes: 2 additions & 0 deletions src/templates/generated/articles.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<li><a href={{webRoot}}/article/metric-poetry>Metric Poetry</a></li>
<li><a href={{webRoot}}/article/metrication-is-the-path-of-least-resistance>Metrication is the Path of Least Resistance</a></li>
Loading

0 comments on commit 1149415

Please sign in to comment.