odac 1.4.4 → 1.4.5
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/.agent/rules/memory.md +5 -1
- package/CHANGELOG.md +28 -0
- package/README.md +2 -1
- package/client/odac.js +121 -2
- package/docs/ai/skills/backend/views.md +34 -9
- package/docs/ai/skills/frontend/navigation.md +45 -1
- package/docs/backend/07-views/03-template-syntax.md +48 -14
- package/docs/backend/07-views/03-variables.md +22 -7
- package/docs/frontend/02-ajax-navigation/01-quick-start.md +22 -0
- package/docs/frontend/02-ajax-navigation/03-advanced-usage.md +51 -0
- package/package.json +1 -1
- package/template/controller/page/about.js +3 -3
- package/template/controller/page/index.js +2 -2
- package/template/public/assets/js/app.js +38 -54
- package/template/skeleton/main.html +4 -4
- package/template/view/content/about.html +64 -60
- package/template/view/content/home.html +148 -175
- package/template/view/css/app.css +46 -0
- package/template/view/footer/main.html +10 -9
- package/template/view/header/main.html +34 -11
- package/test/Client/load.test.js +306 -0
- package/template/public/assets/css/style.css +0 -1835
|
@@ -1,62 +1,21 @@
|
|
|
1
|
+
/* global Odac */
|
|
1
2
|
/**
|
|
2
|
-
*
|
|
3
|
+
* ODAC Template - Client-Side Application
|
|
3
4
|
*
|
|
4
5
|
* This file demonstrates odac.js features including:
|
|
5
|
-
* - AJAX page loading with
|
|
6
|
+
* - AJAX page loading with Odac.loader() for smooth navigation
|
|
6
7
|
* - History API integration
|
|
7
8
|
* - Event delegation
|
|
8
9
|
*/
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* AJAX Navigation
|
|
13
|
-
* Enables smooth page transitions without full page reloads
|
|
14
|
-
*
|
|
15
|
-
* Minimal usage: navigate: 'main'
|
|
16
|
-
* Medium usage: navigate: {update: 'main', on: callback}
|
|
17
|
-
* Full usage: navigate: {links: 'a[href^="/"]', update: {...}, on: callback}
|
|
18
|
-
*/
|
|
19
|
-
navigate: {
|
|
20
|
-
update: 'main' // Update <main> element
|
|
21
|
-
},
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Custom functions
|
|
25
|
-
* These become available as odac.fn.functionName()
|
|
26
|
-
*/
|
|
27
|
-
function: {
|
|
28
|
-
/**
|
|
29
|
-
* Update active navigation state
|
|
30
|
-
* Highlights the current page in the navigation menu
|
|
31
|
-
*/
|
|
32
|
-
updateActiveNav: function (url) {
|
|
33
|
-
// Remove active class from all navigation links
|
|
34
|
-
const navLinks = document.querySelectorAll('nav a')
|
|
35
|
-
navLinks.forEach(function (link) {
|
|
36
|
-
link.classList.remove('active')
|
|
37
|
-
})
|
|
38
|
-
|
|
39
|
-
// Add active class to current page link
|
|
40
|
-
const currentLink = document.querySelector(`nav a[href="${url}"]`)
|
|
41
|
-
if (currentLink) {
|
|
42
|
-
currentLink.classList.add('active')
|
|
43
|
-
} else if (url === '/' || url === '') {
|
|
44
|
-
// Handle home page
|
|
45
|
-
const homeLink = document.querySelector('nav a[href="/"]')
|
|
46
|
-
if (homeLink) {
|
|
47
|
-
homeLink.classList.add('active')
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
|
|
11
|
+
Odac.action({
|
|
53
12
|
/**
|
|
54
13
|
* Initialize application on page load
|
|
55
14
|
* This runs once when the page first loads
|
|
56
15
|
*/
|
|
57
16
|
load: function () {
|
|
58
17
|
// Set initial active navigation state
|
|
59
|
-
|
|
18
|
+
Odac.fn.updateActiveNav(window.location.pathname)
|
|
60
19
|
},
|
|
61
20
|
|
|
62
21
|
/**
|
|
@@ -76,15 +35,8 @@ odac.action({
|
|
|
76
35
|
*/
|
|
77
36
|
about: function () {
|
|
78
37
|
console.log('About page loaded')
|
|
79
|
-
},
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* Docs page initialization
|
|
83
|
-
*/
|
|
84
|
-
docs: function () {
|
|
85
|
-
console.log('Docs page loaded')
|
|
86
38
|
}
|
|
87
|
-
}
|
|
39
|
+
},
|
|
88
40
|
|
|
89
41
|
// Add your custom event handlers here
|
|
90
42
|
// Example:
|
|
@@ -93,4 +45,36 @@ odac.action({
|
|
|
93
45
|
// console.log('Button clicked')
|
|
94
46
|
// }
|
|
95
47
|
// }
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Custom functions
|
|
51
|
+
* These become available as Odac.fn.functionName()
|
|
52
|
+
*/
|
|
53
|
+
function: {
|
|
54
|
+
/**
|
|
55
|
+
* Update active navigation state
|
|
56
|
+
* Highlights the current page in the navigation menu
|
|
57
|
+
*/
|
|
58
|
+
updateActiveNav: function (url) {
|
|
59
|
+
// Remove active class from all navigation links
|
|
60
|
+
const navLinks = document.querySelectorAll('nav a')
|
|
61
|
+
navLinks.forEach(function (link) {
|
|
62
|
+
link.classList.remove('active')
|
|
63
|
+
})
|
|
64
|
+
|
|
65
|
+
// Add active class to current page link
|
|
66
|
+
const currentLinks = document.querySelectorAll(`nav a[href="${url}"]`)
|
|
67
|
+
if (currentLinks.length > 0) {
|
|
68
|
+
currentLinks.forEach(function (link) {
|
|
69
|
+
link.classList.add('active')
|
|
70
|
+
})
|
|
71
|
+
} else if (url === '/' || url === '') {
|
|
72
|
+
// Handle home page
|
|
73
|
+
const homeLinks = document.querySelectorAll('nav a[href="/"]')
|
|
74
|
+
homeLinks.forEach(function (link) {
|
|
75
|
+
link.classList.add('active')
|
|
76
|
+
})
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
96
80
|
})
|
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
{{ HEAD }}
|
|
5
5
|
</head>
|
|
6
|
-
<body>
|
|
7
|
-
<header>
|
|
6
|
+
<body class="min-h-screen flex flex-col items-center">
|
|
7
|
+
<header class="sticky top-0 w-full z-50 glass h-16 flex items-center">
|
|
8
8
|
{{ HEADER }}
|
|
9
9
|
</header>
|
|
10
10
|
|
|
11
|
-
<main>
|
|
11
|
+
<main class="flex-grow w-full max-w-5xl mx-auto px-6 py-12">
|
|
12
12
|
{{ CONTENT }}
|
|
13
13
|
</main>
|
|
14
14
|
|
|
15
|
-
<footer>
|
|
15
|
+
<footer class="w-full border-t border-brand-200 py-12 mt-auto">
|
|
16
16
|
{{ FOOTER }}
|
|
17
17
|
</footer>
|
|
18
18
|
|
|
@@ -1,65 +1,69 @@
|
|
|
1
|
-
<div class="
|
|
2
|
-
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
<div class="space-y-24">
|
|
2
|
+
<!-- About Hero -->
|
|
3
|
+
<section class="text-center space-y-6">
|
|
4
|
+
<h1 class="text-4xl md:text-6xl font-bold tracking-tight text-brand-900 leading-tight">
|
|
5
|
+
About This <br/><span class="text-brand-900/40">Template</span>
|
|
6
|
+
</h1>
|
|
7
|
+
<p class="text-xl text-brand-900/50 max-w-2xl mx-auto font-medium leading-relaxed">
|
|
8
|
+
This is your starting point for building something incredible with ODAC. A modern, high-performance foundation.
|
|
9
|
+
</p>
|
|
10
|
+
</section>
|
|
6
11
|
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
</section>
|
|
12
|
+
<!-- Template Features -->
|
|
13
|
+
<section class="space-y-12">
|
|
14
|
+
<div class="text-center space-y-2">
|
|
15
|
+
<h2 class="text-3xl font-bold tracking-tight text-brand-900">Template Features</h2>
|
|
16
|
+
<p class="text-brand-900/40">Everything you need, already configured.</p>
|
|
17
|
+
</div>
|
|
14
18
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
</div>
|
|
38
|
-
</section>
|
|
19
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
20
|
+
<div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
|
|
21
|
+
<h3 class="text-xl font-bold text-brand-900">Modern UI</h3>
|
|
22
|
+
<p class="text-brand-900/60 leading-relaxed">Design with Apple-style aesthetics using Tailwind CSS. Responsive, minimal, and premium.</p>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
|
|
26
|
+
<h3 class="text-xl font-bold text-brand-900">AJAX Navigation</h3>
|
|
27
|
+
<p class="text-brand-900/60 leading-relaxed">Smooth page transitions without full reloads, already configured and working out of the box.</p>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
|
|
31
|
+
<h3 class="text-xl font-bold text-brand-900">Security</h3>
|
|
32
|
+
<p class="text-brand-900/60 leading-relaxed">CSRF protection, secure sessions, and authentication ready to use for your application.</p>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
|
|
36
|
+
<h3 class="text-xl font-bold text-brand-900">Responsive</h3>
|
|
37
|
+
<p class="text-brand-900/60 leading-relaxed">Mobile-first design that works perfectly on all devices, from small phones to large desktop displays.</p>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</section>
|
|
39
41
|
|
|
40
|
-
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
42
|
+
<!-- Next Steps -->
|
|
43
|
+
<section class="bg-brand-900 rounded-[3rem] p-12 md:p-20 text-white space-y-12">
|
|
44
|
+
<h2 class="text-3xl font-bold tracking-tight text-center">Next Steps</h2>
|
|
45
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
46
|
+
<div class="space-y-2 border-l-2 border-white/10 pl-6">
|
|
47
|
+
<h4 class="font-bold">Routes</h4>
|
|
48
|
+
<p class="text-white/40 text-sm">Define URL patterns in <code>route/www.js</code></p>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="space-y-2 border-l-2 border-white/10 pl-6">
|
|
51
|
+
<h4 class="font-bold">Controllers</h4>
|
|
52
|
+
<p class="text-white/40 text-sm">Create page logic in <code>controller/</code></p>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="space-y-2 border-l-2 border-white/10 pl-6">
|
|
55
|
+
<h4 class="font-bold">Skeleton</h4>
|
|
56
|
+
<p class="text-white/40 text-sm">Design your layout structure in <code>skeleton/</code></p>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</section>
|
|
50
60
|
|
|
51
|
-
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<a href="https://odac.run" class="link-card" target="_blank" data-navigate="false">
|
|
60
|
-
<h3>🌐 odac.run</h3>
|
|
61
|
-
<p>Official website with examples and community</p>
|
|
62
|
-
</a>
|
|
63
|
-
</div>
|
|
64
|
-
</section>
|
|
61
|
+
<!-- Learn More -->
|
|
62
|
+
<section class="text-center pb-24 space-y-8">
|
|
63
|
+
<h2 class="text-3xl font-bold text-brand-900 tracking-tight">Need help?</h2>
|
|
64
|
+
<div class="flex justify-center gap-4">
|
|
65
|
+
<a href="https://docs.odac.run" target="_blank" rel="noopener" class="px-8 py-3 bg-white border border-brand-100 rounded-full font-bold hover:bg-brand-50 transition-colors" data-navigate="false">Documentation</a>
|
|
66
|
+
<a href="https://odac.run" target="_blank" rel="noopener" class="px-8 py-3 bg-brand-900 text-white rounded-full font-bold hover:opacity-90 transition-opacity" data-navigate="false">Official Site</a>
|
|
67
|
+
</div>
|
|
68
|
+
</section>
|
|
65
69
|
</div>
|