mango-cms 0.1.18 → 0.1.20

package/default/src/index.css

@@ -0,0 +1,281 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.article a {
+	@apply font-semibold cursor-pointer
+}
+
+.article a:hover {
+	@apply underline
+}
+
+.article p,
+.article div,
+.article ul,
+.article ol,
+.article h2,
+.article h3,
+.article h4,
+.article blockquote {
+	@apply mt-4 text-sm leading-relaxed break-words
+}
+
+.article li {
+	@apply mt-2
+}
+
+.article h2 {
+	@apply text-base font-semibold
+}
+
+.article > :first-child,
+.article > :first-child > :first-child,
+.article > :first-child > :first-child > :first-child {
+	margin-top: 0px!important;
+}
+
+.article > .ql-container > .ql-editor > :first-child,
+.article > .ql-container > .ql-editor > :first-child > :first-child,
+.article > .ql-container > .ql-editor > :first-child > :first-child > :first-child {
+	margin-top: 0px!important;
+}
+/*.article > :first-child > :first-of-type {
+	margin-top: 0px
+}*/
+
+/*.ql-editor > :first-child {
+	margin-top: 0px
+}*/
+
+.article blockquote {
+	@apply
+		px-8
+		italic
+		text-gray-600
+}
+
+@screen md {
+    .article p,
+    .article div,
+    .article ul,
+    .article ol,
+    .article h2,
+    .article h3,
+    .article h4,
+    .article blockquote {
+        @apply mt-8 text-base leading-relaxed
+    }
+
+    .article li {
+        @apply mt-4
+    }
+
+    .article h2 {
+        @apply text-2xl font-semibold
+    }
+}
+
+
+.space-1 {
+    @apply p-4
+}
+
+@screen md {
+    .space-1 {
+        @apply p-6
+    }
+}
+
+@screen xl {
+    .space-1 {
+        @apply p-8
+    }
+}
+
+
+
+.book-article a {
+	@apply font-semibold cursor-pointer
+}
+
+.book-article a:hover {
+	@apply underline
+}
+
+@screen md {
+
+    .book-article p,
+    .book-article div,
+    .book-article ul,
+    .book-article ol,
+    .book-article h2,
+    .book-article h3,
+    .book-article h4,
+    .book-article blockquote {
+        @apply mt-16
+    }
+
+    .book-article li {
+        @apply mt-8
+    }
+
+    .book-article h2 {
+        @apply text-5xl font-semibold
+    }
+}
+
+.book-article p,
+.book-article div,
+.book-article ul,
+.book-article ol,
+.book-article h2,
+.book-article h3,
+.book-article h4,
+.book-article blockquote {
+	@apply mt-8
+}
+
+.book-article ul {
+	@apply list-disc
+}
+
+.book-article li {
+	@apply mt-4
+}
+
+.book-article h2 {
+	@apply text-2xl font-bold
+}
+
+.book-article > :first-child,
+.book-article > :first-child > :first-child,
+.book-article > :first-child > :first-child > :first-child {
+	margin-top: 0px!important;
+}
+
+.book-article > .ql-container > .ql-editor > :first-child,
+.book-article > .ql-container > .ql-editor > :first-child > :first-child,
+.book-article > .ql-container > .ql-editor > :first-child > :first-child > :first-child {
+	margin-top: 0px!important;
+}
+/*.book-article > :first-child > :first-of-type {
+	margin-top: 0px
+}*/
+
+/*.ql-editor > :first-child {
+	margin-top: 0px
+}*/
+
+.book-article blockquote {
+	@apply
+		px-8
+		italic
+		text-gray-500
+}
+
+
+.ql-clipboard,
+.ql-tooltip {
+    display: none!important;
+}
+
+.ql-editor {
+    outline: none!important;
+}
+
+table.schedule {
+    @apply
+        my-4
+        w-full
+        text-xs
+        border-y
+        table-auto
+        border-collapse
+        dark:text-gray-500
+        dark:border-gray-800
+}
+
+table.schedule tr:nth-child(odd) {
+	@apply bg-gray-100 dark:bg-gray-800
+}
+
+table.schedule td {
+	@apply m-0 p-2
+}
+
+
+@screen md {
+    table.schedule {
+        @apply
+            my-8
+            text-sm
+    }
+
+    table.schedule td {
+        @apply m-0 p-4
+    }
+}
+
+
+.article-xs p,
+.article-xs div,
+.article-xs ul,
+.article-xs ol,
+.article-xs h2,
+.article-xs h3,
+.article-xs h4,
+.article-xs blockquote {
+    @apply mt-2 text-xs leading-relaxed
+}
+
+.article-xs li {
+    @apply mt-1
+}
+
+.article-xs h2 {
+    @apply text-sm
+}
+
+.article-sm p,
+.article-sm div,
+.article-sm ul,
+.article-sm ol,
+.article-sm h2,
+.article-sm h3,
+.article-sm h4,
+.article-sm blockquote {
+    @apply mt-4 text-sm leading-relaxed
+}
+
+.article-sm li {
+    @apply mt-2
+}
+
+.article-sm h2 {
+    @apply text-base
+}
+
+.article-md p,
+.article-md div,
+.article-md ul,
+.article-md ol,
+.article-md h2,
+.article-md h3,
+.article-md h4,
+.article-md blockquote {
+    @apply mt-4 text-base leading-relaxed
+}
+
+.article-md li {
+    @apply mt-2
+}
+
+.article-md h2 {
+    @apply text-2xl
+}
+
+.video-container,
+.video-container iframe {
+    @apply aspect-video w-full !h-auto
+}

