before urpgrade to vue 3
This commit is contained in:
.eslintrcpackage.json
assets
js
App.vueapp.js
components
ProjectsList.vueTheNavbar.vuehandle-logout.vuenavbar.vuenot-found.vue
index.jspages
profile.vueprojects
quotes
sidebar.vueusers
pages
router.jsrouter
stores
styles
src
symfony.locktemplates
webpack.config.jsyarn.lock@ -1,89 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div v-if="isLoading" class="circle">
|
||||
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
|
||||
<span class="sr-only">Loading …</span>
|
||||
</div>
|
||||
<div v-else class="container-fluid">
|
||||
<div class="row">
|
||||
<h2 class="mt-2">This is an overview of my current public (and open source) projects.</h2>
|
||||
<!-- projects List -->
|
||||
<div class="col-sm-12">
|
||||
<b-col v-for="project in projects" :key="project.id">
|
||||
<div class="project-container bg-dark my-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<b-link :to="'/projects/' + project.name">
|
||||
<img v-if="project.teaserImage"
|
||||
class="blog-img"
|
||||
:src="'/uploads/projects/' + project.teaserImage"
|
||||
alt="Teaser">
|
||||
<img v-else
|
||||
class="blog-img"
|
||||
src="/build/images/24unix/24_logo_bg_96x96.png"
|
||||
alt="Teaser">
|
||||
</b-link>
|
||||
<br>
|
||||
<div>
|
||||
<b-col v-for="developer in project.developer" :key="developer">
|
||||
<author :author-iri="developer"></author>
|
||||
</b-col>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-8 mt-2">
|
||||
<b-link to="project.name">
|
||||
<div class="article-title d-inline-block pl-3 align-middle">
|
||||
<h2 v-html="project.name"></h2>
|
||||
</div>
|
||||
</b-link>
|
||||
<br>
|
||||
<div class="blog-teaser mb-2 pb-2 text-xl-start">
|
||||
<span v-html="project.description"></span>
|
||||
<br>
|
||||
<br>
|
||||
started: <span v-html="project.createdAt"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</b-col>
|
||||
</div>
|
||||
<div class="text-xl-start">
|
||||
<b-link to="/add"><i class="fa fa-plus-circle"></i></b-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
import Author from "@/components/Author";
|
||||
|
||||
export default {
|
||||
name: "ProjectsList",
|
||||
data: () => ({
|
||||
projects: null,
|
||||
isLoading: true
|
||||
}),
|
||||
mounted() {
|
||||
this.getProjects();
|
||||
},
|
||||
components: {
|
||||
Author
|
||||
},
|
||||
methods: {
|
||||
getProjects() {
|
||||
axios
|
||||
.get("/api/projects")
|
||||
.then(response => (this.projects = response.data["hydra:member"]));
|
||||
this.isLoading = false;
|
||||
console.log(this.projects);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
100
assets/js/components/TheNavbar.vue
Normal file
100
assets/js/components/TheNavbar.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<b-navbar
|
||||
toggleable="lg"
|
||||
type="dark"
|
||||
variant="dark"
|
||||
fixed="top"
|
||||
>
|
||||
<b-navbar-brand to="/">
|
||||
<img
|
||||
id="site-logo"
|
||||
src="/build/images/24unix/24_logo_bg_96x96.png"
|
||||
alt="24unix.net"
|
||||
>
|
||||
</b-navbar-brand>
|
||||
|
||||
<b-navbar-toggle target="nav-collapse" />
|
||||
|
||||
<b-collapse
|
||||
id="nav-collapse"
|
||||
is-nav
|
||||
>
|
||||
<!--
|
||||
<b-nav-form>
|
||||
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
|
||||
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
-->
|
||||
<!--
|
||||
<b-nav-item-dropdown text="Lang" right>
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
-->
|
||||
<b-navbar-nav class="ml-auto mr-5">
|
||||
<b-button
|
||||
v-if="!isLoggedIn"
|
||||
to="/form_login"
|
||||
>
|
||||
Login
|
||||
</b-button>
|
||||
<b-dropdown
|
||||
v-else
|
||||
id="dropdown"
|
||||
:text="user.username"
|
||||
class="m-md-2"
|
||||
type="dark"
|
||||
>
|
||||
<b-dropdown-item>
|
||||
<b-link
|
||||
:to="{ name: 'Profile' }"
|
||||
class="fa fa-lg fa-fw fa-user"
|
||||
aria-hidden="true"
|
||||
/> Profile
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
<span
|
||||
class="fa fa-lg fa-fw fa-wrench"
|
||||
aria-hidden="true"
|
||||
/> Settings
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-divider />
|
||||
<b-dropdown-item @click="logout">
|
||||
<span
|
||||
class="fa fa-lg fa-fw fa-sign-out"
|
||||
aria-hidden="true"
|
||||
/> Logout
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'TheNavbar',
|
||||
props: ['user'],
|
||||
computed: {
|
||||
isLoggedIn() {
|
||||
return !!this.user;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
console.log('logout');
|
||||
axios
|
||||
.get('/logout')
|
||||
.then(this.$emit('invalidate-user'));
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -5,8 +5,6 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'HandleLogout'
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<b-navbar toggleable="lg" type="dark" variant="dark" fixed="top">
|
||||
<b-navbar-brand to="/">
|
||||
<img src="/build/images/24unix/24_logo_bg_96x96.png" alt="24unix.net" id="site-logo">
|
||||
</b-navbar-brand>
|
||||
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
|
||||
<b-collapse id="nav-collapse" is-nav>
|
||||
|
||||
<!--
|
||||
<b-nav-form>
|
||||
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
|
||||
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
|
||||
</b-nav-form>
|
||||
-->
|
||||
<!--
|
||||
<b-nav-item-dropdown text="Lang" right>
|
||||
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||
</b-nav-item-dropdown>
|
||||
-->
|
||||
<b-navbar-nav class="ml-auto mr-5">
|
||||
<b-button v-if="!isLoggedIn" to="/form_login">Login</b-button>
|
||||
<b-dropdown v-else id="dropdown" :text="user.username" class="m-md-2" type="dark">
|
||||
<b-dropdown-item to="/profile">
|
||||
<span class="fa fa-lg fa-fw fa-user" aria-hidden="true"></span> Profile
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
<span class="fa fa-lg fa-fw fa-wrench" aria-hidden="true"></span> Settings
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-divider></b-dropdown-divider>
|
||||
<b-dropdown-item @click="logout">
|
||||
<span class="fa fa-lg fa-fw fa-sign-out" aria-hidden="true"></span> Logout
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Navbar",
|
||||
props: ["user"],
|
||||
computed: {
|
||||
isLoggedIn() {
|
||||
return !!this.user;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
console.log("logout");
|
||||
axios
|
||||
.get("/logout")
|
||||
.then(this.$emit("invalidate-user"));
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
Profile
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Profile'
|
||||
}
|
||||
</script>
|
||||
105
assets/js/components/projects/details.vue
Normal file
105
assets/js/components/projects/details.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="circle"
|
||||
>
|
||||
<i class="fa fa-spinner fa-spin fa-3x fa-fw" />
|
||||
<span class="sr-only">Loading …</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="row"
|
||||
>
|
||||
<div class="col-sm-12">
|
||||
<!-- {% if is_granted('ROLE_ADMIN') %}
|
||||
<div class="d-flex justify-content-end">
|
||||
<a :to="id"><i class="fa fa-3x fa-fw fa-edit"></i></a>
|
||||
<a :to="project.id"><i class="fa fa-3x fa-fw fa-trash"></i></a>
|
||||
</div>
|
||||
{% endif %}-->
|
||||
|
||||
<div class="show-article-container p-3 mt-4">
|
||||
<div class="show-article-title-container d-inline-block pl-3 align-middle">
|
||||
<h2>{{ project.name }}</h2>
|
||||
</div>
|
||||
<div>
|
||||
Source: <b-link
|
||||
:to="project.url"
|
||||
target="_blank"
|
||||
>
|
||||
{{ project.url }}
|
||||
</b-link> 
|
||||
<i
|
||||
class="fa fa-external-link"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col-sm-12">
|
||||
<div
|
||||
class="article-text"
|
||||
v-html="readmeToHtml"
|
||||
>
|
||||
{{ }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from 'axios'
|
||||
import { marked } from 'marked';
|
||||
import Author from '@/components/users/UserCard'
|
||||
|
||||
export default {
|
||||
Name: 'ProjectDetails',
|
||||
components: {
|
||||
Author,
|
||||
marked
|
||||
},
|
||||
data: () => ({
|
||||
project: null,
|
||||
readme: null,
|
||||
isLoading: true
|
||||
}),
|
||||
computed: {
|
||||
readmeToHtml() {
|
||||
if (!this.isLoading) {
|
||||
return marked(this.readme)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const { id } = this.$route.params
|
||||
console.log(id)
|
||||
axios
|
||||
.get(`/api/projects/${id}`)
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.project = response.data
|
||||
console.log(this.project);
|
||||
axios
|
||||
.get(`${this.project.url}/raw/branch/master/README.md`)
|
||||
.then((response) => {
|
||||
this.readme = response.data
|
||||
this.isLoading = false;
|
||||
console.log(response)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getProjects() {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
105
assets/js/components/projects/index.vue
Normal file
105
assets/js/components/projects/index.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="circle"
|
||||
>
|
||||
<i class="fa fa-spinner fa-spin fa-3x fa-fw" />
|
||||
<span class="sr-only">Loading …</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="container-fluid"
|
||||
>
|
||||
<div class="row">
|
||||
<h2 class="mt-2">
|
||||
This is an overview of my current public (and open source) projects.
|
||||
</h2>
|
||||
<!-- projects List -->
|
||||
<div class="col-sm-12">
|
||||
<b-col
|
||||
v-for="project in projects"
|
||||
:key="project.id"
|
||||
>
|
||||
<div class="project-container bg-dark my-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<b-link :to="'/projects/' + project.id">
|
||||
<img
|
||||
v-if="project.teaserImage"
|
||||
class="blog-img"
|
||||
:src="'/uploads/projects/' + project.teaserImage"
|
||||
alt="Teaser"
|
||||
>
|
||||
<img
|
||||
v-else
|
||||
class="blog-img"
|
||||
src="/build/images/24unix/24_logo_bg_96x96.png"
|
||||
alt="Teaser"
|
||||
>
|
||||
</b-link>
|
||||
<br>
|
||||
<div>
|
||||
<b-col
|
||||
v-for="developer in project.developer"
|
||||
:key="developer"
|
||||
>
|
||||
<author :author-iri="developer" />
|
||||
</b-col>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 mt-2">
|
||||
<b-link :to="'/projects/' + project.id">
|
||||
<div class="article-title d-inline-block pl-3 align-middle">
|
||||
<h2 v-html="project.name" />
|
||||
</div>
|
||||
</b-link>
|
||||
<br>
|
||||
<div class="blog-teaser mb-2 pb-2 text-xl-start">
|
||||
<span v-html="project.description" />
|
||||
<br>
|
||||
<br>
|
||||
started: <span v-html="project.createdAt" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-col>
|
||||
</div>
|
||||
<div class="text-xl-start">
|
||||
<b-link to="/add">
|
||||
<i class="fa fa-plus-circle" />
|
||||
</b-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
import Author from '@/components/users/UserCard';
|
||||
|
||||
export default {
|
||||
name: 'ProjectsList',
|
||||
components: {
|
||||
Author
|
||||
},
|
||||
data: () => ({
|
||||
projects: null,
|
||||
isLoading: true
|
||||
}),
|
||||
mounted() {
|
||||
this.getProjects();
|
||||
},
|
||||
methods: {
|
||||
getProjects() {
|
||||
axios
|
||||
.get('/api/projects')
|
||||
.then((response) => (this.projects = response.data['hydra:member']));
|
||||
this.isLoading = false;
|
||||
console.log(this.projects);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -11,10 +11,17 @@
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-lg fa-fw fa-nextcloud" aria-hidden="true"></i>
|
||||
<a href="//cloud.24unix.net" target="_blank">NextCloud</a> <i class="fa fa-external-link" aria-hidden="true"></i>
|
||||
<b-link href="//cloud.24unix.net" target="_blank">NextCloud</b-link> <i class="fa fa-external-link" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-lg fa-fw fa-paste" aria-hidden="true"></i>
|
||||
<b-link href="//pastebin.24unix.net" target="_blank">Pastebin</b-link> <i class="fa fa-external-link" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa fa-lg fa-fw fa-link" aria-hidden="true"></i>
|
||||
<b-link href="//y.24unix.net" target="_blank">YOURLS</b-link> <i class="fa fa-external-link" aria-hidden="true"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <a href="//pastebin.24unix.net">pastebin.24unix.net</a>-->
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
86
assets/js/components/users/ProfileView.vue
Normal file
86
assets/js/components/users/ProfileView.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="circle"
|
||||
>
|
||||
<i class="fa fa-spinner fa-spin fa-3x fa-fw"/>
|
||||
<span class="sr-only">Loading …</span>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="container box rounded bg-dark mt-5 mb-5"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="d-flex flex-column align-items-center text-center p-3 py-5">
|
||||
Profile of {{ user.username }}
|
||||
<img
|
||||
class="rounded-circle mt-5"
|
||||
width="150px"
|
||||
src="/build/images/tracer_schmolle.png"
|
||||
alt="profile image"
|
||||
>
|
||||
<span class="font-weight-bold">{{ user.username }}</span>
|
||||
<!--<span class="font-weight-bold"><a
|
||||
href="{{ path('app_main', { '_switch_user': app.user.username }) }}">switch user {{
|
||||
user.username
|
||||
}}</span>
|
||||
-->
|
||||
<span class="text-white-50">
|
||||
<i class="fa fa-lg fa-envelope me-1"/>{{ user.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="p-3 py-5">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 class="text-right">
|
||||
User Projects …
|
||||
</h4>
|
||||
</div>
|
||||
<div class="row mt-2"/>
|
||||
|
||||
<!--
|
||||
<div class="mt-5 text-center">
|
||||
<button class="btn btn-primary profile-button" type="button">Save Profile</button>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'ProfileView',
|
||||
data: () => ({
|
||||
user: null,
|
||||
isLoading: true
|
||||
}),
|
||||
computed: {
|
||||
getUserEndpoint() {
|
||||
if (this.$route.params.username) {
|
||||
return `/api/users?username=${this.$route.params.username}`;
|
||||
}
|
||||
return '/api/users?username=tracer';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios
|
||||
.get(this.getUserEndpoint)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
[this.user] = response.data['hydra:member'];
|
||||
|
||||
console.log(this.user);
|
||||
this.isLoading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -3,7 +3,7 @@
|
||||
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
|
||||
<span class="sr-only">Loading …</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-else class="mt-1 mb-1">
|
||||
<b-link class="align-left blog-details" :to="'/profile/' + author.username">
|
||||
<img class="article-author-img rounded-circle"
|
||||
:src="'build/images/' + author.avatar"
|
||||
Reference in New Issue
Block a user