mirror of
https://github.com/jlengrand/tailwind-app.git
synced 2026-03-10 08:41:23 +00:00
Initates repository
This commit is contained in:
Julien Lengrand-Lambert
29
.editorconfig
Normal file
29
.editorconfig
Normal file
@@ -0,0 +1,29 @@
|
||||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# Change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# We recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.json]
|
||||
indent_size = 2
|
||||
|
||||
[*.{html,js,md}]
|
||||
block_comment_start = /**
|
||||
block_comment = *
|
||||
block_comment_end = */
|
||||
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
## editors
|
||||
/.idea
|
||||
/.vscode
|
||||
|
||||
## system files
|
||||
.DS_Store
|
||||
|
||||
## npm
|
||||
/node_modules/
|
||||
/npm-debug.log
|
||||
|
||||
## testing
|
||||
/coverage/
|
||||
|
||||
## temp folders
|
||||
/.tmp/
|
||||
|
||||
# build
|
||||
/_site/
|
||||
/dist/
|
||||
/out-tsc/
|
||||
|
||||
storybook-static
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 tailwind-app
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
30
README.md
Normal file
30
README.md
Normal file
@@ -0,0 +1,30 @@
|
||||
<p align="center">
|
||||
<img width="200" src="https://open-wc.org/hero.png"></img>
|
||||
</p>
|
||||
|
||||
## Open-wc Starter App
|
||||
|
||||
[](https://github.com/open-wc)
|
||||
|
||||
## Quickstart
|
||||
|
||||
To get started:
|
||||
|
||||
```sh
|
||||
npm init @open-wc
|
||||
# requires node 10 & npm 6 or higher
|
||||
```
|
||||
|
||||
## Scripts
|
||||
|
||||
- `start` runs your app for development, reloading on file changes
|
||||
- `start:build` runs your app after it has been built using the build command
|
||||
- `build` builds your app and outputs it in your `dist` directory
|
||||
- `test` runs your test suite with Web Test Runner
|
||||
- `lint` runs the linter for your project
|
||||
|
||||
## Tooling configs
|
||||
|
||||
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
|
||||
|
||||
If you customize the configuration a lot, you can consider moving them to individual files.
|
||||
26
custom-elements.json
Normal file
26
custom-elements.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"version": 2,
|
||||
"tags": [
|
||||
{
|
||||
"name": "tailwind-app",
|
||||
"description": "An application with a title and an action counter",
|
||||
"properties": [
|
||||
{
|
||||
"name": "title",
|
||||
"type": "String",
|
||||
"description": "The title of your application",
|
||||
"default": "Hey there"
|
||||
},
|
||||
{
|
||||
"name": "page",
|
||||
"type": "String",
|
||||
"description": "Which page to show",
|
||||
"default": "main"
|
||||
}
|
||||
],
|
||||
"events": [],
|
||||
"slots": [],
|
||||
"cssProperties": []
|
||||
}
|
||||
]
|
||||
}
|
||||
29
index.html
Normal file
29
index.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta name="Description" content="Put your description here.">
|
||||
<link href="tailwind.css" rel="stylesheet">
|
||||
<base href="/">
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
background-color: #ededed;
|
||||
}
|
||||
</style>
|
||||
<title>tailwind-app</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<tailwind-app></tailwind-app>
|
||||
|
||||
<script type="module" src="./out-tsc/src/tailwind-app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
9921
package-lock.json
generated
Normal file
9921
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
package.json
Normal file
27
package.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"scripts": {
|
||||
"build": "rimraf dist && tsc && rollup -c rollup.config.js",
|
||||
"start:build": "npm run build && web-dev-server --root-dir dist --app-index index.html --open --compatibility none",
|
||||
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
||||
"css": "npx tailwindcss-cli@latest build -o tailwind.css"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@open-wc/building-rollup": "^1.0.0",
|
||||
"@web/dev-server": "^0.1.1",
|
||||
"concurrently": "^5.3.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"rimraf": "^2.6.3",
|
||||
"rollup": "^2.3.4",
|
||||
"tslib": "^2.0.3",
|
||||
"typescript": "^4.1.3"
|
||||
},
|
||||
"name": "tailwind-app",
|
||||
"version": "0.0.0",
|
||||
"description": "Webcomponent tailwind-app following open-wc recommendations",
|
||||
"author": "tailwind-app",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lit-element": "^2.0.1",
|
||||
"lit-html": "^1.0.0"
|
||||
}
|
||||
}
|
||||
31
rollup.config.js
Normal file
31
rollup.config.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import merge from 'deepmerge';
|
||||
// use createSpaConfig for bundling a Single Page App
|
||||
import { createSpaConfig } from '@open-wc/building-rollup';
|
||||
|
||||
// use createBasicConfig to do regular JS to JS bundling
|
||||
// import { createBasicConfig } from '@open-wc/building-rollup';
|
||||
|
||||
const baseConfig = createSpaConfig({
|
||||
// use the outputdir option to modify where files are output
|
||||
// outputDir: 'dist',
|
||||
|
||||
// if you need to support older browsers, such as IE11, set the legacyBuild
|
||||
// option to generate an additional build just for this browser
|
||||
// legacyBuild: true,
|
||||
|
||||
// development mode creates a non-minified build for debugging or development
|
||||
developmentMode: process.env.ROLLUP_WATCH === 'true',
|
||||
|
||||
// set to true to inject the service worker registration into your index.html
|
||||
injectServiceWorker: false,
|
||||
});
|
||||
|
||||
export default merge(baseConfig, {
|
||||
// if you use createSpaConfig, you can use your index.html as entrypoint,
|
||||
// any <script type="module"> inside will be bundled by rollup
|
||||
input: './index.html',
|
||||
|
||||
// alternatively, you can use your JS as entrypoint for rollup and
|
||||
// optionally set a HTML template manually
|
||||
// input: './app.js',
|
||||
});
|
||||
25
src/AppFooter.ts
Normal file
25
src/AppFooter.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { html, css } from 'lit-element';
|
||||
|
||||
import { YoloLitElement } from './YoloLitElement.js';
|
||||
|
||||
export class AppFooter extends YoloLitElement {
|
||||
|
||||
static styles = css`
|
||||
`;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<p class="ml-5 items-center 2xl">
|
||||
🚽 Made with love by
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://github.com/open-wc"
|
||||
>open-wc</a
|
||||
>.
|
||||
</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('app-footer', AppFooter);
|
||||
64
src/TailwindApp.ts
Normal file
64
src/TailwindApp.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import { LitElement, html, css, property } from 'lit-element';
|
||||
import { openWcLogo } from './open-wc-logo.js';
|
||||
import { YoloLitElement } from './YoloLitElement.js';
|
||||
|
||||
import './AppFooter.js';
|
||||
|
||||
export class TailwindApp extends YoloLitElement {
|
||||
@property({ type: String }) title = 'My app';
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: #1a2b42;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background-color: var(--tailwind-app-background-color);
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.logo > svg {
|
||||
margin-top: 36px;
|
||||
animation: app-logo-spin infinite 20s linear;
|
||||
}
|
||||
|
||||
@keyframes app-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<main>
|
||||
<div class="logo">${openWcLogo}</div>
|
||||
<h1>${this.title}</h1>
|
||||
|
||||
<p>Edit <code>src/TailwindApp.js</code> and save to reload.</p>
|
||||
<a
|
||||
class="app-link"
|
||||
href="https://open-wc.org/developing/#code-examples"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Code examples
|
||||
</a>
|
||||
</main>
|
||||
|
||||
<app-footer></app-footer>
|
||||
`;
|
||||
}
|
||||
}
|
||||
7
src/YoloLitElement.ts
Normal file
7
src/YoloLitElement.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { LitElement } from 'lit-element';
|
||||
|
||||
export class YoloLitElement extends LitElement {
|
||||
createRenderRoot(){
|
||||
return this;
|
||||
}
|
||||
}
|
||||
33
src/open-wc-logo.ts
Normal file
33
src/open-wc-logo.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { html } from 'lit-html';
|
||||
|
||||
export const openWcLogo = html`
|
||||
<svg
|
||||
width="244px"
|
||||
height="244px"
|
||||
viewBox="0 0 244 244"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#9B00FF" offset="0%"></stop>
|
||||
<stop stop-color="#0077FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g
|
||||
id="Page-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<path
|
||||
d="M205.639259,176.936244 C207.430887,174.217233 209.093339,171.405629 210.617884,168.510161 M215.112174,158.724316 C216.385153,155.50304 217.495621,152.199852 218.433474,148.824851 M220.655293,138.874185 C221.231935,135.482212 221.637704,132.03207 221.863435,128.532919 M222,118.131039 C221.860539,114.466419 221.523806,110.85231 221.000113,107.299021 M218.885321,96.8583653 C218.001583,93.4468963 216.942225,90.1061026 215.717466,86.8461994 M211.549484,77.3039459 C209.957339,74.1238901 208.200597,71.0404957 206.290425,68.0649233 M200.180513,59.5598295 C181.848457,36.6639805 153.655709,22 122.036748,22 C66.7879774,22 22,66.771525 22,122 C22,177.228475 66.7879774,222 122.036748,222 C152.914668,222 180.52509,208.015313 198.875424,186.036326"
|
||||
id="Shape"
|
||||
stroke="url(#linearGradient-1)"
|
||||
stroke-width="42.0804674"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
`;
|
||||
3
src/tailwind-app.ts
Normal file
3
src/tailwind-app.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TailwindApp } from './TailwindApp.js';
|
||||
|
||||
customElements.define('tailwind-app', TailwindApp);
|
||||
183889
tailwind.css
Normal file
183889
tailwind.css
Normal file
File diff suppressed because it is too large
Load Diff
19
tsconfig.json
Normal file
19
tsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2018",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"noEmitOnError": true,
|
||||
"lib": ["es2017", "dom"],
|
||||
"strict": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"experimentalDecorators": true,
|
||||
"importHelpers": true,
|
||||
"outDir": "out-tsc",
|
||||
"sourceMap": true,
|
||||
"inlineSources": true,
|
||||
"rootDir": "./"
|
||||
},
|
||||
"include": ["**/*.ts"]
|
||||
}
|
||||
28
web-dev-server.config.mjs
Normal file
28
web-dev-server.config.mjs
Normal file
@@ -0,0 +1,28 @@
|
||||
// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
|
||||
|
||||
/** Use Hot Module replacement by adding --hmr to the start command */
|
||||
const hmr = process.argv.includes('--hmr');
|
||||
|
||||
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
||||
nodeResolve: true,
|
||||
open: '/',
|
||||
watch: !hmr,
|
||||
|
||||
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
||||
// esbuildTarget: 'auto'
|
||||
|
||||
/** Set appIndex to enable SPA routing */
|
||||
// appIndex: 'demo/index.html',
|
||||
|
||||
/** Confgure bare import resolve plugin */
|
||||
// nodeResolve: {
|
||||
// exportConditions: ['browser', 'development']
|
||||
// },
|
||||
|
||||
plugins: [
|
||||
/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
|
||||
// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
|
||||
],
|
||||
|
||||
// See documentation for all available options
|
||||
});
|
||||
Reference in New Issue
Block a user