ilog 0.2.0

data/src/vue/elements/People.vue

@@ -0,0 +1,75 @@
+<template>
+	<div class="search-form">
+		<form v-on:submit.prevent="onSubmit" class="pure-form">
+			<multiselect
+				placeholder="mention"
+				v-model="person"
+				:options="people"
+				track-by="id"
+				label="identifier"
+				:multiple="false"
+				:taggable="true"
+				@tag="addPeople"
+				class="input-multiselect"
+				selectLabel=""
+				deselect-label=""
+				:loading="isLoading"
+				@search-change="asyncFind"
+			></multiselect>
+			<button type="submit"><i class="fas fa-filter"></i></button>
+		</form>
+	</div>
+</template>
+
+<script>
+
+import app from '../configs/app'
+import Multiselect from 'vue-multiselect'
+export default {
+	name: 'People',
+	props: [],
+	components: {
+		Multiselect
+	},
+	data () {
+		return {
+			person: null,
+			people: [],
+			isLoading: false,
+		}
+	},
+	methods: {
+		asyncFind (query) {
+	    	this.isLoading = true;
+	    	let self = this;
+	    	this.$http.get(app.host + '/modules/people/search/?person=' + encodeURIComponent(query))
+				.then(function(response){
+					console.log(query)
+					self.people = response.data 
+					self.isLoading = false
+				});
+	    },
+	    addPeople (newPerson) {
+				const person = {
+					name: newPerson,
+				}
+				this.people.push(person)
+			},
+		onSubmit () {
+			if (this.person.id != '') {
+				this.$router.push({ name: 'mention', params: { id: this.person.id, identifier: this.person.identifier }})
+			} else {
+				
+			}
+		},
+	},
+	created() {
+		
+	},
+	filters: {
+		
+	},
+	watch: {
+	}
+}
+</script>

data/src/vue/elements/Profile.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="profile">
+		<span class="avatar-container"><img class="avatar" :src="avatar" /></span>
+		<div>
+			<span class="h2"><a :href="website">{{ author }}</a></span><br />
+			<span class="detail">
+				<a :href="address"><i class="fas fa-book"></i> Digital Log</a> | <i class="fas fa-map-marked-alt"></i> {{ location }}
+			</span><br />
+			<span class="status">{{ status }}</span>
+		</div>
+	</div>
+</template>
+
+<script>
+
+import app from '../configs/app'
+
+export default {
+	name: 'Profile',
+	components: {
+	},
+	data () {
+		return {
+			address: '',
+			location: app.profile.location,
+			author: app.profile.author,
+			status: app.profile.status,
+			avatar: app.profile.avatar,
+// 			email: app.profile.email,
+			website: app.profile.website,
+			tag: {},
+			tags: [],
+			dashboard_1: '',
+			dashboard_2: '',
+			rss: '',
+			atom: '',
+		}
+	},
+	methods: {
+	},
+	created() {
+		this.address = app.host;
+		this.dashboard_1 = Window.Config.dasbhoard_1
+		this.dashboard_2 = Window.Config.dasbhoard_2
+		
+		this.rss = app.host + '/feed/rss'
+		this.atom = app.host + '/feed/atom'
+	},
+	filters: {
+		capitalize: function(text) {
+			return text[0].toUpperCase() + text.slice(1);
+		},
+		fromNow: function(date) {
+			return moment(date).fromNow();
+		}
+	},
+	watch: {
+	}
+}
+</script>
+
+<style scoped>
+</style>

data/src/vue/elements/Tunekit.vue

@@ -0,0 +1,82 @@
+<template>
+
+<div class="tunekit">
+	<div id="tags" class="content search-form"  style="overflow: visible;">
+		<div v-if="tags">
+			<form v-on:submit.prevent="onSubmit" class="pure-form">
+				<multiselect
+					placeholder="tag"
+					v-model="tag"
+					:options="tags"
+					track-by="id"
+					label="word"
+					:multiple="false"
+					:taggable="true"
+					class="input-multiselect"
+					selectLabel=""
+					deselect-label=""
+				></multiselect>
+				<button type="submit"><i class="fas fa-filter"></i></button>
+			</form>
+			
+		</div>
+	</div>
+	
+	<div id="search" class="content"  style="overflow: visible;">
+		<people></people>
+	</div>
+	
+</div>
+
+</template>
+
+<script>
+
+import app from '../configs/app'
+import People from '../elements/People'
+import Multiselect from 'vue-multiselect'
+
+export default {
+	name: 'Tunekit',
+	components: {
+		People,
+		Multiselect,
+	},
+	data () {
+		return {
+			tag: {},
+			tags: [],
+		}
+	},
+	methods: {
+		onSubmit () {
+			this.$router.push({ name: 'tag', params: { id: this.tag.id } })
+		},
+	},
+	created() {
+		let self = this
+		this.$http.get(app.host + '/modules/tags/')
+			.then(function(response){
+				self.tags = response.data 
+				});
+		this.dashboard_1 = Window.Config.dasbhoard_1
+		this.dashboard_2 = Window.Config.dasbhoard_2
+	},
+	filters: {
+		capitalize: function(text) {
+			return text[0].toUpperCase() + text.slice(1);
+		},
+		fromNow: function(date) {
+			return moment(date).fromNow();
+		}
+	},
+	watch: {
+	}
+}
+</script>
+
+<style scoped>
+.tag {
+	float: left;
+}
+</style>

