WiQi

Empowering Dynamic Content with Seamless Interactivity

Built with the tools and technologies:

Overview

The wiqi project revolutionizes content management by seamlessly integrating multilingual support and dynamic content rendering. It empowers educators and tech enthusiasts to create interactive, visually engaging experiences using Markdown and React components. With features like internationalization, responsive design, and customizable UI elements, wiqi enhances user engagement and accessibility across diverse audiences.

Features

	Feature	Summary
⚙️	Architecture	Utilizes a modern stack with `<Next.js>`, `<TypeScript>`, and `<MDX>` for dynamic content rendering. Supports internationalization with locale-specific routing and content delivery. Integrates `<Tailwind CSS>` and `<DaisyUI>` for responsive and consistent UI design.
🔩	Code Quality	Employs `<ESLint>` and `<Prettier>` for code formatting and linting, ensuring consistency. Automated CI/CD pipeline using `<GitHub Actions>` for code quality checks. Strict `<TypeScript>` type-checking enhances code reliability and maintainability.
📄	Documentation	Extensive use of `<MDX>` for documentation, blending Markdown with React components. Includes multilingual support with content available in English and German. Comprehensive setup and usage instructions provided in `package.json`.
🔌	Integrations	Seamless integration with `<Puppeteer>` for automated browser actions and content previews. Supports `<React Markdown>` and `<KaTeX>` for rich text and mathematical expressions. Utilizes `<Framer Motion>` for interactive UI animations.
🧩	Modularity	Highly modular architecture with reusable components like `Header`, `Footer`, and `CustomLink`. Customizable `<MDX>` components for flexible content rendering. Separation of concerns with distinct files for configuration, components, and utilities.
🧪	Testing	Automated testing setup using `<Jest>` and `<React Testing Library>` (implied by modern React setup). CI pipeline includes test execution to ensure code reliability. Focus on unit and integration tests for critical components.
⚡️	Performance	Optimized build process with `<Next.js>` for server-side rendering and static site generation. Utilizes `<Tailwind CSS>` for efficient styling and reduced CSS footprint. Incremental compilation with `<TypeScript>` for improved development speed.
🛡️	Security	Path traversal prevention in content retrieval functions. Secure handling of user input and locale settings. Regular dependency updates to mitigate vulnerabilities.

Project Structure

└── wiqi/
    ├── .github
    │   └── workflows
    │       └── ci.yml
    ├── README.md
    ├── next.config.mjs
    ├── package.json
    ├── postcss.config.mjs
    ├── public
    │   ├── Nazun_A.jpeg
    │   ├── de.svg
    │   ├── en.svg
    │   ├── layered-waves-haikei.svg
    │   ├── main.svg
    │   ├── next.svg
    │   ├── posts
    │   │   ├── de
    │   │   │   ├── college
    │   │   │   │   └── quantum_tuesdays
    │   │   │   ├── elementary
    │   │   │   │   └── quantum_tuesdays
    │   │   │   ├── highschool
    │   │   │   │   └── quantum_tuesdays
    │   │   │   └── quantum_tuesdays
    │   │   │       └── page.mdx
    │   │   ├── en
    │   │   │   ├── college
    │   │   │   │   └── quantum_tuesdays
    │   │   │   ├── elementary
    │   │   │   │   └── quantum_tuesdays
    │   │   │   ├── highschool
    │   │   │   │   └── quantum_tuesdays
    │   │   │   └── quantum_tuesdays
    │   │   │       └── page.mdx
    │   │   └── quantum_tuesdays
    │   │       └── page.mdx
    │   ├── pq_logo.svg
    │   ├── static
    │   │   └── locales
    │   │       ├── de
    │   │       │   └── hello.json
    │   │       └── en
    │   │           └── hello.json
    │   ├── superpos.svg
    │   ├── test.md
    │   ├── vercel.svg
    │   ├── wq.ico
    │   ├── wq.png
    │   ├── |0>.svg
    │   └── |1>.svg
    ├── src
    │   ├── app
    │   │   ├── [locale]
    │   │   │   ├── layout.tsx
    │   │   │   ├── page.tsx
    │   │   │   └── quantum_tuesdays
    │   │   │       ├── [difficulty]
    │   │   │       └── page.tsx
    │   │   ├── api
    │   │   │   ├── getBlogPosts
    │   │   │   │   └── route.ts
    │   │   │   └── previewImage
    │   │   │       └── route.ts
    │   │   ├── components
    │   │   │   ├── CustomLink.tsx
    │   │   │   ├── DifficultySelector.tsx
    │   │   │   ├── DropDownSelect.tsx
    │   │   │   ├── EasterEgg.tsx
    │   │   │   ├── FlyoutLink.tsx
    │   │   │   ├── Footer.tsx
    │   │   │   ├── Header.tsx
    │   │   │   ├── PostPreview.tsx
    │   │   │   ├── S_Button.tsx
    │   │   │   ├── button.css
    │   │   │   └── utils.ts
    │   │   ├── favicon.ico
    │   │   └── globals.css
    │   ├── i18n.ts
    │   ├── mdx-components.tsx
    │   └── middleware.ts
    ├── tailwind.config.ts
    └── tsconfig.json

