ilog 0.2.0

data/src/sass/style.scss

@@ -0,0 +1,28 @@
+@import "/libs/selectize";
+
+@import "~@piratesatelier/css-ordinary/src/scss/config";
+@import "~@piratesatelier/css-ordinary/src/scss/custom";
+
+@import "/variables";
+
+@import "/components/post.scss";
+@import "/components/tag.scss";
+@import "/components/single";
+@import "/components/card";
+
+@import "/log/style";
+
+@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700&subset=latin-ext');
+
+.modal {
+	z-index: 6;
+}
+
+body > header {
+	
+	padding: 2em 2em .5em 2em;
+	
+	@include breakpoint(lg) {
+		padding: 2em 8em .5em 8em;
+	}
+}

data/src/vue/Log.vue

@@ -0,0 +1,257 @@
+<template>
+	<div class="log">
+		<header>
+			<p style="display:flex; justify-content: space-between;">
+				<span v-if="head"><b>{{ head }}</b></span>
+				{{ count.posts }} posts & {{ count.stuffs }} stuff
+			</p>
+			<profile class="lg-yes" :count="count"></profile>
+		</header>
+		
+		<main class="log-list">
+			<header>
+				<profile class="lg-no"></profile>
+				<tunekit></tunekit>
+				<span v-if="title" v-html="title" class="title"></span>
+				<nav v-if="page.prev" class>
+					<span class="status" v-if="loading">{{ loading }}</span>
+					<span class="button" v-if="!loading" v-on:click="retriveNewer()">Newer</span>
+				</nav>
+			</header>
+			
+			<item v-for="(item, index) in items"
+				:content="item"
+				:key="item.kind + item.id"
+				>
+			</item>
+	
+			<footer>
+				<nav v-if="page.next" class="footer">
+					<span class="button" v-if="!loading" v-on:click="retriveNextPage()">Older</span>
+					<span class="status" v-if="loading">{{ loading }}</span>
+				</nav>
+			</footer>		
+		</main>
+		
+		<footer>
+			<menu>
+				<a class="inlink" :href="'mailto:' + email"><i class="fas fa-envelope"></i>
+					<span class="no xl-yes">Email</span>
+				</a>
+				<router-link to="/"><i class="fas fa-home"></i>
+					<span class="no xl-yes">Home</span>
+				</router-link>
+				<a class="inlink" :href="atom"><i class="fas fa-rss-square"></i>
+					<span class="no xl-yes">Atom</span>
+				</a>
+				<a class="inlink" :href="rss"><i class="fas fa-rss"></i>
+					<span class="no xl-yes">RSS</span>
+				</a>
+				<a class="inlink"><i class="fas fa-question-circle"></i>
+					<span class="no xl-yes">Help</span>
+				</a>
+			</menu>
+		</footer>
+		
+	</div>
+	
+</template>
+
+<script>
+import app from './configs/app.js'
+import Profile from './elements/Profile'
+import Tunekit from './elements/Tunekit'
+import Item from './components/Item'
+
+var _ = require('underscore')
+var moment = require('moment')
+
+export default {
+	name: 'Log',
+	components: {
+		Profile,
+		Tunekit,
+		Item
+	},
+	data () {
+		return {
+			address: '',
+			location: app.profile.location,
+			author: app.profile.author,
+			status: app.profile.status,
+			avatar: app.profile.avatar,
+			
+			count: {},
+			items: [],
+			forward: false,
+			underscore: _,
+			
+			title: '',
+			route: 0,
+			
+			
+			head: '',
+			host: '',
+			atom: '',
+			rss: '',
+			email: app.profile.email,
+			
+			page: {
+				current: false,
+				next: false,
+				prev: false,
+				respodata: {}
+			},
+			request: '',
+			loading: 'starting to lead content',
+		}
+	},
+	metaInfo () {
+		return {
+			title: this.head + ' by ' + this.author + ' (Digital Ilog)',
+			meta: [{ vmid: 'description', name: 'description', content: app.profile.status }],
+			host: Window.Config.host + '/' +  app.host
+		}
+	},
+	mounted () {
+	},
+	methods: {
+		setPrev() {
+			this.page.prev = this.page.respodata.prev
+		},
+		setNext() {
+			this.page.next = this.page.respodata.next
+		},
+		retriveNewer() {
+			this.$router.replace({ name: 'home' })
+			this.constructRequest()
+			this.request = this.request + this.page.prev
+			console.log(this.request)
+			this.forward = true;
+			let self = this;
+			this.retriveIlogs().then(function(){
+				self.setPrev()
+			})
+		},
+		retriveNextPage() {
+			this.$router.replace({ name: 'home' })
+			this.constructRequest()
+			this.request = this.request + this.page.next
+			let self = this;
+			this.retriveIlogs().then(function(){
+				self.setNext()
+			})
+			
+		},
+		retriveIlogs() {
+			let vue = this;
+			return new Promise(function(resolve, reject) {
+				let self = vue;
+				let success = false;
+				vue.loading = 'loading';
+				vue.$http.get(vue.request).
+					then(function(response) {
+						self.count = response.data.count
+						
+						self.page.current = response.data.items.current_page // set current page
+						console.log('hardcore')
+						console.log(response.data.items.prev_page_url)
+						
+						self.page.respodata.prev = response.data.items.prev_page_url
+						self.page.respodata.next = response.data.items.next_page_url
+						
+						if (self.items.length == 0 ) {
+							console.log(self.page.respodata.next)
+							self.setNext()
+							self.setPrev()
+						}
+						
+						if (self.forward) {
+							self.items = _.union(_.toArray(response.data.items.data), self.items) // add data
+							self.forward = false;
+						} else {
+							self.items = _.union(self.items,_.toArray(response.data.items.data)) // add data
+						}
+						self.loading = false;
+						resolve()
+					}).catch(e => {
+						console.log(e)
+						reject()
+					})
+			})
+		},
+		constructRequest()
+		{
+			this.request = app.host;
+			switch (this.$route.name) {
+				case 'tag':
+					this.items = [];
+					this.page.current = false;
+					this.request =  this.request + '/tag/' + this.$route.params.id;
+					this.retriveIlogs()
+					this.head = "#:" + this.$route.params.id;
+					break;
+				case 'mention':
+					this.items = [];
+					this.page.current = false;
+					this.request =  this.request + '/mention/' + this.$route.params.id;
+					this.retriveIlogs()
+					this.head = "@:" + this.$route.params.id;
+					break;
+				case 'post':
+					console.log(this.items.length)
+					if (this.items.length == 0 )
+					{
+						this.page.current = false;
+						this.request =  this.request + '/' + this.$route.params.id + '/find/';
+						let self = this;
+						this.retriveIlogs().then(function() {
+							self.setNext()
+							self.setPrev()
+						})
+					}
+					break;
+				case 'home':
+					if (this.items.length == 0 )
+					{
+						this.page.current = false;
+						this.request =  this.request + '/index/';
+						let self = this;
+						this.retriveIlogs().then(function() {
+							self.setNext()
+							self.setPrev()
+						}).catch(e => {
+						    console.log(e);
+						})
+					} else {
+					}
+					break;
+			}
+		},
+	},
+	filters: {
+		capitalize: function(text) {
+			return text[0].toUpperCase() + text.slice(1);
+		}
+	},
+	created() {
+		this.address = app.host;
+		this.rss = app.host + '/feed/rss'
+		this.atom = app.host + '/feed/atom'
+	},
+	mounted() {
+		this.constructRequest()
+	},
+	watch: {
+        $route() {
+	        this.constructRequest()
+        },
+    },
+    computed: {
+    },
+}
+</script>
+
+
+<style scoped>
+</style>

