vipassana-design-standards 0.0.19 → 0.0.21

package/dist/js/helper.js

@@ -0,0 +1,165 @@
+import i18n from './i18n.js'
+
+function isRtl(locale) {
+  return ['ar', 'fa', 'he'].includes(locale)
+}
+
+function vdsAssetUrl(path, localhost = false) {
+  // For localhost dev, just run vscode liveserver
+  if (localhost) return `http://localhost:5500/dist/${path}`
+
+  return `https://design-standards.dhamma.org/dist/0.0.21/${path}`
+}
+
+function stylesheetLinkTag(url) {
+  return `<link rel="stylesheet" type="text/css" href="${url}">`
+}
+
+function StylesheetLinkTag({url}) {
+  return <link rel="stylesheet" type="text/css" href={url} />
+}
+
+function javascriptIncludeTag(url) {
+  return `<script type="text/javascript" src="${url}"></script>`
+}
+
+export function vdsFaviconTag() {
+  return `<link rel="shortcut icon" type="image/x-icon" href="https://design-standards.dhamma.org/dist/favicon.png">`
+}
+
+export function VdsFaviconTag() {
+  return <link rel="shortcut icon" type="image/x-icon" href="https://design-standards.dhamma.org/dist/favicon.png" />
+}
+
+export function vdsBootstrapThemeCssTag(locale, localhost = false) {
+  let tags = [
+    stylesheetLinkTag(vdsAssetUrl(`css/bootstrap5-theme${isRtl(locale) ? '.rtl' : ''}.min.css`, localhost))
+  ]
+  // Add specific fonts for languages not compatible with Footlight and Lato
+  if (['gu', 'ja', 'km'].includes(locale))
+    tags.push(stylesheetLinkTag(vdsAssetUrl(`css/fonts-${locale}.min.css`)))
+
+  return tags.join('')
+}
+
+export function VdsBootstrapThemeCssTag({ locale, localhost = false }) {
+  const url = vdsAssetUrl(`css/bootstrap5-theme${isRtl(locale) ? '.rtl' : ''}.min.css`, localhost)
+  return <>
+    <StylesheetLinkTag url={url}/>
+    {['gu', 'ja', 'km'].includes(locale) && <StylesheetLinkTag url={vdsAssetUrl(`css/fonts-${locale}.min.css`)}/>}
+  </>
+}
+
+export function vdsBootstrapThemeJsTag(locale, localhost = false) {
+  return javascriptIncludeTag(vdsAssetUrl("js/bootstrap5-theme.min.js", localhost))
+}
+
+export function VdsBootstrapThemeJsTag({ localhost = false }) {
+  const url = vdsAssetUrl("js/bootstrap5-theme.min.js", localhost)
+  return <script type="text/javascript" src={url}></script>
+}
+
+export function vdsLogo({locale, disposition = "default", size = '18', tagline = true, dark = false}) {
+  let trans = i18n[locale] || i18n.en
+
+  if (disposition == "mobile") {
+    disposition = "left-two-lines"
+    tagline = false
+  }
+
+  return `
+    <div class="vipassana-logo"
+        data-disposition="${disposition}"
+        data-tagline="${tagline}"
+        data-dark-mode="${dark}"
+        data-reverse="${trans.reverse}"
+        style="font-size: ${size}px">
+      <img class="logo-wheel" src="https://design-standards.dhamma.org/dist/dhamma-wheel.svg" />
+      <div class="logo-text">
+        <h1 class="logo-title">
+          <span data-start-with="${trans.vipassana_meditation.charAt(0).toLowerCase()}">
+            ${trans.vipassana_meditation}
+          </span>
+          <span class="logo-space">&nbsp;</span>
+          <span>${trans.as_taught}</span>
+        </h1>
+        <div class="logo-subtitle">${trans.in_the_tradition}</div>
+      </div>
+    </div>
+  `
+}
+
+export function VdsLogo({locale, disposition = "default", size = '18', tagline = true, dark = false}) {
+  let trans = i18n[locale] || i18n.en
+
+  if (disposition == "mobile") {
+    disposition = "left-two-lines"
+    tagline = false
+  }
+
+  return <div className="vipassana-logo"
+      data-disposition={disposition}
+      data-tagline={tagline}
+      data-dark-mode={dark}
+      data-reverse={trans.reverse}
+      style={{fontSize: `${size}px`}}>
+    <img className="logo-wheel" src="https://design-standards.dhamma.org/dist/dhamma-wheel.svg" />
+    <div className="logo-text">
+      <h1 className="logo-title">
+        <span data-start-with={trans.vipassana_meditation.charAt(0).toLowerCase()}>
+          {trans.vipassana_meditation}
+        </span>
+        <span className="logo-space">&nbsp;</span>
+        <span>{trans.as_taught}</span>
+      </h1>
+      <div className="logo-subtitle">{trans.in_the_tradition}</div>
+    </div>
+  </div>
+}
+
+// Some icons from bootstrap icons, so all websites use the same
+export function vdsIconLocale() {
+  return `
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" viewBox="0 0 16 16">
+      <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/>
+      <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"/>
+    </svg>
+  `
+}
+
+export function VdsIconLocale({size = 1.2}) {
+  return <svg xmlns="http://www.w3.org/2000/svg" width={`${size}em`} height={`${size}em`} fill="currentColor" viewBox="0 0 16 16">
+    <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/>
+    <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"/>
+  </svg>
+}
+
+export function vdsIconAccount() {
+  return `
+    <svg xmlns="http://www.w3.org/2000/svg" width="2.2em" height="2.2em" fill="currentColor" viewBox="0 0 16 16">
+      <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+      <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+    </svg>
+  `
+}
+
+export function VdsIconAccount({size = 2.2}) {
+  return <svg xmlns="http://www.w3.org/2000/svg" width={`${size}em`} height={`${size}em`} fill="currentColor" viewBox="0 0 16 16">
+    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+  </svg>
+}
+
+export function vdsIconMenu() {
+  return `
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.8em" height="1.8em" fill="currentColor" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+    </svg>
+  `
+}
+
+export function VdsIconMenu({size = 1.8}) {
+  return <svg xmlns="http://www.w3.org/2000/svg" width={`${size}em`} height={`${size}em`} fill="currentColor" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+  </svg>
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vipassana-design-standards",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "Vipassana design standards materials",
   "homepage": "https://design-standards.dhamma.org",
   "author": "Dhamma Workers",
@@ -8,15 +8,20 @@
     "@popperjs/core": "^2.9.1",
     "bootstrap5": "npm:bootstrap@5"
   },