Project Index

WIQI/

__root__

postcss.config.mjs - Integrates Tailwind CSS into the project's build process by configuring PostCSS to use Tailwind as a plugin
- This setup streamlines the styling workflow, allowing developers to leverage Tailwind's utility-first CSS framework for efficient and responsive design
- Enhancing the project's styling capabilities, it ensures consistency and scalability across the codebase, aligning with modern web development practices.

next.config.mjs - Configuration of the Next.js project enhances internationalization and MDX support, integrating plugins for handling mathematical expressions and rendering them with KaTeX
- It specifies custom page extensions and includes experimental support for server components using external packages like Puppeteer
- The setup also optimizes the build process by ignoring ESLint errors, contributing to a more flexible and feature-rich development environment.

tailwind.config.ts - The Tailwind configuration file establishes the styling framework for the project by defining custom themes, animations, and responsive design elements
- It integrates Tailwind CSS with DaisyUI to enhance UI components and supports dark mode
- The configuration ensures consistent styling across pages and components, facilitating a cohesive design system that aligns with the project's visual identity and improves user experience.

package.json - The package.json file defines the project's metadata, dependencies, and scripts, serving as the central configuration for the qc_col project
- It facilitates development, building, and deployment processes using Next.js, TypeScript, and various libraries for UI components, internationalization, and markdown processing
- Additionally, it includes scripts for code formatting, linting, and type checking, ensuring code quality and consistency across the project.

tsconfig.json - The tsconfig.json file configures TypeScript settings for the project, ensuring compatibility with modern JavaScript features and libraries
- It enhances code quality by enforcing strict type-checking and supports seamless integration with JavaScript files
- By defining module resolution and path aliases, it streamlines the development process, particularly in a Next.js environment, facilitating efficient code organization and incremental compilation for improved performance.

src

middleware.ts - Facilitates internationalization by configuring middleware to handle locale settings within the application
- Supports English and German languages, with German as the default
- Enables automatic locale detection and applies locale-specific routing for the root and language-prefixed paths
- Integrates seamlessly into the broader architecture to enhance user experience by delivering content in the user's preferred language.

i18n.ts - Facilitates internationalization by managing locale-specific message retrieval within the project
- It ensures that only supported locales, such as English and German, are processed
- If an unsupported locale is requested, it triggers a not-found response
- This mechanism is crucial for delivering localized content, enhancing user experience by dynamically loading the appropriate language resources based on user preferences or settings.

mdx-components.tsx - Enhances the customization of MDX content by providing a function to extend or override default MDX components
- This integration allows developers to seamlessly incorporate custom components into their MDX files, ensuring flexibility and consistency across the project
- By facilitating component customization, it supports the broader architecture's goal of modularity and adaptability in content rendering within the application.

app

globals.css - Defines global styling rules for the application, utilizing Tailwind CSS for base, components, and utilities
- Establishes color variables for light and dark themes, ensuring adaptability to user preferences
- Sets foundational styles for HTML and body elements, including full viewport dimensions and fixed background properties
- Introduces a custom utility class for balanced text wrapping and styles for displaying mathematical expressions with KaTeX.

[locale]

layout.tsx - Facilitates internationalization and theming for the application by providing a layout component that dynamically adjusts based on the user's locale and theme preferences
- Integrates essential UI components like the header, footer, and an Easter egg feature while ensuring accessibility and responsiveness
- Enhances user experience by preloading theme settings and managing locale-specific content through the NextIntlClientProvider, contributing to a seamless and personalized interface.

page.tsx - The code defines a localized home page component for a Next.js application, enhancing user interaction with dynamic image transitions and multilingual support
- It utilizes the `next-intl` library for translations and manages state to control image visibility on user interaction
- The component contributes to the project's architecture by providing a visually engaging and culturally adaptive user interface for different locales.

quantum_tuesdays

page.tsx - Facilitates the display of blog posts for the "Quantum Tuesdays" series by fetching and rendering content based on user-selected difficulty levels and locale preferences
- Integrates a difficulty selector and utilizes cookies to remember user preferences, enhancing the user experience
- This component is part of a dynamic, multilingual blog platform, allowing users to explore content tailored to their language and comprehension level.

