Work flow for guides to appear on the website

[ExperimentsInHonesty]

Dependency

• Waiting for a PM to get assigned to Guides (ask Bonnie or Olivia for status if necessary)
• Waiting until PMs have identified all guides that are ready (at least 5 are needed for this test)

Overview

As PMs we need guides to be easy and fast to add to the website so that we have our guides appear on the website as soon as possible.

Action Items

• Define the prototype
  • Document what did not work
• Define MVP
• Define stages post MVP
• Convert issue to epic with small issues: Add credits for photos and icons for redesigned homepage #2528
• Once the pull request associated with this issue is approved and merged
  • Please update and edit issue Create mobile version of the Guide Pages and ensure responsiveness #1515 by
    • Checking off the dependency for this issue
    • If all dependencies are checked off, please move issue Create mobile version of the Guide Pages and ensure responsiveness #1515 to the New Issue Approval column and remove the Dependency label
  • Please update and edit issue Guide Pages - Sticky Navigation Fix #3170 by
    • Checking off the dependency for this issue
    • If all dependencies are checked off, please move issue Guide Pages - Sticky Navigation Fix #3170 to the New Issue Approval column and remove the Dependency label

Resources/Instructions

Here is what we will post on the a guide issue when we assign an image to it

Here is the image that will show up when people go to hackforla.org/toolkit and see this guide
[INSERT IMAGE HERE]

Here are the details for the credits page
Name: Meetup (this needs to link to the original image location)
Used in: Toolkit
Artist: _______
Provider: _____

• Guide: How to Write a Guide
  

• Template: Guide

• How to Set Reminders in Slack v4
  

• Figma

• Sample Documentation from GitHub as Reference

• emojiterra

• Figma / Type Space Figma Youtube Video

• Tool researched by 100Automations

• Test of Markdown converter guides#10 (comment)

• Guide Pages Design System - Work flow for guides to appear on the website #1630 (comment)

[ExperimentsInHonesty]

proposed work flow
a guide gets assigned in the CoP
assignee reaches out to HfLA design team to ask for an image via a template issue on hfla github
designer posts back on the guide issue with image details
new issue on hfla github with finished guide pdf url and image details previously provided - issue is auto labeled to development

[ExperimentsInHonesty]

we need to make it so that the pdfs load in the browser window using github.

[abenipa3]

Progress: Testing markdown converter. Updating prototype so that front matter locates image path so that we can achieve the format we want for markdown file.

Blockers: Learning more about liquid so that we can achieve the format as mentioned earlier.

Availability: 8-10 hours

ETA: 8/16/21

[abenipa3]

Action Items from 8/18/21 Meeting

In addition to the checklist mentioned in #1515:

• Add the Slack Reminders Guide V4 into the prototype. (Issue for this guide also viewed here.)

Update 8/19/21

• How to Set a Reminder in Slack Guide Page Added.
• Preview here.

• Test to see how emojis work in the headings.

Update 8/19/21

This is possible by adding a "-" at the end of the `href` in the front matter. Example:

        - title: "When to Use Reminders ⏰"
          href: "#when-to-use-reminders-"

• Test to see how cropped images turn out after downloading from Google Docs. (Will the edits/crop apply to the images when we download them?)

Update 8/19/21

