@xenterprises/nuxt-x-marketing 0.0.4 → 0.0.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/README.md +198 -41
- package/components/X/Footer/index.vue +4 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,73 +1,230 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @xenterprises/nuxt-x-marketing
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@xenterprises/nuxt-x-marketing` is a Nuxt.js layer designed specifically for creating marketing-centric sites. It provides a customizable layout and structure for marketing components such as headers, footers, and social links, allowing you to quickly set up a cohesive, branded marketing site.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- **Customizable UI**: Configure primary UI elements such as colors, container layouts, and screen width.
|
|
8
|
+
- **Header & Footer Configuration**: Easily manage header and footer elements, including logos, navigation links, and social media icons.
|
|
9
|
+
- **Project-specific Branding**: Define project-specific settings such as project name, logos, and links for both the header and footer.
|
|
10
|
+
- **Flexible Navigation and Social Links**: Add buttons, links, and social media icons to header and footer sections.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
1. **Install the package via npm**:
|
|
8
15
|
|
|
9
16
|
```bash
|
|
10
|
-
|
|
17
|
+
npm install @xenterprises/nuxt-x-marketing
|
|
11
18
|
```
|
|
12
19
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
|
|
20
|
+
2. **Add the Layer to Your Nuxt Config**
|
|
16
21
|
|
|
17
|
-
|
|
22
|
+
In your `nuxt.config.js` or `nuxt.config.ts` file, import the `@xenterprises/nuxt-x-marketing` layer:
|
|
18
23
|
|
|
19
|
-
|
|
24
|
+
```javascript
|
|
25
|
+
export default defineNuxtConfig({
|
|
26
|
+
extends: "@xenterprises/nuxt-x-marketing",
|
|
27
|
+
});
|
|
28
|
+
```
|
|
20
29
|
|
|
21
|
-
|
|
30
|
+
3. **Configure Your Project Settings**
|
|
31
|
+
|
|
32
|
+
Add configuration settings in your `app.config.ts` or `app.config.js` file to set up branding, navigation, and other customizable options.
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
export default defineAppConfig({
|
|
36
|
+
ui: {
|
|
37
|
+
primary: "sky",
|
|
38
|
+
header: {
|
|
39
|
+
container: "max-w-screen-2xl container mx-auto",
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
xMarketing: {
|
|
43
|
+
name: "X Enterprises",
|
|
44
|
+
config: {
|
|
45
|
+
markerProjectId: "project-1234",
|
|
46
|
+
},
|
|
47
|
+
header: {
|
|
48
|
+
logo: {
|
|
49
|
+
src: "/images/logo.png",
|
|
50
|
+
alt: "X Enterprises",
|
|
51
|
+
},
|
|
52
|
+
nav: {
|
|
53
|
+
buttons: [{ label: "Contact Us", to: "/contact" }],
|
|
54
|
+
links: [{ label: "About", to: "/about" }],
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
footer: {
|
|
58
|
+
logo: {
|
|
59
|
+
src: "/images/footer-logo.png",
|
|
60
|
+
alt: "X Enterprises Footer Logo",
|
|
61
|
+
},
|
|
62
|
+
bg: {
|
|
63
|
+
color: "#f3f3f3",
|
|
64
|
+
img: {
|
|
65
|
+
src: "/images/footer-bg.png",
|
|
66
|
+
alt: "Footer Background Image",
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
body: "© 2024 X Enterprises. All rights reserved.",
|
|
70
|
+
socials: [
|
|
71
|
+
{
|
|
72
|
+
name: "Facebook",
|
|
73
|
+
url: "https://facebook.com",
|
|
74
|
+
icon: "facebook-icon",
|
|
75
|
+
},
|
|
76
|
+
],
|
|
77
|
+
columns: [
|
|
78
|
+
{
|
|
79
|
+
headerLabel: "Company",
|
|
80
|
+
links: [{ label: "About Us", to: "/about" }],
|
|
81
|
+
},
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
});
|
|
86
|
+
```
|
|
22
87
|
|
|
23
|
-
|
|
88
|
+
4. **Run Your Nuxt Application**
|
|
24
89
|
|
|
25
|
-
|
|
90
|
+
Start your Nuxt application to see `@xenterprises/nuxt-x-marketing` in action:
|
|
26
91
|
|
|
27
92
|
```bash
|
|
28
|
-
npm
|
|
93
|
+
npm run dev
|
|
29
94
|
```
|
|
30
95
|
|
|
31
|
-
|
|
96
|
+
## Configuration Options
|
|
32
97
|
|
|
33
|
-
|
|
34
|
-
npm install --save your-layer
|
|
35
|
-
```
|
|
98
|
+
The following options are available for customization in the `xMarketing` layer configuration:
|
|
36
99
|
|
|
37
|
-
|
|
100
|
+
### UI
|
|
38
101
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
102
|
+
Configure general UI settings for the app layout.
|
|
103
|
+
|
|
104
|
+
```javascript
|
|
105
|
+
ui: {
|
|
106
|
+
primary: "sky", // Primary color theme
|
|
107
|
+
header: {
|
|
108
|
+
container: "max-w-screen-2xl container mx-auto" // Maximum screen width for container
|
|
109
|
+
}
|
|
110
|
+
}
|
|
43
111
|
```
|
|
44
112
|
|
|
45
|
-
|
|
113
|
+
### xMarketing
|
|
46
114
|
|
|
47
|
-
|
|
115
|
+
Define the core marketing elements for your project under `xMarketing`.
|
|
48
116
|
|
|
49
|
-
```
|
|
50
|
-
|
|
117
|
+
```javascript
|
|
118
|
+
xMarketing: {
|
|
119
|
+
name: "X Enterprises", // Project name to display
|
|
120
|
+
config: {
|
|
121
|
+
markerProjectId: "", // Placeholder for your project ID if needed
|
|
122
|
+
},
|
|
51
123
|
```
|
|
52
124
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
```
|
|
58
|
-
|
|
125
|
+
#### Header Configuration
|
|
126
|
+
|
|
127
|
+
Set up the header, including logo and navigation elements.
|
|
128
|
+
|
|
129
|
+
```javascript
|
|
130
|
+
header: {
|
|
131
|
+
logo: {
|
|
132
|
+
src: "", // Source URL of the logo
|
|
133
|
+
alt: "", // Alt text for the logo
|
|
134
|
+
},
|
|
135
|
+
nav: {
|
|
136
|
+
buttons: [], // Array of buttons with `label` and `to` attributes
|
|
137
|
+
links: [], // Array of navigation links with `label` and `to` attributes
|
|
138
|
+
},
|
|
139
|
+
}
|
|
59
140
|
```
|
|
60
141
|
|
|
61
|
-
|
|
142
|
+
#### Footer Configuration
|
|
143
|
+
|
|
144
|
+
Define the footer layout, logo, background, and social links.
|
|
145
|
+
|
|
146
|
+
```javascript
|
|
147
|
+
footer: {
|
|
148
|
+
logo: {
|
|
149
|
+
src: "", // Footer logo URL
|
|
150
|
+
alt: "", // Footer logo alt text
|
|
151
|
+
},
|
|
152
|
+
bg: {
|
|
153
|
+
color: "", // Background color for the footer
|
|
154
|
+
img: {
|
|
155
|
+
src: "", // Background image URL for the footer
|
|
156
|
+
alt: "", // Alt text for the background image
|
|
157
|
+
},
|
|
158
|
+
},
|
|
159
|
+
body: "", // Optional text for the footer
|
|
160
|
+
socials: [], // Array of social media objects with `name`, `url`, and `icon`
|
|
161
|
+
columns: [], // Footer columns with links
|
|
162
|
+
}
|
|
163
|
+
```
|
|
62
164
|
|
|
63
|
-
|
|
64
|
-
|
|
165
|
+
### Example Configuration
|
|
166
|
+
|
|
167
|
+
Below is an example configuration for `xMarketing`:
|
|
168
|
+
|
|
169
|
+
```javascript
|
|
170
|
+
export default defineAppConfig({
|
|
171
|
+
ui: {
|
|
172
|
+
primary: "sky",
|
|
173
|
+
header: {
|
|
174
|
+
container: "max-w-screen-2xl container mx-auto",
|
|
175
|
+
},
|
|
176
|
+
},
|
|
177
|
+
xMarketing: {
|
|
178
|
+
name: "X Enterprises",
|
|
179
|
+
config: {
|
|
180
|
+
markerProjectId: "project-1234",
|
|
181
|
+
},
|
|
182
|
+
header: {
|
|
183
|
+
logo: {
|
|
184
|
+
src: "/images/logo.png",
|
|
185
|
+
alt: "X Enterprises",
|
|
186
|
+
},
|
|
187
|
+
nav: {
|
|
188
|
+
buttons: [{ label: "Contact Us", to: "/contact" }],
|
|
189
|
+
links: [{ label: "About", to: "/about" }],
|
|
190
|
+
},
|
|
191
|
+
},
|
|
192
|
+
footer: {
|
|
193
|
+
logo: {
|
|
194
|
+
src: "/images/footer-logo.png",
|
|
195
|
+
alt: "X Enterprises Footer Logo",
|
|
196
|
+
},
|
|
197
|
+
bg: {
|
|
198
|
+
color: "#f3f3f3",
|
|
199
|
+
img: {
|
|
200
|
+
src: "/images/footer-bg.png",
|
|
201
|
+
alt: "Footer Background Image",
|
|
202
|
+
},
|
|
203
|
+
},
|
|
204
|
+
body: "© 2024 X Enterprises. All rights reserved.",
|
|
205
|
+
socials: [
|
|
206
|
+
{
|
|
207
|
+
name: "Facebook",
|
|
208
|
+
url: "https://facebook.com",
|
|
209
|
+
icon: "facebook-icon",
|
|
210
|
+
},
|
|
211
|
+
],
|
|
212
|
+
columns: [
|
|
213
|
+
{
|
|
214
|
+
headerLabel: "Company",
|
|
215
|
+
links: [{ label: "About Us", to: "/about" }],
|
|
216
|
+
},
|
|
217
|
+
],
|
|
218
|
+
},
|
|
219
|
+
},
|
|
220
|
+
});
|
|
65
221
|
```
|
|
66
222
|
|
|
67
|
-
|
|
223
|
+
### Additional Notes
|
|
68
224
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
225
|
+
- **Icons for Socials**: Icons should be referenced by name and sourced from your project’s icon library.
|
|
226
|
+
- **Responsive Layouts**: Use `container` and `max-w-screen` utilities for responsive designs.
|
|
227
|
+
|
|
228
|
+
## License
|
|
72
229
|
|
|
73
|
-
|
|
230
|
+
This project is open-source and can be modified as per your project requirements.
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<div class="flex flex-wrap justify-between">
|
|
16
16
|
<div class="w-full sm:w-1/2 lg:w-6/12 p-4 md:p-8">
|
|
17
17
|
<div class="lg:max-w-xl">
|
|
18
|
-
<a class="mb-8 inline-block" href="
|
|
18
|
+
<a class="mb-8 inline-block" href="/">
|
|
19
19
|
<img
|
|
20
20
|
:src="footer?.logo?.src"
|
|
21
21
|
:alt="footer?.logo?.alt"
|
|
@@ -27,7 +27,9 @@
|
|
|
27
27
|
>
|
|
28
28
|
{{ footer?.body }}
|
|
29
29
|
</p>
|
|
30
|
-
<div
|
|
30
|
+
<div
|
|
31
|
+
class="flex flex-row flex-wrap gap-2 justify-center md:justify-start md:-m-1.5"
|
|
32
|
+
>
|
|
31
33
|
<div
|
|
32
34
|
class="w-auto"
|
|
33
35
|
v-for="(social, index) in footer?.socials"
|