From 6cffeada15b96d8408bb2fa12f1a2e93f972ef32 Mon Sep 17 00:00:00 2001
From: juliangojani <julian@gojani.xyz>
Date: Sat, 9 Sep 2023 15:36:16 +0200
Subject: [PATCH] Changed markdown page

---
 frontend/package-lock.json                  |   8 +-
 frontend/package.json                       |   2 +-
 frontend/public/index.html                  |   2 +-
 frontend/src/App.vue                        |   2 +-
 frontend/src/components/HomeHeader.vue      |   2 +-
 frontend/src/components/sidebar/Sidebar.vue |   2 +-
 frontend/src/main.js                        |   2 +-
 frontend/src/views/Homepage.vue             |  14 +--
 frontend/src/views/Paste.vue                | 105 +++++++++++++++-----
 frontend/src/views/PublicPastes.vue         |  26 +++--
 10 files changed, 112 insertions(+), 53 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b4d33a0..158db16 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.1.0",
+  "version": "6.6.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -11073,9 +11073,9 @@
       "dev": true
     },
     "v-animate-css": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/v-animate-css/-/v-animate-css-1.0.1.tgz",
-      "integrity": "sha512-XdD5nccjIcXpFr31dE9q7Nm/kK48f8Yjy1v1tShkpBAyR3i/s9efvy87gk/95fqhpbOKgKZHr+wn7hNPNP9POg==",
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/v-animate-css/-/v-animate-css-0.0.5.tgz",
+      "integrity": "sha512-FML26yVYX3hCTWTKioTNAIXjaWIFWa1mSczb92cLkMYI9QI6uRacKx7QnBNB17IOFLFEv8mc14aawe2In/ba1w==",
       "requires": {
         "scrollmonitor": "^1.2.4"
       }
diff --git a/frontend/package.json b/frontend/package.json
index 6e7e86f..b0cc861 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "petrel": "^1.0.7",
     "portal-vue": "^2.1.7",
     "sass": "^1.43.4",
-    "v-animate-css": "^1.0.1",
+    "v-animate-css": "0.0.5",
     "vue": "^2.6.11",
     "vue-router": "^3.5.1"
   },
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 6e95a88..19a98bd 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -9,7 +9,7 @@
 
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Mono:wght@300;400;500&family=DM+Sans&family=DM+Serif+Text&display=swap" rel="stylesheet">
 
     <meta id="metaThemeColor" name="theme-color" content="#212531">
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cbc0aca..e46be8b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div style="min-height: 100%;">
-        <side-bar/>
+        <side-bar />
         <router-view :class="{'mobile': $store.state.mobileVersion}" id="page" />
 
         <div v-if="$store.state.user.type == 'AWAITING_ACCESS'" id="fullscreen-alert">
diff --git a/frontend/src/components/HomeHeader.vue b/frontend/src/components/HomeHeader.vue
index 0ea3474..ca97df2 100644
--- a/frontend/src/components/HomeHeader.vue
+++ b/frontend/src/components/HomeHeader.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h1 v-if="$store.state.user.logged_in">Welcome, {{ $store.state.user.name }}</h1>
+        <h1 v-if="$store.state.user.logged_in">Welcome, <span v-animate-css="{classes: 'fadeIn', delay: 0}">{{ $store.state.user.name }}</span></h1>
         <h1 v-else>Welcome to {{ $store.state.appInfo.custom_name || 'Pastefy' }}!</h1><br>
 
         <div>
diff --git a/frontend/src/components/sidebar/Sidebar.vue b/frontend/src/components/sidebar/Sidebar.vue
index f9d5210..45926b1 100644
--- a/frontend/src/components/sidebar/Sidebar.vue
+++ b/frontend/src/components/sidebar/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <router-link to="/" id="logo" :class="{'mobile': $store.state.mobileVersion && this.$route.path !== '/'}">
+        <router-link to="/" id="logo" :class="{'mobile': $store.state.mobileVersion && this.$route.path !== '/'}" >
             <img :src="$store.state.appInfo.custom_logo ? $store.state.appInfo.custom_logo : require('../../assets/logo.png')">
         </router-link>
         <div id="sidebar"
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2d450f0..e9221ad 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -21,7 +21,7 @@ Vue.config.productionTip = false
 
 
 Vue.use(PortalVue)
