mango-cms 0.1.22 → 0.1.24

package/cli.js

@@ -168,9 +168,17 @@ program
                 console.log('Error reading settings file:', error.message);
             }
 
+            // Convert project name to lowercase and remove spaces for domain/DB names
+            const projectSlug = answers.projectName.toLowerCase().replace(/[^a-z0-9]/g, '');
+
             settings = {
                 ...settings,
-                license: answers.license
+                license: answers.license,
+                siteName: answers.projectName,
+                siteDomain: `${projectSlug}.com`,
+                domain: `api.${projectSlug}.com`,
+                database: `${projectSlug}`,
+                s3Bucket: `${projectSlug}`
             };
             fs.mkdirSync(path.dirname(settingsPath), { recursive: true });
             fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2));

package/default/src/components/pages/home.vue

@@ -7,12 +7,29 @@
             <div>{{ online ? 'Online' : 'Offline' }}</div>
         </div>
 
+        <!-- Dark Mode Toggle -->
+        <div class="absolute top-4 right-4 z-20">
+            <button @click="darkMode.enabled = !darkMode.enabled"
+                class="p-2 rounded-full bg-white dark:bg-indigo-950/80 shadow-md hover:shadow-lg transition-all">
+                <svg v-if="darkMode.enabled" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-700" fill="none"
+                    viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                </svg>
+            </button>
+        </div>
+
         <div class="pt-16 lg:pt-32 flex items-center justify-center w-full">
 
             <div class="w-full max-2xl py-16 md:py-32 text-center flex flex-col items-center px-8 md:px-16">
                 <div class="text-9xl pb-8">🥭</div>
                 <h1 class="font-bold text-5xl pb-4 bg-clip-text bg-gradient-to-r from-orange-500 to-green-500 text-transparent">Welcome to Mango</h1>
-                <h1 class="font-bold text-lg bg-clip-text bg-gradient-to-r from-orange-500 to-green-500 text-transparent italic opacity-50">Here to make your life stinking easy.</h1>
+                <h1 class="font-bold text-lg bg-clip-text bg-gradient-to-r from-orange-500 to-green-500 text-transparent italic opacity-50">Here to make your life easier.</h1>
             </div>
 
         </div>
@@ -22,7 +39,20 @@
             <div v-else class="space-y-8">
                 <div class="text-lg">Looks like the local Mango server isn't up and running yet. Please start it by running:</div>
                 <div class="w-full">
-                    <code class="bg-gray-200 dark:bg-black p-3 border border-gray-700 rounded-lg w-full">cd mango; yarn; yarn watch;</code>
+                    <div class="flex items-center space-x-2 relative">
+                        <code class="bg-gray-200 dark:bg-black p-3 border border-gray-700 rounded-lg flex-grow dark:selection:bg-sky-700">cd mango; yarn; yarn watch;</code>
+                        <button @click="copyToClipboard('cd mango; yarn; yarn watch;')" class="p-2 rounded-lg bg-gray-200 dark:bg-black border border-gray-700 hover:bg-gray-300 dark:hover:bg-gray-800 transition-colors relative group">
+                            <svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                            </svg>
+                            <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                            </svg>
+                            <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-2 py-1 rounded text-sm whitespace-nowrap opacity-0 transition-opacity duration-300" :class="{ 'opacity-100': copied }">
+                                Copied!
+                            </div>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -33,7 +63,7 @@
                 <div class="text mb-4">Great! Now you're logged in as:</div>
                     <div class="text-2xl mb-8">{{ store.user.title }}</div>
                 <div class="rounded-lg bg-gray-100 dark:bg-gray-800 p-4 ">
-                    <div class="tracking-widest opacity-75 font-mono mt-2 truncate" v-html="JSON.stringify(store.user, undefined, 4).replaceAll('\n', '<br>').replaceAll(' ', '&nbsp;')" />
+                    <pre class="tracking-widest opacity-75 font-mono mt-2 truncate text-xs" v-html="JSON.stringify(store.user, undefined, 4).replaceAll('\n', '<br>').replaceAll(' ', '&nbsp;')" />
                 </div>
             </div>
 
