Perfect Support for Imperfect. Validated through Imperfect Gamers utility. https://support.imperfectgamers.org/
Latest screenshots (August 9th): These screenshots do not include the refinements that were made to the other aspects. just significant intro to new feature.
The Imperfect Editor Module is a flexible and robust content editor designed for managing a wide range of content types within the Imperfect Gamers ecosystem. This module has been tailored to support dynamic content creation with an emphasis on scalability, user experience, and long-term maintainability.
- Flexible Content Updates: The
updateContent
function allows for dynamic content updates, whether it's a single string or an array of strings. This flexibility is essential for managing various elements, such as paragraphs, lists, and images. - Dynamic Property Handling: The
updateElementProperties
function is particularly powerful, as it dynamically updates element properties based on new content, ensuring consistent handling across all content types.
- Custom Content Handling: The handling of
CustomComponentElement
andInteractiveElement
types is well-structured, offering a way to manage complex content types involving arrays of strings or specialized rendering logic.
- Wide Range of Content: The module supports a broad array of content types, from basic text elements to more complex structures like tables, code blocks, and custom interactive elements, ensuring comprehensive coverage for content creation needs.
- Inline Editing: Components like
EditableComponent
,EditableImage
,EditableList
, andEditableTable
provide inline editing capabilities, enabling users to modify content directly within the interface for real-time updates and immediate feedback. - Seamless Transition: The
renderEditableElement
function efficiently renders the appropriate editing interface based on the element type, providing a seamless transition between view and edit modes.
- Custom Syntax: The ability to generate custom syntax for elements and display it in a modal is a valuable feature, particularly for advanced users. The
generateElementSyntax
function, coupled with the modal system, offers transparency into how content is structured. - Integrated Modal System: The modal system is well-integrated, featuring smooth transitions and user-friendly interactions, including a copy functionality for syntax.
- Responsive Design Preview: The implementation of responsive design views (mobile, tablet, desktop) ensures that users can preview how their content will appear across different devices.
- Design Tools: The inclusion of tools like a dimension ruler and layout zoom further enhances the editorβs capability, making it a powerful tool for content creators.
- Dynamic Property Handling: Enhanced
updateElementProperties
to manage both single and multiple property updates dynamically, enabling more flexible content editing. - Component Refinements:
- Simplified
EditableComponent
for streamlined content rendering. - Improved
EditableTable
with better row and column management for more intuitive content editing. - Removed
onRemove
fromEditableList
for a cleaner list editing process.
- Simplified
- Content Rendering: Consolidated content rendering logic for consistent handling of all elements within the editor.
- Header Flexibility: Updated
renderHeader
for safe handling of header levels.
- Fixed saving for content types that omit content from
BaseContentElement
. - Updated utility functions to eliminate hardcoding, setting the stage for future scalability (CMS for CMS).
- Integrated a save button for better user control over content saving.
- AdminCreateArticle Component:
- Commented out unnecessary raw text areas for better UI clarity.
- EditorModule Component:
- Introduced
isActualMobileDevice
prop to tailor features based on device type. - Improved dropdown menu behavior with better scroll and click-away handling.
- Added modal animations and copy-to-clipboard functionality for generated syntax.
- Introduced
- Responsive UI Enhancements: Adjusted
MenuBar
,ViewToolbar
, and other UI elements for improved responsiveness.
- Editing Support: Added further editing support for individual items within elements like lists, with options to add or remove items.
- Custom Editor Module: Introduced a custom build of the Imperfect Editor Module (WIP) for use across our software suite.
- Extended
parseContent
andcontentRenderer
to support new content types, including accordion, tab, gallery, carousel, and more. - Updated CSS with improved styles and animations for a better visual experience.
- ProgressBar Component: Added a
color
prop for customizable progress bar colors. - Categories and Breadcrumbs: Improved loading indicators and navigation for a more intuitive user experience.
- Error Handling: Enhanced error handling and loading states across components for better user feedback.
- Refactored
AdminCreateArticle
,AdminEditArticle
, and other admin components for improved loading states, error handling, and UX. - Updated routing logic, form handling, and UI feedback across various components to enhance navigation, maintainability, and user experience.
- Implemented cache updates for items when categories are updated, ensuring immediate reflection across the UI.
- Enhanced optimistic UI logic to promptly reflect article modifications and category movements.
- Enhanced the logic for deletion and restoration workflows, ensuring accurate state synchronization and UI updates.
- Continued refactoring to support future scalability and maintainability.
- Integration of more advanced content types and features as development progresses.
- Ongoing improvements to the admin dashboard, with better handling of category and article management.
We have introduced a comprehensive support request management feature that includes the following components:
- AdminSupportForm: Admin interface for managing support requests, issues, inputs, and action logs.
- SupportForm: User interface for submitting support requests by selecting issue categories, sub-issues, and filling in details.
- IssueCategories: Manage issue categories and subcategories.
- Inputs: Manage various types of inputs related to issues.
- Issues: Display and manage issues.
- ActionLogs: Display logs of actions taken.
- SupportRequestList: List support requests.
- SupportRequestDetails: Detailed view of support requests.
Ensure the following backend API endpoints are working as expected:
/support/requests
/support/requests/populate
/support/requests/inputs
/support/requests/issues
/support/requests/logs
/support/requests/submit
The components are designed to interact with these endpoints. Ensure headers, tokens, and request bodies align with our backend expectations.
- Tabs: Renders and handles tab click events.
- AccordionItem: Single accordion item used in lists.
- Breadcrumb: Breadcrumb component for navigation.
- Adding authentication checks and redirects for admin pages.
- Expanding input types and validation logic.
- Improving mobile responsiveness with Tailwind CSS.
- Implementing caching mechanisms for repeated data fetches.
- Adding tests using frameworks like Jest for component testing.
future design ideas for after july 23:
july12: plan is to decouple crud functions from our 2due software: https://github.com/imperfectandcompany/Imperfect-and-Company-Internal-2DUE and turn the kanban style into a support lead pipeline putting user that submitted in backlog and allowing us to move them down the pipeline kanban style for tracking and followup. move category support within edit article update
The Imperfect Gamers Site Support project is a Preact-based web application serving as a content management and administration platform for our community. It features a user-friendly interface with admin tools for article and category management, user access control, and CRUD operations. Additionally, it boasts an interactive UI with search functionality, dynamic content presentation, breadcrumb navigation, and a robust notification system. The use of Tailwind CSS for styling, TypeScript for type safety, and an organized component structure underline its modern development approach, making it efficient and scalable. Emphasizing this modular design, it leverages TypeScript, integrates automated testing, and ensures a streamlined development process with tools like Vite and PostCSS. As stated, the Imperfect Gamers Site Support application serves as a centralized hub for addressing support needs within the Imperfect Gamers community, enhancing user experience and operational productivity. This platform aims to streamline content administration and enhance user experience, consolidating support resources for the Imperfect Gamers community.
Our application is in a dynamic state of growth and improvement. We are constantly working on enhancing existing features and adding new functionalities to provide a seamless experience for both our administrators and users.
-
Content Management for Admins: Administrators have full control over the content, including creating, editing, and deleting articles and categories. This is facilitated through intuitive UI components such as
AdminDashboard
,AdminCreateArticle
, andAdminEditArticle
.-
Admin Dashboard: A comprehensive overview for administrators to manage articles and categories. Features include toggling articles' archive and staff-only status, and deleting articles or categories optimistically from the UI.
-
Creating and Editing Articles: Admins can create new articles and edit existing ones, with features like toggling between raw and rendered views, and adjusting text area height dynamically.
-
-
Viewing Experience for Users: Our platform offers a rich viewing experience for both staff and regular users, with features tailored to each group's needs.
- Feature-Rich Articles: Users can view articles, with staff members having access to additional content marked as staff-only.
- Interactive UI Components: Users interact with articles through a well-designed UI, featuring components like
FeatureCard
andArticle
, enhancing the browsing experience.
-
Notification Banner: A feature designed to communicate important updates to users effectively. This is a work in progress aimed at enhancing user engagement.
-
Enhanced Search Functionality: We are in the process of refining our search functionality to offer more accurate and relevant search results to our users.
- For Administrators: The admin dashboard is your central hub. Here, you can manage articles, view logs, access the recycle bin, and create new content. Navigation is straightforward, with clear labels and intuitive design.
- For Users: The user interface is designed for ease of use. You can browse articles, search for specific topics, and access different categories from the homepage. Staff members have additional access privileges, which are seamlessly integrated into their viewing experience.
- Comprehensive Content Management: Create, edit, and manage articles and categories directly from the admin dashboard.
- Recycle Bin: Deleted articles and categories can be restored, ensuring that no content is lost accidentally.
- Engaging Content Viewing: Access a wide range of articles, with special content available exclusively to staff.
βββ Imperfect-Gamers-Site-Support/
βββ aggregateFiles.js
βββ index.html
βββ package-lock.json
βββ package.json
βββ postcss.config.js
βββ public
β βββ vite.svg
βββ src
β βββ api.ts
β βββ app.tsx
β βββ assets
β β βββ preact.svg
β βββ components
β β βββ AccessRestricted.tsx
β β βββ Admin.tsx
β β βββ AdminArticleHistoryView.tsx
β β βββ AdminCreateArticle.tsx
β β βββ AdminCreateCategory.tsx
β β βββ AdminDashboard.tsx
β β βββ AdminEditArticle.tsx
β β βββ AdminEditCategory.tsx
β β βββ AdminError.tsx
β β βββ AdminLogs.tsx
β β βββ AdminRecycleBin.tsx
β β βββ Article.tsx
β β βββ ArticleView.tsx
β β βββ Breadcrumb.tsx
β β βββ Categories.tsx
β β βββ CategoryItems.tsx
β β βββ ContextMenu.tsx
β β βββ ErrorBoundary.tsx
β β βββ FeatureCard.tsx
β β βββ Footer.tsx
β β βββ Header.tsx
β β βββ Home.tsx
β β βββ MainContent.tsx
β β βββ NotFound.tsx
β β βββ Section.tsx
β β βββ SkeletonLoader.tsx
β β βββ TextDiffViewer.tsx
β β βββ Toast.tsx
β β βββ ToastContainer.tsx
β β βββ models
β β β βββ userModel.ts
β β βββ toastContext.tsx
β βββ content.ts
β βββ contentParser.ts
β βββ contentRenderer.tsx
β βββ contentTypes.ts
β βββ contexts
β β βββ AuthContext.tsx
β β βββ ContentContext.tsx
β βββ featureFlags.ts
β βββ index.css
β βββ main.tsx
β βββ tests
β β βββ App.test.tsx
β β βββ components
β β β βββ Article.test.tsx
β β β βββ Categories.test.tsx
β β β βββ FeatureCard.test.tsx
β β β βββ Footer.test.tsx
β β β βββ Header.test.tsx
β β β βββ Home.test.tsx
β β β βββ MainContent.test.tsx
β β β βββ __snapshots__
β β β βββ Header.test.tsx.snap
β β βββ reducer.test.ts
β β βββ vitest.setup.ts
β βββ utils.ts
β βββ vite-env.d.ts
βββ tailwind.config.js
βββ tsconfig.json
βββ tsconfig.node.json
βββ vite.config.ts
.
File | Summary |
---|---|
tsconfig.json | Configures TypeScript for Preact in web-dev-focused repo, emphasizing type safety and module consistency. |
index.html | The index.html serves as the entry point, integrating external styles and loading the main Preact application. |
postcss.config.js | postcss.config.js` configures PostCSS for Tailwind CSS integration and vendor prefixing, enhancing the project's CSS workflow. |
vite.config.ts | The vite.config.ts orchestrates module bundling and test setup, integrating Preact and enforcing CSS module scope within the web app architecture. |
package.json | WILL BE UPDATED IN FUTURE. |
aggregateFiles.js | This script is made to 'support' codebase ingestion for AI; aggregates data files, manages dependencies, builds UI components. |
tsconfig.node.json | The tsconfig.node.json configures TypeScript for Node.js specific files in the project, ensuring correct type support and module resolution. |
tailwind.config.js | The tailwind.config.js configures Tailwind CSS for UI styling, specifying content paths and theme extensions in the web application's frontend architecture. |
package-lock.json | WILL BE UPDATED IN FUTURE. |
src
File | Summary |
---|---|
utils.ts | THIS FILE WILL BE REMOVED IN THE FUTURE. WE USED THIS WHEN WE HAD THE APPLICATION MOCKED WHILE VALIDATING DATA STRUCTURE |
app.tsx | THIS SECTION WILL BE UPDATED IN THE FUTURE.. |
main.tsx | Entry point initializes web app by rendering the top-level App component, integrating styles from index.css . |
contentRenderer.tsx | This codebase manages dynamic rendering of structured content, translating various element types like headers, paragraphs, and lists into corresponding JSX components within our content management feature of the wider web app. |
vite-env.d.ts | The vite-env.d.ts file provides TypeScript type definitions for Vite, supporting efficient development within a Vite-based project. |
contentParser.ts | Content parser transforms raw text into structured elements, enriching the our rendering pipeline. |
content.ts | The code provides admin-focused data structure for a website's CMS, handling article and category management. WILL BE REMOVED IN THE FUTURE AS WE MOVE AWAY FROM MOCKED PROTOTYPE AND FURTHER INTEGRATE OUR BACKEND. |
api.ts | THIS INFORMATION WILL BE UPDATED IN THE FUTURE. |
featureFlags.ts | The provided code snippet likely pertains to the front-end part of a web-based platform, designed for Imperfect Gamers. Key components include administrative tools (dashboard, article/category management, logs, recycle bin), content viewing (articles, categories), and UI elements (context menu, error handling). The src/components directory is indicative of a React or Preact web application highlighting a component-based architecture. |
index.css | The code snippet's function within the wider Imperfect-Gamers-Site-Support architecture is to manage administrative tasks like article and category creation, editing, and history viewing, as part of a basic Content Management System for gaming-related content. |
contentTypes.ts | Defines content model interfaces for our content management system, enabling structured rich text representation for front-end rendering. |
src.components
File | Summary |
---|---|
AdminArticleHistoryView.tsx | AdminArticleHistoryView visualizes an article's edit history within the content management system, aiding in moderation and content oversight. |
AdminEditCategory.tsx | This JavaScript-based module, aggregateFiles.js, combines multiple files for the Imperfect Gamers Site, supporting ingestion for AI. |
AdminError.tsx | Provides an admin-specific error boundary component that displays a message and a link back to the admin dashboard. |
ToastContainer.tsx | Manages toast notifications by rendering and dismissing them in a UI overlay component. |
ErrorBoundary.tsx | Default ErrorBoundary component encapsulates child components, providing a fallback UI and capturing JavaScript errors anywhere in their child component tree. |
ArticleView.tsx | Displays detailed view of an article, with navigation and dynamic content rendering in the web application. |
Article.tsx | Article component: Manages article visibility and lifecycle, provides navigation via breadcrumb, and accesses content context for rendering articles. |
Header.tsx | The Header.tsx component provides navigation and search functionality, dynamically rendering feature-specific links based on feature flags. |
AdminLogs.tsx | The AdminLogs.tsx component handles the admin view of change logs, with functionality to fetch, filter, sort, and display article edit history and details within the imperfect gamers support site's admin panel. |
CategoryItems.tsx | Displays filtered articles by category with navigational breadcrumbs in a web support application. |
Toast.tsx | The Toast.tsx component manages user notification messages, displaying them briefly within the UI architecture, currently unused within the application until more immediate tasks are complete. |
Footer.tsx | The code defines a stylized Footer component for our CMS, dynamically rendering copyrights and navigation links from a content model. |
MainContent.tsx | THIS WILL BE UPDATED IN THE FUTURE. |
TextDiffViewer.tsx | TextDiffViewer.tsx` is a UI component for visualizing text differences, used within the admin-related features of the site support admin portal. |
AdminCreateArticle.tsx | THIS WILL BE UPDATED IN THE FUTURE. |
AccessRestricted.tsx | This AccessRestricted.tsx component displays a message for unauthorized access within a web application's UI layer. |
Breadcrumb.tsx | THIS WILL BE UPDATED IN THE FUTURE. |
Section.tsx | The Section.tsx component dynamically generates a part of the UI with multiple FeatureCard s, filtering them based on a search query. |
AdminRecycleBin.tsx | THIS WILL BE UPDATED IN THE FUTURE. |
SkeletonLoader.tsx | The component SkeletonLoader.tsx provides a UI placeholder during async data loading in the site's content sections. |
Admin.tsx | Admin.tsx provides an admin login interface leveraging the AuthContext for authentication within the management console. |
NotFound.tsx | The NotFound.tsx component provides a user-friendly 404 error page within the Preact application, offering redirection to the home page. |
AdminDashboard.tsx | This is part the authenticated view for admin, providing a content management interface for administrators, with components for article and category management, history tracking, and more. |
FeatureCard.tsx | THIS SECTION WILL BE UPDATED IN THE FUTURE. |
toastContext.tsx | Implements toast notifications system; manages messages and lifecycle within the site's UI context. |
ContextMenu.tsx | This ContextMenu.tsx component provides an interactive context menu with customizable options, auto-focus, and click-away-to-close functionality, essential for user interfaces in our app's architecture. |
AdminCreateCategory.tsx | This component allows administrators to create new categories within the site, ensuring that the chosen name is unique before submission and updating the global ContentContext upon successful creation. |
Categories.tsx | The Categories.tsx component handles rendering category sections from the context in a navigable list, utilizing breadcrumbs for site navigation. |
AdminEditArticle.tsx | THIS SECTION WILL BE UPDATED IN THE FUTURE. |
Home.tsx | The Home.tsx component serves as the entry point to the user's help center, displaying category cards that link to their respective content, styled with a responsive gradient UI. |
src.components.models
File | Summary |
---|---|
userModel.ts | The code represents a mock authentication model in a web app's architecture, defining user roles and simulating login/logout actions. This will be removed in the future as we move forward with our backend integration. |
src.contexts
File | Summary |
---|---|
AuthContext.tsx | Provides user authentication management for the site via context, enabling login, logout, token verification, and user status tracking. |
ContentContext.tsx | Core Post-Authentication component of our Preact-based web application, providing admin interfaces for content management and user access control. |
- Our team that holds it down and inspires... alongside the community and users that make it all possible.