data/src/vue/index.js

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+
+import VueRouter from 'vue-router';
+import Meta from 'vue-meta'
+
+Vue.use(VueRouter);
+Vue.use(Meta)
+
+Vue.config.productionTip = false
+
+import axiosApp from './configs/axios';
+
+Vue.prototype.$http = axiosApp;
+
+import {VueMasonryPlugin} from 'vue-masonry';
+Vue.use(VueMasonryPlugin)
+
+import lodash from 'lodash';
+Object.defineProperty(Vue.prototype, '_', { value: lodash });
+
+import Ilog from './Ilog'
+
+import router from './router.js'
+
+const ibaIlog = new Vue({
+	el: '#bp-log',
+	router,
+	template: '<Ilog/>',
+	components: { Ilog },
+})

data/src/vue/router.js

@@ -0,0 +1,50 @@
+import VueRouter from 'vue-router'
+
+import Post from './components/PostBody'
+
+let routes = [
+	{
+		path: '/',
+		name: 'home',
+/*
+		components: {
+			single: ''
+		}
+*/
+	},
+	{
+		path: '/tag/:id/',
+		name: 'tag',
+	},
+	{
+		path: '/mention/:id/',
+		name: 'mention',
+	},
+	{
+		path: '/:id/',
+		name: 'post',
+		pathToRegexpOptions: { strict: true } 
+	},
+];
+
+export default new VueRouter({
+	mode: 'history',
+	base: '/' +  Window.Config.digital.uri,
+	routes,
+	scrollBehavior (to, from, savedPosition) {
+		if (to.hash) {
+			return {
+				selector: to.hash
+				// , offset: { x: 0, y: 10 }
+    		}
+		}
+		if ( to.name == 'tag' ) {
+			return { x: 0, y: 0 }
+		}
+/* FIX THIS ISSUE FROM NAVIGATING TO A TAG FROM INSIDE A POST
+		if ( to.name != 'post' ) {
+			return { x: 0, y: 0 }
+		}
+*/
+	}
+});

data/src/vue/views/Introduction.vue

@@ -0,0 +1,88 @@
+<template>
+<div>
+	<div class="post-single">
+	<article class="text shadow">
+		<div>
+			<h2>{{ content.title.value }}</h2>
+		</div>
+		<div>
+			<span class="mc tag">{{ content.timestamp.publish | date }}</span> | 
+			<template v-if="content.bundles">
+				<template v-for="bundle in content.bundles" v-if="bundle.type == 'category'">
+					<router-link class="inlink-sc" :to="{ name: 'categories', params: { slug: bundle.slug.value }}">
+						{{ bundle.title.value }}
+					</router-link>
+				</template>
+			</template>
+		</div>
+		<div v-html="content.content">
+		</div>
+		<div>
+			<template v-if="content.keywords">
+				<template v-for="keyword in content.keywords">
+					<span class="mc"><router-link :to="{ name: 'home', query: { tag: keyword.word }}">
+						#{{ keyword.word }}
+					</router-link>, </span> 
+				</template>
+			</template>
+		</div>
+	</article>
+	</div>
+</div>
+</template>
+
+<script>
+	
+import app from '../configs/app'
+var _ = require('underscore')
+var moment = require('moment')
+
+export default {
+	data () {
+		return {
+			content: {},
+			underscore: _,
+		}
+	},
+	components: {
+	},
+	methods: {
+		initiate() {
+			
+			
+		}
+	},
+	created() {
+			let self = this;
+			
+			this.$http.get(app.host + this.$route.params.id )
+				.then(function(response){
+					self.content = response.data 
+				});
+	},
+	filters: {
+		date(date) {
+			return moment(date).format("MMMM D, YYYY");
+		}
+	}
+}
+</script>
+
+<style>
+.post-single {
+	padding: 2rem 0px 1rem 0px;
+}
+.tag-sc {
+	background-color: #e691e6;
+}
+@media screen and (min-width: 64em) {
+	.post-single {
+		margin: 0px 5vw;
+	}
+}
+@media screen and (min-width: 80em) {
+	.post-single {
+		margin: 0px 10vw;
+	}
+}
+</style>

data/src/vue/views/List.vue

