Raymonzut
4 years ago
parent
1904301eae
commit
ec8bc54437
14 changed files with 0 additions and 451 deletions
@ -1,87 +0,0 @@ |
|||||||
<template> |
|
||||||
<div id="app" :class="theme"> |
|
||||||
<div id="nav"> |
|
||||||
<router-link to="/">Home</router-link> | |
|
||||||
<router-link to="/posts">Posts</router-link> | |
|
||||||
<router-link to="/qa">QA</router-link> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<button id="toggleThemeButton" @click="toggleTheme">{{ themeToggleVerb }} my eyes</button> |
|
||||||
</div> |
|
||||||
<router-view /> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
data() { |
|
||||||
return { |
|
||||||
theme: 'dark' |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
themeToggleVerb: function() { |
|
||||||
return this.theme === 'light' ? "Save" : "Hurt" |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
toggleTheme() { |
|
||||||
const themes = ['light', 'dark'] |
|
||||||
this.theme = themes[(themes.indexOf(this.theme) + 1) % themes.length] |
|
||||||
} |
|
||||||
}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
|
|
||||||
.light { |
|
||||||
--primary-color: #ffffeb; |
|
||||||
--text-color: #272736; |
|
||||||
} |
|
||||||
|
|
||||||
.dark { |
|
||||||
--primary-color: #272736; |
|
||||||
--text-color: #ffffeb; |
|
||||||
} |
|
||||||
|
|
||||||
.dark a { |
|
||||||
color: #7e7e8f; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
background-color: var(--primary-color); |
|
||||||
} |
|
||||||
|
|
||||||
#app { |
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
text-align: center; |
|
||||||
color: var(--text-color); |
|
||||||
padding-top: 60px; |
|
||||||
background-color: var(--primary-color); |
|
||||||
min-height: 100vh; |
|
||||||
} |
|
||||||
|
|
||||||
#toggleThemeButton { |
|
||||||
background: var(--primary-color); |
|
||||||
border: 0px; |
|
||||||
color: var(--text-color); |
|
||||||
margin: 0 auto; |
|
||||||
|
|
||||||
margin-right: 0px; |
|
||||||
} |
|
||||||
|
|
||||||
@media (min-width:420px) { |
|
||||||
#toggleThemeButton { |
|
||||||
float:right; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,40 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h2>Who am I?</h2> |
|
||||||
<p> |
|
||||||
Hi there, good to see you on my website. |
|
||||||
My name is Raymon Zutekouw({{ age }}). |
|
||||||
</p> |
|
||||||
|
|
||||||
<p> |
|
||||||
Building software and exploring the wide variety of tools (or making them) is my passion. |
|
||||||
To see it in action, checkout the stuff I make on |
|
||||||
<a href='https://github.com/Raymonzut'>GitHub</a>. |
|
||||||
</p> |
|
||||||
|
|
||||||
<p> |
|
||||||
The projects that may be useful to others are open source; for inspiring others and improving each others work. |
|
||||||
That is why I am a huge fan of |
|
||||||
<a href='https://www.gnu.org/philosophy/free-sw.en.html'>free software</a>. |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import me from '../me.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'AboutMe', |
|
||||||
computed: { |
|
||||||
age: me.age |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
p { |
|
||||||
--margin-side: 12vw; |
|
||||||
margin-left: var(--margin-side); |
|
||||||
margin-right: var(--margin-side); |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
{{ a }} |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: 'Answer', |
|
||||||
props: { |
|
||||||
a: { |
|
||||||
type: String, |
|
||||||
required: true, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
@ -1,38 +0,0 @@ |
|||||||
<template> |
|
||||||
<div id='qa'> |
|
||||||
<Question :q='q'></Question> |
|
||||||
<Answer :a='a'></Answer> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Question from './Question.vue' |
|
||||||
import Answer from './Answer.vue' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'QA', |
|
||||||
components: { |
|
||||||
Question, |
|
||||||
Answer, |
|
||||||
}, |
|
||||||
props: { |
|
||||||
q: { |
|
||||||
type: String, |
|
||||||
required: true, |
|
||||||
}, |
|
||||||
a: { |
|
||||||
type: String, |
|
||||||
required: true, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
#qa { |
|
||||||
--block-spacing: 7.5em; |
|
||||||
|
|
||||||
margin-top: var(--block-spacing); |
|
||||||
margin-bottom: var(--block-spacing); |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,27 +0,0 @@ |
|||||||
<template> |
|
||||||
<div id='question_box'> |
|
||||||
{{ q }} |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: 'Question', |
|
||||||
props: { |
|
||||||
q: { |
|
||||||
type: String, |
|
||||||
required: true, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
#question_box { |
|
||||||
--text-spacing: 0.75em; |
|
||||||
|
|
||||||
font-style: italic; |
|
||||||
margin-top: var(--text-spacing); |
|
||||||
margin-bottom: var(--text-spacing); |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import VueResource from 'vue-resource' |
|
||||||
|
|
||||||
import App from './App.vue' |
|
||||||
import router from './router' |
|
||||||
|
|
||||||
Vue.config.productionTip = false |
|
||||||
|
|
||||||
Vue.use(VueResource) |
|
||||||
|
|
||||||
new Vue({ |
|
||||||
render: h => h(App), |
|
||||||
router, |
|
||||||
}).$mount('#app') |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
module.exports = { |
|
||||||
getPosts: function(id) { |
|
||||||
const BASE_URL = '/api/posts' |
|
||||||
const URL = BASE_URL + (id ? `/${id}` : '?sort=-1') |
|
||||||
|
|
||||||
this.$http |
|
||||||
.get(URL) |
|
||||||
.then(res => { |
|
||||||
if (id) { |
|
||||||
if (res.body.length === 0) { |
|
||||||
throw Error("Response body empty") |
|
||||||
} |
|
||||||
this.post = res.body |
|
||||||
} |
|
||||||
else { |
|
||||||
this.posts = res.body |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch(err => { |
|
||||||
console.log(`Error: ${err}`) |
|
||||||
}) |
|
||||||
}, |
|
||||||
} |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import VueRouter from 'vue-router' |
|
||||||
import Home from '../views/Home.vue' |
|
||||||
import Posts from '../views/Posts.vue' |
|
||||||
import Post from '../views/Post.vue' |
|
||||||
import QAPage from '../views/QAPage' |
|
||||||
|
|
||||||
Vue.use(VueRouter) |
|
||||||
|
|
||||||
const routes = [ |
|
||||||
{ |
|
||||||
path: "/", |
|
||||||
name: "Home", |
|
||||||
component: Home, |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: "/posts", |
|
||||||
name: "Posts", |
|
||||||
component: Posts, |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: "/posts/:id", |
|
||||||
name: "Post", |
|
||||||
component: Post, |
|
||||||
props: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: "/qa", |
|
||||||
name: "QA", |
|
||||||
component: QAPage |
|
||||||
}, |
|
||||||
] |
|
||||||
|
|
||||||
const exclude_routes = [ |
|
||||||
{ |
|
||||||
path: "/api" |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
const router = new VueRouter({ |
|
||||||
mode: "history", |
|
||||||
base: process.env.BASE_URL, |
|
||||||
routes: routes.concat(exclude_routes), |
|
||||||
}) |
|
||||||
|
|
||||||
export default router |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
<template> |
|
||||||
<div id="home"> |
|
||||||
<h1>Home</h1> |
|
||||||
<AboutMe></AboutMe> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import AboutMe from '@/components/AboutMe' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "Home", |
|
||||||
components: { |
|
||||||
AboutMe |
|
||||||
}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped></style> |
|
||||||
@ -1,45 +0,0 @@ |
|||||||
<template> |
|
||||||
<div id="Post"> |
|
||||||
<div v-if="Object.keys(post).length"> |
|
||||||
<h1>{{ post.title }}</h1> |
|
||||||
<h5>Written on {{ post.date.substring(0,10)}}</h5> |
|
||||||
|
|
||||||
<p v-for="(p, i) in post.content.split('\n')" :key="i">{{ p }}</p> |
|
||||||
</div> |
|
||||||
<h2 v-else>Waiting for post</h2> |
|
||||||
<br> |
|
||||||
Read other <a href="/posts">posts</a> |
|
||||||
<br> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { getPosts } from '../remote' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "Post", |
|
||||||
data() { |
|
||||||
return { |
|
||||||
post: {}, |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getPosts |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
getPosts.call(this, this._props.id) |
|
||||||
}, |
|
||||||
props: { |
|
||||||
id: { |
|
||||||
type: String, |
|
||||||
name: "id", |
|
||||||
validator: val => { |
|
||||||
const reg = /([0-9]|[a-f]){24}/ |
|
||||||
return reg.test(val) |
|
||||||
}, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped></style> |
|
||||||
@ -1,68 +0,0 @@ |
|||||||
<template> |
|
||||||
<div id="posts" v-if="months.length >= 0"> |
|
||||||
<h3 class="month" v-for="(month, i) in months" :key="i"> |
|
||||||
{{ month }} |
|
||||||
<div> |
|
||||||
<ul> |
|
||||||
<li v-for="(postItem, j) in getPostItems(month)" :key="j"> |
|
||||||
{{ getPostItemDate(postItem) }} – |
|
||||||
<a :href="/posts/ + postItem._id">{{ postItem.title }}</a> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
<br> |
|
||||||
</h3> |
|
||||||
</div> |
|
||||||
<h2 v-else>There are no posts yet, but don't worry they will be added soon</h2> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { getPosts } from '../remote' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "Posts", |
|
||||||
computed: { |
|
||||||
months: function () { |
|
||||||
const dates = this.posts.map(post => new Date(post.date)) |
|
||||||
|
|
||||||
// Contains the month followed by the year |
|
||||||
const months = dates.map(date => `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`) |
|
||||||
const uniques = Array.from(new Set(months)) |
|
||||||
|
|
||||||
return uniques |
|
||||||
} |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
posts: [] |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getPosts, |
|
||||||
getPostItems: function (month) { |
|
||||||
const month_index = new Date(`1 ${month}`).getMonth() |
|
||||||
return this.posts.filter((post) => (new Date(post.date)).getMonth() === month_index) |
|
||||||
}, |
|
||||||
getPostItemDate: function (postItem) { |
|
||||||
const date = new Date(postItem.date) |
|
||||||
return `${date.getFullYear()} ${date.toLocaleString('default', { month: 'short' })} ${date.getDate()}` |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
getPosts.call(this) |
|
||||||
}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
ul { |
|
||||||
text-align: left; |
|
||||||
} |
|
||||||
|
|
||||||
@media (min-width: 420px) { |
|
||||||
.month { |
|
||||||
text-indent: 1em; |
|
||||||
text-align: left; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
<template> |
|
||||||
<div id="QAPage"> |
|
||||||
<QA |
|
||||||
q="What is this site about? " |
|
||||||
a="This site is about me and the stuff I make " |
|
||||||
></QA> |
|
||||||
|
|
||||||
<QA |
|
||||||
q="Why is it still so empty?" |
|
||||||
a="Because I am framework hopping " |
|
||||||
></QA> |
|
||||||
</div> |
|
||||||
|
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import QA from '@/components/QA' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "QAPAge", |
|
||||||
components: { QA } |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped></style> |
|
||||||
Loading…
Reference in new issue