Road map for the app versions STAGE 1

[monacodelisa]

Angular v17 (without UI)

• create and setup the app
• add header, footer and basic layout
• implement dynamic theme switching using signals and theme service
• create and use a blog service with methods and use it to retrieve data
• add 'posts' component in the components folder and query the blog posts
• add basic styling for the post page
• add post-details component in the components folder and display matched by post slug
• add basic styling for the post details page
• add a home redirect in header wrapping the image and blog title in a and using routerLink
• query social links in header
• add and designated SVG component with custom svg files using icon service
• add an og:image and related tags for social share
• verify file structure is correct as described
• verify proper scss is used and relative measurements
• verify that models are used and the models folder contains only blog-info.ts and post.ts
• all GraphQL operations are contained in the graphql.operations.ts file
• query series in header and add routing by series slug
• add 'series' component in the components folder and query the blog posts in a series
• add basic styling for the series component
• use the post-details component to display the datils of post from series
• code snippets in post-details are styled for light and dark mode using the appropriate style file
• add a copy button for the code snippets
• add a pop-up dialog for the follow button
• query and place blog logo image (or author image if not a team blog) & site favicon
• add and implement pagination in the posts component - retrieve next 10 posts on clicking next
• add and implement pagination in the series component - retrieve next 10 posts on clicking next
• apply minimal header & sidenav in post details - no layout component, just conditional rendering of header elements, one header
• set post details onInit position to top of the page using ViewportScroller
• add a scroll to top button for longer pages using ViewportScroller
• for mobile views adjust series in header to be in a sidenav, or display better since in header they may take too much space if many
• check if it is a team blog, if there are co-authors and display them
• make the author and co-author images clickable links leading to their Hashnode profiles
• implement search functionality - searching for blog posts using a dialog with button in the header
• register and use custom SVG icons including the new X for twitter and other missing icons
• implement dynamic og meta tags for blog post sharing using SSR
• implement social sharing functionality for individual posts using the cover image as og:image and a button in post details header

Angular v17 with Angular Material UI

• create and setup the app
• add header, footer and basic layout and use Angular Material components as much as it makes sense
• implement dynamic theme switching using signals and theme service
• create and use a blog service with methods and use it to retrieve data
• add 'posts' component in the components folder and query the blog posts
• add basic styling for the post page
• add post-details component in the components folder and display matched by post slug
• add basic styling for the post details page
• add a home redirect in header wrapping the image and blog title in a and using routerLink
• query social links in header
• add and use self hosted font awesome for now
• add an og:image and related tags for social share
• verify file structure is correct as described
• verify proper scss is used and relative measurements
• verify that models are used and the models folder contains only blog-info.ts and post.ts
• all GraphQL operations are contained in the graphql.operations.ts file
• query series in header and add routing by series slug
• add 'series' component in the components folder and query the blog posts in a series
• add basic styling for the series component
• use the post-details component to display the datils of post from series
• code snippets in post-details are styled for light and dark mode using the appropriate style file
• add a copy button for the code snippets
• add a pop-up dialog for the follow button
• query and place blog logo image (or author image if not a team blog) & site favicon
• add and implement pagination in the posts component - retrieve next 10 posts on clicking next
• add and implement pagination in the series component - retrieve next 10 posts on clicking next
• apply minimal header & sidenav in post details - no layout component, just conditional rendering of header elements, one header
• set post details onInit position to top of the page using ViewportScroller
• add a scroll to top button for longer pages using ViewportScroller
• for mobile views adjust series in header to be in a sidenav, or display better since in header they may take too much space if many
• check if it is a team blog, if there are co-authors and display them
• make the author and co-author images clickable links leading to their Hashnode profiles
• implement search functionality - searching for blog posts using a dialog with button in the header
• register and use custom SVG icons including the new X for twitter and other missing icons (not self hosted font awesome)
• implement dynamic og meta tags for blog post sharing using SSR
• implement social sharing functionality for individual posts using the cover image as og:image and a button in post details header

Angular v17 with PrimeNG UI

