Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Markbind's Search Utility

How Native MarkBind Search works

Collection of Title and headings in generation:

• We trace the website generation in Site/index.ts.
• When building source files, during the page generation process, Page.collectHeadingsAndKeywords records headings and keywords inside rendered page into this.headings and this.keywords respectively.
• When writing site data, the title, headings, keywords are collected into pages object.

Page Generation and Vue Initialization

• In core-web/src/index.js, the setupWithSearch() updates the SearchData by collecting the pages from the site data.
  • setupWithSearch() is added as a script in the file template page.njk used to render the HTML structure of Markbind pages.
  • This file template is used during the page generation process.
• Note also that VueCommonAppFactory.js provides a factory function (appFactory) to set up the common data and methods for Vue application shared between server-side and client-side, and provides the common data properties and methods.
  • In particular, searchData[] and searchCallback(), which are relevant in the following portion.
  • When using <searchbar/>, this is where to use MarkBind's search functionality, we set the appropriate values: <searchbar :data="searchData" :on-hit="searchCallback"></searchbar>

Vue Components: Searchbar/SearchbarPageItem.vue Searchbar.vue

• The searchbar uses the searchData[] in data, filters and ranks the data based on keyword matches and populates the dropdown with searchbarPageItems.
• It calls the on-hit function when a search result is selected, passing the selected item. SearchbarPageItem.vue
• Decides how to present the item based on whether it is a heading or a page title.

How Proposed Markbind PageFind Plugin Works

About PageFind: A fully static search library that aims to perform well on large sites, while using as little of users bandwidth as possible, and without hosting any infrastructure.

Documentation:

• PageFind NodeJS Indexing API
• The types returned by Pagefind’s JavaScript search API

Integration of Pagefind into MarkBind

It runs after the website framework, and only requires the folder containing the built static files of the website. A short explanation of how it works would be:

• PageFind indexes the static files
  • If pagefind is included as a plugin, we indexSites with PageFind, which writes the index files _site/pagefind
• Plugin exposes a pagefind JS API for searching
  • Alternatively, use pagefind default UI for searching. This is done by processes containers with "id="pagefind-search-input"", and initialing a default PageFindUI instance on it, not unlike how algolia search works.
• This JS API is used by a custom Vue component searchbar.

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

gitHub Actions

1. I learned how to update gitHub action runners to different version for macOS, ubuntu and window. Resource referred from stackoverflow. I found that how the gitHub runner is updated using the gitHub strategy matrix.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1: Angular and Dark Mode Implementation for the frontend

Aspects Learned

1. Angular Component Communication:

   • Understanding how child components communicate with parent components using @Output and EventEmitter.
   • Applying event binding in parent templates to listen for changes emitted by child components.

2. Conditional Class Application:

   • Dynamically applying CSS classes to elements using Angular’s ngClass directive.
   • Dynamically applying CSS classes to elements using Angular’s [class] binding syntax.
   • Managing theme switching logic in the parent component.

3. Event Binding:

   • Utilizing Angular’s (event) binding syntax to handle user interactions.
   • For example: (change)="handleChange($event)" to trigger functions when events like change occur, passing the event object as an argument.

Resources Used and Summary

1. Angular Official Documentation:

   • Components and Templates: Learned how to use @Output and EventEmitter to enable child-to-parent communication.
   • NgClass Directive: Understood how to conditionally apply CSS classes dynamically based on variables.

2. Udemy Course: "Angular - The Complete Guide" by Maximilian Schwarzmüller:

   • This course, although I have yet to complete it provided a basic understanding of Angular, including component communication and dynamic class management, which were instrumental in implementing the dark mode feature.

Final Thoughts

By combining these resources, I was able to implement a basic dark mode feature that functions effectively but still requires refinement. One key area for improvement is ensuring the dark mode state persists when navigating between routes. Currently, when the route changes (e.g., from localhost:4200/web/ to another route), the boolean variable controlling the dynamic CSS class allocation using ngClass resets to its default light mode, even if dark mode was active prior to the route change.

I suspect this behavior occurs because the page component is re-rendered during navigation, causing the component's state (including the boolean variable) to be re-initialized. To address this, I plan to research and implement a solution to persist the dark mode state. A promising approach might involve using a shared Angular service to store and manage the state globally, ensuring it remains consistent across routes. While I am not yet an expert in Angular, I am confident that further exploration and practice will help me refine this feature.

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...

Tool/Technology 1

List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource.

Tool/Technology 2

...