Replace linkedin menu

This commit is contained in:
samaradel
2020-11-15 11:30:11 +02:00
parent 39870c7b71
commit bf233875e9
2 changed files with 88 additions and 80 deletions

View File

@@ -9,9 +9,21 @@
></g-image> ></g-image>
</div> </div>
<div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0"> <div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0">
<h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">{{ $page.person.name }}</h1> <h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">
{{ $page.person.name }}
<a
:href="$page.person.linkedin"
target="_blank"
rel="noopener noreferrer"
class="text-gray-400 hover:text-black"
>
<font-awesome :icon="['fab', 'linkedin']" />
</a>
</h1>
<p class="text-gray-700 text-xl" v-if="$page.person.bio">{{ $page.person.bio }}</p> <p class="text-gray-700 text-xl" v-if="$page.person.bio">
{{ $page.person.bio }}
</p>
<div class="author-social"> <div class="author-social">
{{ $page.person.belongsTo.totalCount }} Projects {{ $page.person.belongsTo.totalCount }} Projects
&nbsp;&middot;&nbsp; &nbsp;&middot;&nbsp;
@@ -33,22 +45,19 @@
<font-awesome :icon="['fab', 'twitter']" /> <font-awesome :icon="['fab', 'twitter']" />
</a> </a>
&nbsp; --> &nbsp; -->
<a
:href="$page.person.linkedin"
target="_blank"
rel="noopener noreferrer"
class="text-gray-400 hover:text-black"
>
<font-awesome :icon="['fab', 'linkedin']" />
</a>
</div> </div>
</div> </div>
</div> </div>
<div class="pt-8 border-b mx-4 sm:-mx-4"></div> <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
<section class="post-content container mx-auto relative font-serif text-gray-700"> <section
<div class="post-content-text text-xl" v-html="$page.person.content"></div> class="post-content container mx-auto relative font-serif text-gray-700"
>
<div
class="post-content-text text-xl"
v-html="$page.person.content"
></div>
</section> </section>
<div class="pt-8 border-b mx-4 sm:-mx-4"></div> <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
@@ -142,18 +151,18 @@ import Pagination from "~/components/Pagination.vue";
export default { export default {
components: { components: {
Pagination, Pagination,
PostListItem PostListItem,
}, },
computed: { computed: {
postLabel: function () { postLabel: function () {
var pluralize = require("pluralize"); var pluralize = require("pluralize");
return pluralize("post", this.$page.person.belongsTo.totalCount); return pluralize("post", this.$page.person.belongsTo.totalCount);
} },
}, },
metaInfo() { metaInfo() {
return { return {
title: this.$page.person.name title: this.$page.person.name,
}; };
} },
}; };
</script> </script>

View File

@@ -9,14 +9,8 @@
></g-image> ></g-image>
</div> </div>
<div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0"> <div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0">
<h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">{{ $page.project.title }}</h1> <h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">
{{ $page.project.title }}
<p class="text-gray-700 text-xl" v-if="$page.project.bio">{{ $page.project.bio }}</p>
<div class="avatars">
<div class="flex items-center">
<div class="author-social">
<a <a
:href="$page.project.linkedin" :href="$page.project.linkedin"
target="_blank" target="_blank"
@@ -25,11 +19,13 @@
> >
<font-awesome :icon="['fab', 'linkedin']" /> <font-awesome :icon="['fab', 'linkedin']" />
</a> </a>
</div> </h1>
</div> <p class="text-gray-700 text-xl" v-if="$page.project.bio">
{{ $page.project.bio }}
</p>
<div class="avatars">
<section> <section>
<br/>
<div class="avatars"> <div class="avatars">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
@@ -52,13 +48,14 @@
</div> </div>
</div> </div>
</section> </section>
<section class="post-tags container mx-auto relative py-10"> <section class="post-tags container mx-auto relative py-5">
<g-link <g-link
v-for="tag in $page.project.tags" v-for="tag in $page.project.tags"
:key="tag.id" :key="tag.id"
:to="tag.path" :to="tag.path"
class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full" class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
>{{ tag.title }}</g-link> >{{ tag.title }}</g-link
>
</section> </section>
</div> </div>
</div> </div>
@@ -67,7 +64,10 @@
<div class="pt-8 border-b mx-4 sm:-mx-4"></div> <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
<section class="post-content container mx-auto relative text-gray-700"> <section class="post-content container mx-auto relative text-gray-700">
<div class="post-content-text text-xl" v-html="$page.project.content"></div> <div
class="post-content-text text-xl"
v-html="$page.project.content"
></div>
</section> </section>
<div class="pt-8 border-b mx-4 sm:-mx-4"></div> <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
<br /> <br />
@@ -88,7 +88,6 @@
:alt="author.name" :alt="author.name"
class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white" class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
/> />
</g-link> </g-link>
</li> </li>
</ul> </ul>
@@ -196,19 +195,19 @@ import Pagination from "~/components/Pagination.vue";
export default { export default {
components: { components: {
Pagination, Pagination,
PostListItem PostListItem,
}, },
computed: { computed: {
postLabel: function () { postLabel: function () {
var pluralize = require("pluralize"); var pluralize = require("pluralize");
return pluralize("post", this.$page.project.belongsTo.totalCount); return pluralize("post", this.$page.project.belongsTo.totalCount);
} },
}, },
metaInfo() { metaInfo() {
return { return {
title: this.$page.project.title title: this.$page.project.title,
}; };
} },
}; };
</script> </script>
<style scoped> <style scoped>