@mundogamernetwork/shared-ui 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/assets/kit/kit-theme.css +41 -0
- package/error.vue +140 -0
- package/nuxt.config.ts +1 -0
- package/package.json +3 -1
- package/pages/media-kit/[slug].vue +307 -548
- package/pages/presskit/[slug].vue +315 -139
- package/services/mediaKitService.ts +6 -3
- package/services/pressKitService.ts +5 -3
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Mundo Gamer — Kit design system (Press Kit + Media Kit)
|
|
3
|
+
*
|
|
4
|
+
* Brandable via CSS variables. Each consuming project sets `--kit-accent`
|
|
5
|
+
* (Agency gold, TV purple, Community brand) on its :root, and the public kit
|
|
6
|
+
* pages pick a `data-tpl` (color template) + `data-layout` (layout template)
|
|
7
|
+
* from the saved `theme` / `layout` fields. NEVER use border-radius.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
--kit-accent: #FDB215;
|
|
12
|
+
--kit-accent-ink: #13161C;
|
|
13
|
+
--kit-bg: #0c0e12;
|
|
14
|
+
--kit-surface: #14171d;
|
|
15
|
+
--kit-surface-2: #1b1f27;
|
|
16
|
+
--kit-line: #252a34;
|
|
17
|
+
--kit-text: #f4f6fa;
|
|
18
|
+
--kit-muted: #8b92a0;
|
|
19
|
+
--kit-maxw: 1180px;
|
|
20
|
+
--kit-head-ls: 3px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* ── Color templates (the `theme` field) ── */
|
|
24
|
+
[data-tpl="blade"] { --kit-accent:#FDB215; --kit-accent-ink:#13161C; --kit-bg:#0c0e12; --kit-surface:#14171d; --kit-surface-2:#1b1f27; --kit-line:#252a34; }
|
|
25
|
+
[data-tpl="aurora"] { --kit-accent:#22d3ee; --kit-accent-ink:#06141a; --kit-bg:#080b14; --kit-surface:#101626; --kit-surface-2:#16203a; --kit-line:#1f2c47; }
|
|
26
|
+
[data-tpl="ember"] { --kit-accent:#fb5e3b; --kit-accent-ink:#1a0d09; --kit-bg:#100b0a; --kit-surface:#1a1311; --kit-surface-2:#241917; --kit-line:#352421; }
|
|
27
|
+
[data-tpl="nova"] { --kit-accent:#a855f7; --kit-accent-ink:#ffffff; --kit-bg:#0a0a0f; --kit-surface:#13131c; --kit-surface-2:#1a1a25; --kit-line:#262634; }
|
|
28
|
+
|
|
29
|
+
/* ── Layout templates (the `layout` field) ──
|
|
30
|
+
Applied by the kit pages on the root element; the page provides the
|
|
31
|
+
.kit-layout / .kit-sidebar / .kit-main / .kit-factsheet structure. */
|
|
32
|
+
[data-layout="compact"] .kit-cover { min-height: 360px; }
|
|
33
|
+
[data-layout="compact"] .kit-layout { grid-template-columns: 1fr 280px; }
|
|
34
|
+
[data-layout="compact"] .kit-sidebar { order: 2; }
|
|
35
|
+
[data-layout="compact"] .kit-main { order: 1; }
|
|
36
|
+
|
|
37
|
+
[data-layout="showcase"] .kit-layout { display: block; }
|
|
38
|
+
[data-layout="showcase"] .kit-sidebar { position: static; margin-bottom: 44px; }
|
|
39
|
+
[data-layout="showcase"] .kit-factsheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 22px; }
|
|
40
|
+
[data-layout="showcase"] .kit-factsheet .kit-fact-title { grid-column: 1 / -1; }
|
|
41
|
+
[data-layout="showcase"] .kit-main { max-width: 920px; margin: 0 auto; }
|
package/error.vue
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
const error = useError();
|
|
3
|
+
|
|
4
|
+
interface CustomError {
|
|
5
|
+
url: string;
|
|
6
|
+
statusCode: number;
|
|
7
|
+
statusMessage: string;
|
|
8
|
+
message: string;
|
|
9
|
+
description: string;
|
|
10
|
+
data?: any;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const statusCodeError = Number((error.value as CustomError)?.statusCode) || 404;
|
|
14
|
+
|
|
15
|
+
const authStore = useAuthStore();
|
|
16
|
+
|
|
17
|
+
onMounted(async () => {
|
|
18
|
+
try {
|
|
19
|
+
await authStore.getUser();
|
|
20
|
+
} catch {
|
|
21
|
+
// Silently handle auth failure on error pages
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
const locale = useNuxtApp().$i18n?.locale?.value || "en";
|
|
26
|
+
|
|
27
|
+
const errorConfig: Record<number, { title: string; description: string; icon: string }> = {
|
|
28
|
+
401: { title: "errors.401.title", description: "errors.401.description", icon: "lock" },
|
|
29
|
+
403: { title: "errors.403.title", description: "errors.403.description", icon: "lock" },
|
|
30
|
+
404: { title: "errors.404.title", description: "errors.404.description", icon: "search" },
|
|
31
|
+
500: { title: "errors.500.title", description: "errors.500.description", icon: "warning" },
|
|
32
|
+
503: { title: "errors.503.title", description: "errors.503.description", icon: "warning" },
|
|
33
|
+
504: { title: "errors.504.title", description: "errors.504.description", icon: "clock" },
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const currentError = computed(() => errorConfig[statusCodeError] || errorConfig[404]);
|
|
37
|
+
|
|
38
|
+
function goHome() {
|
|
39
|
+
clearError({ redirect: `/${locale}` });
|
|
40
|
+
}
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<template>
|
|
44
|
+
<NuxtLayout>
|
|
45
|
+
<div class="error-page">
|
|
46
|
+
<div class="error-content">
|
|
47
|
+
<div class="error-icon">
|
|
48
|
+
<MGIcon :icon="currentError.icon" size="3x" />
|
|
49
|
+
</div>
|
|
50
|
+
<h1 class="error-code">{{ statusCodeError }}</h1>
|
|
51
|
+
<h2 class="error-title">{{ $t(currentError.title) }}</h2>
|
|
52
|
+
<p class="error-description">{{ $t(currentError.description) }}</p>
|
|
53
|
+
|
|
54
|
+
<div v-if="statusCodeError === 404" class="error-suggestions">
|
|
55
|
+
<ul>
|
|
56
|
+
<li>{{ $t("errors.404.suggestion_1") }}</li>
|
|
57
|
+
<li>{{ $t("errors.404.suggestion_2") }}</li>
|
|
58
|
+
<li>{{ $t("errors.404.suggestion_3") }}</li>
|
|
59
|
+
</ul>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<button class="btn-home" @click="goHome">
|
|
63
|
+
{{ $t("errors.go_home") }}
|
|
64
|
+
</button>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</NuxtLayout>
|
|
68
|
+
</template>
|
|
69
|
+
|
|
70
|
+
<style lang="scss" scoped>
|
|
71
|
+
.error-page {
|
|
72
|
+
display: flex;
|
|
73
|
+
justify-content: center;
|
|
74
|
+
align-items: center;
|
|
75
|
+
min-height: 60vh;
|
|
76
|
+
padding: 32px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.error-content {
|
|
80
|
+
text-align: center;
|
|
81
|
+
max-width: 480px;
|
|
82
|
+
|
|
83
|
+
.error-icon {
|
|
84
|
+
color: var(--inactive);
|
|
85
|
+
margin-bottom: 16px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.error-code {
|
|
89
|
+
font-size: 72px;
|
|
90
|
+
font-weight: 700;
|
|
91
|
+
color: var(--chip-text);
|
|
92
|
+
line-height: 1;
|
|
93
|
+
margin-bottom: 8px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.error-title {
|
|
97
|
+
font-size: 28px;
|
|
98
|
+
font-weight: 600;
|
|
99
|
+
color: var(--card-cover-title);
|
|
100
|
+
margin-bottom: 12px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.error-description {
|
|
104
|
+
font-size: 14px;
|
|
105
|
+
line-height: 20px;
|
|
106
|
+
color: var(--inactive);
|
|
107
|
+
margin-bottom: 24px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.error-suggestions {
|
|
111
|
+
text-align: left;
|
|
112
|
+
margin-bottom: 24px;
|
|
113
|
+
|
|
114
|
+
ul {
|
|
115
|
+
list-style: disc;
|
|
116
|
+
padding-left: 20px;
|
|
117
|
+
|
|
118
|
+
li {
|
|
119
|
+
font-size: 13px;
|
|
120
|
+
line-height: 22px;
|
|
121
|
+
color: var(--inactive);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.btn-home {
|
|
127
|
+
padding: 10px 32px;
|
|
128
|
+
background: var(--chip-text);
|
|
129
|
+
color: var(--chip-background-2);
|
|
130
|
+
border: none;
|
|
131
|
+
font-size: 14px;
|
|
132
|
+
font-weight: 600;
|
|
133
|
+
cursor: pointer;
|
|
134
|
+
|
|
135
|
+
&:hover {
|
|
136
|
+
opacity: 0.9;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
</style>
|
package/nuxt.config.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mundogamernetwork/shared-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./nuxt.config.ts",
|
|
7
7
|
"files": [
|
|
8
|
+
"assets",
|
|
8
9
|
"components",
|
|
9
10
|
"composables",
|
|
10
11
|
"middleware",
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
"stores",
|
|
15
16
|
"types",
|
|
16
17
|
"utils",
|
|
18
|
+
"error.vue",
|
|
17
19
|
"nuxt.config.ts"
|
|
18
20
|
],
|
|
19
21
|
"publishConfig": {
|