• After downloading the images (by downloading the Web Pages (HTML, zipped folder), images would be saved as original - any edits made (such as cropping, resizing) would not be applied.
• Alternative option is the following:
  - Select File > Publish to the Web
  - Go to the Link provided by Google Docs.
  - Save Image As all the images. (I initially downloaded the zipped Web Pages folder, which included the images folder, so I would replace all the images with the edited ones from Publish to the Web.
  - When done, will need to unpublish the document by selecting File > Publish to the Web > Under "Publish content & setting", click on Stop Publishing.

• Test to see if the indentation works design- and development-wise. (See image below for context.)

Update 8/19/21

Will meet with Design Team later today. Development-wise, yes, with the following:

      

Questions So Far (for Friday's Meeting)

• Do we want to add emojis to the section title in the navbar, too?
• Will the guides contain an overview?
• If so, how do we want to create the preview section that's viewable on the toolkit page?
• Alternatives for downloading (edited) images?

[abenipa3]

Action Items from 8/20/21 Meeting

• Create mock-ups of Guide Page before Sunday.

Update 8/22/21

Created these mockups so far.

Figma FIle

• Edit the indentation of the subsections (See JavaScript).
• Bold "When", "How" - Refer to changes made in Slack Reminders Guide V4.

[abenipa3]

Feedback from 8/22/21 Meeting

• Navbar: Team voted for navbar with bolded title:
  

• Title: No capitalization for titles (header and section titles).

Action Items from 8/22/21 Meeting

• Create a full mock-up (including subsections) of Slack Reminders Guide V4.

Update 8/23/21

Created these mockups so far.

Figma FIle

• Make a mock-up where the subsections in the navbar are not indented.

[abenipa3]

Action Items from 8/25/21 Meeting

• Consult with @hackforla/website-design: What is the hero section for our Guide Page? We want our guide pages to show that we can help readers from all over the globe through our hero section.

Update from 8/26/21: Meeting with Design Team re: What is the Header?

• Our team suggested that we either change the image or edit the current header as seen below.
  

• If anything, I created new mockups that suggests new images that may replace the current header.

• Add Credits at the end of the mock-up.
• Update Guide Page Team with Design Team's response on 8/27/21.
• Consult with the website team and cast votes, regarding subsections format on Sunday. (More details under Feedback.)

With Indentation for Subsections

Without Indentation for Subsections

Feedback from 8/25/21 Meeting

• Discussed how to format the subsections for navbar: Without Indentation vs. With Indentation.
  - Action Item for Sunday Consult with the website team and cast votes.
• Discussed if we want the overview portion of the guide to be titled "Overview" or "What is _____?"
  - Decided vote for "What is ?" - We want the guides to be open to everyone around the globe.
  - "What is?" would be clickable than having the section titled "Overview."

Mock-Ups with New Image Headers (Created on 8/26/21)

Same Header, but Zoomed In

"Document Concept Illustration" Header

"Completed Steps Illustration" Header

"Publish Article Illustration" Header

Link to New Mock-Ups

Questions for 8/27/21

• How do we want to update status for Create mobile version of the Guide Pages and ensure responsiveness #1515

Update 8/27/21

Moved issue back to the icebox. More details here #1515 (comment)

[abenipa3]

Minutes from 8/27/21

• Reviewed new mockups.
  • We agreed to include the parallelogram in our hero section; it brings out more color. Preview below this section.
  • We voted on mock-ups. Preview below. Will need to redesign.

Mock-Up Hero Section (With Parallelograms) Previews

Mock-Up Voted

Action Items

• Add credits section title to the mockups: "Guide Authors"
• Make edits to the image as follows:
  • Replace the bar graph with the map.
  • Replace first page with a how-to image.
  • See site component audit for references.
• Consult with the website team and cast votes, regarding subsections format, color vs. no-color (hero section) on Sunday.

Mock-Ups for Hero Section

Mock-Up without Color

Mock-Up with Color

[abenipa3]

Minutes for 8/29/21

• Mock-Ups for Hero Section Feedback

  • Bring more color accent to the hero section.
  • Color the chart green in the third page
  • Add yellow to the image, either to the character's pants, shoes, or box image box in the first page.
  • Add a gradient to half of the side of the hero section.

• Casted votes on Subsection formats. [Option 1] [Option 2]

  • The website team voted for Option 1. 🔥 🔥 🔥

Side-Notes

• Accordion Component Standardization #1407 Mentioned: FAQ Accordion
  • Reviewed 2FA page and on the Getting Started Page as we may want to incorporate them in our Guide Template.

Action Item

• Redesign hero image per today's feedback.

New Redesigns for Hero Image

Version 1

Version 2

Version 3

Version 4

[abenipa3]

Minutes 8/30/21

• Voted on the new hero image. More details on the next post.
• Discussed how to automatically get the navigation bar collect sections and subsections (and skip the manual process in adding the titles and hrefs to the front matter.)
  • Decided to reach out to 100automations Team.
• Discussed how the Doc to Markdown works using this example.

Action Items

• Add the indentation of the mockup (missed it previously).
• Reach out to 100automations (Carlos and Dean) in regards to their table of contents/navigation bar, and share info on how to get the navigation to follow the readers when they scroll through the pages.
• Create a mobile version of the mockup.
• Add redesigns to this issue.

[abenipa3]

Guide Page's New Hero Image

The winner is Version 1. Please click the arrows below to see the final redesigns for both Desktop and Mobile.

Mock-Up for Desktop

Mock-Up for Mobile

Mockups for both Desktop and Mobile available on Figma here.

[ExperimentsInHonesty]

@alyssabenipayo What font choices do we have on the website? I looked in the design system pages and didn't see a font specified.

We also did some testing (which you can find at the bottom of the figma page). Here is what we found. The reason for our testing is that the titles seem a bit large, and not as sophisticated as the current Google Guides.

[JessicaLucindaCheng]

@alyssabenipayo At the top of this issue, I added an action item to release dependency once this issue is merged.

[abenipa3]

@alyssabenipayo We don't have office hours nor meetings the 1st through 7th of every month because it is a planning week.

For your blocker, did you import it to _sass/main.scss?

@JessicaLucindaCheng Thanks for the reminder. Also, I imported it to _sass/main.scss and it worked. The only thing now is that the content is scattered. Fixing it now. Thank you!

Preview

[abenipa3]

Update 4/14/22

Progress: Got the layouts fixed. Just need to adjust the footer.

Blockers:
Question: Is it best practice to have different class names so scss won't alter class names of the same name from other pages of the website? For instance, I have a class name called sticky-nav for the sticky navigation which is the same name for the navigation on the about page. However, when I set the width and height of the sticky nav on the guide pages, it also changes the width and height of the sticky nav on the about page.

Availability: 8 hours

ETA: 4/16/22

[SAUMILDHANKAR]

@alyssabenipayo Thank you for sharing your update. I discussed your blocker with Jessica and adding her here for further discussion (@JessicaLucindaCheng). Since, all the scss classes are compiled in the main.scss file before being used on the website, so I think we need to explore further if having same class names is the best approach. Also, wanted to suggest that it would be a better idea if we can create a new issue for your sticky side nav problem since this issue has a lot of comments and might be difficult to follow up. Thank you.

[abenipa3]

@SAUMILDHANKAR @JessicaLucindaCheng Thanks for letting me know! I'll create a new issue this week after I finish fixing the styling as mentioned in my previous update. Thanks again.

[JessicaLucindaCheng]

@alyssabenipayo With the way the SCSS files are set up to be imported all into one main.scss file, it is best to have different names.
I'm not sure if the sticky nav for the about page is named/coded as a re-usable component; however, here is a wiki on Standardized Components and there is a section on Page-Specific Class, which may help with how classes should be named.

[abenipa3]

@JessicaLucindaCheng Noted! Thank you so much for the help and for following up with me.

[github-actions]

@alyssabenipayo

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, April 26, 2022 at 12:21 AM PST.}

[abenipa3]

Hello! I'm sorry for the late update. Here's my progress-

Progress: Working on standardizing components.
Blockers: N/A
Availability: 6 hours
ETA: Should be done with standardizing by today (5/4/22) or Friday (5/6/22) at the latest.

[abenipa3]

Progress: Finished standardizing components. Finalizing adjusting styling for sticky nav.
Blockers: N/A
Availability: 6 hours
ETA: 5/13/22 5/17/22 (I was under the weather this past weekend. Updated ETA)

Next Steps:

• Note what files were added to the HfLA repo.
• Create a new issue on the next steps regarding sticky navigation.

Preview

[SAUMILDHANKAR]

@alyssabenipayo Hope you are doing well. Just wanted to follow up on the next steps for this issue. Looks like we are almost there. Please let us know. Thank you.

[abenipa3]

@alyssabenipayo Hope you are doing well. Just wanted to follow up on the next steps for this issue. Looks like we are almost there. Please let us know. Thank you.

Hi Saumil. Thanks for following up with me. Absolutely - quick update: I finished my issue. I was going to post as soon as I create a pull request and gather my notes. (Notes include file locations related to the Guide Pages and references that would help when I create a new issue on the next steps.) Will update again tonight! Thanks again!

Image Preview

Note: Please excuse the odd navbar placements. I used an extension to snapshot the entire webpage and the navbar followed the extension as it scanned the page.

Image Preview (Snippet Version)

[abenipa3]

Progress: Pull request is under review.
Blockers: N/A
Availability: N/A
ETA: N/A