Skip to content

Commit 2fe2655

Browse files
marianocodesmarianocodes
committed
feat(apps): add social cards to apps, create theme, improve build
1 parent 55a6c2d commit 2fe2655

File tree

12 files changed

+112
-42
lines changed

12 files changed

+112
-42
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
This is an example using Nx and the Angular CLI to create Angular Elements. NX is used to scaffold the React and Angular apps in a monorepo using the same commands to run the app.
44

55
**Init Project**
6-
* Build Elements `ng build core --output-hashing none --single-bundle true --keep-polyfills true`
6+
* Build Elements `ng build core --prod --single-bundle true --keep-polyfills true`
77
* Serve app `ng serve <appname>` e.g `ng serve angularapp`
88

99
**Slides**
@@ -25,7 +25,7 @@ TBD
2525
Este es un ejemplo utilizando Nx y el Angular CLI para crear Angular Elements. Nx es usado para generar las aplicaciones en React y Angular en un monorepo, a su vez permitiendo usar los mismos comandos.
2626

2727
**Inciar el Proyecto**
28-
* Build Elements `ng build core --output-hashing none --single-bundle true --keep-polyfills true`
28+
* Build Elements `ng build core --prod --single-bundle true --keep-polyfills true`
2929
* Serve app `ng serve <appname>` e.g `ng serve angularapp`
3030

3131
**Presentación**

‎angular.json‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"apps/angularapp/src/assets"
2828
],
2929
"styles": [
30-
"apps/angularapp/src/styles.scss"
30+
"apps/angularapp/src/styles.scss",
31+
"dist/ngelements/theme.css"
3132
],
3233
"scripts": [
3334
{
@@ -152,7 +153,8 @@
152153
"apps/reactapp/src/assets"
153154
],
154155
"styles": [
155-
"apps/reactapp/src/styles.scss"
156+
"apps/reactapp/src/styles.scss",
157+
"dist/ngelements/theme.css"
156158
],
157159
"scripts": [
158160
"dist/ngelements/polyfills.js",
@@ -251,7 +253,7 @@
251253
"projectType": "library",
252254
"root": "libs/core",
253255
"sourceRoot": "libs/core/src",
254-
"prefix": "ngelements",
256+
"prefix": "ui",
255257
"architect": {
256258
"build": {
257259
"builder": "ngx-build-plus:build",
@@ -260,19 +262,20 @@
260262
"index": "libs/core/src/lib/index.html",
261263
"main": "libs/core/src/lib/elements.ts",
262264
"polyfills": "libs/core/src/lib/polyfills.ts",
263-
"tsConfig": "libs/core/tsconfig.lib.json"
265+
"tsConfig": "libs/core/tsconfig.lib.json",
266+
"styles": [
267+
{
268+
"input": "libs/core/src/lib/theme.scss",
269+
"lazy": true
270+
}
271+
]
264272
},
265273
"configurations": {
266274
"production": {
267275
"optimization": true,
268-
"outputHashing": "all",
276+
"outputHashing": "none",
269277
"sourceMap": false,
270-
"extractCss": true,
271-
"namedChunks": false,
272-
"aot": true,
273-
"extractLicenses": true,
274-
"vendorChunk": false,
275-
"buildOptimizer": true
278+
"extractCss": true
276279
}
277280
}
278281
},

‎apps/angularapp/src/app/app.component.html‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
11
<ui-nav>
2-
<img src="https://github.com/mahcr/angular-elements/blob/master/assets/ng-horizontal.png?raw=true" slot="logo-angular" />
3-
<img src="https://raw.githubusercontent.com/mahcr/angular-elements/master/assets/gdg-pv.png" slot="logo-gdg" />
2+
<img src="https://raw.githubusercontent.com/mahcr/angular-elements/master/example-assets/ng-horizontal.png" slot="logo-angular" />
3+
<img src="https://raw.githubusercontent.com/mahcr/angular-elements/master/example-assets/gdg-pv.png" slot="logo-gdg" />
44
</ui-nav>
5+
6+
<h1>Hola - I'm Angular app</h1>
7+
8+
<main>
9+
10+
<ui-socialcard *ngFor="let profile of list"
11+
[name]="profile.name"
12+
[url]="profile.url"
13+
[twitter]="profile?.twitter"
14+
[instagram]="profile.instagram"
15+
></ui-socialcard>
16+
</main>
17+
18+
19+
<ui-footer></ui-footer>

‎apps/angularapp/src/app/app.component.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,11 @@ import { Component } from '@angular/core';
66
styleUrls: ['./app.component.scss']
77
})
88
export class AppComponent {
9-
title = 'angularapp';
9+
public list = [
10+
11+
{ name: 'Manola', url: 'https://raw.githubusercontent.com/mahcr/angular-elements/master/example-assets/manola.png', instagram: '@hola.man0la' },
12+
13+
{ name: 'Mariano', twitter: '@malvarezcr', url: 'https://raw.githubusercontent.com/mahcr/angular-elements/master/example-assets/me.png', instagram: '@mah.cr' },
14+
15+
];
1016
}