data/src/vue/components/Item.vue

@@ -0,0 +1,46 @@
+<template>
+	<div :class="'item ' + content.kind">
+		<component :is="content.kind" :content="content">
+		</component>
+	</div>
+</template>
+
+<script>
+
+var moment = require('moment');
+import Stuff from '../components/Stuff'
+import Post from '../components/Post'
+
+export default {
+	name: 'item',
+	props: ['content'],
+	components: {
+		Post,
+		Stuff,
+	},
+	data () {
+		return {
+		}
+	},
+	methods: {
+	},
+	mounted() {
+	},
+	filters: {
+		capitalize: function(text) {
+			return text[0].toUpperCase() + text.slice(1);
+		},
+		fromNow: function(date) {
+			return moment(date).fromNow();
+		},
+		date: function(time) {
+			return moment(time).format('MMM D, YY');
+		}
+	},
+	watch: {
+	}
+}
+</script>
+
+<style scoped>
+</style>

data/src/vue/components/Modal.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="modal" style="display: block;">
+		<span class="close" v-on:click="close()"><i class="fas fa-times"></i></span>
+		<div class="modal-content" style="z-index: 10;">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	methods: {
+		close() {
+			this.$emit('close')
+		}
+	},
+	created() {
+		document.body.classList.add('modal-open')
+	},
+	destroyed() {
+		document.body.classList.remove('modal-open')
+	},
+}
+</script>
+
+<style>
+</style>

