Skip to content

Commit

Permalink
Fixing provision scripts and adding puck to frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
@xaviemirmon
xaviemirmon committed Apr 12, 2024
1 parent 1203901 commit e7dbc68
Show file tree
Hide file tree
Showing 32 changed files with 1,032 additions and 47 deletions.
6 changes: 1 addition & 5 deletions .docksal/docksal.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,6 @@ services:
extends:
file: ${HOME}/.docksal/stacks/services.yml
service: cli
volumes:
# Keep write-heavy folders in a volumes (improves fs performance on non-Linux platforms)
# - frontend_node_modules:/var/www/frontend/node_modules
- frontend_cache:/var/www/frontend/starters/${FRONTEND_STARTER}/.next # gatsby build and preview cannot share the same .cache folder
labels:
- io.docksal.virtual-host=frontend.${VIRTUAL_HOST}
- io.docksal.virtual-port=3000
Expand All @@ -86,7 +82,7 @@ services:
- NEXT_IMAGE_DOMAIN
- NEXT_DRUPAL_HOST
- NEXT_HOST
- DRUPAL_CLIENT_SECRET
- DRUPAL_CLIENT_ID
- DRUPAL_CLIENT_SECRET
- DRUPAL_PREVIEW_SECRET
- NEXT_REVALIDATE_SECRET
Expand Down
2 changes: 2 additions & 0 deletions backend/starters/development/web/modules/custom/powerstack_api/powerstack_api.install
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ function powerstack_api_install() {
// Create new consumer.
Consumer::create([
'label' => 'Next.js Consumer',
'client_id' => 'next',
'description' => 'This is the consumer for your Power Stack site.',
'uuid' => \Drupal::service('uuid')->generate(),
'new_secret' => getenv('NEXT_CLIENT_SECRET'),
'is_default' => TRUE,
])->save();
Expand Down
119 changes: 119 additions & 0 deletions frontend/starters/development/app/blocks/Hero/Dots.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
export interface DotsProps extends React.ComponentPropsWithoutRef<'svg'> {
size?: number;
radius?: number;
}

export function Dots({ size = 185, radius = 2.5, ...others }: DotsProps) {
return (
<svg
aria-hidden
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 185 185"
width={size}
height={size}
{...others}
>
<rect width="5" height="5" rx={radius} />
<rect width="5" height="5" x="60" rx={radius} />
<rect width="5" height="5" x="120" rx={radius} />
<rect width="5" height="5" x="20" rx={radius} />
<rect width="5" height="5" x="80" rx={radius} />
<rect width="5" height="5" x="140" rx={radius} />
<rect width="5" height="5" x="40" rx={radius} />
<rect width="5" height="5" x="100" rx={radius} />
<rect width="5" height="5" x="160" rx={radius} />
<rect width="5" height="5" x="180" rx={radius} />
<rect width="5" height="5" y="20" rx={radius} />
<rect width="5" height="5" x="60" y="20" rx={radius} />
<rect width="5" height="5" x="120" y="20" rx={radius} />
<rect width="5" height="5" x="20" y="20" rx={radius} />
<rect width="5" height="5" x="80" y="20" rx={radius} />
<rect width="5" height="5" x="140" y="20" rx={radius} />
<rect width="5" height="5" x="40" y="20" rx={radius} />
<rect width="5" height="5" x="100" y="20" rx={radius} />
<rect width="5" height="5" x="160" y="20" rx={radius} />
<rect width="5" height="5" x="180" y="20" rx={radius} />
<rect width="5" height="5" y="40" rx={radius} />
<rect width="5" height="5" x="60" y="40" rx={radius} />
<rect width="5" height="5" x="120" y="40" rx={radius} />
<rect width="5" height="5" x="20" y="40" rx={radius} />
<rect width="5" height="5" x="80" y="40" rx={radius} />
<rect width="5" height="5" x="140" y="40" rx={radius} />
<rect width="5" height="5" x="40" y="40" rx={radius} />
<rect width="5" height="5" x="100" y="40" rx={radius} />
<rect width="5" height="5" x="160" y="40" rx={radius} />
<rect width="5" height="5" x="180" y="40" rx={radius} />
<rect width="5" height="5" y="60" rx={radius} />
<rect width="5" height="5" x="60" y="60" rx={radius} />
<rect width="5" height="5" x="120" y="60" rx={radius} />
<rect width="5" height="5" x="20" y="60" rx={radius} />
<rect width="5" height="5" x="80" y="60" rx={radius} />
<rect width="5" height="5" x="140" y="60" rx={radius} />
<rect width="5" height="5" x="40" y="60" rx={radius} />
<rect width="5" height="5" x="100" y="60" rx={radius} />
<rect width="5" height="5" x="160" y="60" rx={radius} />
<rect width="5" height="5" x="180" y="60" rx={radius} />
<rect width="5" height="5" y="80" rx={radius} />
<rect width="5" height="5" x="60" y="80" rx={radius} />
<rect width="5" height="5" x="120" y="80" rx={radius} />
<rect width="5" height="5" x="20" y="80" rx={radius} />
<rect width="5" height="5" x="80" y="80" rx={radius} />
<rect width="5" height="5" x="140" y="80" rx={radius} />
<rect width="5" height="5" x="40" y="80" rx={radius} />
<rect width="5" height="5" x="100" y="80" rx={radius} />
<rect width="5" height="5" x="160" y="80" rx={radius} />
<rect width="5" height="5" x="180" y="80" rx={radius} />
<rect width="5" height="5" y="100" rx={radius} />
<rect width="5" height="5" x="60" y="100" rx={radius} />
<rect width="5" height="5" x="120" y="100" rx={radius} />
<rect width="5" height="5" x="20" y="100" rx={radius} />
<rect width="5" height="5" x="80" y="100" rx={radius} />
<rect width="5" height="5" x="140" y="100" rx={radius} />
<rect width="5" height="5" x="40" y="100" rx={radius} />
<rect width="5" height="5" x="100" y="100" rx={radius} />
<rect width="5" height="5" x="160" y="100" rx={radius} />
<rect width="5" height="5" x="180" y="100" rx={radius} />
<rect width="5" height="5" y="120" rx={radius} />
<rect width="5" height="5" x="60" y="120" rx={radius} />
<rect width="5" height="5" x="120" y="120" rx={radius} />
<rect width="5" height="5" x="20" y="120" rx={radius} />
<rect width="5" height="5" x="80" y="120" rx={radius} />
<rect width="5" height="5" x="140" y="120" rx={radius} />
<rect width="5" height="5" x="40" y="120" rx={radius} />
<rect width="5" height="5" x="100" y="120" rx={radius} />
<rect width="5" height="5" x="160" y="120" rx={radius} />
<rect width="5" height="5" x="180" y="120" rx={radius} />
<rect width="5" height="5" y="140" rx={radius} />
<rect width="5" height="5" x="60" y="140" rx={radius} />
<rect width="5" height="5" x="120" y="140" rx={radius} />
<rect width="5" height="5" x="20" y="140" rx={radius} />
<rect width="5" height="5" x="80" y="140" rx={radius} />
<rect width="5" height="5" x="140" y="140" rx={radius} />
<rect width="5" height="5" x="40" y="140" rx={radius} />
<rect width="5" height="5" x="100" y="140" rx={radius} />
<rect width="5" height="5" x="160" y="140" rx={radius} />
<rect width="5" height="5" x="180" y="140" rx={radius} />
<rect width="5" height="5" y="160" rx={radius} />
<rect width="5" height="5" x="60" y="160" rx={radius} />
<rect width="5" height="5" x="120" y="160" rx={radius} />
<rect width="5" height="5" x="20" y="160" rx={radius} />
<rect width="5" height="5" x="80" y="160" rx={radius} />
<rect width="5" height="5" x="140" y="160" rx={radius} />
<rect width="5" height="5" x="40" y="160" rx={radius} />
<rect width="5" height="5" x="100" y="160" rx={radius} />
<rect width="5" height="5" x="160" y="160" rx={radius} />
<rect width="5" height="5" x="180" y="160" rx={radius} />
<rect width="5" height="5" y="180" rx={radius} />
<rect width="5" height="5" x="60" y="180" rx={radius} />
<rect width="5" height="5" x="120" y="180" rx={radius} />
<rect width="5" height="5" x="20" y="180" rx={radius} />
<rect width="5" height="5" x="80" y="180" rx={radius} />
<rect width="5" height="5" x="140" y="180" rx={radius} />
<rect width="5" height="5" x="40" y="180" rx={radius} />
<rect width="5" height="5" x="100" y="180" rx={radius} />
<rect width="5" height="5" x="160" y="180" rx={radius} />
<rect width="5" height="5" x="180" y="180" rx={radius} />
</svg>
);
}
101 changes: 101 additions & 0 deletions frontend/starters/development/app/blocks/Hero/Hero.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
.wrapper {
position: relative;
padding-top: rem(120px);
padding-bottom: rem(80px);

@media (max-width: $mantine-breakpoint-sm) {
padding-top: rem(80px);
padding-bottom: rem(60px);
}
}

.inner {
position: relative;
z-index: 1;
}

.dots {
position: absolute;
color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));

