mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-09 23:15:35 +00:00
Remove Prettier format form App.vue
This commit is contained in:
178
src/App.vue
178
src/App.vue
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user