FOR All App Versions❗

[esthersoftwaredev]

Anchor elements use [routerLink] not click events

• in the original app I have set all the anchor elements <a> to use [routerLink] for navigating between components
• specifically going to post-details
• somehow along the way a PR came through with an on click event
• I did approve it but I shouldn't have since it's not only redundant but also
• causes more issues such as the link not being recognized as a link in the browser hence
• no option to open in a new tab appeared in the context menu

DomSanitizer has to remain as a custom pipe in the pipes folder

• there are implementation suggestions that suggest using the DomSanitizer directly within the component
• even though right not it is applied only in one component, if applied directly
• that is interfering with custom directives so the DomSanitizer must be kept as a pipe separately

/post is to remain in the route path for post-details

• in app.routes.ts we should use path: 'post/:postSlug' instead of only path: ':postSlug''
• that was the original setup which was briefly changed with the intention of making it easier to share individual blog posts
• however, the inclusion of post/ does not interfere with sharing individual posts by URL

- but it does interfere with routing, more specifically the redirect for non existing paths was not working when only ':postSlug' was used

• also caused additional issues with new routes being added - kept loading post-details no matter that another component was assigned

Layout component is to be removed, no lazy loading of child components

in order to avoid issues and the following error in console:

ERROR Error: NG04005: Invalid number of '../'
    at createPositionApplyingDoubleDots (router.mjs:996:13)
    at findStartingPositionForTargetGroup (router.mjs:986:10)
    at createUrlTreeFromSegmentGroup (router.mjs:853:20)
    at _Router.createUrlTree (router.mjs:5593:12)
    at get urlTree (router.mjs:6023:24)
    at _RouterLink.updateHref (router.mjs:5994:26)
    at _RouterLink.ngOnChanges (router.mjs:5941:12)
    at _RouterLink.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:5871:14)
    at callHookInternal (core.mjs:6117:14)
    at callHook (core.mjs:6148:9)

routing has been adjusted

• the header component is set to conditionally render less elements within the post-details page
• the slug for posts has been renamed to postSlug on the components side so the mini header is not showing on series

setting og:image and other tags dynamically remains to be configured

• meta platform browser - as nice as it is , does change the meta tags in the browser however
• when social sharing only the og: tags present in the index.html are the existing ones that matter
• any meta tags added updated or removed dynamically during runtime do not take effect
• exploring options to manipulate the meta tags in the index.html so that they contain the required data
• possible options to handle this are - adding an additional step to change them during building the app build script
• SSR might be a valid option but it is not one that can be implemented at this point since it affects deployment

Not using Truncate Pipe for shortening title names

• using a custom truncate pipe may be suitable for other cases or for the future for now we are using
• template slicing slicePipe directly in the posts and series components since this is the only two places where this functionality is currently needed