append variables
  -   
    var plugins = [
      {
        title: 'Anchor.js',
        description: `A JavaScript utility for adding deep anchor links to existing page content. AnchorJS is lightweight, accessible, and has no dependencies.`,
        implementationUrl: `${CWD}${paths['components-anchor']}`,
        documentationUrl: 'https://www.bryanbraun.com/anchorjs/#basic-usage'
      },
      {
        title: 'Choices',
        description: `Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency`,
        implementationUrl: `${CWD}${paths['advance-select']}`,
        documentationUrl: 'https://github.com/jshjohnson/Choices'
      },
      {
        title: 'CountUp',
        description: `CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.`,
        implementationUrl: `${CWD}${paths['countup']}`,
        documentationUrl: 'https://github.com/inorganik/CountUp.js'
      },

      {
        title: 'Sortable.js',
        description: 'JavaScript library for reorderable drag-and-drop lists.',
        implementationUrl: `${CWD}${paths['sortable']}`,
        documentationUrl: 'https://sortablejs.github.io/Sortable/'
      },
      {
        title: 'D3.js',
        description: 'JavaScript library for manipulating documents based on data.',
        implementationUrl: `${CWD}${paths['d3js']}`,
        documentationUrl: 'https://github.com/d3/d3/wiki'
      },
      {
        title: 'Dropzone',
        description: 'DropzoneJS is an open-source library that provides drag & drop file uploads with image previews.',
        implementationUrl: `${CWD}${paths['file-uploader']}`,
        documentationUrl: 'https://www.dropzonejs.com/'
      },
      {
        title: 'Dayjs',
        description: 'Day.js 2KB immutable date-time library alternative to Moment.js with the same modern API.',
        documentationUrl: 'https://day.js.org/docs/en/installation/installation'
      },
      {
        title: 'Echarts.js',
        description: 'A powerful, interactive charting and visualization library for browser.',
        implementationUrl: `${CWD}${paths['echart-how-to-use']}`,       
        documentationUrl: 'https://echarts.apache.org/en/option.html'
      },
      {
        title: 'Chart.js',
        description: 'simple yet flexible JavaScript charting for designers & developers.',
        implementationUrl: `${CWD}${paths['chartjs']}`,       
        documentationUrl: 'https://www.chartjs.org/docs/latest/'
      },
      {
        title: 'NoUiSlider',
        description: 'noUiSlider is a lightweight range slider with multi-touch support and a ton of features.',
        implementationUrl: `${CWD}${paths['range-slider']}`,       
        documentationUrl: 'https://refreshless.com/nouislider/'
      },
      {
        title: 'Inputmask',
        description: 'Inputmask is a javascript library that creates an input mask.',
        implementationUrl: `${CWD}${paths['input-mask']}`,       
        documentationUrl: 'https://github.com/RobinHerbots/Inputmask'
      },
      {
        title: 'FontAwesome 5',
        description: 'Get vector icons and social logos on your website with Font Awesome, the web\'s most popular icon set and toolkit.',
        documentationUrl: 'https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use'
      },
      {
        title: 'Flatpickr',
        description: `Lightweight, powerful javascript datetimepicker with no dependencies.`,
        implementationUrl: `${CWD}${paths['date-picker']}`,
        documentationUrl: 'https://flatpickr.js.org/'
      },

      {
        title: 'FullCalendar',
        description: 'Full-sized drag & drop event calendar.',
        implementationUrl: `${CWD}${paths['components-calendar']}`,
        documentationUrl: 'https://fullcalendar.io/docs'
      },
      {
        title: 'Glightbox',
        description: 'Glightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos.',
        implementationUrl: `${CWD}${paths['lightbox']}`,
        documentationUrl: 'https://github.com/biati-digital/glightbox'
      },
      {
        title: 'Plyr',
        description: `A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.`,
        implementationUrl: `${CWD}${paths['videos-plyr']}`,
        documentationUrl: 'https://github.com/sampotts/plyr/blob/master/README.md'
      },
      {
        title: 'List.js',
        description: 'Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.',
        implementationUrl: `${CWD}${paths['advance-tables']}`,
        documentationUrl: 'https://listjs.com/'
      },
      {
        title: 'Lottie Web',
        description: 'Render After Effects animations natively on Web, Android, and iOS, and React Native.',
        implementationUrl: `${CWD}${paths['animated-icons']}`,
        documentationUrl: 'https://github.com/airbnb/lottie-web'
      },
      {
        title: 'Lodash',
        description: 'A modern JavaScript utility library delivering modularity, performance, & extras.',
        documentationUrl: 'https://lodash.com'
      }, 
      {
        title: 'SimpleBar',
        description: 'Custom scrollbars made simple, lightweight, easy to use and cross-browser.',
        implementationUrl: `${CWD}${paths['utilities-overlayscrollbar']}`,
        documentationUrl: 'https://github.com/Grsmto/simplebar/tree/master/packages/simplebar'
      }, 
      {
        title: 'Is.js',
        description: 'Micro check plugin. Check types, regexps, presence, time and more...',
        documentationUrl: 'http://is.js.org/'
      },
      {
        title: 'Typed Text',
        description: 'A JavaScript library that types out, deletes them, and then types again.',
        implementationUrl: `${CWD}${paths['components-typed-text']}`,
        documentationUrl: 'https://mattboldt.com/demos/typed-js/'
      },
      {
        title: 'Tinymce editor',
        description: 'The world\'s most popular JavaScript library for rich text editing.',
        implementationUrl: `${CWD}${paths['text-editor']}`,
        documentationUrl: 'https://www.tiny.cloud/docs/quick-start/'
      },
      {
        title: 'Swiper',
        description: 'Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.',
        implementationUrl: `${CWD}${paths['carousel-swiper']}`,
        documentationUrl: 'https://swiperjs.com'
      },
      {
        title: 'Rater',
        description: 'Star rating widget for the browser. Unlimited number of stars. No dependencies. No Jquery required.',
        implementationUrl: `${CWD}${paths['advance-rating']}`,
        documentationUrl: 'https://fredolss.github.io/rater-js/'
      },
      {
        title: 'Google Map',
        description: `${name} uses Google map with Snazzy Maps, with different color schemes aimed towards web designers and developers.`,
        implementationUrl: `${CWD}${paths['google-map']}`,
        documentationUrl: 'https://developers.google.com/maps/documentation/javascript/tutorial'
      },
      {
        title: 'Leaflet Map',
        description: `JavaScript library for mobile-friendly interactive maps`,
        implementationUrl: `${CWD}${paths['leaflet-map']}`,
        documentationUrl: 'https://leafletjs.com/'
      },
    ].sort((a,b) => a.title > b.title ? 1 : a.title < b.title ? -1 : 0)

