diff --git a/HELP_PAGE_RECOMMENDATION.md b/HELP_PAGE_RECOMMENDATION.md new file mode 100644 index 00000000..252db196 --- /dev/null +++ b/HELP_PAGE_RECOMMENDATION.md @@ -0,0 +1,78 @@ +# Help & Documentation Page Recommendation + +## Decision: **ONE COMBINED PAGE** + +### Analysis + +**Current Structure:** +- `/help` - Help & Support (placeholder) +- `/help/docs` - Documentation (placeholder) +- Both shown as separate menu items in sidebar + +**Documentation Available:** +- `/docs` folder with comprehensive technical documentation +- 6 main documentation files covering architecture, frontend, backend, AI functions +- Well-organized markdown structure + +**Recommendation: Single Combined Page** + +### Reasons: + +1. **User Experience** + - Users don't need to decide between "Help" and "Documentation" + - All information in one place + - Better discoverability + +2. **Content Overlap** + - Help content often references documentation + - Documentation includes help content + - No clear boundary between the two + +3. **Modern Pattern** + - Most modern apps combine them (GitHub, Stripe, Vercel, etc.) + - Single entry point is cleaner + - Better for SEO and navigation + +4. **WordPress Plugin Pattern** + - Uses subpages (`?sp=help`, `?sp=docs`) + - Suggests they're meant to be together + - Can maintain consistency + +5. **Content Size** + - Documentation isn't so large it needs separation + - Can be organized with tabs/sections + +### Proposed Structure: + +**Single `/help` page with sections:** + +1. **Getting Started** (Tab/Section) + - Quick start guide + - Common workflows + - Video tutorials + - Setup instructions + +2. **Documentation** (Tab/Section) + - Architecture & Tech Stack + - Frontend Documentation + - Backend Documentation + - AI Functions + - API Reference + +3. **FAQ & Troubleshooting** (Tab/Section) + - Common questions + - Troubleshooting guides + - Known issues + +4. **Support** (Tab/Section) + - Contact support + - Community resources + - Feature requests + +### Implementation: + +- Use tabs or sidebar navigation within the page +- Smooth transitions between sections +- Search functionality across all content +- Mobile-responsive design + diff --git a/frontend/src/components/ui/accordion/Accordion.tsx b/frontend/src/components/ui/accordion/Accordion.tsx new file mode 100644 index 00000000..e563207f --- /dev/null +++ b/frontend/src/components/ui/accordion/Accordion.tsx @@ -0,0 +1,64 @@ +import React, { useState, ReactNode } from 'react'; +import { ChevronDownIcon } from '../../../icons'; + +interface AccordionItemProps { + title: string; + children: ReactNode; + defaultOpen?: boolean; + className?: string; +} + +export const AccordionItem: React.FC = ({ + title, + children, + defaultOpen = false, + className = '', +}) => { + const [isOpen, setIsOpen] = useState(defaultOpen); + + return ( +
+ +
+
+ {children} +
+
+
+ ); +}; + +interface AccordionProps { + children: ReactNode; + className?: string; + allowMultiple?: boolean; +} + +export const Accordion: React.FC = ({ + children, + className = '', + allowMultiple = true, +}) => { + return ( +
+ {children} +
+ ); +}; + +export default Accordion; + diff --git a/frontend/src/components/ui/accordion/index.ts b/frontend/src/components/ui/accordion/index.ts new file mode 100644 index 00000000..74edd82a --- /dev/null +++ b/frontend/src/components/ui/accordion/index.ts @@ -0,0 +1,3 @@ +export { Accordion, AccordionItem } from './Accordion'; +export { default } from './Accordion'; + diff --git a/frontend/src/layout/AppSidebar.tsx b/frontend/src/layout/AppSidebar.tsx index a041e8b4..399ae86a 100644 --- a/frontend/src/layout/AppSidebar.tsx +++ b/frontend/src/layout/AppSidebar.tsx @@ -154,14 +154,9 @@ const AppSidebar: React.FC = () => { items: [ { icon: , - name: "Help & Support", + name: "Help & Documentation", path: "/help", }, - { - icon: , - name: "Documentation", - path: "/help/docs", - }, ], }, ], []); diff --git a/frontend/src/pages/Help/Help.tsx b/frontend/src/pages/Help/Help.tsx index cf18c062..d38d97f5 100644 --- a/frontend/src/pages/Help/Help.tsx +++ b/frontend/src/pages/Help/Help.tsx @@ -1,22 +1,586 @@ +import { useState, useRef, useEffect } from "react"; import PageMeta from "../../components/common/PageMeta"; -import ComponentCard from "../../components/common/ComponentCard"; +import { Accordion, AccordionItem } from "../../components/ui/accordion"; +import { Card } from "../../components/ui/card"; +import Badge from "../../components/ui/badge/Badge"; +import { + ListIcon, + BoltIcon, + CheckCircleIcon, + ArrowRightIcon, + FileIcon, + GroupIcon +} from "../../icons"; + +interface TableOfContentsItem { + id: string; + title: string; + level: number; +} export default function Help() { + const [activeSection, setActiveSection] = useState(null); + const sectionRefs = useRef>({}); + + const tableOfContents: TableOfContentsItem[] = [ + { id: "getting-started", title: "Getting Started", level: 1 }, + { id: "quick-start", title: "Quick Start Guide", level: 2 }, + { id: "workflow-overview", title: "Workflow Overview", level: 2 }, + { id: "planner-module", title: "Planner Module", level: 1 }, + { id: "keywords", title: "Keywords Management", level: 2 }, + { id: "clusters", title: "Keyword Clusters", level: 2 }, + { id: "ideas", title: "Content Ideas", level: 2 }, + { id: "writer-module", title: "Writer Module", level: 1 }, + { id: "tasks", title: "Tasks Management", level: 2 }, + { id: "content", title: "Content Generation", level: 2 }, + { id: "images", title: "Image Generation", level: 2 }, + { id: "automation", title: "Automation Setup", level: 1 }, + { id: "faq", title: "Frequently Asked Questions", level: 1 }, + ]; + + const scrollToSection = (id: string) => { + const element = sectionRefs.current[id]; + if (element) { + const offset = 100; // Account for fixed header + const elementPosition = element.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - offset; + + window.scrollTo({ + top: offsetPosition, + behavior: "smooth" + }); + setActiveSection(id); + } + }; + + const faqItems = [ + { + question: "How do I add keywords to my workflow?", + answer: "Navigate to Planner > Keyword Opportunities. Browse available keywords, use filters to find relevant ones, and click 'Add to Workflow' on individual keywords or use bulk selection to add multiple keywords at once." + }, + { + question: "What is the difference between Keywords and Clusters?", + answer: "Keywords are individual search terms. Clusters are groups of related keywords that are organized together for content planning. Clusters help you create comprehensive content that covers multiple related search queries." + }, + { + question: "How does auto-clustering work?", + answer: "Auto-clustering uses AI to analyze your keywords and group them based on semantic similarity and search intent. Select keywords in the Keywords page and click 'Auto Cluster' to automatically organize them into clusters." + }, + { + question: "How do I generate content ideas from clusters?", + answer: "Go to Planner > Clusters, select one or more clusters, and click 'Generate Ideas'. The AI will analyze the keywords in each cluster and create content ideas that cover the topics comprehensively." + }, + { + question: "What is the workflow from keywords to published content?", + answer: "1) Add keywords from Opportunities, 2) Cluster related keywords, 3) Generate content ideas from clusters, 4) Create tasks from ideas, 5) Generate content from tasks, 6) Generate images, 7) Review and publish. You can automate most of these steps in the Automation Setup." + }, + { + question: "How do I set up automation?", + answer: "Go to Dashboard > Automation Setup section. Enable automation for each step (Keywords, Ideas, Content, Images) and configure settings like how many keywords to process per cycle. Advanced settings are available in Schedules page." + }, + { + question: "Can I edit AI-generated content?", + answer: "Yes! All AI-generated content can be edited. Go to Writer > Content, click on any content piece to open the editor, and make your changes. You can also regenerate content if needed." + }, + { + question: "How are images generated?", + answer: "Images are generated using AI based on your content. Go to Writer > Images to see all generated images. You can regenerate images, view them in a modal, and manage them per content piece." + }, + { + question: "What is the difference between Tasks and Content?", + answer: "Tasks are content ideas that have been converted into actionable writing assignments. Content is the actual generated articles/posts created from tasks. Tasks show what needs to be written, Content shows what has been written." + }, + { + question: "How do I filter data by site or sector?", + answer: "Use the Site and Sector selectors in the page header. Select a site to filter all data to that site. Select a sector for further filtering. The 'All Sectors' option shows all sectors for the selected site." + }, + { + question: "What are column visibility settings?", + answer: "Each table page has a column selector (icon in the header). Click it to show/hide columns. Your preferences are saved and persist across page reloads. Use 'Show All' to quickly make all columns visible." + }, + { + question: "How do I sort table data?", + answer: "Click on any column header that has a sort icon. Click once for ascending order, click again for descending order. The current sort is indicated by an arrow icon in the column header." + }, + { + question: "What is the Thinker module?", + answer: "The Thinker module manages AI prompts, author profiles, and content strategies. Use it to customize how AI generates content, define writing styles, and create reusable prompt templates." + }, + { + question: "How do I manage my credits?", + answer: "Go to Billing > Credits to view your credit balance, purchase more credits, and see credit usage. Credits are used for AI operations like content generation, clustering, and image generation." + }, + { + question: "Can I export my data?", + answer: "Yes! Most table pages have export functionality. Look for the export button in the action bar. You can export data as CSV for keywords, clusters, content, and other entities." + }, + { + question: "How do I bulk delete items?", + answer: "Select multiple items using checkboxes, then use the bulk actions dropdown to delete selected items. Bulk actions are available on most table pages for efficient management." + }, + { + question: "What happens if I delete a cluster?", + answer: "Deleting a cluster does not delete the keywords in it. Keywords will become unclustered and can be re-clustered later. Content ideas associated with the cluster will also be affected." + }, + { + question: "How do I search for specific content?", + answer: "Use the search bar at the top of each table page. Search works across multiple fields depending on the page. For example, on Keywords page you can search by keyword text, on Content page you can search by title." + }, + { + question: "What filters are available?", + answer: "Filters vary by page. Common filters include: Status, Intent (for keywords), Difficulty, Volume range, Content Type, and Date ranges. Use the filter dropdowns to narrow down results." + }, + { + question: "How do I view content details?", + answer: "Click on any content item in the Content table to open the detailed view. Here you can see the full content, edit it, view associated images, see metadata, and manage publication status." + } + ]; + return ( <> - + - -
-

- Help & Support - Coming Soon -

-

- Documentation and support resources for getting started +

+ {/* Header */} +
+

+ Help & Documentation +

+

+ Complete guides and documentation to help you get the most out of IGNY8

- + + {/* Table of Contents */} + +

+ + Table of Contents +

+
+ {tableOfContents.map((item) => ( + + ))} +
+ + + {/* Getting Started Section */} +
(sectionRefs.current["getting-started"] = el)} className="mb-12 scroll-mt-24"> +

+ + Getting Started +

+ + + +
+

+ Welcome to IGNY8! Follow these steps to get started with content creation: +

+ +
+
+
+ 1 +
+
+

Set Up Your Site

+

+ Go to Settings > Sites and add your WordPress site. Configure the connection details and verify the integration. +

+
+
+ +
+
+ 2 +
+
+

Discover Keywords

+

+ Navigate to Planner > Keyword Opportunities. Browse the global keyword database and add relevant keywords to your workflow. +

+
+
+ +
+
+ 3 +
+
+

Organize Keywords

+

+ Go to Planner > Keywords and use Auto Cluster to group related keywords. This helps create comprehensive content. +

+
+
+ +
+
+ 4 +
+
+

Generate Ideas

+

+ Select clusters in Planner > Clusters and click Generate Ideas. AI will create content ideas based on your keywords. +

+
+
+ +
+
+ 5 +
+
+

Create Content

+

+ Ideas automatically become tasks. Go to Writer > Tasks, select tasks, and generate content. Review and edit as needed. +

+
+
+ +
+
+ 6 +
+
+

Generate Images

+

+ Go to Writer > Images and generate featured and in-article images for your content. Images are AI-generated based on your content. +

+
+
+ +
+
+ 7 +
+
+

Publish

+

+ Review your content in Writer > Content, make final edits, and publish to your WordPress site. +

+
+
+
+
+ + + +
+

+ IGNY8 follows a streamlined workflow from keyword discovery to published content: +

+ +
+ +

+ + Planner Module +

+

+ Discover keywords, organize them into clusters, and generate content ideas. This is where your content strategy begins. +

+ + + +

+ + Writer Module +

+

+ Convert ideas into tasks, generate content, create images, and publish to your WordPress site. +

+ +
+ +
+

+ Tip: You can automate most of this workflow! Go to Dashboard > Automation Setup to configure automatic processing. +

+
+
+ + +
+ + {/* Planner Module Section */} +
(sectionRefs.current["planner-module"] = el)} className="mb-12 scroll-mt-24"> +

+ + Planner Module +

+ + + +
+

+ Keywords are the foundation of your content strategy. Here's how to manage them: +

+ +
+
+ +
+

Adding Keywords

+

+ Go to Planner > Keyword Opportunities to browse the global keyword database. Use filters to find relevant keywords, then add them individually or in bulk. +

+
+
+ +
+ +
+

Organizing Keywords

+

+ Use Auto Cluster to automatically group related keywords. You can also manually assign keywords to clusters or create new clusters. +

+
+
+ +
+ +
+

Keyword Data

+

+ Each keyword includes volume, difficulty, intent, and status. Use column visibility to show/hide additional fields like updated dates and overrides. +

+
+
+
+
+ + + +
+

+ Clusters group related keywords together for comprehensive content planning: +

+ +
    +
  • Clusters help you create content that covers multiple related search queries
    • +
  • Auto-clustering uses AI to group keywords by semantic similarity
    • +
  • Each cluster shows total volume, keyword count, and associated ideas
    • +
  • Generate content ideas directly from clusters
    • +
+
+ + + +
+

+ Content ideas are AI-generated suggestions based on your keyword clusters: +

+ +
    +
  • Ideas include title, structure, content type, and target keyword
    • +
  • Ideas automatically convert to tasks in the Writer module
    • +
  • Filter ideas by status, cluster, content type, and structure
    • +
  • Edit ideas before they become tasks
    • +
+
+ + +
+ + {/* Writer Module Section */} +
(sectionRefs.current["writer-module"] = el)} className="mb-12 scroll-mt-24"> +

