Conditional Logic for Content
The 'status' property values
Value | isAdmin? | isPublic? |
To-Do | true | false |
Dynamic Route Mapping for Content Paths
Problem Statement
When using wiki-style backlinks in markdown content (e.g.,
[[vocabulary/Software Development]]
), we need a flexible system to map content paths to web routes. For example, content from content/vocabulary/software-development
should be accessible at /more-about/software-development
.Implementation Requirements
- Create a centralized route manager that serves as a Single Source of Truth
- Support dynamic configuration of route mappings without code changes
- Provide an admin interface for managing mappings
- Ensure backward compatibility with existing backlinks
- Follow modular design principles with comprehensive documentation
Solution Architecture
1. Route Manager Module
Created a centralized route management system (
site/src/utils/routing/routeManager.ts
): typescript
interface RouteMapping {
contentPath: string; // Content directory path prefix
routePath: string; // Corresponding web route
}
// Default mappings with common content types
const defaultRouteMappings: RouteMapping[] = [
{
contentPath: 'vocabulary',
routePath: 'more-about'
},
{
contentPath: 'lost-in-public/prompts',
routePath: 'prompts'
}
];
// Core transformation function
export function transformContentPathToRoute(path: string): string {
// Implementation details...
}
// API for managing mappings
export function addRouteMapping(contentPath: string, routePath: string): void {
// Implementation details...
}
2. Backlinks Plugin Integration
Updated the remark-backlinks plugin (
site/src/utils/markdown/remark-backlinks.ts
) to use the route manager: typescript
import { transformContentPathToRoute } from '../routing/routeManager';
// Within the transformer function:
const transformedPath = transformContentPathToRoute(path);
3. Admin Interface
Created a component (
site/src/components/admin/RouteManager.astro
) and admin page (site/src/pages/admin/route-manager.astro
) for managing route mappings: astro
<div class="route-manager">
<!-- Display current mappings -->
<table>
{routeMappings.map((mapping) => (
<!-- Table rows for each mapping -->
))}
</table>
<!-- Form for adding new mappings -->
<form id="add-mapping-form">
<!-- Input fields -->
</form>
</div>
4. API Endpoint
Implemented a RESTful API (
site/src/pages/api/route-mappings.ts
) for programmatic management: typescript
export const GET: APIRoute = async () => {
// Return all mappings
};
export const POST: APIRoute = async ({ request }) => {
// Handle adding/removing mappings
};
Benefits
- Flexibility: Content editors can configure route mappings without developer intervention
- Consistency: All backlinks follow the same routing rules
- Modularity: Each component has a single responsibility
- Extensibility: Easy to add support for new content types
Usage Examples
Before Implementation
markdown
[[vocabulary/Software Development]] → /content/vocabulary/software-development
After Implementation
markdown
[[vocabulary/Software Development]] → /more-about/software-development
Next Steps
- Add support for more complex path transformations
- Implement caching for better performance
- Create automated tests for the route manager
- Extend the admin UI with additional features like bulk operations