├── .nvmrc
├── .gitignore
├── vite
    ├── .gitignore
    ├── src
    │   ├── _common.css
    │   ├── _common.js
    │   ├── app.css
    │   ├── app.js
    │   ├── assets
    │   │   └── favicon.svg
    │   └── index.html
    ├── .browserslistrc
    ├── postcss.config.js
    ├── babel.config.js
    ├── vite.config.js
    ├── README.md
    ├── package.json
    └── tailwind.config.js
├── encore
    ├── .gitignore
    ├── src
    │   ├── _common.css
    │   ├── _common.js
    │   ├── app.js
    │   ├── app.css
    │   ├── assets
    │   │   └── favicon.svg
    │   └── index.ejs
    ├── .browserslistrc
    ├── postcss.config.js
    ├── babel.config.js
    ├── README.md
    ├── package.json
    ├── webpack.config.js
    └── tailwind.config.js
├── webpack
    ├── .gitignore
    ├── src
    │   ├── _common.css
    │   ├── _common.js
    │   ├── app.js
    │   ├── app.css
    │   ├── assets
    │   │   └── favicon.svg
    │   └── index.html
    ├── .browserslistrc
    ├── postcss.config.js
    ├── babel.config.js
    ├── README.md
    ├── webpack.dev.js
    ├── webpack.prod.js
    ├── package.json
    ├── tailwind.config.js
    └── webpack.common.js
├── .eslintignore
├── parcel
    ├── .gitignore
    ├── src
    │   ├── _common.css
    │   ├── _common.js
    │   ├── app.js
    │   ├── app.css
    │   ├── assets
    │   │   └── favicon.svg
    │   └── index.html
    ├── .browserslistrc
    ├── postcss.config.js
    ├── README.md
    ├── package.json
    └── tailwind.config.js
├── nextjs
    ├── .eslintrc.json
    ├── next.config.js
    ├── styles
    │   ├── _common.css
    │   └── app.css
    ├── .browserslistrc
    ├── postcss.config.js
    ├── pages
    │   ├── _app.js
    │   └── index.js
    ├── .gitignore
    ├── package.json
    ├── README.md
    ├── public
    │   └── favicon.svg
    └── tailwind.config.js
├── .prettierrc.js
├── .editorconfig
├── .eslintrc.js
├── README.md
├── .github
    └── workflows
    │   └── test.yml
├── LICENSE
└── package.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | 20
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/vite/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public
3 | 


--------------------------------------------------------------------------------
/encore/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public
3 | 


--------------------------------------------------------------------------------
/webpack/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public
3 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public
3 | dist
4 | nextjs


--------------------------------------------------------------------------------
/parcel/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .parcel-cache
4 | 


--------------------------------------------------------------------------------
/nextjs/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/encore/src/_common.css:
--------------------------------------------------------------------------------
1 | /* layout */
2 | 
3 | body {
4 |   @apply py-10;
5 | }
6 | 


--------------------------------------------------------------------------------
/nextjs/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 | }
4 | 


--------------------------------------------------------------------------------
/parcel/src/_common.css:
--------------------------------------------------------------------------------
1 | /* layout */
2 | 
3 | body {
4 |   @apply py-10;
5 | }
6 | 


--------------------------------------------------------------------------------
/vite/src/_common.css:
--------------------------------------------------------------------------------
1 | /* layout */
2 | 
3 | body {
4 |   @apply py-10;
5 | }
6 | 


--------------------------------------------------------------------------------
/webpack/src/_common.css:
--------------------------------------------------------------------------------
1 | /* layout */
2 | 
3 | body {
4 |   @apply py-10;
5 | }
6 | 


--------------------------------------------------------------------------------
/nextjs/styles/_common.css:
--------------------------------------------------------------------------------
1 | /* layout */
2 | 
3 | body {
4 |   @apply py-10;
5 | }
6 | 


--------------------------------------------------------------------------------
/vite/src/_common.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-console
2 | console.log('_common.js')
3 | 


--------------------------------------------------------------------------------
/encore/src/_common.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-console
2 | console.log('_common.js')
3 | 


--------------------------------------------------------------------------------
/parcel/src/_common.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-console
2 | console.log('_common.js')
3 | 


--------------------------------------------------------------------------------
/webpack/src/_common.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-console
2 | console.log('_common.js')
3 | 


--------------------------------------------------------------------------------
/encore/.browserslistrc:
--------------------------------------------------------------------------------
1 | Chrome >= 84
2 | Edge >= 84
3 | Safari >= 14.1
4 | Firefox >= 74
5 | Opera >= 70
6 | iOS >= 14.5
7 | 


--------------------------------------------------------------------------------
/nextjs/.browserslistrc:
--------------------------------------------------------------------------------
1 | Chrome >= 84
2 | Edge >= 84
3 | Safari >= 14.1
4 | Firefox >= 74
5 | Opera >= 70
6 | iOS >= 14.5
7 | 


--------------------------------------------------------------------------------
/parcel/.browserslistrc:
--------------------------------------------------------------------------------
1 | Chrome >= 84
2 | Edge >= 84
3 | Safari >= 14.1
4 | Firefox >= 74
5 | Opera >= 70
6 | iOS >= 14.5
7 | 


--------------------------------------------------------------------------------
/vite/.browserslistrc:
--------------------------------------------------------------------------------
1 | Chrome >= 84
2 | Edge >= 84
3 | Safari >= 14.1
4 | Firefox >= 74
5 | Opera >= 70
6 | iOS >= 14.5
7 | 


--------------------------------------------------------------------------------
/webpack/.browserslistrc:
--------------------------------------------------------------------------------
1 | Chrome >= 84
2 | Edge >= 84
3 | Safari >= 14.1
4 | Firefox >= 74
5 | Opera >= 70
6 | iOS >= 14.5
7 | 


--------------------------------------------------------------------------------
/parcel/src/app.js:
--------------------------------------------------------------------------------
1 | /* xtendui */
2 | 
3 | import 'xtendui'
4 | import 'xtendui/src/toggle.mjs'
5 | 
6 | /* custom */
7 | 
8 | import './_common'
9 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   printWidth: 120,
3 |   semi: false,
4 |   singleQuote: true,
5 |   arrowParens: 'avoid',
6 |   bracketSameLine: true,
7 | }
8 | 


--------------------------------------------------------------------------------
/vite/src/app.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 | 
3 | @import "tailwindcss/components";
4 | 
5 | @import "./_common.css";
6 | 
7 | @import "tailwindcss/utilities";
8 | 


--------------------------------------------------------------------------------
/parcel/src/app.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 | 
3 | @import "tailwindcss/components";
4 | 
5 | @import "./_common.css";
6 | 
7 | @import "tailwindcss/utilities";
8 | 


--------------------------------------------------------------------------------
/encore/src/app.js:
--------------------------------------------------------------------------------
 1 | import './app.css'
 2 | 
 3 | /* xtendui */
 4 | 
 5 | import 'xtendui'
 6 | import 'xtendui/src/toggle'
 7 | 
 8 | /* custom */
 9 | 
10 | import './_common'
11 | 


--------------------------------------------------------------------------------
/vite/src/app.js:
--------------------------------------------------------------------------------
 1 | import './app.css'
 2 | 
 3 | /* xtendui */
 4 | 
 5 | import 'xtendui'
 6 | import 'xtendui/src/toggle'
 7 | 
 8 | /* custom */
 9 | 
10 | import './_common'
11 | 


--------------------------------------------------------------------------------
/webpack/src/app.js:
--------------------------------------------------------------------------------
 1 | import './app.css'
 2 | 
 3 | /* xtendui */
 4 | 
 5 | import 'xtendui'
 6 | import 'xtendui/src/toggle'
 7 | 
 8 | /* custom */
 9 | 
10 | import './_common'
11 | 


--------------------------------------------------------------------------------
/nextjs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     'postcss-import': {},
4 |     'tailwindcss/nesting': {},
5 |     tailwindcss: {},
6 |     autoprefixer: {},
7 |   },
8 | }
9 | 


--------------------------------------------------------------------------------
/encore/src/app.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss/base";
 2 | 
 3 | @import "tailwindcss/components";
 4 | 
 5 | /* custom */
 6 | 
 7 | @import "./_common.css";
 8 | 
 9 | @import "tailwindcss/utilities";