-  "sass": "src/stylesheets/bootstrap5-theme.scss",
-  "css": "dist/bootstrap5-theme.css",
-  "scripts" : {
+  "js": "dist/js/helper.js",
+  "files": [
+    "dist/js",
+    "dist/css"
+  ],
+  "scripts": {
     "build-sass": "sass --load-path=node_modules src/stylesheets/bootstrap5-theme.scss dist/css/bootstrap5-theme.css && sass src/stylesheets/fonts.scss dist/css/fonts.css && sass src/stylesheets/logo.scss dist/css/logo.css",
     "build-rtl": "rtlcss dist/css/bootstrap5-theme.css dist/css/bootstrap5-theme.rtl.css",
     "build-fonts": "cp src/stylesheets/specific-fonts/* dist/css/",
     "build-min": "cleancss --batch --batch-suffix '.min' dist/css/*.css",
     "build-css": "rm -f dist/css/* && npm run build-fonts && npm run build-sass && npm run build-rtl && npm run build-min",
-    "build-js": "rm -f dist/js/* && concat -o dist/js/bootstrap5-theme.min.js node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js src/javascripts/auto-resize.js && cp node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js.map dist/js/bootstrap5-theme.min.js.map",
+    "build-js": "rm -f dist/js/* && npm run build-js-bootstrap && npm run build-js-helper",
+    "build-js-bootstrap": "concat -o dist/js/bootstrap5-theme.min.js node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js src/javascripts/auto-resize.js && cp node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js.map dist/js/bootstrap5-theme.min.js.map",
+    "build-js-helper": "cp src/javascripts/helper.js dist/js && cp src/javascripts/i18n.js dist/js && node replace-version.js",
     "build": "npm run build-css && npm run build-js",
     "dist": "npm run build && npm run dist-version-folder && npm publish && npm run dist-gem",
     "dist-gem": "gem build vipassana-design-standards.gemspec && gem push vipassana-design-standards-$npm_package_version.gem && rm vipassana-design-standards-$npm_package_version.gem",

package/.htaccess

@@ -1,3 +0,0 @@
-allow from all
-
-Header set Access-Control-Allow-Origin *

package/HOW_TO_PUBLISH.md

@@ -1,29 +0,0 @@
-## Compile CSS
-
-Install compilers libs
-```
-npm install -g sass clean-css-cli rtlcss concat
-```
-
-Install local dependecies
-```
-yarn
-```
-
-Compile
-```
-npm run build
-```
-
-## Deploy
-
-Bump version in both `package.json` and `vipassana-design-standards.gemspec`
-
-```
-npm run dist
-```
-
-Global replace `?ver=old_version` by `?ver=new_version` if you made changes to the public website
-
-Update https://design-standards.dhamma.org by pushing new files via FTP
-At least you need to push the new versionned dist folder

package/TODO

@@ -1,14 +0,0 @@
-make repo public, and use jsdeliver
-compile also bootstrap js and make it avaiable with CDN
--> ask sysadmin for them opportunity to comment
-
-in CALM, VIS, DO use VDS css and not scss so it's cached
-
-fonts: provide Noto font or not? only on demand?
-fonts: make font-weight consistent
--> start with easy one, and optimize later if needed
-
-open sans
-
-locale picker make it the same everywhere?
-

package/demo/.gitattributes

@@ -1,5 +0,0 @@
-# See https://git-scm.com/docs/gitattributes for more about git attribute files.
-
-
-# Mark any vendored files as having been vendored.
-vendor/* linguist-vendored

package/demo/.ruby-version

@@ -1 +0,0 @@
-ruby-2.7.4

package/demo/Gemfile

@@ -1,29 +0,0 @@
-source "https://rubygems.org"
-git_source(:github) { |repo| "https://github.com/#{repo}.git" }
-
-ruby "2.7.4"
-
-# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
-gem "rails", "~> 7.0.5"
-
-# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
-gem "sprockets-rails"
-
-# Use the Puma web server [https://github.com/puma/puma]
-gem "puma", "~> 5.0"
-
-# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
-gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
-
-group :development, :test do
-  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
-  gem "debug", platforms: %i[ mri mingw x64_mingw ]
-end
-
-group :development do
-  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
-  # gem "spring"
-end
-
-
-gem "vipassana-design-standards", path: "/home/websites/design-standards"

package/demo/Gemfile.lock

@@ -1,182 +0,0 @@
-PATH
-  remote: /home/websites/design-standards
-  specs:
-    vipassana-design-standards (0.0.16)
-
-GEM
-  remote: https://rubygems.org/
-  specs:
-    actioncable (7.0.5)
-      actionpack (= 7.0.5)
-      activesupport (= 7.0.5)
-      nio4r (~> 2.0)
-      websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.5)
-      actionpack (= 7.0.5)
-      activejob (= 7.0.5)
-      activerecord (= 7.0.5)
-      activestorage (= 7.0.5)
-      activesupport (= 7.0.5)
-      mail (>= 2.7.1)
-      net-imap
-      net-pop
-      net-smtp
-    actionmailer (7.0.5)
-      actionpack (= 7.0.5)
-      actionview (= 7.0.5)
-      activejob (= 7.0.5)
-      activesupport (= 7.0.5)
-      mail (~> 2.5, >= 2.5.4)
-      net-imap
-      net-pop
-      net-smtp
-      rails-dom-testing (~> 2.0)
-    actionpack (7.0.5)
-      actionview (= 7.0.5)
-      activesupport (= 7.0.5)
-      rack (~> 2.0, >= 2.2.4)
-      rack-test (>= 0.6.3)
-      rails-dom-testing (~> 2.0)
-      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.5)
-      actionpack (= 7.0.5)
-      activerecord (= 7.0.5)
-      activestorage (= 7.0.5)
-      activesupport (= 7.0.5)
-      globalid (>= 0.6.0)
-      nokogiri (>= 1.8.5)
-    actionview (7.0.5)
-      activesupport (= 7.0.5)
-      builder (~> 3.1)
-      erubi (~> 1.4)
-      rails-dom-testing (~> 2.0)
-      rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (7.0.5)
-      activesupport (= 7.0.5)
-      globalid (>= 0.3.6)
-    activemodel (7.0.5)
-      activesupport (= 7.0.5)
-    activerecord (7.0.5)
-      activemodel (= 7.0.5)
-      activesupport (= 7.0.5)
-    activestorage (7.0.5)
-      actionpack (= 7.0.5)
-      activejob (= 7.0.5)
-      activerecord (= 7.0.5)
-      activesupport (= 7.0.5)
-      marcel (~> 1.0)
-      mini_mime (>= 1.1.0)
-    activesupport (7.0.5)
-      concurrent-ruby (~> 1.0, >= 1.0.2)
-      i18n (>= 1.6, < 2)
-      minitest (>= 5.1)
-      tzinfo (~> 2.0)
-    builder (3.2.4)
-    concurrent-ruby (1.2.2)
-    crass (1.0.6)
-    date (3.3.3)
-    debug (1.8.0)
-      irb (>= 1.5.0)
-      reline (>= 0.3.1)
-    erubi (1.12.0)
-    globalid (1.1.0)
-      activesupport (>= 5.0)
-    i18n (1.14.1)
-      concurrent-ruby (~> 1.0)
-    io-console (0.6.0)
-    irb (1.7.0)
-      reline (>= 0.3.0)
-    loofah (2.21.3)
-      crass (~> 1.0.2)
-      nokogiri (>= 1.12.0)
-    mail (2.8.1)
-      mini_mime (>= 0.1.1)
-      net-imap
-      net-pop
-      net-smtp
-    marcel (1.0.2)
-    method_source (1.0.0)
-    mini_mime (1.1.2)
-    mini_portile2 (2.8.2)
-    minitest (5.18.0)
-    net-imap (0.3.6)
-      date
-      net-protocol
-    net-pop (0.1.2)
-      net-protocol
-    net-protocol (0.2.1)
-      timeout
-    net-smtp (0.3.3)
-      net-protocol
-    nio4r (2.5.9)
-    nokogiri (1.15.2)
-      mini_portile2 (~> 2.8.2)
-      racc (~> 1.4)
-    puma (5.6.5)
-      nio4r (~> 2.0)
-    racc (1.7.1)
-    rack (2.2.7)
-    rack-test (2.1.0)
-      rack (>= 1.3)
-    rails (7.0.5)
-      actioncable (= 7.0.5)
-      actionmailbox (= 7.0.5)
-      actionmailer (= 7.0.5)
-      actionpack (= 7.0.5)
-      actiontext (= 7.0.5)
-      actionview (= 7.0.5)
-      activejob (= 7.0.5)
-      activemodel (= 7.0.5)
-      activerecord (= 7.0.5)
-      activestorage (= 7.0.5)
-      activesupport (= 7.0.5)
-      bundler (>= 1.15.0)
-      railties (= 7.0.5)
-    rails-dom-testing (2.0.3)
-      activesupport (>= 4.2.0)
-      nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.0)
-      loofah (~> 2.21)
-      nokogiri (~> 1.14)
-    railties (7.0.5)
-      actionpack (= 7.0.5)
-      activesupport (= 7.0.5)
-      method_source
-      rake (>= 12.2)
-      thor (~> 1.0)
-      zeitwerk (~> 2.5)
-    rake (13.0.6)
-    reline (0.3.5)
-      io-console (~> 0.5)
-    sprockets (4.2.0)
-      concurrent-ruby (~> 1.0)
-      rack (>= 2.2.4, < 4)
-    sprockets-rails (3.4.2)
-      actionpack (>= 5.2)
-      activesupport (>= 5.2)
-      sprockets (>= 3.0.0)
-    thor (1.2.2)
-    timeout (0.3.2)
-    tzinfo (2.0.6)
-      concurrent-ruby (~> 1.0)
-    websocket-driver (0.7.5)
-      websocket-extensions (>= 0.1.0)
-    websocket-extensions (0.1.5)
-    zeitwerk (2.6.8)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  debug
-  puma (~> 5.0)
-  rails (~> 7.0.5)
-  sprockets-rails
-  tzinfo-data
-  vipassana-design-standards!
-
-RUBY VERSION
-   ruby 2.7.4p191
-
-BUNDLED WITH
-   2.1.4

package/demo/Rakefile

@@ -1,6 +0,0 @@
-# Add your own tasks in files placed in lib/tasks ending in .rake,
-# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
-
-require_relative "config/application"
-
-Rails.application.load_tasks

package/demo/app/assets/config/manifest.js

@@ -1,2 +0,0 @@
-//= link_tree ../images
-//= link_directory ../stylesheets .css

package/demo/app/assets/stylesheets/application.css

@@ -1,15 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */

package/demo/app/controllers/application_controller.rb

@@ -1,3 +0,0 @@
-class ApplicationController < ActionController::Base
-  helper Vipassana::DesignStandardsHelper
-end

package/demo/app/controllers/demo_controller.rb

@@ -1,4 +0,0 @@
-class DemoController < ApplicationController
-  def index
-  end
-end

package/demo/app/views/demo/index.html.erb

@@ -1,11 +0,0 @@
-<h1>Demo#index</h1>
-<p>Find me in app/views/demo/index.html.erb</p>
-
-<div class="form-floating mb-3">
-  <input type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
-  <label for="floatingInput">Email address</label>
-</div>
-<div class="form-floating">
-  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
-  <label for="floatingPassword">Password</label>
-</div>

package/demo/app/views/layouts/application.html.erb

@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<%- locale = "en" %>
-
-<html class="vds-html" lang="<%= locale %>" dir="<%= is_rtl?(locale) && 'rtl' %>">
-  <head>
-    <title>Demo</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <%= csrf_meta_tags %>
-    <%= csp_meta_tag %>
-
-    <%= stylesheet_link_tag "application" %>
-
-    <%= vds_favicon_tag %>
-    <%= vds_bootstrap_theme_css_tag(locale: locale, localhost: true) %>
-    <%= vds_bootstrap_theme_js_tag(locale: locale, localhost: true) %>
-  </head>
-
-  <body class="vds-body">
-    <div class="vds-header-and-content">
-      <!-- Header -->
-      <header class="vds-header">
-        <div class="vds-container d-flex">
-          <!-- Logo -->
-          <a href class="vds-logo-link me-auto">
-            <%= vds_logo_html(locale: locale, size: 14) %>
-          </a>
-
-          <div class="d-flex align-items-center">
-            <!-- Locale Picker -->
-            <span class="d-flex align-items-center flex-shrink-0">
-              <%= vds_icon_locale %>
-            </span>
-            <select class="form-select vds-locale-picker auto-resize">
-              <option selected>English</option>
-              <option>Other Language</option>
-            </select>
-
-            <!-- Account Dropdown -->
-            <div class="dropdown account-dropdown">
-              <button class="btn btn-link pe-0 dropdown-toggle text-secondary" id="header-menu" data-bs-toggle="dropdown"
-                data-bs-auto-close="outside" aria-expanded="false">
-                <%= vds_icon_account %>
-              </button>
-              <ul class="dropdown-menu dropdown-menu-end dropdown-with-modal-inside" aria-labelledby="header-menu">
-                <li><a class="dropdown-item" href="#">Link</a></li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <!-- Page -->
-      <div class="vds-page vds-container">
-        <div class="vds-sidenav">
-          <ul>
-            <li><a href="#" class="active">Home Page</a></li>
-            <li><a href="#">My Settings</a></li>
-          </ul>
-        </div>
-        <div class="vds-page-content">
-          <!-- Page content -->
-          <%= yield %>
-        </div>
-      </div>
-    </div>
-
-    <!-- Footer -->
-    <footer class="vds-footer">
-      <div class="vds-container">
-        Footer
-      </div>
-    </footer>
-  </body>
-</html>