Conditional Logic for Content

The ‘status’ property values

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

1. Create a centralized route manager that serves as a Single Source of Truth
2. Support dynamic configuration of route mappings without code changes
3. Provide an admin interface for managing mappings
4. Ensure backward compatibility with existing backlinks
5. 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):

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:

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:

<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:

export const GET: APIRoute = async () => {
  // Return all mappings
};

export const POST: APIRoute = async ({ request }) => {
  // Handle adding/removing mappings
};

Benefits

1. Flexibility: Content editors can configure route mappings without developer intervention
2. Consistency: All backlinks follow the same routing rules
3. Modularity: Each component has a single responsibility
4. Extensibility: Easy to add support for new content types

Usage Examples

Before Implementation

[[vocabulary/Software Development]] → /content/vocabulary/software-development

After Implementation

[[vocabulary/Software Development]] → /more-about/software-development

Next Steps

1. Add support for more complex path transformations
2. Implement caching for better performance
3. Create automated tests for the route manager
4. Extend the admin UI with additional features like bulk operations