10 | 


--------------------------------------------------------------------------------
/webpack/src/app.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss/base";
 2 | 
 3 | @import "tailwindcss/components";
 4 | 
 5 | /* custom */
 6 | 
 7 | @import "./_common.css";
 8 | 
 9 | @import "tailwindcss/utilities";
10 | 


--------------------------------------------------------------------------------
/nextjs/styles/app.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss/base";
 2 | 
 3 | @import "tailwindcss/components";
 4 | 
 5 | /* custom */
 6 | 
 7 | @import "./_common.css";
 8 | 
 9 | @import "tailwindcss/utilities";
10 | 


--------------------------------------------------------------------------------
/parcel/postcss.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: [
 3 |     require(`postcss-import`),
 4 |     require(`tailwindcss`),
 5 |     require('postcss-nested'),
 6 |     require('autoprefixer'),
 7 |     require('cssnano'),
 8 |   ],
 9 | }
10 | 


--------------------------------------------------------------------------------
/vite/postcss.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: [
 3 |     require(`postcss-import`),
 4 |     require(`tailwindcss`),
 5 |     require('postcss-nested'),
 6 |     require('autoprefixer'),
 7 |     require('cssnano'),
 8 |   ],
 9 | }
10 | 


--------------------------------------------------------------------------------
/encore/postcss.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: [
 3 |     require(`postcss-import`),
 4 |     require('tailwindcss/nesting'),
 5 |     require('tailwindcss'),
 6 |     require('autoprefixer'),
 7 |     require('cssnano'),
 8 |   ],
 9 | }
10 | 


--------------------------------------------------------------------------------
/webpack/postcss.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: [
 3 |     require(`postcss-import`),
 4 |     require('tailwindcss/nesting'),
 5 |     require('tailwindcss'),
 6 |     require('autoprefixer'),
 7 |     require('cssnano'),
 8 |   ],
 9 | }
10 | 


--------------------------------------------------------------------------------
/encore/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       '@babel/preset-env',
 5 |       {
 6 |         useBuiltIns: 'usage',
 7 |         corejs: require('core-js/package.json').version,
 8 |       },
 9 |     ],
10 |   ],
11 | }
12 | 


--------------------------------------------------------------------------------
/vite/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       '@babel/preset-env',
 5 |       {
 6 |         useBuiltIns: 'usage',
 7 |         corejs: require('core-js/package.json').version,
 8 |       },
 9 |     ],
10 |   ],
11 | }
12 | 


--------------------------------------------------------------------------------
/webpack/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       '@babel/preset-env',
 5 |       {
 6 |         useBuiltIns: 'usage',
 7 |         corejs: require('core-js/package.json').version,
 8 |       },
 9 |     ],
10 |   ],
11 | }
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | indent_style = space
 7 | indent_size = 2
 8 | end_of_line = lf
 9 | charset = utf-8
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 | 
13 | [*.md]
14 | trim_trailing_whitespace = false
15 | 


--------------------------------------------------------------------------------
/vite/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { babel } from '@rollup/plugin-babel'
 2 | 
 3 | export default {
 4 |   root: './src',
 5 |   build: {
 6 |     outDir: '../public',
 7 |   },
 8 |   plugins: [
 9 |     babel({
10 |       exclude: /node_modules/,
11 |       include: [/node_modules\/xtendui/],
12 |     }),
13 |   ],
14 | }
15 | 


--------------------------------------------------------------------------------
/vite/README.md:
--------------------------------------------------------------------------------
1 | # Vite Boilerplate for [Xtend UI](https://github.com/xtendui/xtendui)
2 | 
3 | ## Compilation
4 | 
5 | * Install required npm packages with `npm install`
6 | * Use `npm run build` to build for **production**
7 | * Use `npm run dev` to build and serve for **development**
8 | * Use `npm run start` to start server
9 | 


--------------------------------------------------------------------------------
/nextjs/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | 
 3 | import '../styles/app.css'
 4 | 
 5 | function MyApp({ Component, pageProps }) {
 6 |   useEffect(() => {
 7 |     document.body.className = 'xt-body xt-links-default'
 8 |   })
 9 |   return <Component {...pageProps} />
10 | }
11 | 
12 | export default MyApp
13 | 


--------------------------------------------------------------------------------
/parcel/README.md:
--------------------------------------------------------------------------------
 1 | # Parcel Boilerplate for [Xtend UI](https://github.com/xtendui/xtendui)
 2 | 
 3 | ## Compilation
 4 | 
 5 | * Install required npm packages with `npm install`
 6 | * Use `npm run build` to build for **production**
 7 | * Use `npm run dev` to build and serve for **development**
 8 | * Use `npm run start` to start server
 9 | 
10 | 


--------------------------------------------------------------------------------
/encore/README.md:
--------------------------------------------------------------------------------
1 | # Webpack Encore Boilerplate for [Xtend UI](https://github.com/xtendui/xtendui)
2 | 
3 | ## Compilation
4 | 
5 | * Install required npm packages with `npm install`
6 | * Use `npm run build` to build for **production**
7 | * Use `npm run dev` to build and serve for **development**
8 | * Use `npm run watch` to build for **development**
9 | 


--------------------------------------------------------------------------------
/webpack/README.md:
--------------------------------------------------------------------------------
 1 | # Webpack Boilerplate for [Xtend UI](https://github.com/xtendui/xtendui)
 2 | 
 3 | ## Compilation
 4 | 
 5 | * Install required npm packages with `npm install`
 6 | * Use `npm run build` to build for **production**
 7 | * Use `npm run serve` to serve for **production**
 8 | * Use `npm run dev` to build and serve for **development**
 9 | * Use `npm run watch` to build for **development**
10 | 


--------------------------------------------------------------------------------
/nextjs/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/nextjs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextjs",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint"
 9 |   },
10 |   "dependencies": {
11 |     "next": "13.0.6",
12 |     "react": "18.2.0",
13 |     "react-dom": "18.2.0",
14 |     "tailwindcss": "^3.2.4",
15 |     "xtendui": "^2.2.1"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^10.4.13",
19 |     "eslint": "8.29.0",
20 |     "eslint-config-next": "13.0.6",
21 |     "postcss": "^8.4.19",
22 |     "postcss-import": "^15.0.1"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: ['eslint:recommended', 'prettier'],
 3 |   plugins: ['prettier'],
 4 |   env: {
 5 |     browser: true,
 6 |     commonjs: true,
 7 |     es6: true,
 8 |     node: true,
 9 |   },
10 |   parserOptions: {
11 |     ecmaVersion: 12,
12 |     sourceType: 'module',
13 |   },
14 |   rules: {
15 |     'prettier/prettier': ['error', { singleQuote: true }],
16 |     'no-console': ['error', { allow: ['warn', 'error'] }],
17 |     'prefer-template': 2,
18 |     'prefer-const': 2,
19 |     'no-var': 2,
20 |     'dot-notation': 2,
21 |     'eol-last': 2,
22 |     'max-len': 0,
23 |   },
24 | }
25 | 


--------------------------------------------------------------------------------
/webpack/webpack.dev.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const { merge } = require('webpack-merge')
 3 | const common = require('./webpack.common')
 4 | 
 5 | const dirPublic = path.join(__dirname, 'public')
 6 | 
 7 | module.exports = env => {
 8 |   return merge(common(env), {
 9 |     mode: 'development',
10 |     devtool: 'source-map',
11 |     output: {
12 |       path: dirPublic,
13 |       pathinfo: true,
14 |       publicPath: 'auto',
15 |       filename: '[name].bundle.js',
16 |       clean: true,
17 |     },
18 |     devServer: {
19 |       port: '9000',
20 |       open: true,
21 |       hot: true,
22 |     },
23 |   })
24 | }
25 | 


--------------------------------------------------------------------------------
/webpack/webpack.prod.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const { merge } = require('webpack-merge')
 3 | const TerserJSPlugin = require('terser-webpack-plugin')
 4 | const common = require('./webpack.common')
 5 | 
 6 | const dirPublic = path.join(__dirname, 'public')
 7 | 
 8 | module.exports = () => {
 9 |   return merge(common(), {
10 |     mode: 'production',
11 |     output: {
12 |       path: dirPublic,
13 |       publicPath: 'auto',
14 |       filename: '[name].[contenthash].bundle.js',
15 |       chunkFilename: '[id].[contenthash].js',
16 |       clean: true,
17 |     },
18 |     plugins: [new TerserJSPlugin()],
19 |   })
20 | }
21 | 