@@ -0,0 +1,46 @@
+<template>
+	
+	
+	
+</template>
+
+<script>
+
+import Item from '../components/Item'
+
+
+var _ = require('underscore')
+
+export default {
+	name: 'list',
+	props: ['items', 'collection', 'title', 'next', 'empty', 'status', 'prev'],
+	data () {
+		return {
+			underscore: _,
+			elements: {},
+		}
+	},
+	components: {
+		Tunekit,
+		Item,
+		Profile,
+	},
+	methods: {
+	},
+	created() {
+	},
+	watch: {
+		empty() {
+			// the route has changed, hence empty the elements
+			if (this.empty == false) { this.elements = []; }
+		},
+		items()
+		{
+			this.elements = _.union(this.elements, this.items);
+		}
+	}
+}
+</script>
+
+<style>
+</style>

data/src/vue/views/Post.vue

@@ -0,0 +1,163 @@
+<template>
+	
+	<modal v-on:close="close()">
+	
+		<template v-if="content.thumbnail">
+			<img :src="thumbnail" class="shadow" style="max-width: 100%; margin: 0px auto; display: block; position: relative; z-index: -1;" />
+		</template>
+	
+		<div class="post-single">
+			
+			<div class="container shadow"  v-if="!isNaN($route.params.id)">
+				<article class="text">
+					<h1 v-html="content.title.value"></h1>
+				</article>
+				
+				<article class="text" v-html="content.content"></article>
+			</div>
+			
+			<div class="tag-container">
+				
+				<template v-if="content.keywords && content.keywords.length != 0">
+					<template v-for="keyword in content.keywords">
+						<span class="tag tag-sc">
+							<router-link :to="{ name: 'tag', params: { id: keyword.id }}">
+								<i class="fas fa-tag"></i>{{ keyword.word }}
+							</router-link>
+						</span>
+					</template>
+				</template>
+				
+				<div class="timestamps">
+					<p v-if="content.timestamp.draft">
+						<span class="label">Draft | </span>
+						{{ content.timestamp.draft | date }}
+					</p>
+					<p v-if="content.timestamp.publish">
+						<span class="label">Published | </span>
+						{{ content.timestamp.publish | date }}
+					</p>
+					<p v-if="content.timestamp.amend">
+						<span class="label">Updated | </span>
+						{{ content.timestamp.amend | date }}
+					</p>
+				</div>
+			</div>
+			
+			<div class="container shadow"  v-if="isNaN($route.params.id)">
+				<article class="text">
+					<h1 v-html="content.title"></h1>
+					<p><span v-html="content.date"></span></p>
+				</article>	
+				<article class="text" v-html="content.content"></article>
+			</div>
+		
+		</div>
+	</modal>
+	
+</template>
+
+<script>
+	
+import app from '../configs/app'
+import Modal from '../components/Modal'
+var _ = require('underscore')
+var moment = require('moment')
+
+export default {
+	props: ['route'],
+	data () {
+		return {
+			content: {
+				title: {
+					value: '',
+				},
+				date: {
+					
+				},
+				timestamp: {
+					publish: ''
+				},
+			},
+			underscore: _,
+			previous: null,
+		}
+	},
+	components: {
+		Modal,
+	},
+	metaInfo () {
+		return {
+			title: 'Post #' + this.content.id + ' by ' + Window.Config.profile.author + ' (Digital Log)',
+			meta: [{ vmid: 'description', name: 'description', content: this.content.title.value }],
+		}
+	},
+	methods: {
+		close() {
+			this.back()
+		},
+		initialize() {
+			let self = this;
+			this.$http.get(app.host + '/' + this.$route.params.id )
+				.then( function(response) {
+					if ( !isNaN(self.$route.params.id) ) {
+						self.content = response.data
+					} 
+					else
+					{
+						self.content = response.data.leaf
+					}
+				});
+			
+		},
+		back() {
+/*
+			if (this.route == 0) {
+				this.$router.push({ path: '/' })
+				return;
+			}
+			this.$router.go(-1)
+*/
+			if (_.size(this.$parent.collection) > 0 )
+			{
+				this.$router.push({ path: this.previous })
+			} else {
+				this.$router.push({ path: '/' })
+			}
+		},
+	},
+	mounted() {
+		this.initialize();
+		
+	},
+	filters: {
+		date(date) {
+			if (date)
+				return moment(date).format("MMMM D, YYYY");
+			else 
+				return null;
+		}
+	},
+	watch: {
+		'$route.params.id': function() {
+			this.initialize();
+		}
+	},
+	beforeRouteEnter (to, from, next) {
+		let self = this
+		next(self => {
+		    self.previous = from.fullPath
+		  })
+	},
+	computed: {
+		thumbnail: function() {
+			return Window.Config.host + '/' +  Window.Config.digital.uri + '/' + this.content.id + '/' + this.content.thumbnail.name;
+		},
+	}
+}
+</script>
+
+<style scoped lang="scss">
+</style>
+<style lang="sass">
+</style>

data/webpack.mix.js

@@ -0,0 +1,6 @@
+const { mix } = require('laravel-mix');
+  
+mix
+	.js('assets/vue/index.js', 'assets/javascripts/vue-index.js')
+	.js('assets/js/vue-config', 'assets/javascripts/vue-config.js')
+	.sass('assets/sass/style.scss', 'assets/stylesheets/log-style.css');