docs: Create Welcome Page on Storybook #543

FurrerW · 2024-09-18T01:55:59Z

Added introductory paragraph about GIS (open to suggestions on the verbiage).
Added Sponsors section with links to their respective websites.
Added Team Member section with GitHub and LinkedIn profile links.

Closes #246

…ded Team members info, but still need social media links.

appwrite · 2024-09-18T01:56:02Z

Gridiron Survivor Application 6616ea581ef9f5521c7d

Function	ID	Status	Action
Your function has been successfully deployed.

Project name: Gridiron Survivor Application
Project ID: 6616ea581ef9f5521c7d

Function	ID	Status	Action
Update User Email	`66e9e91800219e84e954`	Ready	View Logs
Your function has been successfully deployed.

Project name: Gridiron Survivor Application
Project ID: 6616ea581ef9f5521c7d

Function	ID	Status	Action
userAuth	`6626fef885a9f630442b`	Ready	View Logs

Only deployments on the production branch are activated automatically. If you'd like to activate this deployment, navigate to your deployments. Learn more about Appwrite Function deployments.

💡 Did you know?
Appwrite has a Discord community with over 16 000 members. Come join us!

vercel · 2024-09-18T01:56:02Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
gridiron-survivor	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 5:21pm
gridiron-survivor-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 5:21pm

stories/Welcome.mdx

choir241 · 2024-09-18T12:14:30Z

stories/Welcome.mdx

+        <a href="https://appwrite.io/" target="_blank" rel="noreferrer" class="sponsor-card">
+          <Image src={appwriteLogo} />
+          <h3>Appwrite</h3>
+        </a>
+        <a href="https://blogrecorder.com/" target="_blank" rel="noreferrer" class="sponsor-card">
+          <Image src={blogRecorderLogo} />
+          <h3>Blog Recorder</h3>
+        </a>
+        <a href="https://www.frontendmentor.io/" target="_blank" rel="noreferrer" class="sponsor-card">
+          <Image src={frontendMentorLogo} />
+          <h3>Frontend Mentor</h3>
+        </a>
+        <a href="https://www.gitkraken.com/" target="_blank" rel="noreferrer" class="sponsor-card">
+          <Image src={gitkrakenLogo} />
+          <h3>GitKraken</h3>
+        </a>
+        <a href="https://usepastel.com/" target="_blank" rel="noreferrer" class="sponsor-card">
+          <Image src={pastelLogo} />
+          <h3>Pastel</h3>
+        </a>


Feels like we could automate this a bit with a map array, where we have a list of objects with the sponsor name, sponsor link, and sponsor logo and loop through those. This would also make it easier to add future sponsors.

100% agreed.

I did try to create something similar for the team member section, but was unsuccessful. I wish I wrote down what the exact error was, but @ryandotfurrer had helped me with it, so I doubt the problem was with how it was built.

That being said, I will take a look into map arrays tonight and see if I can get that built.

I ran into a handful of limitations while working on this. Not sure if it's a limitation of Storybook, the fact that it's a .mdx file, or a skill issue.

Looking at [MDX docs])https://mdxjs.com/docs/using-mdx/#how-mdx-works), storybook array of objects, you might have to import it from a JSX or TSX file. I would be open to workshoping this with you sometime though.

This is complete with my latest push.

choir241 · 2024-09-18T12:19:52Z

stories/Welcome.mdx

