@aetherframework/template-engine 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +431 -1
- package/index.js +17 -1
- package/package.json +1 -1
- package/src/engines/AetherEngine.js +240 -101
- package/src/engines/CompressionEngine.js +642 -0
- package/src/engines/SSRModeEngine.js +29 -4
- package/src/engines/TemplateModeEngine.js +29 -3
- package/examples/dist/basic-usage-result.html +0 -31
- package/examples/dist/layout-example-result.html +0 -210
- package/examples/dist/templates/layouts/main.aether +0 -58
- package/examples/dist/templates/pages/home.aether +0 -116
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
import AetherEngine from './AetherEngine.js';
|
|
12
12
|
|
|
13
13
|
class TemplateModeEngine extends AetherEngine {
|
|
14
|
-
|
|
14
|
+
constructor(options = {}) {
|
|
15
15
|
super(options);
|
|
16
16
|
this.name = 'template-mode';
|
|
17
17
|
this.version = '1.0.0';
|
|
@@ -21,9 +21,18 @@ class TemplateModeEngine extends AetherEngine {
|
|
|
21
21
|
layoutSupport: options.layoutSupport !== false,
|
|
22
22
|
includeSupport: options.includeSupport !== false,
|
|
23
23
|
cacheTemplates: options.cacheTemplates !== false,
|
|
24
|
+
// Template mode compression options
|
|
25
|
+
compressTemplates: options.compressTemplates !== false,
|
|
26
|
+
minifyTemplates: options.minifyTemplates !== false,
|
|
24
27
|
...options
|
|
25
28
|
};
|
|
26
29
|
|
|
30
|
+
// Merge compression options
|
|
31
|
+
this.options = {
|
|
32
|
+
...this.options,
|
|
33
|
+
...this.templateOptions
|
|
34
|
+
};
|
|
35
|
+
|
|
27
36
|
// Initialize template directories
|
|
28
37
|
this.ensureTemplateDir();
|
|
29
38
|
}
|
|
@@ -91,7 +100,7 @@ class TemplateModeEngine extends AetherEngine {
|
|
|
91
100
|
}
|
|
92
101
|
|
|
93
102
|
/**
|
|
94
|
-
* Render template with template mode enhancements
|
|
103
|
+
* Render template with template mode enhancements and compression
|
|
95
104
|
* @param {string} templateName - Template name or content
|
|
96
105
|
* @param {Object} data - Template data
|
|
97
106
|
* @param {Object} options - Render options
|
|
@@ -114,7 +123,24 @@ class TemplateModeEngine extends AetherEngine {
|
|
|
114
123
|
const content = await super.render(templateName, enhancedData, options);
|
|
115
124
|
|
|
116
125
|
// Add template mode specific enhancements
|
|
117
|
-
|
|
126
|
+
const enhancedContent = this.enhanceForTemplateMode(content, enhancedData, options);
|
|
127
|
+
|
|
128
|
+
// Apply template-specific compression if enabled
|
|
129
|
+
const shouldCompress = this.options.compressionEnabled &&
|
|
130
|
+
(this.templateOptions.compressTemplates ||
|
|
131
|
+
(process.env.NODE_ENV === 'production' && this.templateOptions.minifyTemplates));
|
|
132
|
+
|
|
133
|
+
if (shouldCompress) {
|
|
134
|
+
return this.processWithCompression(enhancedContent, {
|
|
135
|
+
...options.compression,
|
|
136
|
+
minifyHTML: this.options.minifyHTML,
|
|
137
|
+
minifyCSS: this.options.minifyCSS,
|
|
138
|
+
minifyJS: this.options.minifyJS,
|
|
139
|
+
mangleJS: this.options.mangleJS
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
return enhancedContent;
|
|
118
144
|
}
|
|
119
145
|
|
|
120
146
|
/**
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<header class="header">
|
|
3
|
-
<nav class="navbar">
|
|
4
|
-
<div class="container">
|
|
5
|
-
<a class="navbar-brand" href="/">
|
|
6
|
-
<img src="/assets/images/logo.png" alt="Logo" height="40">
|
|
7
|
-
</a>
|
|
8
|
-
|
|
9
|
-
<ul class="navbar-nav">
|
|
10
|
-
<li class="nav-item">
|
|
11
|
-
<a class="nav-link" href="/">Home</a>
|
|
12
|
-
</li>
|
|
13
|
-
<li class="nav-item">
|
|
14
|
-
<a class="nav-link" href="/about">About</a>
|
|
15
|
-
</li>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<li class="nav-item dropdown">
|
|
19
|
-
<a class="nav-link dropdown-toggle" href="#" role="button">
|
|
20
|
-
John Doe
|
|
21
|
-
</a>
|
|
22
|
-
<div class="dropdown-menu">
|
|
23
|
-
<a class="dropdown-item" href="/profile">Profile</a>
|
|
24
|
-
<a class="dropdown-item" href="/logout">Logout</a>
|
|
25
|
-
</div>
|
|
26
|
-
</li>
|
|
27
|
-
|
|
28
|
-
</ul>
|
|
29
|
-
</div>
|
|
30
|
-
</nav>
|
|
31
|
-
</header>
|
|
@@ -1,210 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="zh-CN">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Home Page - Aether Framework</title>
|
|
7
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
8
|
-
<script src="https://cdn.tailwindcss.com"></script>
|
|
9
|
-
<style>
|
|
10
|
-
body {
|
|
11
|
-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
12
|
-
line-height: 1.6;
|
|
13
|
-
}
|
|
14
|
-
.feature-grid {
|
|
15
|
-
display: grid;
|
|
16
|
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
17
|
-
gap: 2rem;
|
|
18
|
-
margin-top: 2rem;
|
|
19
|
-
}
|
|
20
|
-
.feature-card {
|
|
21
|
-
background: rgba(255, 255, 255, 0.05);
|
|
22
|
-
border-radius: 0.75rem;
|
|
23
|
-
padding: 1.5rem;
|
|
24
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
25
|
-
transition: all 0.3s ease;
|
|
26
|
-
}
|
|
27
|
-
.feature-card:hover {
|
|
28
|
-
transform: translateY(-5px);
|
|
29
|
-
border-color: #4f46e5;
|
|
30
|
-
box-shadow: 0 10px 25px rgba(79, 70, 229, 0.2);
|
|
31
|
-
}
|
|
32
|
-
.feature-icon {
|
|
33
|
-
font-size: 2rem;
|
|
34
|
-
color: #4f46e5;
|
|
35
|
-
margin-bottom: 1rem;
|
|
36
|
-
}
|
|
37
|
-
</style>
|
|
38
|
-
</head>
|
|
39
|
-
<body class="bg-gray-900 text-white">
|
|
40
|
-
<!-- Header Section -->
|
|
41
|
-
<header class="bg-gray-800 shadow-lg">
|
|
42
|
-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
43
|
-
<div class="flex justify-between h-16">
|
|
44
|
-
<div class="flex items-center">
|
|
45
|
-
<span class="text-xl font-bold text-indigo-400">Aether<span class="text-white">Framework</span></span>
|
|
46
|
-
</div>
|
|
47
|
-
<nav class="flex items-center space-x-4">
|
|
48
|
-
<a href="/" class="text-gray-300 hover:text-white transition-colors duration-200">Home</a>
|
|
49
|
-
<a href="/about" class="text-gray-300 hover:text-white transition-colors duration-200">About</a>
|
|
50
|
-
<a href="/docs" class="text-gray-300 hover:text-white transition-colors duration-200">Documentation</a>
|
|
51
|
-
</nav>
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
</header>
|
|
55
|
-
|
|
56
|
-
<!-- Main Content Section -->
|
|
57
|
-
<main class="py-8">
|
|
58
|
-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
59
|
-
<!-- Hero Section -->
|
|
60
|
-
<div class="text-center py-12">
|
|
61
|
-
<h1 class="text-4xl font-bold text-white mb-4">
|
|
62
|
-
Welcome to Aether Framework
|
|
63
|
-
</h1>
|
|
64
|
-
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
|
|
65
|
-
A modern template engine with layout inheritance, SSR support, and enhanced syntax.
|
|
66
|
-
This content is injected into the main layout using @section directives.
|
|
67
|
-
</p>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<!-- Features Grid -->
|
|
71
|
-
<div class="feature-grid">
|
|
72
|
-
|
|
73
|
-
<div class="feature-card">
|
|
74
|
-
<div class="feature-icon">
|
|
75
|
-
<i class="fas fa-bolt"></i>
|
|
76
|
-
</div>
|
|
77
|
-
<h3 class="text-xl font-semibold text-white mb-2">
|
|
78
|
-
Fast Rendering
|
|
79
|
-
</h3>
|
|
80
|
-
<p class="text-gray-300">
|
|
81
|
-
High performance template compilation and execution with built-in caching
|
|
82
|
-
</p>
|
|
83
|
-
<div class="mt-4">
|
|
84
|
-
<span class="inline-block bg-indigo-900 text-indigo-200 text-xs font-semibold px-3 py-1 rounded-full">
|
|
85
|
-
Performance
|
|
86
|
-
</span>
|
|
87
|
-
</div>
|
|
88
|
-
</div>
|
|
89
|
-
|
|
90
|
-
<div class="feature-card">
|
|
91
|
-
<div class="feature-icon">
|
|
92
|
-
<i class="fas fa-layer-group"></i>
|
|
93
|
-
</div>
|
|
94
|
-
<h3 class="text-xl font-semibold text-white mb-2">
|
|
95
|
-
Layout Inheritance
|
|
96
|
-
</h3>
|
|
97
|
-
<p class="text-gray-300">
|
|
98
|
-
Powerful @extends and @section directives for reusable layouts
|
|
99
|
-
</p>
|
|
100
|
-
<div class="mt-4">
|
|
101
|
-
<span class="inline-block bg-indigo-900 text-indigo-200 text-xs font-semibold px-3 py-1 rounded-full">
|
|
102
|
-
Productivity
|
|
103
|
-
</span>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div class="feature-card">
|
|
108
|
-
<div class="feature-icon">
|
|
109
|
-
<i class="fas fa-server"></i>
|
|
110
|
-
</div>
|
|
111
|
-
<h3 class="text-xl font-semibold text-white mb-2">
|
|
112
|
-
SSR Support
|
|
113
|
-
</h3>
|
|
114
|
-
<p class="text-gray-300">
|
|
115
|
-
Server-side rendering with hydration for optimal SEO and performance
|
|
116
|
-
</p>
|
|
117
|
-
<div class="mt-4">
|
|
118
|
-
<span class="inline-block bg-indigo-900 text-indigo-200 text-xs font-semibold px-3 py-1 rounded-full">
|
|
119
|
-
Modern
|
|
120
|
-
</span>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
|
|
124
|
-
<div class="feature-card">
|
|
125
|
-
<div class="feature-icon">
|
|
126
|
-
<i class="fas fa-code"></i>
|
|
127
|
-
</div>
|
|
128
|
-
<h3 class="text-xl font-semibold text-white mb-2">
|
|
129
|
-
Easy Syntax
|
|
130
|
-
</h3>
|
|
131
|
-
<p class="text-gray-300">
|
|
132
|
-
Blade-style syntax that is intuitive and easy to learn
|
|
133
|
-
</p>
|
|
134
|
-
<div class="mt-4">
|
|
135
|
-
<span class="inline-block bg-indigo-900 text-indigo-200 text-xs font-semibold px-3 py-1 rounded-full">
|
|
136
|
-
Developer Experience
|
|
137
|
-
</span>
|
|
138
|
-
</div>
|
|
139
|
-
</div>
|
|
140
|
-
|
|
141
|
-
</div>
|
|
142
|
-
|
|
143
|
-
<!-- Additional Content -->
|
|
144
|
-
<div class="mt-12 bg-gradient-to-r from-indigo-900/30 to-purple-900/30 rounded-2xl p-8 border border-indigo-800/30">
|
|
145
|
-
<h2 class="text-2xl font-bold text-white mb-4">
|
|
146
|
-
Why Choose Aether?
|
|
147
|
-
</h2>
|
|
148
|
-
<ul class="space-y-3 text-gray-300">
|
|
149
|
-
<li class="flex items-center">
|
|
150
|
-
<i class="fas fa-check text-green-400 mr-3"></i>
|
|
151
|
-
<span>Blade-style syntax with @extends, @section, and @yield directives</span>
|
|
152
|
-
</li>
|
|
153
|
-
<li class="flex items-center">
|
|
154
|
-
<i class="fas fa-check text-green-400 mr-3"></i>
|
|
155
|
-
<span>Server-side rendering (SSR) support with hydration</span>
|
|
156
|
-
</li>
|
|
157
|
-
<li class="flex items-center">
|
|
158
|
-
<i class="fas fa-check text-green-400 mr-3"></i>
|
|
159
|
-
<span>Template inheritance and component reuse</span>
|
|
160
|
-
</li>
|
|
161
|
-
<li class="flex items-center">
|
|
162
|
-
<i class="fas fa-check text-green-400 mr-3"></i>
|
|
163
|
-
<span>Built-in caching for optimal performance</span>
|
|
164
|
-
</li>
|
|
165
|
-
</ul>
|
|
166
|
-
</div>
|
|
167
|
-
</div>
|
|
168
|
-
</main>
|
|
169
|
-
|
|
170
|
-
<!-- Footer Section -->
|
|
171
|
-
<footer class="bg-gray-800 border-t border-gray-700 mt-12">
|
|
172
|
-
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
173
|
-
<div class="flex justify-between items-center">
|
|
174
|
-
<p class="text-sm text-gray-400">
|
|
175
|
-
© 2026 Aether Template Engine. All rights reserved.
|
|
176
|
-
</p>
|
|
177
|
-
<div class="flex space-x-4">
|
|
178
|
-
<a href="#" class="text-gray-400 hover:text-white">
|
|
179
|
-
<i class="fab fa-github"></i>
|
|
180
|
-
</a>
|
|
181
|
-
<a href="#" class="text-gray-400 hover:text-white">
|
|
182
|
-
<i class="fab fa-twitter"></i>
|
|
183
|
-
</a>
|
|
184
|
-
<a href="#" class="text-gray-400 hover:text-white">
|
|
185
|
-
<i class="fab fa-discord"></i>
|
|
186
|
-
</a>
|
|
187
|
-
</div>
|
|
188
|
-
</div>
|
|
189
|
-
</div>
|
|
190
|
-
</footer>
|
|
191
|
-
|
|
192
|
-
<!-- Scripts Section -->
|
|
193
|
-
<script>
|
|
194
|
-
console.log('Home page loaded successfully');
|
|
195
|
-
|
|
196
|
-
// Add interactive features
|
|
197
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
198
|
-
const featureCards = document.querySelectorAll('.feature-card');
|
|
199
|
-
featureCards.forEach(card => {
|
|
200
|
-
card.addEventListener('click', function() {
|
|
201
|
-
this.classList.toggle('ring-2');
|
|
202
|
-
this.classList.toggle('ring-indigo-500');
|
|
203
|
-
});
|
|
204
|
-
});
|
|
205
|
-
|
|
206
|
-
console.log('Interactive features initialized');
|
|
207
|
-
});
|
|
208
|
-
</script>
|
|
209
|
-
</body>
|
|
210
|
-
</html>
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="zh-CN">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>@yield('title', 'Aether Framework')</title>
|
|
7
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
8
|
-
<script src="https://cdn.tailwindcss.com"></script>
|
|
9
|
-
@yield('head')
|
|
10
|
-
</head>
|
|
11
|
-
<body class="bg-gray-900 text-white">
|
|
12
|
-
<!-- Header Section -->
|
|
13
|
-
<header class="bg-gray-800 shadow-lg">
|
|
14
|
-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
15
|
-
<div class="flex justify-between h-16">
|
|
16
|
-
<div class="flex items-center">
|
|
17
|
-
<span class="text-xl font-bold text-indigo-400">Aether<span class="text-white">Framework</span></span>
|
|
18
|
-
</div>
|
|
19
|
-
<nav class="flex items-center space-x-4">
|
|
20
|
-
<a href="/" class="text-gray-300 hover:text-white transition-colors duration-200">Home</a>
|
|
21
|
-
<a href="/about" class="text-gray-300 hover:text-white transition-colors duration-200">About</a>
|
|
22
|
-
<a href="/docs" class="text-gray-300 hover:text-white transition-colors duration-200">Documentation</a>
|
|
23
|
-
</nav>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
</header>
|
|
27
|
-
|
|
28
|
-
<!-- Main Content Section -->
|
|
29
|
-
<main class="py-8">
|
|
30
|
-
@yield('content')
|
|
31
|
-
</main>
|
|
32
|
-
|
|
33
|
-
<!-- Footer Section -->
|
|
34
|
-
<footer class="bg-gray-800 border-t border-gray-700 mt-12">
|
|
35
|
-
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
36
|
-
<div class="flex justify-between items-center">
|
|
37
|
-
<p class="text-sm text-gray-400">
|
|
38
|
-
© {{ currentYear }} Aether Template Engine. All rights reserved.
|
|
39
|
-
</p>
|
|
40
|
-
<div class="flex space-x-4">
|
|
41
|
-
<a href="#" class="text-gray-400 hover:text-white">
|
|
42
|
-
<i class="fab fa-github"></i>
|
|
43
|
-
</a>
|
|
44
|
-
<a href="#" class="text-gray-400 hover:text-white">
|
|
45
|
-
<i class="fab fa-twitter"></i>
|
|
46
|
-
</a>
|
|
47
|
-
<a href="#" class="text-gray-400 hover:text-white">
|
|
48
|
-
<i class="fab fa-discord"></i>
|
|
49
|
-
</a>
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
53
|
-
</footer>
|
|
54
|
-
|
|
55
|
-
<!-- Scripts Section -->
|
|
56
|
-
@yield('scripts')
|
|
57
|
-
</body>
|
|
58
|
-
</html>
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
@extends('layouts/main')
|
|
2
|
-
|
|
3
|
-
@section('title', 'Home Page - Aether Framework')
|
|
4
|
-
|
|
5
|
-
@section('head')
|
|
6
|
-
<style>
|
|
7
|
-
body {
|
|
8
|
-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
9
|
-
line-height: 1.6;
|
|
10
|
-
}
|
|
11
|
-
.feature-grid {
|
|
12
|
-
display: grid;
|
|
13
|
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
14
|
-
gap: 2rem;
|
|
15
|
-
margin-top: 2rem;
|
|
16
|
-
}
|
|
17
|
-
.feature-card {
|
|
18
|
-
background: rgba(255, 255, 255, 0.05);
|
|
19
|
-
border-radius: 0.75rem;
|
|
20
|
-
padding: 1.5rem;
|
|
21
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
22
|
-
transition: all 0.3s ease;
|
|
23
|
-
}
|
|
24
|
-
.feature-card:hover {
|
|
25
|
-
transform: translateY(-5px);
|
|
26
|
-
border-color: #4f46e5;
|
|
27
|
-
box-shadow: 0 10px 25px rgba(79, 70, 229, 0.2);
|
|
28
|
-
}
|
|
29
|
-
.feature-icon {
|
|
30
|
-
font-size: 2rem;
|
|
31
|
-
color: #4f46e5;
|
|
32
|
-
margin-bottom: 1rem;
|
|
33
|
-
}
|
|
34
|
-
</style>
|
|
35
|
-
@endsection
|
|
36
|
-
|
|
37
|
-
@section('content')
|
|
38
|
-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
39
|
-
<!-- Hero Section -->
|
|
40
|
-
<div class="text-center py-12">
|
|
41
|
-
<h1 class="text-4xl font-bold text-white mb-4">
|
|
42
|
-
Welcome to Aether Framework
|
|
43
|
-
</h1>
|
|
44
|
-
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
|
|
45
|
-
A modern template engine with layout inheritance, SSR support, and enhanced syntax.
|
|
46
|
-
This content is injected into the main layout using @section directives.
|
|
47
|
-
</p>
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<!-- Features Grid -->
|
|
51
|
-
<div class="feature-grid">
|
|
52
|
-
@foreach(features as feature)
|
|
53
|
-
<div class="feature-card">
|
|
54
|
-
<div class="feature-icon">
|
|
55
|
-
<i class="{{ feature.icon }}"></i>
|
|
56
|
-
</div>
|
|
57
|
-
<h3 class="text-xl font-semibold text-white mb-2">
|
|
58
|
-
{{ feature.name }}
|
|
59
|
-
</h3>
|
|
60
|
-
<p class="text-gray-300">
|
|
61
|
-
{{ feature.description }}
|
|
62
|
-
</p>
|
|
63
|
-
<div class="mt-4">
|
|
64
|
-
<span class="inline-block bg-indigo-900 text-indigo-200 text-xs font-semibold px-3 py-1 rounded-full">
|
|
65
|
-
{{ feature.tag }}
|
|
66
|
-
</span>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
@endforeach
|
|
70
|
-
</div>
|
|
71
|
-
|
|
72
|
-
<!-- Additional Content -->
|
|
73
|
-
<div class="mt-12 bg-gradient-to-r from-indigo-900/30 to-purple-900/30 rounded-2xl p-8 border border-indigo-800/30">
|
|
74
|
-
<h2 class="text-2xl font-bold text-white mb-4">
|
|
75
|
-
Why Choose Aether?
|
|
76
|
-
</h2>
|
|
77
|
-
<ul class="space-y-3 text-gray-300">
|
|
78
|
-
<li class="flex items-center">
|
|
79
|
-
<i class="fas fa-check text-green-400 mr-3"></i>
|
|
80
|
-
<span>Blade-style syntax with @extends, @section, and @yield directives</span>
|
|
81
|
-
</li>
|
|
82
|
-
<li class="flex items-center">
|
|
83
|
-
<i class="fas fa-check text-green-400 mr-3"></i>
|
|
84
|
-
<span>Server-side rendering (SSR) support with hydration</span>
|
|
85
|
-
</li>
|
|
86
|
-
<li class="flex items-center">
|
|
87
|
-
<i class="fas fa-check text-green-400 mr-3"></i>
|
|
88
|
-
<span>Template inheritance and component reuse</span>
|
|
89
|
-
</li>
|
|
90
|
-
<li class="flex items-center">
|
|
91
|
-
<i class="fas fa-check text-green-400 mr-3"></i>
|
|
92
|
-
<span>Built-in caching for optimal performance</span>
|
|
93
|
-
</li>
|
|
94
|
-
</ul>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
@endsection
|
|
98
|
-
|
|
99
|
-
@section('scripts')
|
|
100
|
-
<script>
|
|
101
|
-
console.log('Home page loaded successfully');
|
|
102
|
-
|
|
103
|
-
// Add interactive features
|
|
104
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
105
|
-
const featureCards = document.querySelectorAll('.feature-card');
|
|
106
|
-
featureCards.forEach(card => {
|
|
107
|
-
card.addEventListener('click', function() {
|
|
108
|
-
this.classList.toggle('ring-2');
|
|
109
|
-
this.classList.toggle('ring-indigo-500');
|
|
110
|
-
});
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
console.log('Interactive features initialized');
|
|
114
|
-
});
|
|
115
|
-
</script>
|
|
116
|
-
@endsection
|