[cw|#63] begin tutorial

client/src/components/app/highlight.css

@@ -9,6 +9,8 @@ Custom BubbleGum Code Highlight Theme
   padding: 0.5em;
   background: #ffffff;
   font-size: x-large;
+  text-shadow: none;
+  line-height: 1.4em;
 }
 
 .hljs-keyword,
@@ -50,7 +52,7 @@ Custom BubbleGum Code Highlight Theme
 .hljs-quote,
 .hljs-deletion,
 .hljs-meta {
-  color: #6272a4;
+    color: #bac2db;
 }
 
 .hljs-keyword,

client/src/components/ascii/chip.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {get, map, range} from 'lodash'
+import {get} from 'lodash'
 import {Animation} from './animate'
 
 

client/src/components/ascii/floppy.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {get, map, range} from 'lodash'
+import {get} from 'lodash'
 import {Animation} from './animate'
 
 

client/src/components/ascii/phone.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {get, map, range} from 'lodash'
+import {get} from 'lodash'
 import {Animation} from './animate'
 
 

client/src/components/home/index.css

@@ -2,7 +2,7 @@
 
 a {
     text-decoration: none !important;
-    color: #444;
+    color: #66ddb7;
 }
 
 .App {

client/src/components/poets/index.css

@@ -5,7 +5,7 @@
 
 .poets-header {
     font-size: xx-large;
-    letter-spacing: 0.7em;
+    /* letter-spacing: 0.7em; */
     font-weight: 400;
     margin-top: 1em;
     margin-bottom: 1em;
@@ -15,13 +15,13 @@
     display: flex;
     flex-direction: column;
     padding: 0.5em;
-    margin-top: 1em;
-    margin-bottom: 1em;
-    border: 1px solid #fff;
+    /* margin-top: 1em; */
+    /* margin-bottom: 1em; */
+    border: 4px solid #fff;
 }
 
 .poet-row:hover {
-    border: 1px solid #444;
+    border: 4px dashed #ade1ff;
 }
 
 .poet-row-name-line {
@@ -31,7 +31,7 @@
 }
 
 .poet-row-name-item {
-    margin-left: 1em;
+    margin-left: 0.1em;
     font-weight: 500;    
 }
 

client/src/components/poets/poet.js

@@ -73,13 +73,31 @@ export class poet extends Component {
       writePoem,
       generatedPoem,
     } = this.props
+
+    const pageStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      margin: '5em 25% 5em 25%',
+    }
 