[difficulty]

[slug]

page.tsx - Render and display blog posts for the "Quantum Tuesdays" series, dynamically fetching content based on locale, difficulty, and slug parameters
- Enhance the reading experience by supporting Markdown with math and GitHub-flavored markdown features, syntax highlighting for code snippets, and LaTeX rendering
- Additionally, calculate and display the average reading time based on the word count of the post content.

components

S_Button.tsx - SuperpositionButton component enhances user interaction by providing a visually dynamic button that changes its background color on hover
- It contributes to the project's user interface by offering a customizable and engaging button element that can be easily integrated into various parts of the application
- This component supports the overall design consistency and interactive experience within the codebase architecture.

EasterEgg.tsx - EasterEgg component enhances user experience by introducing an element of surprise and humor through randomly selected ASCII art memes displayed in the console
- It adds a playful touch to the application, engaging developers who inspect console logs
- This feature aligns with the project's creative and lighthearted approach, fostering a fun and engaging environment within the codebase.

utils.ts - The utility functions in `src/app/components/utils.ts` ensure secure and valid access to post content by verifying slugs and constructing safe file paths
- They prevent path traversal vulnerabilities and read content from markdown files, returning structured data with metadata
- This functionality supports the broader codebase by enabling safe and reliable content retrieval for dynamic post rendering within the application.

PostPreview.tsx - PostPreview component enhances the user interface by displaying a preview of blog posts, including the title, subtitle, and publication date
- It leverages the CustomLink component to create navigable links to detailed post pages based on locale and difficulty
- This component contributes to the overall architecture by facilitating user engagement and seamless navigation within the content-driven application.

Footer.tsx - Footer component enhances the user interface by providing a consistent and visually appealing footer section across the application
- It conveys a message of human-centric design and craftsmanship, reinforcing the project's branding and ethos
- Positioned within the broader architecture, it contributes to the overall user experience by maintaining a cohesive look and feel, while also offering a touch of personality and warmth.

Header.tsx - The Header component enhances the user interface by providing a responsive navigation bar with dynamic theme switching and locale management
- It adjusts text color based on background contrast, ensuring readability
- The component supports theme persistence across sessions and includes a search bar and navigation links, contributing to a seamless and interactive user experience within the application.

button.css - The button.css file defines the styling for a custom form component within the project, focusing on visual transitions and responsive design
- It enhances user interaction by adjusting dimensions, padding, and border-radius for various states like hover and focus
- This contributes to a cohesive and dynamic user interface, aligning with the project's goal of providing an intuitive and visually appealing user experience.

DropDownSelect.tsx - The DropDownSelect component provides a user interface element for selecting a category from a predefined list, such as "Elementary School Student" or "Tech Enthusiast." It enhances user interaction by allowing dynamic state changes based on the selected option
- This component is integral to the application's UI, facilitating seamless navigation and personalization by updating the state according to user preferences.

FlyoutLink.tsx - Enhances user interaction by providing a dynamic flyout menu component within the application
- The FlyoutLink component, utilizing React and Framer Motion, displays additional content when hovered over, offering users detailed information about pricing options
- This component contributes to the overall user experience by making navigation intuitive and visually engaging, aligning with the project's goal of creating a responsive and interactive interface.

DifficultySelector.tsx - The DifficultySelector component provides an interactive interface for users to select a difficulty level, enhancing user experience by visually representing options with emojis and colors
- It updates the application's state and stores the selected difficulty in a cookie for persistent user preference
- This component plays a crucial role in personalizing content based on user-selected difficulty levels within the broader application architecture.

CustomLink.tsx - CustomLink component enhances user experience by providing interactive link previews
- It fetches and displays an image preview when users hover over a link, offering a visual cue of the linked content
- This functionality is crucial for improving navigation and engagement within the application, ensuring users have a better understanding of the content they are about to access.

api

previewImage

route.ts - Generates a base64-encoded screenshot of a webpage by utilizing Puppeteer to automate browser actions
- It processes POST requests containing a URL, captures the webpage's full view, and returns the image data
- This functionality supports both production and development environments by conditionally using puppeteer-core and puppeteer, respectively, enhancing the project's capability to dynamically preview web content.

getBlogPosts

route.ts - Facilitates the retrieval of blog posts by processing Markdown files stored in a specified directory structure
- It handles HTTP POST requests to dynamically fetch and return blog post data based on folder, language, and difficulty parameters
- This functionality supports the broader architecture by enabling content management and localization, allowing users to access tailored blog content efficiently within the application.

.github

workflows