data/src/vue/components/Post.vue

@@ -0,0 +1,125 @@
+<template>
+	<transition name="display-content" mode="out-in">
+		<component-view :is='view' :ref="content.id" v-on:click="display" v-on:closePost="close" :content="post">
+			
+			<div class="content">
+				
+				<template v-if="content.thumbnail">
+					<img class="thumbnail" :src="thumbnail()" />
+				</template>
+				
+				<div class="title h2" v-html="content.title.value"></div>
+				
+				<footer>
+					<div class="date">{{ content.timestamp.publish | date }}</div>		
+					
+					<template v-if="typeof(content.keywords) !== 'undefined' && content.keywords.length != 0">
+							<div class="tags" >
+								<template v-for="keyword in content.keywords">
+									<span class="tag">
+										<router-link :to="{ name: 'tag', params: { id: keyword.id }}">
+											<i class="fas fa-tag"></i>{{ keyword.word }}
+										</router-link>
+									</span>
+								</template>
+							</div>
+					</template>
+						
+				</footer>
+			</div>
+			
+		</component-view>
+	</transition>
+</template>
+
+<script>
+
+var moment = require('moment');
+import PostBody from '../components/PostBody'
+import app from '../configs/app'
+
+export default {
+	name: 'post',
+	props: ['content'],
+	components: {
+		PostBody
+	},
+	data () {
+		return {
+			view: 'div',
+			status: false,
+			post: {},
+			request: '',
+		}
+	},
+	methods: {
+		close() {
+			this.view = 'div';
+			this.$router.replace({ name: 'home' })
+		},
+		display() {
+			this.$router.replace({ name: 'post', params: { id: this.content.id } })
+			this.view = 'post-body';
+			this.status = 'active';
+			console.log('content = ' + this.content.content)
+			if ( this.content.content == undefined ) {
+				this.retrivePostBody()
+			} else {
+				this.post = this.content;
+			}
+		},
+		thumbnail() {
+			return Window.Config.host + '/' +  Window.Config.digital.uri + '/' + this.content.id + '/' + this.content.thumbnail.name;
+		},
+		retrivePostBody() {
+			let self = this;
+			this.request = '/' + this.$route.params.id
+			this.$http.get(app.host + this.request )
+				.then( function(response) {
+					if ( !isNaN(self.$route.params.id) ) {
+						self.post = response.data
+					} 
+					else
+					{
+						self.post = response.data.leaf
+					}
+				});
+		},
+	},
+	filters: {
+		capitalize: function(text) {
+			return text[0].toUpperCase() + text.slice(1);
+		},
+		date: function(time) {
+			return moment(time).format('MMM D, YY');
+		}
+	},
+	created()
+	{
+		if ( this.$route.name == 'post' && this.content.id == this.$route.params.id ) {
+			this.request = '/' + this.$route.params.id
+			if ( this.content.content != undefined ) {
+				this.post = this.content;
+			} else {
+				this.retrivePostBody()
+			}
+		} else {
+			this.post = this.content;
+// 			this.$emit('closePost')
+		}
+		this.$nextTick(() => {
+			if (typeof this.content.view !== 'undefined') {
+				this.$nextTick(() => {
+					this.$refs[this.content.id].scrollIntoView()
+					this.$nextTick(() => {
+						this.view = 'post-body'
+					})
+				})
+			}
+		})
+	}
+}
+</script>
+
+<style scoped>
+</style>

