@xenterprises/nuxt-x-marketing 0.0.2 → 0.0.4
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/.playground/app.config.ts +67 -4
- package/.playground/nuxt.config.ts +2 -2
- package/.playground/pages/index.vue +1 -1
- package/app.config.ts +88 -8
- package/app.vue +19 -0
- package/components/X/Footer/XLegal/index.vue +11 -9
- package/components/X/Footer/index.vue +85 -0
- package/components/X/Header/Nav/index.vue +38 -0
- package/composables/useXBlog.ts +11 -0
- package/nuxt.config.ts +7 -2
- package/package.json +7 -3
- package/pages/blog/index.vue +10 -0
|
@@ -1,5 +1,68 @@
|
|
|
1
1
|
export default defineAppConfig({
|
|
2
|
-
|
|
3
|
-
name:
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
xMarketing: {
|
|
3
|
+
name: "My amazing Nuxt layer (overwritten)",
|
|
4
|
+
config: {
|
|
5
|
+
markerProjectId: "67191169861c84dffad87d71",
|
|
6
|
+
},
|
|
7
|
+
header: {
|
|
8
|
+
logo: {
|
|
9
|
+
src: "https://cdn.x.enterprises/logo-x.png",
|
|
10
|
+
alt: "X Enterprises",
|
|
11
|
+
},
|
|
12
|
+
nav: {
|
|
13
|
+
buttons: [
|
|
14
|
+
{
|
|
15
|
+
label: "Get Started",
|
|
16
|
+
to: "/get-started",
|
|
17
|
+
},
|
|
18
|
+
],
|
|
19
|
+
links: [
|
|
20
|
+
{
|
|
21
|
+
label: "Home",
|
|
22
|
+
to: "/",
|
|
23
|
+
},
|
|
24
|
+
],
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
footer: {
|
|
28
|
+
logo: {
|
|
29
|
+
src: "https://cdn.x.enterprises/logo-x.png",
|
|
30
|
+
alt: "",
|
|
31
|
+
},
|
|
32
|
+
bg: {
|
|
33
|
+
color: "",
|
|
34
|
+
img: {
|
|
35
|
+
src: "https://cdn.x.enterprises/bg-gradient.svg",
|
|
36
|
+
alt: "Gradient background",
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
body: "Rock Your Band's World with Bandmate - the all-in-one platform designed to streamline your band's management, collaboration, and growth. Stay connected, stay inspired, and keep rocking with Bandmate! Follow us on social media and join our newsletter for the latest updates, tips, and industry news. Let's make music together!",
|
|
40
|
+
socials: [
|
|
41
|
+
{
|
|
42
|
+
name: "Instagram",
|
|
43
|
+
url: "https://www.instagram.com/bandmate.io",
|
|
44
|
+
icon: "i-simple-icons-instagram",
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
columns: [
|
|
48
|
+
{
|
|
49
|
+
headerLabel: "Products",
|
|
50
|
+
links: [
|
|
51
|
+
{
|
|
52
|
+
label: "Features",
|
|
53
|
+
to: "/features",
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
label: "Pricing",
|
|
57
|
+
to: "/pricing",
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
label: "Customers",
|
|
61
|
+
to: "/customers",
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
});
|
package/app.config.ts
CHANGED
|
@@ -1,14 +1,94 @@
|
|
|
1
1
|
export default defineAppConfig({
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
ui: {
|
|
3
|
+
primary: "sky",
|
|
4
|
+
header: {
|
|
5
|
+
container: "max-w-screen-2xl container mx-auto",
|
|
6
|
+
},
|
|
7
|
+
},
|
|
8
|
+
xMarketing: {
|
|
9
|
+
name: "X Enterprises",
|
|
10
|
+
config: {
|
|
11
|
+
markerProjectId: "",
|
|
12
|
+
},
|
|
13
|
+
header: {
|
|
14
|
+
logo: {
|
|
15
|
+
src: "",
|
|
16
|
+
alt: "",
|
|
17
|
+
},
|
|
18
|
+
nav: {
|
|
19
|
+
buttons: [],
|
|
20
|
+
links: [],
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
footer: {
|
|
24
|
+
logo: {
|
|
25
|
+
src: "",
|
|
26
|
+
alt: "",
|
|
27
|
+
},
|
|
28
|
+
bg: {
|
|
29
|
+
color: "",
|
|
30
|
+
img: {
|
|
31
|
+
src: "",
|
|
32
|
+
alt: "",
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
body: "",
|
|
36
|
+
socials: [],
|
|
37
|
+
columns: [],
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
});
|
|
6
41
|
|
|
7
|
-
declare module
|
|
42
|
+
declare module "@nuxt/schema" {
|
|
8
43
|
interface AppConfigInput {
|
|
9
|
-
|
|
44
|
+
xMarketing?: {
|
|
10
45
|
/** Project name */
|
|
11
|
-
name?: string
|
|
12
|
-
|
|
46
|
+
name?: string;
|
|
47
|
+
config?: {
|
|
48
|
+
markerProjectId?: string;
|
|
49
|
+
};
|
|
50
|
+
header?: {
|
|
51
|
+
logo?: {
|
|
52
|
+
src?: string;
|
|
53
|
+
alt?: string;
|
|
54
|
+
};
|
|
55
|
+
nav?: {
|
|
56
|
+
buttons?: {
|
|
57
|
+
label: string;
|
|
58
|
+
to: string;
|
|
59
|
+
}[];
|
|
60
|
+
links?: {
|
|
61
|
+
label: string;
|
|
62
|
+
to: string;
|
|
63
|
+
}[];
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
footer?: {
|
|
67
|
+
body?: string;
|
|
68
|
+
bg?: {
|
|
69
|
+
color?: string;
|
|
70
|
+
img?: {
|
|
71
|
+
src?: string;
|
|
72
|
+
alt?: string;
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
logo?: {
|
|
76
|
+
src?: string;
|
|
77
|
+
alt?: string;
|
|
78
|
+
};
|
|
79
|
+
socials?: {
|
|
80
|
+
name: string;
|
|
81
|
+
url: string;
|
|
82
|
+
icon: string;
|
|
83
|
+
}[];
|
|
84
|
+
columns?: {
|
|
85
|
+
headerLabel: string;
|
|
86
|
+
links: {
|
|
87
|
+
label: string;
|
|
88
|
+
to: string;
|
|
89
|
+
}[];
|
|
90
|
+
}[];
|
|
91
|
+
};
|
|
92
|
+
};
|
|
13
93
|
}
|
|
14
94
|
}
|
package/app.vue
CHANGED
|
@@ -1,14 +1,33 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<main class="min-h-screen flex flex-col justify-between">
|
|
3
|
+
<XHeaderNav />
|
|
3
4
|
<section class="flex-grow">
|
|
5
|
+
<NuxtLoadingIndicator />
|
|
4
6
|
<NuxtLayout>
|
|
5
7
|
<NuxtPage />
|
|
6
8
|
</NuxtLayout>
|
|
9
|
+
<UNotifications />
|
|
10
|
+
<UModals />
|
|
7
11
|
</section>
|
|
8
12
|
<section>
|
|
13
|
+
<XFooter />
|
|
9
14
|
<XFooterXLegal />
|
|
10
15
|
</section>
|
|
11
16
|
</main>
|
|
12
17
|
</template>
|
|
13
18
|
<script setup>
|
|
19
|
+
import { ref, onMounted } from "vue";
|
|
20
|
+
import markerSDK from "@marker.io/browser";
|
|
21
|
+
|
|
22
|
+
const appConfig = useAppConfig();
|
|
23
|
+
useSeoMeta({
|
|
24
|
+
titleTemplate: `%s`,
|
|
25
|
+
});
|
|
26
|
+
if (appConfig && appConfig?.xMarketing?.config?.markerProjectId) {
|
|
27
|
+
onMounted(() => {
|
|
28
|
+
const widget = markerSDK.loadWidget({
|
|
29
|
+
project: appConfig?.xMarketing?.config?.markerProjectId,
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
}
|
|
14
33
|
</script>
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<footer
|
|
3
|
-
class="bg-gray-900 text-gray-
|
|
3
|
+
class="bg-gray-900 text-gray-400 text-xs relative overflow-visible pt-2"
|
|
4
4
|
>
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
<a href="https://x.enterprises" target="_blank">
|
|
6
|
+
<img
|
|
7
|
+
src="https://cdn.x.enterprises/logo-x.png"
|
|
8
|
+
alt="X Enterprises"
|
|
9
|
+
class="h-6 w-6 mx-auto -mt-5 relative z-10"
|
|
10
|
+
/>
|
|
11
|
+
</a>
|
|
10
12
|
<main
|
|
11
|
-
class="
|
|
13
|
+
class="flex flex-col md:flex-row justify-between items-center px-6 pt-3 pb-5 max-w-screen-2xl mx-auto"
|
|
12
14
|
>
|
|
13
|
-
<div>
|
|
15
|
+
<div class="pb-4 md:pb-0 text-center md:text-left">
|
|
14
16
|
Copyright ©2016-{{ new Date().getFullYear() }} X Enterprises, LLC.
|
|
15
17
|
All Rights Reserved.
|
|
16
18
|
</div>
|
|
17
19
|
|
|
18
|
-
<div class="text-right">
|
|
20
|
+
<div class="text-center md:text-right pb-14 md:pb-0">
|
|
19
21
|
<a
|
|
20
22
|
href="https://x.enterprises/legal/terms"
|
|
21
23
|
class="hover:underline"
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<section
|
|
4
|
+
class="relative pt-24 overflow-hidden"
|
|
5
|
+
:class="footer?.bg?.color ? footer?.bg?.color : 'bg-gray-900'"
|
|
6
|
+
>
|
|
7
|
+
<img
|
|
8
|
+
class="absolute left-1/2 bottom-0 h-full transform -translate-x-1/2"
|
|
9
|
+
:src="footer?.bg?.img?.src"
|
|
10
|
+
:alt="footer?.bg?.img?.alt"
|
|
11
|
+
v-if="footer?.bg?.img?.src"
|
|
12
|
+
/>
|
|
13
|
+
<div class="relative z-10 container mx-auto max-w-screen-2xl">
|
|
14
|
+
<div class="pb-24 border-b border-gray-900">
|
|
15
|
+
<div class="flex flex-wrap justify-between">
|
|
16
|
+
<div class="w-full sm:w-1/2 lg:w-6/12 p-4 md:p-8">
|
|
17
|
+
<div class="lg:max-w-xl">
|
|
18
|
+
<a class="mb-8 inline-block" href="#">
|
|
19
|
+
<img
|
|
20
|
+
:src="footer?.logo?.src"
|
|
21
|
+
:alt="footer?.logo?.alt"
|
|
22
|
+
class="h-6"
|
|
23
|
+
/>
|
|
24
|
+
</a>
|
|
25
|
+
<p
|
|
26
|
+
class="mb-20 text-gray-400 font-medium leading-relaxed md:max-w-7xl"
|
|
27
|
+
>
|
|
28
|
+
{{ footer?.body }}
|
|
29
|
+
</p>
|
|
30
|
+
<div class="flex flex-row flex-wrap -m-1.5 gap-2">
|
|
31
|
+
<div
|
|
32
|
+
class="w-auto"
|
|
33
|
+
v-for="(social, index) in footer?.socials"
|
|
34
|
+
:key="index"
|
|
35
|
+
>
|
|
36
|
+
<UButton
|
|
37
|
+
:to="social.url"
|
|
38
|
+
:icon="social?.icon"
|
|
39
|
+
:alt="social?.name"
|
|
40
|
+
color="gray"
|
|
41
|
+
square
|
|
42
|
+
target="_blank"
|
|
43
|
+
variant="ghost"
|
|
44
|
+
>
|
|
45
|
+
</UButton>
|
|
46
|
+
</div>
|
|
47
|
+
<UColorModeButton />
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="w-full sm:w-1/2 lg:w-2/12 p-8"></div>
|
|
52
|
+
<div
|
|
53
|
+
class="w-full sm:w-1/2 lg:w-2/12 p-8 text-center md:text-right"
|
|
54
|
+
v-for="(column, index) in footer.columns"
|
|
55
|
+
:key="index"
|
|
56
|
+
>
|
|
57
|
+
<h3
|
|
58
|
+
class="mb-8 text-sm text-gray-600 uppercase font-semibold leading-normal tracking-px"
|
|
59
|
+
>
|
|
60
|
+
{{ column?.headerLabel }}
|
|
61
|
+
</h3>
|
|
62
|
+
<ul>
|
|
63
|
+
<li
|
|
64
|
+
class="mb-5"
|
|
65
|
+
v-for="link in column?.links"
|
|
66
|
+
:key="link?.label"
|
|
67
|
+
>
|
|
68
|
+
<nuxt-link
|
|
69
|
+
:to="link?.to"
|
|
70
|
+
class="text-white hover:text-gray-200 font-medium leading-relaxed"
|
|
71
|
+
>{{ link?.label }}</nuxt-link
|
|
72
|
+
>
|
|
73
|
+
</li>
|
|
74
|
+
</ul>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</section>
|
|
80
|
+
</div>
|
|
81
|
+
</template>
|
|
82
|
+
<script setup>
|
|
83
|
+
const appConfig = useAppConfig();
|
|
84
|
+
const footer = appConfig?.xMarketing?.footer;
|
|
85
|
+
</script>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<UHeader :links="links">
|
|
3
|
+
<template #logo>
|
|
4
|
+
<img
|
|
5
|
+
:src="header?.logo?.src"
|
|
6
|
+
:alt="header?.logo?.alt"
|
|
7
|
+
class="h-8"
|
|
8
|
+
v-if="header?.logo?.src"
|
|
9
|
+
/>
|
|
10
|
+
<span v-else>{{ header?.logo?.alt }}</span>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<template #right>
|
|
14
|
+
<span v-for="(button, index) in header?.nav?.buttons" :key="index"
|
|
15
|
+
><UButton class="hidden md:block py-2" :to="button?.to">{{
|
|
16
|
+
button?.label
|
|
17
|
+
}}</UButton></span
|
|
18
|
+
>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<template #panel>
|
|
22
|
+
<UNavigationTree :links="links" />
|
|
23
|
+
<span v-for="(button, index) in header?.nav?.buttons" :key="index"
|
|
24
|
+
><UButton
|
|
25
|
+
class="md:hidden mt-5 py-2 w-full flex flex-row justify-center"
|
|
26
|
+
:to="button?.to"
|
|
27
|
+
>{{ button?.label }}</UButton
|
|
28
|
+
></span
|
|
29
|
+
>
|
|
30
|
+
</template>
|
|
31
|
+
</UHeader>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script setup>
|
|
35
|
+
const appConfig = useAppConfig();
|
|
36
|
+
const header = appConfig?.xMarketing?.header;
|
|
37
|
+
const links = header?.nav?.links || [];
|
|
38
|
+
</script>
|
package/nuxt.config.ts
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
|
2
2
|
export default defineNuxtConfig({
|
|
3
|
-
devtools: { enabled: true }
|
|
4
|
-
|
|
3
|
+
devtools: { enabled: true },
|
|
4
|
+
extends: ["@nuxt/ui-pro"],
|
|
5
|
+
modules: ["@nuxt/ui"],
|
|
6
|
+
ui: {
|
|
7
|
+
icons: ["heroicons", "simple-icons"],
|
|
8
|
+
},
|
|
9
|
+
});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xenterprises/nuxt-x-marketing",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.4",
|
|
5
5
|
"main": "./nuxt.config.ts",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"dev": "nuxi dev .playground",
|
|
@@ -11,10 +11,14 @@
|
|
|
11
11
|
"preview": "nuxt preview .playground"
|
|
12
12
|
},
|
|
13
13
|
"devDependencies": {
|
|
14
|
-
"@nuxt/ui": "^2.18.7",
|
|
15
|
-
"@nuxt/ui-pro": "^1.4.4",
|
|
16
14
|
"nuxt": "^3.13.2",
|
|
17
15
|
"typescript": "^5.6.3",
|
|
18
16
|
"vue": "latest"
|
|
17
|
+
},
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@marker.io/browser": "^0.19.0",
|
|
20
|
+
"simple-icons": "^13.15.0",
|
|
21
|
+
"@nuxt/ui": "^2.18.7",
|
|
22
|
+
"@nuxt/ui-pro": "^1.4.4"
|
|
19
23
|
}
|
|
20
24
|
}
|