Add specification page at /methodology/

index.html

@@ -62,7 +62,7 @@ <h1>Enterprise as text.<br>Run by humans and machines together.</h1>
       </p>
       <div class="hero-actions">
         <a class="btn" href="install/">Install &amp; start</a>
-        <a class="btn" href="https://github.com/transitrix/methodology">Read the methodology</a>
+        <a class="btn" href="methodology/">Read the methodology</a>
       </div>
     </div>
 
@@ -99,7 +99,7 @@ <h2 id="stack-heading">The stack</h2>
           <div class="card-meta">methodology · open</div>
           <h3>Transitrix</h3>
           <p>The foundation. A text-native way to model an organisation — goals, processes, capabilities, and structure — as code. Says <em>how</em> to describe an enterprise so it remains readable, versionable, and executable.</p>
-          <a class="card-link" href="https://github.com/transitrix/methodology">View on GitHub →</a>
+          <a class="card-link" href="methodology/">Specification →</a>
         </article>
         <article class="card">
           <div class="card-meta">tool · open</div>

methodology/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Specification | Transitrix</title>
+  <meta name="description" content="The published Transitrix methodology specification — versioned under semver, MIT licensed. Read the full specification and release notes on GitHub.">
+  <link rel="canonical" href="https://transitrix.com/methodology/">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://transitrix.com/methodology/">
+  <meta property="og:title" content="Specification | Transitrix">
+  <meta property="og:description" content="The published Transitrix methodology specification — versioned under semver, MIT licensed. Read the full specification and release notes on GitHub.">
+  <meta property="og:image" content="https://transitrix.com/assets/og/transitrix-og.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:locale:alternate" content="de_DE">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image" content="https://transitrix.com/assets/og/transitrix-og.png">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../assets/css/style.css">
+  <link rel="icon" type="image/svg+xml" href="/assets/img/transitrix-icon.svg">
+  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32.png">
+  <link rel="icon" type="image/png" sizes="128x128" href="/assets/img/favicon-128.png">
+  <link rel="apple-touch-icon" sizes="256x256" href="/assets/img/apple-touch-icon.png">
+  <meta name="theme-color" content="#004D67">
+  <link rel="alternate" hreflang="de" href="../de/methodology/">
+  <link rel="alternate" hreflang="en" href="./">
+  <script>if(localStorage.getItem('theme')==='light')document.documentElement.setAttribute('data-theme','light');</script>
+  <!-- Cloudflare Web Analytics -->
+  <script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "1d2971bbe7964ede92ee02e5c78da48c"}'></script>
+  <!-- End Cloudflare Web Analytics -->
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to main content</a>
+  <header class="site-header">
+    <div class="wrap">
+      <a class="logo" href="../">Transitrix</a>
+      <div class="header-right">
+        <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
+          <svg class="icon-moon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+          <svg class="icon-sun" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+        </button>
+        <nav class="lang-switch" aria-label="Language">
+          <a href="./" aria-current="true">EN</a>
+          <a href="../de/methodology/" hreflang="de">DE</a>
+        </nav>
+      </div>
+    </div>
+  </header>
+  <main id="main" class="wrap">
+    <div class="hero">
+      <h1>The specification</h1>
+      <p class="lede">
+        The published Transitrix methodology — versioned under semantic versioning, MIT licensed, read and implemented by adopters worldwide.
+      </p>
+    </div>
+
+    <section aria-labelledby="version-heading">
+      <h2 id="version-heading">Current version</h2>
+      <p>
+        <code id="version-display">Loading version…</code>
+      </p>
+      <p>Versions follow <strong>semantic versioning</strong>. A major version — 5.0.0 to 6.0.0 — ships with a migration recipe that guides adopters through any breaking changes to the model or methodology.</p>
+    </section>
+
+    <section aria-labelledby="read-heading">
+      <h2 id="read-heading">Read the full specification</h2>
+      <p>The complete specification lives in the <code>transitrix/methodology</code> repository on GitHub:</p>
+      <div class="hero-actions">
+        <a class="btn" href="https://github.com/transitrix/methodology">Read on GitHub →</a>
+      </div>
+    </section>
+
+    <section aria-labelledby="releases-heading">
+      <h2 id="releases-heading">Release notes and migration</h2>
+      <p>Every release is documented with what changed, and what to do if you are upgrading:</p>
+      <div class="hero-actions">
+        <a class="btn" href="https://github.com/transitrix/methodology/releases">View releases →</a>
+      </div>
+    </section>
+
+    <section aria-labelledby="license-heading">
+      <h2 id="license-heading">License</h2>
+      <p>The specification is published under the <a href="https://opensource.org/licenses/MIT">MIT License</a>. You are free to use, modify, and distribute it.</p>
+    </section>
+  </main>
+
+  <script src="../assets/js/theme.js"></script>
+  <script>
+    // Fetch the current version from GitHub API
+    const versionDisplay = document.getElementById('version-display');
+
+    fetch('https://api.github.com/repos/transitrix/methodology/releases/latest')
+      .then(response => response.json())
+      .then(data => {
+        if (data.tag_name) {
+          const version = data.tag_name.replace(/^v/, '');
+          versionDisplay.textContent = version;
+        } else {
+          versionDisplay.textContent = 'Version unavailable';
+        }
+      })
+      .catch(error => {
+        console.error('Failed to fetch version:', error);
+        versionDisplay.textContent = 'Version unavailable';
+      });
+  </script>
+</body>
+</html>

sitemap.xml

@@ -58,6 +58,10 @@
     <loc>https://transitrix.com/library/archimate-cheat-sheet/</loc>
     <xhtml:link rel="alternate" hreflang="en" href="https://transitrix.com/library/archimate-cheat-sheet/"/>
   </url>
+  <url>
+    <loc>https://transitrix.com/methodology/</loc>
+    <xhtml:link rel="alternate" hreflang="en" href="https://transitrix.com/methodology/"/>
+  </url>
   <url>
     <loc>https://transitrix.com/recipes/</loc>
     <xhtml:link rel="alternate" hreflang="en" href="https://transitrix.com/recipes/"/>