Skip to content

Commit 1e7b659

Browse files
ptkdevptkdev
committed
Merge branch 'nightly' of github.com:ptkdev-components/webcomponent-instagram-widget into nightly
2 parents 387c012 + 9a640d4 commit 1e7b659

31 files changed

+1390
-0
lines changed

‎README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,23 @@ You can replace `en` in jsdelivr cdn with `it` or `pl` and load different langua
9797

9898
Go to `examples/reactjs` and run `npm run start` in folder for more info. Below is available a description of `options` values and all logger methods.
9999

100+
## ⚛️ Installation (Angular)
101+
1. Add html code to your `app.component.html` (and replace `@ptkdev` with your instagram username):
102+
```html
103+
<instagram-widget username="@ptkdev" />
104+
```
105+
106+
2. Inlude javascript in your `index.html` (before `</body>`):
107+
```javascript
108+
<script src="https://cdn.jsdelivr.net/npm/@ptkdev/webcomponent-instagram-widget@latest/dist/lib/en/instagram-widget.min.js"></script>
109+
```
110+
111+
You can replace `en` in jsdelivr cdn with `it` or `pl` and load different languages or replace `@latest` with specific version, example `@2.0.1`.
112+
113+
Demo: https://webcomponents-60bc6.firebaseapp.com/instagram-widget
114+
115+
Go to `examples/angular` and run `yarn install` then `yarn start` in folder for more info. Below is available a description of `options` values and all logger methods.
116+
100117
## 🧰 Options / Attributes
101118

102119
| Parameter | Description | Values | Default value | Available since |

