Remote Executive Website - Project Overview

Project Type

This is a Deno Lume static site generator project, designed to build and serve the Remote Executive website (www.remote-executive.com).

Technology Stack

• Template Engine: Velociraptor Template (VTO) - A powerful and flexible templating engine
• Styling: Native CSS with PostCSS processing for modern CSS features
• Build Tool: Deno/Lume for static site generation

Project Structure

.
├── _config.ts          # Main Lume configuration file
├── src/               # Source directory containing all site content
│   ├── _includes/     # Templates, layouts, and shared resources
│   │   ├── layout/    # Base layouts for pages
│   │   ├── partials/  # Reusable template components
│   │   └── css/       # CSS modules and components
│   ├── assets/        # Static assets (images, etc.)
│   ├── styles.css     # Global styles and CSS imports
│   ├── index.vto      # Main page template
│   └── _data.yml      # Global site data
├── _site/             # Generated static site (output directory)
├── deno.json          # Deno configuration
└── deno.lock          # Dependency lock file

Configuration Details

Lume Configuration (_config.ts)

The project uses a modular configuration approach with several key Lume plugins:

1. Base Configuration

   • Source directory is set to ./src
   • Site URL is configured as https://www.remote-executive.com

2. Asset Management

   • Favicon is copied to root of _site
   • Image assets are copied from assets/img to _site/images

3. Enabled Plugins

   • brotli - File compression
   • code_highlight - Syntax highlighting for code blocks
   • date - Date formatting utilities
   • feed - RSS/Atom feed generation
   • google_fonts - Google Fonts integration
     • Uses Poppins font family with various weights
   • icons - Icon handling
   • postcss - CSS processing
   • robots - Robots.txt generation
   • sitemap - XML sitemap generation

Content Organization

• Main content is stored in the src directory
• Templates and layouts are in _includes
• Global site data is managed through _data.yml
• Static assets are organized in the assets directory

CSS Architecture

• CSS files are stored in src/_includes/css/ following Lume's includes pattern
• Main styles.css imports component CSS using relative paths (e.g., @import "css/component.css")
• PostCSS processes imports and generates final CSS bundle
• Component-based organization:
  • Each major feature has its own CSS file
  • Styles are scoped to their component
  • Common utilities and variables are shared
• No preprocessors or CSS-in-JS - keeping it simple and maintainable

Build Output

The static site is generated in the _site directory, which contains the complete built website ready for deployment.

Development

The project uses Deno's built-in tooling and package management. Dependencies are tracked in deno.lock for reproducible builds.

Template System

The project uses Velociraptor Template (VTO) files for templating:

• .vto files contain both markup and template logic
• Partials are used for reusable components (navigation, footer, etc.)
• Layouts define the base structure of different page types
• Template inheritance is used for consistent page structures

Date Handling

• Dates in frontmatter should be specified as ISO strings (YYYY-MM-DD)
• In VTO templates, dates are accessed directly: {{ date }}
• To format dates, use the date filter: {{ date("YYYY-MM-DD") }}
• Date formats follow standard date format strings (e.g., "YYYY-MM-DD", "MMMM D, YYYY")
• The date plugin must be enabled in _config.ts for date formatting to work

Additional Information

• SEO: The project is designed with SEO in mind, with proper meta tags and structured data
• Accessibility: The project follows accessibility guidelines, ensuring that it is usable by all users
• Performance: The project is optimized for performance, with lazy loading and minimal network requests
• Security: The project is secure, with proper input validation and sanitization
• Scalability: The project is scalable, with modular architecture and easy to extend
• Maintenance: The project is easy to maintain, with clear and consistent code structure
• Version Control: The project uses version control, with regular commits and pull requests
• Testing: The project uses automated testing, with unit tests and integration tests
• Documentation: The project is well-documented, with clear and concise documentation
• Community: The project is part of the Deno community, with active contributors and users
• License: The project is open-source, with a permissive license

Conclusion

The Remote Executive website project is a comprehensive and well-designed project that meets all the requirements and expectations. It is a great example of a modern and efficient static site generator project.