before urpgrade to vue 3
This commit is contained in:
parent
b60c4ffd74
commit
1b4ca82754
48
.eslintrc
Normal file
48
.eslintrc
Normal file
@ -0,0 +1,48 @@
|
||||
{
|
||||
"extends": [
|
||||
// add more generic rulesets here, such as:
|
||||
"eslint:recommended",
|
||||
"airbnb-base",
|
||||
"plugin:vue/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 9,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"env": {
|
||||
"es6": true,
|
||||
"browser": true
|
||||
},
|
||||
"rules": {
|
||||
"semi": "off",
|
||||
"vue/html-indent": [
|
||||
"error",
|
||||
"tab"
|
||||
],
|
||||
"vue/html-closing-bracket-spacing": ["error", {
|
||||
"startTag": "never",
|
||||
"endTag": "never",
|
||||
"selfClosingTag": "never"
|
||||
}],
|
||||
"indent": [
|
||||
"error",
|
||||
"tab"
|
||||
],
|
||||
"no-tabs": "off",
|
||||
"comma-dangle": "off",
|
||||
"no-alert": 0,
|
||||
"no-unused-vars": "warn",
|
||||
"spaced-comment": "off",
|
||||
"no-param-reassign": 0,
|
||||
"import/extensions": 0,
|
||||
"import/no-unresolved": 0,
|
||||
"import/prefer-default-export": 0,
|
||||
"import/no-extraneous-dependencies": [
|
||||
"error",
|
||||
{
|
||||
// allow devDependencies for packages
|
||||
"devDependencies": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
75
assets/js/App.vue
Normal file
75
assets/js/App.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<nav-bar
|
||||
:user="user"
|
||||
@invalidate-user="onInvalidateUser"
|
||||
/>
|
||||
|
||||
<b-container
|
||||
fluid
|
||||
class="mt-5 main-content"
|
||||
>
|
||||
<b-row>
|
||||
<div class="col-2">
|
||||
<sidebar/>
|
||||
</div>
|
||||
<div class="col-9 box">
|
||||
<router-view
|
||||
:quote="quote"
|
||||
@user-authenticated="onUserAuthenticated"
|
||||
/>
|
||||
</div>
|
||||
<div class="col mt-2"/>
|
||||
</b-row>
|
||||
</b-container>
|
||||
|
||||
<footer-component/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
import NavBar from '@/components/TheNavbar';
|
||||
import Sidebar from '@/components/sidebar';
|
||||
import FooterComponent from '@/components/footer';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Sidebar,
|
||||
NavBar,
|
||||
FooterComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
quote: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (window.user) {
|
||||
this.user = window.user;
|
||||
console.log(this.user);
|
||||
}
|
||||
if (window.quote) {
|
||||
this.quote = window.quote;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onUserAuthenticated(userUri) {
|
||||
console.log('authenticated');
|
||||
axios
|
||||
.get(userUri)
|
||||
.then((response) => {
|
||||
this.user = response.data;
|
||||
});
|
||||
this.$router.push('/');
|
||||
},
|
||||
onInvalidateUser() {
|
||||
console.log('invalidated');
|
||||
this.user = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,60 +0,0 @@
|
||||
// assets/js/app.js
|
||||
|
||||
globalThis.__VUE_OPTIONS_API__ = true;
|
||||
globalThis.__VUE_PROD_DEVTOOLS__ = true;
|
||||
|
||||
// Matomo
|
||||
let _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(["trackPageView"]);
|
||||
_paq.push(["enableLinkTracking"]);
|
||||
(function () {
|
||||
const u = "https://analytics.24unix.net/";
|
||||
_paq.push(["setTrackerUrl", u + "matomo.php"]);
|
||||
_paq.push(["setSiteId", "1"]);
|
||||
const d = document, g = d.createElement("script"), s = d.getElementsByTagName("script")[0];
|
||||
g.async = true;
|
||||
g.src = u + "matomo.js";
|
||||
s.parentNode.insertBefore(g, s);
|
||||
})();
|
||||
// End Matomo Code
|
||||
|
||||
|
||||
import "../styles/app.scss";
|
||||
|
||||
require("fork-awesome/scss/fork-awesome.scss");
|
||||
|
||||
/*
|
||||
require('@fortawesome/fontawesome-free/css/all.min.css');
|
||||
require('@fortawesome/fontawesome-free/js/all.js');
|
||||
*/
|
||||
|
||||
// CKEditor
|
||||
//require '@'
|
||||
import "../styles/ckeditor.css"
|
||||
|
||||
|
||||
import Vue from "vue"
|
||||
import { BootstrapVue, IconsPlugin, NavbarPlugin } from "bootstrap-vue"
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
import router from '@/router'
|
||||
import MainPage from "@/pages/main"
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
Vue.use(VueRouter)
|
||||
Vue.use(IconsPlugin)
|
||||
Vue.use(NavbarPlugin)
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: (h) => h(MainPage)
|
||||
})
|
||||
.$mount("#app")
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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"
|
||||
63
assets/js/index.js
Normal file
63
assets/js/index.js
Normal file
@ -0,0 +1,63 @@
|
||||
// assets/js/index.js
|
||||
|
||||
// End Matomo Code
|
||||
|
||||
import '../styles/app.scss';
|
||||
|
||||
/*
|
||||
require('@fortawesome/fontawesome-free/css/all.min.css');
|
||||
require('@fortawesome/fontawesome-free/js/all.js');
|
||||
*/
|
||||
|
||||
// CKEditor
|
||||
//require '@'
|
||||
import '../styles/ckeditor.css';
|
||||
|
||||
import Vue from 'vue';
|
||||
import { BootstrapVue, IconsPlugin, NavbarPlugin } from 'bootstrap-vue';
|
||||
import VueRouter from 'vue-router';
|
||||
|
||||
import { createPinia, PiniaVuePlugin } from 'pinia';
|
||||
import router from '@/router';
|
||||
import App from '@/App';
|
||||
|
||||
//globalThis.__VUE_OPTIONS_API__ = true;
|
||||
//globalThis.__VUE_PROD_DEVTOOLS__ = true;
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
// Matomo
|
||||
const _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function () {
|
||||
const u = 'https://analytics.24unix.net/';
|
||||
_paq.push(['setTrackerUrl', `${u}matomo.php`]);
|
||||
_paq.push(['setSiteId', '1']);
|
||||
const d = document; const g = d.createElement('script'); const
|
||||
s = d.getElementsByTagName('script')[0];
|
||||
g.async = true;
|
||||
g.src = `${u}matomo.js`;
|
||||
s.parentNode.insertBefore(g, s);
|
||||
}());
|
||||
|
||||
/* eslint-enable */
|
||||
|
||||
require('fork-awesome/scss/fork-awesome.scss');
|
||||
|
||||
Vue.use(BootstrapVue);
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(IconsPlugin);
|
||||
Vue.use(NavbarPlugin);
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.use(PiniaVuePlugin);
|
||||
const pinia = createPinia();
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
pinia,
|
||||
render: (h) => h(App)
|
||||
})
|
||||
.$mount('#app');
|
||||
@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<nav-bar :user="user" v-on:invalidate-user="onInvalidateUser"></nav-bar>
|
||||
|
||||
<b-container fluid class="mt-5 main-content">
|
||||
<b-row>
|
||||
<div class="col-2">
|
||||
<sidebar></sidebar>
|
||||
</div>
|
||||
<div class="col-9 box">
|
||||
<router-view v-on:user-authenticated="onUserAuthenticated" :quote="quote"></router-view>
|
||||
</div>
|
||||
<div class="col mt-2">
|
||||
</div>
|
||||
</b-row>
|
||||
</b-container>
|
||||
|
||||
<footer-component></footer-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
import NavBar from '@/components/navbar'
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import FooterComponent from '@/components/footer'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Main',
|
||||
components: {
|
||||
Sidebar,
|
||||
NavBar,
|
||||
FooterComponent
|
||||
},
|
||||
methods: {
|
||||
onUserAuthenticated(userUri) {
|
||||
console.log("authenticated")
|
||||
axios
|
||||
.get(userUri)
|
||||
.then(response => (this.user = response.data))
|
||||
this.$router.push('/')
|
||||
},
|
||||
onInvalidateUser() {
|
||||
console.log("invalidated")
|
||||
this.user = null;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
quote: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (window.user) {
|
||||
this.user = window.user
|
||||
}
|
||||
if (window.quote) {
|
||||
this.quote = window.quote
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,44 +0,0 @@
|
||||
import Router from 'vue-router'
|
||||
import LoginForm from '@/components/login'
|
||||
import Quotes from "@/components/quotes";
|
||||
import Pages from "@/components/pages";
|
||||
import PagesEdit from "@/components/PagesEdit";
|
||||
import ProjectsList from "@/components/ProjectsList";
|
||||
import Profile from "@/components/profile";
|
||||
import NotFound from "@/components/NotFound"
|
||||
|
||||
export default new Router({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Quotes
|
||||
},
|
||||
{
|
||||
path: '/form_login',
|
||||
name: 'LoginForm',
|
||||
component: LoginForm,
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
component: ProjectsList
|
||||
},
|
||||
{
|
||||
path: '/pages/:slug',
|
||||
component: Pages
|
||||
},
|
||||
{
|
||||
path: '/pages/edit/:slug',
|
||||
component: PagesEdit
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
component: Profile
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
component: NotFound
|
||||
}
|
||||
]
|
||||
})
|
||||
55
assets/js/router/index.js
Normal file
55
assets/js/router/index.js
Normal file
@ -0,0 +1,55 @@
|
||||
import Router from 'vue-router';
|
||||
import LoginForm from '@/components/login';
|
||||
import Quotes from '@/components/quotes';
|
||||
import Pages from '@/components/pages';
|
||||
import PagesEdit from '@/components/pages/edit';
|
||||
import ProjectsList from '@/components/projects';
|
||||
import ProjectsDetails from '@/components/projects/details';
|
||||
import ProfileView from '@/components/users/ProfileView';
|
||||
import NotFound from '@/components/not-found';
|
||||
|
||||
export default new Router({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Quotes
|
||||
},
|
||||
{
|
||||
path: '/form_login',
|
||||
name: 'LoginForm',
|
||||
component: LoginForm
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
name: 'Projects',
|
||||
component: ProjectsList
|
||||
},
|
||||
{
|
||||
path: '/projects/:id',
|
||||
name: 'ProjectDetails',
|
||||
component: ProjectsDetails
|
||||
},
|
||||
{
|
||||
path: '/pages/:slug',
|
||||
name: 'Pages',
|
||||
component: Pages
|
||||
},
|
||||
{
|
||||
path: '/pages/edit/:slug',
|
||||
component: PagesEdit,
|
||||
meta: { requiredAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/profile/:username?',
|
||||
name: 'Profile',
|
||||
component: ProfileView
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
name: 'NotFound',
|
||||
component: NotFound
|
||||
}
|
||||
]
|
||||
});
|
||||
13
assets/js/stores/QuotesStore.js
Normal file
13
assets/js/stores/QuotesStore.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import axios from 'axios';
|
||||
|
||||
export const useQuotesStore = defineStore('QuotesStore', {
|
||||
state: () => ({
|
||||
quotes: []
|
||||
}),
|
||||
actions: {
|
||||
async fill() {
|
||||
this.quotes = (await axios.get('api/quotes')).data;
|
||||
}
|
||||
}
|
||||
});
|
||||
8
assets/js/stores/UserStore.js
Normal file
8
assets/js/stores/UserStore.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useUserStore = defineStore('UsersStore', {
|
||||
state: () => {
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
@ -88,6 +88,10 @@ body {
|
||||
margin-left: 3em;
|
||||
}
|
||||
|
||||
.sidenav-left ul {
|
||||
list-style-type: none;
|
||||
line-height: 2.1;
|
||||
}
|
||||
.sidenav-right {
|
||||
padding-top: 20px;
|
||||
background-color: #f1f1f1;
|
||||
|
||||
@ -23,13 +23,21 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.1.1",
|
||||
"@vue/composition-api": "^1.6.0",
|
||||
"axios": "^0.27.1",
|
||||
"bootstrap": "4.6",
|
||||
"bootstrap-vue": "^2.22.0",
|
||||
"ckeditor": "^4.12.1",
|
||||
"ckeditor4": "^4.18.0",
|
||||
"eslint": "^8.14.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-vue": "^8.7.1",
|
||||
"fork-awesome": "^1.2.0",
|
||||
"husky": "^7.0.4",
|
||||
"less": "^4.1.2",
|
||||
"marked": "^4.0.15",
|
||||
"pinia": "^2.0.14",
|
||||
"popper.js": "^1.16.1",
|
||||
"vue": "^2.5",
|
||||
"vue-router": "3",
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<?php
|
||||
|
||||
// src/Controller/FrontendController.php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Controller;
|
||||
|
||||
use App\Repository\QuotesRepository;
|
||||
|
||||
@ -22,6 +22,8 @@ use Symfony\Component\Security\Core\User\UserInterface;
|
||||
itemOperations : ['get'],
|
||||
attributes : ['security' => 'is_granted("ROLE_USER")']
|
||||
)]
|
||||
#[ApiFilter(filterClass: SearchFilter::class, properties: ['username' => 'exact'])]
|
||||
|
||||
class User implements UserInterface, PasswordAuthenticatedUserInterface
|
||||
{
|
||||
#[ORM\Id]
|
||||
|
||||
@ -564,7 +564,7 @@
|
||||
"ref": "2858aeed7e1d81a45365c049eb533cc8827e380b"
|
||||
},
|
||||
"files": [
|
||||
"assets/app.js",
|
||||
"assets/index.js",
|
||||
"assets/bootstrap.js",
|
||||
"assets/controllers.json",
|
||||
"assets/controllers/counter_controller.js",
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}Spookie{% endblock %}</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
const Encore = require('@symfony/webpack-encore');
|
||||
const path = require("path");
|
||||
const path = require('path');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin')
|
||||
|
||||
if (!Encore.isRuntimeEnvironmentConfigured()) {
|
||||
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
|
||||
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
|
||||
}
|
||||
|
||||
Encore
|
||||
.setOutputPath('public/build/')
|
||||
.setOutputPath('public/build/')
|
||||
.setPublicPath('/build')
|
||||
.copyFiles({
|
||||
from: "./assets/images",
|
||||
to: "images/[path][name].[ext]"
|
||||
from: './assets/images',
|
||||
to: 'images/[path][name].[ext]'
|
||||
})
|
||||
/*
|
||||
.copyFiles([
|
||||
@ -23,30 +23,29 @@ Encore
|
||||
{from: './node_modules/ckeditor4/vendor', to: 'ckeditor/vendor/[path][name].[ext]'}
|
||||
])
|
||||
*/
|
||||
|
||||
|
||||
.addEntry('app', './assets/js/app.js')
|
||||
.splitEntryChunks()
|
||||
.addEntry('app', './assets/js/index.js')
|
||||
.splitEntryChunks()
|
||||
|
||||
// will require an extra script tag for runtime.js
|
||||
// but, you probably want this, unless you're building a single-page app
|
||||
.enableSingleRuntimeChunk()
|
||||
// will require an extra script tag for runtime.js
|
||||
// but, you probably want this, unless you're building a single-page app
|
||||
.enableSingleRuntimeChunk()
|
||||
|
||||
.cleanupOutputBeforeBuild()
|
||||
.enableBuildNotifications()
|
||||
.enableSourceMaps(!Encore.isProduction())
|
||||
.enableVersioning(Encore.isProduction())
|
||||
.cleanupOutputBeforeBuild()
|
||||
.enableBuildNotifications()
|
||||
.enableSourceMaps(!Encore.isProduction())
|
||||
.enableVersioning(Encore.isProduction())
|
||||
|
||||
.configureBabel((config) => {
|
||||
config.plugins.push('@babel/plugin-proposal-class-properties');
|
||||
})
|
||||
.configureBabel((config) => {
|
||||
config.plugins.push('@babel/plugin-proposal-class-properties');
|
||||
})
|
||||
|
||||
// enables @babel/preset-env polyfills
|
||||
.configureBabelPresetEnv((config) => {
|
||||
config.useBuiltIns = 'usage';
|
||||
config.corejs = 3;
|
||||
})
|
||||
|
||||
// enables @babel/preset-env polyfills
|
||||
.configureBabelPresetEnv((config) => {
|
||||
config.useBuiltIns = 'usage';
|
||||
config.corejs = 3;
|
||||
})
|
||||
|
||||
.addAliases({
|
||||
'@': path.resolve(__dirname, 'assets', 'js'),
|
||||
styles: path.resolve(__dirname, 'assets', 'styles'),
|
||||
@ -54,7 +53,5 @@ Encore
|
||||
.enableSassLoader()
|
||||
.enableVueLoader()
|
||||
|
||||
.autoProvidejQuery()
|
||||
;
|
||||
|
||||
.autoProvidejQuery();
|
||||
module.exports = Encore.getWebpackConfig();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user