SiteLayoutTemplate.vala 4.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. using Astralis;
  2. using Spry;
  3. /**
  4. * SiteLayoutTemplate - The base template for all pages
  5. *
  6. * Provides:
  7. * - HTML document structure
  8. * - Common <head> elements (scripts, styles)
  9. * - Site-wide header with navigation
  10. * - Site-wide footer
  11. */
  12. public class MainTemplate : PageTemplate {
  13. public override string markup { get {
  14. return """
  15. <!DOCTYPE html>
  16. <html lang="en">
  17. <head>
  18. <meta charset="UTF-8">
  19. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20. <title>Spry Framework - Modern Web Development in Vala</title>
  21. <meta name="description" content="Spry is a component-based web framework for Vala, featuring HTMX integration, dependency injection, and reactive templates.">
  22. <link rel="stylesheet" href="/styles/main.css">
  23. <script spry-res="htmx.js"></script>
  24. <script spry-res="htmx-sse.js"></script>
  25. </head>
  26. <body>
  27. <header class="site-header">
  28. <div class="header-content">
  29. <a href="/" class="logo">
  30. <div class="logo-icon">⚡</div>
  31. Spry
  32. </a>
  33. <nav>
  34. <ul class="nav-links">
  35. <li><a href="/features">Features</a></li>
  36. <li><a href="/ecosystem">Ecosystem</a></li>
  37. <li><a href="/demo">Demo</a></li>
  38. <li><a href="/freedom">Freedom</a></li>
  39. </ul>
  40. </nav>
  41. <a href="/demo" class="nav-cta">Try Demo</a>
  42. </div>
  43. </header>
  44. <main>
  45. <spry-template-outlet />
  46. </main>
  47. <footer class="site-footer">
  48. <div class="container">
  49. <div class="footer-content">
  50. <div class="footer-brand">
  51. <a href="/" class="logo">
  52. <div class="logo-icon">⚡</div>
  53. Spry
  54. </a>
  55. <p>A modern, component-based web framework for Vala. Build reactive, real-time web applications with ease.</p>
  56. </div>
  57. <div class="footer-section">
  58. <h4>Framework</h4>
  59. <ul class="footer-links">
  60. <li><a href="/features">Features</a></li>
  61. <li><a href="/ecosystem">Ecosystem</a></li>
  62. <li><a href="/demo">Live Demo</a></li>
  63. </ul>
  64. </div>
  65. <div class="footer-section">
  66. <h4>Ecosystem</h4>
  67. <ul class="footer-links">
  68. <li><a href="/ecosystem">Astralis</a></li>
  69. <li><a href="/ecosystem">Inversion</a></li>
  70. <li><a href="/ecosystem">Spry</a></li>
  71. </ul>
  72. </div>
  73. <div class="footer-section">
  74. <h4>Community</h4>
  75. <ul class="footer-links">
  76. <li><a href="/freedom">Free Software</a></li>
  77. <li><a href="https://github.com" rel="external">GitHub</a></li>
  78. </ul>
  79. </div>
  80. </div>
  81. <div class="footer-bottom">
  82. <p>© 2024 Spry Framework. Free and Open Source Software.</p>
  83. <div class="footer-social">
  84. <a href="https://github.com" title="GitHub">⌨</a>
  85. </div>
  86. </div>
  87. </div>
  88. </footer>
  89. </body>
  90. </html>
  91. """;
  92. }}
  93. }