Update Preview (#45)

* Preview Button

* Add preview Icon
* Add preview button and block
* Add js script for controling preview

* Update preview.js

* Add base data to preview

* Add preview
- name
- url
- photo
- description
- email

* Update preview.png

* Add Links to preview

* Add links to preview

* Add default preview

* Add animation

* Move preview.js to index.js

* Update Icon

* Add Preview for theme

* Themes Load images

* js preview in new html window independent

* default theme

* Rename css

* Final preview Feature

* Add meta data

* Make preview only for devices min-width: 1000px

* Update index.php

* Update .gitignore

* Previeew Update Bugs

Change meta og:url
repair bug in preview list all links

* User url open in new tab

* Support for mobile

Support for mobile devices
Button animation

* Update index.php

src/index.css

@@ -23,6 +23,12 @@
     height: 100%;
 }
 
+#previewButton:hover{
+    cursor: pointer;
+    background-color: gray;
+    transition: var(--animationDuration);
+}
+
 #previewBlock{
     position: fixed;
     top: var(--previewYOffset);
@@ -34,11 +40,14 @@
     right: -100%;
 }
 
-@media screen and (max-width: 1000px){
-    #previewButton{
-        display: none;
+@media screen and (max-width: 1200px){
+    #previewBlock{
+        width: 50vw;
     }
+}
+
+@media screen and (max-width: 700px){
     #previewBlock{
-        display: none;
+        width: 100vw;
     }
 }

src/index.js

@@ -234,7 +234,7 @@ var theme = document.getElementById('theme');
 // Real time variables
 var preview = false;
 var photo = "";
-var linkCount = Number(additionalLinkButton.getAttribute("data-index"));
+var linkCount = Number(additionalLinkButton.getAttribute("data-index")) + 1;
 const styleElement = document.createElement('style');
 
 // Preview Button functionality
@@ -308,7 +308,7 @@ function UpdatePreview() {
 
     // Check if data is added
     if(photo !== '') photoCode = `<img id="userPhoto" src="${photo}" alt="User Photo"></img>`;
-    if(name !== '') name = `<a href="${mainUrl}"><h1 id="userName">${name}</h1></a>`;
+    if(name !== '') name = `<a href="${mainUrl}" target="_blank"><h1 id="userName">${name}</h1></a>`;
     if(description !== '') description =`<p id="description">${description}</p>`;
     if(email !== '') email = `<a class="link" href="mailto:${email}" target="_blank"><ion-icon name="mail"></ion-icon> Email</a>`;
 

src/index.php

@@ -49,15 +49,15 @@
   <meta name="keywords" content="linkfree, linktree, link in bio, link in bio alternative, linkfree generator, linktree generator, link in bio generator">
   <meta property="og:title" content="LinkFree Generator">
   <meta property="og:description" content="Create your own LinkFree and have all your links in one place">
-  <meta property="og:url" content="https://chriskthomas.github.io/linkfree-generator/">
-  <meta property="og:image" content="https://lh3.googleusercontent.com/p/AF1QipMjTWdGPL1Ch8Q0poYcH5vhl_tvqF-1o1_4slJD=s680-w680-h510">
+  <meta property="og:url" content="https://linkfree.ckt.im/">
+  <meta property="og:image" content='https://opengraph.githubassets.com/<?=hash("sha256", date("Y-m-d H:i:s T"))?>/chriskthomas/linkfree-generator'>
   <meta property="og:type" content="website">
   <meta property="og:site_name" content="LinkFree Generator">
   <meta property="og:locale" content="en_US">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="LinkFree Generator">
   <meta name="twitter:description" content="Create your own LinkFree and have all your links in one place">
-  <meta name="twitter:image" content="https://lh3.googleusercontent.com/p/AF1QipMjTWdGPL1Ch8Q0poYcH5vhl_tvqF-1o1_4slJD=s680-w680-h510">
+  <meta name="twitter:image" content='https://opengraph.githubassets.com/<?=hash("sha256", date("Y-m-d H:i:s T"))?>/chriskthomas/linkfree-generator'>
 
   <title>LinkFree Generator</title>
   <link rel="stylesheet" href="index.css">