Remove vue remnants
This commit is contained in:
Raymonzut
@@ -7,7 +7,6 @@ events {
|
||||
}
|
||||
http {
|
||||
include /etc/nginx/mime.types;
|
||||
default_type application/octet-stream;
|
||||
types {
|
||||
application/javascript mjs;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Binary file not shown.
|
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>
|
||||
Reference in New Issue
Block a user