--------------------------------------------------------------------------------
/parcel/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "xtendui-parcel",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "cross-env NODE_ENV=production npx parcel build src/index.html",
 6 |     "dev": "cross-env NODE_ENV=development npx parcel src/index.html",
 7 |     "start": "npx parcel serve src/index.html --open"
 8 |   },
 9 |   "dependencies": {
10 |     "gsap": "^3.11.3",
11 |     "tailwindcss": "^3.2.4",
12 |     "xtendui": "^2.2.1"
13 |   },
14 |   "devDependencies": {
15 |     "autoprefixer": "^10.4.13",
16 |     "core-js": "^3.26.1",
17 |     "cross-env": "^7.0.3",
18 |     "cssnano": "^5.1.14",
19 |     "parcel": "^2.8.0",
20 |     "postcss-import": "^15.0.1",
21 |     "regenerator-runtime": "^0.13.11"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/vite/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "xtendui-vite",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "cross-env NODE_ENV=production vite build",
 6 |     "dev": "cross-env NODE_ENV=development vite --open",
 7 |     "start": "vite preview --open"
 8 |   },
 9 |   "dependencies": {
10 |     "gsap": "^3.12.5",
11 |     "tailwindcss": "^3.4.10",
12 |     "xtendui": "^2.2.1"
13 |   },
14 |   "devDependencies": {
15 |     "@babel/core": "^7.25.2",
16 |     "@babel/preset-env": "^7.25.4",
17 |     "@rollup/plugin-babel": "^6.0.4",
18 |     "autoprefixer": "^10.4.20",
19 |     "core-js": "^3.38.1",
20 |     "cross-env": "^7.0.3",
21 |     "cssnano": "^7.0.5",
22 |     "postcss-import": "^16.1.0",
23 |     "regenerator-runtime": "^0.14.1",
24 |     "vite": "^5.4.2"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/nextjs/README.md:
--------------------------------------------------------------------------------
 1 | # Nextjs Boilerplate for [Xtend UI](https://github.com/xtendui/xtendui)
 2 | 
 3 | ## Compilation
 4 | 
 5 | * Install required npm packages with `npm install`
 6 | * Use `npm run build` to build for **production**
 7 | * Use `npm run dev` to build and serve for **development**
 8 | * Use `npm run start` to start server
 9 | * Use `npm run lint` to lint
10 | 
11 | ## BUGS
12 | 
13 | * Nextjs has problems with [transpiling inside `node_modules`](https://github.com/vercel/next.js/discussions/32223) and with [using `.browserslistrc`](https://github.com/vercel/next.js/discussions/12826), so there's no babel in this code. I'll wait for those to work properly. if you want to polyfill correctly you can use [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules).


--------------------------------------------------------------------------------
/encore/src/assets/favicon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1_copy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 4 | 	 y="0px" viewBox="0 0 22 15.4" style="enable-background:new 0 0 22 15.4;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#828282;}
 7 | </style>
 8 | <g>
 9 | 	<polygon class="st0" points="15.6,0 15.6,15.4 17.4,15.4 17.4,2.9 22,2.9 22,0 	"/>
10 | 	<polygon class="st0" points="0.1,0 4.4,7.6 0,15.4 4.3,15.4 6.8,10.1 6.8,5.1 4.3,0 	"/>
11 | </g>
12 | <polygon class="st0" points="13.6,0 9.3,0 9.2,0.3 6.8,5.1 6.8,10.1 9.4,15.4 13.7,15.4 9.3,7.6 12,2.9 13.7,2.9 13.7,15.4 
13 | 	15.6,15.4 15.6,0 "/>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/nextjs/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1_copy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 4 | 	 y="0px" viewBox="0 0 22 15.4" style="enable-background:new 0 0 22 15.4;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#828282;}
 7 | </style>
 8 | <g>
 9 | 	<polygon class="st0" points="15.6,0 15.6,15.4 17.4,15.4 17.4,2.9 22,2.9 22,0 	"/>
10 | 	<polygon class="st0" points="0.1,0 4.4,7.6 0,15.4 4.3,15.4 6.8,10.1 6.8,5.1 4.3,0 	"/>
11 | </g>
12 | <polygon class="st0" points="13.6,0 9.3,0 9.2,0.3 6.8,5.1 6.8,10.1 9.4,15.4 13.7,15.4 9.3,7.6 12,2.9 13.7,2.9 13.7,15.4 
13 | 	15.6,15.4 15.6,0 "/>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/parcel/src/assets/favicon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1_copy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 4 | 	 y="0px" viewBox="0 0 22 15.4" style="enable-background:new 0 0 22 15.4;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#828282;}
 7 | </style>
 8 | <g>
 9 | 	<polygon class="st0" points="15.6,0 15.6,15.4 17.4,15.4 17.4,2.9 22,2.9 22,0 	"/>
10 | 	<polygon class="st0" points="0.1,0 4.4,7.6 0,15.4 4.3,15.4 6.8,10.1 6.8,5.1 4.3,0 	"/>
11 | </g>
12 | <polygon class="st0" points="13.6,0 9.3,0 9.2,0.3 6.8,5.1 6.8,10.1 9.4,15.4 13.7,15.4 9.3,7.6 12,2.9 13.7,2.9 13.7,15.4 
13 | 	15.6,15.4 15.6,0 "/>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/vite/src/assets/favicon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1_copy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 4 | 	 y="0px" viewBox="0 0 22 15.4" style="enable-background:new 0 0 22 15.4;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#828282;}
 7 | </style>
 8 | <g>
 9 | 	<polygon class="st0" points="15.6,0 15.6,15.4 17.4,15.4 17.4,2.9 22,2.9 22,0 	"/>
10 | 	<polygon class="st0" points="0.1,0 4.4,7.6 0,15.4 4.3,15.4 6.8,10.1 6.8,5.1 4.3,0 	"/>
11 | </g>
12 | <polygon class="st0" points="13.6,0 9.3,0 9.2,0.3 6.8,5.1 6.8,10.1 9.4,15.4 13.7,15.4 9.3,7.6 12,2.9 13.7,2.9 13.7,15.4 
13 | 	15.6,15.4 15.6,0 "/>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/webpack/src/assets/favicon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1_copy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 4 | 	 y="0px" viewBox="0 0 22 15.4" style="enable-background:new 0 0 22 15.4;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#828282;}
 7 | </style>
 8 | <g>
 9 | 	<polygon class="st0" points="15.6,0 15.6,15.4 17.4,15.4 17.4,2.9 22,2.9 22,0 	"/>
10 | 	<polygon class="st0" points="0.1,0 4.4,7.6 0,15.4 4.3,15.4 6.8,10.1 6.8,5.1 4.3,0 	"/>
11 | </g>
12 | <polygon class="st0" points="13.6,0 9.3,0 9.2,0.3 6.8,5.1 6.8,10.1 9.4,15.4 13.7,15.4 9.3,7.6 12,2.9 13.7,2.9 13.7,15.4 
13 | 	15.6,15.4 15.6,0 "/>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Boilerplate setup examples for [Xtend UI](https://github.com/xtendui/xtendui)
 2 | 
 3 | - [Encore](encore)
 4 | 
 5 | - [Nextjs](nextjs)
 6 | 
 7 | - [Parcel](parcel)
 8 | 
 9 | - [Vite](vite)
10 | 
11 | - [Webpack](webpack)
12 | 
13 | ## Customization
14 | 
15 | Each boilerplate has `tailwind.config.js` with `theme` customization examples. Remove or add things you need.
16 | 
17 | ## Lint
18 | 
19 | In the root there are the files needed for linting. See in the root `package.json`, `.eslintrc.js`, `.eslintignore` and `.prettierrc.js` for the required packages and script commands.
20 | 
21 | ```
22 | "scripts": {
23 |   "lint": "eslint . --ext .js",
24 | }
25 | ```
26 | 
27 | Except for **Nextjs** which has lint managed by itself.
28 | 
29 | ## Copyright
30 | 
31 | Licensed under [MIT license](https://github.com/xtendui/xtendui-boilerplate/blob/master/LICENSE).
32 | 


--------------------------------------------------------------------------------
/encore/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "xtendui-webpack",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "cross-env NODE_ENV=production encore production",
 6 |     "dev": "cross-env NODE_ENV=development encore dev-server --hot --open",
 7 |     "watch": "cross-env NODE_ENV=development encore dev --watch --hot"
 8 |   },
 9 |   "dependencies": {
10 |     "gsap": "^3.11.3",
11 |     "tailwindcss": "^3.2.4",
12 |     "xtendui": "^2.2.1"
13 |   },
14 |   "devDependencies": {
15 |     "@babel/core": "^7.20.5",
16 |     "@babel/preset-env": "^7.20.2",
17 |     "@symfony/webpack-encore": "^4.1.2",
18 |     "autoprefixer": "^10.4.13",
19 |     "core-js": "^3.26.1",
20 |     "cross-env": "^7.0.3",
21 |     "cssnano": "^5.1.14",
22 |     "file-loader": "^6.2.0",
23 |     "html-webpack-plugin": "^5.5.0",
24 |     "postcss": "^8.4.19",
25 |     "postcss-import": "^15.0.1",
26 |     "postcss-loader": "^7.0.2",
27 |     "regenerator-runtime": "^0.13.11"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: Test
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ '*' ]
 6 |   pull_request:
 7 |     branches: [ '*' ]
 8 | 
 9 | env:
10 |   NODE: 18.x
11 | 
12 | jobs:
13 |   lint:
14 |     if: ${{ !contains(github.event.commits[0].message, '[skip ci]') }}
15 |     runs-on: ubuntu-latest
16 |     steps:
17 |     - name: Checkout
18 |       uses: actions/checkout@v2
19 |     - name: Node
20 |       uses: actions/setup-node@v1
21 |       with:
22 |         node-version: "${{ env.NODE }}"
23 |     - name: Npm
24 |       run: npm install
25 |     - name: Lint
26 |       run: npm run lint
27 |   build:
28 |     if: ${{ !contains(github.event.commits[0].message, '[skip ci]') }}
29 |     runs-on: ubuntu-latest
30 |     steps:
31 |     - name: Checkout
32 |       uses: actions/checkout@v2
33 |     - name: Node
34 |       uses: actions/setup-node@v1
35 |       with:
36 |         node-version: "${{ env.NODE }}"
37 |     - name: Yarn
38 |       run: yarn i-all --frozen-lockfile
39 |     - name: Build
40 |       run: yarn b-all
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Riccardo Caroli <beaver82@gmail.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/encore/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const Encore = require('@symfony/webpack-encore')
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | if (!Encore.isRuntimeEnvironmentConfigured()) {
 6 |   Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
 7 | }
 8 | 
 9 | Encore.setOutputPath('public/build/')
10 |   .setPublicPath('/')
11 |   .addEntry('app', './src/app.js')
12 |   .cleanupOutputBeforeBuild()
13 |   .splitEntryChunks()
14 |   .enableSingleRuntimeChunk()
15 |   .cleanupOutputBeforeBuild()
16 |   .enableSourceMaps(!Encore.isProduction())
17 |   .enableVersioning(Encore.isProduction())
18 |   .enablePostCssLoader()
19 |   .copyFiles({
20 |     from: './src/assets',
21 |     to: 'assets/[path][name].[ext]', // 'assets/[path][name].[hash:8].[ext]',
22 |   })
23 |   .addPlugin(
24 |     new HtmlWebpackPlugin({
25 |       template: path.join(__dirname, 'src/index.ejs'),
26 |       title: 'Webpack Encore Boilerplate',
27 |     })
28 |   )
29 |   .configureBabel(null, {
30 |     includeNodeModules: ['xtendui'],
31 |   })
32 | /* if using symfony and twig ignore HtmlWebpackPlugin and use
33 |   {% block stylesheets %}
34 |     {{ encore_entry_link_tags('app') }}
35 |   {% endblock %}
36 |   {% block javascripts %}
37 |     {{ encore_entry_script_tags('app') }}
38 |   {% endblock %}
39 |   */
40 | 
41 | module.exports = Encore.getWebpackConfig()
42 | 


--------------------------------------------------------------------------------
/webpack/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "xtendui-webpack",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "cross-env NODE_ENV=production webpack --progress --config webpack.prod.js",
 6 |     "dev": "cross-env NODE_ENV=development webpack serve --progress --config webpack.dev.js",
 7 |     "watch": "cross-env NODE_ENV=development webpack watch --progress --config webpack.dev.js",
 8 |     "serve": "cross-env NODE_ENV=production webpack serve --progress --config webpack.prod.js"
 9 |   },
10 |   "dependencies": {
11 |     "gsap": "^3.11.3",
12 |     "tailwindcss": "^3.2.4",
13 |     "xtendui": "^2.2.1"
14 |   },
15 |   "devDependencies": {
16 |     "@babel/core": "^7.20.5",
17 |     "@babel/preset-env": "^7.20.2",
18 |     "autoprefixer": "^10.4.13",
19 |     "babel-loader": "^9.1.0",
20 |     "clean-webpack-plugin": "4.0.0",
21 |     "copy-webpack-plugin": "11.0.0",
22 |     "core-js": "^3.26.1",
23 |     "cross-env": "^7.0.3",
24 |     "css-loader": "^6.7.2",
25 |     "cssnano": "^5.1.14",
26 |     "html-webpack-plugin": "^5.5.0",
27 |     "mini-css-extract-plugin": "^2.7.2",
28 |     "postcss": "^8.4.19",
29 |     "postcss-import": "^15.0.1",
30 |     "postcss-loader": "^7.0.2",
31 |     "regenerator-runtime": "^0.13.11",
32 |     "style-loader": "3.3.1",
33 |     "terser-webpack-plugin": "^5.3.6",
34 |     "webpack": "5.75.0",
35 |     "webpack-cli": "5.0.1",
36 |     "webpack-dev-server": "4.11.1",
37 |     "webpack-merge": "5.8.0"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "xtendui-boilerplate",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "lint": "eslint . --ext .js",
 6 |     "u-all": "npm run u-encore && npm run u-nextjs && npm run u-parcel && npm run u-vite && npm run u-webpack",
 7 |     "i-all": "npm run i-encore && npm run i-nextjs && npm run i-parcel && npm run i-vite && npm run i-webpack",
 8 |     "b-all": "npm run b-encore && npm run b-nextjs && npm run b-parcel && npm run b-vite && npm run b-webpack",
 9 |     "l-all": "npm run l-encore && npm run l-nextjs && npm run l-parcel && npm run l-vite && npm run l-webpack",
10 |     "u-encore": "cd encore && npm unlink xtendui && npm install xtendui --save && npx npm-check-updates -u && npm install && cd ..",
11 |     "i-encore": "cd encore && npm install && npm unlink xtendui && npm install xtendui --save && cd ..",
12 |     "b-encore": "cd encore && npm run build && cd ..",
13 |     "l-encore": "cd encore && yarn link xtendui && cd ..",
14 |     "u-nextjs": "cd nextjs && npm unlink xtendui && npm install xtendui --save && npx npm-check-updates -u && npm install && cd ..",
15 |     "i-nextjs": "cd nextjs && npm install && npm unlink xtendui && npm install xtendui --save && cd ..",
16 |     "b-nextjs": "cd nextjs && npm run build && cd ..",
17 |     "l-nextjs": "cd nextjs && yarn link xtendui && cd ..",
18 |     "u-parcel": "cd parcel && npm unlink xtendui && npm install xtendui --save && npx npm-check-updates -u && npm install && cd ..",
19 |     "i-parcel": "cd parcel && npm install && npm unlink xtendui && npm install xtendui --save && cd ..",
20 |     "b-parcel": "cd parcel && npm run build && cd ..",
21 |     "l-parcel": "cd parcel && yarn link xtendui && cd ..",
22 |     "u-vite": "cd vite && npm unlink xtendui && npm install xtendui --save && npx npm-check-updates -u && npm install && cd ..",
23 |     "i-vite": "cd vite && npm install && npm unlink xtendui && npm install xtendui --save && cd ..",
24 |     "b-vite": "cd vite && npm run build && cd ..",
25 |     "l-vite": "cd vite && yarn link xtendui && cd ..",
26 |     "u-webpack": "cd webpack && npm unlink xtendui && npm install xtendui --save && npx npm-check-updates -u && npm install && cd ..",
27 |     "i-webpack": "cd webpack && npm install && npm unlink xtendui && npm install xtendui --save && cd ..",
28 |     "b-webpack": "cd webpack && npm run build && cd ..",
29 |     "l-webpack": "cd webpack && yarn link xtendui && cd .."
30 |   },
31 |   "devDependencies": {
32 |     "eslint": "8.19.0",
33 |     "eslint-config-prettier": "^8.5.0",
34 |     "eslint-plugin-prettier": "^4.2.1",
35 |     "prettier-eslint": "^15.0.1"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/encore/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |   presets: [require('tailwindcss/defaultConfig'), require('xtendui/tailwind.preset')],
 5 |   content: ['./node_modules/xtendui/src/*.mjs', './src/**/*.{ejs,js}'],
 6 |   theme: {
 7 |     extend: {
 8 |       // custom xtendui color
 9 |       colors: {
10 |         success: '#48bb78',
11 |         error: '#f56565',
12 |         primary: {
13 |           50: '#F8F7FF',
14 |           100: '#F1F0FE',
15 |           200: '#DDD9FD',
16 |           300: '#C8C2FC',
17 |           400: '#9E95FA',
18 |           500: '#7567F8',
19 |           600: '#695DDF',
20 |           700: '#463E95',
21 |           800: '#352E70',
22 |           900: '#231F4A',
23 |         },
24 |       },
25 |       // custom font
26 |       fontFamily: {
27 |         sans: [/*'"My Font Family"',*/ ...defaultTheme.fontFamily.sans],
28 |       },
29 |       // custom container
30 |       container: {
31 |         center: true,
32 |         fluid: '1536px',
33 |         padding: {
34 |           DEFAULT: '1.25rem',
35 |           sm: '1.5rem',
36 |           md: '2rem',
37 |           lg: '3rem',
38 |           xl: '4rem',
39 |         },
40 |       },
41 |       // custom default transition
42 |       transitionDuration: {
43 |         DEFAULT: '500ms',
44 |       },
45 |       transitionTimingFunction: {
46 |         DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
47 |         in: 'cubic-bezier(0.4, 0, 1, 1)',
48 |         out: 'cubic-bezier(0, 0, 0.2, 1)',
49 |         'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
50 |       },
51 |       // custom xtendui examples
52 |       xtendui: {
53 |         global: {
54 |           component: theme => ({
55 |             // custom selection
56 |             '::selection': {
57 |               backgroundColor: theme('colors.primary.600'),
58 |               color: theme('colors.white'),
59 |             },
60 |             // custom scrollbar
61 |             '.xt-overflow-main': {
62 |               scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
63 |             },
64 |             '.xt-overflow-sub': {
65 |               scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
66 |             },
67 |           }),
68 |         },
69 |         typography: {
70 |           utility: {
71 |             // custom headers
72 |             '.xt-h1': {
73 |               '@apply font-black text-4xl md:text-5xl lg:text-6xl': {},
74 |               textTransform: 'lowercase',
75 |             },
76 |           },
77 |           component: theme => ({
78 |             // semibold instead of bold
79 |             'b, strong': {
80 |               fontWeight: theme('fontWeight.semibold', 'bolder'),
81 |             },
82 |           }),
83 |         },
84 |       },
85 |     },
86 |   },
87 | }
88 | 


--------------------------------------------------------------------------------
/nextjs/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |   presets: [require('tailwindcss/defaultConfig'), require('xtendui/tailwind.preset')],
 5 |   content: ['./node_modules/xtendui/src/*.mjs', './pages/**/*.js'],
 6 |   theme: {
 7 |     extend: {
 8 |       // custom xtendui color
 9 |       colors: {
10 |         success: '#48bb78',
11 |         error: '#f56565',
12 |         primary: {
13 |           50: '#F8F7FF',
14 |           100: '#F1F0FE',
15 |           200: '#DDD9FD',
16 |           300: '#C8C2FC',
17 |           400: '#9E95FA',
18 |           500: '#7567F8',
19 |           600: '#695DDF',
20 |           700: '#463E95',
21 |           800: '#352E70',
22 |           900: '#231F4A',
23 |         },
24 |       },
25 |       // custom font
26 |       fontFamily: {
27 |         sans: [/*'"My Font Family"',*/ ...defaultTheme.fontFamily.sans],
28 |       },
29 |       // custom container
30 |       container: {
31 |         center: true,
32 |         fluid: '1536px',
33 |         padding: {
34 |           DEFAULT: '1.25rem',
35 |           sm: '1.5rem',
36 |           md: '2rem',
37 |           lg: '3rem',
38 |           xl: '4rem',
39 |         },
40 |       },
41 |       // custom default transition
42 |       transitionDuration: {
43 |         DEFAULT: '500ms',
44 |       },
45 |       transitionTimingFunction: {
46 |         DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
47 |         in: 'cubic-bezier(0.4, 0, 1, 1)',
48 |         out: 'cubic-bezier(0, 0, 0.2, 1)',
49 |         'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
50 |       },
51 |       // custom xtendui examples
52 |       xtendui: {
53 |         global: {
54 |           component: theme => ({
55 |             // custom selection
56 |             '::selection': {
57 |               backgroundColor: theme('colors.primary.600'),
58 |               color: theme('colors.white'),
59 |             },
60 |             // custom scrollbar
61 |             '.xt-overflow-main': {
62 |               scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
63 |             },
64 |             '.xt-overflow-sub': {
65 |               scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
66 |             },
67 |           }),
68 |         },
69 |         typography: {
70 |           utility: {
71 |             // custom headers
72 |             '.xt-h1': {
73 |               '@apply font-black text-4xl md:text-5xl lg:text-6xl': {},
74 |               textTransform: 'lowercase',
75 |             },
76 |           },
77 |           component: theme => ({
78 |             // semibold instead of bold
79 |             'b, strong': {
80 |               fontWeight: theme('fontWeight.semibold', 'bolder'),
81 |             },
82 |           }),
83 |         },
84 |       },
85 |     },
86 |   },
87 | }
88 | 