‎examples/angular/.editorconfig

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎examples/angular/.gitignore

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
# Only exists if Bazel was run
8+
/bazel-out
9+
10+
# dependencies
11+
/node_modules
12+
13+
# profiling files
14+
chrome-profiler-events*.json
15+
speed-measure-plugin*.json
16+
17+
# IDEs and editors
18+
/.idea
19+
.project
20+
.classpath
21+
.c9/
22+
*.launch
23+
.settings/
24+
*.sublime-workspace
25+
26+
# IDE - VSCode
27+
.vscode/*
28+
!.vscode/settings.json
29+
!.vscode/tasks.json
30+
!.vscode/launch.json
31+
!.vscode/extensions.json
32+
.history/*
33+
34+
# misc
35+
/.sass-cache
36+
/connect.lock
37+
/coverage
38+
/libpeerconnection.log
39+
npm-debug.log
40+
yarn-error.log
41+
testem.log
42+
/typings
43+
44+
# System Files
45+
.DS_Store
46+
Thumbs.db

‎examples/angular/README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# TestProject
2+
3+
Link: https://webcomponents-60bc6.firebaseapp.com/.
4+
5+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.3.
6+
7+
## Development server
8+
9+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
10+
11+
## Code scaffolding
12+
13+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
14+
15+
## Build
16+
17+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
18+
19+
## Running unit tests
20+
21+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
22+
23+
## Running end-to-end tests
24+
25+
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
26+
27+
## Further help
28+
29+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

‎examples/angular/angular.json

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"test-project": {
7+
"projectType": "application",
8+
"schematics": {
9+
"@schematics/angular:component": {
10+
"style": "scss"
11+
}
12+
},
13+
"root": "",
14+
"sourceRoot": "src",
15+
"prefix": "app",
16+
"architect": {
17+
"build": {
18+
"builder": "@angular-devkit/build-angular:browser",
19+
"options": {
20+
"outputPath": "dist/test-project",
21+
"index": "src/index.html",
22+
"main": "src/main.ts",
23+
"polyfills": "src/polyfills.ts",
24+
"tsConfig": "tsconfig.app.json",
25+
"aot": true,
26+
"assets": [
27+
"src/favicon.ico",
28+
"src/assets"
29+
],
30+
"styles": [
31+
"./node_modules/bootstrap/dist/css/bootstrap.css",
32+
"src/styles.scss"
33+
],
34+
"scripts": []
35+
},
36+
"configurations": {
37+
"production": {
38+
"fileReplacements": [
39+
{
40+
"replace": "src/environments/environment.ts",
41+
"with": "src/environments/environment.prod.ts"
42+
}
43+
],
44+
"optimization": true,
45+
"outputHashing": "all",
46+
"sourceMap": false,
47+
"extractCss": true,
48+
"namedChunks": false,
49+
"extractLicenses": true,
50+
"vendorChunk": false,
51+
"buildOptimizer": true,
52+
"budgets": [
53+
{
54+
"type": "initial",
55+
"maximumWarning": "2mb",
56+
"maximumError": "5mb"
57+
},
58+
{
59+
"type": "anyComponentStyle",
60+
"maximumWarning": "6kb",
61+
"maximumError": "10kb"
62+
}
63+
]
64+
}
65+
}
66+
},
67+
"serve": {
68+
"builder": "@angular-devkit/build-angular:dev-server",
69+
"options": {
70+
"browserTarget": "test-project:build"
71+
},
72+
"configurations": {
73+
"production": {
74+
"browserTarget": "test-project:build:production"
75+
}
76+
}
77+
},
78+
"extract-i18n": {
79+
"builder": "@angular-devkit/build-angular:extract-i18n",
80+
"options": {
81+
"browserTarget": "test-project:build"
82+
}
83+
},
84+
"test": {
85+
"builder": "@angular-devkit/build-angular:karma",
86+
"options": {
87+
"main": "src/test.ts",
88+
"polyfills": "src/polyfills.ts",
89+
"tsConfig": "tsconfig.spec.json",
90+
"karmaConfig": "karma.conf.js",
91+
"assets": [
92+
"src/favicon.ico",
93+
"src/assets"
94+
],
95+
"styles": [
96+
"src/styles.scss"
97+
],
98+
"scripts": []
99+
}
100+
},
101+
"lint": {
102+
"builder": "@angular-devkit/build-angular:tslint",
103+
"options": {
104+
"tsConfig": [
105+
"tsconfig.app.json",
106+
"tsconfig.spec.json",
107+
"e2e/tsconfig.json"
108+
],
109+
"exclude": [
110+
"**/node_modules/**"
111+
]
112+
}
113+
},
114+
"e2e": {
115+
"builder": "@angular-devkit/build-angular:protractor",
116+
"options": {
117+
"protractorConfig": "e2e/protractor.conf.js",
118+
"devServerTarget": "test-project:serve"
119+
},
120+
"configurations": {
121+
"production": {
122+
"devServerTarget": "test-project:serve:production"
123+
}
124+
}
125+
}
126+
}
127+
}
128+
},
129+
"defaultProject": "test-project",
130+
"cli": {
131+
"analytics": false
132+
}
133+
}

‎examples/angular/browserslist

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# You can see what browsers were selected by your queries by running:
6+
# npx browserslist
7+
8+
> 0.5%
9+
last 2 versions
10+
Firefox ESR
11+
not dead
12+
not IE 9-11 # For IE 9-11 support, remove 'not'.

‎examples/angular/karma.conf.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage-istanbul-reporter'),
13+
require('@angular-devkit/build-angular/plugins/karma')
14+
],
15+
client: {
16+
clearContext: false // leave Jasmine Spec Runner output visible in browser
17+
},
18+
coverageIstanbulReporter: {
19+
dir: require('path').join(__dirname, './coverage/test-project'),
20+
reports: ['html', 'lcovonly', 'text-summary'],
21+
fixWebpackSourcePaths: true
22+
},
23+
reporters: ['progress', 'kjhtml'],
24+
port: 9876,
25+
colors: true,
26+
logLevel: config.LOG_INFO,
27+
autoWatch: true,
28+
browsers: ['Chrome'],
29+
singleRun: false,
30+
restartOnFileChange: true
31+
});
32+
};

‎examples/angular/package.json

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "test-project",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"test": "ng test",
9+
"lint": "ng lint",
10+
"e2e": "ng e2e"
11+
},
12+
"private": true,
13+
"dependencies": {
14+
"@angular/animations": "~9.1.3",
15+
"@angular/common": "~9.1.3",
16+
"@angular/compiler": "~9.1.3",
17+
"@angular/core": "~9.1.3",
18+
"@angular/forms": "~9.1.3",
19+
"@angular/platform-browser": "~9.1.3",
20+
"@angular/platform-browser-dynamic": "~9.1.3",
21+
"@angular/router": "~9.1.3",
22+
"bootstrap": "^4.4.1",
23+
"jquery": "^3.5.0",
24+
"rxjs": "~6.5.4",
25+
"tslib": "^1.10.0",
26+
"zone.js": "~0.10.2"
27+
},
28+
"devDependencies": {
29+
"@angular-devkit/build-angular": "~0.901.3",
30+
"@angular/cli": "~9.1.3",
31+
"@angular/compiler-cli": "~9.1.3",
32+
"@angular/language-service": "~9.1.3",
33+
"@types/node": "^12.11.1",
34+
"@types/jasmine": "~3.5.0",
35+
"@types/jasminewd2": "~2.0.3",
36+
"codelyzer": "^5.1.2",
37+
"jasmine-core": "~3.5.0",
38+
"jasmine-spec-reporter": "~4.2.1",
39+
"karma": "~5.0.0",
40+
"karma-chrome-launcher": "~3.1.0",
41+
"karma-coverage-istanbul-reporter": "~2.1.0",
42+
"karma-jasmine": "~3.0.1",
43+
"karma-jasmine-html-reporter": "^1.4.2",
44+
"protractor": "~5.4.3",
45+
"ts-node": "~8.3.0",
46+
"tslint": "~6.1.0",
47+
"typescript": "~3.8.3"
48+
}
49+
}

‎examples/angular/src/app/app-routing.module.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {NgModule} from '@angular/core';
2+
import {RouterModule, Routes} from '@angular/router';
3+
import {PtkdevInstagramWidgetWcComponent} from './components/ptkdev-instagram-widget-wc/ptkdev-instagram-widget-wc.component';
4+
5+
6+
const routes: Routes = [
7+
{path: 'instagram-widget', component: PtkdevInstagramWidgetWcComponent},
8+
{path: '', redirectTo: 'instagram-widget', pathMatch: 'full'},
9+
{path: '**', redirectTo: 'instagram-widget'}
10+
];
11+
12+
@NgModule({
13+
imports: [RouterModule.forRoot(routes)],
14+
exports: [RouterModule]
15+
})
16+
export class AppRoutingModule {
17+
}

0 commit comments

Comments
 (0)