ci.yml - Automates the process of formatting and linting code within the project by utilizing GitHub Actions
- It triggers on pushes and pull requests to the main branch, ensuring code quality and consistency
- By leveraging Bun for dependency management and execution, it streamlines the setup and execution of formatting and linting tasks, enhancing the development workflow and maintaining code standards across the codebase.

public

posts

quantum_tuesdays

page.mdx - The MDX page serves as a dynamic content component within the project's architecture, enabling the integration of Markdown with React components
- It facilitates the creation of rich, interactive content by supporting text formatting, image embedding, mathematical expressions, and custom React components
- This enhances the user experience by allowing developers to seamlessly blend static content with interactive elements, contributing to a more engaging and informative presentation.

en

quantum_tuesdays

page.mdx - Showcases a Markdown file with MDX integration, enabling rich content creation for the Quantum Tuesdays blog section
- It combines Markdown syntax with React components, allowing for dynamic and interactive content
- This approach enhances the user experience by supporting elements like images, links, LaTeX formulas, and code snippets, aligning with the project's goal of providing engaging and informative posts within the broader architecture.

college

quantum_tuesdays

page.mdx - The MDX page serves as a content-rich document that combines Markdown and JSX to create an interactive and visually engaging experience
- It supports text formatting, lists, images, links, LaTeX for mathematical expressions, and custom React components
- This integration enhances the project's ability to present complex information in a user-friendly manner, aligning with the overall architecture's focus on dynamic content delivery.

elementary

quantum_tuesdays

page.mdx - Showcases a Markdown file with MDX capabilities, enabling the integration of React components, LaTeX formulas, and custom rendering rules within the content
- Serves as a template or example for creating rich, interactive documentation or blog posts in the project
- Enhances user engagement by allowing dynamic content and interactive elements, aligning with the project's goal of providing a flexible and modern content management experience.

highschool

quantum_tuesdays

page.mdx - Showcases a Markdown file with MDX capabilities, allowing for rich content creation by combining Markdown syntax with React components
- Serves as a template for creating educational content, such as blog posts or articles, within the project's architecture
- Supports embedding images, links, code snippets, and mathematical formulas, enhancing the flexibility and interactivity of the content presented to users.

de

quantum_tuesdays

page.mdx - The MDX page serves as a content-rich component within the project, blending Markdown and JSX to create an interactive and visually engaging experience
- It supports text formatting, lists, images, links, and mathematical expressions, while also allowing the integration of custom React components
- This enhances the project's flexibility in presenting dynamic content, making it ideal for educational or informative purposes.

college

quantum_tuesdays

page.mdx - Showcases a Markdown file with embedded JSX components, designed to enhance content presentation within the project
- It serves as a template for creating rich, interactive pages using Markdown syntax combined with React components
- This approach allows for easy content management and customization, supporting features like LaTeX for mathematical expressions and syntax highlighting for code snippets, aligning with the project's goal of providing dynamic and engaging content.

elementary

quantum_tuesdays

QuantumComputing.MDX - Highlighting the challenges of using filenames with mixed case, the content addresses potential issues with case sensitivity across different operating systems
- It emphasizes the importance of maintaining consistency in file referencing and avoiding duplicate filenames
- This is crucial for ensuring smooth operation and integration within the broader project architecture, particularly in environments where file system case sensitivity varies.

report.custom.mdx - Explores the use of non-standard file extensions like `.custom.mdx` to enhance flexibility in file categorization within the project
- Highlights the benefits and challenges associated with this approach, such as increased flexibility and potential parsing issues
- Aims to inform about the implications of using custom extensions, particularly in terms of compatibility with various tools and libraries, within the broader project architecture.

こんにちは.mdx - Explores the challenges associated with using non-Latin characters in filenames within the context of MDX files
- Focuses on issues such as encoding and decoding in URLs, compatibility across different operating systems, and display problems in various applications
- Contributes to the broader project by addressing internationalization and localization concerns, enhancing the accessibility and usability of content for diverse audiences.

My Post.mdx - Explores the challenges and considerations of handling filenames with spaces within the context of URL encoding and file access
- Emphasizes the importance of maintaining consistency in naming conventions to prevent potential issues
- Contributes to the broader project by addressing a common problem in file management, enhancing the robustness and reliability of the system's handling of file paths and URLs.

Post!@#.mdx - Explores the challenges and solutions associated with managing filenames containing special characters within the project
- Highlights issues such as URL encoding, operating system-specific limitations, and security concerns
- Contributes to the broader project by addressing potential processing and display problems, ensuring robust handling of filenames across different environments and enhancing the overall reliability and user experience of the application.