• create and setup the app
• add header, footer and basic layout and use PrimeNG components as much as it makes sense
• implement dynamic theme switching using signals and theme service
• create and use a blog service with methods and use it to retrieve data
• add 'posts' component in the components folder and query the blog posts
• add basic styling for the post page
• add post-details component in the components folder and display matched by post slug
• add basic styling for the post details page
• add a home redirect in header wrapping the image and blog title in a and using routerLink
• query social links in header
• use primeicons not font awesome
• add an og:image and related tags for social share
• verify file structure is correct as described
• verify proper scss is used and relative measurements
• verify that models are used and the models folder contains only blog-info.ts and post.ts
• all GraphQL operations are contained in the graphql.operations.ts file
• query series in header and add routing by series slug
• add 'series' component in the components folder and query the blog posts in a series
• add basic styling for the series component
• use the post-details component to display the datils of post from series
• code snippets in post-details are styled for light and dark mode using the appropriate style file
• add a copy button for the code snippets
• add a pop-up dialog for the follow button
• query and place blog logo image (or author image if not a team blog) & site favicon
• add and implement pagination in the posts component - retrieve next 10 posts on clicking next
• add and implement pagination in the series component - retrieve next 10 posts on clicking next
• apply minimal header & sidenav in post details - no layout component, just conditional rendering of header elements, one header
• set post details onInit position to top of the page using ViewportScroller
• add a scroll to top button for longer pages using ViewportScroller
• for mobile views adjust series in header to be in a sidenav, or display better since in header they may take too much space if many
• check if it is a team blog, if there are co-authors and display them
• make the author and co-author images clickable links leading to their Hashnode profiles
• implement search functionality - searching for blog posts using a dialog with button in the header
• register and use custom SVG icons including the new X for twitter and other missing icons - primeNG applicable solution
• implement dynamic og meta tags for blog post sharing using SSR
• implement social sharing functionality for individual posts using the cover image as og:image and a button in post details header

Analog v1.0.2 without UI

• create and setup the app
• add header, footer and basic layout and use PrimeNG components as much as it makes sense
• implement dynamic theme switching using signals and theme service
• create and use a blog service with methods and use it to retrieve data
• use the home component to query and display the blog posts
• add basic styling for the post page
• add post-details component and display matched by post slug - using Analog dynamic routing
• add basic styling for the post details page
• add a home redirect in header wrapping the image and blog title in a and using routerLink
• query social links in header
• add and designated SVG component with custom svg files using icon service
• add an og:image and related tags for social share
• verify file structure is correct as described
• verify proper scss is used and relative measurements
• verify that models are used and the models folder contains only blog-info.ts and post.ts
• all GraphQL operations are contained in the graphql.operations.ts file
• query series in header and add routing by series slug - using Analog parameterized routing
• add 'series' component and query the blog posts in a series
• add basic styling for the series component
• use the post-details component to display the datils of post from series
• code snippets in post-details are styled for light and dark mode using the appropriate style file
• add a copy button for the code snippets
• add a pop-up dialog for the follow button
• query and place blog logo image (or author image if not a team blog) & site favicon
• add and implement pagination in the posts component - retrieve next 10 posts on clicking next
• add and implement pagination in the series component - retrieve next 10 posts on clicking next
• apply minimal header & sidenav in post details - no layout component, just conditional rendering of header elements, one header
• set post details onInit position to top of the page using ViewportScroller
• add a scroll to top button for longer pages using ViewportScroller
• for mobile views adjust series in header to be in a sidenav, or display better since in header they may take too much space if many
• check if it is a team blog, if there are co-authors and display them
• make the author and co-author images clickable links leading to their Hashnode profiles
• implement search functionality - searching for blog posts using a dialog with button in the header
• dynamic og meta tags for blog post sharing using SSR - already handled by Analog
• implement social sharing functionality for individual posts using the cover image as og:image and a button in post details header

All of this is made clear in the existing issues and PRs but for event further clarification lets have it here also.
Angular (without UI) is intentionally ahead to serve as a guide. Before we move to the next stage all of the versions need to have those implementations.

When something has not been implemented yet on an app version - check if there is an open issue for it.
If there isn't -

create an issue and follow the existing implementation from another app version.

The do not have to be identical but fairly similar. The issue can also be copied and adjusted for the correct app version.

Use the DEMO site to see easier if something has been implemented or not