Update logo.

firebase.json

@@ -18,6 +18,12 @@
         "function": {
           "functionId": "authenticate"
         }
+      },
+      {
+        "source": "/track",
+        "function": {
+          "functionId": "track"
+        }
       }
     ]
   },

functions/index.js

@@ -1,9 +1,13 @@
 const functions = require('firebase-functions');
 const admin = require('firebase-admin');
+const Mixpanel = require('mixpanel');
 
 admin.initializeApp(functions.config().firebase);
 const db = admin.firestore();
 
+//Mixpanel project: Confluence Analytics(new)
+const mixpanel = Mixpanel.init('0c62cea9ed2247f4824bf196f6817941');
+
 const webhook = require('./webhook');
 const alertParser = require('./alert_parser');
 const pubKey = functions.config().paddle.pub_key;
@@ -75,6 +79,17 @@ exports.sync_diagram = functions.https.onRequest(async (req, res) => {
     request.end();
 });
 
+exports.track = functions.https.onRequest(async (req, res) => {
+    console.log('request:', req.body)
+    mixpanel.track(req.body.event, {
+        distinct_id: req.body.userId,
+        category: req.body.category,
+        label: req.body.label,
+        displayProductName: 'FireWeb'
+    });
+    res.send('ok');
+});
+
 exports.webhook = functions.https.onRequest(async (req, res) => {
     if (req.body && req.body.p_signature) {
         const valid = webhook.validate(req.body, pubKey);

functions/package.json

@@ -18,6 +18,7 @@
     "crypto": "^1.0.1",
     "firebase-admin": "~11.11.0",
     "firebase-functions": "^4.5.0",
+    "mixpanel": "^0.18.0",
     "php-serialize": "^2.1.0"
   },
   "devDependencies": {

gulpfile.js

@@ -61,6 +61,7 @@ gulp.task('copyFiles', function() {
 			'src/icon-16.png',
 			'src/icon-48.png',
 			'src/icon-128.png',
+			'src/logo-400x400.png',
 			'manifest.json'
 		]).pipe(gulp.dest('app')),
 		gulp.src('build/*.js')
@@ -154,6 +155,7 @@ gulp.task('packageExtension', function() {
 	childProcess.execSync('cp src/icon-16.png extension');
 	childProcess.execSync('cp src/icon-48.png extension');
 	childProcess.execSync('cp src/icon-128.png extension');
+	childProcess.execSync('cp src/logo-400x400.png extension');
 
 	childProcess.execSync(
 		'rm -rf extension/partials'

src/components/EmbedHeader.jsx

@@ -3,7 +3,7 @@ export default function EmbedHeader(props) {
 		<div className="embed-header">
 			<div className="embed-header__left">
 				<div className="header-logo">
-					<img src="assets/zenuml-icon.png" alt="zenuml logo" />
+					<img src="assets/logo-400x400.png" alt="zenuml logo" />
 				</div>
 				<div className="tit">{this.props.title || 'Untitled'}</div>
 			</div>

src/components/Footer.jsx

@@ -79,7 +79,6 @@ export default class Footer extends Component {
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<div class="logo" />
 						</a>
 						&copy;
 						<span class="web-maker-with-tag">ZenUML</span> &nbsp;&nbsp;

src/components/MainHeader.jsx

@@ -26,7 +26,7 @@ export function MainHeader(props) {
 	return (
 		<div className="main-header">
 			<div className="header-logo">
-				<img src="assets/zenuml-icon.png" alt="zenuml logo" />
+				<img src="assets/logo-400x400.png" alt="zenuml logo" />
 			</div>
 			{
 				isEditing ? (<input
@@ -96,7 +96,7 @@ export function MainHeader(props) {
 					aria-label="Open a saved creation (Ctrl/⌘ + O)"
 					onClick={props.openBtnHandler}
 				>
-					<span class="material-symbols-outlined">open_in_new</span>					
+					<span class="material-symbols-outlined">open_in_new</span>
 					<span>Open</span>
 				</button>
 				<Button

src/components/app.jsx

@@ -50,6 +50,7 @@ import { syncDiagram, getShareLink } from '../services/syncService';
 import clsx from 'clsx';
 import EmbedHeader from './EmbedHeader.jsx';
 import userService from '../services/user_service';
+import mixpanel from '../services/mixpanel.js';
 
 if (module.hot) {
 	require('preact/debug');
@@ -453,7 +454,7 @@ BookLibService.Borrow(id) {
 	}
 
 	checkItemsLimit() {
-		if(!this.state.user || Object.keys(this.state.user.items).length <= 3 || userService.isPro()) {
+		if(!this.state.user || this.state.user.items && Object.keys(this.state.user.items).length <= 3 || userService.isPro()) {
 			return true;
 		}
 
@@ -473,6 +474,7 @@ BookLibService.Borrow(id) {
 		);
 
 		if(!this.checkItemsLimit()) {
+			mixpanel.track({ event: 'Free Limit', category: '3 diagrams limit', label: 'Save' })
 			return;
 		}
 
@@ -1024,6 +1026,7 @@ BookLibService.Borrow(id) {
 	}
 	async itemForkBtnClickHandler(item) {
 		if(!this.checkItemsLimit()) {
+			mixpanel.track({ event: 'Free Limit', category: '3 diagrams limit', label: 'Fork' })
 			return;
 		}
 
@@ -1036,6 +1039,7 @@ BookLibService.Borrow(id) {
 		trackEvent('ui', 'newBtnClick');
 
 		if(!this.checkItemsLimit()) {
+			mixpanel.track({ event: 'Free Limit', category: '3 diagrams limit', label: 'New' })
 			return;
 		}
 
@@ -1147,6 +1151,7 @@ BookLibService.Borrow(id) {
 	}
 	exportBtnClickHandler(e) {
 		if(!this.checkItemsLimit()) {
+			mixpanel.track({ event: 'Free Limit', category: '3 diagrams limit', label: 'Fork' })
 			return;
 		}
 

src/index.html

@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<title>ZenUML - Workspace</title>
-		<link rel="shortcut icon" href="icon-48.png" />
+		<link rel="shortcut icon" href="logo-400x400.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta
 			name="description"

src/services/mixpanel.js

@@ -0,0 +1,10 @@
+
+async function track(event) {
+	return await fetch('/track', {
+		method: 'POST',
+		body: JSON.stringify(Object.assign({}, event, {userId: window.user && window.user.uid})),
+		headers: { 'Content-Type': 'application/json' }
+	});
+}
+
+export default { track };

src/style.css

@@ -758,41 +758,6 @@ body > #demo-frame {
 	font-weight: normal;
 }
 
-.logo {
-	display: inline-block;
-	height: 18px;
-	width: 18px;
-	margin-right: 5px;
-	background: url(icon-16.png) no-repeat;
-	vertical-align: middle;
-	-webkit-filter: grayscale(0.9);
-	filter: grayscale(0.9);
-	transition: 0.4s ease;
-	opacity: 0.3;
-	will-change: opacity, filter;
-}
-
-.logo.small {
-	height: 20px;
-	width: 20px;
-	margin-right: 0px;
-	background: url(icon-16.png) 0px 0px no-repeat;
-	-webkit-filter: grayscale(0);
-	filter: grayscale(0);
-	opacity: 1;
-}
-
-.logo.small.gray {
-	-webkit-filter: grayscale(0.9);
-	filter: grayscale(0.9);
-}
-
-.footer:hover .logo {
-	-webkit-filter: grayscale(0);
-	filter: grayscale(0);
-	opacity: 1;
-}
-
 .footer__right {
 	font-size: 0;
 	line-height: 0;