aux.mdx - Explores the challenges and solutions for handling reserved words in filenames, specifically focusing on the reserved word "aux" in Windows systems
- Provides insights into managing restricted filenames across different operating systems, addressing error handling, and suggesting alternative naming strategies
- Contributes to the broader project by enhancing understanding of cross-platform compatibility issues and offering practical guidance for developers dealing with similar constraints.

Привет.mdx - Explores the handling of Unicode characters in filenames within the project, emphasizing the importance of supporting multilingual filenames and addressing potential encoding issues
- Highlights the relevance of such filenames in international projects and aims to ensure compatibility across different systems
- Contributes to the project's goal of enhancing global accessibility and usability by testing and documenting these scenarios.

my_file-name_2024.mdx - Explores the use of mixed separators in filenames, specifically underscores and hyphens, to test the flexibility of filename parsers
- Highlights considerations such as naming consistency, readability, and parsing rules within applications
- Contributes to the broader project by providing insights into filename conventions, which can influence how files are managed, accessed, and processed across the codebase.

Bridging Eras The Ottoman Empire and Quantum Computing.mdx - Explores the intriguing parallels between the Ottoman Empire's historical innovations and the futuristic potential of quantum computing
- By drawing connections between past and future, it highlights how quantum computing can revolutionize historical research, cultural preservation, and administrative efficiency
- This narrative enriches the project's broader theme of integrating historical insights with cutting-edge technology to enhance understanding and innovation.

myfile .mdx - Explores the challenges associated with filenames that have trailing spaces, particularly focusing on issues related to file creation, access, URL encoding, and cross-platform compatibility
- Serves as a guide for understanding potential pitfalls and considerations when dealing with such filenames within the broader context of file management and application development in the project.

my.post.version1.mdx - Explores the challenges associated with managing filenames containing multiple periods, focusing on issues like extension parsing, ambiguous path definitions, and maintaining naming consistency
- Contributes to the broader project by addressing potential pitfalls in file handling and URL routing, ensuring smoother integration and functionality within the codebase's architecture
- Enhances understanding of filename conventions and their impact on system operations.

café.mdx - Explores the challenges and solutions related to filenames with accented characters, focusing on Unicode normalization, consistent encoding, and handling accents in URLs
- Enhances the project's documentation by addressing potential compatibility issues across different systems, contributing to a more robust and accessible codebase
- This aligns with the project's goal of ensuring seamless internationalization and localization support.

🔥-hot-topic.mdx - Explores the use of emojis in filenames, highlighting their potential to enhance expressiveness while addressing compatibility challenges
- Discusses considerations such as cross-platform support, URL encoding, and file handling across different environments
- Contributes to the broader project by providing insights into best practices for naming conventions, which can improve user experience and maintainability within the codebase.

page.mdx - The MDX page serves as a content-rich component within the project, blending Markdown with JSX to create a dynamic and interactive user experience
- It facilitates the presentation of formatted text, images, mathematical formulas, and custom React components
- This integration enhances the project's flexibility in content delivery, allowing for seamless embedding of interactive elements and advanced formatting options, thereby enriching the overall user engagement.

a-very-long-filename-that-exceeds-normal-length-limits-and-tests-the-handling-capabilities-of-the-application.mdx - Exploration of filename length handling within the application is the primary focus, addressing potential issues with system limits, UI readability, and performance impacts
- This content contributes to the broader project by ensuring robust handling of edge cases related to file management, enhancing the application's reliability and user experience when dealing with unusually long filenames.

CON.mdx - Explores the challenges and solutions related to using reserved filenames like "CON" in Windows systems
- Focuses on error handling and suggests alternative naming conventions to avoid conflicts
- Contributes to the broader project by providing insights into managing file naming issues, enhancing the robustness and compatibility of the codebase across different operating systems.

.hidden.mdx - Explores the concept and management of hidden files in Unix-based systems, focusing on files that start with a dot
- Discusses their visibility in directories, how to access them, and best practices for handling such files
- Contributes to the broader project by providing insights into file management and system navigation, enhancing users' understanding of Unix-based file systems within the project's context.

highschool

quantum_tuesdays

page.mdx - The MDX page serves as a content-rich component within the project, blending markdown with React components to create an interactive and visually engaging experience
- It supports various content types, including text formatting, images, mathematical formulas, and code snippets, enhancing the educational value of the "Quantum Tuesdays" series for high school students
- This integration facilitates dynamic content delivery and customization within the broader project architecture.

Getting Started

Prerequisites

Before getting started with wiqi, ensure your runtime environment meets the following requirements:

Programming Language: TypeScript, React
Package Manager: Bun

Installation

Install wiqi using one of the following methods:

Build from source:

