KevinVR

image: node:latest

# This folder is cached between builds
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
  paths:
    - node_modules/

pages:
  script:

KevinVR

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "ListObjectsInBucket",
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [

KevinVR

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "cloudfront:CreateInvalidation",
            "Resource": "arn:aws:cloudfront:::distribution/<REPLACE_WITH_DISTRIBUTION_ID>"
        }
    ]

KevinVR

// Text.module.css
.custom-text {
  color: red;
  font-size: 20px;
}


// Text.jsx
import TextStyles from './Text.module.css';

KevinVR

import styled from 'styled-components';
import Text from './Text.jsx';

function MyComponent() {
  const BigRedText = styled(Text)`
    font-size: 40px;
    color: red;
  `;
  
  return <BigRedText>

KevinVR

function MyComponent() {
  return <div styles={{
        backgroundColor: 'red',
        fontSize: '25px'
     }}>
      ...
    </div>;
}

KevinVR

function MyComponent() {
  return <div className="container">
      ...
    </div>;
}

KevinVR

import React, { useState } from 'react';

const LightBox = ({ children, src, alt, Wrapper = 'div', zIndex = 100 }) => {
	const [isOpen, setIsOpen] = useState(false);

	const toggleIsOpen = () => {
		setIsOpen(!isOpen);
	};

	return (

KevinVR

import React, {useState} from 'react';

const LightBox = ({ children, src, alt, Wrapper = 'div' }) => {
	const [isOpen, setIsOpen] = useState(false);

	const toggleIsOpen = () => {
		setIsOpen(!isOpen);
	};

	return (

KevinVR

import React, {useState} from 'react';

const LightBox = ({ children, src, alt, Wrapper = 'div' }) => {
	const [isOpen, setIsOpen] = useState(false);

	const toggleIsOpen = () => {
		setIsOpen(!isOpen);
	};

	return (