Merge pull request #5 from luck-js/develop

v1.2.0-alpha
luck-js · Oct 27, 2019 · 32270ce · 32270ce
2 parents 5576093 + f7d4a7e
commit 32270ce
Show file tree

Hide file tree

Showing 20 changed files with 160 additions and 76 deletions.
diff --git a/components/Box.tsx b/components/Box.tsx
@@ -19,7 +19,7 @@ import {
   display,
 } from 'styled-system';
 
-export const Box = styled('div')(
+export const Box = styled('div')<any>(
   space,
   color,
   width,

diff --git a/components/Button/NavLink.tsx b/components/Button/NavLink.tsx
@@ -4,11 +4,11 @@ import styled from 'styled-components';
 import { BaseButton } from './BaseButton';
 import * as React from 'react';
 
-const NavLink = ({ modifiers, ...props }: { modifiers?: string[]; href: string }) => {
+const NavLink = ({ modifiers, href, ariaLabel, ...props }: { modifiers?: string[]; href: string, ariaLabel: string }) => {
   return (
-    <NavLink.Container>
-      <Link {...props}>
-        <NavLink.Button as={'a'} modifiers={modifiers}>
+    <NavLink.Container {...props}>
+      <Link href={href}>
+        <NavLink.Button href={href} ariaLabel={ariaLabel} as={'a'} modifiers={modifiers}>
           Blog
         </NavLink.Button>
       </Link>

diff --git a/components/Card/CardDesktop.tsx b/components/Card/CardDesktop.tsx
@@ -69,8 +69,8 @@ const CardDesktop: React.FunctionComponent<CardDesktopProps> = ({
   <Fragment>
     {cover && (
       <Container {...props}>
-          <Link href={`/blog/${slug}`}>
-            <Box>
+        <Link href={`/blog/${slug}`}>
+          <Box as="a" href={`/blog/${slug}`} aria-label={`przejdź do ${title}`}>
               <ImageContainer ratio="69%">
                 <p>{cover.url}</p>
                 <Image src={cover.url} alt="" />
@@ -81,7 +81,7 @@ const CardDesktop: React.FunctionComponent<CardDesktopProps> = ({
                     <span key={`CardDesktop-${name}-${index}`}>#{name}</span>
                   ))}
                 </Hashtags>
-                <Trafalgar tag="h3" pt={['xsmall', 'xsmall', 'xsmall', 'xsmall']}>
+                <Trafalgar tag="h2" pt={['xsmall', 'xsmall', 'xsmall', 'xsmall']}>
                   {title}
                 </Trafalgar>
               </ContentContainer>

diff --git a/components/Card/CardMobile.tsx b/components/Card/CardMobile.tsx
@@ -74,13 +74,13 @@ const CardMobile: React.FunctionComponent<CardMobileProps> = ({
       <Container {...props}>
         <InnerContainer>
           <Link href={`/blog/${slug}`}>
-            <Box>
+            <Box as="a" href={`/blog/${slug}`} aria-label={`przejdź do ${title}`}>
               <ImageContainer ratio="69%">
                 <p>{cover.url}</p>
                 <Image src={cover.url} alt="" />
               </ImageContainer>
               <ContentContainer>
-                <Trafalgar tag="h3">{title}</Trafalgar>
+                <Trafalgar tag="h2">{title}</Trafalgar>
               </ContentContainer>
             </Box>
           </Link>

diff --git a/components/GlobalStyle.tsx b/components/GlobalStyle.tsx
@@ -17,6 +17,11 @@ const GlobalStyle = createGlobalStyle`
     color: ${Theme.colors.main};
     font-family: ${Theme.fontFamilies.body} ;
   }
+  
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
 `;
 
 export default GlobalStyle;
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -7,7 +7,6 @@ import { useEffect } from 'react';
 import Fonts from '../utils/fonts';
 
 type LayoutProps = {
-  title?: string;
   backgroundColor: string;
 };
 const Container = styled(Box)`
@@ -19,7 +18,7 @@ const InnerContainer = styled('div')<{ isFontLoaded: boolean }>`
   transition: 0.5s;
 `;
 
-const Layout: React.FunctionComponent<LayoutProps> = ({ children, title, ...props }) => {
+const Layout: React.FunctionComponent<LayoutProps> = ({ children, ...props }) => {
   const [isFontLoaded, setIsFontLoaded] = useState(false);
   useEffect(() => {
     let isSubscribed = true
@@ -30,7 +29,6 @@ const Layout: React.FunctionComponent<LayoutProps> = ({ children, title, ...prop
   return (
     <Container {...props}>
       <Head>
-        <title>{title}</title>
         <meta charSet="utf-8" />
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>

diff --git a/components/Navigation.tsx b/components/Navigation.tsx
@@ -48,11 +48,20 @@ const NavigationContainer = styled(Flex)`
   `}
 `;
 
-const NavigationLogo = styled('img')`
+const NavigationLogoContainer = styled(Box)`
+  height: 100%;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
+  transition: transform 0.5s;
+  
+  &:hover {
+  transform: translateX(-50%) scale(1.11);
+  }
+`
+
+const NavigationLogo = styled('img')`
   height: 100%;
   cursor: pointer;
 `;
@@ -65,12 +74,14 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
     <NavigationHorizontalPadding>
       <NavigationContainer>
         {shouldDisplayLogo && (
-          <Link href={`/`} >
-            <NavigationLogo src="/static/logo-luck.png" />
+          <Link href="/" >
+            <NavigationLogoContainer as="a" href="/" aria-label={`przejdź do strony głownej`}>
+              <NavigationLogo src="/static/logo-luck.png" alt="Logo Luck" />
+            </NavigationLogoContainer>
           </Link>
         )}
 
-        <NavLink href="/blog" modifiers={navLinkModifiers} />
+        <NavLink href="/blog" ariaLabel="przejdź do blog postow" modifiers={navLinkModifiers} />
       </NavigationContainer>
     </NavigationHorizontalPadding>
   );

diff --git a/next-seo.config.tsx b/next-seo.config.tsx
@@ -0,0 +1,23 @@
+export const title = 'Luck - Organizacja Mikołajek nie była nigdy tak łatwa!';
+export const description =
+  'Poznaj Aplikcaje Luck, która ułatwi Ci z organizowanie mikołajek. Świetnie się na da na mikołajki klasowe, jak i zarówno te organizowane w domu rodzinnym';
+
+export default {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+    url: 'https://luck.org.pl',
+    locale: 'pl_PL',
+    images: [
+      {
+        url: 'https://luck.org.pl/static/logo-luck.png',
+        width: 488,
+        height: 488,
+        alt: 'Luck Logo',
+      },
+    ],
+    site_name: 'Aplikacja Luck',
+  },
+};
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "next": "^9.0.5",
     "next-apollo": "^3.1.4",
     "next-ga": "^2.3.4",
+    "next-seo": "^2.2.1",
     "nodemon": "^1.19.2",
     "react": "^16.9.0",
     "react-apollo": "^3.1.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import App, { Container } from 'next/app';
 import Router from "next/router";
+import { DefaultSeo } from 'next-seo';
 import { ThemeProvider } from 'styled-components';
 import GlobalStyle from '../components/GlobalStyle';
 import {Theme} from "../utils"
+import SEO from '../next-seo.config';
+
 // @ts-ignore
 import withGA from "next-ga";
 
@@ -15,6 +18,7 @@ class MyApp extends App<{analytics: any}> {
         <ThemeProvider theme={Theme}>
           <>
             <GlobalStyle />
+            <DefaultSeo {...SEO} />
             <Component {...pageProps} analytics={analytics} />
           </>
         </ThemeProvider>

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -32,6 +32,7 @@ class MyDocument extends Document {
       <Html lang="en-US">
         <Head>
           <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
         </Head>
         <body>

diff --git a/pages/blog/BlogLayout.tsx b/pages/blog/BlogLayout.tsx
@@ -3,7 +3,6 @@ import Layout from '../../components/Layout';
 import { Navigation } from '../../components';
 
 type LayoutProps = {
-  title?: string;
   backgroundColor: string;
 };
 

diff --git a/pages/blog/[id].tsx b/pages/blog/[id].tsx
@@ -1,15 +1,16 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 import styled from 'styled-components';
+import { NextSeo } from 'next-seo/lib';
 import RatioContainer from '../../components/RatioContainer';
-import {MediumText, Canon, Flex, TinySecond} from '../../components';
+import { MediumText, Canon, Flex, TinySecond } from '../../components';
 import BlogLayout from './BlogLayout';
 import { mapToPost } from './index';
 import { withApollo, getProcessor, Theme, Post, QueryPostsArgs, Hashtag } from '../../utils';
 import media from '../../utils/media';
 
-const ContentImage = styled("img")`
+const ContentImage = styled('img').attrs({alt: ""})`
   width: 100%;
   
   padding: ${Theme.space.small}px 0;
@@ -26,11 +27,11 @@ const ContentImage = styled("img")`
   ${media.greaterThan('desktop')`
     padding: ${Theme.space.xregular}px 0;
   `}
-`
+`;
 
 const components = {
-  "p": MediumText,
-  "img": ContentImage
+  p: MediumText,
+  img: ContentImage,
 };
 
 const processor = getProcessor(components);
@@ -84,39 +85,63 @@ const HashtagsText = styled(TinySecond)`
 
 const PostContent: React.FunctionComponent<Post> = ({
   title,
+  description,
   content,
+  createdAt,
+  updatedAt,
   cover,
   hashtags = [],
   ...props
 }) => (
-  <Fragment>
+  <>
     {cover && (
-      <Container {...props}>
-        <ImageContainer ratio={["62.5%","34%"]}>
-          <Image src={cover.url} alt="" />
-        </ImageContainer>
-        <ContentContainer>
-          <Canon pb={['small', 'small', 'regular', 'regular']}>{title}</Canon>
-          {processor.processSync(content).contents}
-          <HashtagsText pt={['small', 'small', 'regular', 'regular']}>
-            {(hashtags as Hashtag[]).map(({ name }, index) => (
-              <span key={`PostContent-${name}-${index}`}>#{name}</span>
-            ))}
-          </HashtagsText>
-        </ContentContainer>
-      </Container>
+      <>
+        <NextSeo
+          title={`Luck - ${title}`}
+          description={description}
+          openGraph={{
+            title,
+            description,
+            url: window.location.href,
+            images: [{ url: cover.url }],
+            article: {
+              publishedTime: createdAt,
+              modifiedTime: updatedAt,
+              // authors: [authors],
+              // section: category.name,
+              tags: (hashtags as Hashtag[]).map(({ name }) => name),
+            },
+          }}
+        />
+        <Container {...props}>
+          <ImageContainer ratio={['62.5%', '34%']}>
+            <Image src={cover.url} alt="" />
+          </ImageContainer>
+          <ContentContainer>
+            <Canon pb={['small', 'small', 'regular', 'regular']}>{title}</Canon>
+            {processor.processSync(content).contents}
+            <HashtagsText pt={['small', 'small', 'regular', 'regular']}>
+              {(hashtags as Hashtag[]).map(({ name }, index) => (
+                <span key={`PostContent-${name}-${index}`}>#{name}</span>
+              ))}
+            </HashtagsText>
+          </ContentContainer>
+        </Container>
+      </>
     )}
-  </Fragment>
+  </>
 );
 
 export const POST_QUERY = gql`
   query getPosts($where: JSON) {
     posts(where: $where) {
       title
-      content
       description
+      content
       slug
       isDraft
+      createdAt
+      updatedAt
       cover {
         url
       }
@@ -141,7 +166,7 @@ const Index: StatelessPage = ({ slug, cmsUrl }) => {
   if (loading) return <div>Loading</div>;
 
   return (
-    <BlogLayout title="Blog | Luck" backgroundColor={Theme.colors.main}>
+    <BlogLayout backgroundColor={Theme.colors.main}>
       {data && data.posts[0] && <PostContent {...mapToPost(data.posts[0], cmsUrl)} />}
     </BlogLayout>
   );