Disabled for now while the site is under construction

• By published date (asc / desc/
• By title, alphabetically

Going full PWA.

When offline, consider disabling:

• subscription
• comments/reviews

• scale quantities based on servings amount
• change between metric / imperial

After #1 and #2 are done, please add a sample post on the CMS in order to test the workflow and any missing feature

• newsletter form submission
• nav links
• drawer links
• footer links
• share buttons
• search page interactions
• subscribe toast interaction
• post external links
• Post tiles
• "see more" links

• layout as per design spec
• add steps anchors

Requires #15

• building on #45
• styling caption in a way that always works with the surroundings

• if not auto-playing, show poster image as an accessible image
• overlay play button on top of poster
• use native controls when playing
• focus styles:
  • when poster is showing
  • when playing
  • when paused

Have a look at https://warfareplugins.com/

• facebook
• twitter
• pocket
• pinterest
• whatsapp
• email
• native web sharing

• to the home page
• to each blog post
• to the about page? (about claire)

Types:

• breadcrumbs
• organisation
• person
• website (excluding search)
• webpage
• article
• recipe

https://developers.google.com/search/docs/data-types/sitelinks-searchbox
https://moz.com/blog/structured-data-for-seo-2

Tools:
https://search.google.com/test/rich-results
https://search.google.com/structured-data/testing-tool

Examples:
https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fpinchofyum.com%2F
https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fpinchofyum.com%2Fsweet-potato-peanut-soup

Example: go from Recipes to Toolkits — no page animation happening

Crosby

• I like the hero image framing the screen as opposed to introducing other elements half way through (it looks clean)
• I like having the logo on one side and the menu/social buttons on the other side.
• I like how the three images sit next to each other. Would need to work out ration that compliments food photography best. I think the current size of the images is to narrow and long.
• I like how the homepage is broken down into different sections with 3 images, then one, then 2 etc. This is aligned with what we discussed on the 3-1-3-1 split.
• I like the transitions of the different sections. It makes the website look expensive.

Recipe Lite

• The one thing to mention is the display of the 3 images with the textbox. Again, need to understand what is the best ration for displaying food pictures. Also, need to understand what text to include per image e.g. name, time to cook, category/tag etc.

Cooking School

• Like the hero image but not a fan of it not reaching the end of the page
• It's not an ideal model to follow as we are focusing on minimalism. HOWEVER, I do like the videos are integrated. It's also not great that they overlay the squares over a background image but it would be nice if the squares were simpler. This website definitely needs more negative space though.

Check if the current config is still up to date after the Next.js 9.3 release.

Should wait for the with-polyfills example to be updated?

Like in marcociampini.io

• picture
• bio

Examples:

• https://css-tricks.com/using-netlify-forms-and-netlify-functions-to-build-an-email-sign-up-widget/
• https://dev.to/skatkov/jamstack-progressive-mailchimp-sign-up-form-with-netlify-13m3
• https://codegregg.com/blog/netlifyMailchimpFunction/

Mailer lite:

• https://developers.mailerlite.com/docs
• https://developers.mailerlite.com/reference

To explore:

• spam/badwords
• recaptcha (or honeypots)
• no JS
• validation (with and without JS)

Resources

• https://docs.netlify.com/forms/setup/
• https://www.netlify.com/products/forms/

Using MapBox static images:

• APIs
• Billing

Input fields:

• Google Maps link
• Lat / Lon
• Maki Icon?

• building on #46
• adding caption following typography styles

Enhances #8 and #9

• custom validation, including styles and messages

Use custom recaptcha v3 and add netlify integration

• builds on top of #47 and #48
• Enforce ratio images that are side-by-side (see design spec)
• logic to have a different layout for last item where there is an odd number of elements

• add project info
• netlify badge

1. Pick all Blog Posts with at least one tag in common
2. Sort them by the highest amount of tags in common, and then by publication date
3. Limit to a maximum of 3

https://prismic.io/
https://www.sanity.io/

• hero (tagline and image)
• blurb / subscription (optional)
• 3 featured recipes
• 1 featured stories
• 3 featured reviews
• 1 featured toolkits

• add responsive sourceset
• use webp when possible
• native lazy loading

Sanity docs
Setting Height and Width

Should follow #8

To explore:

• how to approve / cancel drafts
• spam / badwords
• robots
• show comments
• no JS
• validation (with and without JS)

Resources:

• https://css-tricks.com/jamstack-comments/
• https://jamstack-comments.netlify.com/

drafts overlaying at all levels (idea: always have an object with "drafts" and "published" and then run a recursive script?)

• decide on a layout for pictures to follow
• decide the order of pictures

• list all routes
• get all contentful docs
• link contentful data to pages

It would be good to have the option as readers like to Pin.

• subscribe (requires #8)
• logo + site links
• legal links & copywright

• Create all schemas in Sanity
  • PageHome
  • PageAbout
  • PageCategory
  • PageSearch
  • PageGallery
  • PageBlogPost
  • PageThankYou
  • SiteSettings
  • SiteMisc
  • Person
  • BlogPost
  • Catetgory
  • Tag
  • RecipeBlock
  • CaptionImageBlock
  • CaptionVideoBlock
  • MediaGalleryBlock
  • ...
• Configure Sanity Studio
  • Theming
  • Add dashboard
  • Deploy to netlify
  • Check and flag unused assets
  • Staging vs Production
  • Desk organisation: create blog post subfolders for each category
• Migrate sourcing content from Contentful to Sanity
  • Fetch Sanity data
  • Swap data script from Contentful to Sanity
  • Create index/no index pages and update SEO scripts
  • Create NavLinks data
  • Replace placeholder data when possible
  • Merge page info in Blog Posts and Categories
  • Sort categories according to site settings (in nav links, search tags...)
  • Change all pages getInitialProps
  • Swap RichText renderer with simple versions of all content blocks
  • Rewrite types (npm install @sanity/client@ts-client)

post content types:

• rich text
• media gallery
  • media object (video/image + optional caption)
• recipe block
  • ingredients list (name, quantity, unit)
  • time (minutes)
  • method

category

• category

tags

• tag

post

• meta
• slug
• category
• tags
• content blocks
• comments enabled
• featured
• "preview" content (content used to show a post "tile")

pages:

• home
• all recipes
• all stories
• all toolkits
• all reviews
• about
• single block post
• search
• photos

Misc:

• nav / footer / any misc piece of text

• Clicking on the toast scrolls the page to the subscription form
• Sets a localstorage option to avoid showing it again if the subscription goes through

• logo + nav items
• skip to content
• transparent VS solid variant
• Desktop vs Mobile variant
• Mobile drawer (dynamically loaded)
• hover / focus styles
• drawer focus management

Initial simple version:

• list of all posts
• filter by text

consider preparing multiple versions of collections, in order to minimize the size of JSON payloads for each page

e.g.:

• posts should be split by category
• the post collection pages don't need the post content, only the "preview" content
• the home page only needs the latest 4 posts for each category

• bundle optimisation
• new static data fetching methods

• initially show all blog posts
• typing in the text field filters down the results
  https://fusejs.io/

• Remove common title from site misc content
• Add "servings" label
• Add a specific title/subtitle
• update GROQ queries

• blog post excerpt
• blog post title?
• home page section title?
• ...

Anything more than just specifying the URL