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>
</div>
<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">
{{ $page.person.belongsTo.totalCount }} Projects
&nbsp;&middot;&nbsp;
@@ -33,22 +45,19 @@
<font-awesome :icon="['fab', 'twitter']" />
</a>
&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 class="pt-8 border-b mx-4 sm:-mx-4"></div>
<section 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
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>
<div class="pt-8 border-b mx-4 sm:-mx-4"></div>
@@ -142,18 +151,18 @@ import Pagination from "~/components/Pagination.vue";
export default {
components: {
Pagination,
PostListItem
PostListItem,
},
computed: {
postLabel: function() {
postLabel: function () {
var pluralize = require("pluralize");
return pluralize("post", this.$page.person.belongsTo.totalCount);
}
},
},
metaInfo() {
return {
title: this.$page.person.name
title: this.$page.person.name,
};
}
},
};
</script>

View File

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