Skip to content

Commit

Permalink
Server-side rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@NavidK0
NavidK0 committed Oct 8, 2020
1 parent da263fc commit 6f671a2
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 105 deletions.
41 changes: 23 additions & 18 deletions client/nuxt.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@

export default {
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'spa',
mode: 'universal',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
Expand All @@ -28,28 +27,34 @@ export default {
head: {
title: 'Singlelink - A free & open-source Linktree alternative',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'One link for all your content, open-sourced via GPL v3 and built with NuxtJS, MongoDB, and NodeJS.' },
{ name: 'og:image', content: 'https://singlelink.co/social-hero.png' },
{ name: 'og:title', content: 'Singlelink - A free & open-source Linktree alternative' },
{ name: 'og:description', content: 'One link for all your content, open-sourced via GPL v3 and built with NuxtJS, MongoDB, and NodeJS.' },
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{
hid: 'description',
name: 'description',
content: 'One link for all your content, open-sourced via GPL v3 and built with NuxtJS, MongoDB, and NodeJS.'
},
{name: 'og:image', content: 'https://singlelink.co/social-hero.png'},
{name: 'og:title', content: 'Singlelink - A free & open-source Linktree alternative'},
{
name: 'og:description',
content: 'One link for all your content, open-sourced via GPL v3 and built with NuxtJS, MongoDB, and NodeJS.'
},
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
]
},
/*
** Global CSS
*/
css: [
],
css: [],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
{ src: '~plugins/draggable.js', ssr: false }
{src: '~plugins/draggable.js', ssr: false}
],
/*
** Auto import components
Expand Down Expand Up @@ -87,12 +92,12 @@ export default {
extend(config, ctx) {
if (ctx.dev && ctx.isClient) {
config.module.rules.push({
enforce : 'pre',
test : /\.(js|vue)$/,
loader : 'eslint-loader',
exclude : /(node_modules)/,
options : {
fix : true
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
options: {
fix: true
}
});
}
Expand Down
191 changes: 104 additions & 87 deletions client/pages/u/_.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,33 @@
<template>
<div class="relative flex min-h-screen w-screen bg-gray-100 justify-center w-full sl-bg">
<section v-if="profile.visibility=='published-18+' && age_verification" class="fixed top-0 left-0 right-0 z-10 flex flex-col items-center justify-center w-screen h-screen" style="box-shadow: rgba(0, 0, 0, .65) 0 0 10px 5px inset;">
<div class="flex flex-col w-full h-full text-center items-center justify-center p-8" style="background:rgba(0,0,0,.65);backdrop-filter:saturate(180%) blur(5px)">
<section v-if="profile.visibility=='published-18+' && age_verification"
class="fixed top-0 left-0 right-0 z-10 flex flex-col items-center justify-center w-screen h-screen"
style="box-shadow: rgba(0, 0, 0, .65) 0 0 10px 5px inset;">
<div class="flex flex-col w-full h-full text-center items-center justify-center p-8"
style="background:rgba(0,0,0,.65);backdrop-filter:saturate(180%) blur(5px)">
<span class="text-white text-2xl mb-2">Warning: 18+ only</span>
<span class="text-gray-200 text-lg mb-4">To continue, please confirm your age below.</span>
<div class="flex flex-col">
<button @click="accept_age_verification" class="w-full mb-4 uppercase rounded p-4 pl-4 pr-4 bg-indigo-600 hover:bg-indigo-500 cursor-pointer font-medium text-sm tracking-wide shadow text-white">Continue, I am 18+</button>
<button @click="reject_age_verification" style="background:#e74c3c;" class="w-full uppercase rounded p-4 pl-4 pr-4 cursor-pointer font-medium text-sm tracking-wide shadow text-white mr-2">Go back, I'm under 18</button>
<button @click="accept_age_verification"
class="w-full mb-4 uppercase rounded p-4 pl-4 pr-4 bg-indigo-600 hover:bg-indigo-500 cursor-pointer font-medium text-sm tracking-wide shadow text-white">
Continue, I am 18+
</button>
<button @click="reject_age_verification" style="background:#e74c3c;"
class="w-full uppercase rounded p-4 pl-4 pr-4 cursor-pointer font-medium text-sm tracking-wide shadow text-white mr-2">
Go back, I'm under 18
</button>
</div>
</div>
</section>
<section class="flex flex-col p-6 pt-8 pb-8 items-center text-center max-w-sm w-full">
<img class="nc-avatar mb-2" v-if="profile.image_url || user.avatar_url || user.hash" :src="profile.image_url || user.avatar_url || 'https://www.gravatar.com/avatar/' + user.hash"/>
<img class="nc-avatar mb-2" v-if="profile.image_url || user.avatar_url || user.hash"
:src="profile.image_url || user.avatar_url || 'https://www.gravatar.com/avatar/' + user.hash"/>
<h1 class="text-black font-semibold text-2xl sl-headline">{{ profile.headline || user.name }}</h1>
<h3 class="text-gray-600 mb-4 sl-subtitle">{{ profile.subtitle }}</h3>
<a :href="'https://api.singlelink.co/analytics/link/' + link._id" v-for="link in links" class="w-full">
<div class="rounded shadow bg-white p-4 w-full font-medium mb-3 nc-link sl-item flex items-center justify-center flex-col" :style="link.custom_css">
<div
class="rounded shadow bg-white p-4 w-full font-medium mb-3 nc-link sl-item flex items-center justify-center flex-col"
:style="link.custom_css">
<span class="font-medium text-gray-900 sl-label">{{ link.label }}</span>
<span v-if="link.subtitle" class="text-sm text-gray-700 sl-link-subtitle mt-1">{{ link.subtitle }}</span>
</div>
Expand All @@ -26,7 +38,7 @@
color: {{ theme.colors.text.primary }};
}
.sl-subtitle {
opacity: .85;
opacity: .85;
color: {{ theme.colors.text.primary }};
}
.sl-bg {
Expand Down Expand Up @@ -67,95 +79,100 @@
</template>

<script>
export default {
data: function() {
return {
profile: {
custom_html: null,
custom_css: null,
image_url: null,
headline: null,
subtitle: null,
visibility: null,
parent: {
name: null,
hash: null
}
},
user: {
export default {
data: function () {
return {
profile: {
custom_html: null,
custom_css: null,
image_url: null,
headline: null,
subtitle: null,
visibility: null,
parent: {
name: null,
hash: null,
avatar_url: null
},
thumbnail: null,
theme: null,
links: null,
failed: false,
age_verification: true
};
},
methods: {
accept_age_verification: function() {
return this.age_verification = false;
hash: null
}
},
reject_age_verification: function() {
return window.location.href = "https://singlelink.co";
user: {
name: null,
hash: null,
avatar_url: null
},
thumbnail: null,
theme: null,
links: null,
failed: false,
age_verification: true
};
},
methods: {
accept_age_verification: function () {
return this.age_verification = false;
},
head: {
meta: [
{ name: 'og:image', content: 'https://api.singlelink.co/profile/thumbnail/' + window.location.pathname.replace('/u/', '') } ,
{
hid: 'og:image',
name: 'og:image',
content: 'https://api.singlelink.co/profile/thumbnail/' + window.location.pathname.replace('/u/', '')
}
],
reject_age_verification: function () {
return window.location.href = "https://singlelink.co";
},
mounted: function() {
this.$axios.$post('/profile/fetch', {
handle: window.location.pathname.replace('/u/','')
})
.then((response) => {
//console.log('Profile fetched successfully');
//console.log(response);
this.profile = response.profile;
this.links = response.links.sort(function (a, b) {
return a.order - b.order;
});
this.user = response.user;
this.theme = response.theme || null;
//console.log(response.theme);
document.title = this.profile.headline + ' | Singlelink';
document.description = this.profile.subtitle;
document.querySelector('meta[name="og:title"]').setAttribute("content", this.profile.headline + ' | Singlelink');
document.querySelector('meta[name="og:description"]').setAttribute("content", this.profile.subtitle);
document.querySelector('meta[name="description"]').setAttribute("content", this.profile.subtitle);
//document.querySelector('meta[name="og:image"]').setAttribute("content", 'https://api.singlelink.co/profile/thumbnail/' + window.location.pathname.replace('/u/', ''));
})
.catch((error) => {
console.log('Error fetching profile');
console.log(error);
this.failed = true;
},
head: {
meta: [
{
name: 'og:image',
content: 'https://api.singlelink.co/profile/thumbnail/' + window.location.pathname.replace('/u/', '')
},
{
hid: 'og:image',
name: 'og:image',
content: 'https://api.singlelink.co/profile/thumbnail/' + window.location.pathname.replace('/u/', '')
}
],
},
mounted: function () {
this.$axios.$post('/profile/fetch', {
handle: window.location.pathname.replace('/u/', '')
})
.then((response) => {
//console.log('Profile fetched successfully');
//console.log(response);
this.profile = response.profile;
this.links = response.links.sort(function (a, b) {
return a.order - b.order;
});
},
};
this.user = response.user;
this.theme = response.theme || null;
//console.log(response.theme);
document.title = this.profile.headline + ' | Singlelink';
document.description = this.profile.subtitle;
document.querySelector('meta[name="og:title"]').setAttribute("content", this.profile.headline + ' | Singlelink');
document.querySelector('meta[name="og:description"]').setAttribute("content", this.profile.subtitle);
document.querySelector('meta[name="description"]').setAttribute("content", this.profile.subtitle);
//document.querySelector('meta[name="og:image"]').setAttribute("content", 'https://api.singlelink.co/profile/thumbnail/' + window.location.pathname.replace('/u/', ''));
})
.catch((error) => {
console.log('Error fetching profile');
console.log(error);
this.failed = true;
});
},
};
</script>

<style lang="sass" scoped>
.nc-avatar
width: 60px
height: 60px
border-radius: 1000px
.nc-avatar
width: 60px
height: 60px
border-radius: 1000px
.nc-link
cursor: pointer
transition: .15s ease-in-out
overflow: hidden
&:hover
transform: scale(1.02)
.nc-link
cursor: pointer
transition: .15s ease-in-out
overflow: hidden
&:hover
transform: scale(1.02)
&:active
transform: scale(1)
&:active
transform: scale(1)
</style>

0 comments on commit 6f671a2

Please sign in to comment.