Merge pull request #1439 from CodingTrain/submission-updates

Showcase Language Updates

Author: shiffman

content-testing/schemas.js

@@ -124,8 +124,7 @@ const baseVideosSchema = strictObject({
       name: string().required(),
       url: string().url()
     }).required()
-  )
-    .required()
+  ).required()
 });
 
 const videosSchema = baseVideosSchema.concat(
@@ -149,6 +148,7 @@ const showcasesSchema = strictObject({
   title: string().required(),
   url: string().url().required(),
   submittedOn: dateRangeValidator.required(),
+  socialPermission: boolean().default(true),
   author: strictObject({
     name: string().required(),
     url: string().url(),

content/pages/guides/passenger-showcase-guide.md

@@ -6,7 +6,12 @@ date: '2022-05-04'
 
 ## Submission Form
 
-Thank you for sharing your work in the Passenger Showcase! There are currently two ways to submit your work: by using this form to upload your work, or to follow the instructions below to create a Pull Request for your project on GitHub!
+Thank you for sharing your work in the Passenger Showcase! The Passenger Showcase is a community collection that lives on the Coding Train website, but also is featured periodically during Coding Train live streams as well as on other Coding Train social media spaces!
+
+There are currently two ways to submit your work:
+
+1. Use the form below to share your work.
+2. Follow the instructions below to create a pull request to add your project manually.
 
 <PassengerShowcaseForm />
 
@@ -16,11 +21,11 @@ If you have questions or need any help, come board the [Coding Train Discord](ht
 
 If you choose not to use the form above, you can also submit a Pull Request on GitHub. The first step is to associate your submission with a specific video. Don't worry too much if you aren't sure, just pick wherever you think it fits best! If your work relates to multiple videos just pick one!
 
-First, you will need to [fork the repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo#forking-a-repository). On the [GitHub repo homepage](https://github.com/CodingTrain/thecodingtrain.com), click the button `Fork` in the upper-right corner. You will be prompted to the `Create a new fork` window, press `Create fork` in the bottom of the page. Now, you will have a fork of the original repo. 
+First, you will need to [fork the repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo#forking-a-repository). On the [GitHub repo homepage](https://github.com/CodingTrain/thecodingtrain.com), click the button `Fork` in the upper-right corner. You will be prompted to the `Create a new fork` window, press `Create fork` in the bottom of the page. Now, you will have a fork of the original repo.
 
 ![Fork button](./passenger-showcase/fork.png)
 
-Second, create a branch in your fork by clicking a button in the upper left-hand corner where it says `main`. 
+Second, create a branch in your fork by clicking a button in the upper left-hand corner where it says `main`.
 Type in the name of a branch (you can make this up!) and create the branch! In the example below, I'm calling it `dan-showcase-submission`.
 
 ![Branches dropdown](./passenger-showcase/branches.png)
@@ -64,7 +69,9 @@ All showcase submissions should include a thumbnail preview image! While any asp
 
 ## Submitting a Pull Request
 
-[Return to the main branch](https://github.com/CodingTrain/thecodingtrain.com/tree/main), and select "Compare & pull request" (or go to the “Pull requests” tab and create a pull request by selecting "New pull request", then "compare: main" and choosing `your-branch-name` from the dropdown)
+[Return to the main branch](https://github.com/CodingTrain/thecodingtrain.com/tree/main), and select "Compare & pull request" (or go to the “Pull requests” tab and create a pull request by selecting "New pull request", then "compare: main" and choosing `your-branch-name` from the dropdown).
+
+If you would like to opt out of having your work featured on social media, please note in the comments field of your pull request.
 
 ![Uploading thumbnail](./passenger-showcase/pullrequest1.png)
 ![Uploading thumbnail](./passenger-showcase/pullrequest2.png)

netlify/functions/submission-background.js

@@ -14,7 +14,8 @@ const crypto = require('crypto');
 //   authorInstagram: "@the.coding.train"
 //   url: "https://thecodingtrain.com/tracks",
 //   videoDir: "challenges/01-test",
-//   imageExtension: "png|jpg"
+//   imageExtension: "png|jpg",
+//   socialPermission: true
 // }
 // X-Signature: sha256=...
 
@@ -77,6 +78,10 @@ exports.handler = async function (event) {
     json.author.instagram = postInfo.authorInstagram;
   }
 
+  if ('socialPermission' in postInfo) {
+    json.socialPermission = postInfo.socialPermission;
+  }
+
   const jsonString = JSON.stringify(json, null, 2) + '\n';
   const jsonContent = Buffer.from(jsonString).toString('base64');
 

netlify/functions/submission-sync.js

@@ -14,6 +14,7 @@ const crypto = require('crypto');
 //   url: "https://thecodingtrain.com/tracks",
 //   track: "challenges",
 //   video: "01-starfield",
+//   socialPermission: true
 // }
 
 async function validateImage(imageBase64) {
@@ -89,6 +90,7 @@ exports.handler = async function (event, context) {
     authorTwitter: postInfo.authorTwitter,
     authorInstagram: postInfo.authorInstagram,
     url: postInfo.url,
+    socialPermission: postInfo.socialPermission,
     videoDir:
       postInfo.track === 'challenges'
         ? `challenges/${postInfo.video}`

src/components/PassengerShowcaseForm.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useMemo } from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
-import { object, string } from 'yup';
+import { object, string, boolean } from 'yup';
 import { useLocation } from '@reach/router';
 
 import Button from './Button';
@@ -19,6 +19,7 @@ import * as css from './PassengerShowcaseForm.module.css';
 //   url: "https://thecodingtrain.com/tracks",
 //   track: "challenges",
 //   video: "01-starfield",
+//   socialPermission: true
 // }
 
 const defaultState = {
@@ -31,7 +32,8 @@ const defaultState = {
   authorUrl: '',
   authorEmail: '',
   authorTwitter: '',
-  authorInstagram: ''
+  authorInstagram: '',
+  socialPermission: true
 };
 
 const schema = object({
@@ -44,7 +46,8 @@ const schema = object({
   authorUrl: string().label('Your website').url(),
   authorEmail: string().label('Your email'),
   authorTwitter: string().label('Twitter'),
-  authorInstagram: string().label('Instagram')
+  authorInstagram: string().label('Instagram'),
+  socialPermission: boolean().required()
 });
 
 const useVideosWithShowcase = function () {
@@ -144,6 +147,12 @@ const PassengerShowcaseForm = () => {
       );
       return;
     }
+    if (e.target.name === 'socialPermission') {
+      setState(
+        Object.assign({}, state, { [e.target.name]: e.target.value == 'true' })
+      );
+      return;
+    }
     setState(Object.assign({}, state, { [e.target.name]: e.target.value }));
   };
 
@@ -294,8 +303,8 @@ const PassengerShowcaseForm = () => {
             onChange={onChange}
           />
           <span>
-            A link to either the source code (p5.js editor, GitHub) or a video
-            (YouTube, Vimeo).
+            A link to any kind of documentation of your project (blog post,
+            p5.js editor sketch, GitHub repo, video).
           </span>
         </label>
         <label>
@@ -350,8 +359,36 @@ const PassengerShowcaseForm = () => {
             onChange={onChange}
           />
           <span>
-            <em>Optional</em>. Your email address used for the submission in the
-            Git repository.
+            <em>Optional</em>. Your email address (This is not stored, but
+            rather used to match your GitHub account and assign commits for the
+            submission.)
+          </span>
+        </label>
+        <label>Social media permission</label>
+        <label>
+          <span className={css.radioLabel}>
+            <input
+              type="radio"
+              name="socialPermission"
+              value="true"
+              checked={state.socialPermission}
+              onChange={onChange}
+            />
+            The Cafe Car: You have my permission to share this project to other
+            Coding Train social media platforms!
+          </span>
+        </label>
+        <label>
+          <span className={css.radioLabel}>
+            <input
+              type="radio"
+              name="socialPermission"
+              value="false"
+              checked={!state.socialPermission}
+              onChange={onChange}
+            />
+            By private carriage: I prefer this project to be featured on the
+            Coding Train website only.
           </span>
         </label>
         <label>
@@ -363,8 +400,9 @@ const PassengerShowcaseForm = () => {
             onChange={onChange}
           />
           <span>
-            <em>Optional</em>. We are sharing the showcase on Twitter! Please
-            leave your handle if you'd like to be tagged.
+            <em>Optional</em>. We are not currently featuring the showcase on
+            Twitter/X, but feel free to leave your handle if you’d like to be
+            tagged and credited if and when we do.
           </span>
         </label>
         <label>
@@ -376,8 +414,8 @@ const PassengerShowcaseForm = () => {
             onChange={onChange}
           />
           <span>
-            <em>Optional</em>. We are sharing the showcase on Instagram! Please
-            leave your handle if you'd like to be tagged.
+            <em>Optional</em>. We are featuring the showcase on Instagram!
+            Please leave your handle if you’d like to be tagged and credited!
           </span>
         </label>
         {error && <div className={css.error}>{error}</div>}

src/components/PassengerShowcaseForm.module.css

@@ -15,6 +15,14 @@
     max-width: 500px;
     font-size: var(--maru-small);
     line-height: 17px;
+
+    &.radio-label {
+      /* display: inline; */
+      margin-right: var(--spacing-small);
+      color: var(--black);
+      font-size: var(--maru-medium);
+      max-width: 500px;
+    }
   }
 }
 
@@ -30,6 +38,12 @@
   padding: var(--spacing-small);
 }
 
+.form input[type="radio"] {
+  display: inline;
+  margin-right: var(--spacing-small);
+  -webkit-appearance: radio;
+}
+
 .error,
 .submitted {
   max-width: 500px;