vipassana-design-standards 0.0.18 → 0.0.20

package/src/javascripts/helper.js

@@ -0,0 +1,96 @@
+import i18n from './i18n.js'
+
+function isRtl(locale) {
+  return ['ar', 'fa', 'he'].includes(locale)
+}
+
+export function vdsFaviconTag() {
+  return `<link rel="shortcut icon" type="image/x-icon" href="https://design-standards.dhamma.org/dist/favicon.png">`
+}
+
+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/@PACKAGE_VERSION@/${path}`
+}
+
+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 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 vdsBootstrapThemeJsTag(locale, localhost = false) {
+  return javascriptIncludeTag(vdsAssetUrl("js/bootstrap5-theme.min.js", localhost))
+}
+
+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>
+  `
+}
+
+// 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" class="bi bi-translate" 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" class="bi bi-person-circle" 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" class="bi bi-list" 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/src/javascripts/index.js

@@ -1,5 +1,5 @@
 // i18n JSON
-import i18nJson from './i18n.js?ver=0.17'
+import i18nJson from './i18n.js?ver=0.20'
 
 // Dependencies
 import { Canvg } from 'https://cdn.skypack.dev/canvg@^4.0.0';
@@ -33,7 +33,8 @@ export default {
         { color: "#B78730", text: "Buttons and graphical elements", name: "Light Gold" },
         { color: "#1E3461", text: "Header text, buttons and graphical elements", name: "Blue" },
         { color: "#4F4D47", text: "Paragraph Text", name: "Grey" },
-      ]
+      ],
+      logoCodeLarge: false
     }
   },
   computed: {
@@ -188,7 +189,9 @@ export default {
       return this.night ? "#ffffff90" : "#4F4D47"
     },
     logoCode() {
-      return `<img height="64" src="https://design-standards.dhamma.org/dist/logos/logo-${this.locale}.png" alt="${this.fullTitle}"/>`
+      let height= this.logoCodeLarge ? 80 : 64
+      let suffix = this.logoCodeLarge ? '-large': ''
+      return `<img height="${height}" src="https://design-standards.dhamma.org/dist/logos/logo-${this.locale}${suffix}.png" alt="${this.fullTitle}"/>`
     }
   },
   mounted() {

package/src/stylesheets/custom-bootstrap-utilities.scss

@@ -23,6 +23,12 @@
   --bs-box-shadow: #{$box-shadow};
   --bs-box-shadow-sm: #{$box-shadow-sm};
   --bs-box-shadow-lg: #{$box-shadow-lg};
+  // those variables are used to make custom inputs similar to bootstrap inputs
+  --bs-input-padding: #{$input-padding-y} #{$input-padding-x};
+  --bs-form-floating-padding-x: #{$form-floating-padding-x};
+  --bs-form-floating-padding-y: #{$form-floating-padding-y};
+  --bs-form-floating-input-padding-t: #{$form-floating-input-padding-t};
+  --bs-form-floating-input-padding-b: #{$form-floating-input-padding-b};
 
   // adds other variables
   --layout-padding: 1rem;

package/src/stylesheets/index.css

@@ -29,6 +29,9 @@ header {
   font-size: 2rem;
   margin: 0;
 }
+header.bordered {
+  border-bottom: 2px solid var(--gold);
+}
 header .container {
   padding-bottom: .5rem;
 }
@@ -36,12 +39,15 @@ header .container {
 section.main {
   background: var(--black);
   padding: 1rem 0;
-  text-align: center
+  text-align: center;
+  color: white;
 }
 section.main h2 {
   line-height: 2rem;
   margin-top: 0;
-  color: white;
+}
+section.main p {
+  opacity: .8;
 }
 .logo-container {
   margin-top: 2rem;
@@ -77,6 +83,9 @@ button.btn-outline-primary {
   background-color: transparent;
   color: var(--gold);
 }
+button.btn-secondary {
+  background-color: var(--blue);
+}
 
 button i {
   display: inline-block !important;

package/vipassana-design-standards.gemspec

@@ -2,10 +2,10 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'vipassana-design-standards'
-  gem.version       = '0.0.18'
+  gem.version       = '0.0.20'
   # gem.license       = 'MIT'
-  gem.summary       = 'Include Vipassana SVG logos in your pages'
-  gem.description   = 'A ruby module to offer inline SVG images for each language'
+  gem.summary       = 'Helper to include UI components in your pages'
+  gem.description   = 'Provide a custom bootstrap theme, logos and icons according to the design standards of Vipassana Meditation as Taught yb S.N. Goenka'
   gem.authors       = ['Dhamma workers']
   gem.email         = ['sebastian.castro@dhamma.org', 'webmaster@dhamma.org']
   gem.homepage      = 'https://design-standards.dhamma.org'