+    const headerStyle = {
+      color: '#ffb2e4',
+      fontSize: '4em',
+      textShadow: '4px 4px #affbff',
+    }
+
+    const subheaderStyle = {
+      color: '#bc75ff',
+      textShadow: '4px 4px #affbff',
+    }
+
     return (
       <div className='main'>
-        <div className='poet-container'>
+        <div className='poet-container' style={pageStyle}>
           <div className='poet-header'>
-            <div className='poet-header-name'>{poet.name}</div>
-            <div className='poet-subheader'>
+            <div className='poet-header-name' style={headerStyle}>{poet.name}</div>
+            <div className='poet-subheader' style={subheaderStyle}>
               <span className='poet-subheader-language'>{poet.language}</span>
               <span className='poet-subheader-designer-text'>
                 designed by

client/src/components/poets/poets.js

@@ -26,11 +26,24 @@ export class poets extends Component {
     const {
       poets,
     } = this.props
+
+    const pageStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      margin: '2em 25% 5em 25%',
+    }
+
+    const headerStyle = {
+      color: '#ffb2e4',
+      fontSize: '4em',
+      textShadow: '4px 4px #affbff',
+    }
 
     return (
       <div className='main'>
-        <div className='poets-summaries-container'>
-          <div className='poets-header'>poets</div>
+        <div className='poets-summaries-container' style={pageStyle}>
+          <div className='poets-header' style={headerStyle}>poets</div>
           {
             map(
               poets,
@@ -55,11 +68,18 @@ export class PoetRow extends Component {
       name,
       language,
     } = this.props.poet
+
+    const contentStyle = {
+      fontSize: '2.3em',
+      fontWeight: 'bold',
+      color: '#19ecff',
+      textShadow: '2px 2px #ffb2e4',
+    }
 
     return (
       <Link to={`/poet/${id}`}>
         <div className='poet-row-container'>
-          <div className='poet-row'>
+          <div className='poet-row' style={contentStyle}>
             <div className='poet-row-name-line'>
               <span className='poet-row-name-item'>{name}</span>
               <span className='poet-row-language-item'>{language}</span>

client/src/components/tutorial/index.js

@@ -1,9 +1,12 @@
 import React from 'react'
+import Highlight from 'react-highlight'
 import {Mainframe} from '../ascii/mainframe'
 import {Chip} from '../ascii/chip'
 import {Floppy} from '../ascii/floppy'
 import {Phone} from '../ascii/phone'
+import {SpeechBubble} from '../ascii/speech'
 import '../home/index.css'
+import '../app/highlight.css'
 
 
 export const Tutorial = props => {
@@ -18,14 +21,33 @@ export const Tutorial = props => {
     fontSize: '4em',
     textShadow: '4px 4px #affbff',
   }
+  const subheaderStyle = {
+    color: '#ffb2e4',
+    fontSize: '3em',
+    textShadow: '4px 4px #affbff',
+  }
   const contentStyle = {
     textAlign: 'justify',
     textJustify: 'inter-word',
-    lineHeight: '1.5em',
-    fontSize: '2.3em',
+    lineHeight: '1.3em',
+    fontSize: '2.5em',
     fontWeight: 'bold',
     color: '#19ecff',
     textShadow: '2px 2px #ffb2e4',
+    marginTop: '1em',
+    marginBottom: '3em',
+  }
+  const keywordStyle = {
+    fontStyle: 'italic',
+    color: '#75b0ff',
+  }
+  const codeStyle = {
+    fontWeight: 'normal',
+    fontSize: '0.8em',
+    backgroundColor: '#f4f4f4',
+    color: '#6272a4',
+    textShadow: 'none',
+    // wordSpacing: '2em',
   }
   const comicStyle = {
     display: 'flex',
@@ -40,15 +62,133 @@ export const Tutorial = props => {
         <div>
           <p className={'tutorial-header'} style={headerStyle}>tutorial</p>
           <div className={'tutorial-content'} style={contentStyle}>
-            <div style={comicStyle}>
-              <Mainframe size={'medium'}/>
-              <Chip/>
-              <Floppy/>
-              <Phone/>
+            <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+              <Mainframe
+                style={comicStyle}
+                glitchEnabled={false}
+                // mainStyle={{color: '#66ddb7'}}
+                mainStyle={{color:'#ff75b3', fontWeight: 'bold', textShadow: '6px 6px #19ecff'}}
+                size={'small'}/>
+              <SpeechBubble
+                speed={0.1}
+                repeat={false}
+                glitchEnabled={false}
+                style={{fontSize: '1em'}}
+                mainStyle={{color: '#19ecff', textShadow: '3px 3px #ffb2e4'}}
+                text={String.raw`making ur 0wn 
+algopoetic pa1 
+is 3asy and fun!`}/>
             </div>
           </div>
+          <div style={subheaderStyle}>intr0duction</div>
+          <div className={'tutorial-content'} style={contentStyle}>
+            {
+              // yes! it is a computer program you can write to write
+              // poetry! BRIEF NYPM INTRO (POINT TO ABOUT PAGE FOR DEETZ) there is a rich history of computer generated
+              // poetry which we will not discuss here, but plz feel
+              // free to check out some of the <a href='#resources'>resources</a> provided.
+              // <br/>
+              //   <br/>
+
+            }
+            in this tutorial, we will show how you can
+            write your own algorithmic poet which can be submitted to
+            the <em>New Yorken Poesry Magazine</em>. we assume a beginner's
+            understanding of the Python programming language, in particular
+            <ul style={{fontSize: '0.7em'}}>
+              <li>lists/dicts</li>
+              <li>functions</li>
+              <li>parsing command-line arguments</li>
+            </ul>
+            and basic familiarity with running programs from the command-line.
+
+
+          </div>
+          <div style={subheaderStyle}>what's an algorithmic poet?</div>
+          <div className={'tutorial-content'} style={contentStyle}>
+            an <em>algorithmic poet</em> is a computer program you create that
+            can <em style={keywordStyle}>write poems</em>, <em style={keywordStyle}>critique poems</em>,
+      & <em style={keywordStyle}>learn how to write better poems</em>! your program
+    should be able to read arguments from the command-line in order to perform these tasks.
+      in particular, it should handle
+      <div style={{display: 'flex', justifyContent: 'center'}}>
+      <ul style={{width: '70%'}}>
+      <li><span style={codeStyle}>--write</span> to generate and print a poem to standard out.</li>
+      <li><span style={codeStyle}>--critique "some poem"</span> to critique "some poem" and print a score between zero & one.</li>
+      <li><span style={codeStyle}>--study "another poem"</span> to read "another poem" and update itself to write better poetry.</li>
+      </ul>
+      </div>
+
+      for example, if you wrote a poet in Python called <span style={codeStyle}>poet_bot.py</span>,
+    then you can ask it to perform each task like this,
+      <Highlight className="shell">
+      {
+        String.raw`$ python poet_bot.py --write  # write a poem
+roses are red, violets are blue
+
+$ python poet_bot.py --critique "this is a bad poem" # critique a poem
+0.88
+
+$ python poet_bot.py --study "this is a poem to study"  # learn how to write better
+`
+      }
+      </Highlight>
+      <br/><br/>
+      let's start by making a new empty python file called <span style={codeStyle}>poet_bot.py</span>.
+      you can name your own file differently, but this is what we will be calling our program
+      in this tutorial.
+      <br/><br/>
+      great! since our program needs to be able to perform three distinct tasks
+    let's define three functions corresponding to each:
+
+      <Highlight className="python poet-body-code">
+      {
+        String.raw`# poet_bot.py
+
+# this function generates and prints a poem.
+def write_poem():
+    print('roses are red, violets are blue')
+
+# when given a poem, this function critiques it on
+# a scale from 0-1 and prints the score.
+def critique_poem(a_poem):
+   print(0.88)
+
+# when given a poem, this function can allow our
+# program to potentially learn new styles or approaches to
+# writing poetry.
+def learn_how_to_write_better(a_poem):
+   # for now, let's just ignore all other poetry
+   pass
+`
+      }
+    </Highlight>
+      again, there is nothing special about the names of these functions
+    and you can choose different names. ok, cool. we have a function called
+      <em style={codeStyle}>write_poem</em>
+          </div>
+          <div style={subheaderStyle}>--write</div>
+          <div className={'tutorial-content'} style={contentStyle}>
+          </div>
+          <div style={subheaderStyle}>--critique</div>
+          <div style={subheaderStyle}>--study</div>
+          <div style={subheaderStyle}>using a parameters file (optional)</div>
+          <div style={subheaderStyle}>putting it all together</div>
+          <div style={subheaderStyle}>how to submit</div>
+          <div style={subheaderStyle}>user provided tutorials</div>
+          <div id='resources' style={subheaderStyle}>some resources</div>
+          <div className={'tutorial-content'} style={contentStyle}>
+            blah
+          </div>
         </div>
       </div>
     </div>
   )
 }
+
+  // <div style={comicStyle}>
+  // <Mainframe size={'medium'}/>
+  // <Chip/>
+  // <Floppy/>
+  // <Phone/>
+  // </div>