chechen-language · khashashin · Jan 4, 2026 · Jan 4, 2026 · Jan 4, 2026 · Jan 4, 2026
diff --git a/.eleventy.js b/.eleventy.js
@@ -3,6 +3,10 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy('src/assets');
   eleventyConfig.addPassthroughCopy({ 'node_modules/@ce/transliteration/translit.js': 'assets/repositories/chechen-transliterator/translit.js'});
 
+  // Copy SEO files
+  eleventyConfig.addPassthroughCopy('src/robots.txt');
+  eleventyConfig.addPassthroughCopy('src/sitemap.xml');
+
   return {
     dir: {
       input: 'src',

diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1,66 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a static website for the Chechen Language organization, built with Eleventy (11ty). The site showcases various Chechen language tools and projects, including keyboard layouts for different platforms and a Chechen transliterator tool.
+
+## Build and Development Commands
+
+- `npm run build` - Build the static site (output to `_site/`)
+- `npm run serve` - Start development server with live reload
+- `npm run prettier` - Format all files with Prettier
+
+## Architecture
+
+### Static Site Generation (Eleventy)
+
+The site uses Eleventy with the following structure:
+- Input directory: `src/`
+- Output directory: `_site/`
+- Templates: `src/_includes/` (Nunjucks templates)
+
+### Configuration (.eleventy.js)
+
+- Base layout template: `src/_includes/layout.njk`
+- Static assets are copied from `src/assets/` to output
+- The `@ce/transliteration` package is copied from node_modules to `_site/assets/repositories/chechen-transliterator/translit.js`
+
+### Content Organization
+
+- `src/index.md` - Home page
+- `src/repositories/` - Individual project pages (markdown files)
+  - `chechen-transliterator/` - Interactive transliterator tool
+  - `chechen-latin-keyboard-{platform}/` - Platform-specific keyboard documentation
+    - Includes privacy policy pages for Android app
+
+### Layout System
+
+- Single base template: `src/_includes/layout.njk`
+- Uses Bootstrap 4.5.2 for styling
+- Responsive navigation with dropdown menu for projects
+- Sticky footer layout
+
+### Interactive Features
+
+The transliterator page (`src/repositories/chechen-transliterator/index.md`) has special functionality:
+- Uses `@ce/transliteration` package (JSR package: `@jsr/ce__transliteration`)
+- Client-side JavaScript: `src/assets/repositories/chechen-transliterator/main.js`
+- Handles URL query parameters to pre-fill and transliterate text
+- Syncs input text to URL query string for sharing/bookmarking
+
+### Special Handling
+
+- The transliteration logic handles the letter 'н' at word endings with blacklist and unsure list checking
+- Unsure words get flagged with 'ŋ[REPLACE]' for manual review
+
+## Dependencies
+
+- Core: `@11ty/eleventy` (static site generator)
+- Formatting: `prettier` with `lint-staged` and `husky` for pre-commit hooks
+- Runtime: `@ce/transliteration` (Chechen transliteration logic)
+
+## Deployment
+
+This is a GitHub Pages site (indicated by `.nojekyll` file). The built site from `_site/` is deployed to GitHub Pages.
diff --git a/src/_includes/layout.njk b/src/_includes/layout.njk
@@ -3,59 +3,164 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{ title }}</title>
-  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+
+  <!-- Primary Meta Tags -->
+  <title>{{ title }} | Chechen Language Projects</title>
+  <meta name="title" content="{{ title }} | Chechen Language Projects">
+  <meta name="description" content="{% if description %}{{ description }}{% else %}Open source tools and resources for the Chechen language including Latin keyboard layouts, transliteration tools, and language preservation projects.{% endif %}">
+  <meta name="keywords" content="Chechen language, Chechen keyboard, Latin script, transliteration, Noxchi, keyboard layout, language tools, Caucasian languages">
+  <meta name="author" content="Chechen Language Projects">
+  <meta name="language" content="English">
+
+  <!-- Canonical URL -->
+  <link rel="canonical" href="https://chechen-language.github.io{{ page.url }}">
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://chechen-language.github.io{{ page.url }}">
+  <meta property="og:title" content="{{ title }} | Chechen Language Projects">
+  <meta property="og:description" content="{% if description %}{{ description }}{% else %}Open source tools and resources for the Chechen language including Latin keyboard layouts, transliteration tools, and language preservation projects.{% endif %}">
+  <meta property="og:image" content="https://chechen-language.github.io/assets/images/og-image.png">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:site_name" content="Chechen Language Projects">
+
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="https://chechen-language.github.io{{ page.url }}">
+  <meta name="twitter:title" content="{{ title }} | Chechen Language Projects">
+  <meta name="twitter:description" content="{% if description %}{{ description }}{% else %}Open source tools and resources for the Chechen language including Latin keyboard layouts, transliteration tools, and language preservation projects.{% endif %}">
+  <meta name="twitter:image" content="https://chechen-language.github.io/assets/images/og-image.png">
+
+  <!-- Theme Color -->
+  <meta name="theme-color" content="#8B2332">
+  <meta name="msapplication-TileColor" content="#8B2332">
+
+  <!-- Structured Data (JSON-LD) -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    "name": "Chechen Language Projects",
+    "url": "https://chechen-language.github.io",
+    "logo": "https://chechen-language.github.io/assets/images/logo.png",
+    "description": "Open source tools and resources for the Chechen language preservation and development",
+    "sameAs": [
+      "https://github.com/chechen-language"
+    ],
+    "contactPoint": {
+      "@type": "ContactPoint",
+      "contactType": "Community Support",
+      "url": "https://github.com/chechen-language"
+    }
+  }
+  </script>
+
   <link rel="stylesheet" href="/assets/style.css">
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-  <script src="/assets/main.js" defer></script>
   {% block extra_head %}
   {% endblock %}
 </head>