+          <div>
+            <h4>Alex Appleget</h4>
+            <p>Software Engineer</p>
+          </div>
+          <div>
+            <a href="https://github.com/alexappleget" target="_blank" rel="noreferrer">GitHub</a>
+            <a href="https://www.linkedin.com/in/alex-appleget/" target="_blank" rel="noreferrer">LinkedIn</a>
+          </div>
+        </div>
+        <div class="team-member flex flex-col gap-2">
+          <div>
+            <h4>Richard Choi</h4>
+            <p>DevRel Engineer</p>
+          </div>
+          <div>
+            <a href="https://github.com/choir27" target="_blank" rel="noreferrer">GitHub</a>
+            <a href="https://www.linkedin.com/in/richard-choir/" target="_blank" rel="noreferrer">LinkedIn</a>
+          </div>
+        </div>
+        <div class="team-member flex flex-col gap-2">
+          <div>
+            <h4>Ryan Furrer</h4>
+            <p>UX Engineer</p>
+          </div>
+          <div>
+            <a href="https://github.com/ryandotfurrer" target="_blank" rel="noreferrer">GitHub</a>
+            <a href="https://www.linkedin.com/in/ryanfurrer/" target="_blank" rel="noreferrer">LinkedIn</a>
+          </div>
+        </div>
+        <div class="team-member flex flex-col gap-2">
+          <div>
+            <h4>Walter Furrer</h4>
+            <p>Documentation Engineer</p>
+          </div>
+          <div>
+            <a href="https://github.com/FurrerW" target="_blank" rel="noreferrer">GitHub</a>
+            <a href="https://www.linkedin.com/in/furrerw/" target="_blank" rel="noreferrer">LinkedIn</a>
+          </div>
+        </div>
+        <div class="team-member flex flex-col gap-2">
+          <div>
+            <h4>Shashi Lo</h4>
+            <p>Engineering Manager</p>
+          </div>
+          <div>
+            <a href="https://github.com/shashilo" target="_blank" rel="noreferrer">GitHub</a>
+            <a href="https://www.linkedin.com/in/shashilo/" target="_blank" rel="noreferrer">LinkedIn</a>
+          </div>
+        </div>
+        <div class="team-member flex flex-col gap-2">
+          <div>
+            <h4>Corina Murg</h4>
+            <p>Frontend Engineer</p>
+          </div>
+          <div>
+            <a href="https://github.com/CorinaMurg" target="_blank" rel="noreferrer">GitHub</a>
+            <a href="https://www.linkedin.com/in/corinamurg/" target="_blank" rel="noreferrer">LinkedIn</a>
+          </div>
+        </div>
+        <div class="team-member flex flex-col gap-2">
+          <div>
+            <h4>Chris Nowicki</h4>
+            <p>Software Engineer</p>
+          </div>
+          <div>
+            <a href="https://github.com/chris-nowicki" target="_blank" rel="noreferrer">GitHub</a>
+            <a href="https://www.linkedin.com/in/chris-nowicki/" target="_blank" rel="noreferrer">LinkedIn</a>
+          </div>
+        </div>
+        <div class="team-member flex flex-col gap-2">
+          <div>
+            <h4>Mai Vang</h4>
+            <p>Frontend Engineer</p>
+          </div>
+          <div>
+            <a href="https://github.com/vmaineng" target="_blank" rel="noreferrer">GitHub</a>
+            <a href="https://www.linkedin.com/in/mai-vang-swe/" target="_blank" rel="noreferrer">LinkedIn</a>
+          </div>
+        </div>


feels like we could automate this a bit with a map array, where we have a list of objects with the team member name, their role, and their links. It also makes it easier to add members. Also are we presenting the members in a particular order, like in alphabetical order or by role?

Going to refer to my comment here: #543 (comment)

As far as presenting in a particular order, I went with alphabetical (last name). I am open to suggestions for the order, though.

Refer to my response to my comment

I like alphabetical, but I would be open to other suggestions.

I have this set as alphabetical, other than Shashi. Shashi will always appear first in the array.

stories/Welcome.mdx

choir241 · 2024-09-18T13:15:35Z

stories/Welcome.mdx

+      </a>
+    </header>
+    <section class="hero space-y-12">
+      <h1 class="pl-16">What is Gridiron Survivor?</h1>


How come we're not using mdx syntax?

When I finally got to put my time back into this an re-commit myself to it, I found it easier to get it built in a way that I was more familiar with. I felt that in time I could create an issue for myself to refactor using mdx syntax, but I wanted to get a "finished" product first before worrying about that.

Please feel free to rip that thought process to threads if I should have taken the time to use mdx syntax and style it with their tools instead.