package/default/src/main.js

@@ -0,0 +1,145 @@
+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 VueClipboard from 'vue3-clipboard'
+import Vue3TouchEvents from "vue3-touch-events";
+import App from './App.vue'
+import './index.css'
+
+/*
+    If these are dynamicly imported I end up with a blank
+    screen while the route is waiting for the component
+    to download... not sure how to fix.
+*/
+
+import Home from './components/pages/home.vue'
+const isDev = ['true', '1'].includes(import.meta.env.VITE_DEVMODE)
+
+const routes = [
+
+    { path: '/', component: Home },
+    { path: '/protectedRoute', component: Home, meta: { protected: true, fallback: '/' } },
+
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    scrollBehavior(to, from, savedPosition) {
+
+        let toPath = to.matched?.[0]?.path
+
+        let sameComponent = to.matched?.[0]?.components?.default == from.matched?.[0]?.components?.default
+        let sameComponentExceptions = ['/inventory/:id', /account\/*/g]
+        let exceptionExists = sameComponentExceptions.some(e => !!toPath?.match(e)?.length)
+
+        if (to.hash) { return { el: to.hash, behavior: 'smooth' } }
+        if (savedPosition) return savedPosition
+        if (sameComponent && !exceptionExists) return null
+
+        return { top: 0 }
+
+    },
+    routes,
+})
+
+
+const app = createApp(App)
+
+app.use(router)
+app.use(Vue3TouchEvents)
+app.use(MotionPlugin)
+app.use(VueClipboard, {
+    autoSetContainer: true,
+    appendToBody: true,
+})
+
+/*
+
+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()
+
+let api = `http://localhost:${port}`
+// let api = `https://${domain}`
+if (!isDev) api = `https://${domain}`
+
+const store = reactive({
+
+    user,
+    api,
+
+})
+
+let Authorization = window.localStorage.getItem('email') + ';' + window.localStorage.getItem('user')
+axios.defaults.headers.common['Authorization'] = Authorization
+
+app.provide('store', store)
+app.provide('axios', axios)
+
+app.provide('mode', import.meta.env.MODE)
+app.provide('formatPhone', formatPhone)
+
+
+/*
+
+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')))
+
+/*
+
+Route Guard
+
+*/
+
+router.beforeEach((to, from, next) => {
+
+    // Log in google analytics...
+    if (window.ga) window.ga('send', 'pageview', to.fullPath);
+
+    if (to.meta?.protected && !store.user?.id) {
+        console.log('protected', store.user?.id)
+        store.login = { next: to.path }
+        if (to.meta?.fallback) {
+            console.log('to', to)
+            // Get params from path and add them to the fallback path (/event/:id)
+            let fallback = to.meta.fallback?.split('/')?.map(p => {
+                if (p.includes(':')) {
+                    let param = p.replaceAll(':', '')
+                    return to.params[param] || ''
+                } else {
+                    return p
+                }
+            })?.join('/')
+            return next(fallback || to.meta.fallback)
+        }
+        return next('')
+    }
+    next()
+})
+
+app.mount('#app')

package/default/tailwind.config.js

@@ -0,0 +1,46 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+    darkMode: 'class',
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+    ],
+    theme: {
+        screens: {
+            '3xs': '390px',
+            '2xs': '425px',
+            xs: '475px',
+            ...defaultTheme.screens,
+            '3xl': '1750px',
+        },
+        extend: {
+            fontSize: {
+                '3xs': '.45rem',
+                '2xs': '.6rem',
+                '10xl': '10rem'
+            },
+            lineClamp: {
+                7: '7',
+                8: '8',
+                9: '9',
+                10: '10',
+            },
+            boxShadow: {
+                card: '0 8px 40px 0 rgba(0, 0, 0, 0.1)',
+                'card-focus': '0 8px 40px 6px rgba(0, 0, 0, 0.1)'
+            },
+            maxWidth: {
+                '32': '8rem',
+                '40': '10rem',
+                '48': '12rem',
+                '56': '14rem',
+                '64': '16rem',
+                '8xl': '88rem',
+                '9xl': '96rem',
+                '10xl': '104rem',
+                '11xl': '112rem',
+            }
+        },
+    }
+}

package/default/vite.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import fs from 'fs'
+
+// Determine project root based on config directory location
+let projectRoot = process.cwd()
+let configPath = path.resolve(projectRoot, 'config')
+
+// If config doesn't exist in current directory, check parent
+if (!fs.existsSync(configPath)) {
+    projectRoot = path.resolve(projectRoot, '..')
+    configPath = path.resolve(projectRoot, 'config')
+
+    // If config still doesn't exist, throw error
+    if (!fs.existsSync(configPath)) {
+        throw new Error('Config folder not found. Please ensure your config folder exists either in the current directory or parent directory.')
+    }
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue()],
+    server: {
+        host: '0.0.0.0',
+    },
+    resolve: {
+        alias: {
+            '@config': configPath,
+            '@plugins': path.resolve(configPath, 'plugins'),
+            'vue': path.resolve(__dirname, 'node_modules/vue'),
+        }
+    },
+    optimizeDeps: {
+        exclude: ['vue'], // Prevent Vite from optimizing Vue separately
+    },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mango-cms",
-    "version": "0.1.18",
+    "version": "0.1.20",
     "type": "module",
     "main": "./index.js",
     "exports": {
@@ -8,8 +8,10 @@
     },
     "files": [
         "index.js",
-        "default/front/src/helpers/mango.js",
-        "default/front/src/helpers/Mango.vue"
+        "cli.js",
+        "webpack.config.js",
+        "default/**/*",
+        "!default/node_modules/**"
     ],
     "author": "Colton Neifert",
     "license": "ISC",

package/webpack.config.js

@@ -0,0 +1,58 @@
+const path = require('path');
+const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
+const NodemonPlugin = require('nodemon-webpack-plugin');
+
+
+// Get the user's project root from the execution context (passed via CLI or fallback to cwd)
+process.env.PROJECT_ROOT = process.env.PROJECT_ROOT || process.cwd();
+process.env.MANGO_ROOT = process.env.MANGO_ROOT || __dirname;
+let moduleLocation = process.env.PROJECT_ROOT
+
+let legacyMode = process.env.PROJECT_ROOT == process.env.MANGO_ROOT
+if (legacyMode) {
+    moduleLocation = __dirname
+    process.env.PROJECT_ROOT = path.join(__dirname, '..')
+}
+console.log('env', process.env.PROJECT_ROOT, process.env.MANGO_ROOT, legacyMode, path.resolve(moduleLocation, 'node_modules'))
+
+const userProjectRoot = process.env.PROJECT_ROOT
+const mangoRoot = process.env.MANGO_ROOT
+const buildPath = legacyMode ? mangoRoot : userProjectRoot
+
+console.log('moduleLocation', moduleLocation)
+
+module.exports = {
+    mode: 'production',
+    resolve: {
+        alias: {
+            '@mango': path.resolve(mangoRoot),
+            '@cms': path.resolve(mangoRoot, 'src/cms'),
+            '@config': path.resolve(userProjectRoot, 'config'),
+            '@fields': path.resolve(mangoRoot, 'src/cms/1. build/fields'),
+            '@mongo': path.resolve(mangoRoot, 'src/cms/1. build/libraries/mongo'),
+            '@helpers': path.resolve(mangoRoot, 'src/cms/1. build/helpers'),
+        },
+    },
+    devtool: 'inline-source-map',
+    entry: {
+        server: path.resolve(mangoRoot, 'src/main.js'), // Entry point in @mango-cms/core
+    },
+    output: {
+        path: path.resolve(buildPath, 'build'), // Change to build in mango directory
+        filename: 'index.js',
+    },
+    target: 'node',
+    plugins: [new NodemonPlugin()],
+    node: {
+        __dirname: false,
+        __filename: false,
+    },
+    externals: [
+        nodeExternals(),
+        // Also check for externals in the mango package
+        nodeExternals({
+            modulesDir: path.resolve(moduleLocation, 'node_modules')
+        })
+    ],
+};