Skip to content

Commit d5ccb64

Browse files
geometricpandageometricpanda
committed
feat(home-page): adds starter for homepage
1 parent 7ff4fe7 commit d5ccb64

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1081
-8
lines changed

‎.yarn/cache/@angular-cdk-npm-15.2.1-6180813f22-a95c5faf81.zip

3.01 MB
Binary file not shown.

‎.yarn/cache/@coreui-icons-npm-3.0.0-2f6cc7fbba-52b108f98d.zip

12.4 MB
Binary file not shown.

‎.yarn/cache/modern-css-reset-npm-1.4.0-d79ae0c49d-b515d1b669.zip

6.38 KB
Binary file not shown.

‎.yarn/install-state.gz

3.91 KB
Binary file not shown.

‎apps/www/project.json

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,15 @@
1414
"main": "apps/www/src/main.ts",
1515
"polyfills": ["zone.js"],
1616
"tsConfig": "apps/www/tsconfig.app.json",
17-
"assets": ["apps/www/src/favicon.ico", "apps/www/src/assets"],
17+
"assets": [
18+
"apps/www/src/favicon.ico",
19+
"apps/www/src/assets",
20+
{
21+
"glob": "**/*.svg",
22+
"input": "node_modules/@coreui/icons/sprites",
23+
"output": "assets/core-ui"
24+
}
25+
],
1826
"styles": ["apps/www/src/styles.css"],
1927
"scripts": []
2028
},

