Twitter Embeds

Twitter Embeds

Author: benhatsor

api/link.js

@@ -55,33 +55,37 @@ const html = `
   <meta name="apple-mobile-web-app-status-bar-style" content="#313744">
   <meta name="apple-mobile-web-app-title" content="Codeit">
 
-  <meta http-equiv="origin-trial" content="At6bIDqQqUBcNVY46zIFOhsfQekTjYXogHK35lCdfrpna6/wqhxQsIh+kfTDRcLVPP0jyfFX5gTbBM4trLnn4g0AAABqeyJvcmlnaW4iOiJodHRwczovL2NvZGVpdC5jb2Rlczo0NDMiLCJmZWF0dXJlIjoiV2ViQXBwVXJsSGFuZGxpbmciLCJleHBpcnkiOjE2NDMxNTUxOTksImlzU3ViZG9tYWluIjp0cnVlfQ==">
-
   <meta charset="utf-8">
-  <meta name="description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
+  <!-- <meta name="description" content="Run JavaScript projects, code your ideas, and share it all on Codeit."> -->
   
   <meta property="og:title" content="`+ title +`">
-  <meta property="og:description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
+  <!-- <meta property="og:description" content="Run JavaScript projects, code your ideas, and share it all on Codeit."> -->
   <meta property="og:url" content="https://codeit.codes">
   <meta property="og:image" content="https://codeit.codes/images/banner-og.png">
-  <meta property="og:type" content="application">
-  <meta property="og:site_name" content="Codeit Code Editor">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Codeit">
   
   <meta property="twitter:title" content="`+ title +`">
-  <meta property="twitter:account_id" content="1484271514543345665">
-  <meta name="twitter:card" content="summary">
-  <meta property="twitter:domain" content="codeit.codes">
-  <meta property="twitter:url" content="https://codeit.codes">
-  <meta name="twitter:description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
+  <meta property="twitter:site" content="@codeitcodes">
+  <meta name="twitter:card" content="player">
+  <meta property="twitter:domain" content="https://codeit.codes/">
+  <!-- <meta name="twitter:description" content="Run JavaScript projects, code your ideas, and share it all on Codeit."> -->
   <meta name="twitter:image" content="https://codeit.codes/images/banner-og.png">
+  <meta name="twitter:player" content="https://codeit.codes/api/link?url=`+ query.url +`">
+  <meta name="twitter:player:stream:content_type" content="text/html">
+  <meta name="twitter:player:width" content="800">
+  <meta name="twitter:player:height" content="600">
   
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="referrer" content="origin-when-cross-origin">
+  <meta name="referrer" content="default">
   <meta name="keywords" content="code editor, version control tools, source code versioning, source code management tools, python, jquery demo, html, git, how to, bootstrap, jquery, javascript, javascript tutorial, javascript tutorial for beginners, javascript programming, html web form, create form in html, responsive web design, html web design, html design, responsive website development, html5 tutorial, html5 css3, html5 development, web design software, web development software, git tutorial, git howto, git repository, git command, git source code, top programming languages to learn, best programming language, best computer language, open source, open source code, open source applications, source code editor, software development tools, development tool, software developer tools list, programmer tool, web application development software">
   <link rel="canonical" href="https://codeit.codes/">
   <meta name="next-head-count" content="24">
   <meta name="robots" content="all">
   
+  <link rel="iframely player" type="text/html"
+        href="https://codeit.codes/api/link?url=`+ query.url +`"
+        media="(aspect-ratio: 1280/720)"/>
+  
   <link rel="shortcut icon" href="https://codeit.codes/icons/android-app-512.png">
   <link rel="apple-touch-icon" href="https://codeit.codes/icons/iphone-app-180.png">
   
@@ -94,7 +98,7 @@ const html = `
   const url = new URL(window.location.href).searchParams;
   
   let link = url.get('url');
-  let embed = url.get('embed');
+  let oembed = url.get('oembed');
   
   const isDev = (window.location.hostname === 'dev.codeit.codes');
   
