🔗 Link Testing Demo

This page demonstrates the enhanced link functionality in the docs-angular system. Use this page to test both internal and external links.

⚡ Internal Links (Fast Client-Side Navigation)

These links should navigate instantly without page reload:

Documentation Links

• Documentation Home - Main documentation index
• Add Documentation Guide - How to add new docs
• Link Guidelines - Complete link formatting guide

🆕 Relative Links (NEW FEATURE)

These relative links are automatically converted to absolute paths:

• Documentation Home - Relative path to documentation
• Add Documentation Guide - Relative path to guide
• Link Guidelines - Relative path to guidelines

🆕 Internal Links in New Tab

These links open internal docs in new tabs within the docs-angular app:

New Tab Examples

• Documentation Home - Opens in new tab with icon
• Add Documentation Guide - Full title syntax
• Link Guidelines - Short syntax
• Configuration Guide - System configuration

System Documentation

• Enhanced Docs System - System architecture
• Navigation System - Navigation improvements
• Intelligent Guide System - Auto-guide system

App Links

• Applications Overview - All applications
• Singularity App - Singularity documentation
• Editor Web - Editor Web documentation
• Space Map - Space Map documentation

Project Links

• GoGrab Pulse - GoGrab Pulse project
• GoGrab Space - GoGrab Space project
• Theme System - Theme system documentation

Core Pages

• Getting Started - Getting started guide
• Troubleshooting - Troubleshooting guide

🌐 External Links (Open in New Tab)

These links should open in new tabs with external link icons:

Documentation Resources

• Angular Documentation - Official Angular docs
• Nx Documentation - Nx monorepo toolkit
• TypeScript Handbook - TypeScript documentation
• MDN Web Docs - Web development reference

Development Tools

• GitHub - Code repository hosting
• VS Code - Code editor
• Node.js - JavaScript runtime

Contact Links

• Email Support - Send us an email
• Phone Support - Call us directly

📎 Anchor Links (Same Page Navigation)

These links should scroll to sections on this page:

• Jump to Internal Links - Go to internal links section
• Jump to External Links - Go to external links section
• Jump to Testing Instructions - Go to testing section
• Jump to Performance Notes - Go to performance section

🧪 Testing Instructions

What to Test:

1. Internal Links:

   • Click any internal link above
   • ✅ Should navigate instantly without page reload
   • ✅ Should show smooth transitions between pages
   • ✅ Should maintain browser history (back button works)
   • ✅ Console should show: 🔗 Internal link clicked: /path - using Angular routing

2. 🆕 Relative Links (NEW):

   • Click any relative link above (starting with ../)
   • ✅ Should convert to absolute path automatically
   • ✅ Should navigate to correct destination (same as absolute links)
   • ✅ Should work within project boundaries (monorepo-aware)
   • ✅ Console should show: 🔗 Relative link processed: ../path → /absolute/path

3. External Links:

   • Click any external link above
   • ✅ Should open in new tab automatically
   • ✅ Should show external link icon next to the text
   • ✅ Should keep this page open in the original tab

4. Anchor Links:

   • Click any anchor link above
   • ✅ Should scroll to the target section smoothly
   • ✅ Should update URL with the fragment (#section-name)
   • ✅ Should work with browser back/forward

Performance Comparison:

Before (Old System):

• 🐌 Full page reload on every link click
• ⏱️ 2-3 seconds loading time
• 💔 Lost scroll position and application state
• 🔄 Server request for every navigation

After (New System):

• ⚡ Instant navigation for internal links
• ⏱️ <100ms transition time
• 💾 Preserved scroll position and state
• 🚀 Client-side routing only

🎯 Performance Notes

Internal Link Performance:

• Navigation Speed: ~50-100ms (vs 2-3 seconds)
• Network Requests: 0 additional requests
• Memory Usage: Minimal (reuses existing components)
• User Experience: Smooth, app-like navigation

External Link Security:

• target="_blank" - Opens in new tab
• rel="noopener noreferrer" - Prevents security vulnerabilities
• Visual indicator - Users know it's external before clicking

🔍 Debugging

If links aren't working as expected:

1. Check Browser Console for error messages
2. Look for routing logs like 🔗 Internal link clicked: ...
3. Verify link format follows the guidelines
4. Test in different browsers to ensure compatibility

✅ Expected Behavior Summary

🎉 Test completed? All links should now provide a fast, smooth, and secure navigation experience!

For more information, see the Link Guidelines or Add Documentation Guide.