data/src/vue/components/PostBody.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="post-body">			
+		<header class="text article" style="background-color: transparent">
+			<template v-if="content.thumbnail">
+				<img class="thumbnail" :src="thumbnail()" />
+			</template>
+			<h1 v-html="content.title.value" v-on:click="$emit('closePost')"></h1>
+		</header>
+		<div class="text article" v-html="content.content">
+		</div>
+		<div class="text" style="background-color: transparent">
+			<footer>
+				<ul class="timestamps">
+					<li v-if="content.timestamp.draft">
+						<span class="label">Draft | </span>
+						{{ content.timestamp.draft | date }}
+					</li>
+					<li v-if="content.timestamp.publish">
+						<span class="label">Published | </span>
+						{{ content.timestamp.publish | date }}
+					</li>
+	
+					<li v-if="content.timestamp.amend">
+						<span class="label">Updated | </span>
+						{{ content.timestamp.amend | date }}
+					</li>
+				</ul>
+				
+				<template v-if="typeof(content.keywords) !== 'undefined' && content.keywords.length != 0">
+						<div class="tags" >
+							<template v-for="keyword in content.keywords">
+								<span class="tag">
+									<router-link :to="{ name: 'tag', params: { id: keyword.id }}">
+										<i class="fas fa-tag"></i>{{ keyword.word }}
+									</router-link>
+								</span>
+							</template>
+						</div>
+				</template>
+				
+			</footer>
+		</div>
+	</div>
+</template>
+
+<script>
+
+import Modal from '../components/Modal'
+var _ = require('underscore')
+var moment = require('moment')
+
+export default {
+	props: ['content'],
+	data () {
+		return {
+		}
+	},
+	components: {
+		Modal,
+	},
+	methods: {
+		thumbnail() {
+			return Window.Config.host + '/' +  Window.Config.digital.uri + '/' + this.content.id + '/' + this.content.thumbnail.name;
+		},
+	},
+	mounted() {
+		console.log('this is the poost we have')
+		console.log(this.content.title.value)
+	},
+	filters: {
+		date(date) {
+			if (date)
+				return moment(date).format("MMMM D, YYYY");
+			else 
+				return null;
+		}
+	},
+	computed: {
+	}
+}
+</script>
+
+<style scoped lang="scss">
+</style>
+<style lang="sass">
+</style>

data/src/vue/components/Stuff.vue

@@ -0,0 +1,63 @@
+<template>
+	<a :href="content.slug.value" class=" content">
+		
+		<header class="kind" v-if="content.kind">
+			<span><i class="fas fa-external-link-square-alt"></i> {{ content.kind }}</span>
+		</header>
+		
+		<div>
+			<template v-if="content.thumbnail">
+				<img class="thumbnail" :src="thumbnail()" />
+			</template>
+			
+			<div class="title h2" v-html="content.title.value"></div>
+			
+			<footer>
+				<template v-if="typeof(content.keywords) !== 'undefined' && content.keywords.length != 0">
+					<div class="tags" >
+						<template v-for="keyword in content.keywords">
+							<span class="tag">
+								<span :to="{ name: 'tag', params: { id: keyword.id }}">
+									<i class="fas fa-tag"></i>{{ keyword.word }}
+								</span>
+							</span>
+						</template>
+					</div>
+				</template>
+				<span class="date">{{ content.timestamp.publish | date }}</span>
+			</footer>
+		</div>
+		<footer>
+			
+		</footer>
+	</a>
+		
+</template>
+
+<script>	
+var moment = require('moment');
+export default {
+	name: 'stuff',
+	props: ['content'],
+	data () {
+		return {
+		}
+	},
+	methods: {
+		thumbnail() {
+			return this.content.thumbnail.path + this.content.thumbnail.name;
+		},
+	},
+	filters: {
+		capitalize: function(text) {
+			return text[0].toUpperCase() + text.slice(1);
+		},
+		date: function(time) {
+			return moment(time).format('MMM D, YY');
+		}
+	},
+}
+</script>
+
+<style scoped>
+</style>

data/src/vue/configs/app.js

@@ -0,0 +1,5 @@
+export default {
+	title: Window.Config.title,
+	host: Window.Config.host + '/' + Window.Config.digital.uri,
+	profile: Window.Config.profile,
+}

data/src/vue/configs/axios.js

@@ -0,0 +1,14 @@
+import axios from 'axios';
+import app from '../configs/app';
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+export default new axios.create({
+	baseURL: app.host,
+	headers: {
+			'X-Requested-With': 'XMLHttpRequest'
+		
+	}
+// 		'X-Requested-With': 'XMLHttpRequest',
+// 		Authorization: 'Bearer ' + localStorage.access_token,
+// 	}
+})