1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
// Copyright (C) 2023 Vaughn Nugent
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as
// published by the Free Software Foundation, either version 3 of the
// License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
//Get the create app from boostrap dir
import { createVnApp } from './bootstrap'
//Import all styles
import './bootstrap/style/all.scss'
import './assets/main.scss'
//Use the Nunito font
import "@fontsource/nunito"
/* FONT AWESOME CONFIG */
import { library } from '@fortawesome/fontawesome-svg-core'
import { faBullhorn, faCertificate, faCheck, faChevronLeft, faChevronRight, faComment, faCopy, faFolderOpen, faKey, faLink, faMinusCircle, faPencil, faPhotoFilm, faPlus, faRotateLeft, faSignInAlt, faSpinner, faSync, faTrash, faUser } from '@fortawesome/free-solid-svg-icons'
import { faGithub, faDiscord, faMarkdown } from '@fortawesome/free-brands-svg-icons'
//Add required icons for the app
library.add(faSignInAlt, faGithub, faDiscord, faSpinner, faCertificate, faKey, faSync, faPlus, faMinusCircle, faUser, faCheck, faTrash, faCopy,
faPencil, faLink, faPhotoFilm, faRotateLeft, faMarkdown, faBullhorn, faFolderOpen, faComment, faChevronLeft, faChevronRight);
//Add icons to library
import router from './router'
//Import nav components
import FooterNav1 from './components/FooterNav1.vue'
import FooterNav2 from './components/FooterNav2.vue'
import SiteLogo from './components/Site-Logo.vue'
import DynamicFormVue from './components/DynamicForm.vue'
import { configureApi, useAutoHeartbeat } from '@vnuge/vnlib.browser'
import { useLocalStorage } from '@vueuse/core'
import { watch } from 'vue'
createVnApp({
//The app mount point
mountElement: '#app',
//The site title
siteTitle: 'CMNext Admin',
//Routes to display in the header when the user is not logged in
headerRoutes: ['Home', 'Login'],
//Routes to display in the header when the user is logged in
authRoutes: ['Home', 'Blog', 'Account', 'Login'],
//Enable dark mode support
useDarkMode: true,
//Add the font awesome library
faLibrary: library,
//Called when the app is created for you to add custom elements
onCreate(app) {
//Add the router
app.use(router)
//Configure account page redirect to profile
router.addRoute({
path: '/account',
name: 'Account',
redirect: { path: '/account/profile' }
})
//Add the footer nav components
app.component('FooterNav1', FooterNav1)
app.component('FooterNav2', FooterNav2)
//Register site-logo component
app.component('SiteLogo', SiteLogo)
//Register the dynamic form component
app.component('dynamic-form', DynamicFormVue)
},
})
//Setup the vnlib api
configureApi({
session: {
cookiesEnabled: navigator.cookieEnabled,
loginCookieName: import.meta.env.VITE_LOGIN_COOKIE_ID,
bidSize: 32,
storage: localStorage
},
user: {
accountBasePath: import.meta.env.VITE_ACCOUNTS_BASE_PATH,
storage: localStorage,
//The heartbeat interval in milliseconds, if you enable it
autoHearbeatInterval: 1000 * 60 * 5, //5 minute interval
},
axios: {
baseURL: import.meta.env.VITE_API_URL,
withCredentials: import.meta.env.VITE_CORS_ENABLED === 'true',
tokenHeader: import.meta.env.VITE_WEB_TOKEN_HEADER,
}
})
//Get shared global state storage
const mainState = useLocalStorage("vn-state", { ahEnabled: false });
//Setup interval from local storage that remembers the user's preferrence
const { enabled } = useAutoHeartbeat(mainState.value.ahEnabled)
//Update the local storage when the value changes
watch(enabled, (val) => mainState.value.ahEnabled = val)
|