@media (max-width: $mantine-breakpoint-sm) {
display: none;
}
}

.dotsLeft {
left: 0;
top: 0;
}

.title {
text-align: center;
font-weight: 800;
font-size: rem(40px);
letter-spacing: -1px;
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
margin-bottom: var(--mantine-spacing-xs);
font-family:
Greycliff CF,
var(--mantine-font-family);

@media (max-width: $mantine-breakpoint-xs) {
font-size: rem(28px);
text-align: left;
}
}
.subtitle {
text-align: center;
font-weight: 800;
font-size: rem(32px);
letter-spacing: -1px;
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
margin-bottom: var(--mantine-spacing-xs);
font-family:
Greycliff CF,
var(--mantine-font-family);

@media (max-width: $mantine-breakpoint-xs) {
font-size: rem(24px);
text-align: left;
}
}

.highlight {
color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
}

.description {
text-align: center;

@media (max-width: $mantine-breakpoint-xs) {
text-align: left;
font-size: var(--mantine-font-size-md);
}
}

.controls {
margin-top: var(--mantine-spacing-lg);
display: flex;
justify-content: center;

@media (max-width: $mantine-breakpoint-xs) {
flex-direction: column;
}
}

.control {
&:not(:first-of-type) {
margin-left: var(--mantine-spacing-md);
}

@media (max-width: $mantine-breakpoint-xs) {
height: rem(42px);
font-size: var(--mantine-font-size-md);

&:not(:first-of-type) {
margin-top: var(--mantine-spacing-md);
margin-left: 0;
}
}
}
40 changes: 40 additions & 0 deletions frontend/starters/development/app/blocks/Hero/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { Title, Text, Button, Container } from '@mantine/core';
import { Dots } from './Dots';
import classes from './Hero.module.css';

