smartcontractkit / blockchain-developer-hub Goto Github PK

As an user I would like to have access to a Learn page to provide me all the information that I require to learn crypto

Acceptance criteria:

• The page will use the existing banner component
• The page will allow me to scroll down to a crypto by clicking on a card
• Each individual crypoto will use the available component and load information from the JSON resource available

Update the homepage header to have the new designs.

NOTE: please keep the old component too, until the client approves the new one

Acceptance criteria:

• Develop the header using the new figma designs
• Change the wordings to be the one in figma
  

As an developer I would like to have access to a SEO base component that I can reuse on all pages to define the SEO metadata.

NOTE: You can use the next-seo package: https://www.npmjs.com/package/next-seo

Acceptance criteria:

• The application includes "default" SEO loaded in the app.js
• The Index.js includes an example to override the Default SEO

As a developer I would like to have access to a component for blockhain101 banner on the homepage.

Acceptance criteria:

• The component will have the designs shown in figma
• For MVP we just will just have 1 topic, so the cards should be flexible to accept one or two cards (no more than this)
• It is ok for the card link to be "manual" for now ( you chose the text and link) we will make it dynamically populate from the json in a later stage
  

As a DEVELOPER I would like to have access to a base button component that can be reused throughout the application.

Here is an example
https://jasonwatmore.com/post/2021/06/01/next-js-navlink-component-example-with-active-css-class

NOTE: Even if the component look like a button, it is a link as it should be one for accessibility issue. I could not find any real button on the designs

• The component and all its state will be accessible in storybook
• The button will have a different theme (as shown in the design)
• The button will act as a link between pages
• if the link passed is not a relative path, the button need to be a normal HREF (used for public link)
• The button will have the ability to have a Icon before / after

As a developer I would like to have access to pages layout to that I can easily develop my pages.

Acceptance criteria:

• Create a shared layout that include the navbar and SEO component

As a developer I would like to have access to a typography file that will help me share common styles across the application.

Acceptance criteria:

• Create a CSS file to include these settings
• Check the application and add all the used variables, or just add them from the resources shared by Den
• Go through the existing components and change all the fonts to use the correct typography

As a developer I would like to have access to a component that I can use to detailed list information

Acceptance criteria:

• The component will stretch 100% of the width and adapt with the space available
• The component will have 2 color theme (not sure if we want a prop for this that accept color or just defined color themes)
• The component will be a link and open up in a new tab
• The component will show a cursor on hover (no hover state yet, maybe we can switch between themes on hover).

The cards shown in the main lean hearo section does not stretch fully and stops before the full width of the screen as shown in the figma designs

Currently the cards do not stretch all the way to the max width of 1440px, but they stop before.

Please change the container size for the card to fit

The current Card component has some miss-alignement with the design and needs to be improved:

• Define Hover Effect (colour change, border )
• Define Hover effect on Link
• Improve margin between the different sections of the cards
• Remove the Home tutorial. That is the being covered by the tutorial card

Storybook componentes are all squshed

As a visitor of the site, I would like past events NOT to show on the page.

Acceptance criteria:

• Change the JSON to actually have FULL dates for start and end date
• Read this date in the JS and make sure we just show event that have not completed yet.

As an user of the application, I would like the SEO of the application to provide me lots of insightful information that can be used and accessed by search engine.

Note: We use the next-seo package. Check the available configuration and settings

Acceptance criteria:

• Set as many Default SEO settings as possible within the app.js

As a developer I would like to the repository to be nice and clean and not have any scaffolding leftover

Acceptance criteria:

• All example files for storybook to be removed from the repository
• Basic documentation in the readme file to explain open source contribution how to use Strybook

The content for the second page of the blockchain101 can be found here: https://docs.google.com/document/d/1BPq-kiiCTEjlk1I7Nvfz9VYIQPkNYG0-vz8hgUmpY2o/edit