--------------------------------------------------------------------------------
/vite/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |   presets: [require('tailwindcss/defaultConfig'), require('xtendui/tailwind.preset')],
 5 |   content: ['./node_modules/xtendui/src/*.mjs', './src/**/*.{html,js}'],
 6 |   theme: {
 7 |     extend: {
 8 |       // custom xtendui color
 9 |       colors: {
10 |         success: '#48bb78',
11 |         error: '#f56565',
12 |         primary: {
13 |           50: '#F8F7FF',
14 |           100: '#F1F0FE',
15 |           200: '#DDD9FD',
16 |           300: '#C8C2FC',
17 |           400: '#9E95FA',
18 |           500: '#7567F8',
19 |           600: '#695DDF',
20 |           700: '#463E95',
21 |           800: '#352E70',
22 |           900: '#231F4A',
23 |         },
24 |       },
25 |       // custom font
26 |       fontFamily: {
27 |         sans: [/*'"My Font Family"',*/ ...defaultTheme.fontFamily.sans],
28 |       },
29 |       // custom container
30 |       container: {
31 |         center: true,
32 |         fluid: '1536px',
33 |         padding: {
34 |           DEFAULT: '1.25rem',
35 |           sm: '1.5rem',
36 |           md: '2rem',
37 |           lg: '3rem',
38 |           xl: '4rem',
39 |         },
40 |       },
41 |       // custom default transition
42 |       transitionDuration: {
43 |         DEFAULT: '500ms',
44 |       },
45 |       transitionTimingFunction: {
46 |         DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
47 |         in: 'cubic-bezier(0.4, 0, 1, 1)',
48 |         out: 'cubic-bezier(0, 0, 0.2, 1)',
49 |         'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
50 |       },
51 |       // custom xtendui examples
52 |       xtendui: {
53 |         global: {
54 |           component: theme => ({
55 |             // custom selection
56 |             '::selection': {
57 |               backgroundColor: theme('colors.primary.600'),
58 |               color: theme('colors.white'),
59 |             },
60 |             // custom scrollbar
61 |             '.xt-overflow-main': {
62 |               scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
63 |             },
64 |             '.xt-overflow-sub': {
65 |               scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
66 |             },
67 |           }),
68 |         },
69 |         typography: {
70 |           utility: {
71 |             // custom headers
72 |             '.xt-h1': {
73 |               '@apply font-black text-4xl md:text-5xl lg:text-6xl': {},
74 |               textTransform: 'lowercase',
75 |             },
76 |           },
77 |           component: theme => ({
78 |             // semibold instead of bold
79 |             'b, strong': {
80 |               fontWeight: theme('fontWeight.semibold', 'bolder'),
81 |             },
82 |           }),
83 |         },
84 |       },
85 |     },
86 |   },
87 | }
88 | 