While I admire the initiative to push this out as a PR to get feedback, we want to maintain consistency and syntax accuracy throughout docs and code. Please look at the MDX syntax to find out how to use it.

I have re-written everything using MDX Syntax, in addition to React components for the Sponsors and Team Members section.

I think we, as a team or Shashi + the Documentation Engineers need to discuss and decide where they want to use JSX/TSX Syntax and where they want to use MDX Syntax.

I propose using JSX/TSX with Tailwind for layout. Use MDX for content.

Thoughts?

@choir27 Discussed in discord.

https://discord.com/channels/964903664265359430/1285782346997436529/1293598332794699878

Please resolve at your earliest convenience!

stories/Welcome.mdx

choir241 · 2024-09-18T19:12:03Z

stories/Welcome.mdx

+        <a href="https://appwrite.io/" target="_blank" rel="noreferrer" class="sponsor-card">
+          <Image src={appwriteLogo} />
+          <h3>Appwrite</h3>
+        </a>
+        <a href="https://blogrecorder.com/" target="_blank" rel="noreferrer" class="sponsor-card">
+          <Image src={blogRecorderLogo} />
+          <h3>Blog Recorder</h3>
+        </a>
+        <a href="https://www.frontendmentor.io/" target="_blank" rel="noreferrer" class="sponsor-card">
+          <Image src={frontendMentorLogo} />
+          <h3>Frontend Mentor</h3>
+        </a>
+        <a href="https://www.gitkraken.com/" target="_blank" rel="noreferrer" class="sponsor-card">
+          <Image src={gitkrakenLogo} />
+          <h3>GitKraken</h3>
+        </a>
+        <a href="https://usepastel.com/" target="_blank" rel="noreferrer" class="sponsor-card">
+          <Image src={pastelLogo} />
+          <h3>Pastel</h3>
+        </a>


Looking at [MDX docs])https://mdxjs.com/docs/using-mdx/#how-mdx-works), storybook array of objects, you might have to import it from a JSX or TSX file. I would be open to workshoping this with you sometime though.

chris-nowicki

nit: wondering if we can make the headers aligned with the text below them? It is throwing me off a little bit.

this applies to all the sections. It feels weird having the header of each section indented.

…d-make

shashilo · 2024-09-26T15:12:51Z

@FurrerW great work so far! I'd reduce the logo down to just 1/3 of it's size. No need for a huge logo. Also, collapse the about and technical docs sections by default.

…ith content below them.

…d-make

FurrerW · 2024-09-30T22:54:30Z

#543 (review) @chris-nowicki Just fixed the indent issue. Should be good to go!

…on Storybook to be collapsed by default.

FurrerW · 2024-10-01T00:48:38Z

@shashilo #543 (comment)

Both requests are complete.

- Finished adding new team members to the array, including social links. - Created FC for Sponsors section. Styled it. - Confirmed fonts and all sections look good on various breakpoints. - Opted to not include photos of team members for now. - Added link to our GitHub and the GIS website. - Styled similar to our website, but not dark mode. - There is some invisible padding that I cannot find out how to get rid of in Storybook. Will require more configuration. - Added some universal styling in styles.css, but most of the styling is done via Tailwind. - Moved assets from the stories folder to the public folder, as Storybook was not able to pull from the stories folder. - I tried messing with the config files to allow us to pull from the stories folder, but was unsuccessful.

…d-make

choir241

