Merge branch 'arcade-gallery' of https://github.com/claynicholson/site into pr/1312

components/arcade/showcase/cohort-card.js

@@ -3,22 +3,22 @@ import { Box, Card, Heading, Link, Text } from 'theme-ui'
 import styles from './cohort-card.module.css'
 
 
-const CohortCard = ({ id, title, desc, slack, scrapbook, playable, images, githubProf, draggable = false}) => {
+const CohortCard = ({ id, title, desc, slack, scrapbook, playable, images, githubProf, draggable = false }) => {
 
   console.log(images)
   return (
     <>
-    <a href="https://www.google.com" className={styles.linkWrapper} target="_blank" rel="noopener noreferrer">
-      <div className={styles.card}>
-          <img src={images ? (images[0].url) : ("https://img.buzzfeed.com/buzzfeed-static/static/2020-05/21/17/asset/19f3032de0de/sub-buzz-1010-1590082675-7.png")} alt="Project Image" className={styles.card_img}/>
+      <a href={`/arcade/showcase/project/${id}`} className={styles.linkWrapper} target="_blank" rel="noopener noreferrer">
+        <div className={styles.card}>
+          <img src={images ? (images[0]) : ("https://img.buzzfeed.com/buzzfeed-static/static/2020-05/21/17/asset/19f3032de0de/sub-buzz-1010-1590082675-7.png")} alt="Project Image" className={styles.card_img} />
           <h1 className={styles.card_title}>{title}</h1>
           <p className={styles.card_description}>{desc}</p>
-        
-      </div>
-    </a>
+
+        </div>
+      </a>
     </>
-    
-    
+
+
   )
 }
 

components/arcade/showcase/cohort-card.module.css

@@ -1,4 +1,4 @@
-.card{
+.card {
     flex: 1;
     break-inside: avoid;
     position: relative;
@@ -13,7 +13,7 @@
 
 }
 
-.card_img{
+.card_img {
     width: 100%;
     height: auto;
     max-height: 100%;
@@ -23,14 +23,15 @@
 
 }
 
-.card_title{
+.card_title {
+    color: #333;
     font-size: 1.5rem;
     font-weight: bold;
     margin-bottom: 0;
 
 }
 
-.card_description{
+.card_description {
     font-size: 1rem;
     color: #333;
     margin: 0;
@@ -41,9 +42,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-height: 3em;
+    margin-bottom: 10px;
 }
 
-.linkWrapper{
+.linkWrapper {
     display: block;
     text-decoration: none;
     color: inherit;

components/arcade/showcase/create-card.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import styles from './create-card.module.css'
+import img from '../../../public/arcade/plus.png'
+
+const CreateCard = ({ createCardLink }) => {
+  return (
+    <>
+    <a href={createCardLink} className={styles.linkWrapper} rel="noopener noreferrer">
+      <div className={styles.card}>
+        <img src={img}/>
+        Create a card
+      </div>
+    </a>
+    </>
+  )
+}
+
+export default CreateCard

components/arcade/showcase/create-card.module.css

@@ -0,0 +1,14 @@
+.card{
+    flex: 1;
+    break-inside: avoid;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+    overflow: hidden;
+    min-width: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    justify-content: flex-start;
+
+}

pages/api/arcade/showcase/projects/[ID].js

@@ -0,0 +1,33 @@
+import AirtablePlus from "airtable-plus";
+import { ensureAuthed } from "../login/test";
+
+export default async function handler(req, res) {
+    const { ID } = req.query
+    const user = await ensureAuthed(req)
+  if (user.error) {
+    return res.status(401).json(user)
+  }
+
+  const airtable = new AirtablePlus({
+    apiKey: process.env.AIRTABLE_API_KEY,
+    baseID: 'app4kCWulfB02bV8Q',
+    tableName: "Showcase"
+  })
+
+  const projects = await airtable.read({
+    filterByFormula: `AND({User} = '${user.fields['Name']}', {ID} = '${ID}')`
+})
+
+  const results = projects.map(p => ({
+    id: p.id,
+    title: p.fields['Name'] || '',
+    desc: p.fields['Description'] || '',
+    slackLink: p.fields['Slack Link'] || '',
+    codeLink: p.fields['Code Link'] || '',
+    slackLink: p.fields['Slack Link'] || '',
+    playLink: p.fields['Play Link'] || '',
+    images: p.fields['Screenshot'].map(i => i.url) || [],
+    githubProf: p.fields['Github Profile'] || ''
+  }))
+  return res.status(200).json({ projects: results })
+}

pages/arcade/showcase/my.js

@@ -8,12 +8,13 @@ import background from '../../../public/arcade/subtle-stripes.svg'
 import { Button, Heading, Text } from 'theme-ui'
 import SlideDown from '../../../components/slide-down'
 import styles from '../../../components/arcade/showcase/my.module.css'
+import NewCard from '../../../components/arcade/showcase/create-card'
 
 const ProjectGallery = ({ projects }) => {
-  console.log('projects', projects)
+  console.log("projects", projects);
 
   return (
-    <div className={styles.gallery}>
+    <div className={styles.feed}>
       {projects.map(project => (
         <CohortCard
           key={project.id}
@@ -28,12 +29,12 @@ const ProjectGallery = ({ projects }) => {
         />
       ))}
     </div>
-  )
-}
+  );
+};
 
-const Loading = () => <div>Loading...</div>
+const Loading = () => (<div>Loading...</div>)
 
-const ErrorMessage = () => <div>There was an error loading your projects.</div>
+const ErrorMessage = () => (<div>There was an error loading your projects.</div>)
 
 const my = () => {
   const [projects, setProjects] = useState([])
@@ -44,7 +45,7 @@ const my = () => {
     const response = await fetch('/api/arcade/showcase/projects/my', {
       method: 'GET',
       headers: {
-        Authorization: `Bearer ${token}`
+        'Authorization': `Bearer ${token}`
       }
     }).catch(e => {
       console.error(e)
@@ -64,7 +65,11 @@ const my = () => {
   return (
     <section>
       <Nav />
-      <BGImg src={background} alt="Arcade Gallery BG Img" priority />
+      <BGImg
+        src={background}
+        alt="Arcade Gallery BG Img"
+        priority
+      />
       <div className={styles.title}>
         <SlideDown duration={768}>
           <Heading
@@ -81,12 +86,22 @@ const my = () => {
               zIndex: 1
             }}
           >
-            My Ships
+
+            <Text
+              as="span"
+              sx={{
+                WebkitTextStroke: 'currentColor',
+                WebkitTextStrokeWidth: ['2px', '3px'],
+                WebkitTextFillColor: 'transparent'
+              }}
+            >
+              My Ships
+            </Text>
             <br />
             <Button
               as="a"
               variant="ctaLg"
-              href="/arcade/showcase/add"
+              href="https://apply.hackclub.com"
               target="_blank"
               rel="noopener"
             >
@@ -94,13 +109,21 @@ const my = () => {
             </Button>
           </Heading>
         </SlideDown>
-        { status === 'loading' && <Loading /> }
-        { status === 'error' && <ErrorMessage /> }
-        { status === 'success' && <ProjectGallery projects={projects} /> }
       </div>
+      {
+        status == 'loading' && <Loading />
+      }
+
+      {
+        status == 'error' && <ErrorMessage />
+      }
+
+      {
+        status == 'success' && <ProjectGallery projects={projects} />
+      }
       <Footer />
     </section>
   )
 }
 
-export default my
+export default my

pages/arcade/showcase/project/[ID]/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Page = () => {
+  return (
+    <div>Project</div>
+  )
+}
+
+export default Page