--------------------------------------------------------------------------------
/parcel/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |   presets: [require('tailwindcss/defaultConfig'), require('xtendui/tailwind.preset')],
 5 |   content: ['./node_modules/xtendui/src/*.mjs', './src/**/*.{html,js}'],
 6 |   theme: {
 7 |     extend: {
 8 |       // custom xtendui color
 9 |       colors: {
10 |         success: '#48bb78',
11 |         error: '#f56565',
12 |         primary: {
13 |           50: '#F8F7FF',
14 |           100: '#F1F0FE',
15 |           200: '#DDD9FD',
16 |           300: '#C8C2FC',
17 |           400: '#9E95FA',
18 |           500: '#7567F8',
19 |           600: '#695DDF',
20 |           700: '#463E95',
21 |           800: '#352E70',
22 |           900: '#231F4A',
23 |         },
24 |       },
25 |       // custom font
26 |       fontFamily: {
27 |         sans: [/*'"My Font Family"',*/ ...defaultTheme.fontFamily.sans],
28 |       },
29 |       // custom container
30 |       container: {
31 |         center: true,
32 |         fluid: '1536px',
33 |         padding: {
34 |           DEFAULT: '1.25rem',
35 |           sm: '1.5rem',
36 |           md: '2rem',
37 |           lg: '3rem',
38 |           xl: '4rem',
39 |         },
40 |       },
41 |       // custom default transition
42 |       transitionDuration: {
43 |         DEFAULT: '500ms',
44 |       },
45 |       transitionTimingFunction: {
46 |         DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
47 |         in: 'cubic-bezier(0.4, 0, 1, 1)',
48 |         out: 'cubic-bezier(0, 0, 0.2, 1)',
49 |         'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
50 |       },
51 |       // custom xtendui examples
52 |       xtendui: {
53 |         global: {
54 |           component: theme => ({
55 |             // custom selection
56 |             '::selection': {
57 |               backgroundColor: theme('colors.primary.600'),
58 |               color: theme('colors.white'),
59 |             },
60 |             // custom scrollbar
61 |             '.xt-overflow-main': {
62 |               scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
63 |             },
64 |             '.xt-overflow-sub': {
65 |               scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
66 |             },
67 |           }),
68 |         },
69 |         typography: {
70 |           utility: {
71 |             // custom headers
72 |             '.xt-h1': {
73 |               '@apply font-black text-4xl md:text-5xl lg:text-6xl': {},
74 |               textTransform: 'lowercase',
75 |             },
76 |           },
77 |           component: theme => ({
78 |             // semibold instead of bold
79 |             'b, strong': {
80 |               fontWeight: theme('fontWeight.semibold', 'bolder'),
81 |             },
82 |           }),
83 |         },
84 |       },
85 |     },
86 |   },
87 | }
88 | 


