Link Management
Relevant source files
The following files were used as context for generating this wiki page:
Link Management provides the structure and rendering logic for a site owner's external references. It displays these references as interactive buttons on the home page, allowing visitors to navigate to the owner's social profiles or contact methods.
This module integrates with the core web application to ensure that links are presented consistently alongside the user's bio.
Sources: apps/web/spec/links.md:1-12, apps/web/spec/web.md:1-10
Data Structure
Links are defined by a specific data structure that pairs a human-readable label with a destination URL.
SiteLink Schema
The system uses the SiteLink type to enforce data consistency.
| Field | Type | Description |
|---|---|---|
label | string | The text displayed on the button (e.g., "GitHub"). |
href | string | The destination URL or URI (e.g., "https://github.com/...%22). |
Sources: apps/web/src/features/links/links.data.ts:1-10
Hardcoded Implementation
Currently, links are hardcoded in the web application's data layer. Future iterations aim to fetch this data from the API.
export const links: SiteLink[] = [
{ label: "GitHub", href: "https://github.com/markus-azer%22 },
{ label: "LinkedIn", href: "https://www.linkedin.com/in/markusazer/" },
];
Sources: apps/web/src/features/links/links.data.ts:4-10
Architecture and Rendering
The Link Management system follows a component-based architecture within the Next.js framework. It utilizes a dedicated functional component to transform link data into accessible UI elements.
Components and Flow
The Links component accepts an array of SiteLink objects and maps them to a navigation list.
The diagram shows how link data flows from the page level through the rendering component to the final DOM elements.
Sources: apps/web/src/app/page.tsx:1-18, apps/web/src/features/links/components/links.tsx:1-17
Implementation Details
- Navigation Wrapper: The component uses a
<nav>element with anaria-label="Links"for accessibility. - Styling: Buttons use an "outline" variant and "lg" size. They are arranged in a flexible container with a gap of 3 units.
- External Indicators: Each link includes an
ArrowUpRighticon to signify an external navigation.
Sources: apps/web/src/features/links/components/links.tsx:4-17
Integration and Rules
Link Management is a core requirement for the web platform's home page functionality.
Functional Rules
The system must adhere to specific behavioral requirements to ensure a valid user experience.
| Rule ID | Requirement |
|---|---|
| [RULE-LINKS-001] | Every link must be shown as a button that a visitor can open. |
| [RULE-WEB-002] | A visitor must see links for the configured site handle on the home page. |
Sources: apps/web/spec/links.md:9-12, apps/web/spec/web.md:14-15
Sequence of Home Page Rendering
The home page orchestrates the rendering of links alongside bio information.
This sequence illustrates that link rendering is a synchronous part of the page construction process.
Sources: apps/web/src/app/page.tsx:10-18
Testing and Validation
The system includes automated tests to verify that links are correctly transformed into HTML and that the data is presented accurately.
Verification Logic
Tests ensure that for every provided link object, the resulting HTML contains the correct href attribute and the expected label text.
it("RULE-LINKS-001: A visitor opens the home page → each link is shown as a button they can open.", () => {
const html = renderToStaticMarkup(
createElement(Links, {
links: [
{ label: "GitHub", href: "https://github.com/ada%22 },
{ label: "Email", href: "mailto:ada@example.com" },
],
}),
);
expect(html).toContain('href="https://github.com/ada%22%27);
expect(html).toContain("GitHub");
});
Sources: apps/web/test/features/links/links.test.ts:7-25
Summary
Link Management facilitates the display of the site owner's external presence. It relies on a simple SiteLink data structure and a specialized React component to render accessible, icon-enhanced buttons. While currently using hardcoded data, the module is architected to integrate seamlessly with the main web page and satisfies strict functional rules regarding visibility and interactivity.