You have failing linting builds, please look into this. I also cannot pnpm run storybook, I run into the following build error when running the command pnpm run storybook: Error: Failed to load static files, no such directory: ./public/assets/* Make sure this directory exists. This is located in your .storybook/main.ts file, please look into this and fix this.

package.json

pnpm-lock.yaml

choir241 · 2024-10-06T19:37:31Z

stories/Sponsors.tsx

+                  className="transition-transform group-hover:scale-110"
+                />
+              </div>
+              <h6 className="pt-8 pb-0 text-center">{sponsor.name}</h6>


Q: Why is this h6 and not h3, h4, or h5?

Does it need to go down incrementally? If so, I was not aware. I just wanted the sizing that h6 offered.

I am aware that siblings must be the same size or smaller if below the larger one, but I thought the rules were different if they were nested, as this h6 is nested in the Sponsors section.

This needs to be an H3

Fixed in the latest push.

stories/TeamMembers.tsx

stories/Welcome.mdx

shashilo · 2024-10-09T22:55:56Z

stories/Sponsors.tsx

+                  className="transition-transform group-hover:scale-110"
+                />
+              </div>
+              <h6 className="pt-8 pb-0 text-center">{sponsor.name}</h6>


This needs to be an H3

shashilo · 2024-10-09T23:01:17Z

stories/TeamMembers.tsx

+  const sortedTeamMembers = [...TeamMembersArray].sort((a, b) => {
+    // Put Shashi Lo first
+    if (a.name === 'Shashi Lo') return -1;
+    if (b.name === 'Shashi Lo') return 1;
+
+    // For the rest, sort by last name
+    const lastNameA = a.name.split(' ').pop() || '';
+    const lastNameB = b.name.split(' ').pop() || '';
+    return lastNameA.localeCompare(lastNameB);


Remove this functionality and keep the data static in order.

Fixed in the latest push.

shashilo · 2024-10-09T23:01:45Z

stories/TeamMembers.tsx

+  });
+
+  return (
+    <div>


No classless divs. Give this a className of team-members

Fixed in the latest push.

shashilo · 2024-10-09T23:02:24Z

stories/TeamMembers.tsx

+      <h2 className="pt-24 pb-8 text-center sm:text-left">Meet the Team</h2>
+      <div className="team-members-container m-auto grid grid-cols-1 gap-y-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {sortedTeamMembers.map((member) => (
+          <div


nit: Make this into a component. Pass the props you need into it.

Completed in the latest push.

… the TeamMember component into two componments, removed unnecessary comments, added/configured eslint, added jsdocs comments, fixed non-incremental <h> tags, correct alt spelling for GIS Logo on Welcome.mdx, fixed the storybook/static files directory issues.

…d-make

ryandotfurrer

LGTM 🚀

…d-make

chris-nowicki

LGTM 🚀

choir241 · 2024-10-14T17:09:37Z

stories/Welcome.mdx

+<Image
+  src={gridironLogo}
+  alt="Gridiron Survivor Logo"
+  className="block max-w-full m-auto py-8 justify-center"
+/>


NIT: How do you feel about linking to the Gridiron Survivor application URL upon the user clikcing on the logo?

…d-make

FurrerW added 4 commits September 15, 2024 18:40

Working on sizing, overall layout. Styling is getting there.

dd799ac

Further styling, padding, margin, re-sizing of various components. Ad…

cf22510

…ded Team members info, but still need social media links.

Added content for team members, continued refining styling.

c57cc64

"Final" changes before sending to Master Shashi for review.

8ef5249

FurrerW requested review from shashilo and mhchen as code owners September 18, 2024 01:56

choir241 requested changes Sep 18, 2024

View reviewed changes

chris-nowicki requested changes Sep 20, 2024

View reviewed changes

Merge branch 'develop' into walter/246-add-content-to-welcome-page-an…

635d54a

…d-make

vercel bot deployed to Preview – gridiron-survivor September 26, 2024 15:14 View deployment

vercel bot deployed to Preview – gridiron-survivor-storybook September 26, 2024 15:15 View deployment

Reduced GIS logo size, fixed indented headers to now align properly w…

0e0c112

…ith content below them.

vercel bot deployed to Preview – gridiron-survivor September 30, 2024 22:45 View deployment

vercel bot deployed to Preview – gridiron-survivor-storybook September 30, 2024 22:46 View deployment

Merge branch 'develop' into walter/246-add-content-to-welcome-page-an…

4e65644

…d-make

vercel bot deployed to Preview – gridiron-survivor-storybook September 30, 2024 22:52 View deployment

vercel bot deployed to Preview – gridiron-survivor September 30, 2024 22:53 View deployment

FurrerW requested a review from chris-nowicki September 30, 2024 22:53

Configured the "About" and "Technical Planning Documents" categories …

75e9283

…on Storybook to be collapsed by default.

vercel bot deployed to Preview – gridiron-survivor October 1, 2024 00:42 View deployment

vercel bot deployed to Preview – gridiron-survivor-storybook October 1, 2024 00:42 View deployment

Fixed typo for collapsedRoots

50e5f61

vercel bot deployed to Preview – gridiron-survivor-storybook October 1, 2024 00:48 View deployment

vercel bot had a problem deploying to Preview – gridiron-survivor October 6, 2024 18:48 Failure

vercel bot had a problem deploying to Preview – gridiron-survivor-storybook October 6, 2024 18:48 Failure

Merge branch 'develop' into walter/246-add-content-to-welcome-page-an…

c3348ff

…d-make

vercel bot had a problem deploying to Preview – gridiron-survivor October 6, 2024 19:43 Failure

vercel bot had a problem deploying to Preview – gridiron-survivor-storybook October 6, 2024 19:43 Failure

choir241 requested changes Oct 6, 2024

View reviewed changes

shashilo requested changes Oct 9, 2024

View reviewed changes

shashilo reviewed Oct 9, 2024

View reviewed changes

shashilo requested changes Oct 9, 2024

View reviewed changes

FurrerW requested review from choir241 and shashilo October 10, 2024 02:04

Merge branch 'develop' into walter/246-add-content-to-welcome-page-an…

dfaad28

…d-make

vercel bot deployed to Preview – gridiron-survivor-storybook October 10, 2024 02:06 View deployment

ryandotfurrer approved these changes Oct 10, 2024

View reviewed changes

vercel bot deployed to Preview – gridiron-survivor October 10, 2024 02:07 View deployment

shashilo approved these changes Oct 11, 2024

View reviewed changes

Merge branch 'develop' into walter/246-add-content-to-welcome-page-an…

9d6f2d5

…d-make

FurrerW enabled auto-merge (squash) October 11, 2024 22:26

vercel bot deployed to Preview – gridiron-survivor October 11, 2024 22:26 View deployment

vercel bot deployed to Preview – gridiron-survivor-storybook October 11, 2024 22:27 View deployment

chris-nowicki approved these changes Oct 12, 2024

View reviewed changes

choir241 approved these changes Oct 14, 2024

View reviewed changes

Merge branch 'develop' into walter/246-add-content-to-welcome-page-an…

ccc92a7

…d-make

vercel bot deployed to Preview – gridiron-survivor-storybook October 14, 2024 17:20 View deployment

vercel bot deployed to Preview – gridiron-survivor October 14, 2024 17:21 View deployment

FurrerW merged commit 068997a into develop Oct 14, 2024
5 checks passed

FurrerW deleted the walter/246-add-content-to-welcome-page-and-make branch October 14, 2024 17:21

choir241 mentioned this pull request Oct 25, 2024

Fix Storybook Welcome Page #621

Open

docs: Create Welcome Page on Storybook #543

docs: Create Welcome Page on Storybook #543

Conversation

FurrerW commented Sep 18, 2024 • edited Loading

appwrite bot commented Sep 18, 2024 • edited Loading

vercel bot commented Sep 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

choir241 Sep 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chris-nowicki left a comment • edited Loading

Choose a reason for hiding this comment

shashilo commented Sep 26, 2024

FurrerW commented Sep 30, 2024

FurrerW commented Oct 1, 2024

choir241 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryandotfurrer left a comment

Choose a reason for hiding this comment

chris-nowicki left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FurrerW commented Sep 18, 2024 •

edited

Loading

appwrite bot commented Sep 18, 2024 •

edited

Loading

vercel bot commented Sep 18, 2024 •

edited

Loading

choir241 Sep 18, 2024 •

edited

Loading

chris-nowicki left a comment •

edited

Loading