vipassana-design-standards 0.0.20 → 0.0.21

package/src/javascripts/index.js

@@ -1,400 +0,0 @@
-// i18n JSON
-import i18nJson from './i18n.js?ver=0.20'
-
-// Dependencies
-import { Canvg } from 'https://cdn.skypack.dev/canvg@^4.0.0';
-import fileSaver from 'https://cdn.jsdelivr.net/npm/file-saver@2.0.5/+esm'
-import jszip from 'https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm'
-
-// Graphicals element as JS
-import wheel from '../images/wheels/wheel-2023.svg.js'
-import wheelDuotone from '../images/wheels/wheel-2023-duotone.svg.js'
-import footlight from '../../dist/fonts/FootlightMTProLight.base64.js'
-import lato from '../../dist/fonts/Lato-Light.base64.js'
-
-export default {
-  data() {
-    return {
-      ready: false,
-      locale: 'en',
-      width: 1200,
-      height: 100,
-      scale100: 100,
-      wheel: 'wheel1',
-      disposition: 'left-one-line',
-      displayTagline: true,
-      night: false,
-      embedSVG: false,
-      generating: false,
-      customImageName: null,
-      customSizeName: null,
-      colorPalette: [
-        { color: "#9C6B14", text: "Header text", name: "Dark Gold" },
-        { 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: {
-    fullTitle() {
-      return this.t('vipassana_as_taught') || `${this.t('vipassana_meditation')} ${this.t('as_taught')}`
-    },
-    i18n() {
-      return i18nJson
-    },
-    isRtl() {
-      return this.i18n[this.locale].rtl
-    },
-    titleFontUrl() {
-      return footlight
-    },
-    taglineFontUrl() {
-      return lato
-    },
-    wheels() {
-      return {
-        wheel1: wheel,
-        wheel2: wheelDuotone,
-      }
-    },
-    wheelSVGCode() {
-      return this.wheels[this.wheel]
-    },
-    wheelPath() {
-      const paths = {
-        wheel1: 'https://design-standards.dhamma.org/dist/dhamma-wheel.svg',
-        wheel2: 'https://design-standards.dhamma.org/assets/images/wheels/wheel-2023-duotone.svg',
-      }
-      return paths[this.wheel]
-    },
-    scale() {
-      return this.scale100 / 100
-    },
-    dispositions() {
-      return ['left-one-line', 'left-two-lines', 'centered']
-    },
-    titleFontSize() {
-      switch (this.locale) {
-        case "si": return 27;
-        default: return 32
-      }
-    },
-    taglineFontSize() {
-      switch (this.locale) {
-        case "si": return 16;
-        default: return 18
-      }
-    },
-    titleFontFamily() {
-      return this.getTitleFontFamily(this.locale)
-    },
-    taglineFontFamily() {
-      return this.getTaglineFontFamily(this.locale)
-    },
-    reverse() {
-      return this.i18n[this.locale].reverse
-    },
-    positions() {
-      if (this.reverse) {
-        return {
-          'left-one-line': {
-            firstTitleTop: 60,
-            vTitleWithdraw: 6
-          },
-          'left-one-line_tagline': {
-            taglineTop: 38,
-            firstTitleTop: 73
-          },
-          'left-two-lines': {
-            secondTitleTop: 40,
-            firstTitleTop: 78
-          },
-          'left-two-lines_tagline': {
-            taglineTop: 19,
-            secondTitleTop: 56,
-            firstTitleTop: 92
-          },
-          'centered': {
-            secondTitleTop: 132,
-            firstTitleTop: 167,
-          },
-          'centered_tagline': {
-            taglineTop: 124,
-            secondTitleTop: 159,
-            firstTitleTop: 193,
-
-          },
-        }
-      }
-      return {
-        'left-one-line': {
-          firstTitleTop: 60,
-          vTitleWithdraw: 6
-        },
-        'left-one-line_tagline': {
-          firstTitleTop: 48,
-          taglineTop: 78,
-          vTitleWithdraw: 6
-        },
-        'left-two-lines': {
-          firstTitleTop: 43,
-          secondTitleTop: 81,
-          vTitleWithdraw: 3
-        },
-        'left-two-lines_tagline': {
-          firstTitleTop: 32,
-          secondTitleTop: 65,
-          taglineTop: 92,
-          vTitleWithdraw: 3
-        },
-        'centered': {
-          firstTitleTop: 132,
-          secondTitleTop: 167,
-        },
-        'centered_tagline': {
-          firstTitleTop: 132,
-          secondTitleTop: 167,
-          taglineTop: 195,
-        },
-      }
-    },
-    pos() {
-      return this.positions[this.disposition + (this.displayTagline ? '_tagline' : '')]
-    },
-    wheelTranslate() {
-      const wheelWidth = 70
-      if (this.disposition == 'centered') return (this.width / 2) - (wheelWidth / 2)
-      else return this.isRtl ? this.width - 70 : 0
-    },
-    textTranslate() {
-      return this.isRtl && this.disposition != 'centered' ? this.width : 0
-    },
-    imageName() {
-      if (this.customImageName) return this.customImageName
-
-      const wheel = this.wheel == 'wheel1' ? '' : `-${this.wheel}`
-      return `logo-${this.locale}-${this.disposition}${this.displayTagline ? '' : '-no-tagline'}${wheel}`
-    },
-    sizeName() {
-      if (this.customSizeName !== null) return this.customSizeName
-
-      return this.scale100 == 100 ? '' : `@${this.scale100}px`
-    },
-    titleColor() {
-      return this.night ? "#fff" : "#9C6B14"
-    },
-    taglineColor() {
-      return this.night ? "#ffffff90" : "#4F4D47"
-    },
-    logoCode() {
-      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() {
-    this.ready = true
-    this.$watch(
-      (vm) => [vm.locale, vm.disposition, vm.displayTagline],
-      () => { if (!this.generating) this.updateImageSize() },
-      { immediate: true, deep: true, }
-    )
-  },
-  methods: {
-    t(key) {
-      return this.i18n[this.locale][key]
-    },
-    copyCode() {
-      navigator.clipboard.writeText(this.logoCode);
-    },
-    inlineSvg() {
-      return document.querySelector('#logo-svg').outerHTML
-    },
-    textLeft(text) {
-      if (this.disposition == 'centered') return this.width / 2
-
-      let result = 86
-      // improve alignement when text start with v, like Vipassana
-      if (!this.isRtl && text && text.length > 1 && text[0].toLowerCase() == 'v')
-        result -= (this.pos.vTitleWithdraw || 0)
-      return this.isRtl ? -1 * result : result
-    },
-    getTitleFontFamily(locale) {
-      return this.universalFont(locale) || "FootLight"
-    },
-    getTaglineFontFamily(locale) {
-      switch (locale) {
-        case "tr": return 'Noto Sans';
-        case "bg": return 'Noto Sans';
-        case "el": return 'Noto Sans';
-        case "mk": return 'Noto Sans';
-        case "mr": return 'Noto Sans';
-        case "or": return 'Noto Sans';
-        case "ro": return 'Noto Sans';
-        case "ru": return 'Noto Sans';
-        case "vi": return 'Noto Sans';
-        default: return this.universalFont(locale) || "Lato"
-      }
-    },
-    universalFont(locale) {
-      switch (locale) {
-        case "gu": return 'Noto Sans Gujarati';
-        case "ja": return 'Noto Sans JP';
-        case "ko": return 'Noto Sans KR';
-        case "si": return 'Noto Sans Sinhala';
-        case "km": return 'Noto Sans Khmer';
-        case "fa": return 'Noto Sans Arabic';
-        case "ar": return 'Noto Sans Arabic';
-        default: return null
-      }
-    },
-    downloadSVG() {
-      const [filename, content] = this.getSVGData()
-      fileSaver.saveAs(content, filename);
-    },
-    getSVGData() {
-      const blob = new Blob([this.inlineSvg()], {type: 'image/svg'})
-      return [`${this.imageName}.svg`, blob]
-    },
-    downloadPNG() {
-      const [filename, canvas] = this.getPNGData()
-      setTimeout(() => {
-        fileSaver.saveAs(canvas.toDataURL(), filename);
-      }, 100)
-    },
-    getPNGData() {
-      // SVG -> canvas -> PNG
-      const canvas = document.querySelector('canvas')
-      Canvg.fromString(canvas.getContext('2d'), this.inlineSvg()).render()
-      return [`${this.imageName}${this.sizeName}.png`, canvas]
-    },
-    async updateImageSize() {
-      await this.$nextTick()
-      // Update the logo size based on the real width of wheel + text
-      this.width = document.getElementById("logo").getBBox().width + 3
-      this.height = document.getElementById("logo").getBBox().height + 1
-    },
-    async generateAllInlineSVG() {
-      this.generating = true
-      this.embedSVG = false
-      let svgs = {}
-
-      for (let locale in this.i18n) {
-        this.locale = locale
-        svgs[locale] = {}
-
-        // Left 2 line no tag line for Mobile
-        this.disposition = 'left-two-lines'
-        this.displayTagline = false
-        svgs[locale].mobile = await this.generateSvgCode()
-
-        // Auto disposition
-        this.disposition = 'left-one-line'
-        this.displayTagline = true
-        await this.updateImageSize()
-        if ((this.width / this.height) > 8.5) {
-          this.disposition = 'left-two-lines'
-        }
-        svgs[locale].default = await this.generateSvgCode()
-
-        // All dispositions
-        for (let disposition of this.dispositions) {
-          this.disposition = disposition
-          for (let tagline of [true, false]) {
-            this.displayTagline = tagline
-            const name = `${this.disposition}${this.displayTagline ? '' : '-no-tagline'}`
-            svgs[locale][name] = await this.generateSvgCode()
-          }
-        }
-      }
-
-      // Create ruby file
-      const result = `
-      # This file has been generated by design-standards.dhamma.org wesbite
-      # index.js#generateAllInlineSVG
-
-      VDS_SVGS = ${JSON.stringify(svgs)}
-      `
-      var blob = new Blob([result], {type: "text/plain;charset=utf-8"})
-      fileSaver.saveAs(blob, "logos_inline_svg.rb")
-
-      var blob = new Blob([JSON.stringify(svgs)], {type: "text/plain;charset=utf-8"})
-      fileSaver.saveAs(blob, "logos-inline-svg.json")
-
-      this.generating = false
-    },
-    async generateSvgCode() {
-      await this.updateImageSize()
-      await this.$nextTick()
-      let svgNode = document.getElementById("logo-svg").cloneNode(true)
-      svgNode.removeAttribute('id')
-      svgNode.removeAttribute('width')
-      svgNode.removeAttribute('height')
-      svgNode.getElementById('logo').removeAttribute('transform')
-      let result = svgNode.outerHTML
-      return result.replace(/<\!--.*?-->/g, "") // remove comments
-    },
-    async generateAllLogos() {
-      this.generating = true
-      const zip = new jszip();
-
-      for (let locale in this.i18n) {
-        this.locale = locale
-
-        // Left 2 line no tag line for Mobile
-        this.disposition = 'left-two-lines'
-        this.displayTagline = false
-        this.customImageName = `logo-${this.locale}`
-        this.customSizeName = '-small'
-        await this.generateImages(zip, [80])
-
-        // Auto disposition
-        this.disposition = 'left-one-line'
-        this.displayTagline = true
-        await this.updateImageSize()
-        if ((this.width / this.height) > 8.5) {
-          this.disposition = 'left-two-lines'
-        }
-        this.customImageName = `logo-${this.locale}`
-        this.customSizeName = ''
-        await this.generateImages(zip, [64])
-        this.customSizeName = '-large'
-        await this.generateImages(zip, [80])
-      }
-
-      zip.generateAsync({type:"blob"}).then((content) => {
-        fileSaver.saveAs(content, "logos.zip");
-        this.generating = false
-        this.customImageName = null
-        this.customSizeName = null
-        this.scale100 = 100
-        this.locale = "en"
-        this.wheel = "wheel1"
-        this.disposition = "left-one-line"
-      });
-    },
-    async generateImages(zip, sizes) {
-      await this.updateImageSize()
-      await this.$nextTick()
-      // const [filename, content] = this.getSVGData()
-      // zip.file(filename, content);
-      for(let scale of sizes) {
-        this.scale100 = scale
-        await this.$nextTick()
-        await this.$nextTick()
-        await this.addPNGImage(zip)
-      }
-    },
-    addPNGImage(zip) {
-      return new Promise(resolve => {
-        const [filename, canvas] = this.getPNGData()
-        canvas.toBlob(function(blob) {
-          zip.file(filename, blob)
-          resolve()
-        })
-      })
-    }
-  },
-}

package/src/stylesheets/bootstrap5-theme.scss

@@ -1,24 +0,0 @@
-@import "./custom-bootstrap-variables.scss";
-
-@import "bootstrap5/scss/bootstrap.scss";
-
-@import "./custom-bootstrap-utilities.scss";
-@import "./custom-bootstrap.scss";
-
-@import "./layout/vds-mixins.scss";
-@import "./layout/vds-layout.scss";
-@import "./layout/vds-header.scss";
-@import "./layout/vds-sidenav.scss";
-
-@import "./fonts.scss";
-@import "./logo.scss";
-
-html.vds-html {
-  font-size: 14px;
-  @include media-breakpoint-up(md) {
-    font-size: 15px;
-  }
-  @include media-breakpoint-up(xl) {
-    font-size: 16px;
-  }
-}

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

@@ -1,143 +0,0 @@
-
-:root {
-  // Generate missing CSS Variables
-  @each $color, $value in $blues {
-    --#{$prefix}#{$color}: #{$value};
-  }
-  @each $color, $value in $golds {
-    --#{$prefix}#{$color}: #{$value};
-  }
-  @each $color, $value in $greens {
-    --#{$prefix}#{$color}: #{$value};
-  }
-  @each $color, $value in $reds {
-    --#{$prefix}#{$color}: #{$value};
-  }
-  --bs-border-color: #{$border-color};
-  --bs-font-heading: #{$headings-font-family};
-
-  --bs-spacer-x: #{$spacer-x};
-  @include media-breakpoint-down(md) {
-    --bs-spacer-x: 1rem;
-  }
-  --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;
-  @include media-breakpoint-up(md) {
-    --layout-padding: 1.5rem;
-  }
-  @include media-breakpoint-up(xl) {
-    --layout-padding: 2rem;
-  }
-}
-
-// Font-family helpers
-.ff-normal {
-  font-family: $font-family-sans-serif;
-}
-.ff-heading {
-  font-family: $headings-font-family;
-  margin-bottom: -0.3em; // strange, but the Footlight font does not seems to be properly aligned with baseline
-}
-
-// Font-size helpers
-.fs-normal {
-  font-size: 1rem !important;
-}
-
-// fs-09-rem, fs-085-em..
-.fs-05-rem { font-size: .5rem !important; }
-.fs-05-em { font-size: .5em !important; }
-.fs-055-rem { font-size: .55rem !important; }
-.fs-055-em { font-size: .55em !important; }
-
-.fs-06-rem { font-size: .6rem !important; }
-.fs-06-em { font-size: .6em !important; }
-.fs-065-rem { font-size: .65rem !important; }
-.fs-065-em { font-size: .65em !important; }
-
-.fs-07-rem { font-size: .7rem !important; }
-.fs-07-em { font-size: .7em !important; }
-.fs-075-rem { font-size: .75rem !important; }
-.fs-075-em { font-size: .75em !important; }
-
-.fs-08-rem { font-size: .8rem !important; }
-.fs-08-em { font-size: .8em !important; }
-.fs-085-rem { font-size: .85rem !important; }
-.fs-085-em { font-size: .85em !important; }
-
-.fs-09-rem { font-size: .9rem !important; }
-.fs-09-em { font-size: .9em !important; }
-.fs-095-rem { font-size: .95rem !important; }
-.fs-095-em { font-size: .95em !important; }
-
-// fs-11-rem, fs-125-em...
-.fs-11-rem { font-size: 1.1rem !important; }
-.fs-11-em { font-size: 1.1em !important; }
-.fs-115-rem { font-size: 1.15rem !important; }
-.fs-115-em { font-size: 1.15em !important; }
-
-.fs-12-rem { font-size: 1.2rem !important; }
-.fs-12-em { font-size: 1.2em !important; }
-.fs-125-rem { font-size: 1.25rem !important; }
-.fs-125-em { font-size: 1.25em !important; }
-
-.fs-13-rem { font-size: 1.3rem !important; }
-.fs-13-em { font-size: 1.3em !important; }
-.fs-135-rem { font-size: 1.35rem !important; }
-.fs-135-em { font-size: 1.35em !important; }
-
-.fs-14-rem { font-size: 1.4rem !important; }
-.fs-14-em { font-size: 1.4em !important; }
-.fs-145-rem { font-size: 1.45rem !important; }
-.fs-145-em { font-size: 1.45em !important; }
-
-.fs-15-rem { font-size: 1.5rem !important; }
-.fs-15-em { font-size: 1.5em !important; }
-.fs-155-rem { font-size: 1.55rem !important; }
-.fs-155-em { font-size: 1.55em !important; }
-
-.full-width-sm {
-  @include media-breakpoint-down(md) {
-    margin-left: -1rem !important;
-    margin-right: -1rem !important;
-    width: calc(100% + 2rem) !important;
-    box-shadow: none !important;
-    --bs-card-border-radius: 0;
-    --bs-card-inner-border-radius: 0;
-  }
-}
-
-.btn-floating-sm {
-  @include media-breakpoint-down(md) {
-    position: fixed !important;
-    bottom: 3rem !important;
-    z-index: 200 !important;
-    right: 1rem !important;
-    box-shadow: 0 3px 1rem #21252985 !important;
-  }
-}
-
-// Make this section take the whole page when printing
-@media print {
-  .full-page-print {
-    background-color: white;
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    margin: 0;
-    padding: 2rem;
-    z-index: 500;
-  }
-}

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

@@ -1,121 +0,0 @@
-// Color Palette
-$blue-100: #f8f9fa; // #f8f9fa; // #ececec; // primevue #e8eaf6 //#f1eff1;
-$blue-150: #f0f2f4; //#e6e5ec;
-$blue-200: #D2D6DF; //#e6e5ec; //#ced4da;
-$blue-300: #8586a2;
-$blue-400: #707595;
-$blue-500: #5b6588;
-$blue-600: #47547b;
-$blue-700: #32446e;
-$blue-800: #1E3461;
-$blue-900: #121f3a;
-
-$blue: $blue-800;
-
-$gold-100: #FCFAF7;
-$gold-200: #f0e7d5;
-$gold-300: #deccad;
-$gold-400: #c6a364;
-$gold-500: #B78730;
-$gold-600: #9c6b14;
-$gold-700: #7D550C;
-$gold-800: #493613;
-$gold-900: #241a09;
-
-$gold: $gold-500;
-
-$blues: (
-  "blue-100": $blue-100,
-  "blue-150": $blue-150,
-  "blue-200": $blue-200,
-  "blue-300": $blue-300,
-  "blue-400": $blue-400,
-  "blue-500": $blue-500,
-  "blue-600": $blue-600,
-  "blue-700": $blue-700,
-  "blue-800": $blue-800,
-  "blue-900": $blue-900
-);
-
-$golds: (
-  "gold-100": $gold-100,
-  "gold-200": $gold-200,
-  "gold-300": $gold-300,
-  "gold-400": $gold-400,
-  "gold-500": $gold-500,
-  "gold-600": $gold-600,
-  "gold-700": $gold-700,
-  "gold-800": $gold-800,
-  "gold-900": $gold-900
-);
-
-$green-200: #D5E4C3;
-$green: #3d6b00;
-$green-700: #203800;
-
-$red-200: #ECCCCC;
-$red: #8e3333;
-$red-700: #720000;
-
-$primary: $blue-800;
-$secondary: $gold-500;
-$info: $secondary;
-
-$dark: #4F4d47;
-$light: $blue-150;
-
-$dark-100: tint-color($dark, 80%);
-$dark-200: tint-color($dark, 60%);
-$dark-300: tint-color($dark, 40%);
-$dark-400: tint-color($dark, 20%);
-$dark-500: $dark;
-$dark-600: shade-color($dark, 20%);
-$dark-700: shade-color($dark, 40%);
-$dark-800: shade-color($dark, 60%);
-$dark-900: shade-color($dark, 80%);
-
-// Customize Bootstrap
-$font-family-sans-serif: var(--vds-font-family), 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$headings-font-family: var(--vds-headings-font-family), 'FootLight', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$headings-color: $blue;
-$headings-font-weight: 600;
-$headings-line-height: 1.5;
-
-$border-radius: .25rem;
-$border-color: $blue-200;
-$body-bg: $gold-100;
-
-$spacer: 1rem;
-$spacer-x: 1.5rem;
-
-$input-bg: white;
-$input-btn-padding-x: 1rem;
-$input-btn-padding-x-sm: .75rem;
-$input-border-color: $border-color;
-
-$alert-border-width: 0;
-
-$card-spacer-x: $spacer-x;
-$card-cap-padding-x: $spacer-x;
-$card-cap-padding-y: .75rem;
-$card-border-width: 0;
-
-$accordion-padding-x: $spacer-x;
-
-$list-group-item-padding-x: $spacer-x;
-
-$badge-font-weight: 400;
-
-$offcanvas-horizontal-width: auto;
-$offcanvas-padding-x: 1.5rem;
-$offcanvas-transition-duration: .25s;
-
-$modal-inner-padding: $spacer-x;
-$modal-content-border-radius: $border-radius;
-$modal-content-border-width: 0;
-$modal-header-border-width: 0;
-$modal-header-padding: 1rem $modal-inner-padding 0 $modal-inner-padding;
-$modal-fade-transform: translate(0, 0) scale(.8);
-$modal-transition: transform .15s ease-out;
-
-$enable-negative-margins: true;