Front-End Development
Budget: $30 – $250 USD
Need to develop a blog section for boundless-commerce.com. Blog consists of 2 pages (files):
1) /blog - page with a list of blog posts and pagination.
2) /blog/[uid] - Post's page.
Models are already designed in the Prismic as well as some basic code for blog.
Technical stack: Next.Js, TypeScript, Prismic
Valid semantic HTML markup with schema.org.
Types for data models should be specified.
Mockups are attached.
You also need to patch sitemap.xml.ts, so it contains all links to the blog posts.
Some comments for pages:
1) /blog:
- Only published posts should be displayed
- Posts should be sorted by the data['publication-date'] desc
- If there is a pagination, appropriate link rel="next/prev" href="..." / should be added to the head
- The Canonical link should be in the head link rel="canonical" href="domain/blog" /
- Should be schema.org ItemList with links to a post page (position should conider pagination), example: https://developers.google.com/search/docs/advanced/structured-data/carousel#summary
- If there is not a first page, all titles (og:title and title) should be prefixed fith: "Page N of M: Boundless commerce blog"
2) /blog/[uid]:
- H1: if data.custom-header is specified - this should be used instead of title.
- BreadCrumbs - schema.org markup
- Meta descripion: if data.meta-description is specified - use it, if not use short-description.
- Og:description: if data.og-descrption is specified - use it, if not use data.meta-description, if not use short-description.
- og:type, og:title, og:url, og:image (use appropriate size) should be also specified
- Use article markup: https://developers.google.com/search/docs/advanced/structured-data/article
- Tags is a text field, split it by comma, trim each element and output in appropriate tag.
- Author: if twitter link is specified - show "Follow at [link](target=_blank)"
Make pull request. Lint the code before delivery (yarn run lint).
1) /blog - page with a list of blog posts and pagination.
2) /blog/[uid] - Post's page.
Models are already designed in the Prismic as well as some basic code for blog.
Technical stack: Next.Js, TypeScript, Prismic
Valid semantic HTML markup with schema.org.
Types for data models should be specified.
Mockups are attached.
You also need to patch sitemap.xml.ts, so it contains all links to the blog posts.
Some comments for pages:
1) /blog:
- Only published posts should be displayed
- Posts should be sorted by the data['publication-date'] desc
- If there is a pagination, appropriate link rel="next/prev" href="..." / should be added to the head
- The Canonical link should be in the head link rel="canonical" href="domain/blog" /
- Should be schema.org ItemList with links to a post page (position should conider pagination), example: https://developers.google.com/search/docs/advanced/structured-data/carousel#summary
- If there is not a first page, all titles (og:title and title) should be prefixed fith: "Page N of M: Boundless commerce blog"
2) /blog/[uid]:
- H1: if data.custom-header is specified - this should be used instead of title.
- BreadCrumbs - schema.org markup
- Meta descripion: if data.meta-description is specified - use it, if not use short-description.
- Og:description: if data.og-descrption is specified - use it, if not use data.meta-description, if not use short-description.
- og:type, og:title, og:url, og:image (use appropriate size) should be also specified
- Use article markup: https://developers.google.com/search/docs/advanced/structured-data/article
- Tags is a text field, split it by comma, trim each element and output in appropriate tag.
- Author: if twitter link is specified - show "Follow at [link](target=_blank)"
Make pull request. Lint the code before delivery (yarn run lint).