@@ -114,7 +118,7 @@ const html = `
   
   if (link) {
     
-    if (embed) link += '?embed=true';
+    if (oembed) link += '?oembed=true';
     
     const resp = decodeLink(link);
 

api/oembed.js

@@ -3,7 +3,14 @@ export default function handler(request, response) {
 
   const query = request.query;
 
-  let json = { "error": "Try adding a URL" };
+  const isJSON = query.format ? query.format.toLowerCase() === 'json' : false;
+  
+  
+  let resp;
+  
+  if (isJSON) resp = { "error": "Try adding a URL" };
+  else resp = 'Try adding a <code>?url=</code>.';
+  
 
   if (query.url) {
 
@@ -13,23 +20,42 @@ export default function handler(request, response) {
       url = 'https://dev.codeit.codes';
     }
 
-    const embedHTML = `<iframe src="`+ url +`/api/link?url=`+ query.url +`&embed=true" width="700" height="480" style="border-radius: 10px;" allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write" allowfullscreen="true" allowpaymentrequest="true" loading="lazy" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation" scrolling="yes" frameborder="0"></iframe></html>`;
+    url += '/api/link?url=' + query.url + '&oembed=true';
 
-    json = {
-      "type": "rich",
-      "title": "Codeit",
-      "width": 700,
-      "height": 480,
-      "html": embedHTML,
-      "version": "1.0",
-      "cache_age": 3600,
-      "provider_name": "Codeit",
-      "provider_url": "https://codeit.codes/"
-    };
+    const embedHTML = `<iframe src="`+ url +`" width="700" height="480" style="border-radius: 10px;" allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write" allowfullscreen="true" allowpaymentrequest="true" loading="lazy" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation" scrolling="yes" frameborder="0"></iframe></html>`;
 
-  }
 
-  response.status(200).json(json);
+    if (isJSON) {
+    
+      resp = {
+        "type": "rich",
+        "title": "Codeit",
+        "width": 700,
+        "height": 480,
+        "html": embedHTML,
+        "version": "1.0",
+        "cache_age": 3600,
+        "provider_name": "Codeit",
+        "provider_url": "https://codeit.codes/"
+      };
+      
+    } else {
+      
+      resp = `
+      <oembed>
+        <html>`+ embedHTML +`</html>
+        <width>700</width>
+        <height>480</height>
+      </oembed>
+      `;
+      
+    }
+    
+  }
+  
+  
+  if (isJSON) response.status(200).json(resp);
+  else response.status(200).send(resp);
 
 }
 

filebrowser.js

@@ -859,44 +859,6 @@ function addHTMLItemListeners() {
       }
 
     })
-    
-    // if item is a file
-    if (item.classList.contains('file')
-        && item.querySelector('.push-wrapper')) {
-
-      item.querySelector('.push-wrapper')
-        .addEventListener('contextmenu', () => {
-
-        let commitMessage;
-
-        // get selected branch
-        let selBranch = treeLoc[1].split(':')[1];
-
-        // open push screen
-        commitMessage = prompt('Push \''+ item.innerText + (selBranch ? '\' to branch \'' + selBranch + '\'?' : '\'?'),
-                               'Type push description...');
-
-        // if canceled push, return
-        if (!commitMessage) return;
-
-        // if not specified message
-        if (commitMessage === 'Type push description...') {
-
-          // show default message
-          commitMessage = 'Update ' + item.innerText;
-
-        }
-
-
-        // play push animation
-        playPushAnimation(item.querySelector('.push-wrapper'));
-
-        // push file
-        pushFileFromHTML(item, commitMessage);
-
-      })
-      
-    }
 
   })
 
@@ -927,6 +889,34 @@ function clickedOnFileHTML(fileEl, event) {
 
   } else {
 
+    /*
+    // if not logged in to git
+    if (gitToken == '') {
+      
+      function openLogin() {
+        
+        const authURL = 'https://github.com/login/oauth/authorize?client_id=7ede3eed3185e59c042d&scope=repo,user,write:org';
+
+        if (isMobile) {
+          
+          window.location.href = authURL;
+          
+        } else {
+          
+          window.open(authURL, 'Login with Github', 'height=575,width=575');
+          
+        }
+        
+      }
+      
+      showDialog(openLogin, 'Login to save this file.', 'Login');
+      
+      return;
+      
+    }
+    */
+    
+    
     let commitMessage;
 
     // if ctrl/meta/shift-clicked on push button

full.css

@@ -1680,6 +1680,69 @@ body.mobile .menu .icon a {
 }
 
 
+.dialog {
+  position: fixed;
+  background: var(--deep-midnight-blue);
+  color: #dcddde;
+  box-shadow: 0 8px 16px rgb(0 0 0 / 24%);
+  border-radius: 11.5px;
+  line-height: 1.5;
+  max-width: 200px;
+  width: 194px;
+  top: 50%;
+  left: calc((var(--sidebar-width) - 1px) / 2);
+  opacity: 0;
+  padding: 2px;
+  transform: translate(-50%, -50%) scale(0.94);
+  will-change: transform;
+  transition: 0s .18s, .18s var(--bounce-function) opacity;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.dialog.visible {
+  opacity: 1;
+  padding: 7px;
+  transform: translate(-50%, -50%) scale(1);
+  transition: .18s var(--bounce-function);
+  pointer-events: auto;
+}
+
+.dialog .title {
+  padding: 8px 14px;
+}
+
+.dialog .button-wrapper {
+  display: flex;
+  margin-top: 7px;
+}
+
+.dialog .button {
+  padding: 8px 14px;
+  border-radius: 5.75px;
+  display: flex;
+  justify-content: center;
+  width: 50%;
+}
+
+.dialog .cancel {
+  color: hsl(228deg 16% 37%);
+}
+
+.dialog .confirm {
+  color: var(--rosemary-lighter);
+  font-weight: 500;
+}
+
+.dialog .button:active {
+  background: rgba(255,255,255,0.1);
+}
+
+body:not(.mobile) .dialog .button:not(:active):hover {
+  background: rgba(255,255,255,0.05);
+}
+
+
 .message-wrapper {
   position: fixed;
   left: 0;

full.html

@@ -13,7 +13,7 @@
   <meta name="apple-mobile-web-app-title" content="Codeit">
 
   <meta charset="utf-8">
-  <meta name="description" content="Run JavaScript projects, code your ideas, and share it all with friends, family, and the world on Codeit.">
+  <meta name="description" content="Run JavaScript projects, code your ideas, and share it all on Codeit.">
 
   <meta property="og:title" content="Codeit | Mobile code editor connected to Git">
   <meta property="og:description" content="Run JavaScript projects, code your ideas, and share it all on Codeit.">
@@ -27,7 +27,7 @@
   <meta property="twitter:site:id" content="@codeitcodes">
   <meta property="twitter:creator" content="@codeitcodes">
   <meta property="twitter:creator:id" content="@codeitcodes">
-  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:card" content="summary">
   <meta property="twitter:domain" content="codeit.codes">
   <meta property="twitter:url" content="https://codeit.codes/">
   <meta name="twitter:description" content="Run JavaScript projects, code your ideas, and share it all on Codeit.">
@@ -224,6 +224,14 @@
 
   <div class="menu branch-menu"></div>
 
+  <div class="dialog">
+    <div class="title"></div>
+    <div class="button-wrapper">
+      <div class="cancel button">Cancel</div>
+      <div class="confirm button">Confirm</div>
+    </div>
+  </div>
+
   <div class="message-wrapper">
     <div class="message"></div>
   </div>

index.html

@@ -14,7 +14,7 @@
   <meta name="apple-mobile-web-app-title" content="Codeit">
 
   <meta charset="utf-8">
-  <meta name="description" content="Run JavaScript projects, code your ideas, and share it all with friends, family, and the world on Codeit.">
+  <meta name="description" content="Run JavaScript projects, code your ideas, and share it all on Codeit.">
 
   <meta property="og:title" content="Codeit | Mobile code editor connected to Git">
   <meta property="og:description" content="Run JavaScript projects, code your ideas, and share it all on Codeit.">
@@ -28,7 +28,7 @@
   <meta property="twitter:site:id" content="@codeitcodes">
   <meta property="twitter:creator" content="@codeitcodes">
   <meta property="twitter:creator:id" content="@codeitcodes">
-  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:card" content="summary">
   <meta property="twitter:domain" content="codeit.codes">
   <meta property="twitter:url" content="https://codeit.codes/">
   <meta name="twitter:description" content="Run JavaScript projects, code your ideas, and share it all on Codeit.">

utils.js

@@ -60,6 +60,11 @@ const body = document.body,
       learnClose = learnWrapper.querySelector('.close'),
 
       branchMenu = document.querySelector('.branch-menu'),
+      
+      dialog = document.querySelector('.dialog'),
+      dialogTitle = dialog.querySelector('.title'),
+      dialogCancel = dialog.querySelector('.cancel'),
+      dialogConfirm = dialog.querySelector('.confirm'),
 
       messageEl = document.querySelector('.message'),
 
@@ -68,7 +73,7 @@ const body = document.body,
 
 
 // version
-const version = '3.2.0';
+const version = '3.2.5';
 versionEl.innerText = version;
 
 let logVersion = () => {
@@ -143,6 +148,32 @@ function showMessage(message, duration) {
 
 
 
+// show dialog
+
+function showDialog(confirmHandler, titleText, confirmText) {
+  
+  // add dialog text to HTML
+  dialogTitle.textContent = titleText;
+  dialogConfirm.textContent = confirmText;
+  
+  // show dialog
+  dialog.classList.add('visible');
+  
+  // add confirm button listener
+  dialogConfirm.onclick = confirmHandler;
+  
+}
+
+// add cancel button listener
+dialogCancel.addEventListener('click', () => {
+  
+  // hide dialog
+  dialog.classList.remove('visible');
+  
+});
+
+
+
 // device and platform queries
 
 let isMobile = false;