‎apps/reactapp/src/app/app.tsx‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,46 @@
1-
import React from 'react';
1+
import React, { Fragment, useEffect } from 'react';
22

33
import './app.scss';
44

5+
let id = 0;
6+
57
export const App = () => {
8+
9+
const list = [
10+
{ name: 'Manola', url: 'https://raw.githubusercontent.com/mahcr/angular-elements/master/example-assets/manola.png', instagram: '@hola.man0la' },
11+
12+
{ name: 'Mariano', twitter: '@malvarezcr', url: 'https://raw.githubusercontent.com/mahcr/angular-elements/master/example-assets/me.png', instagram: '@mah.cr' },
13+
];
14+
615
return (
7-
<div>
16+
<Fragment>
817
<ui-nav>
9-
<img src="https://github.com/mahcr/angular-elements/blob/master/assets/ng-horizontal.png?raw=true" slot="logo-angular" />
10-
<img src="https://raw.githubusercontent.com/mahcr/angular-elements/master/assets/gdg-pv.png" slot="logo-gdg" />
18+
<img src="https://raw.githubusercontent.com/mahcr/angular-elements/master/example-assets/ng-horizontal.png" slot="logo-angular" />
19+
<img src="https://raw.githubusercontent.com/mahcr/angular-elements/master/example-assets/gdg-pv.png" slot="logo-gdg" />
1120
</ui-nav>
12-
</div>
21+
22+
<h1>Hola - I'm React app</h1>
23+
24+
<main>
25+
26+
{
27+
list.map((profile) =>
28+
<ui-socialcard
29+
key={id++}
30+
name={profile.name}
31+
url={profile.url}
32+
twitter={profile.twitter}
33+
instagram={profile.instagram}
34+
></ui-socialcard>
35+
)
36+
}
37+
38+
</main>
39+
40+
41+
<ui-footer></ui-footer>
42+
43+
</Fragment>
1344
);
1445
};
1546

‎libs/core/src/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export * from './lib/core.module';
2-
export * from './lib/index';
1+
export { CoreModule } from './lib/core.module';
2+
export { FooterComponent, NavComponent, SocialCardComponent } from './lib/index';

‎libs/core/src/lib/index.ts‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
import { NavComponent } from './nav/nav.component';
2-
import { FooterComponent } from './footer/footer.component';
3-
import { SocialCardComponent } from './social-card/social-card.component';
4-
5-
export const UI_COMPONENTS = [
6-
NavComponent,
7-
FooterComponent,
8-
SocialCardComponent
9-
];
10-
11-
export * from './nav/nav.component';
12-
export * from './footer/footer.component';
13-
export * from './social-card/social-card.component';
1+
export { NavComponent } from './nav/nav.component';
2+
export { FooterComponent } from './footer/footer.component';
3+
export { SocialCardComponent } from './social-card/social-card.component';

‎libs/core/src/lib/social-card/social-card.component.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,21 @@
1010

1111
<div class="content">
1212
<ul>
13-
<li *ngIf="twitter as twitter">Twitter: {{ twitter }}</li>
14-
<li *ngIf="instagram as instagram">Instagram: {{ instagram }}</li>
13+
14+
<li *ngIf="twitter as twitter">
15+
Twitter:
16+
<a [href]="'https://www.instagram.com/' + twitter" target="_blank">
17+
{{ twitter }}
18+
</a>
19+
</li>
20+
21+
<li *ngIf="instagram as instagram">
22+
Instagram:
23+
<a [href]="'https://twitter.com/' + instagram" target="_blank">
24+
{{ instagram }}
25+
</a>
26+
</li>
27+
1528
</ul>
1629
</div>
1730
</div>

‎libs/core/src/lib/social-card/social-card.component.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@ ul {
3131
}
3232
}
3333

34-
.card {
34+
:host {
3535
border-radius: 4px;
3636
box-shadow: 0 2px 10px #dadada;
3737
display: inline-block;
3838
margin: 0 20px;
39+
min-height: 280px;
3940
padding: 15px 5px;
4041
text-align: center;
4142
}

‎libs/core/src/lib/theme.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
body {
2+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3+
text-align: center;
4+
}
5+
6+
main {
7+
align-items: center;
8+
display: flex;
9+
justify-content: center;
10+
height: 70vh;
11+
}

0 commit comments

Comments
 (0)