--------------------------------------------------------------------------------
/webpack/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |   presets: [require('tailwindcss/defaultConfig'), require('xtendui/tailwind.preset')],
 5 |   content: ['./node_modules/xtendui/src/*.mjs', './src/**/*.{html,js}'],
 6 |   theme: {
 7 |     extend: {
 8 |       // custom xtendui color
 9 |       colors: {
10 |         success: '#48bb78',
11 |         error: '#f56565',
12 |         primary: {
13 |           50: '#F8F7FF',
14 |           100: '#F1F0FE',
15 |           200: '#DDD9FD',
16 |           300: '#C8C2FC',
17 |           400: '#9E95FA',
18 |           500: '#7567F8',
19 |           600: '#695DDF',
20 |           700: '#463E95',
21 |           800: '#352E70',
22 |           900: '#231F4A',
23 |         },
24 |       },
25 |       // custom font
26 |       fontFamily: {
27 |         sans: [/*'"My Font Family"',*/ ...defaultTheme.fontFamily.sans],
28 |       },
29 |       // custom container
30 |       container: {
31 |         center: true,
32 |         fluid: '1536px',
33 |         padding: {
34 |           DEFAULT: '1.25rem',
35 |           sm: '1.5rem',
36 |           md: '2rem',
37 |           lg: '3rem',
38 |           xl: '4rem',
39 |         },
40 |       },
41 |       // custom default transition
42 |       transitionDuration: {
43 |         DEFAULT: '500ms',
44 |       },
45 |       transitionTimingFunction: {
46 |         DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
47 |         in: 'cubic-bezier(0.4, 0, 1, 1)',
48 |         out: 'cubic-bezier(0, 0, 0.2, 1)',
49 |         'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
50 |       },
51 |       // custom xtendui examples
52 |       xtendui: {
53 |         global: {
54 |           component: theme => ({
55 |             // custom selection
56 |             '::selection': {
57 |               backgroundColor: theme('colors.primary.600'),
58 |               color: theme('colors.white'),
59 |             },
60 |             // custom scrollbar
61 |             '.xt-overflow-main': {
62 |               scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
63 |             },
64 |             '.xt-overflow-sub': {
65 |               scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
66 |             },
67 |           }),
68 |         },
69 |         typography: {
70 |           utility: {
71 |             // custom headers
72 |             '.xt-h1': {
73 |               '@apply font-black text-4xl md:text-5xl lg:text-6xl': {},
74 |               textTransform: 'lowercase',
75 |             },
76 |           },
77 |           component: theme => ({
78 |             // semibold instead of bold
79 |             'b, strong': {
80 |               fontWeight: theme('fontWeight.semibold', 'bolder'),
81 |             },
82 |           }),
83 |         },
84 |       },
85 |     },
86 |   },
87 | }
88 | 


