Merge pull request #1 from luck-js/develop

v1.0.0-alpha

.babelrc

@@ -1,3 +1,13 @@
 {
-  "presets": ["next/babel", "@zeit/next-typescript/babel"]
+  "presets": ["next/babel", "@zeit/next-typescript/babel"],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
+      }
+    ]
+  ]
 }

.env.develop

@@ -0,0 +1,2 @@
+APPOLO_CLIENT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkODI0OTUzYjViZmY4MjZlODNmZmU1MSIsImlzQWRtaW4iOnRydWUsImlhdCI6MTU3MTQ5Mzc2MywiZXhwIjoxNTc0MDg1NzYzfQ.4waARlkToB3Rq2JE0cEmyBmsaHfJyUwwlaK3wdrPUqE
+CLIENT_URL=http://localhost:1337

.gitignore

@@ -17,3 +17,8 @@ yarn-debug.log*
 yarn-error.log*
 
 .idea
+
+id_rsa.pub
+id_rsa
+
+schema.graphql

.graphqlconfig

@@ -0,0 +1,8 @@
+{
+  "schemaPath": "schema.graphql",
+  "extensions": {
+    "endpoints": {
+      "dev": "http://localhost:1337/graphql"
+    }
+  }
+}

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.travis.yml

@@ -0,0 +1,42 @@
+language: node_js
+node_js:
+- '10'
+env:
+  global:
+  - DEV_IMAGE_NAME=luckjs/ts-luck-ui-landing-page
+  - DEV_CONTAINER_NAME=luck-ui-landing-page_develop
+  - DEV_VIRTUAL_HOST=testdevelop.luck.org.pl
+jobs:
+  include:
+  - stage: build
+    services:
+    - docker
+    script:
+    - docker build --build-arg CLIENT_URL=$CLIENT_URL --build-arg APPOLO_CLIENT_TOKEN=$APPOLO_CLIENT_TOKEN . -t $IMAGE_NAME
+    - echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+    - docker push $IMAGE_NAME
+    env: IMAGE_NAME=$DEV_IMAGE_NAME
+  - stage: deploy
+    before_deploy:
+    - openssl aes-256-cbc -K $encrypted_83c7afdcaf7e_key -iv $encrypted_83c7afdcaf7e_iv
+      -in .travis/id_rsa.enc -out .travis/id_rsa -d
+    - eval "$(ssh-agent -s)"
+    - cp .travis/id_rsa ~/.ssh/id_rsa
+    - chmod 600 ~/.ssh/id_rsa
+    - ssh-add ~/.ssh/id_rsa
+    - chmod 700 ~/.ssh
+    - ssh-keyscan $HOST_IP > ~/.ssh/known_hosts
+    script: skip
+    env:
+    - APPOLO_CLIENT_TOKEN=$APPOLO_CLIENT_TOKEN
+    - CLIENT_URL=$CLIENT_URL
+    - IMAGE_NAME=$DEV_IMAGE_NAME
+    - CONTAINER_NAME=$DEV_CONTAINER_NAME
+    - VIRTUAL_HOST=$DEV_VIRTUAL_HOST
+    deploy:
+    - provider: script
+      skip_cleanup: true
+      script: bash .travis/deploy.sh $HOST_IP $DOCKER_PASSWORD $DOCKER_USERNAME $IMAGE_NAME
+        $CONTAINER_NAME
+      on:
+        branch: develop

.travis/deploy.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+ssh root@$HOST_IP <<EOD
+echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+docker pull $IMAGE_NAME
+docker stop $CONTAINER_NAME || true && docker rm $CONTAINER_NAME || true
+docker run -e VIRTUAL_HOST=www.$VIRTUAL_HOST,$VIRTUAL_HOST -e LETSENCRYPT_HOST=$VIRTUAL_HOST -d --name $CONTAINER_NAME $IMAGE_NAME
+if [ "$(docker ps -q -f name=nginx)" ]; then
+  docker exec nginx nginx -s reload
+fi
+EOD

Dockerfile

@@ -0,0 +1,13 @@
+FROM node:10-alpine
+WORKDIR /usr/src/luck-ui-2
+COPY package.json ./
+RUN yarn install
+COPY . .
+ARG APPOLO_CLIENT_TOKEN
+ARG CLIENT_URL
+ENV APPOLO_CLIENT_TOKEN=$APPOLO_CLIENT_TOKEN
+ENV CLIENT_URL=$CLIENT_URL
+RUN yarn run build
+ENV PORT 3000
+EXPOSE 3000
+CMD ["yarn", "start"]

codegen.yml

@@ -0,0 +1,7 @@
+overwrite: true
+schema: "http://localhost:1337/graphql"
+documents: null
+generates:
+  utils/types.tsx:
+    plugins:
+      - "typescript"

