Goals

• #3
• #5
• #6
• #7
• #8
• #10
• #9
• #12

Bug fixes

• #2
• #11

Recommended libraries to use

• preact-markdown

Adjust font-size, width, and other parameters to make the viewport responsive.
Add an adaptive design of the side navigation bar with an hamburger menu icon toggle button to show / hide the navigation on top of the content with a blurred backdrop.

• Write a documentation explaining how to use and contribute the project in GitHub.
• Add a practical tutorial of cloning and editing the template, wiki like, as terms in the public/terms directory, and display them in the website.

• Create a new search component in the top navigation bar of the website.
• Implement search functionality of the terms which are in the data storage.
• Display the results in auto-complete dropdown below the search bar.
• By submitting exact typed name of a term, redirect the client to its page route.

• Redesign the home page, add more content and style it to be more attractive.
• Redesign Footer component to show important hyper-links related to the project.
• Add "about us" page, add a brief description of us and our vision of the project.
• Add "license" page, explaining for which cases this project can be used and for which not.
• Add "contribute" page, explaining the visitors how they can contribute to the project.

a elements in the navigation items should be set to display: block and cover all the horizontal area.

Redesign the "404 NOT FOUND" page. Add content and style. Illustrations optional.
Add a button or link to home page.

When sending a term page across social media, SEO isn't recognized in the embed message.

For example, the link for the sample page: https://happy-field-0f5282803.3.azurestaticapps.net/מושג-לדוגמה
It recognize it as if it was the home page.

I think the problem is the encoding of the URI. I think that the browser reads the term name as %D7%9E%D7%95%D7%A9%D7%92-%D7%9C%D7%93%D7%95%D7%92%D7%9E%D7%94 and not מושג-לדוגמה. That's why it thinks the term name is called %D7%9E%D7%95%D7%A9%D7%92-%D7%9C%D7%93%D7%95%D7%92%D7%9E%D7%94.

The solution I recommend is to enforce decoding of the URI to get the real term name.

• Add a theme context that stores theme data (light or dark theme". Set the default to browser's default theme.
• Store the data in local-storage, so the theme state won't change after refreshing the page.
• Create a theme toggle button in top bar of the website.
• Change the value of html tag data-theme attribute, based on theme state.
• Make a light theme color palette in global.sass.

• Create a static data storage of JSON contains these fields:
  • name - unique name in URL.
  • displayName - the display name of the term in the header.
  • description - the content of the meta tag of type description of the term's page.
  • markdownPath - the reletive path to the Markdown file of the term's data.
• Create a new sub-directory named terms in public directory, and add new term Markdown file in this folder.
• Implement a Markdown-to-TSX functionality to present term's data in the page template.

• Create a route for the term page template.
• Receive the name of the term from the URL path (example: https://example.com/מס-עקיף).
• Present the term data based on its name.