►
Description
This is working session to demonstrate how to build out slippers event components in the www-gitlab-com repository. This is the Step 3 epic to build our Events CMS template.
https://gitlab.com/groups/gitlab-com/marketing/inbound-marketing/-/epics/310
A
Hello
parker
here,
I'm
here
with
laura
and
we're
just
going
to
do
a
quick
walkthrough
of
how
we're
building
our
event
template
components
for
step
three,
because
we
gotta
bust
through
these
and
get
them
out
quickly.
So
you
can
assemble
the
template.
So
I
thought
it'd
be
good
to
just
walk
through
the
process
of
what
I
did
for
the
events
card,
which
is
now
live
here.
I'm
booted
up
our
storybook
slippers
site
and
I'm
on
the
event
cta
and
in
safari,
for
some
reason,
doesn't
work
in
chrome
for
me.
A
But
if
I'm
in
safari
has
this
nice
little
code
block
down
here
at
the
bottom?
And
I
just
literally
you
copy
the
whole
thing.
It's
cool
and
this
is
a
new
branch,
but
this
is
shipped
in
master.
What
I
did
is,
I
just
paste
the
code
in
here
and
it's
already
pretty
formatted,
and
then
you
have
to
add
logic
so
that
it's
pulling
in
the
data
from
a
data
file.
A
A
So
I
just
added
a
couple
like
a
cta
block
in
the
yaml
format,
and
so
each
dash
signifies
a
different
cta
and
those
are
the
two
that
were
designated
in
our
mother
template
and
then
there's
another
version
of
the
cta
where
there's
three
up,
and
so
I
just
pulled
that
data
cut
and
pasted
it
over
into
here.
And
if
you
look
at
this
data
here
back
into
our
slippers,
it
looks
the
same.
A
B
A
B
In
the
actual
erb
file,
for
whichever
one
cta
or
cta3,
it
said,
oh
yeah,
you
haven't
commented
out
there.
All
the
below
fields
will
be
required
by
cms.
Therefore,
I
don't
need,
if
statements,
if
it's
something
that's
not
required
by
the
cms,
should
we
put
like
the
entire
thing
in
an
if
statement
or
the
fact
that
it's
in
an
if
statement
in
the
partial
already
that's
enough.
B
A
B
A
Sense,
we
already
have
an
if
statement
at
the
template
level
here
so
we're
safe.
We
we
just,
we
don't
want
it
generating
the
content
unless
it
exists.
That
logic
is
gonna,
be
iterated
on
when
we
put
the
whole
template
together,
but
down
to
the
individual
component
like
yeah.
I
would
do
always
do
the
if
here
at
the
temp,
the
the
root
template
level
and
then
further
here,
yeah
there's
no.
A
Yep,
so
I
have
my
terminal
fired
up
here.
The
part
that
I
wanted
to
top
this
off
with
is,
I
was
working
on
this
event
copy
block.
So
here's
back
in
slippers
and
it's
like.
Okay,
we
got
three
versions:
we've
got
the
minimal
copy
block,
the
heavy
copy
block
copy
block
with
image,
and
so
when
I
first
thought
I
was
like
dang,
okay
I'll
make
three
components
and
dang.
It's
gonna
be
a
lot
of
cut
and
pasting,
and
then
I
actually
thought
like.
A
Oh,
I
wonder,
what's
going
on
over
here
in
slippers,
turns
out
in
slippers.
We
have
it's
pretty
much
html,
but
there's
some.
If
statements
here,
for
if
there's
a
heading
now
we're
going
to
include
the
slippers
heading,
if
there's
body
column,
one
yeah
we'll
add
it,
and
this
all.
This
logic
has
already
been
figured
out
in
slippers
of
like
how
this
data
needs
to
be
put
in,
so
it
displays
the
correct
content,
and
so
I
just
copied
this
whole
thing
and
dropped
it
into
dub,
dub
dub.
A
And
then,
if
you
go
over
to
this,
the
stories
part
down
here
at
the
bottom
look:
we've
got
our
data,
but
it
already
works.
So
smart,
oh
my
god
right!
So
then
I
just
oh
that's
a
coffee
blog
minimum.
Oh
that's
another
copy
block!
That's
that's
heavy
oop!
Here's
a
third
one
copy
block,
heavy
guess
what
I
did
in
here
and
see
each
dash
signifies
the
new
new
copy
block.
So
there's
my
minimum
copy
block.
A
There's
my
heavy
there's
the
one
with
images
like
wow,
so
I
don't
have
to
figure
out
what
these
data,
what
it's
called
the
slightly
tricky
part
it
was
kind
of
fun.
Is
then
you
gotta
like
put
this
into
the
the
erb.
So
right,
I'm
gonna
deal
with
the
heading
because
that's
a
separate
component-
and
I
think
I'll
just
add
it
to
this
one
but
like
here
see
if,
if
there's
copy
bottom
column
one
now
it's
going
to
run
through
and
actually
build
it.
A
B
A
A
So
here
it's
like
event
copy
each
do
and
then,
as
you
loop
through
the
data
within
here,
you
just
start
with
copy
and
what
the
second
level
of
data
is.
Whereas,
if
I
was
on
like
the
main
template,
then
you
always
have
to
to
start
with
event
and
what
the
data
is
so
like
event,
header
body
or
event,
title
like
event
description.
This
will
be
used
in
the
the
title
description
seo.
A
B
And
then
to
view
it
locally,
like
I
went
to
event
slippers
slash
test
index,
I
can
see
the
site,
but
mine
looks
like
not
perfect,
like
it
seems
like
some
of
the
css.
Is
there
like
the
css?
That's
within
the
template
is
there
I
also
have
an
updated
slippers
yet
to
version
11
or
12
or
whatever
0.11
or
0.12,
yet
so
I'll
do
that
next,
but
yeah?
Is
it
normal
for
some
of
the
css
to
not
be
there
like?
I
can
share
kind
of.
B
B
You're
missing
all
the
css
yeah,
so
I
mean
like
some
of
the
colors
are
there
which
are
like
directly
on
the
components,
but
I
think,
maybe
because
I
haven't
updated,
slippers
and
done
the
yarn
install
on
on
this
branch
that
I'm
on.
Maybe
that's
it
because
I
think
the
template
was
just
merged
in
to
one
of
the
more
recent.
A
A
The
big
burly
thing
pulls
in
all
the
stuff
that
makes
our
site
work
and
then
the
spot
in
here
that's
actually
building
the
template.
If
we
go
way
down
here,
it's
this
proxy,
so
we
have
it
wrapped
in
configure
development
do
so
it's
only
going
to
run
this
code
when
we're
on
our
local
development
environment,
not
when
we
actually
build
it
for
production,
and
then
we
have
this
little
proxy
here,
and
this
is
where
we
say:
okay,
we're
going
to
call
the
data
event.
A
We
tell
where
to
get
the
data
file
and
what
template
we're
going
to
use
perfect
somewhere
in
there.
We
also
tell
them
to
use
the
slippers
file,
but
I
don't
quite
remember:
oh
wait,
wait!
No!
I
do
there's.
I'm
gonna
wrap
this
later
too
slippers
event
yeah.
So
in
template,
slippers
event.
This
is
where
we
turn
slippers
on
and
then
tell
it
what
layout
to
use
cool,
very
cool.