--------------------------------------------------------------------------------
/webpack/webpack.common.js:
--------------------------------------------------------------------------------
  1 | const path = require('path')
  2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
  3 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  5 | 
  6 | const dirNode = 'node_modules'
  7 | const dirSrc = path.join(__dirname, 'src')
  8 | const dirAssets = path.join(__dirname, 'src/assets')
  9 | 
 10 | module.exports = () => {
 11 |   return {
 12 |     entry: {
 13 |       app: path.join(dirSrc, 'app'),
 14 |     },
 15 |     resolve: {
 16 |       modules: [dirNode, dirSrc],
 17 |     },
 18 |     plugins: [
 19 |       new HtmlWebpackPlugin({
 20 |         template: path.join(dirSrc, 'index.html'),
 21 |         minify: false,
 22 |         // https://stackoverflow.com/questions/74928998/how-do-i-reference-the-hashed-image-in-the-html-page-in-the-dist-folder-after
 23 |         // usage: <%= loadAsset('./assets/logo.svg') %>
 24 |         templateParameters: (compilation, assets, assetTags, options) => {
 25 |           return {
 26 |             compilation,
 27 |             webpackConfig: compilation.options,
 28 |             htmlWebpackPlugin: {
 29 |               tags: assetTags,
 30 |               files: assets,
 31 |               options,
 32 |             },
 33 |             loadAsset: filename => {
 34 |               const parsedFilepath = path.parse(filename)
 35 |               const assetNames = Object.keys(compilation.assets).map(k => compilation.options.output.publicPath + k)
 36 |               for (let i = 0; i < assetNames.length; i++) {
 37 |                 const assetName = assetNames[i]
 38 |                 const parsedAssetPath = path.parse(assetName)
 39 |                 const parsedAssetNameWithoutContentHash = parsedAssetPath.name.split('.')[0]
 40 |                 if (
 41 |                   parsedAssetNameWithoutContentHash === parsedFilepath.name &&
 42 |                   parsedAssetPath.ext === parsedFilepath.ext
 43 |                 ) {
 44 |                   return assetName
 45 |                 }
 46 |               }
 47 |             },
 48 |           }
 49 |         },
 50 |       }),
 51 |       new MiniCssExtractPlugin(),
 52 |       new CopyWebpackPlugin({
 53 |         patterns: [{ from: dirAssets, to: 'assets/[name].[contenthash].[ext]' }],
 54 |       }),
 55 |     ],
 56 |     module: {
 57 |       rules: [
 58 |         {
 59 |           test: /\.m?js$/,
 60 |           exclude: {
 61 |             and: [/node_modules/],
 62 |             not: [/node_modules\/xtendui/],
 63 |           },
 64 |           use: {
 65 |             loader: 'babel-loader',
 66 |           },
 67 |         },
 68 |         {
 69 |           test: /\.css/,
 70 |           use: [
 71 |             MiniCssExtractPlugin.loader,
 72 |             {
 73 |               loader: 'css-loader',
 74 |               options: {
 75 |                 sourceMap: false,
 76 |               },
 77 |             },
 78 |             {
 79 |               loader: 'postcss-loader',
 80 |               options: {
 81 |                 sourceMap: false,
 82 |               },
 83 |             },
 84 |           ],
 85 |         },
 86 |         {
 87 |           test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
 88 |           type: 'asset/resource',
 89 |         },
 90 |       ],
 91 |     },
 92 |     optimization: {
 93 |       runtimeChunk: 'single',
 94 |     },
 95 |     performance: {
 96 |       hints: false,
 97 |     },
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/nextjs/pages/index.js:
--------------------------------------------------------------------------------
 1 | import 'xtendui'
 2 | import 'xtendui/src/toggle'
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <div className="container">
 7 |       <h1>Nextjs Boilerplate</h1>
 8 | 
 9 |       <h3>Test Toggle and Collapse</h3>
10 | 
11 |       <div className="xt-row xt-row-6">
12 |         <div className="w-full md:w-6/12" data-xt-toggle="{ collapseHeight: 'targets', duration: 500 }">
13 |           <div className="mb-6 text-lg max-h-20 overflow-hidden transition-all" data-xt-toggle-target>
14 |             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis
15 |             vestibulum sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna
16 |             aliquam pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at,
17 |             pretium nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo
18 |             hendrerit enim, sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis
19 |             non diam. Ut at rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis
20 |             leo. Mauris justo elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a
21 |             aliquet ligula.
22 |           </div>
23 | 
24 |           <button
25 |             type="button"
26 |             className="xt-button py-2.5 px-3.5 text-sm rounded-md font-medium leading-snug tracking-wider uppercase text-gray-900 bg-gray-100 transition hover:bg-gray-200 active:bg-gray-300 on:bg-gray-200 group"
27 |             data-xt-toggle-element>
28 |             <span className="group-on:hidden"> Show more </span>
29 |             <span className="hidden group-on:block"> Show less </span>
30 |           </button>
31 |         </div>
32 | 
33 |         <div className="w-full md:w-6/12" data-xt-toggle="{ collapseHeight: 'targets', duration: 500 }">
34 |           <div className="mb-6 text-lg max-h-20 overflow-hidden transition-all on" data-xt-toggle-target>
35 |             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis
36 |             vestibulum sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna
37 |             aliquam pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at,
38 |             pretium nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo
39 |             hendrerit enim, sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis
40 |             non diam. Ut at rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis
41 |             leo. Mauris justo elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a
42 |             aliquet ligula.
43 |           </div>
44 | 
45 |           <button
46 |             type="button"
47 |             className="xt-button py-2.5 px-3.5 text-sm rounded-md font-medium leading-snug tracking-wider uppercase text-gray-900 bg-gray-100 transition hover:bg-gray-200 active:bg-gray-300 on:bg-gray-200 group"
48 |             data-xt-toggle-element>
49 |             <span className="group-on:hidden"> Show more </span>
50 |             <span className="hidden group-on:block"> Show less </span>
51 |           </button>
52 |         </div>
53 |       </div>
54 |     </div>
55 |   )
56 | }
57 | 


--------------------------------------------------------------------------------
/webpack/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <title>Webpack Boilerplate</title>
 8 |     <link rel="icon" href="/assets/favicon.svg">
 9 | 
10 | </head>
11 | <body class="xt-body xt-links-default">
12 | 
13 |   <div class="container">
14 |     <h1>Webpack Boilerplate</h1>
15 | 
16 |     <h3>Test Toggle and Collapse</h3>
17 | 
18 |     <div class="xt-row xt-row-6">
19 |       <div class="w-full md:w-6/12" data-xt-toggle="{ collapseHeight: 'targets', duration: 500 }">
20 |         <div class="mb-6 text-lg max-h-20 overflow-hidden transition-all" data-xt-toggle-target>
21 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis vestibulum
22 |           sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna aliquam
23 |           pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at, pretium
24 |           nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo hendrerit enim,
25 |           sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis non diam. Ut at
26 |           rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis leo. Mauris justo
27 |           elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a aliquet ligula.
28 |         </div>
29 | 
30 |         <button
31 |           type="button"
32 |           class="xt-button py-2.5 px-3.5 text-sm rounded-md font-medium leading-snug tracking-wider uppercase text-gray-900 bg-gray-100 transition hover:bg-gray-200 active:bg-gray-300 on:bg-gray-200 group"
33 |           data-xt-toggle-element
34 |         >
35 |           <span class="group-on:hidden"> Show more </span>
36 |           <span class="hidden group-on:block"> Show less </span>
37 |         </button>
38 |       </div>
39 | 
40 |       <div class="w-full md:w-6/12" data-xt-toggle="{ collapseHeight: 'targets', duration: 500 }">
41 |         <div class="mb-6 text-lg max-h-20 overflow-hidden transition-all on" data-xt-toggle-target>
42 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis vestibulum
43 |           sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna aliquam
44 |           pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at, pretium
45 |           nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo hendrerit enim,
46 |           sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis non diam. Ut at
47 |           rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis leo. Mauris justo
48 |           elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a aliquet ligula.
49 |         </div>
50 | 
51 |         <button
52 |           type="button"
53 |           class="xt-button py-2.5 px-3.5 text-sm rounded-md font-medium leading-snug tracking-wider uppercase text-gray-900 bg-gray-100 transition hover:bg-gray-200 active:bg-gray-300 on:bg-gray-200 group"
54 |           data-xt-toggle-element
55 |         >
56 |           <span class="group-on:hidden"> Show more </span>
57 |           <span class="hidden group-on:block"> Show less </span>
58 |         </button>
59 |       </div>
60 |     </div>
61 |   </div>
62 | 
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/encore/src/index.ejs:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <title><%= htmlWebpackPlugin.options.title %></title>
 8 |     <link rel="icon" href="/assets/favicon.svg">
 9 | 
10 | </head>
11 | <body class="xt-body xt-links-default">
12 | 
13 |   <div class="container">
14 |     <h1><%= htmlWebpackPlugin.options.title %></h1>
15 | 
16 |     <h3>Test Toggle and Collapse</h3>
17 | 
18 |     <div class="xt-row xt-row-6">
19 |       <div class="w-full md:w-6/12" data-xt-toggle="{ collapseHeight: 'targets', duration: 500 }">
20 |         <div class="mb-6 text-lg max-h-20 overflow-hidden transition-all" data-xt-toggle-target>
21 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis vestibulum
22 |           sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna aliquam
23 |           pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at, pretium
24 |           nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo hendrerit enim,
25 |           sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis non diam. Ut at
26 |           rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis leo. Mauris justo
27 |           elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a aliquet ligula.
28 |         </div>
29 | 
30 |         <button
31 |           type="button"
32 |           class="xt-button py-2.5 px-3.5 text-sm rounded-md font-medium leading-snug tracking-wider uppercase text-gray-900 bg-gray-100 transition hover:bg-gray-200 active:bg-gray-300 on:bg-gray-200 group"
33 |           data-xt-toggle-element
34 |         >
35 |           <span class="group-on:hidden"> Show more </span>
36 |           <span class="hidden group-on:block"> Show less </span>
37 |         </button>
38 |       </div>
39 | 
40 |       <div class="w-full md:w-6/12" data-xt-toggle="{ collapseHeight: 'targets', duration: 500 }">
41 |         <div class="mb-6 text-lg max-h-20 overflow-hidden transition-all on" data-xt-toggle-target>
42 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis vestibulum
43 |           sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna aliquam
44 |           pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at, pretium
45 |           nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo hendrerit enim,
46 |           sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis non diam. Ut at
47 |           rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis leo. Mauris justo
48 |           elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a aliquet ligula.
49 |         </div>
50 | 
51 |         <button
52 |           type="button"
53 |           class="xt-button py-2.5 px-3.5 text-sm rounded-md font-medium leading-snug tracking-wider uppercase text-gray-900 bg-gray-100 transition hover:bg-gray-200 active:bg-gray-300 on:bg-gray-200 group"
54 |           data-xt-toggle-element
55 |         >
56 |           <span class="group-on:hidden"> Show more </span>
57 |           <span class="hidden group-on:block"> Show less </span>
58 |         </button>
59 |       </div>
60 |     </div>
61 |   </div>
62 | 
63 |   <script>
64 |     // put at the end of body tag https://browser-update.org/
65 |     var $buoop = {required:{e:79,f:53,o:44,s:11,c:57},api:2021.03 };
66 |     function $buo_f(){
67 |     var e = document.createElement("script");
68 |     e.src = "//browser-update.org/update.min.js";
69 |     document.body.appendChild(e);
70 |     };
71 |     try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
72 |     catch(e){window.attachEvent("onload", $buo_f)}
73 |   </script>
74 | 
75 | </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/vite/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <title>Vite Boilerplate</title>
 8 |   <link rel="icon" href="/assets/favicon.svg">
 9 | 
