Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Research Formatted Guide Pages Parse with Markdown #1085

Closed
4 tasks done
abenipa3 opened this issue Feb 21, 2021 · 23 comments
Closed
4 tasks done

Research Formatted Guide Pages Parse with Markdown #1085

abenipa3 opened this issue Feb 21, 2021 · 23 comments
Labels
Complexity: Large Feature Missing This label means that the issue needs to be linked to a precise feature label. Research Tasks for researchers role: front end Tasks for front end developers size: missing

Comments

@abenipa3
Copy link
Member

abenipa3 commented Feb 21, 2021 •
edited
Loading

Overview

We need to research how to create formatted guide pages with Markdown so that the format could be reusable.

Action Items

Developer

  • Research if Jekyll can use Markdown files as a collection to populate unique files from a template.
  • Figure out how to use how to guide pages with sticky navigation. (Visit About Us page for reference.)
  • Create a working HTML file demo that pulls MD file.

Design

  • Once we have a feasibility plan for how to code it, consult with designers and product.

Resources/Instructions

Example of Markdown File of Role
Check the _layouts folder
https://jekyllrb.com/docs/step-by-step/04-layouts/
https://talk.jekyllrb.com/t/rendering-markdown-inside-an-html-include/4186/2
@abenipa3 abenipa3 added role: UI Research Tasks for researchers labels Feb 21, 2021
@abenipa3 abenipa3 self-assigned this Feb 21, 2021
This was referenced Feb 21, 2021
Closed
Closed
@abenipa3 abenipa3 added the time sensitive Needs to be worked on by a particular timeframe label Feb 21, 2021
@abenipa3 abenipa3 changed the title Create Format Guide Pages Parse with Markdown Research Format Guide Pages Parse with Markdown Feb 21, 2021
@abenipa3 abenipa3 mentioned this issue Feb 21, 2021
Closed
2 tasks
@abenipa3 abenipa3 changed the title Research Format Guide Pages Parse with Markdown Research Formatted Guide Pages Parse with Markdown Feb 21, 2021
@akibrhast
Copy link
Member

From @alyssabenipayo

Here's the Markdown Research for Guide Pages document. It's still a work in progress until the issue is closed. Please feel free to comment if needed. Thanks!

https://docs.google.com/document/d/1ivPbOLQh_KYmG7r6Fvx5Goojc3207gDxjTmDvT9vjQ8/edit

@abenipa3 abenipa3 added the Status: Updated No blockers and update is ready for review label Feb 28, 2021
@abenipa3
Copy link
Member Author

abenipa3 commented Feb 28, 2021 •
edited
Loading

Progress: Documented findings from research in this Google Doc and added to the Hack for LA Drive. Ready for review.
Blocks: None yet.
Availability: Unavailable this week, but I'll be back next week (Week of 3/7). If anything, I am open to schedule a meeting.
ETA: 2/28/21

Drafted a Prototype below (Tested in private repo):
image
Drafted Prototype Markdown Preview:
image

@abenipa3 abenipa3 added the role: front end Tasks for front end developers label Feb 28, 2021
@abenipa3
Copy link
Member Author

abenipa3 commented Feb 28, 2021 •
edited
Loading

2/28/21 - I approve of continuing to work on this issue. Added "Create a working HTML file demo that pulls MD file." to the description.

Availability: Unavailable this week, but I'll be back next week (Week of 3/7). If anything, I am open to schedule a meeting.

ETA: 3/13/21

@abenipa3 abenipa3 added To Update ! No update has been provided and removed Status: Updated No blockers and update is ready for review labels Mar 7, 2021
@abenipa3
Copy link
Member Author

abenipa3 commented Mar 7, 2021

Progress: N/A - As previously mentioned in the latest comment, I was unavailable last week.
Blocks: N/A - I will continue building the prototype this week.
Availability: Open
ETA: 3/13/21

@abenipa3 abenipa3 added Status: Updated No blockers and update is ready for review and removed To Update ! No update has been provided labels Mar 14, 2021
@abenipa3
Copy link
Member Author

abenipa3 commented Mar 14, 2021 •
edited
Loading

Progress: Built a working prototype as seen below. Will present during the meeting.
Blocks: Just need to revise the document of findings.
Availability: Open
ETA: 3/14/21
image

@abenipa3
Copy link
Member Author

abenipa3 commented Mar 14, 2021 •
edited
Loading

Live Preview of Prototype: https://github.com/alyssabenipayo/hello-world
Updated Document of Markdown Research: https://docs.google.com/document/d/1ivPbOLQh_KYmG7r6Fvx5Goojc3207gDxjTmDvT9vjQ8/edit#

@abenipa3
Copy link
Member Author

abenipa3 commented Mar 18, 2021 •
edited
Loading

@ExperimentsInHonesty and @daniellex0 -

Completed building the prototype. Quick Notes:

  • Jekyll automatically converts MD files into HTML.
  • We are able to create a navigation bar for guide pages.

Please see site preview here and the repo for this prototype.

I've also created a document of the Markdown/Jekyll Research and added it to the Hack for LA drive.

Here are quick previews of the prototypes:
image
image
image

@daniellex0
Copy link
Member

@alyssabenipayo Awesome! 🎉

@abenipa3
Copy link
Member Author

abenipa3 commented Mar 21, 2021 •
edited
Loading

Progress: Completed building prototype. Need to consult with Designers and Product.
Blocks: N/A
Availability: Open
ETA: 3/21/21

