add about section for template 1 and 8

app/client/src/app/pages/Error404.js

@@ -56,7 +56,7 @@ const ComicImage = styled.img`
 
 const ComicCite = styled.cite`
   margin: 1.5em 0;
-  font-size: .85em;
+  font-size: 0.85em;
   font-style: normal;
 `
 
@@ -66,7 +66,8 @@ const ButtonContainer = styled.div`
 `
 
 const Button = PrimaryButton.extend`
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;

app/client/src/common/components/index.js

@@ -11,4 +11,14 @@ import ScrollToTop from './ScrollToTop'
 import Loader, { Bars } from './Loader'
 import Logo from './Logo'
 
-export { Button, PrimaryButton, RoundButton, Divider, Icon, ScrollToTop, Loader, Logo, Bars }
+export {
+  Button,
+  PrimaryButton,
+  RoundButton,
+  Divider,
+  Icon,
+  ScrollToTop,
+  Loader,
+  Logo,
+  Bars
+}

app/client/src/common/types.js

@@ -5,6 +5,7 @@
 type Section =
   | 'templates'
   | 'profile'
+  | 'about'
   | 'education'
   | 'work'
   | 'skills'

app/client/src/features/form/components/Form.js

@@ -10,6 +10,7 @@ import styled from 'styled-components'
 import {
   Templates,
   Profile,
+  About,
   Education,
   Work,
   Skills,
@@ -103,6 +104,7 @@ class Form extends Component<Props> {
             />
             <Route exact path="/generator/templates" component={Templates} />
             <Route exact path="/generator/profile" component={Profile} />
+            <Route exact path="/generator/about" component={About} />
             <Route exact path="/generator/education" component={Education} />
             <Route exact path="/generator/work" component={Work} />
             <Route exact path="/generator/skills" component={Skills} />

app/client/src/features/form/components/index.js

@@ -5,6 +5,7 @@
 import Form from './Form'
 import Templates from './sections/Templates'
 import Profile from './sections/Profile'
+import About from './sections/About'
 import Education from './sections/Education'
 import Work from './sections/Work'
 import Skills from './sections/Skills'
@@ -19,6 +20,7 @@ import Award from './fragments/Award'
 export {
   Templates,
   Profile,
+  About,
   Education,
   Work,
   Skills,

app/client/src/features/form/components/sections/About.js

@@ -0,0 +1,28 @@
+/**
+ * @flow
+ */
+
+import React from 'react'
+import Section from './Section'
+import { Divider } from '../../../../common/components'
+import LabeledInput from '../fragments/LabeledInput'
+
+function About() {
+  return (
+    <Section heading="Your Personal Statement">
+      <LabeledInput
+        name="headings.about"
+        label="Section Heading"
+        placeholder="About"
+      />
+      <Divider />
+      <LabeledInput
+        name="basics.summary"
+        label="Summary"
+        placeholder="I’m a full stack web developer who can build apps from the ground up. I've worked mostly at startups so I am use to wearing many hats. I am a very product focussed developer who priotizes user feedback first and foremost. I'm generally very flexible when investigating new roles."
+      />
+    </Section>
+  )
+}
+
+export default About

app/client/src/features/progress/components/SortableList.js

@@ -80,7 +80,11 @@ const Item = styled.div`
 const SortableItem = SortableElement(({ value }) => {
   return (
     <Item>
-      <DragHandle disabled={value === 'templates' || value === 'profile'} />
+      <DragHandle
+        disabled={
+          value === 'templates' || value === 'profile' || value === 'about'
+        }
+      />
       <NavItem to={`/generator/${value}`}>{titleCase(value)}</NavItem>
     </Item>
   )
@@ -91,7 +95,9 @@ const SortableList = SortableContainer(({ items }) => {
     <List>
       {items.map((value, index) => (
         <SortableItem
-          disabled={value === 'templates' || value === 'profile'}
+          disabled={
+            value === 'templates' || value === 'profile' || value === 'about'
+          }
           key={`item-${index}`}
           index={index}
           value={value}

app/client/src/features/progress/reducer.js

@@ -13,6 +13,7 @@ const initialState = {
   sections: [
     'templates',
     'profile',
+    'about',
     'education',
     'work',
     'skills',

app/server/src/generator/templates/template1/index.js

@@ -39,6 +39,19 @@ const generator: Template1Generator = {
     `
   },
 
+  aboutSection(basics, heading) {
+    if (!basics || !basics.summary) {
+      return ''
+    }
+
+    return source`
+      %==== About ====%
+      \\header{${heading || 'About'}}
+      ${basics.summary}
+      \\vspace{2mm}
+    `
+  },
+
   educationSection(education, heading) {
     if (!education) {
       return ''
@@ -354,6 +367,11 @@ function template1(values: SanitizedValues) {
           case 'profile':
             return generator.profileSection(values.basics)
 
+          case 'about':
+            return generator.aboutSection
+              ? generator.aboutSection(values.basics, headings.about)
+              : ''
+
           case 'education':
             return generator.educationSection(
               values.education,

app/server/src/generator/templates/template8/index.js

@@ -41,6 +41,20 @@ const generator: Template8Generator = {
     `
   },
 
+  aboutSection(basics, heading) {
+    if (!basics || !basics.summary) {
+      return ''
+    }
+
+    return source`
+      \\begin{cvsection}{${heading || 'About'}}
+      \\begin{cvsubsection}{}{}{}
+      ${basics.summary}
+      \\end{cvsubsection}
+      \\end{cvsection}
+    `
+  },
+
   educationSection(education, heading) {
     if (!education) {
       return ''
@@ -285,6 +299,11 @@ function template8(values: SanitizedValues) {
       ${values.sections
         .map(section => {
           switch (section) {
+            case 'about':
+              return generator.aboutSection
+                ? generator.aboutSection(values.basics, headings.about)
+                : ''
+
             case 'education':
               return generator.educationSection(
                 values.education,

app/server/src/types.js

@@ -5,13 +5,15 @@
 type Section =
   | 'templates'
   | 'profile'
+  | 'about'
   | 'education'
   | 'work'
   | 'skills'
   | 'projects'
   | 'awards'
 
 type Headings = {
+  about?: string,
   work?: string,
   education?: string,
   skills?: string,
@@ -21,6 +23,7 @@ type Headings = {
 
 type Basics = {
   name?: string,
+  summary?: string,
   email?: string,
   phone?: string,
   website?: string,
@@ -82,6 +85,7 @@ type SanitizedValues = {
 
 type Generator = {
   profileSection: (basics?: Basics) => string,
+  aboutSection?: (basics?: Basics, heading?: string) => string,
   educationSection: (education?: Array<School>, heading?: string) => string,
   workSection: (work?: Array<Job>, heading?: string) => string,
   skillsSection: (skills?: Array<Skill>, heading?: string) => string,