diff options
| -rwxr-xr-x | .gitignore | 3 | ||||
| -rw-r--r-- | README.md | 10 | ||||
| -rw-r--r-- | banner.png | bin | 0 -> 213596 bytes | |||
| -rw-r--r-- | favicon.svg | 3 | ||||
| -rw-r--r-- | index.html | 600 |
5 files changed, 616 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..712a668 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +# OS artefacts +.DS_Store +Thumbs.db diff --git a/README.md b/README.md new file mode 100644 index 0000000..7d2f110 --- /dev/null +++ b/README.md @@ -0,0 +1,10 @@ + + + +**ChronVer (Chronological Versioning) is calendar-based versioning.** In the age of rapid software releases, knowing _when_ something released is more important than arbitrary numbers from an outdated versioning system that most people never adhere to anyway. Finally, versioning for the rest of us. + +--- + +This repo contains the homepage of [https://chronver.org](https://chronver.org). + +Find the module and CLI on [JSR](https://jsr.io/@chronver/chronver) or [Github](https://github.com/ChronVer/chronver). diff --git a/banner.png b/banner.png Binary files differnew file mode 100644 index 0000000..4cc1bf5 --- /dev/null +++ b/banner.png diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..d0e99b6 --- /dev/null +++ b/favicon.svg @@ -0,0 +1,3 @@ +<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> + <path d="M10.461 7.97L8.667 8.553L8.667 6.667C8.667 6.299 8.369 6 8 6C7.631 6 7.333 6.299 7.333 6.667L7.333 8.553L5.539 7.97C5.191 7.856 4.813 8.048 4.699 8.398C4.585 8.748 4.777 9.124 5.128 9.238L6.922 9.821L5.813 11.347C5.597 11.645 5.663 12.062 5.961 12.279C6.079 12.365 6.216 12.406 6.352 12.406C6.559 12.406 6.761 12.311 6.892 12.131L8 10.605L9.109 12.131C9.239 12.31 9.442 12.405 9.649 12.405C9.784 12.405 9.921 12.364 10.04 12.278C10.337 12.061 10.404 11.645 10.187 11.347L9.079 9.821L10.873 9.238C11.223 9.124 11.415 8.748 11.301 8.398C11.186 8.048 10.81 7.856 10.461 7.97ZM14 1.333L12.667 1.333L12.667 0.667C12.667 0.299 12.369 0 12 0C11.631 0 11.333 0.299 11.333 0.667L11.333 1.333L4.667 1.333L4.667 0.667C4.667 0.299 4.369 0 4 0C3.631 0 3.333 0.299 3.333 0.667L3.333 1.333L2 1.333C0.897 1.333 0 2.231 0 3.333L0 14C0 15.103 0.897 16 2 16L14 16C15.103 16 16 15.103 16 14L16 3.333C16 2.231 15.103 1.333 14 1.333ZM14.667 14C14.667 14.368 14.368 14.667 14 14.667L2 14.667C1.632 14.667 1.333 14.367 1.333 14L1.333 3.333C1.333 2.965 1.632 2.667 2 2.667L3.333 2.667L3.333 4C3.333 4.368 3.631 4.667 4 4.667C4.369 4.667 4.667 4.368 4.667 4L4.667 2.667L11.333 2.667L11.333 4C11.333 4.368 11.631 4.667 12 4.667C12.369 4.667 12.667 4.368 12.667 4L12.667 2.667L14 2.667C14.368 2.667 14.667 2.966 14.667 3.333L14.667 14Z"/> +</svg> diff --git a/index.html b/index.html new file mode 100644 index 0000000..66b4ba9 --- /dev/null +++ b/index.html @@ -0,0 +1,600 @@ + +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"/> + + <meta name="description" content="ChronVer (Chronological Versioning) is calendar-based versioning, for the rest of us."/> + <meta name="title" content="ChronVer • Versioning for the rest of us"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + + <meta property="og:description" content="ChronVer (Chronological Versioning) is calendar-based versioning, for the rest of us."/> + <meta property="og:image" content="./banner.png"/> + <meta property="og:image:height" content="400"/> + <meta property="og:image:width" content="1200"/> + <meta property="og:site_name" content="ChronVer"/> + <meta property="og:title" content="ChronVer"/> + <meta property="og:type" content="website"/> + <meta property="og:url" content="https://chronver.org"/> + + <title>ChronVer • Versioning for the rest of us</title> + + <link rel="canonical" href="https://chronver.org"/> + <link rel="mask-icon" href="favicon.svg" color="#111"/> + <link rel="shortcut icon" href="favicon.svg"/> + + <link href="https://uchu.style/color_expanded.css" rel="stylesheet"/> + + <style> + *, *::before, *::after { + margin: 0; padding: 0; + box-sizing: inherit; + } + + html, body { + width: 100%; height: 100%; + } + + html { + box-sizing: border-box; + + @media (min-width: 601px) { + font-size: 16px; + } + + @media (max-width: 600px) { + font-size: 13px; + } + } + + body { + align-items: center; + background-color: var(--uchu-yang); + color: var(--uchu-yin); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + line-height: 1.33; + margin-left: auto; + margin-right: auto; + padding-bottom: 2rem; + max-width: 700px; + + @media (min-width: 801px) { + margin-top: 2rem; + } + + @media (max-width: 800px) { + margin-top: 1rem; + padding-right: 1rem; + padding-left: 1rem; + } + } + + header { + width: 100%; height: 100%; + + background-image: url("banner.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border-bottom-right-radius: 1rem; + border-top-left-radius: 1rem; + + @media (min-width: 601px) { + max-height: 200px; + } + + @media (max-width: 600px) { + max-height: 150px; + } + } + + h1, h2 { + color: transparent; + font-size: 0; + line-height: 0; + } + + h3 { + margin-bottom: 1rem; + } + + .compare { + display: flex; + flex-direction: row; + list-style-type: none; + text-align: center; + width: 100%; + + li { + padding: 1rem; + position: relative; + width: 50%; + + &.tired { + &::after { + width: 3px; height: 100%; + bottom: 0; right: -1.5px; + + background-color: var(--uchu-pink-1); + content: ""; + position: absolute; + } + + .title { + color: var(--uchu-gray-5); + } + + .version { + color: var(--uchu-gray-7); + } + } + + &.wired { + .title { + color: var(--uchu-pink-5); + } + } + + .title { + font-size: 80%; + font-weight: 600; + letter-spacing: 0.1rem; + text-transform: uppercase; + } + + .question { + font-size: 1.25rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + } + } + } + + .links { + background-color: var(--uchu-pink-1); + padding: 1rem; + + ul { + align-items: center; + display: flex; + flex-direction: row; + justify-content: center; + list-style: none; + + li { + &:first-child { + svg { + inline-size: 4rem; + } + } + + &:not(:last-child) { + margin-right: 2rem; + } + + &:last-child { + svg { + inline-size: 3rem; + } + } + } + } + + a { + display: flex; + } + } + + section { + border-top: 3px solid var(--uchu-pink-1); + width: 100%; + + &:not(.links) { + padding-bottom: 2rem; + padding-top: 2rem; + } + } + + pre { + background-color: var(--uchu-yellow-1); + border-bottom-right-radius: 1rem; + border-top-left-radius: 1rem; + padding-left: 1rem; + } + + code { + font-family: "Berkeley Mono", "Fira Code", monospace; + } + + table { + border: 1px solid var(--uchu-gray-3); + border-spacing: 0; + width: 100%; + + code { + position: relative; + white-space: nowrap; + + &::after { + width: calc(100% + 10px); height: calc(100% + 6px); + bottom: -3px; left: -5px; + + background-color: oklch(var(--uchu-yin-5-raw) / 10%); + border-bottom-right-radius: 0.25rem; + border-top-left-radius: 0.25rem; + content: ""; + position: absolute; + } + } + + thead th { + border-bottom: 1px solid var(--uchu-gray-3); + text-align: left; + } + + th, td { + padding: 0.5rem 1rem; + } + + tbody { + tr:nth-child(odd) { + background-color: var(--uchu-gray-1); + } + } + + tbody td { + position: relative; + + &::after { + width: 100%; height: 1px; + bottom: -1px; left: 0; + + background-color: var(--uchu-gray-3); + content: ""; + position: absolute; + } + } + } + + details { + border: 1px solid var(--uchu-gray-3); + padding: 1rem 1.25rem; + position: relative; + + &:nth-of-type(2) { + transform: translateY(-1px); + } + + &:nth-of-type(3) { + transform: translateY(-2px); + } + + &:nth-of-type(4) { + transform: translateY(-3px); + } + + &[open] { + background-color: var(--uchu-gray-1); + + summary { + margin-bottom: 0.5rem; + } + } + + summary { + cursor: pointer; + } + + pre { + margin-bottom: 1rem; + margin-top: 1rem; + } + } + + a { + color: var(--uchu-blue-4); + + &:visited { + color: var(--uchu-pink-7); + } + } + + p, ol { + code { + position: relative; + + &::after { + width: calc(100% + 4px); height: calc(100% + 2px); + bottom: -1px; left: -1px; + + background-color: oklch(var(--uchu-yin-5-raw) / 10%); + border-bottom-right-radius: 0.25rem; + border-top-left-radius: 0.25rem; + content: ""; + position: absolute; + } + } + } + + ol { + @media (min-width: 601px) { + padding-left: 1.08rem; + } + + @media (max-width: 600px) { + padding-left: 1.5rem; + } + } + + footer { + border-top: 3px solid var(--uchu-pink-1); + padding-top: 1rem; + text-align: center; + + @media (min-width: 801px) { + padding-bottom: 3rem; + } + + @media (max-width: 800px) { + padding-bottom: 1rem; + } + + ul { + list-style-type: none; + + li { + display: inline-block; + } + } + } + </style> + + <script> + //// util + + const now = new Date(); + + const version = [ + now.getFullYear(), + ".", + String(now.getMonth() + 1).padStart(2, "0"), + ".", + String(now.getDate()).padStart(2, "0") + ].join(""); + + + + //// helper + + function getOrdinalSuffix(day) { + if (day > 3 && day < 21) + return "th"; + + switch(day % 10) { + case 1: { + return "st"; + } + + case 2: { + return "nd"; + } + + case 3: { + return "rd"; + } + + default: { + return "th"; + } + } + } + + function formatDateWithOrdinal(date) { + const month = date.toLocaleString("en-us", { month: "long" }); + const day = date.getDate(); + const year = date.getFullYear(); + + return `${month} ${day}${getOrdinalSuffix(day)}, ${year}`; + } + </script> + </head> + + <body> + <header> + <h1>ChronVer</h1> + <h2>Versioning for the rest of us</h2> + </header> + + <ul class="compare"> + <li class="tired"> + <div class="title">Tired</div> + <div class="question">When did this release?</div> + <div class="version">v3.2.1</div> + </li> + + <li class="wired"> + <div class="title">Wired</div> + <div class="question">Obvious release day</div> + <div class="version" id="today"><span class="today">2025.07.15</span></div> + </li> + </ul> + + <section class="links"> + <ul> + <li> + <a href="https://jsr.io/@chronver/chronver?ref=chronver.org" target="_blank"> + <svg viewBox="0 0 13 7" aria-hidden="true"> + <path d="M0 2h2v-2h7v1h4v4h-2v2h-7v-1h-4" fill="#083344"></path> + + <g fill="#f7df1e"> + <path d="M1 3h1v1h1v-3h1v4h-3"></path> + <path d="M5 1h3v1h-2v1h2v3h-3v-1h2v-1h-2"></path> + <path d="M9 2h3v2h-1v-1h-1v3h-1"></path> + </g> + </svg> + </a> + </li> + + <li> + <a href="https://github.com/ChronVer/chronver?ref=chronver.org" target="_blank"> + <svg viewBox="0 0 24 24" aria-hidden="true"> + <path d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-0.233.756-0.522 0-0.262-0.013-1.128-0.013-2.049-2.764.509-3.479-0.674-3.699-1.292-0.124-0.317-0.66-1.293-1.127-1.554-0.385-0.207-0.936-0.715-0.014-0.729.866-0.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-0.715.385-1.196.701-1.471-2.448-0.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-0.111-0.275-0.496-1.402.11-2.915 0 0 .921-0.288 3.024 1.128a10.193 10.193 0 0 1 2.75-0.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-0.014 2.654-0.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z"></path> + </svg> + </a> + </li> + </ul> + </section> + + <section> + <h3>Format</h3> + + <pre><code> +YYYY.MM.DD[.CHANGESET][-FEATURE|-break] + </code></pre> + </section> + + <section> + <h3>Examples</h3> + + <table> + <thead> + <tr> + <th>Version</th> + <th>Description</th> + </tr> + </thead> + + <tbody> + <tr> + <td><code><span class="today">2025.07.21</span></code></td> + <td>Released <span class="today_fancy">July 21st, 2025</span></td> + </tr> + + <tr> + <td><code><span class="today">2025.07.21</span>.1</code></td> + <td>First hotfix today</td> + </tr> + + <tr> + <td><code><span class="today">2025.07.21</span>.3</code></td> + <td>Third change today</td> + </tr> + + <tr> + <td><code><span class="today">2025.07.21</span>-feature</code></td> + <td>Feature branch made today</td> + </tr> + + <tr> + <td><code><span class="today">2025.07.21</span>.1-feature</code></td> + <td>Feature branch with changeset</td> + </tr> + + <tr> + <td><code><span class="today">2025.07.21</span>.1-break</code></td> + <td>Breaking change</td> + </tr> + </tbody> + </table> + </section> + + <section> + <h3>FAQ</h3> + + <details name="questions" open> + <summary>Why not just use dates?</summary> + <p>ChronVer <strong>is</strong> dates, but with a structured format that supports multiple releases per day, feature branches, and breaking change indicators.</p> + </details> + + <details name="questions"> + <summary>What about semantic compatibility?</summary> + <p>ChronVer can indicate breaking changes with the <code>-break</code> suffix. For situations where semantic versioning is <strong>crucial</strong>, stick with SemVer.</p> + </details> + + <details name="questions"> + <summary>How do I migrate from SemVer?</summary> + <ol> + <li>Choose your first ChronVer date (usually next release)</li> + <li>Update your build tools to use <code>chronver increment</code></li> + <li>Update documentation to explain the new format</li> + <li>Consider keeping a mapping in your <code>CHANGELOG</code></li> + </ol> + </details> + + <details name="questions"> + <summary>Can I use both ChronVer and SemVer?</summary> + <p>Absolutely! Here's how your project could use ChronVer for releases and SemVer for API versions:</p> + <pre><code> +{ + "apiVersion": "v2.1.0", + "version": "<span class="today">2024.07.19</span>.1" +} + </code></pre> + <p>Easy-peasy.</p> + </details> + </section> + + <section> + <h3>Comparison with SemVer</h3> + + <table> + <thead> + <tr> + <th>Aspect</th> + <th>ChronVer</th> + <th>SemVer</th> + </tr> + </thead> + + <tbody> + <tr> + <td><strong>Clarity</strong></td> + <td>Immediately shows when released</td> + <td>Requires lookup</td> + </tr> + + <tr> + <td><strong>Planning</strong></td> + <td>Aligns with calendar schedules</td> + <td>Feature-driven</td> + </tr> + + <tr> + <td><strong>Communication</strong></td> + <td>"The April release"</td> + <td>"Version 3.2.1"</td> + </tr> + + <tr> + <td><strong>Sorting</strong></td> + <td>Chronological by default</td> + <td>Arbitrary without context</td> + </tr> + + <tr> + <td><strong>Compatibility</strong></td> + <td>Time-based breaking changes</td> + <td>API contract based</td> + </tr> + + <tr> + <td><strong>Best for</strong></td> + <td>Time-sensitive releases</td> + <td>Library compatibility</td> + </tr> + </tbody> + </table> + </section> + + <footer> + <a href="https://jsr.io/@chronver/chronver?ref=chronver.org" target="_blank">JSR</a> • + <a href="https://creativecommons.org/licenses/by/4.0?ref=chronver.org" target="_blank">Creative Commons ― CC BY 4.0</a> • + <a href="https://github.com/ChronVer/chronver?ref=chronver.org" target="_blank">Github</a> + </footer> + + <script> + Array.from(document.querySelectorAll(".today")).map(element => { element.innerText = version; }); + document.querySelector(".today_fancy").innerText = formatDateWithOrdinal(now); + </script> + </body> +</html> |