mixin Plugin(config)
  .card.mb-3
    .card-header
      h5.mb-0(data-anchor)=config.title 
    .card-body.bg-body-tertiary
      p.mb-0!=config.description
      if(config.implementationUrl)
        a(href=config.implementationUrl).font-sans-serif Implementation in theme
        |  - 
      if(config.documentationUrl) 
        a(href=config.documentationUrl target='_blank').font-sans-serif Full Documentation

mixin Plugins
  each plugin in plugins
    +Plugin(plugin)

mixin SimpleApproach
  p&attributes(attributes) Place your new plugin in 
    code public/vendors
    |  folder. Eg: to add the 
    code flatpickr
    |  plugin, we will download it from 
    a(href="https://flatpickr.js.org/" target="_blank") here,
    |  unzip it and place the 
    code flatpickr-master
    |  folder in 
    code public/vendors
    |  folder. You can now simply link the plugin files to your HTML and use them.

mixin NpmApproach
  p Suppose we are installing the  
    code flatpickr
    |  plugin. Here are the steps:
  p.fw-bold.font-sans-serif.mb-0 Step 1:
  p run npm command for install plugin. for 
    code flatpickr 
    | we can run 
  Pre 
    code.lang-js.
      npm i flatpickr
  p.fw-bold.font-sans-serif.mb-0.mt-3 Step 2:
  p Go to 
    code vendors.json 
    | file and give the path directory from node_modules as follow
  pre
    code.language-js.
      #{'"flatpickr": {\n\t"src": ["dist/flatpickr.min.js", "dist/flatpickr.min.css"],\n\t"dest": "flatpickr"\n}'}
  p Here, 
    code dest
    |  refers to 
    code public/vendors/
    | , where gulp will copy files from the 
    code flatpickr
    |  plugin. We actually use the 
    code vendors
    |  folder to store neccassary plugins. And all the plugins folder name will be as we give the dest value
  p.fw-bold.font-sans-serif.mb-0.mt-3 Step 3:
  p Run the following command:
  pre
    code.lang-js.
      #{'gulp vendor:move'}