10 | </head>
11 | <body class="xt-body xt-links-default">
12 | 
13 |   <div class="container">
14 |     <h1>Vite Boilerplate</h1>
15 | 
16 |     <h3>Test Toggle and Collapse</h3>
17 | 
18 |     <div class="xt-row xt-row-6">
19 |       <div class="w-full md:w-6/12" data-xt-toggle="{ collapseHeight: 'targets', duration: 500 }">
20 |         <div class="mb-6 text-lg max-h-20 overflow-hidden transition-all" data-xt-toggle-target>
21 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis vestibulum
22 |           sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna aliquam
23 |           pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at, pretium
24 |           nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo hendrerit enim,
25 |           sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis non diam. Ut at
26 |           rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis leo. Mauris justo
27 |           elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a aliquet ligula.
28 |         </div>
29 | 
30 |         <button
31 |           type="button"
32 |           class="xt-button py-2.5 px-3.5 text-sm rounded-md font-medium leading-snug tracking-wider uppercase text-gray-900 bg-gray-100 transition hover:bg-gray-200 active:bg-gray-300 on:bg-gray-200 group"
33 |           data-xt-toggle-element
34 |         >
35 |           <span class="group-on:hidden"> Show more </span>
36 |           <span class="hidden group-on:block"> Show less </span>
37 |         </button>
38 |       </div>
39 | 
40 |       <div class="w-full md:w-6/12" data-xt-toggle="{ collapseHeight: 'targets', duration: 500 }">
41 |         <div class="mb-6 text-lg max-h-20 overflow-hidden transition-all on" data-xt-toggle-target>
42 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis vestibulum
43 |           sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna aliquam
44 |           pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at, pretium
45 |           nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo hendrerit enim,
46 |           sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis non diam. Ut at
47 |           rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis leo. Mauris justo
48 |           elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a aliquet ligula.
49 |         </div>
50 | 
51 |         <button
52 |           type="button"
53 |           class="xt-button py-2.5 px-3.5 text-sm rounded-md font-medium leading-snug tracking-wider uppercase text-gray-900 bg-gray-100 transition hover:bg-gray-200 active:bg-gray-300 on:bg-gray-200 group"
54 |           data-xt-toggle-element
55 |         >
56 |           <span class="group-on:hidden"> Show more </span>
57 |           <span class="hidden group-on:block"> Show less </span>
58 |         </button>
59 |       </div>
60 |     </div>
61 |   </div>
62 | 
63 |   <script type="module" src="/app.js"></script>
64 | 
65 |   <script>
66 |     // put at the end of body tag https://browser-update.org/
67 |     var $buoop = {required:{e:79,f:53,o:44,s:11,c:57},api:2021.03 };
68 |     function $buo_f(){
69 |     var e = document.createElement("script");
70 |     e.src = "//browser-update.org/update.min.js";
71 |     document.body.appendChild(e);
72 |     };
73 |     try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
74 |     catch(e){window.attachEvent("onload", $buo_f)}
75 |   </script>
76 | 
77 | </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/parcel/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | 
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <title>Parcel Boilerplate</title>
 8 |   <link rel="icon" href="/src/assets/favicon.svg">
 9 | 
10 |   <link rel="stylesheet" href="/src/app.css">
11 | 
12 | </head>
13 | <body class="xt-body xt-links-default">
14 | 
15 |   <div class="container">
16 |     <h1>Parcel Boilerplate</h1>
17 | 
18 |     <h3>Test Toggle and Collapse</h3>
19 | 
20 |     <div class="xt-row xt-row-6">
21 |       <div class="w-full md:w-6/12" data-xt-toggle="{ collapseHeight: 'targets', duration: 500 }">
22 |         <div class="mb-6 text-lg max-h-20 overflow-hidden transition-all" data-xt-toggle-target>
23 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis vestibulum
24 |           sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna aliquam
25 |           pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at, pretium
26 |           nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo hendrerit enim,
27 |           sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis non diam. Ut at
28 |           rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis leo. Mauris justo
29 |           elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a aliquet ligula.
30 |         </div>
31 | 
32 |         <button
33 |           type="button"
34 |           class="xt-button py-2.5 px-3.5 text-sm rounded-md font-medium leading-snug tracking-wider uppercase text-gray-900 bg-gray-100 transition hover:bg-gray-200 active:bg-gray-300 on:bg-gray-200 group"
35 |           data-xt-toggle-element
36 |         >
37 |           <span class="group-on:hidden"> Show more </span>
38 |           <span class="hidden group-on:block"> Show less </span>
39 |         </button>
40 |       </div>
41 | 
42 |       <div class="w-full md:w-6/12" data-xt-toggle="{ collapseHeight: 'targets', duration: 500 }">
43 |         <div class="mb-6 text-lg max-h-20 overflow-hidden transition-all on" data-xt-toggle-target>
44 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis purus odio, et dictum felis vestibulum
45 |           sed. Morbi sodales ex sed dui posuere, a tempor purus consectetur. Curabitur vitae leo at magna aliquam
46 |           pellentesque. Nam sed neque in risus volutpat maximus. Sed vitae enim vehicula, lacinia orci at, pretium
47 |           nulla. Cras tincidunt quis ipsum et luctus. Cras venenatis, justo in euismod lacinia, urna leo hendrerit enim,
48 |           sit amet gravida nunc lectus id augue. Nullam dolor nibh, commodo at commodo eget, iaculis non diam. Ut at
49 |           rhoncus massa. Sed placerat tincidunt nisl, eu consequat neque pretium at. Cras et facilisis leo. Mauris justo
50 |           elit, porttitor sed pellentesque vitae, imperdiet nec ante. Nulla quis tempus risus, a aliquet ligula.
51 |         </div>
52 | 
53 |         <button
54 |           type="button"
55 |           class="xt-button py-2.5 px-3.5 text-sm rounded-md font-medium leading-snug tracking-wider uppercase text-gray-900 bg-gray-100 transition hover:bg-gray-200 active:bg-gray-300 on:bg-gray-200 group"
56 |           data-xt-toggle-element
57 |         >
58 |           <span class="group-on:hidden"> Show more </span>
59 |           <span class="hidden group-on:block"> Show less </span>
60 |         </button>
61 |       </div>
62 |     </div>
63 |   </div>
64 | 
65 |   <script type="module" src="/src/app.js"></script>
66 | 
67 |   <script>
68 |     // put at the end of body tag https://browser-update.org/
69 |     var $buoop = {required:{e:79,f:53,o:44,s:11,c:57},api:2021.03 };
70 |     function $buo_f(){
71 |     var e = document.createElement("script");
72 |     e.src = "//browser-update.org/update.min.js";
73 |     document.body.appendChild(e);
74 |     };
75 |     try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
76 |     catch(e){window.attachEvent("onload", $buo_f)}
77 |   </script>
78 | 
79 | </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------