‎apps/www/src/app/app.component.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:host {
2+
display: flex;
3+
flex-direction: column;
4+
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
<router-outlet></router-outlet>
1+
<header app-masthead>
2+
</header>
3+
<main>
4+
<router-outlet></router-outlet>
5+
</main>

‎apps/www/src/app/app.module.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ import { RouterModule } from '@angular/router';
44

55
import { AppComponent } from './app.component';
66
import { appRoutes } from './app.routes';
7+
import {MastheadComponent} from "./components/masthead";
78

89
@NgModule({
910
declarations: [AppComponent],
1011
imports: [
11-
BrowserModule.withServerTransition({ appId: 'serverApp' }),
12-
RouterModule.forRoot(appRoutes, { initialNavigation: 'enabledBlocking' }),
12+
BrowserModule.withServerTransition({appId: 'serverApp'}),
13+
RouterModule.forRoot(appRoutes, {initialNavigation: 'enabledBlocking'}),
14+
MastheadComponent,
1315
],
1416
providers: [],
1517
bootstrap: [AppComponent],

‎apps/www/src/app/app.routes.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1-
import { Route } from '@angular/router';
1+
import {Route, Routes} from '@angular/router';
22

3-
export const appRoutes: Route[] = [];
3+
const home: Route = {
4+
path: '',
5+
loadComponent: () => import('./pages/home').then(mod => mod.HomePageComponent),
6+
}
7+
8+
export const appRoutes: Routes = [
9+
home,
10+
];

‎apps/www/src/app/components/container/container.component.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:host(.container) {
2+
display: block;
3+
margin: auto;
4+
width: 100%;
5+
max-width: var(--grid-max-width);
6+
padding-inline: var(--grid-gutter);
7+
}
8+
9+
:host(.container--wide) {
10+
max-width: var(--grid-wide-max-width);
11+
}

‎apps/www/src/app/components/container/container.component.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {Component, HostBinding, Input} from "@angular/core";
2+
import {BooleanInput, coerceBooleanProperty} from "@angular/cdk/coercion";
3+
4+
@Component({
5+
selector: 'app-container',
6+
template: `
7+
<ng-content/>`,
8+
styleUrls: ['./container.component.css'],
9+
standalone: true,
10+
})
11+
export class ContainerComponent {
12+
13+
@HostBinding('class.container')
14+
readonly hbClassContainer = true;
15+
16+
@HostBinding('class.container--wide')
17+
get hbClassContainerWide() {
18+
return coerceBooleanProperty(this.wide);
19+
}
20+
21+
@Input() wide: BooleanInput = false
22+
23+
}

‎apps/www/src/app/components/container/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './container.component';

‎apps/www/src/app/components/hero/hero.component.css

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
:host(.hero) {
2+
--_hero-bg-color: var(--color-plum-light);
3+
--_hero-alt-bg-color: var(--color-ocean);
4+
display: grid;
5+
width: 100%;
6+
grid-template-areas:
7+
"body"
8+
"foot";
9+
}
10+
11+
.hero__body {
12+
display: flex;
13+
flex-direction: column;
14+
place-items: center;
15+
background-color: var(--_hero-bg-color);
16+
grid-area: body;
17+
padding-top: 20px;
18+
position: relative;
19+
z-index: 2;
20+
text-align: center;
21+
}
22+
23+
.hero__footer {
24+
grid-area: foot;
25+
height: 120px;
26+
position: relative;
27+
overflow: hidden;
28+
}
29+
30+
.hero__footer-layer {
31+
width: 5000px;
32+
height: 300px;
33+
position: absolute;
34+
box-shadow: 12px 0 12px rgba(0 0 0 / 50%);
35+
}
36+
37+
.hero__footer-layer--top {
38+
bottom: 50px;
39+
rotate: 3deg;
40+
background-color: var(--_hero-bg-color);
41+
translate: -50% 0;
42+
left: 50%;
43+
z-index: 1;
44+
}
45+
46+
.hero__footer-layer--bottom {
47+
width: 2000px;
48+
left: -20px;
49+
bottom: 50px;
50+
rotate: -2deg;
51+
background-color: var(--_hero-alt-bg-color);
52+
z-index: 0;
53+
}
54+
55+
@media (min-width: 48em) {
56+
.hero__body{
57+
padding: 0;
58+
}
59+
}

‎apps/www/src/app/components/hero/hero.component.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="hero__body">
2+
<app-container>
3+
<ng-content/>
4+
</app-container>
5+
</div>
6+
7+
<div class="hero__footer">
8+
<div class="hero__footer-layer hero__footer-layer--top"></div>
9+
<div class="hero__footer-layer hero__footer-layer--bottom"></div>
10+
</div>

‎apps/www/src/app/components/hero/hero.component.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Component, HostBinding} from "@angular/core";
2+
import {ContainerComponent} from "../container";
3+
4+
@Component({
5+
selector: 'app-hero',
6+
templateUrl: './hero.component.html',
7+
styleUrls: ['./hero.component.css'],
8+
standalone: true,
9+
imports: [
10+
ContainerComponent
11+
]
12+
})
13+
export class HeroComponent {
14+
15+
@HostBinding('class.hero')
16+
readonly hbClassHero = true;
17+
18+
}

‎apps/www/src/app/components/hero/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './hero.component';

‎apps/www/src/app/components/icon/icon-sprite-path.pipe.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Pipe, PipeTransform} from "@angular/core";
2+
3+
@Pipe({
4+
name: 'iconSpritePath',
5+
pure: true,
6+
standalone: true,
7+
})
8+
export class IconSpritePathPipe implements PipeTransform {
9+
10+
transform(value: string): string {
11+
return `/assets/core-ui/free.svg#cil-${value}`;
12+
}
13+
14+
}

‎apps/www/src/app/components/icon/icon.component.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
:host(.icon) {
2+
--_icon-color: inherit;
3+
display: flex;
4+
box-sizing: border-box;
5+
max-width: 100%;
6+
max-height: 100%;
7+
aspect-ratio: 1;
8+
padding: 8px;
9+
color: var(--_icon-color);
10+
overflow: hidden;
11+
}
12+
13+
.icon__svg {
14+
max-width: 100%;
15+
max-height: 100%
16+
}

‎apps/www/src/app/components/icon/icon.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<svg class="icon__svg">
2+
<use [attr.xlink:href]="name | iconSpritePath" fill="red"/>
3+
</svg>

‎apps/www/src/app/components/icon/icon.component.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {Component, HostBinding, Input} from "@angular/core";
2+
import {IconSpritePathPipe} from "./icon-sprite-path.pipe";
3+
4+
export type IconName =
5+
| 'sun'
6+
| 'sync'
7+
| 'moon'
8+
| 'menu'
9+
| 'x'
10+
11+
@Component({
12+
selector: 'app-icon',
13+
templateUrl: './icon.component.html',
14+
styleUrls: ['./icon.component.css'],
15+
standalone: true,
16+
imports: [
17+
IconSpritePathPipe
18+
]
19+
})
20+
export class IconComponent {
21+
22+
@HostBinding('class.icon')
23+
readonly hbClassIcon = true;
24+
25+
@Input() name: IconName = 'x';
26+
27+
}

‎apps/www/src/app/components/icon/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './icon.component';

‎apps/www/src/app/components/masthead/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './masthead.component';

‎apps/www/src/app/components/masthead/masthead.component.css

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
:host(.masthead) {
2+
--_masthead-links-display: none;
3+
display: block;
4+
position: sticky;
5+
top: 0;
6+
left: 0;
7+
right: 0;
8+
z-index: 100;
9+
padding-block: var(--grid-gutter);
10+
background-color: var(--color-plum-light);
11+
}
12+
13+
:host(.masthead--expanded) {
14+
--_masthead-links-display: flex;
15+
}
16+
17+
.masthead__body {
18+
display: grid;
19+
}
20+
21+
.masthead__links {
22+
list-style: none;
23+
flex-direction: column;
24+
display: var(--_masthead-links-display);
25+
gap: 16px;
26+
padding: 16px 0;
27+
align-items: center;
28+
position: absolute;
29+
left: 0;
30+
right: 0;
31+
background-color: var(--color-plum-light);
32+
top: calc(44px + var(--grid-gutter));
33+
box-shadow: 0 8px 8px -8px rgba(0 0 0 / 25%);
34+
}
35+
36+
37+
.masthead__utility {
38+
display: flex;
39+
justify-content: space-between;
40+
gap: 8px;
41+
order: -1;
42+
}
43+
44+
.masthead__link {
45+
font-family: var(--font-family);
46+
font-weight: var(--font-weight-medium);
47+
font-size: 1rem;
48+
line-height: 1.4rem;
49+
color: var(--color-white);
50+
}
51+
52+
.masthead__link:focus {
53+
outline: 2px solid transparent;
54+
outline-offset: 2px;
55+
box-shadow: 0 0 0 2px var(--color-plum-light),
56+
0 0 0 4px var(--color-white);
57+
}
58+
59+
.masthead__button {
60+
width: 44px;
61+
}
62+
63+
@media (min-width: 48em) {
64+
:host(.masthead) {
65+
--_masthead-links-display: flex;
66+
}
67+
68+
.masthead__button {
69+
display: none;
70+
}
71+
72+
.masthead__body {
73+
grid-template-columns: 1fr auto;
74+
}
75+
76+
.masthead__links {
77+
box-shadow: unset;
78+
padding: 0;
79+
gap: 16px;
80+
flex-direction: row;
81+
position: static;
82+
}
83+
84+
.masthead__utility {
85+
order: unset;
86+
}
87+
}

‎apps/www/src/app/components/masthead/masthead.component.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<app-container wide>
2+
<nav class="masthead__body">
3+
<ul class="masthead__links">
4+
<li class="masthead__links-item">
5+
<a href="#" class="masthead__link">Docs</a>
6+
</li>
7+
<li class="masthead__links-item">
8+
<a href="#" class="masthead__link">Blog</a>
9+
</li>
10+
<li class="masthead__links-item">
11+
<a href="#" class="masthead__link">Feature Request</a>
12+
</li>
13+
<li class="masthead__links-item">
14+
<a href="#" class="masthead__link">Issues</a>
15+
</li>
16+
</ul>
17+
18+
<aside class="masthead__utility">
19+
<button class="masthead__button" (click)="toggleExpanded()">
20+
<app-icon name="menu"/>
21+
</button>
22+
23+
<app-segmented-control aria-label="Set Colour Scheme">
24+
25+
<button app-segmented-control-button
26+
title="Light"
27+
name="mode"
28+
[value]="ColorMode.LIGHT"
29+
[formControl]="mode">
30+
<app-icon name="sun"/>
31+
</button>
32+
33+
<button app-segmented-control-button
34+
title="System"
35+
name="mode"
36+
[value]="ColorMode.AUTO"
37+
[formControl]="mode">
38+
<app-icon name="sync"/>
39+
</button>
40+
41+
<button app-segmented-control-button
42+
title="Dark"
43+
name="mode"
44+
[value]="ColorMode.DARK"
45+
[formControl]="mode">
46+
<app-icon name="moon"/>
47+
</button>
48+
49+
</app-segmented-control>
50+
</aside>
51+
</nav>
52+
</app-container>

0 commit comments

Comments
 (0)