-Vue.use(VAnimateCss)
+Vue.use(VAnimateCss);
 
 let worker = null
 
diff --git a/frontend/src/views/Homepage.vue b/frontend/src/views/Homepage.vue
index 2e00830..fc7a3d8 100644
--- a/frontend/src/views/Homepage.vue
+++ b/frontend/src/views/Homepage.vue
@@ -1,16 +1,16 @@
 <template>
     <div>
         <HomeHeader />
-        <WebsiteBanner paste="pb-homep" />
-        <div v-if="$store.state.user.logged_in">
+        <WebsiteBanner paste="pb-homep"  v-animate-css="{classes: 'fadeIn', delay: 50}" />
 
-            <div id="folders">
+        <div v-if="$store.state.user.logged_in">
+            <div id="folders"  v-animate-css="{classes: 'fadeIn', delay: 100}">
                 <h3 style="margin-top: 20px; margin-bottom: 20px; font-size: 24px">Folder</h3>
 
                 <FolderCard v-for="folder of folders" :key="`folder-${folder.id}`" :folder="folder" />
                 <NewFolderCard @created="loadFolders()" />
             </div>
-            <div id="pastes">
+            <div id="pastes"  v-animate-css="{classes: 'fadeIn', delay: 150}">
                 <a class="button" @click="$store.state.currentPaste.folder = null; $store.state.app.fullscreen = true"
                    style="float: right; padding: 4px 16px; margin-top: 4px">NEW</a>
 
@@ -24,11 +24,11 @@
             </div>
         </div>
         <div v-else>
-            <p>
+            <p v-animate-css="{classes: 'fadeIn', delay: 100}">
                 Pastefy is a code-paster. Just paste your code into the input-field on the left side and voilá!<br>
             </p><br><br>
-            <h2 style="margin-bottom: 10px" v-if="$store.state.app.lastPastes.length">Your last created pastes</h2>
-            <div id="pastes">
+            <h2  v-animate-css="{classes: 'fadeIn', delay: 150}" style="margin-bottom: 10px" v-if="$store.state.app.lastPastes.length">Your last created pastes</h2>
+            <div id="pastes"  v-animate-css="{classes: 'fadeIn', delay: 200}">
                 <PasteCard v-for="paste of $store.state.app.lastPastes" :key="paste.id" :paste="paste" />
             </div>
         </div>
diff --git a/frontend/src/views/Paste.vue b/frontend/src/views/Paste.vue
index 59917cb..01f2323 100644
--- a/frontend/src/views/Paste.vue
+++ b/frontend/src/views/Paste.vue
@@ -23,34 +23,36 @@
             <h2>Please log in to see this paste.</h2>
         </template>
         <template v-else>
+            <div :class="{'lightened-top': language === 'markdown' && !multiPastes}">
+                <div id="action-buttons" :class="{mobile: $store.state.mobileVersion}" v-animate-css="{classes: 'fadeIn', delay: 50}">
+                    <a v-if="isPWA()" @click="copyURL">Copy URL</a>
+                    <a v-if="language == 'json'" @click="jsonPretty">{{ jsonPrettified ? 'UNPRETTY' : 'PRETTY' }}</a>
+                    <a href="#paste-contents" @click="readCode = true" v-if="extraContent !== ''">CODE</a>
+                    <a v-if="$store.state.user.logged_in && ($store.state.user.id == userid || $store.state.user.type === 'ADMIN')"
+                       @click="$refs.deleteConfirmation.open()">DELETE</a>
+                    <a @click="editPaste(true)" v-if="!$store.state.mobileVersion">FORK</a>
+                    <a v-if="$store.state.user.logged_in && $store.state.user.id == userid" @click="editPaste()">EDIT</a>
+                    <a :href="rawURL" v-if="!passwordRequired && !multiPastes">RAW</a>
+                    <a id="copy-contents" @click="copy">
+                        <i class="material-icons">content_copy</i>
+                    </a>
+                </div>
+
+                <h1 v-animate-css="{classes: 'fadeIn', delay: 50}">{{ title }}</h1>
 