Clone the wiqi repository:

❯ git clone https://github.com/leart-zuka/wiqi

Navigate to the project directory:

❯ cd wiqi

Install the project dependencies:

Using bun

❯ bun install

Usage

Run wiqi using the following command: Using bun

❯ bun dev

Testing Build

Run the test suite using the following command: Using bun

❯ bun next build

Project Roadmap

Task 1: ~~Implement feature one.~~
Task 2: Implement feature two.
Task 3: Implement feature three.

Contributing

💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
🐛 Report Issues: Submit bugs found or log feature requests for the wiqi project.
💡 Submit Pull Requests: Review open PRs, and submit your own PRs.

Contributing Guidelines

Fork the Repository: Start by forking the project repository to your github account.
Clone Locally: Clone the forked repository to your local machine using a git client.
```
git clone https://github.com/leart-zuka/wiqi
```
Create a New Branch: Always work on a new branch, giving it a descriptive name.
```
git checkout -b new-feature-x
```
Make Your Changes: Develop and test your changes locally.
Commit Your Changes: Commit with a clear message describing your updates.
```
git commit -m 'Implemented new feature x.'
```
Push to github: Push the changes to your forked repository.
```
git push origin new-feature-x
```
Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Contributer

License

This project is protected under the SELECT-A-LICENSE License. For more details, refer to the LICENSE file.

Acknowledgments

List any resources, contributors, inspiration, etc. here.
I thank Leart (~Alpi)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

WiQi

Table of Contents

Overview

Features

Project Structure

Project Index

Getting Started

Prerequisites

Installation

Usage

Testing Build

Project Roadmap

Contributing

Contributer

License

Acknowledgments

About

Releases

Packages

Contributors 3

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 287 Commits
.github/workflows		.github/workflows
public		public
src		src
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
next.config.mjs		next.config.mjs
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

postcss.config.mjs	- Integrates Tailwind CSS into the project's build process by configuring PostCSS to use Tailwind as a plugin - This setup streamlines the styling workflow, allowing developers to leverage Tailwind's utility-first CSS framework for efficient and responsive design - Enhancing the project's styling capabilities, it ensures consistency and scalability across the codebase, aligning with modern web development practices.
next.config.mjs	- Configuration of the Next.js project enhances internationalization and MDX support, integrating plugins for handling mathematical expressions and rendering them with KaTeX - It specifies custom page extensions and includes experimental support for server components using external packages like Puppeteer - The setup also optimizes the build process by ignoring ESLint errors, contributing to a more flexible and feature-rich development environment.
tailwind.config.ts	- The Tailwind configuration file establishes the styling framework for the project by defining custom themes, animations, and responsive design elements - It integrates Tailwind CSS with DaisyUI to enhance UI components and supports dark mode - The configuration ensures consistent styling across pages and components, facilitating a cohesive design system that aligns with the project's visual identity and improves user experience.
package.json	- The package.json file defines the project's metadata, dependencies, and scripts, serving as the central configuration for the qc_col project - It facilitates development, building, and deployment processes using Next.js, TypeScript, and various libraries for UI components, internationalization, and markdown processing - Additionally, it includes scripts for code formatting, linting, and type checking, ensuring code quality and consistency across the project.
tsconfig.json	- The tsconfig.json file configures TypeScript settings for the project, ensuring compatibility with modern JavaScript features and libraries - It enhances code quality by enforcing strict type-checking and supports seamless integration with JavaScript files - By defining module resolution and path aliases, it streamlines the development process, particularly in a Next.js environment, facilitating efficient code organization and incremental compilation for improved performance.

middleware.ts	- Facilitates internationalization by configuring middleware to handle locale settings within the application - Supports English and German languages, with German as the default - Enables automatic locale detection and applies locale-specific routing for the root and language-prefixed paths - Integrates seamlessly into the broader architecture to enhance user experience by delivering content in the user's preferred language.
i18n.ts	- Facilitates internationalization by managing locale-specific message retrieval within the project - It ensures that only supported locales, such as English and German, are processed - If an unsupported locale is requested, it triggers a not-found response - This mechanism is crucial for delivering localized content, enhancing user experience by dynamically loading the appropriate language resources based on user preferences or settings.
mdx-components.tsx	- Enhances the customization of MDX content by providing a function to extend or override default MDX components - This integration allows developers to seamlessly incorporate custom components into their MDX files, ensuring flexibility and consistency across the project - By facilitating component customization, it supports the broader architecture's goal of modularity and adaptability in content rendering within the application.