As a developer I would like to have access to a card component that will be used in multiple parts and sections of my application, to share important information

NOTE: The card component does not cover the "case studies" card showed in figma

Acceptance criteria:

• The component will be accessible in storybook
• The component will accept a number of properties to be used in a different parts of the site
• Clicking the card will open in a new tab
• The card should show the "pointer" cursor when hovered

As a developer trying to develop the build page, I would like to have access to a set of JSON file that will "emulate" real life data that will be filled by the open source community.

Acceptance criteria:

• Create a JSON file for Hackaton
• Create a JSON file for Workshop
• Create a JSON file for courses
• Create a JSON for tutorials
• Create the correct structure to replicate the cards showed in the design
• Fill up the files with dummy data that we have in the designs
• The image should either be available within the Repo, or be an external resource

As an user of the website, i would like the style provided to the mdx pages to be nice and clean, so that i would keep on reading posts.

Note: I would not make ANY changes or ANY specific new component and just work with CSS> Apply a wrapper class on the MDX (if it does not exist) and work on the HTML directly on this class "eg: mdx-container h1" to apply style

Acceptance criteria:

• Improve the heading
• Improve the paragraph and heading spacing
• improve the letter spacing
• Add border-radius on images
• Create a "basic" version fo a quote block (it does not have to be pretty for the first instance

As an user i would like the blog to have a simple sidebar to help me navigate between the different headings.

Acceptance criteria:

• the sidebar will show a list of all the MAIN headings (just h2, it does not render nested heading)
• The sidebar will allow the user to "jump" on a specific heading
• Show active state when clicking on an heading
• Change the active heading when scrolling the document (and also the URL).

Note: this change MAY require you to develop a custom Heading component for MXD. Search around for other examples

As an user I would like to have access to a page that explain me why I should get into Blockhain.

Acceptance criteria:

• Use existing blog layout
• The page is going to be accessible from the site
• The page is going to follow the figma design and spacing ( not the words)
• The content of the page is going to emulate the following document: https://docs.google.com/document/d/1cFN56pX6Y0J2STZpjj0-Nra5FSCLPVINkEzlzOfX5wg/edit

The current cards shown in the "learn Card" do not have any hover effect.

figma link: https://www.figma.com/file/9eqpfWUrL3gAQ6Royvl75u/Dev-Hub?node-id=8673%3A3856

Acceptance criteria:

• Ensure the card show the correct hover effect as shown in figma
• Ensure the cursor shows the pointer

Cards can be added to your board to track the progress of issues and pull requests. You can also add note cards, like this one!

As a user I would like to have access to a Navigation Component, that will allow me to navigate through the sites.

Acceptance criteria:

• The component will be accessible in storybook
• The component will have a clickable logo that will bring me back to the homepage
• The clickable logo will be an H1 and set properly for accessibility
• The bar will show different navigation (note that there is no link for the homepage in the nav bar links).
• The bar will show an "active" state for the current page

NOTE: At this stage we are just going to make the app as flexible as possible for mobile, but we are NOT developing mobile specific style yet.

As an user i would like to have access to a banner that will help me understand what I can learn and get started with Crypto

Acceptance criteria:

• The banner will have the same look as feel as the figma designs
• The component will be accessible both from Storybook and the homepage in next
• The component will be responsive (make the tutorial wrap below the other cards )
• The Learn will show 4 random courses from the json from now
• The tutorial will show 4 random tutorial from the JSON resource for now
  

As a Developer I would like to have access to storybook to simplify the development of smaller base components.

NOTE: You can take inspiration and configuration from the started.dev next repository

Acceptance criteria:

• The project includes storybook in the dependencies
• Storybook has a script in the package.json
• Storybook can be run and loads at least a component from the applciation

As an user i would like the blog to have a simple sidebar to help me navigate between the different pages.

Acceptance criteria:

• The sidebar will show all the pages available within the specific page (blockchain101 or ship)
• The sidebar will show an active state to the active page
• The sidebar will navigate to the correct page when clicked

Note: we are NOT going to show the sidebar for MVP on mobile, but will add it back when we have time to develop mobile designs

As a developer I would like to have access to a component that shows all the course and tutorial for a given crypto. (this will be used later to create the learn page. It is not the actual page, but a section that includes individual crypto)

NOTE:

• You may be able to reuse already information made during the development of the Build Page
• We are NOT developing the "learn > Build Etherium" banner
• We are NOT developing the "courses, Tutorial" tabs
• We are NOT developing a heading link

Acceptance criteria:

• The component will accept a crypto name and logo/svg
• The Component will accept an object of tutorials and Courses
• The component will display the information in a responsive way

As a visitor of the site, I would like the site to have a banner showing me real-life case studies to incentivize me to learn blockhain

Acceptance criteria:

• The component will be accessible in storybook
• The component will follow the figma designs
• The component will have information "hardcoded" on the homepage and it will NOT read from JSON
• Add the content to the homepage

As a Develoepr I would like to make sure that my website uses the correct heading across the different pages.

• All pages need to have an H1
• No page should have missing Heading (so if there is an H3 there should also be an H2 )
• The heading should have meaning and H2 should be more important than H3 on the pages

As a developer I would like all pages to be already set so that future development will not result in conflicts.

Please create the following pages (with just heading to differentiate the pages)

Sitemap:

• / - Homepage
• /blockchain101
• /learn
• /ecosystem-map
• /build
• /ship

Acceptance criteria:

• All the above pages can be accessed on the site
• All pages will have basic SEO loaded into them

As an user of the site I would like to have ea quick link to navigate between articles when I reach the end of the page.

Acceptance criteria:

• the design will follow the figma designs
• On the first article just show the "go next" button at the end fo the page
• On the last article just show the "see previous" button
• The navigation will make use of "position" within the article intro information to define previous and next

As a developer I would like to easily import the SVG icons as components, so that I have flexibility and control over them

Acceptance criteria:

• Create a reusable component that accept the path to the SVG

As an user accessing the site, i would like to have access to a build page that shows all the Hackaton and Workshop available.

NOTE:

• We are NOT going to develop the Navbar with quick links to (hackathon, Workshop, Case Studies)
• We are NOT going to develop Case Studies
• We are NOT going to develop the "quick link" to the header (the # next to the heading)

Acceptance criteria:

• The page uses information from the available JSON (part of another ticket)
• The informations are loaded at server time
• The UI JUST displays card that have a END date that is in the future
• The UI should be responsive, and the card should shrink all the way to a single card per row
  

As a developer I would like to have access to a shared layout that will allow me to quickly develop pages that have blog like content.

Note: We are going to use MDX as part of this pages, so please load this here on the page, and just ensure the main content if threaded as a MD content.

Acceptance criteria:

• The page layout is going to be called blog
• The page layout is going to have the navbar and SEO component
• The Page is going to have the width provided in Figma (NO sidebars, they are out of scope for now)
• The page is going to load MDX and will load MD as part of the pages (we can discuss this, not sure if it will work this way)

Due to the requirement for the MD files to just include H2 and not H1 (that is defined by the title), we want to create a test that checks ALL MD files in the folder and ensure that they do not have any H1 defined

Acceptance criteria:

• The test will automatically run on all files in the data folder
• the test will fail if the MD has a "h1"
• the test will fail if the MD does NOT have at least one "h2"

The design for the Lifecycle banner on the homepage banner is changed slightly in figma, please update:

• text should be center aligned
• We should set a small max width so that the text wraps and it is easier to read (not we could actually make a reusable component now that can be used both on the homepage and in the lifecycle page as they are the same)

Acceptance criteria:

• All cards in all pages should show a "pointer" cursor when hovered
• Add cards in all pages should open up to a new page when clicked
• All cards in all pages should show an hover effect (all hovers effect are defined in figma, please go and see it)

As an user I would like to have access to a "lifeCycle" banner in the homepage.

Acceptance criteria:

• The component will be accessible in storybook
• The component will visible in the homepage next application
• Clicking the actual component will bring me to the "ecosystem map page"
• The component will follow the figma design
  

As an user of the website, I would like to have access to an Homepage that will provide me all information about the site and help me start my journey with Crypto

Acceptance Criteria:

• The homepage follow the Figma designs and includes all the component already available
• The homepage should replicate the words on this document (https://docs.google.com/document/d/1JHPaEZds-XGhvE6Cvzg3aFPFVEioqh6yH48lNlpTpPg/edit)
• If the document does not have info, use the words on Figma
• We are NOT going to develop the case studies banner
• We are going to change the background of the "Improve your skills" to be dark or darker so that we do not have two white background benner back to back

As a developer I want access to a banner for the Homepage build

Acceptance criteria:

• We can reuse the cards from the chainlink101 banner component
• The banner will have the same look and feel as provided in figma

As an user I would like to have access to an Ecosystem Map page that will help me find information (link) for the Map

Acceptance criteria:

• The Page will be developed using the figma design
• The page will be accessible and use the correct heading and semantic components
• The Page CTA will link to "https://smartcontractecosystem.com/"

Due to the project being open source, I would like PR to fail unless the following is true:

• Eslint has not error
• All unit tests pass
• Prettify pass

As a developer iw ould like to have access to an article header component that can be reused throughout the application.

Note: This component should have the bottom margin as shown in figma, but it should NOT include the bottom border. That will be applied on the page

Acceptance criteria:

• be accessible in storybook
• Be developed using Figma size and designs
• Accept date name and author information

As a developer I would like Eslint, prettier and node version to be set in the project, so that future developer will easily follow the rules.

Note: This story need to be worked on together. I will review the PR

Acceptance criteria:

• Discuss configs that you BOTH are happy with
• Define the Config files required to achieve the decision
• Add information in the Readme to inform the users of the project setup (if any)

As a developer I would like to have access to a Banner that can be used on the homepage to help people getting started

Acceptance criteria:

• The Banner is designed with the same colors and spacing provided in figma
• The banner will accept all information as properties ( it will be translated in multiple languages later)
• The banner will be responsive (hide image maybe for less than 1024 or 768 whatever works best)

As a developer trying to opensource on the project, I would like to find relevant information to help me cooperate:

• Add Information about the project structure and resources used
• Add information on how to run development environment
• Add information on how to add new pages
• Add information on how to open a PR

As a developer, I would like to have access to a basic style guide so that all developers can easily use the same colours, fonts and spacing.

Acceptance criteria:

• Define the fonts style, sizes and weight (please do not use the actual Heading elements H1, H2, but use classes)
• Define a list of reusable colours
• Define some basic reusable styles (padding, margin).

As an user I would like to have access to a page that will provide me a clean and define view of what blockchains learning resources are available.

Acceptance Criteria:

• Develop the banner to be inline with the figma designs
• Make sure the thee blockhain shown are "Etherium, solana and terra"
• Develop this page so that More crypto can be shown in one line (use flex not grid)
• Implement Dummy heading for the three currency
• Implement a "go to" feature, so that clicking on the link will "scroll" to the correct heading

NOTE: The third blockchain (Polygon) is going to be change with "Terra" https://www.google.com/search?q=terra+crypto&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiWn6eLsaL2AhWLY8AKHZ2NDiwQ_AUoAnoECAEQBA&biw=1920&bih=969&dpr=1#imgrc=IZDnh1Rpl_4EgM

As a developer, I would like to have access to a "learn page" that will provide me with important information regarding crypto

Acceptance criteria:

• Use the existing layout
• Develop the MD for the provided document

DOCUMENT TO BE PROVIDED