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