S_Button.tsx	- SuperpositionButton component enhances user interaction by providing a visually dynamic button that changes its background color on hover - It contributes to the project's user interface by offering a customizable and engaging button element that can be easily integrated into various parts of the application - This component supports the overall design consistency and interactive experience within the codebase architecture.
EasterEgg.tsx	- EasterEgg component enhances user experience by introducing an element of surprise and humor through randomly selected ASCII art memes displayed in the console - It adds a playful touch to the application, engaging developers who inspect console logs - This feature aligns with the project's creative and lighthearted approach, fostering a fun and engaging environment within the codebase.
utils.ts	- The utility functions in `src/app/components/utils.ts` ensure secure and valid access to post content by verifying slugs and constructing safe file paths - They prevent path traversal vulnerabilities and read content from markdown files, returning structured data with metadata - This functionality supports the broader codebase by enabling safe and reliable content retrieval for dynamic post rendering within the application.
PostPreview.tsx	- PostPreview component enhances the user interface by displaying a preview of blog posts, including the title, subtitle, and publication date - It leverages the CustomLink component to create navigable links to detailed post pages based on locale and difficulty - This component contributes to the overall architecture by facilitating user engagement and seamless navigation within the content-driven application.
Footer.tsx	- Footer component enhances the user interface by providing a consistent and visually appealing footer section across the application - It conveys a message of human-centric design and craftsmanship, reinforcing the project's branding and ethos - Positioned within the broader architecture, it contributes to the overall user experience by maintaining a cohesive look and feel, while also offering a touch of personality and warmth.
Header.tsx	- The Header component enhances the user interface by providing a responsive navigation bar with dynamic theme switching and locale management - It adjusts text color based on background contrast, ensuring readability - The component supports theme persistence across sessions and includes a search bar and navigation links, contributing to a seamless and interactive user experience within the application.
button.css	- The button.css file defines the styling for a custom form component within the project, focusing on visual transitions and responsive design - It enhances user interaction by adjusting dimensions, padding, and border-radius for various states like hover and focus - This contributes to a cohesive and dynamic user interface, aligning with the project's goal of providing an intuitive and visually appealing user experience.
DropDownSelect.tsx	- The DropDownSelect component provides a user interface element for selecting a category from a predefined list, such as "Elementary School Student" or "Tech Enthusiast." It enhances user interaction by allowing dynamic state changes based on the selected option - This component is integral to the application's UI, facilitating seamless navigation and personalization by updating the state according to user preferences.
FlyoutLink.tsx	- Enhances user interaction by providing a dynamic flyout menu component within the application - The FlyoutLink component, utilizing React and Framer Motion, displays additional content when hovered over, offering users detailed information about pricing options - This component contributes to the overall user experience by making navigation intuitive and visually engaging, aligning with the project's goal of creating a responsive and interactive interface.
DifficultySelector.tsx	- The DifficultySelector component provides an interactive interface for users to select a difficulty level, enhancing user experience by visually representing options with emojis and colors - It updates the application's state and stores the selected difficulty in a cookie for persistent user preference - This component plays a crucial role in personalizing content based on user-selected difficulty levels within the broader application architecture.
CustomLink.tsx	- CustomLink component enhances user experience by providing interactive link previews - It fetches and displays an image preview when users hover over a link, offering a visual cue of the linked content - This functionality is crucial for improving navigation and engagement within the application, ensuring users have a better understanding of the content they are about to access.