+ + Writer Module +

+ + + +
+

+ Tasks are content ideas converted into actionable writing assignments: +

+ +
+

Task Workflow:

+
    +
  1. Ideas from Planner automatically create tasks
    2. +
  2. Tasks show status: Pending, In Progress, Completed
    3. +
  3. Select tasks and generate content using AI
    4. +
  4. Content is created and linked to the task
    5. +
+
+
+ + + +
+

+ Generate, edit, and manage your content: +

+ +
+
+ Step 1 +
+

Generate Content

+

+ Select tasks and click "Generate Content". AI creates full articles based on the task requirements. +

+
+
+ +
+ Step 2 +
+

Review & Edit

+

+ Click on any content to open the editor. Make changes, adjust formatting, and refine the content. +

+
+
+ +
+ Step 3 +
+

Generate Images

+

+ Go to Images page and generate featured and in-article images for your content. +

+
+
+
+
+ + + +
+

+ AI-generated images for your content: +

+ +
    +
  • Featured images: Main image for your content
    • +
  • In-article images: Multiple images throughout the content
    • +
  • Click any image to view in full size
    • +
  • Regenerate images if needed
    • +
  • Images are automatically linked to content
    • +
+
+ + +
+ + {/* Automation Section */} +
(sectionRefs.current["automation"] = el)} className="mb-12 scroll-mt-24"> +