-<body class="d-flex flex-column min-vh-100">
-  <header class="bg-dark text-white py-3">
-    <div class="container">
-      <h1>Chechen Language Projects</h1>
-      <nav class="navbar navbar-expand-lg navbar-dark">
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-          <ul class="navbar-nav">
-            <li class="nav-item">
-              <a class="nav-link text-white" href="/">Home</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle text-white" href="#" id="projectsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Projects
-              </a>
-              <div class="dropdown-menu" aria-labelledby="projectsDropdown">
-                <a class="dropdown-item" href="/repositories/chechen-transliterator">Chechen Transliterator</a>
-                <a class="dropdown-item" href="/repositories/chechen-latin-keyboard-macos">macOS Keyboard</a>
-                <a class="dropdown-item" href="/repositories/chechen-latin-keyboard-windows">Windows Keyboard</a>
-                <a class="dropdown-item" href="/repositories/chechen-latin-keyboard-linux">Linux Keyboard</a>
-                <a class="dropdown-item" href="/repositories/chechen-latin-keyboard-ios">iOS Keyboard</a>
-                <a class="dropdown-item" href="/repositories/chechen-latin-keyboard-android">Android Keyboard</a>
-                <!-- Add more projects here -->
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
-    </div>
-  </header>
-  <div class="container flex-grow-1 mt-4">
-    <main>
-      {{ content | safe }}
+<body class="istang-layout">
+  <div class="istang-border-wrapper">
+    <div class="istang-border istang-border-top"></div>
+
+    <header class="site-header">
+      <div class="istang-corner istang-corner-tl" aria-hidden="true"></div>
+      <div class="istang-corner istang-corner-tr" aria-hidden="true"></div>
+      <div class="container">
+        <h1>Chechen Language Projects</h1>
+        <button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Toggle navigation">☰</button>
+        <nav class="nav" id="main-nav">
+          <button class="mobile-close" id="mobile-close" aria-label="Close menu">×</button>
+          <a href="/" class="nav-link">Home</a>
+          <div class="nav-dropdown">
+            <button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">Projects</button>
+            <div class="dropdown-menu" role="menu">
+              <a class="dropdown-item" href="/repositories/chechen-transliterator" role="menuitem">Chechen Transliterator</a>
+              <a class="dropdown-item" href="/repositories/chechen-latin-keyboard-macos" role="menuitem">macOS Keyboard</a>
+              <a class="dropdown-item" href="/repositories/chechen-latin-keyboard-windows" role="menuitem">Windows Keyboard</a>
+              <a class="dropdown-item" href="/repositories/chechen-latin-keyboard-linux" role="menuitem">Linux Keyboard</a>
+              <a class="dropdown-item" href="/repositories/chechen-latin-keyboard-ios" role="menuitem">iOS Keyboard</a>
+              <a class="dropdown-item" href="/repositories/chechen-latin-keyboard-android" role="menuitem">Android Keyboard</a>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </header>
+
+    <main class="site-main">
+      <div class="container">
+        {{ content | safe }}
+      </div>
     </main>