QuantumComputing.MDX	- Highlighting the challenges of using filenames with mixed case, the content addresses potential issues with case sensitivity across different operating systems - It emphasizes the importance of maintaining consistency in file referencing and avoiding duplicate filenames - This is crucial for ensuring smooth operation and integration within the broader project architecture, particularly in environments where file system case sensitivity varies.
report.custom.mdx	- Explores the use of non-standard file extensions like `.custom.mdx` to enhance flexibility in file categorization within the project - Highlights the benefits and challenges associated with this approach, such as increased flexibility and potential parsing issues - Aims to inform about the implications of using custom extensions, particularly in terms of compatibility with various tools and libraries, within the broader project architecture.
こんにちは.mdx	- Explores the challenges associated with using non-Latin characters in filenames within the context of MDX files - Focuses on issues such as encoding and decoding in URLs, compatibility across different operating systems, and display problems in various applications - Contributes to the broader project by addressing internationalization and localization concerns, enhancing the accessibility and usability of content for diverse audiences.
My Post.mdx	- Explores the challenges and considerations of handling filenames with spaces within the context of URL encoding and file access - Emphasizes the importance of maintaining consistency in naming conventions to prevent potential issues - Contributes to the broader project by addressing a common problem in file management, enhancing the robustness and reliability of the system's handling of file paths and URLs.
Post!@#.mdx	- Explores the challenges and solutions associated with managing filenames containing special characters within the project - Highlights issues such as URL encoding, operating system-specific limitations, and security concerns - Contributes to the broader project by addressing potential processing and display problems, ensuring robust handling of filenames across different environments and enhancing the overall reliability and user experience of the application.
aux.mdx	- Explores the challenges and solutions for handling reserved words in filenames, specifically focusing on the reserved word "aux" in Windows systems - Provides insights into managing restricted filenames across different operating systems, addressing error handling, and suggesting alternative naming strategies - Contributes to the broader project by enhancing understanding of cross-platform compatibility issues and offering practical guidance for developers dealing with similar constraints.
Привет.mdx	- Explores the handling of Unicode characters in filenames within the project, emphasizing the importance of supporting multilingual filenames and addressing potential encoding issues - Highlights the relevance of such filenames in international projects and aims to ensure compatibility across different systems - Contributes to the project's goal of enhancing global accessibility and usability by testing and documenting these scenarios.
my_file-name_2024.mdx	- Explores the use of mixed separators in filenames, specifically underscores and hyphens, to test the flexibility of filename parsers - Highlights considerations such as naming consistency, readability, and parsing rules within applications - Contributes to the broader project by providing insights into filename conventions, which can influence how files are managed, accessed, and processed across the codebase.
Bridging Eras The Ottoman Empire and Quantum Computing.mdx	- Explores the intriguing parallels between the Ottoman Empire's historical innovations and the futuristic potential of quantum computing - By drawing connections between past and future, it highlights how quantum computing can revolutionize historical research, cultural preservation, and administrative efficiency - This narrative enriches the project's broader theme of integrating historical insights with cutting-edge technology to enhance understanding and innovation.
myfile .mdx	- Explores the challenges associated with filenames that have trailing spaces, particularly focusing on issues related to file creation, access, URL encoding, and cross-platform compatibility - Serves as a guide for understanding potential pitfalls and considerations when dealing with such filenames within the broader context of file management and application development in the project.
my.post.version1.mdx	- Explores the challenges associated with managing filenames containing multiple periods, focusing on issues like extension parsing, ambiguous path definitions, and maintaining naming consistency - Contributes to the broader project by addressing potential pitfalls in file handling and URL routing, ensuring smoother integration and functionality within the codebase's architecture - Enhances understanding of filename conventions and their impact on system operations.
café.mdx	- Explores the challenges and solutions related to filenames with accented characters, focusing on Unicode normalization, consistent encoding, and handling accents in URLs - Enhances the project's documentation by addressing potential compatibility issues across different systems, contributing to a more robust and accessible codebase - This aligns with the project's goal of ensuring seamless internationalization and localization support.
🔥-hot-topic.mdx	- Explores the use of emojis in filenames, highlighting their potential to enhance expressiveness while addressing compatibility challenges - Discusses considerations such as cross-platform support, URL encoding, and file handling across different environments - Contributes to the broader project by providing insights into best practices for naming conventions, which can improve user experience and maintainability within the codebase.
page.mdx	- The MDX page serves as a content-rich component within the project, blending Markdown with JSX to create a dynamic and interactive user experience - It facilitates the presentation of formatted text, images, mathematical formulas, and custom React components - This integration enhances the project's flexibility in content delivery, allowing for seamless embedding of interactive elements and advanced formatting options, thereby enriching the overall user engagement.
a-very-long-filename-that-exceeds-normal-length-limits-and-tests-the-handling-capabilities-of-the-application.mdx	- Exploration of filename length handling within the application is the primary focus, addressing potential issues with system limits, UI readability, and performance impacts - This content contributes to the broader project by ensuring robust handling of edge cases related to file management, enhancing the application's reliability and user experience when dealing with unusually long filenames.
CON.mdx	- Explores the challenges and solutions related to using reserved filenames like "CON" in Windows systems - Focuses on error handling and suggests alternative naming conventions to avoid conflicts - Contributes to the broader project by providing insights into managing file naming issues, enhancing the robustness and compatibility of the codebase across different operating systems.
.hidden.mdx	- Explores the concept and management of hidden files in Unix-based systems, focusing on files that start with a dot - Discusses their visibility in directories, how to access them, and best practices for handling such files - Contributes to the broader project by providing insights into file management and system navigation, enhancing users' understanding of Unix-based file systems within the project's context.

leart-zuka/wiqi

Folders and files

Latest commit

History

Repository files navigation

WiQi

Table of Contents

Overview

Features

Project Structure

Project Index

Getting Started

Prerequisites

Installation

Usage

Testing Build

Project Roadmap

Contributing

Contributer

License

Acknowledgments

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Languages

Packages