-            <div id="action-buttons" :class="{mobile: $store.state.mobileVersion}">
-                <a v-if="isPWA()" @click="copyURL">Copy URL</a>
-                <a v-if="language == 'json'" @click="jsonPretty">{{ jsonPrettified ? 'UNPRETTY' : 'PRETTY' }}</a>
-                <a href="#paste-contents" @click="readCode = true" v-if="extraContent !== ''">CODE</a>
-                <a v-if="$store.state.user.logged_in && ($store.state.user.id == userid || $store.state.user.type === 'ADMIN')"
-                   @click="$refs.deleteConfirmation.open()">DELETE</a>
-                <a @click="editPaste(true)" v-if="!$store.state.mobileVersion">FORK</a>
-                <a v-if="$store.state.user.logged_in && $store.state.user.id == userid" @click="editPaste()">EDIT</a>
-                <a :href="rawURL" v-if="!passwordRequired && !multiPastes">RAW</a>
-                <a id="copy-contents" @click="copy">
-                    <i class="material-icons">content_copy</i>
-                </a>
             </div>
-            <h1>{{ title }}<span class="language"
-                                 v-if="language !== null && language == 'markdown' && !multiPastes">{{ language }}</span>
-            </h1>
-            <div id="tabs" v-if="multiPastes != null && Object.keys(multiPastes).length > 1">
+
+            <div v-animate-css="{classes: 'fadeIn', delay: 100}" id="tabs" v-if="multiPastes != null && Object.keys(multiPastes).length > 1">
                 <a v-for="(tab,i) of multiPastes" :key="i" @click="changeTab(i)"
                    :class="{selected: multiPastesSelected==i}">
                     {{ tab.name }}
                 </a>
             </div>
-            <div id="preview" v-if="extraContent !== ''" v-html="extraContent"></div>
+            <div v-animate-css="{classes: 'fadeIn', delay: 150}" id="preview" v-if="extraContent !== ''" v-html="extraContent"></div>
             <template v-if="extraContent == '' || readCode">
-                <h1 v-if="extraContent !== ''" style="margin-top: 30px;">
+                <h1 v-if="extraContent !== ''" style="margin-top: 30px;" v-animate-css="{classes: 'fadeIn', delay: 50}">
                     {{ language == 'markdown' ? 'Markdown ' : '' }}Code</h1>
-                <code id="paste-contents">
+                <code id="paste-contents"  v-animate-css="{classes: 'fadeIn', delay: 100}">
                     <div id="line-nums" v-if="showLineNums">
                         <a
                             v-for="(line, lineNum) of rawContent.split('\n')"
@@ -65,10 +67,10 @@
 
             </template>
             <template v-if="htmlPreview !== ''">
-                <a class="button gray" v-if="!htmlPreviewEnabled" @click="htmlPreviewEnabled = !htmlPreviewEnabled">
+                <a class="button gray" v-if="!htmlPreviewEnabled" @click="htmlPreviewEnabled = !htmlPreviewEnabled" v-animate-css="{classes: 'fadeIn', delay: 200}">
                     Show Preview
                 </a>
-                <div id="html-preview" :class="['lang-'+language]" v-else>
+                <div id="html-preview" :class="['lang-'+language]" v-animate-css="{classes: 'fadeIn'}" v-else>
                     <iframe
                         sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-top-navigation-by-user-activation"
                         :srcdoc="htmlPreview"/>
