feat: make frontend modular and add config

[JNLei]

1. Move some components as separate components file.
2. Add config.ts as frontend configuration file.
   a. Advanced options position can be modal or embed
   b. Wiki page ask section position can be top | bottom | embed
   c. Export wiki as markdown and json buttons can be enabled or disabled
   d. Wiki content text size can be configured

Examples:

1. Advanced options position as modal

2. Ask section position as embed

3. Having sizes as

        p: 'base',
        h1: 'lg',
        h2: 'lg',
        h3: 'base',
        h4: 'base',
        ul: 'base',
        ol: 'base',
        li: 'base',
        a: 'base',
        blockquote: 'base',
        table: 'base',
        codeBlock: 'base',
        codeInline: 'base'

[gemini-code-assist]

Hello @JNLei, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request focuses on modularizing the frontend code and introducing a configuration file (config.ts) to manage various frontend settings. The changes involve moving components into separate files, adding configurable options for advanced settings, wiki page ask section positions, and enabling/disabling export buttons. Text sizes for wiki content are also made configurable. The landing page is also updated to support configurable advanced options.

Highlights

• Frontend Modularization: Components are now separated into individual files for better organization and maintainability.
• Configuration File: A config.ts file is introduced to manage frontend configurations, including advanced options positions (modal or embed), ask section positions (top, bottom, or embed), and export button visibility.
• Text Size Configuration: Text sizes within the wiki content are now configurable via the config.ts file, allowing customization of paragraph, heading, and list text sizes.
• Advanced Options Placement: The advanced options section on the landing page can now be configured to appear either as a modal or embedded directly within the page.

Changelog

Click here to see the changelog

• package-lock.json
  • Added clsx and tailwind-merge as dependencies.
• package.json
  • Added clsx and tailwind-merge as dependencies.
• src/app/[owner]/[repo]/page.tsx
  • Moved Ask component to src/components/wiki/Ask.tsx.
  • Imported Footer, RepoInfo, WikiPage, WikiStructure, cn, getRepoUrl, AskSection, WikiDocLoading, and getConfig.
  • Replaced direct usage of configuration values with getConfig calls.
  • Implemented conditional rendering of AskSection based on configuration.
  • Replaced inline loading UI with WikiDocLoading component.
  • Added conditional class names using cn for dynamic styling.
  • Removed isAskSectionVisible state and logic, replaced with config-driven approach.
  • Moved getRepoUrl to src/utils/utils.ts
• src/app/page.tsx
  • Imported cn, t, Footer, AdvancedOptions, AccessTokens, getConfig, and AdvancedOptionsModal.
  • Replaced direct usage of configuration values with getConfig calls.
  • Implemented conditional rendering of AdvancedOptions based on configuration.
  • Added AdvancedOptionsModal for modal display of advanced options.
  • Moved the translation function t to src/utils/utils.ts
• src/app/types/types.ts
  • Added interfaces WikiPage, WikiStructure, and type RepoInfo.
• src/components/Markdown.tsx
  • Imported getConfig and used it to configure text sizes for markdown elements.
  • Modified class names for markdown elements to use configurable text sizes.
• src/components/common/Footer.tsx
  • Created new Footer component to standardize footer across the app.
• src/components/landing/AccessTokens.tsx
  • Created new AccessTokens component to encapsulate access token input fields and logic.
  • Conditionally renders based on config.
• src/components/landing/AdvancedOptions.tsx
  • Created new AdvancedOptions component to encapsulate advanced options selection.
  • Conditionally renders based on config.
• src/components/landing/AdvancedOptionsModal.tsx
  • Created new AdvancedOptionsModal component to encapsulate advanced options in a modal.
• src/components/wiki/Ask.tsx
  • Updated import paths for Markdown and useLanguage.
  • Added isAskSectionVisible prop to conditionally render the component.
  • Used cn to conditionally apply styles based on config.
• src/components/wiki/AskSection.tsx
  • Created new AskSection component to encapsulate the ask section logic.
  • Conditionally renders based on config.
• src/components/wiki/WikiDocLoading.tsx
  • Created new WikiDocLoading component to encapsulate the loading state UI.
• src/config.ts
  • Created new config.ts file to manage configuration settings for the landing page and wiki page.
• src/messages/en.json
  • Added new translation keys for advanced options and updated export button labels.
• src/messages/es.json
  • Added new translation keys for advanced options and updated export button labels.
• src/messages/ja.json
  • Added new translation keys for advanced options and updated export button labels.
• src/messages/kr.json
  • Added new translation keys for advanced options and updated export button labels.
• src/messages/vi.json
  • Added new translation keys for advanced options and updated export button labels.
• src/messages/zh.json
  • Added new translation keys for advanced options and updated export button labels.
• src/utils/utils.ts
  • Added utility functions cn, t, and getRepoUrl.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

A config file's gentle hand,
Shapes the app across the land.
From modal's display,
To text's array,
Customization, close at command.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces modularity and configuration options to the frontend, enhancing flexibility and maintainability. The changes include component separation and the addition of a configuration file for various frontend settings. Overall, the changes are well-structured and contribute positively to the project. However, there are some areas that could be improved for better clarity and adherence to best practices.

Summary of Findings

• Configuration Structure: The configuration structure could benefit from a more robust validation mechanism to ensure that the values provided are within the expected range or type. This would prevent unexpected behavior due to misconfiguration.
• Translation Key Usage: In several components, translation keys are directly used as fallback values. It's better to provide a default string directly in the t function to ensure that something meaningful is displayed even if the translation key is missing.
• Component Props: Consider using more specific types for component props instead of relying solely on Messages from next-intl. This would improve type safety and make the code easier to understand.

Merge Readiness

The pull request is almost ready for merging. Addressing the identified issues, particularly those related to configuration validation and translation key usage, would significantly improve the quality and robustness of the code. I am unable to approve this pull request, and recommend that others review and approve this code before merging. It is recommended that the pull request not be merged until the high severity issues are addressed.

[gemini-code-assist]

Consider adding a conditional check for config.exportWiki.markdown and config.exportWiki.json before rendering the div element to avoid unnecessary rendering when both are disabled.

              {config.exportWiki.markdown || config.exportWiki.json ? (
                <div className="mb-5">

[gemini-code-assist]

Using the translation key directly as a fallback might not be ideal. Consider providing a default string directly in the t function to ensure that something meaningful is displayed even if the translation key is missing.

              <h1 className="text-xl md:text-2xl font-bold text-[var(--accent-primary)]">{t('common.appName', messages) || 'DeepWiki'}</h1>

[gemini-code-assist]

Using the translation key directly as a fallback might not be ideal. Consider providing a default string directly in the t function to ensure that something meaningful is displayed even if the translation key is missing.

                <p className="text-xs text-[var(--muted)] whitespace-nowrap">{t('common.tagline', messages) || 'AI-powered documentation'}</p>

[gemini-code-assist]

Consider validating the structure of config to ensure that all expected keys are present. This can prevent runtime errors if the configuration is incomplete or malformed.

const config = getConfig('wikiPage.wikiContent.sizes') || {};

[gemini-code-assist]

Using the translation key directly as a fallback might not be ideal. Consider providing a default string directly in the t function to ensure that something meaningful is displayed even if the translation key is missing.

        {showTokenInputs ? t('form.hideTokens', messages) || 'Hide access tokens' : t('form.addTokens', messages) || 'Add access tokens'}