Skip to content

Commit 8f0460f

Browse files
wildonewildone
authored
Initial commit
0 parents  commit 8f0460f

25 files changed

+14698
-0
lines changed

‎.babelrc.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["@babel/preset-env"],
3+
"plugins": ["@babel/plugin-proposal-class-properties"]
4+
}

‎.editorconfig

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# EditorConfig is awesome: https://EditorConfig.org
2+
3+
# top-most EditorConfig file
4+
root = true
5+
6+
[*]
7+
indent_style = space
8+
indent_size = 4
9+
end_of_line = lf
10+
charset = utf-8
11+
trim_trailing_whitespace = false
12+
insert_final_newline = false

‎.eslintrc.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"rules": {
3+
"prefer-template": "off",
4+
"no-var": 1,
5+
"no-unused-vars": 1,
6+
"camelcase": 1,
7+
"no-nested-ternary": 1,
8+
"no-console": 0,
9+
"no-template-curly-in-string": 1,
10+
"no-self-compare": 1,
11+
"import/prefer-default-export": 0,
12+
"arrow-body-style": 1,
13+
"import/no-extraneous-dependencies": ["off", { "devDependencies": false }]
14+
},
15+
"ignorePatterns": ["dist", "node_modules", "webpack.*", "config/paths.js"],
16+
"env": {
17+
"browser": true,
18+
"es6": true
19+
},
20+
"extends": ["eslint:recommended", "prettier"],
21+
"parserOptions": {
22+
"ecmaVersion": 2021,
23+
"sourceType": "module"
24+
},
25+
"plugins": ["prettier"],
26+
"settings": {
27+
"import/resolver": {
28+
"webpack": {
29+
"config": "config/webpack.common.js"
30+
}
31+
}
32+
}
33+
}

‎.github/workflows/webpack.yml

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
name: NodeJS with Webpack
2+
3+
on:
4+
push:
5+
branches: [ "main" ]
6+
pull_request:
7+
branches: [ "main" ]
8+
# Allows you to run this workflow manually from the Actions tab
9+
workflow_dispatch:
10+
11+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
17+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
18+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
19+
concurrency:
20+
group: "pages"
21+
cancel-in-progress: true
22+
23+
24+
jobs:
25+
build:
26+
runs-on: ubuntu-latest
27+
28+
strategy:
29+
matrix:
30+
node-version: [21.x]
31+
32+
steps:
33+
- uses: actions/checkout@v4
34+
35+
- name: Use Node.js ${{ matrix.node-version }}
36+
uses: actions/setup-node@v3
37+
with:
38+
node-version: ${{ matrix.node-version }}
39+
40+
- name: Build
41+
run: |
42+
npm install
43+
npm run build
44+
45+
deploy:
46+
needs: [build]
47+
environment:
48+
name: github-pages
49+
url: ${{ steps.deployment.outputs.page_url }}
50+
runs-on: ubuntu-latest
51+
steps:
52+
- name: Checkout
53+
uses: actions/checkout@v4
54+
55+
- name: Use Node.js
56+
uses: actions/setup-node@v3
57+
with:
58+
node-version: 21.x
59+
60+
- name: Build
61+
run: |
62+
npm install
63+
npm run build
64+
65+
- name: Setup Pages
66+
uses: actions/configure-pages@v5
67+
- name: Upload artifact
68+
uses: actions/upload-pages-artifact@v3
69+
with:
70+
# Upload entire repository
71+
path: 'dist'
72+
- name: Deploy to GitHub Pages
73+
id: deployment
74+
uses: actions/deploy-pages@v4

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
dist/

‎.prettierrc.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"trailingComma": "es5",
3+
"singleQuote": true,
4+
"tabWidth": 2,
5+
"printWidth": 100,
6+
"semi": false
7+
}

‎README.md

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
# Teamplate iFrame Widget
2+
3+
This teamplate is mean to be used to create new experiences that can be included using iFrames into other application and websites.
4+
5+
## Installation
6+
7+
Create a new repository from this template.
8+
9+
Clone your new repository to your local machine.
10+
11+
Install the dependencies:
12+
13+
```bash
14+
npm i
15+
```
16+
17+
Run the development server:
18+
19+
```bash
20+
npm start
21+
```
22+
23+
You can view the development server at [http://localhost:4001](http://localhost:4001).
24+
25+
### Production build
26+
27+
```bash
28+
npm run build
29+
```
30+
31+
### Where to add your code
32+
33+
Here are the main files and folders you will be working with:
34+
35+
#### Assets and Images
36+
37+
Add your assets and images into `src/assets/` folder. These will be copied into `dist/` folder as is
38+
39+
#### HTML
40+
41+
Add your custom HTML code into template `src/html/content.html`, this file will be added as innerHTML of the `body` element in templae `src/html/_index.html` file. This will be compiled into `dist/index.html`.
42+
43+
#### CSS
44+
45+
CSS is being compiled using SASS. Add your custom SASS code into template `src/sass/content.scss`, this will be compiled into `dist/widget.css`.
46+
47+
#### JS
48+
49+
Add your custom JS code into js files in `src/js/`. Each file will be concatanated into `dist/widget.js`. Files are concatanated in the order they are listed in the folder.
50+
51+
#### JS Vendor Libs
52+
53+
To add vendor JS libraries that will be compiled into `dist/vendor.js` and `dist/vendor.css` update the following section in `webpack.common.js`:
54+
55+
```javascript
56+
new MergeIntoSingleFilePlugin({
57+
files: {
58+
"vendor.js": [
59+
'node_modules/jquery/dist/jquery.min.js',
60+
'node_modules/@popperjs/core/dist/umd/popper.js',
61+
'node_modules/bootstrap/dist/js/bootstrap.js',
62+
'node_modules/d3/dist/d3.js',
63+
],
64+
"vendor.css": [
65+
//nothing here yet
66+
],
67+
"widget.js": [
68+
paths.src + '/js/**/*.js',
69+
]
70+
}
71+
}),
72+
73+
```
74+
75+
##### JS Conventions
76+
77+
Please keep JS simple, clean and namespaced.
78+
79+
When adding new files "modules" use this as the template for your new module.
80+
81+
```javascript
82+
//define namespace for your JS file
83+
//window.Widgets = {}; // already defined in _namespace.js
84+
window.Widgets.Widget = {};
85+
86+
//define your function to use in your component
87+
(function($, ns, componentsNs, document, window) {
88+
ns.version = '1.0.0';
89+
90+
ns.selectorComponent = '.js-component';
91+
92+
ns.init = function() {
93+
//initialize your class
94+
};
95+
96+
})(jQuery, Widgets.Widget, window.Widgets, document, window);
97+
98+
//define your behaviour how will this component will be added to DOM.
99+
(function($, ns, componentsNs, document, window) {
100+
101+
//watch for the component to be added to DOM
102+
componentsNs.watchDOMForComponent(`${ns.selectorComponent}`, ns.init);
103+
104+
})(window.jQuery, window.Widgets.Widget, window.Widgets, document, window);
105+
106+
```
107+

‎jsconfig.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": "./",
4+
"paths": {
5+
"@/*": ["./src/*"]
6+
},
7+
"allowJs": true
8+
}
9+
}

0 commit comments

Comments
 (0)