@abenipa3 abenipa3 added To Update ! No update has been provided Complexity: Large and removed Status: Updated No blockers and update is ready for review labels Mar 21, 2021
@abenipa3
Copy link
Member Author

abenipa3 commented Mar 21, 2021 •
edited
Loading

Feedback: Update the nav-bar so that it follows the users rather than freezes on the page.

References:
About Us
image

@abenipa3
Copy link
Member Author

abenipa3 commented Mar 28, 2021 •
edited
Loading

Progress: Able to create a sticky nav-bar. Need to clean up before it's ready.

PREVIEW

image

Blocks: Got unexpectedly busy this past week so I was not able to finish the prototype as soon as expected.

Availability: Open

ETA: 3/30/21

@abenipa3
Copy link
Member Author

@ExperimentsInHonesty @daniellex0

I have updated the prototype with a sticky nav as seen below.

Guide Page Prototype

The Live Preview and Repo are available as well. Please feel free to let me know your thoughts.

@ExperimentsInHonesty ExperimentsInHonesty removed the time sensitive Needs to be worked on by a particular timeframe label Apr 4, 2021
@abenipa3
Copy link
Member Author

abenipa3 commented Apr 10, 2021 •
edited
Loading

Progress: Fixed bugs prototype. Will consult with Design and Product during tomorrow's meeting.
Blocks: N/A
Availability: Open
ETA: 4/11/21

prototype-result

@abenipa3 abenipa3 added Status: Updated No blockers and update is ready for review and removed To Update ! No update has been provided labels Apr 10, 2021
@abenipa3
Copy link
Member Author

abenipa3 commented Apr 11, 2021 •
edited
Loading

Feedback from 4/11/21's meeting:

  • Consult with our Design Team to discuss:
    • Color for Navigation Bar Links/Design.
    • Mobile Design.

@abenipa3 abenipa3 added time sensitive Needs to be worked on by a particular timeframe To Update ! No update has been provided and removed time sensitive Needs to be worked on by a particular timeframe Status: Updated No blockers and update is ready for review labels Apr 13, 2021
@abenipa3
Copy link
Member Author

abenipa3 commented Apr 18, 2021 •
edited
Loading

Progress:

  • Consulted with Design Team.
  • Added Subheadings and Table of Contents to the Prototype's Nav-Bar.
  • Currently designing a web version of the Guide Page.

Blocks: N/A
Availability: Open
ETA: 4/24/21

@abenipa3
Copy link
Member Author

abenipa3 commented Apr 25, 2021 •
edited
Loading

Progress:

  • Updated Prototype with Table of Contents to automate the process of nav-bar populating all headings without JavaScript.
    • We also want to resolve the nav-bar arrow issue (Jumping/Skipping a section while scrolling).
Screenshot

image

  • Designed low-fidelity mockup of Guide Page. (Still a work in progress.)
Screenshot

image

Blocks:

  • Need to include an anchor so that the page scrolls to the correct place when the user hits the nav links.
    • Note: The goal is to avoid relying on JavaScript?
  • Will also need to meet with Danielle regarding the Design System.

Availability: Open

ETA: 5/1/21

New References for Table of Contents Research

Jekyll Pure Liquid Table of Contents - Thanks for the recommendation, Akib and Josh.
Jekyll Table of Contents - Wikipedia Look!
How to create a table of contents? -Jekyll

@abenipa3 abenipa3 added Status: Help Wanted Internal assistance is required to make progress status: Blockers and removed To Update ! No update has been provided Status: Help Wanted Internal assistance is required to make progress labels Apr 25, 2021
@abenipa3
Copy link
Member Author

Note: Will meet with Danielle on Tuesday at 3pm.

@abenipa3 abenipa3 added To Update ! No update has been provided and removed status: Blockers labels Apr 25, 2021
@abenipa3 abenipa3 mentioned this issue Apr 29, 2021
Closed
47 tasks
@abenipa3
Copy link
Member Author

abenipa3 commented May 2, 2021 •
edited
Loading

Progress:

  • Discussed the Design System with Danielle + Gathered ideas for guide page designs.
  • Able to include the arrow. Need to adjust it so it's inside the nav-bar box and that it highlights the sections when we scroll through the page.
Screenshot

image

Blocks:

  • Was feeling unwell this past week.

Availability: Open this week except 5/4 and 5/5.

ETA: 5/3/21

@abenipa3
Copy link
Member Author

abenipa3 commented May 5, 2021

We have a feasible version of it. We are just waiting/working on the design to implement it on the site.

@abenipa3 abenipa3 closed this as completed May 5, 2021
@abenipa3 abenipa3 removed the To Update ! No update has been provided label May 5, 2021
@abenipa3 abenipa3 mentioned this issue May 5, 2021
Open
10 tasks
@abenipa3 abenipa3 removed their assignment May 6, 2021
@abenipa3 abenipa3 mentioned this issue May 7, 2021
Closed
2 tasks
@Josiah-O Josiah-O added size: missing Feature Missing This label means that the issue needs to be linked to a precise feature label. labels Aug 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Complexity: Large Feature Missing This label means that the issue needs to be linked to a precise feature label. Research Tasks for researchers role: front end Tasks for front end developers size: missing
Projects
P: HfLA Website: Project Board
Archived in project
Milestone
No milestone
Development

No branches or pull requests
6 participants
@akibrhast @ExperimentsInHonesty @abenipa3 @daniellex0 @tarang100 @Josiah-O