domma-js 0.18.0 → 0.18.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/bin/domma-cli.js +9 -9
- package/package.json +8 -4
- package/public/dist/bundles/domma-complete.css +111 -38
- package/public/dist/bundles/domma-data-focused.css +111 -38
- package/public/dist/bundles/domma-essentials.css +111 -38
- package/public/dist/bundles/domma-full.css +111 -38
- package/public/dist/bundles/domma-grayve.css +111 -38
- package/public/dist/bundles/domma-minimal.css +91 -26
- package/public/dist/domma-syntax.min.js +3 -3
- package/public/dist/domma.css +86 -21
- package/public/dist/domma.esm.js +4 -4
- package/public/dist/domma.min.js +4 -4
- package/public/dist/elements.css +17 -9
- package/public/dist/grid.css +3 -3
- package/public/dist/syntax.css +3 -3
- package/public/dist/themes/domma-themes.css +3 -3
- package/templates/kickstart-old/about/index.html +0 -227
- package/templates/kickstart-old/assets/logo/placeholder.svg +0 -6
- package/templates/kickstart-old/blog/index.html +0 -216
- package/templates/kickstart-old/contact/index.html +0 -223
- package/templates/kickstart-old/css/custom.css +0 -121
- package/templates/kickstart-old/docs/index.html +0 -308
- package/templates/kickstart-old/domma.config.json +0 -74
- package/templates/kickstart-old/index.html +0 -158
- package/templates/kickstart-old/js/app.js +0 -158
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"project": {
|
|
3
|
-
"name": "{{projectName}}",
|
|
4
|
-
"version": "1.0.0",
|
|
5
|
-
"description": "A Domma-powered web project"
|
|
6
|
-
},
|
|
7
|
-
"theme": {
|
|
8
|
-
"default": "{{theme}}",
|
|
9
|
-
"selector": "{{includeThemeSelector}}",
|
|
10
|
-
"persist": true,
|
|
11
|
-
"autoDetect": false
|
|
12
|
-
},
|
|
13
|
-
"navbar": {
|
|
14
|
-
"brand": {
|
|
15
|
-
"text": "{{projectName}}",
|
|
16
|
-
"logo": "assets/logo/placeholder.svg",
|
|
17
|
-
"url": "/"
|
|
18
|
-
},
|
|
19
|
-
"items": [
|
|
20
|
-
{
|
|
21
|
-
"text": "Home",
|
|
22
|
-
"url": "/",
|
|
23
|
-
"active": true
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
"text": "About",
|
|
27
|
-
"url": "/about/"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"text": "Contact",
|
|
31
|
-
"url": "/contact/"
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
"text": "Blog",
|
|
35
|
-
"url": "/blog/"
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
"text": "Docs",
|
|
39
|
-
"url": "/docs/"
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
"text": "QuickStart",
|
|
43
|
-
"url": "https://github.com/dcbw-it/domma#quick-start-with-cli-recommended",
|
|
44
|
-
"badge": "New"
|
|
45
|
-
}
|
|
46
|
-
],
|
|
47
|
-
"variant": "dark",
|
|
48
|
-
"position": "sticky",
|
|
49
|
-
"collapsible": true
|
|
50
|
-
},
|
|
51
|
-
"footer": {
|
|
52
|
-
"copyright": "© {{year}} {{projectName}}. All rights reserved.",
|
|
53
|
-
"links": [
|
|
54
|
-
{
|
|
55
|
-
"text": "Privacy Policy",
|
|
56
|
-
"url": "#privacy"
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
"text": "Terms of Service",
|
|
60
|
-
"url": "#terms"
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"text": "Contact Us",
|
|
64
|
-
"url": "/contact/"
|
|
65
|
-
}
|
|
66
|
-
]
|
|
67
|
-
},
|
|
68
|
-
"features": {
|
|
69
|
-
"icons": true,
|
|
70
|
-
"backToTop": true,
|
|
71
|
-
"codeCopy": true,
|
|
72
|
-
"smoothScroll": true
|
|
73
|
-
}
|
|
74
|
-
}
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>{{projectName}} - Home</title>
|
|
7
|
-
|
|
8
|
-
<!-- Domma CSS -->
|
|
9
|
-
<link rel="stylesheet" href="node_modules/domma-js/public/dist/domma.css">
|
|
10
|
-
<link rel="stylesheet" href="node_modules/domma-js/public/dist/grid.css">
|
|
11
|
-
<link rel="stylesheet" href="node_modules/domma-js/public/dist/elements.css">
|
|
12
|
-
<link rel="stylesheet" href="node_modules/domma-js/public/dist/themes/domma-themes.css">
|
|
13
|
-
|
|
14
|
-
<!-- Custom CSS -->
|
|
15
|
-
<link rel="stylesheet" href="css/custom.css">
|
|
16
|
-
</head>
|
|
17
|
-
<body class="dm-cloaked dm-theme-{{theme}}">
|
|
18
|
-
<!-- Navigation (initialized by app.js) -->
|
|
19
|
-
<nav id="main-navbar"></nav>
|
|
20
|
-
|
|
21
|
-
<!-- Hero Section -->
|
|
22
|
-
<section class="hero hero-gradient-primary text-center py-8">
|
|
23
|
-
<div class="container">
|
|
24
|
-
<h1 class="display-1 mb-4">Welcome to {{projectName}}</h1>
|
|
25
|
-
<p class="lead mb-6">
|
|
26
|
-
A modern web project powered by Domma - the lightweight JavaScript framework
|
|
27
|
-
with zero dependencies.
|
|
28
|
-
</p>
|
|
29
|
-
<div class="d-flex justify-content-center gap-3">
|
|
30
|
-
<a href="docs/index.html" class="btn btn-lg btn-primary">
|
|
31
|
-
<span data-icon="book"></span> Get Started
|
|
32
|
-
</a>
|
|
33
|
-
<a href="https://github.com/dcbw-it/domma" class="btn btn-lg btn-outline-primary" target="_blank">
|
|
34
|
-
<span data-icon="github"></span> View on GitHub
|
|
35
|
-
</a>
|
|
36
|
-
</div>
|
|
37
|
-
</div>
|
|
38
|
-
</section>
|
|
39
|
-
|
|
40
|
-
<!-- Features Section -->
|
|
41
|
-
<section class="container py-8">
|
|
42
|
-
<h2 class="text-center mb-6">Key Features</h2>
|
|
43
|
-
|
|
44
|
-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
45
|
-
<!-- Feature 1 -->
|
|
46
|
-
<div class="card hover shadow-md h-100">
|
|
47
|
-
<div class="card-body text-center">
|
|
48
|
-
<div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
|
|
49
|
-
<span data-icon="zap"></span>
|
|
50
|
-
</div>
|
|
51
|
-
<h3 class="h4 mb-3">Lightning Fast</h3>
|
|
52
|
-
<p class="text-secondary">
|
|
53
|
-
Zero dependencies and optimized for performance.
|
|
54
|
-
Get up and running in minutes.
|
|
55
|
-
</p>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<!-- Feature 2 -->
|
|
60
|
-
<div class="card hover shadow-md h-100">
|
|
61
|
-
<div class="card-body text-center">
|
|
62
|
-
<div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
|
|
63
|
-
<span data-icon="layers"></span>
|
|
64
|
-
</div>
|
|
65
|
-
<h3 class="h4 mb-3">Feature Complete</h3>
|
|
66
|
-
<p class="text-secondary">
|
|
67
|
-
DOM manipulation, utilities, reactive models, UI components,
|
|
68
|
-
and more in one package.
|
|
69
|
-
</p>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
|
|
73
|
-
<!-- Feature 3 -->
|
|
74
|
-
<div class="card hover shadow-md h-100">
|
|
75
|
-
<div class="card-body text-center">
|
|
76
|
-
<div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
|
|
77
|
-
<span data-icon="palette"></span>
|
|
78
|
-
</div>
|
|
79
|
-
<h3 class="h4 mb-3">Beautiful Themes</h3>
|
|
80
|
-
<p class="text-secondary">
|
|
81
|
-
16+ built-in themes with light/dark variants.
|
|
82
|
-
Fully customizable with CSS variables.
|
|
83
|
-
</p>
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
|
|
87
|
-
<!-- Feature 4 -->
|
|
88
|
-
<div class="card hover shadow-md h-100">
|
|
89
|
-
<div class="card-body text-center">
|
|
90
|
-
<div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
|
|
91
|
-
<span data-icon="code"></span>
|
|
92
|
-
</div>
|
|
93
|
-
<h3 class="h4 mb-3">Developer Friendly</h3>
|
|
94
|
-
<p class="text-secondary">
|
|
95
|
-
jQuery-like syntax, Lodash utilities, and comprehensive
|
|
96
|
-
TypeScript definitions.
|
|
97
|
-
</p>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
|
|
101
|
-
<!-- Feature 5 -->
|
|
102
|
-
<div class="card hover shadow-md h-100">
|
|
103
|
-
<div class="card-body text-center">
|
|
104
|
-
<div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
|
|
105
|
-
<span data-icon="smartphone"></span>
|
|
106
|
-
</div>
|
|
107
|
-
<h3 class="h4 mb-3">Fully Responsive</h3>
|
|
108
|
-
<p class="text-secondary">
|
|
109
|
-
Bootstrap-compatible grid system with CSS Grid utilities.
|
|
110
|
-
Mobile-first design.
|
|
111
|
-
</p>
|
|
112
|
-
</div>
|
|
113
|
-
</div>
|
|
114
|
-
|
|
115
|
-
<!-- Feature 6 -->
|
|
116
|
-
<div class="card hover shadow-md h-100">
|
|
117
|
-
<div class="card-body text-center">
|
|
118
|
-
<div class="mb-4" style="font-size: 3rem; color: var(--dm-primary);">
|
|
119
|
-
<span data-icon="settings"></span>
|
|
120
|
-
</div>
|
|
121
|
-
<h3 class="h4 mb-3">JSON Configured</h3>
|
|
122
|
-
<p class="text-secondary">
|
|
123
|
-
Single config file drives navbar, footer, theme, and features.
|
|
124
|
-
No complex setup needed.
|
|
125
|
-
</p>
|
|
126
|
-
</div>
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
</section>
|
|
130
|
-
|
|
131
|
-
<!-- Call to Action -->
|
|
132
|
-
<section class="bg-surface py-8">
|
|
133
|
-
<div class="container text-center">
|
|
134
|
-
<h2 class="mb-4">Ready to Get Started?</h2>
|
|
135
|
-
<p class="lead mb-6">
|
|
136
|
-
Check out the documentation to learn more about what Domma can do.
|
|
137
|
-
</p>
|
|
138
|
-
<div class="d-flex justify-content-center gap-3">
|
|
139
|
-
<a href="docs/index.html" class="btn btn-lg btn-primary">
|
|
140
|
-
Read the Docs
|
|
141
|
-
</a>
|
|
142
|
-
<a href="https://github.com/dcbw-it/domma" class="btn btn-lg btn-outline-primary" target="_blank">
|
|
143
|
-
View on GitHub
|
|
144
|
-
</a>
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
</section>
|
|
148
|
-
|
|
149
|
-
<!-- Footer -->
|
|
150
|
-
<footer class="page-footer"></footer>
|
|
151
|
-
|
|
152
|
-
<!-- Domma JavaScript -->
|
|
153
|
-
<script src="node_modules/domma-js/public/dist/domma.min.js"></script>
|
|
154
|
-
|
|
155
|
-
<!-- App Initialization -->
|
|
156
|
-
<script src="js/app.js"></script>
|
|
157
|
-
</body>
|
|
158
|
-
</html>
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Domma Kickstart Application
|
|
3
|
-
*
|
|
4
|
-
* This file initialises your Domma project based on domma.config.json.
|
|
5
|
-
* Customise the config file to change navbar, footer, theme, and features.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
$(() => {
|
|
9
|
-
// Load configuration
|
|
10
|
-
Domma.http.get('/domma.config.json').then(config => {
|
|
11
|
-
// Initialise theme
|
|
12
|
-
if (config.theme) {
|
|
13
|
-
Domma.theme.init({
|
|
14
|
-
theme: config.theme.default || 'charcoal-dark',
|
|
15
|
-
persist: config.theme.persist !== false,
|
|
16
|
-
autoDetect: config.theme.autoDetect === true
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
// Add theme selector if enabled
|
|
20
|
-
if (config.theme.selector) {
|
|
21
|
-
addThemeSelector();
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// Initialise navbar
|
|
26
|
-
if (config.navbar) {
|
|
27
|
-
Domma.elements.navbar('#main-navbar', {
|
|
28
|
-
brand: config.navbar.brand,
|
|
29
|
-
items: config.navbar.items,
|
|
30
|
-
variant: config.navbar.variant || 'dark',
|
|
31
|
-
position: config.navbar.position || 'sticky',
|
|
32
|
-
collapsible: config.navbar.collapsible !== false
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// Initialise footer
|
|
37
|
-
if (config.footer) {
|
|
38
|
-
const $footer = $('.page-footer');
|
|
39
|
-
if ($footer.length) {
|
|
40
|
-
const $footerContent = $('<div class="footer-content"></div>');
|
|
41
|
-
|
|
42
|
-
const $copyright = $('<p></p>').text(config.footer.copyright);
|
|
43
|
-
$footerContent.append($copyright);
|
|
44
|
-
|
|
45
|
-
const $nav = $('<nav class="footer-nav"></nav>');
|
|
46
|
-
_.each(config.footer.links, link => {
|
|
47
|
-
const $link = $('<a></a>')
|
|
48
|
-
.attr('href', link.url)
|
|
49
|
-
.text(link.text);
|
|
50
|
-
$nav.append($link);
|
|
51
|
-
});
|
|
52
|
-
$footerContent.append($nav);
|
|
53
|
-
|
|
54
|
-
$footer.append($footerContent);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// Initialise features
|
|
59
|
-
if (config.features) {
|
|
60
|
-
// Icon scanning
|
|
61
|
-
if (config.features.icons) {
|
|
62
|
-
Domma.icons.scan();
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
// Back to top button
|
|
66
|
-
if (config.features.backToTop) {
|
|
67
|
-
Domma.elements.backToTop({
|
|
68
|
-
scrollThreshold: 300,
|
|
69
|
-
position: 'bottom-right'
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
// Smooth scroll
|
|
74
|
-
if (config.features.smoothScroll) {
|
|
75
|
-
$('a[href^="#"]').on('click', function (e) {
|
|
76
|
-
e.preventDefault();
|
|
77
|
-
const targetId = $(this).attr('href');
|
|
78
|
-
const $target = $(targetId);
|
|
79
|
-
|
|
80
|
-
if ($target.length) {
|
|
81
|
-
$target[0].scrollIntoView({behavior: 'smooth'});
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// Code copy buttons
|
|
87
|
-
if (config.features.codeCopy) {
|
|
88
|
-
$('pre code').each((codeBlock) => {
|
|
89
|
-
const $code = $(codeBlock);
|
|
90
|
-
const $pre = $code.parent();
|
|
91
|
-
|
|
92
|
-
const $button = $('<button class="btn btn-sm code-copy-btn">Copy</button>');
|
|
93
|
-
|
|
94
|
-
$button.on('click', () => {
|
|
95
|
-
_.copyToClipboard($code.text());
|
|
96
|
-
$button.text('Copied!');
|
|
97
|
-
setTimeout(() => $button.text('Copy'), 2000);
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
$pre.css('position', 'relative');
|
|
101
|
-
$pre.prepend($button);
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
console.log(`✓ Domma initialised with theme: ${config.theme.default}`);
|
|
107
|
-
});
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* Add floating theme selector
|
|
112
|
-
*/
|
|
113
|
-
function addThemeSelector() {
|
|
114
|
-
const themes = Domma.theme.listThemes();
|
|
115
|
-
const currentTheme = Domma.theme.get();
|
|
116
|
-
|
|
117
|
-
const $selector = $('<div class="theme-selector"></div>');
|
|
118
|
-
const $select = $('<select id="theme-select" class="form-select"></select>');
|
|
119
|
-
|
|
120
|
-
_.each(themes, theme => {
|
|
121
|
-
const $option = $('<option></option>')
|
|
122
|
-
.attr('value', theme)
|
|
123
|
-
.text(theme);
|
|
124
|
-
|
|
125
|
-
if (theme === currentTheme) {
|
|
126
|
-
$option.attr('selected', 'selected');
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
$select.append($option);
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
$selector.append($select);
|
|
133
|
-
|
|
134
|
-
// Add styles
|
|
135
|
-
const $style = $(`<style>
|
|
136
|
-
.theme-selector {
|
|
137
|
-
position: fixed;
|
|
138
|
-
bottom: 80px;
|
|
139
|
-
right: 20px;
|
|
140
|
-
z-index: 1000;
|
|
141
|
-
background: var(--dm-surface);
|
|
142
|
-
padding: var(--dm-space-3);
|
|
143
|
-
border-radius: var(--dm-radius-md);
|
|
144
|
-
box-shadow: var(--dm-shadow-lg);
|
|
145
|
-
}
|
|
146
|
-
.theme-selector select {
|
|
147
|
-
min-width: 150px;
|
|
148
|
-
}
|
|
149
|
-
</style>`);
|
|
150
|
-
|
|
151
|
-
$('head').append($style);
|
|
152
|
-
$('body').append($selector);
|
|
153
|
-
|
|
154
|
-
// Handle theme changes
|
|
155
|
-
$select.on('change', (e) => {
|
|
156
|
-
Domma.theme.set($(e.target).val());
|
|
157
|
-
});
|
|
158
|
-
}
|