Блог на Next.js / Prismic / TypeScript

12 000 руб. за проект
04 июня 2022, 19:56 • 4 отклика • 78 просмотров
Freelansim не дает поправить разметку, в личку скину ТЗ без дефектов)

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 should be added to the
- The Canonical link should be in the head
- 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 ) should be prefixed fith: "Page N of M: Boundless commerce blog" <br/> <br/>2) /blog/[uid]: <br/> <br/>- H1: if data.custom-header is specified - this should be used instead of title. <br/> <br/>- BreadCrumbs - schema.org markup <br/> <br/>- Meta descripion: if data.meta-description is specified - use it, if not use short-description. <br/> <br/>- Og:description: if data.og-descrption is specified - use it, if not use data.meta-description, if not use short-description. <br/> <br/>- og:type, og:title, og:url, og:image (use appropriate size) should be also specified <br/> <br/>- Use article markup: https://developers.google.com/search/docs/advanced/structured-data/article <br/> <br/>- Tags is a text field, split it by comma, trim each element and output in appropriate tag. <br/> <br/>- Author: if twitter link is specified - show "Follow at [link](target=_blank)" <br/> <br/>Make pull request. Lint the code before delivery (yarn run lint). <br/>