export function HeroBlock({title, subtitle, description, buttons}) {
return (
<Container className={classes.wrapper} size={1400}>
<Dots className={classes.dots} style={{ left: 0, top: 0 }} />
<Dots className={classes.dots} style={{ left: 60, top: 0 }} />
<Dots className={classes.dots} style={{ left: 0, top: 140 }} />
<Dots className={classes.dots} style={{ right: 0, top: 60 }} />

<div className={classes.inner}>
<Title className={classes.title}>
<Text component="span" className={classes.highlight} inherit>
{title}
</Text>
</Title>
<Title className={classes.subtitle} order={2}>
{subtitle}
</Title>

<Container p={0} size={600}>
<Text size="lg" c="dimmed" className={classes.description}>
{description}
</Text>
</Container>

<div className={classes.controls}>
<Button className={classes.control} size="lg" >
Book a demo
</Button>
<Button className={classes.control} size="lg" color="gray">
Purchase a license
</Button>
</div>
</div>
</Container>
);
}
58 changes: 58 additions & 0 deletions frontend/starters/development/app/blocks/Stats/Stats.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
.root {
margin: calc(var(--mantine-spacing-xl) * 1.5) 0 ;
display: flex;
background-image: linear-gradient(
-60deg,
var(--mantine-color-blue-4) 0%,
var(--mantine-color-blue-7) 100%
);
padding: calc(var(--mantine-spacing-xl) * 1.5);
border-radius: var(--mantine-radius-md);

@media (max-width: $mantine-breakpoint-sm) {
flex-direction: column;
}
}

.title {
color: var(--mantine-color-white);
text-transform: uppercase;
font-weight: 700;
font-size: var(--mantine-font-size-sm);
}

.count {
color: var(--mantine-color-white);
font-size: rem(32px);
line-height: 1;
font-weight: 700;
margin-bottom: var(--mantine-spacing-md);
font-family:
Greycliff CF,
var(--mantine-font-family);
}

.description {
color: var(--mantine-color-blue-0);
font-size: var(--mantine-font-size-sm);
margin-top: rem(5px);
}

.stat {
flex: 1;

& + & {
padding-left: var(--mantine-spacing-xl);
margin-left: var(--mantine-spacing-xl);
border-left: rem(1px) solid var(--mantine-color-blue-3);

@media (max-width: $mantine-breakpoint-sm) {
padding-left: 0;
margin-left: 0;
border-left: 0;
padding-top: var(--mantine-spacing-xl);
margin-top: var(--mantine-spacing-xl);
border-top: rem(1px) solid var(--mantine-color-blue-3);
}
}
}
14 changes: 14 additions & 0 deletions frontend/starters/development/app/blocks/Stats/Stats.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Text, Container } from '@mantine/core';
import classes from './Stats.module.css';

export function StatsBlock({data}) {
const stats = data.map((stat) => (

<div key={stat.title} className={classes.stat}>
<Text className={classes.count}>{stat.stats}</Text>
<Text className={classes.title}>{stat.title}</Text>
<Text className={classes.description}>{stat.description}</Text>
</div>
));
return <Container size={'md'}><div className={classes.root}>{stats}</div></Container>
}
Loading

0 comments on commit e7dbc68

Please sign in to comment.