@@ -54,11 +84,25 @@ import Login from '../layout/login.vue'
 
 export default {
     components: { Login },
-    inject: ['store'],
+    inject: ['store','darkMode'],
+    methods: {
+        async copyToClipboard(text) {
+            try {
+                await navigator.clipboard.writeText(text);
+                this.copied = true;
+                setTimeout(() => {
+                    this.copied = false;
+                }, 2000);
+            } catch (err) {
+                console.error('Failed to copy text:', err);
+            }
+        },
+    },
     data() {
         return {
             online: false,
             checker: null,
+            copied: false,
         }
     },
     async created() {

package/default/src/helpers/Mango.vue

@@ -7,7 +7,6 @@
 <script setup>
 import Mango from './mango'
 import { siteName } from '@config/config/settings.json'
-import rws from './reconnecting-websocket'
 import { ref, watch, computed, nextTick, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -245,105 +244,6 @@ async function init() {
 
 }
 
-const GQL = {
-    CONNECTION_INIT: 'connection_init',
-    CONNECTION_ACK: 'connection_ack',
-    CONNECTION_ERROR: 'connection_error',
-    CONNECTION_KEEP_ALIVE: 'ka',
-    START: 'start',
-    STOP: 'stop',
-    CONNECTION_TERMINATE: 'connection_terminate',
-    DATA: 'data',
-    ERROR: 'error',
-    COMPLETE: 'complete'
-}
-function subscribe(collection, id) {
-
-    webSocket = new rws(Mango.ws, 'graphql-ws')
-
-    webSocket.onopen = event => {
-
-        webSocket.send(JSON.stringify({
-            type: GQL.CONNECTION_INIT,
-            payload: {}
-        }))
-
-        webSocket.send(JSON.stringify({
-            type: GQL.START,
-            id: Date.now(),
-            payload: {
-                query: `
-                subscription {
-                    ${collection}(id: "${id}") {
-                        id
-                        settings {
-                            clueTimeLimit
-                            guessTimeLimit
-                        }
-                        guesses {
-                            word
-                            playerId
-                            time
-                        }
-                        clue {
-                            text
-                            number
-                            time
-                            team
-                            words
-                            guesses
-                        }
-                        words {
-                            value
-                            color
-                            guessed
-                        }
-                    }
-                }`,
-                variables: {},
-                operationName: null
-            }
-        }))
-    }
-
-    webSocket.onmessage = event => {
-        const response = JSON.parse(event.data)
-        switch (response.type) {
-            case GQL.CONNECTION_ACK: {
-                console.log('success')
-                break
-            }
-            case GQL.CONNECTION_ERROR: {
-                console.error(response.payload)
-                break
-            }
-            case GQL.CONNECTION_KEEP_ALIVE: {
-                break
-            }
-            case GQL.DATA: {
-                console.log(response.id, response.payload.errors, response.payload.data)
-                if (response.payload.data) {
-                    data.value = response.payload.data[collection]
-                    emit('update:data', data.value)
-                }
-                break
-            }
-            case GQL.COMPLETE: {
-                console.log('completed', response.id)
-                break
-            }
-        }
-    }
-}
-
-onUnmounted(() => {
-    if (webSocket?.send) {
-        webSocket.send(JSON.stringify({
-            type: GQL.CONNECTION_TERMINATE
-        }))
-    }
-})
-
 // init()
 // await init()
 

package/default/src/helpers/email.js

@@ -0,0 +1,36 @@
+import Swal from "sweetalert2"
+import axios from "axios"
+
+function validateEmail(email) {
+    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(String(email.trim()).toLowerCase());
+}
+
+async function subscribeToMailChimp({ email, list, source, alert }) {
+
+    let lists = {
+        master: '816047355d',
+        devotional: '5fbac827f8'
+    }
+
+    let listId = lists[list]
+
+    if (!listId) return console.error(`"${list}" is not a valid email list`)
+    if (!source) return console.error(`You must provide a subscription source`)
+
+    if (!validateEmail(email)) {
+        new Swal('Invalid Email', `"${email}" is not a valid email address`, 'warning')
+        return console.error(`"${email}" is not a valid email address`)
+    }
+
+    try {
+        await axios.post(`https://churchandfamilylife.us2.list-manage.com/subscribe/post?u=12eae89c5f8969e490844c75a&id=${listId}`, { EMAIL: email, MMERGE3: source })
+            .then(response => { if (alert) new Swal('Subscribed!', 'Thank you for subscribing.', 'success') })
+            // MC apparently doesn't give a proper error message we can read at the time of writing this...
+            .catch(response => { if (alert) new Swal('Subscribed!', 'Thank you for subscribing.', 'success') })
+    } catch (e) {
+        console.log(e)
+    }
+}
+
+export { subscribeToMailChimp, validateEmail }

package/default/src/helpers/mango.js

@@ -1,7 +1,7 @@
 // import collections from '../../../mango/config/.collections.json'
 // import { algoliaAppId, algoliaSearchKey, algoliaIndex, port, domain } from '../../../mango/config/settings'
-import collections from '@config/config/.collections.json'
-import { algoliaAppId, algoliaSearchKey, algoliaIndex, port, domain } from '@config/config/settings'
+import collections from '@collections'
+import { algoliaAppId, algoliaSearchKey, algoliaIndex, port, domain } from '@settings'
 import axios from "axios";
 import { ref } from 'vue'
 import algoliasearch from 'algoliasearch/lite'

package/default/src/main.js

@@ -2,8 +2,7 @@ import axios from 'axios'
 import { computed, createApp, defineAsyncComponent, reactive, ref } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import { MotionPlugin } from '@vueuse/motion'
-// import { port, domain } from '../../mango/config/settings'
-import { port, domain } from '../../config/config/settings'
+import { port, domain } from '@settings'
 import VueClipboard from 'vue3-clipboard'
 import Vue3TouchEvents from "vue3-touch-events";
 import App from './App.vue'
@@ -62,12 +61,9 @@ Global Properties
 
 */
 
-import breakpoints from './helpers/breakpoints'
 import darkMode from './helpers/darkMode'
-import formatPhone from './helpers/formatPhone'
 import { initUser } from './helpers/user';
 
-app.provide('breakpoints', breakpoints().breakpoints)
 app.provide('darkMode', darkMode().darkMode)
 
 const user = initUser()
@@ -90,7 +86,6 @@ app.provide('store', store)
 app.provide('axios', axios)
 
 app.provide('mode', import.meta.env.MODE)
-app.provide('formatPhone', formatPhone)
 
 
 /*
@@ -102,12 +97,10 @@ Global Components
 import Mango from './helpers/Mango.vue'
 import Spinner from './components/layout/spinner.vue'
 import Modal from './components/layout/modal.vue'
-import Button from './components/partials/button.vue'
 
 app.component('Mango', Mango)
 app.component('Spinner', Spinner)
 app.component('Modal', Modal)
-app.component('btn', Button)
 // app.component('resource', defineAsyncComponent(Layouter.vue')))
 
 /*

package/default/vite.config.js

@@ -27,6 +27,8 @@ export default defineConfig({
     resolve: {
         alias: {
             '@config': configPath,
+            '@settings': path.resolve(configPath, 'config/settings.json'),
+            '@collections': path.resolve(configPath, 'config/.collections.json'),
             '@plugins': path.resolve(configPath, 'plugins'),
             'vue': path.resolve(__dirname, 'node_modules/vue'),
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mango-cms",
-    "version": "0.1.22",
+    "version": "0.1.24",
     "main": "./index.js",
     "exports": {
         ".": "./index.js"