Footer Build Information Implementation Guide

Overview

This document describes the implementation of an enhanced footer that displays build version and build date information, along with a link to MarkHazleton.com. The implementation follows ASP.NET Core best practices using ViewComponents for clean separation of concerns.

Implementation Summary

The footer enhancement includes:

• Build Version Display: Shows the current assembly version
• Build Date Display: Shows when the application was last built
• MarkHazleton.com Link: External link to the main website
• Footer Navigation: Moved Documentation link from top navigation to footer alongside Privacy Policy
• Responsive Design: Mobile-friendly layout using Bootstrap
• Clean Architecture: Implemented using ASP.NET Core ViewComponents

Architecture Components

1. BuildInfoService

Location: Services/BuildInfoService.cs

The BuildInfoService is responsible for retrieving build information from the application assembly.

public interface IBuildInfoService
{
    string GetVersion();
    DateTime GetBuildDate();
    string GetFormattedBuildInfo();
}

Key Features:

• Retrieves version from assembly metadata
• Gets build date from assembly file's last write time
• Provides formatted output for display
• Registered as a singleton service in dependency injection

Build Date Logic:

1. Primary: Uses File.GetLastWriteTime() on the executing assembly location
2. Fallback: Uses entry assembly if executing assembly location is unavailable
3. Final Fallback: Uses current time if no assembly location is found

2. FooterViewComponent

Location: ViewComponents/FooterViewComponent.cs

The ViewComponent encapsulates the footer logic and provides data to the view.

public class FooterViewComponent : ViewComponent
{
    private readonly IBuildInfoService _buildInfoService;
    
    public IViewComponentResult Invoke()
    {
        var model = new FooterViewModel
        {
            FormattedBuildInfo = _buildInfoService.GetFormattedBuildInfo()
        };
        return View(model);
    }
}

Benefits of ViewComponent Approach:

• Clean separation of concerns
• Testable business logic
• Reusable across multiple layouts
• Dependency injection support

3. Footer View Template

Location: Views/Shared/Components/Footer/Default.cshtml

The Razor view template renders the footer with responsive Bootstrap layout.

Layout Structure:

• 3-Column Desktop Layout: Copyright/Build Info | MarkHazleton.com Link | Privacy Policy
• Stacked Mobile Layout: Elements stack vertically on smaller screens
• Bootstrap Icons: Visual enhancements with bi-c-circle, bi-globe, bi-shield-check
• External Link Handling: MarkHazleton.com opens in new tab

Configuration Files Updated

1. Project File Enhancement

File: WebSpark.ArtSpark.Demo.csproj

<PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <Version>1.0.0</Version>
    <AssemblyVersion>1.0.0.0</AssemblyVersion>
    <FileVersion>1.0.0.0</FileVersion>
</PropertyGroup>

2. Service Registration

File: Program.cs

// Add Build Info Service
builder.Services.AddSingleton<IBuildInfoService, BuildInfoService>();

3. Layout Integration

File: Views/Shared/_Layout.cshtml

The footer is now rendered using the ViewComponent:

@await Component.InvokeAsync("Footer")

Build Date Accuracy

How Build Date is Determined

The build date is retrieved using the following priority:

1. Assembly Last Write Time (Primary Method)

   var assemblyLocation = assembly.Location;
   _buildDate = File.GetLastWriteTime(assemblyLocation);
   

2. Entry Assembly Fallback

   var entryAssembly = Assembly.GetEntryAssembly();
   _buildDate = File.GetLastWriteTime(entryAssembly.Location);
   

3. Current Time Fallback

   _buildDate = DateTime.Now;
   

Build Date Scenarios

Scenario	Build Date Source	Accuracy
Development (dotnet run)	Assembly file timestamp	✅ Accurate to last build
Published Application	Published assembly timestamp	✅ Accurate to publish time
Self-Contained Deployment	Executable timestamp	✅ Accurate to deployment
Docker Container	Container build timestamp	✅ Accurate to container build

