MyClub/INSTALLATION_GUIDE.md

📦 Installation Guide - MyUIbrix Elementor Features

Quick Setup

Step 1: Install Frontend Dependencies

cd frontend
npm install react-markdown react-syntax-highlighter
npm install --save-dev @types/react-syntax-highlighter

Step 2: Backend Routes Setup

Add to your main.go:

import "your-app/internal/controllers"

// Setup documentation routes
docsController := controllers.NewDocsController("./DOCS")
adminDocs := router.Group("/api/v1/admin/docs")
adminDocs.Use(middleware.RequireAuth())
adminDocs.Use(middleware.RequireAdmin())
{
    adminDocs.GET("/file/*filepath", docsController.GetDocFile)
    adminDocs.GET("/list", docsController.ListDocFiles)
    adminDocs.GET("/search", docsController.SearchDocs)
}

Step 3: Add Admin Route

In your admin routes file (e.g., frontend/src/App.tsx):

import DevDocsPage from './pages/admin/DevDocsPage';

// Add route
<Route path="/admin/docs" element={<DevDocsPage />} />

Step 4: Add Navigation Link

In your admin navigation component:

import { FiBook } from 'react-icons/fi';

<NavLink to="/admin/docs">
  <HStack>
    <Icon as={FiBook} />
    <Text>Developer Docs</Text>
  </HStack>
</NavLink>

Step 5: Verify Files

Ensure all these files exist:

• ✅ frontend/src/components/editor/InlineTextEditor.tsx
• ✅ frontend/src/components/editor/CustomCSSEditor.tsx
• ✅ frontend/src/components/editor/ColumnLayoutManager.tsx
• ✅ frontend/src/components/editor/ContextualAdminLinks.tsx
• ✅ frontend/src/components/editor/VisualStylePanel.tsx (enhanced)
• ✅ frontend/src/pages/admin/DevDocsPage.tsx
• ✅ internal/controllers/docs_controller.go
• ✅ All .md files in /DOCS

---

Testing

Test Documentation Viewer

1. Navigate to /admin/docs
2. Should see list of documentation files
3. Click any document to view
4. Test search functionality
5. Try downloading a document

Test Elementor Features

1. Go to any page (e.g., homepage)
2. Add ?myuibrix=edit to URL
3. Click edit button (bottom left)
4. Select any element
5. Test all 5 tabs:
   • Content
   • Style
   • Layout
   • CSS
   • Admin

Test Inline Editor

1. In edit mode, click any text
2. Toolbar should appear
3. Test Bold, Italic, Underline
4. Test link insertion
5. Changes should auto-save

Test Column Layouts

1. Select element
2. Open Layout tab
3. Choose a template
4. Element should split into columns
5. Save and reload to verify persistence

Test Custom CSS

1. Select element
2. Open CSS tab
3. Write custom CSS
4. Enable preview
5. Apply and save

---

Troubleshooting

"Module not found" errors

Solution: Install missing dependencies

npm install react-markdown react-syntax-highlighter
npm install --save-dev @types/react-syntax-highlighter

Documentation viewer shows "Document Not Found"

Solution: Check backend routes are configured and DOCS folder is accessible

Custom CSS not applying

Solution:

• Check for syntax errors
• Enable preview mode first
• Verify CSS is valid
• Check browser console for errors

Inline editor not appearing

Solution:

• Ensure element has proper data-element attribute
• Check if edit mode is active
• Verify admin permissions

---

Configuration

Environment Variables

No additional environment variables needed.

Database

No database migrations required for these features.

Permissions

All features require admin authentication.

---

Deployment

Development

# Frontend
cd frontend
npm run dev

# Backend
go run main.go

Production

# Frontend
cd frontend
npm run build

# Backend
go build -o app main.go
./app

Docker

If using Docker, ensure DOCS folder is included:

COPY DOCS /app/DOCS

---

Uninstallation

To remove these features:

1. Remove frontend components:

   rm frontend/src/components/editor/InlineTextEditor.tsx
   rm frontend/src/components/editor/CustomCSSEditor.tsx
   rm frontend/src/components/editor/ColumnLayoutManager.tsx
   rm frontend/src/components/editor/ContextualAdminLinks.tsx
   rm frontend/src/pages/admin/DevDocsPage.tsx
   

2. Remove backend controller:

   rm internal/controllers/docs_controller.go
   

3. Remove routes from main.go

4. Remove navigation link

5. Revert VisualStylePanel.tsx changes

---

Support

For issues:

1. Check /admin/docs for documentation
2. Review COMPLETE_IMPLEMENTATION_SUMMARY.md
3. Check browser console for errors
4. Verify all dependencies installed

---

Status: ✅ Ready for Installation