Remove Prettier format form App.vue

This commit is contained in:
khatabwedaa
2020-08-15 14:30:13 +02:00
parent 48941bd470
commit a816ca185c

View File

@@ -1,64 +1,44 @@
<template> <template>
<div class="bg-white font-roboto" id="app"> <div class="bg-white font-roboto" id="app">
<Header></Header> <Header></Header>
<main class="container mx-auto px-6" id="main"> <main class="container mx-auto px-6" id="main">
<div class="mt-16 text-center"> <div class="mt-16 text-center">
<h1 class="text-xl md:text-3xl text-gray-800 font-medium"> <h1 class="text-xl md:text-3xl text-gray-800 font-medium">
Discover new components. Build amazing things 🔥 Discover new components. Build amazing things 🔥
</h1> </h1>
</div> </div>
<div class="max-w-2xl mx-auto mt-4"> <div class="max-w-2xl mx-auto mt-4">
<div class="flex flex-wrap items-center justify-center"> <div class="flex flex-wrap items-center justify-center">
<span class="ml-2" v-for="route in routes" :key="route.path"> <span class="ml-2" v-for="route in routes" :key="route.path">
<span v-if="route.path != '/'"> <span v-if="route.path != '/'">
<router-link class="inline-block mt-2 px-3 py-1 rounded text-sm cursor-pointer hover:bg-gray-700 hover:text-gray-200" <router-link class="inline-block mt-2 px-3 py-1 rounded text-sm cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
:class=" {{ route.name }}
currentPage == route.path </router-link>
? 'bg-gray-700 text-gray-200' </span>
: 'bg-gray-200 text-gray-700' </span>
" </div>
:to="route.path"
>
{{ route.name }}
</router-link>
</span>
</span>
</div>
<p class="mt-8 text-gray-700 text-center"> <p class="mt-8 text-gray-700 text-center">
Headers components require simple Headers components require simple <span class="font-semibold">- don't panic please 😎 -</span>
<span class="font-semibold">- don't panic please 😎 -</span> <a href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank" class="text-blue-600 hover:underline">configuration</a>
<a </p>
href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" </div>
target="_blank"
class="text-blue-600 hover:underline"
>configuration</a
>
</p>
</div>
<div class="mt-16"> <div class="mt-16">
<router-view></router-view> <router-view></router-view>
</div> </div>
</main> </main>
<back-to-top visibleoffset="800"> <back-to-top visibleoffset="800">
<button <button class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top">
class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
aria-label="Back to top" <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
> </svg>
<svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor"> </button>
<path </back-to-top>
fill-rule="evenodd" </div>
d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
</back-to-top>
</div>
</template> </template>
<script> <script>
@@ -66,54 +46,54 @@ import Header from "./components/Header";
import BackToTop from "vue-backtotop"; import BackToTop from "vue-backtotop";
export default { export default {
components: { components: {
Header, Header,
BackToTop, BackToTop,
},
computed: {
currentPage() {
return this.$route.path;
}, },
},
data() { computed: {
return { currentPage() {
routes: this.$router.options.routes, return this.$route.path;
og: "https://merakiui.com" + require("./assets/merakiui-og.png"),
};
},
metaInfo() {
return {
meta: [
// Twitter Card
{ name: "twitter:card", content: "summary_large_image" },
{ name: "twitter:title", content: "Meraki UI Tailwindcss Components" },
{
name: "twitter:description",
content:
"Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
}, },
// image must be an absolute path },
{ name: "twitter:image", content: this.og },
// Facebook OpenGraph
{ property: "og:title", content: "Meraki UI Tailwindcss Components" },
{ property: "og:site_name", content: "Meraki UI" },
{ property: "og:type", content: "website" },
{ property: "og:image", content: this.og },
{
property: "og:description",
content:
"Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
},
],
};
},
mounted() { data() {
this.$ga.page("/"); return {
}, routes: this.$router.options.routes,
og: "https://merakiui.com" + require("./assets/merakiui-og.png"),
};
},
metaInfo() {
return {
meta: [
// Twitter Card
{ name: "twitter:card", content: "summary_large_image" },
{ name: "twitter:title", content: "Meraki UI Tailwindcss Components" },
{
name: "twitter:description",
content:
"Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
},
// image must be an absolute path
{ name: "twitter:image", content: this.og },
// Facebook OpenGraph
{ property: "og:title", content: "Meraki UI Tailwindcss Components" },
{ property: "og:site_name", content: "Meraki UI" },
{ property: "og:type", content: "website" },
{ property: "og:image", content: this.og },
{
property: "og:description",
content:
"Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
},
],
};
},
mounted() {
this.$ga.page("/");
},
}; };
</script> </script>