Display Format

The build information is formatted as:

v{version} - Built {date:MM/dd/yyyy}

Example output: v1.0.0.0 - Built 06/01/2025

Responsive Design Details

Desktop Layout (≥768px)

| © 2025 - WebSpark.ArtSpark | MarkHazleton.com | Privacy Policy |
| v1.0.0.0 - Built 06/01/2025 |                  |                 |

Mobile Layout (<768px)

© 2025 - WebSpark.ArtSpark
v1.0.0.0 - Built 06/01/2025

MarkHazleton.com

Privacy Policy

CSS Classes Used

• bg-dark text-light: Dark footer theme
• border-top mt-auto py-4: Top border and spacing
• container-fluid px-3 px-lg-4: Responsive container
• row align-items-center gy-2: Bootstrap grid with gap
• col-md-4 col-12: Responsive columns (1/3 on desktop, full on mobile)
• text-center text-md-center text-sm-start: Responsive text alignment
• text-body-secondary: Muted text color
• text-decoration-none: Remove link underlines

Testing and Validation

Manual Testing Checklist

• Footer displays on all pages
• Build version shows correct assembly version
• Build date shows realistic timestamp
• MarkHazleton.com link opens in new tab
• Privacy Policy link navigates correctly
• Layout is responsive on mobile devices
• Icons display correctly (Bootstrap Icons required)

Build Version Verification

To verify the build version is correct:

1. Check project file version: <Version>1.0.0</Version>
2. Build the application: dotnet build
3. Check footer displays: v1.0.0.0 - Built [current date]

Build Date Verification

To verify build date accuracy:

1. Note current time before building
2. Run dotnet build or dotnet publish
3. Check footer build date matches build time
4. Rebuild and verify date updates

Future Enhancements

Potential Improvements

1. Git Integration

   • Show commit hash in footer
   • Display branch name
   • Include build number from CI/CD

2. Environment Information

   • Show current environment (Development, Staging, Production)
   • Display deployment timestamp vs. build timestamp

3. Version Management

   • Automatic version increment on build
   • Semantic versioning integration
   • Release notes linking

Implementation Considerations

1. Performance: BuildInfoService is registered as singleton for optimal performance
2. Caching: Assembly information is cached at application startup
3. Error Handling: Multiple fallback strategies ensure footer always displays
4. Localization: Date format can be localized for international deployments

Troubleshooting

Common Issues

Build Date Shows Current Time Instead of Build Time

• Verify assembly location is accessible
• Check file system permissions
• Ensure application is properly built/published

Version Shows "1.0.0" Instead of Project Version

• Verify <Version> in project file
• Ensure <AssemblyVersion> is set
• Rebuild application after version changes

Footer Not Displaying

• Verify ViewComponent is registered
• Check view file exists at correct path
• Ensure layout includes @await Component.InvokeAsync("Footer")

Responsive Layout Issues

• Verify Bootstrap CSS is loaded
• Check Bootstrap version compatibility
• Validate CSS classes are applied correctly

Conclusion

The footer build information implementation provides users with transparency about the application version and build date while maintaining a clean, responsive design. The ViewComponent architecture ensures maintainability and testability while following ASP.NET Core best practices.

Footer Build Info & Navigation Implementation

Overview

This document details the implementation of footer build information display and navigation structure for the WebSpark.ArtSpark.Demo application.

Features Implemented

1. Build Information Display

• Version Display: Shows application version from assembly metadata
• Build Date: Displays the last build date using file modification time
• External Link: Links to MarkHazleton.com with Bootstrap icon
• Responsive Design: Adapts layout for mobile and desktop viewports

2. Footer Navigation

• Relocated Documentation: Moved Documentation link from top navigation to footer
• Navigation Section: Created dedicated footer navigation with Privacy Policy and Documentation links
• Consistent Styling: Maintains visual consistency with existing footer elements
• Mobile-Friendly: Responsive navigation that stacks vertically on mobile devices