components/Box.tsx

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import {
+  space,
+  color,
+  width,
+  minHeight,
+  maxHeight,
+  minWidth,
+  maxWidth,
+  fontSize,
+  flex,
+  order,
+  alignSelf,
+  position,
+  borders,
+  borderColor,
+  textAlign,
+  zIndex,
+  display,
+} from 'styled-system';
+
+export const Box = styled('div')(
+  space,
+  color,
+  width,
+  minHeight,
+  maxHeight,
+  minWidth,
+  maxWidth,
+  fontSize,
+  flex,
+  order,
+  alignSelf,
+  display,
+  position,
+  borders,
+  borderColor,
+  textAlign,
+  zIndex,
+);
+
+Box.displayName = 'Box';

components/Button/BaseButton.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { color, fontFamily, fontSize, fontWeight, space, width } from 'styled-system';
+
+export const BaseButton = styled('button')`
+  ${color};
+  ${fontFamily};
+  ${fontSize};
+  ${fontWeight};
+  ${space};
+  ${width};
+  background: none;
+  border: none;
+`;

components/Button/Button.tsx

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+import { applyStyleModifiers } from 'styled-components-modifiers';
+import { BaseButton } from './BaseButton';
+import * as Theme from '../../utils/theme';
+
+const BUTTON_VARIANTS = {
+  black: () => css`
+    color: ${Theme.colors.black};
+    
+    &:hover {
+      text-decoration-color: ${Theme.colors.black};
+    }
+  `,
+};
+
+export const Button = styled(BaseButton)<any>`
+  font-weight: 700;
+  letter-spacing: 0;
+  cursor: pointer;
+  background-color: transparent;
+
+  color: ${Theme.colors.main};
+  text-align: center;
+  border: none;
+
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.5s;
+
+  &:hover {
+    text-decoration-color: ${Theme.colors.main};
+  }
+  ${applyStyleModifiers(BUTTON_VARIANTS)};
+`;
+
+Button.defaultProps = {
+  ...Theme.textStyles.bodyText,
+};

components/Button/NavLink.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link';
+import { Button } from './Button';
+import styled from 'styled-components';
+import { BaseButton } from './BaseButton';
+import * as React from 'react';
+
+const NavLink = ({ modifiers, ...props }: { modifiers?: string[]; href: string }) => {
+  return (
+    <NavLink.Container>
+      <Link {...props}>
+        <NavLink.Button as={'a'} modifiers={modifiers}>
+          Blog
+        </NavLink.Button>
+      </Link>
+    </NavLink.Container>
+  );
+};
+
+NavLink.Container = styled(BaseButton)``;
+NavLink.Button = styled(Button)`
+  text-transform: uppercase;
+`;
+export default NavLink;

components/Button/index.tsx

@@ -0,0 +1,3 @@
+export * from './BaseButton';
+export * from './Button';
+export * from './NavLink';

components/Card/CardDesktop.tsx

@@ -0,0 +1,95 @@
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import Link from 'next/link';
+import { TinyText, Trafalgar } from '../Typography';
+import RatioContainer from '../../components/RatioContainer';
+import { Box } from '../Box';
+import { Theme, Hashtag, Post } from '../../utils';
+
+const Container = styled(Box)`
+  position: relative;
+  cursor: pointer;
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+ 
+  h3 {
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    transition: text-decoration-color 0.5s, opacity 0.5s;
+  }
+  
+  &:hover {
+    h3 {
+      opacity: 0.8;
+      text-decoration-color: ${Theme.colors.black};
+    }
+  }
+`;
+
+const ContentContainer = styled(Box)`
+  padding: ${Theme.space.medium}px;
+`;
+
+const Image = styled('img')`
+  width: 100%;
+  height: auto;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+const ImageContainer = styled(RatioContainer)`
+  position: relative;
+`;
+
+const Hashtags = styled(TinyText)`
+  span {
+    text-transform: uppercase;
+
+    &:not(:first-of-type) {
+      padding-left: ${Theme.space.medium}px;
+    }
+  }
+`;
+
+
+export interface CardDesktopProps extends Post {
+  display: any;
+}
+
+const CardDesktop: React.FunctionComponent<CardDesktopProps> = ({
+  title,
+  description,
+  slug,
+  cover,
+  hashtags = [],
+  ...props
+}) => (
+  <Fragment>
+    {cover && (
+      <Container {...props}>
+          <Link href={`/blog/${slug}`}>
+            <Box>
+              <ImageContainer ratio="69%">
+                <p>{cover.url}</p>
+                <Image src={cover.url} alt="" />
+              </ImageContainer>
+              <ContentContainer>
+                <Hashtags>
+                  {(hashtags as Hashtag[]).map(({ name }, index) => (
+                    <span key={`CardDesktop-${name}-${index}`}>#{name}</span>
+                  ))}
+                </Hashtags>
+                <Trafalgar tag="h3" pt={['xsmall', 'xsmall', 'xsmall', 'xsmall']}>
+                  {title}
+                </Trafalgar>
+              </ContentContainer>
+            </Box>
+          </Link>
+      </Container>
+    )}
+  </Fragment>
+);
+
+export default CardDesktop;