+
+    <footer class="site-footer">
+      <div class="istang-corner istang-corner-bl" aria-hidden="true"></div>
+      <div class="istang-corner istang-corner-br" aria-hidden="true"></div>
+      <div class="container">
+        <p>&copy; 2024 Chechen Language Projects</p>
+      </div>
+    </footer>
+
+    <div class="istang-border istang-border-bottom"></div>
   </div>
-  <footer class="bg-dark text-white py-3 mt-4">
-    <div class="container text-center">
-      <p>&copy; 2024 Chechen Language Projects</p>
-    </div>
-  </footer>
+
+  <div class="mobile-overlay" id="mobile-overlay"></div>
+
+  <script>
+    // Mobile menu toggle
+    const mobileToggle = document.getElementById('mobile-menu-toggle');
+    const mobileClose = document.getElementById('mobile-close');
+    const mainNav = document.getElementById('main-nav');
+    const mobileOverlay = document.getElementById('mobile-overlay');
+
+    function openMobileMenu() {
+      mainNav.classList.add('active');
+      mobileOverlay.classList.add('active');
+      document.body.style.overflow = 'hidden';
+    }
+
+    function closeMobileMenu() {
+      mainNav.classList.remove('active');
+      mobileOverlay.classList.remove('active');
+      document.body.style.overflow = '';
+    }
+
+    if (mobileToggle) {
+      mobileToggle.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (mainNav.classList.contains('active')) {
+          closeMobileMenu();
+        } else {
+          openMobileMenu();
+        }
+      });
+    }
+
+    if (mobileClose) {
+      mobileClose.addEventListener('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        closeMobileMenu();
+      });
+    }
+
+    // Close when clicking on the overlay
+    if (mobileOverlay) {
+      mobileOverlay.addEventListener('click', function(e) {
+        closeMobileMenu();
+      });
+    }
+
+    // Close mobile menu on escape key
+    document.addEventListener('keydown', function(event) {
+      if (event.key === 'Escape' && mainNav.classList.contains('active')) {
+        closeMobileMenu();
+      }
+    });
+  </script>
+
   {% block extra_scripts %}
   {% endblock %}
 </body>
-</html>
+</html>
diff --git a/src/assets/css/components/buttons.css b/src/assets/css/components/buttons.css
@@ -0,0 +1,92 @@
+/* Button component */
+
+.btn {
+  display: inline-block;
+  padding: var(--space-sm) var(--space-lg);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  border: var(--border-thin) solid transparent;
+  cursor: pointer;
+  transition: all var(--transition-base);
+  position: relative;
+  text-align: center;
+}
+
+.btn:focus {
+  outline: 2px solid var(--color-gold);
+  outline-offset: 2px;
+}
+
+/* Primary button */
+.btn-primary {
+  background-color: var(--color-burgundy);
+  color: var(--color-gold);
+  border-color: var(--color-burgundy-dark);
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+  background-color: var(--color-gold);
+  color: var(--color-burgundy);
+  border-color: var(--color-burgundy);
+  box-shadow: var(--shadow-md);
+  text-decoration: none;
+}
+
+/* Secondary button */
+.btn-secondary {
+  background-color: var(--color-forest);
+  color: var(--color-gold-light);
+  border-color: var(--color-forest-dark);
+}
+
+.btn-secondary:hover,
+.btn-secondary:focus {
+  background-color: var(--color-forest-light);
+  color: var(--color-white);
+  border-color: var(--color-forest);
+  box-shadow: var(--shadow-md);
+  text-decoration: none;
+}
+
+/* Outline button */
+.btn-outline {
+  background-color: transparent;
+  color: var(--color-burgundy);
+  border-color: var(--color-burgundy);
+}
+
+.btn-outline:hover,
+.btn-outline:focus {
+  background-color: var(--color-burgundy);
+  color: var(--color-gold);
+  text-decoration: none;
+}
+
+/* Button sizes */
+.btn-sm {
+  padding: var(--space-xs) var(--space-md);
+  font-size: var(--text-sm);
+}
+
+.btn-lg {
+  padding: var(--space-md) var(--space-xl);
+  font-size: var(--text-lg);
+}
+
+/* Full width button */
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+/* Disabled state */
+.btn:disabled,
+.btn[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}