@@ -541,31 +543,74 @@ h1 {
 <style lang="scss">
 #preview {
 
-    font-size: 17.5px;
+    font-size: 18px;
 
-    h1, h2, h3, h4, h5 {
-        margin-top: 30px;
-        margin-bottom: 15px;
+    * {
+        font-family: "DM Sans";
+    }
+    h1, h2, h3 {
+        font-family: "DM Serif Text";
     }
 
     h1 {
-        padding-bottom: 18px;
+        font-size: 36px;
+        margin-top: 36px;
+        margin-bottom: 18px;
     }
 
     h2 {
         font-size: 28px;
+        margin-top: 28px;
+        margin-bottom: 14px;
     }
 
     h3 {
         font-size: 23px;
+        margin-top: 23px;
+        margin-bottom: 11px;
     }
 
     h4 {
         font-size: 20px;
+        margin-top: 20px;
+        margin-bottom: 10px;
     }
 
     h5 {
         font-size: 18px;
+        margin-top: 18px;
+        margin-bottom: 9px;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: 20px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+
+        th {
+            background-color: #f2f2f2;
+            text-align: left;
+            padding: 10px;
+            border: 1px solid #ddd;
+        }
+
+        tr:nth-child(odd) {
+            background-color: #f9f9f9;
+        }
+
+        td {
+            padding: 10px;
+            border: 1px solid #ddd;
+        }
+
+        td, th {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 150px;
+        }
     }
 
     img {
@@ -615,4 +660,12 @@ h1 {
   user-select: none;
   border: var(--text-color-alpha) solid 2px;
 }
+
+.lightened-top {
+    opacity: 0.3;
+    transition: 0.3s;
+    &:hover {
+        opacity: 1;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/PublicPastes.vue b/frontend/src/views/PublicPastes.vue
index 0c758d1..2bc52a7 100644
--- a/frontend/src/views/PublicPastes.vue
+++ b/frontend/src/views/PublicPastes.vue
@@ -3,7 +3,7 @@
         <HomeHeader />
         <div id="public">
 
-            <input @input="loadSearch()" v-model="search" type="text" placeholder="Search" class="input">
+            <input @input="loadSearch()" v-model="search" type="text" placeholder="Search" class="input" v-animate-css="{classes: 'fadeIn', delay: 0}">
 
             <div v-if="search !== ''" :key="`search-${search}`">
 
@@ -18,19 +18,25 @@
             <div v-else>
                 <WebsiteBanner paste="pb-trend" />
 
-                <h2 style="margin-top: 20px; margin-bottom: 10px;">Trending</h2>
-                <div id="pastes">
-                    <PasteCard v-for="paste of trendingPastes" :key="`trending-${paste.id}`" :paste="paste"/>
+                <div v-animate-css="{classes: 'fadeIn', delay: 50}">
+                    <h2 style="margin-top: 20px; margin-bottom: 10px;">Trending</h2>
+                    <div id="pastes">
+                        <PasteCard v-for="paste of trendingPastes" :key="`trending-${paste.id}`" :paste="paste"/>
+                    </div>
                 </div>
 
-                <h2 style="margin-top: 40px; margin-bottom: 10px;">Latest</h2>
-                <div id="pastes">
-                    <PasteCard v-for="paste of newPastes" :key="`new-${paste.id}`" :paste="paste"/>
+                <div v-animate-css="{classes: 'fadeIn', delay: 100}">
+                    <h2 style="margin-top: 40px; margin-bottom: 10px;">Latest</h2>
+                    <div id="pastes">
+                        <PasteCard v-for="paste of newPastes" :key="`new-${paste.id}`" :paste="paste"/>
+                    </div>
                 </div>
 
-                <h2 style="margin-top: 40px; margin-bottom: 10px;">Alltime Trending</h2>
-                <div id="pastes">
-                    <PasteCard v-for="paste of allTimeTrendingPastes" :key="`alt-trending-${paste.id}`" :paste="paste"/>
+                <div v-animate-css="{classes: 'fadeIn', delay: 150}">
+                    <h2 style="margin-top: 40px; margin-bottom: 10px;">Alltime Trending</h2>
+                    <div id="pastes">
+                        <PasteCard v-for="paste of allTimeTrendingPastes" :key="`alt-trending-${paste.id}`" :paste="paste"/>
+                    </div>
                 </div>
             </div>
         </div>