+ + Automation Setup +

+ + +

+ Automate your content creation workflow to save time and maintain consistency: +

+ +
+
+

Keywords Automation

+

+ Automatically add keywords from opportunities and cluster them: +

+
    +
  • Set how many keywords to process per cycle
    • +
  • Enable auto-clustering for new keywords
    • +
  • Configure cluster size limits
    • +
+
+ +
+

Ideas Automation

+

+ Automatically generate content ideas from clusters: +

+
    +
  • Auto-generate ideas when clusters are created
    • +
  • Set number of ideas per cluster
    • +
+
+ +
+

Content Automation

+

+ Automatically create tasks and generate content: +

+
    +
  • Auto-create tasks from ideas
    • +
  • Auto-generate content from tasks
    • +
+
+ +
+

Images Automation

+

+ Automatically generate images for content: +

+
    +
  • Auto-generate featured images
    • +
  • Auto-generate in-article images
    • +
+
+
+ +
+

+ Note: Configure automation in Dashboard > Automation Setup. For advanced scheduling, go to Schedules page. +

+
+ +
+ + {/* FAQ Section */} +
(sectionRefs.current["faq"] = el)} className="mb-12 scroll-mt-24"> +

+ + Frequently Asked Questions +

+ + + {faqItems.map((faq, index) => ( + +

+ {faq.answer} +

+ + ))} + +
+ + {/* Support Section */} + +
+

Still Need Help?

+

+ Can't find what you're looking for? Our support team is here to help. +

+
+ + +
+
+ +
); } -