diff --git a/.eslintrc b/.eslintrc
index 25bb03b..e4d7e93 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,10 +3,12 @@
// add more generic rulesets here, such as:
"eslint:recommended",
"airbnb-base",
- "plugin:vue/recommended"
+ "plugin:vue/recommended",
+ "plugin:vue/vue3-recommended"
],
"parserOptions": {
- "ecmaVersion": 9,
+ "parser": "espree",
+ "ecmaVersion": 2022,
"sourceType": "module"
},
"env": {
@@ -47,7 +49,7 @@
"no-tabs": "off",
"comma-dangle": "off",
"no-alert": 0,
- "no-unused-vars": "warn",
+ "no-unused-vars": "off",
"spaced-comment": "off",
"no-param-reassign": 0,
"import/extensions": 0,
diff --git a/TODO b/TODO
index 75807f5..2b3512c 100644
--- a/TODO
+++ b/TODO
@@ -1,3 +1,6 @@
+entity types
+
+
- use quill vue
- add linenumbering
- add yntax highlighning
diff --git a/assets/js/App.vue b/assets/js/App.vue
index a8e58b7..545ea03 100644
--- a/assets/js/App.vue
+++ b/assets/js/App.vue
@@ -13,9 +13,18 @@
-
+
+
+
+
+
+
+ loading …
+
+
+
diff --git a/assets/js/components/LoginForm.vue b/assets/js/components/LoginForm.vue
index f439292..483f554 100644
--- a/assets/js/components/LoginForm.vue
+++ b/assets/js/components/LoginForm.vue
@@ -53,7 +53,7 @@
diff --git a/assets/js/components/blog/BlogIndex.vue b/assets/js/components/blog/BlogIndex.vue
index ef910f9..91cf18f 100644
--- a/assets/js/components/blog/BlogIndex.vue
+++ b/assets/js/components/blog/BlogIndex.vue
@@ -1,34 +1,37 @@
-
- BlogIndex
-
-
+
+
+
+ Recent Articles
+
+
+
+
+
+
-
diff --git a/assets/js/components/blog/BlogPost.vue b/assets/js/components/blog/BlogPost.vue
index faaa7f9..3859b20 100644
--- a/assets/js/components/blog/BlogPost.vue
+++ b/assets/js/components/blog/BlogPost.vue
@@ -32,20 +32,16 @@
-
diff --git a/assets/js/components/tabs/TabsGroup.vue b/assets/js/components/tabs/TabsGroup.vue
index 23c8075..62249b9 100644
--- a/assets/js/components/tabs/TabsGroup.vue
+++ b/assets/js/components/tabs/TabsGroup.vue
@@ -72,7 +72,7 @@ export default {
}
.tabs-header li.selected:hover {
- border-color: $body-color;
+ /*border-color: $body-color; */
}
diff --git a/assets/js/composables/useResource.js b/assets/js/composables/useResource.js
index ee9ba7a..876f928 100644
--- a/assets/js/composables/useResource.js
+++ b/assets/js/composables/useResource.js
@@ -2,13 +2,18 @@ import { ref } from 'vue'
import axios from 'axios'
export default function useResource(resource) {
+
console.log('useBlog')
+ axios.defaults.headers.common['app-id'] = '628cbf673800f869ed218152' // for all requests
+
+ const apiBaseUrl = 'https://628cc5c6a3fd714fd03914c2.mockapi.io/api/'
const items = ref([])
const item = ref(null)
const fetchAll = async () => {
await axios
- .get(resource)
+ .get(apiBaseUrl + resource)
.then((response) => {
+ console.log(response.data)
items.value = response.data
})
}
diff --git a/assets/js/index.js b/assets/js/index.js
index 8be86c0..ac8c6b4 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -6,8 +6,6 @@ import '../styles/ckeditor.css'
import 'fork-awesome/scss/fork-awesome.scss'
import { createApp } from 'vue'
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap/dist/js/bootstrap'
import { createPinia } from 'pinia'
diff --git a/assets/styles/_old.scss b/assets/styles/_old.scss
new file mode 100644
index 0000000..761c08a
--- /dev/null
+++ b/assets/styles/_old.scss
@@ -0,0 +1,442 @@
+/*
+ jet black (tiefschwarz) - RAL 9005: #0e0e10, rgba(14, 14, 16, 1.0);
+ mango: #FF8040, rgba(255, 130, 67, 1.0);
+ gray: #a1a1a1, rgba(161, 161, 161, 1.0)
+*/
+
+/*
+@media (prefers-color-scheme: light) {}
+@media (prefers-color-scheme: dark) {}
+*/
+
+/* debug */
+* {
+ //border: 1px solid gray;
+}
+
+
+html, body{
+ margin: 0;
+ padding: 0;
+ background: black;
+ background: linear-gradient(90deg, rgba(14,14,16,1) 0%, rgba(255,128,64,1) 35%, rgba(14,14,16,1) 100%);
+}
+
+
+
+
+
+// the ~ allows you to reference things in node_modules
+
+
+@import 'quill/dist/quill.core.css';
+// customize some Bootstrap variables
+
+
+$bs-primary: #FF8040;
+$primary: #FF8040;
+$body-bg: #0E0E10;
+$body-color: darken(white, 20);
+$border-primary: #FF8040;
+$dropdown-dark-bg: black;
+$dropdown-dark-link-color: $primary;
+$dropdown-dark-border-color: $primary;
+$jet-black: #0e0e10;
+$mango: #FF8040;
+
+.btn-primary {
+ border-color: $primary;
+}
+
+.btn-outline-primary {
+ color: $primary;
+ border-color: $primary;
+}
+
+.pages-editor-raw {
+ width: 100%;
+ height: 650px !important;
+ background-color: black;
+ color: white;
+}
+
+.ql-container {
+ overflow-y: scroll;
+ height: 650px !important;
+}
+
+.no-overflow {
+ overflow-y: visible !important;
+ height: auto !important;
+}
+
+.ql-syntax {
+ background-color: #222222;
+ border: 1px solid #888;
+ border-left: 3px solid $primary;
+ color: #666;
+ page-break-inside: avoid;
+ font-family: monospace;
+ font-size: 15px;
+ line-height: 1.6;
+ margin-bottom: 1.6em;
+ max-width: 100%;
+ overflow: auto;
+ padding: 1em 1.5em;
+ display: block;
+ word-wrap: break-word;
+}
+
+
+.ql-editor {
+ counter-reset: line;
+ padding-left: 0;
+}
+
+.ql-editor div:before {
+ counter-increment: line;
+ content: counter(line);
+ display: inline-block;
+ border-right: 1px solid red;
+ padding: 0 .5em;
+ margin-right: .5em;
+ color: #888
+}
+
+.ql-syntax pre:before {
+ counter-increment: line;
+ content: counter(line);
+ display: inline-block;
+ border-right: 1px solid #ddd;
+ padding: 2px .5em;
+ margin-right: .5em;
+ color: #888
+}
+/*
+pre span.hljs-tag::before, span.hljs-attr::before {
+ content: "xxx";
+ display: inline-block;
+}
+*/
+
+.wrapper {
+ clear: both;
+ position: sticky;
+ top: 0;
+}
+
+
+a:link {
+ text-decoration: none;
+ color: $mango;
+}
+a:visited {
+ text-decoration: none;
+ color: $mango;
+}
+a:hover {
+ text-decoration: none;
+ color: $mango;
+}
+a:active {
+ text-decoration: none;
+ color: $mango;
+}
+
+
+body {
+ padding-top: 95px;
+ padding-bottom: 155px;
+}
+
+.row.content {
+ height: 350px;
+}
+
+.col-center {
+ margin: 0 auto;
+}
+
+.sidenav-left {
+ padding-top: 20px;
+ padding-left: 0;
+ padding-right: 0;
+ background-color: #f1f1f1;
+ height: 100%;
+ width: auto;
+ margin-left: 3em !important;
+}
+
+.sidenav-left ul {
+ list-style-type: none;
+ line-height: 2.1;
+}
+.sidenav-right {
+ padding-top: 20px;
+ background-color: #f1f1f1;
+ height: 100%;
+}
+
+@media screen and (max-width: 767px) {
+ .sidenav {
+ height: auto;
+ padding: 15px;
+ }
+ .row.content {
+ height: auto;
+ }
+}
+
+.navbar {
+ opacity: 0.9;
+}
+
+footer {
+ opacity: 0.9;
+}
+
+.navbar-top {
+ border-bottom-width: 1px;
+ border-bottom-color: $primary;
+ padding-top: 0;
+ padding-bottom: 0;
+ opacity: 0.9;
+}
+
+.navbar-bottom {
+ border-top-width: 1px;
+ border-top-color: $primary;
+ padding-top: 0;
+ padding-bottom: 0;
+ height: 125px;
+ opacity: 0.9;
+
+}
+
+.navbar-nav > li > .dropdown-menu {
+ background-color: black;
+ opacity: 0.8;
+}
+
+
+.display-wrapper {
+ text-align: left;
+ width: 90%;
+ margin: 0 auto 150px;
+}
+
+
+.button-login {
+ margin-top: 25px;
+}
+
+.main-content {
+}
+
+
+.box {
+ border-width: 1px;
+ border-style: solid;
+ border-color: $primary;
+ border-radius: 10px;
+ color: lightgray;
+ background: black;
+ align-content: center;
+ margin: 15px 15px 20px;
+ height: auto;
+}
+
+/* BlogPosts */
+
+.main-article {
+ border: 2px solid #efefee;
+ Background: #fff;
+ border-top-left-radius: 6px;
+ border-top-right-radius: 6px;
+}
+
+.main-article img {
+ width: 100%;
+ height: 250px;
+ border-top-right-radius: 5px;
+ border-top-left-radius: 5px;
+ border-top: 5px solid lightblue;
+}
+
+.blog-container {
+ border: 1px solid $primary;
+ border-radius: 5px;
+ margin-bottom: 25px;
+ background: #0E0E10 url('../images/bg.jpeg') center;
+}
+
+.main-article-link, .article-container a {
+ text-decoration: none;
+ color: #000;
+}
+
+.main-article-link:hover {
+ text-decoration: none;
+ color: #000;
+}
+
+.article-title {
+ min-width: 300px;
+
+}
+
+.article-text {
+ text-align: justify;
+ hyphens: auto;
+}
+
+
+@media (max-width: 440px) {
+ .article-title {
+ min-width: 100px;
+ max-width: 245px;
+ }
+}
+
+
+.circle {
+ position:fixed;
+ width:500px;
+ height:600px;
+ margin:-300px auto auto -250px;
+ top:50%;
+ left:50%;
+ text-align:center;
+}
+
+.teaser-image {
+ object-fit: contain;
+ width: 800px;
+ border-radius: 5px;
+ margin: 7px;
+}
+
+.project-container {
+ border-radius: 5px;
+}
+
+
+.blog-img {
+ height: 100px;
+ width: 100px;
+ border-radius: 5px;
+ border-width: 1px;
+ border-color: $primary;
+ margin: 7px;
+}
+
+.article-author-img {
+ height: 50px;
+ border: 1px solid $primary;
+ margin-left: 25px;
+}
+
+.blog-details {
+ font-size: .8em;
+ margin-right: 15px;
+}
+
+.blog-teaser {
+ margin-left: 15px;
+}
+
+/* registration form */
+
+.social_icon span {
+ font-size: 60px;
+ margin-left: 10px;
+ color: $primary;
+}
+
+.social_icon span:hover{
+ color: white;
+ cursor: pointer;
+}
+
+.card{
+ height: 370px;
+ margin-top: 45px;
+ margin-bottom: auto;
+ width: 500px;
+ background-color: #383c4a;
+ border-color: $primary;
+ padding: 15px;
+ background-image: url('../images/bg.jpeg');
+ border-bottom-left-radius: 10px !important;
+ border-bottom-right-radius: 10px !important;
+}
+
+
+.card-header {
+ position: absolute;
+ color: black;
+ background-color: $primary;
+ width: 500px;
+ height: 55px;
+ border-top-left-radius: 15px !important;
+ border-top-right-radius: 15px !important;
+}
+
+.card-body {
+}
+
+.social_icon{
+/* position: absolute;
+ right: 20px;
+ top: 45px;
+ */
+}
+
+.input-group-prepend span{
+ width: 50px;
+ background-color: $primary;
+ color: black;
+ border:0 !important;
+ height: 40px;
+ margin-bottom: 15px;
+ border-radius: 10px 0 0 10px;
+}
+
+
+.form-control {
+ height: 40px;
+ background-image: url('../images/bg.jpeg') !important;
+ color: white;
+ border-color: $primary;
+}
+input:focus{
+/* TODO */
+}
+
+.submit-button {
+ color: $primary;
+ background-color: black;
+ width: 100px;
+ border-radius: 10px;
+}
+
+.submit-button:hover{
+ color: black;
+ background-color: $primary;
+}
+
+.links{
+ color: white;
+}
+
+.teaser-text {
+ height: 180px;
+}
+
+.content-text {
+ height: 400px;
+}
+
+.file-input {
+ color: $primary;
+}
diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index c12a4c4..ad4eeaf 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -22,40 +22,14 @@ html, body{
background: linear-gradient(90deg, rgba(14,14,16,1) 0%, rgba(255,128,64,1) 35%, rgba(14,14,16,1) 100%);
}
-
-
-
-
-// the ~ allows you to reference things in node_modules
-
-@import 'bootstrap/dist/css/bootstrap.css';
-@import 'bootsdark/dist/bootsdark.min.css';
+$primary: #FF8040;
+$jet-black: #0e0e10;
@import 'quill/dist/quill.core.css';
// customize some Bootstrap variables
-$bs-primary: #FF8040;
-$primary: #FF8040;
-$body-bg: #0E0E10;
-$body-color: darken(white, 20);
-$border-primary: #FF8040;
-$dropdown-dark-bg: black;
-$dropdown-dark-link-color: $primary;
-$dropdown-dark-border-color: $primary;
-$jet-black: #0e0e10;
-$mango: #FF8040;
-
-.btn-primary {
- border-color: $primary;
-}
-
-.btn-outline-primary {
- color: $primary;
- border-color: $primary;
-}
-
.pages-editor-raw {
width: 100%;
height: 650px !important;
@@ -115,331 +89,3 @@ $mango: #FF8040;
margin-right: .5em;
color: #888
}
-/*
-pre span.hljs-tag::before, span.hljs-attr::before {
- content: "xxx";
- display: inline-block;
-}
-*/
-
-.wrapper {
- clear: both;
- position: sticky;
- top: 0;
-}
-
-
-a:link {
- text-decoration: none;
- color: $mango;
-}
-a:visited {
- text-decoration: none;
- color: $mango;
-}
-a:hover {
- text-decoration: none;
- color: $mango;
-}
-a:active {
- text-decoration: none;
- color: $mango;
-}
-
-
-body {
- padding-top: 95px;
- padding-bottom: 155px;
-}
-
-.row.content {
- height: 350px;
-}
-
-.col-center {
- margin: 0 auto;
-}
-
-.sidenav-left {
- padding-top: 20px;
- padding-left: 0;
- padding-right: 0;
- background-color: #f1f1f1;
- height: 100%;
- width: auto;
- margin-left: 3em !important;
-}
-
-.sidenav-left ul {
- list-style-type: none;
- line-height: 2.1;
-}
-.sidenav-right {
- padding-top: 20px;
- background-color: #f1f1f1;
- height: 100%;
-}
-
-@media screen and (max-width: 767px) {
- .sidenav {
- height: auto;
- padding: 15px;
- }
- .row.content {
- height: auto;
- }
-}
-
-.navbar {
- opacity: 0.9;
-}
-
-footer {
- opacity: 0.9;
-}
-
-.navbar-top {
- border-bottom-width: 1px;
- border-bottom-color: $primary;
- padding-top: 0;
- padding-bottom: 0;
- opacity: 0.9;
-}
-
-.navbar-bottom {
- border-top-width: 1px;
- border-top-color: $primary;
- padding-top: 0;
- padding-bottom: 0;
- height: 125px;
- opacity: 0.9;
-
-}
-
-.navbar-nav > li > .dropdown-menu {
- background-color: black;
- opacity: 0.8;
-}
-
-
-.display-wrapper {
- text-align: left;
- width: 90%;
- margin: 0 auto 150px;
-}
-
-
-.button-login {
- margin-top: 25px;
-}
-
-.main-content {
-}
-
-
-.box {
- border-width: 1px;
- border-style: solid;
- border-color: $primary;
- border-radius: 10px;
- color: lightgray;
- background: black;
- align-content: center;
- margin: 15px 15px 20px;
- height: auto;
-}
-
-/* BlogPosts */
-
-.main-article {
- border: 2px solid #efefee;
- Background: #fff;
- border-top-left-radius: 6px;
- border-top-right-radius: 6px;
-}
-
-.main-article img {
- width: 100%;
- height: 250px;
- border-top-right-radius: 5px;
- border-top-left-radius: 5px;
- border-top: 5px solid lightblue;
-}
-
-.blog-container {
- border: 1px solid $primary;
- border-radius: 5px;
- margin-bottom: 25px;
- background: #0E0E10 url('../images/bg.jpeg') center;
-}
-
-.main-article-link, .article-container a {
- text-decoration: none;
- color: #000;
-}
-
-.main-article-link:hover {
- text-decoration: none;
- color: #000;
-}
-
-.article-title {
- min-width: 300px;
-
-}
-
-.article-text {
- text-align: justify;
- hyphens: auto;
-}
-
-
-@media (max-width: 440px) {
- .article-title {
- min-width: 100px;
- max-width: 245px;
- }
-}
-
-
-.circle {
- position:fixed;
- width:500px;
- height:600px;
- margin:-300px auto auto -250px;
- top:50%;
- left:50%;
- text-align:center;
-}
-
-.teaser-image {
- object-fit: contain;
- width: 800px;
- border-radius: 5px;
- margin: 7px;
-}
-
-.project-container {
- border-radius: 5px;
-}
-
-
-.blog-img {
- height: 100px;
- width: 100px;
- border-radius: 5px;
- border-width: 1px;
- border-color: $primary;
- margin: 7px;
-}
-
-.article-author-img {
- height: 50px;
- border: 1px solid $primary;
- margin-left: 25px;
-}
-
-.blog-details {
- font-size: .8em;
- margin-right: 15px;
-}
-
-.blog-teaser {
- margin-left: 15px;
-}
-
-/* registration form */
-
-.social_icon span {
- font-size: 60px;
- margin-left: 10px;
- color: $primary;
-}
-
-.social_icon span:hover{
- color: white;
- cursor: pointer;
-}
-
-.card{
- height: 370px;
- margin-top: 45px;
- margin-bottom: auto;
- width: 500px;
- background-color: #383c4a;
- border-color: $primary;
- padding: 15px;
- background-image: url('../images/bg.jpeg');
- border-bottom-left-radius: 10px !important;
- border-bottom-right-radius: 10px !important;
-}
-
-
-.card-header {
- position: absolute;
- color: black;
- background-color: $primary;
- width: 500px;
- height: 55px;
- border-top-left-radius: 15px !important;
- border-top-right-radius: 15px !important;
-}
-
-.card-body {
-}
-
-.social_icon{
-/* position: absolute;
- right: 20px;
- top: 45px;
- */
-}
-
-.input-group-prepend span{
- width: 50px;
- background-color: $primary;
- color: black;
- border:0 !important;
- height: 40px;
- margin-bottom: 15px;
- border-radius: 10px 0 0 10px;
-}
-
-
-.form-control {
- height: 40px;
- background-image: url('../images/bg.jpeg') !important;
- color: white;
- border-color: $primary;
-}
-input:focus{
-/* TODO */
-}
-
-.submit-button {
- color: $primary;
- background-color: black;
- width: 100px;
- border-radius: 10px;
-}
-
-.submit-button:hover{
- color: black;
- background-color: $primary;
-}
-
-.links{
- color: white;
-}
-
-.teaser-text {
- height: 180px;
-}
-
-.content-text {
- height: 400px;
-}
-
-.file-input {
- color: $primary;
-}
diff --git a/assets/styles/tailwind.css b/assets/styles/tailwind.css
new file mode 100644
index 0000000..9d1bcc1
--- /dev/null
+++ b/assets/styles/tailwind.css
@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind componts;
+
+@tailwind utilities;
diff --git a/config/packages/security.yaml b/config/packages/security.yaml
index 45ff287..f5a5969 100644
--- a/config/packages/security.yaml
+++ b/config/packages/security.yaml
@@ -1,4 +1,4 @@
-security:
+ hisecurity:
enable_authenticator_manager: true
hide_user_not_found: false
diff --git a/package.json b/package.json
index f3f3556..b42a128 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,16 @@
"@hotwired/stimulus": "^3.0.0",
"@symfony/stimulus-bridge": "^3.0.0",
"@symfony/webpack-encore": "^2.0.0",
+ "autoprefixer": "^10.4.7",
"core-js": "^3.0.0",
"file-loader": "^6.0.0",
"jquery": "^3.6.0",
"less-loader": "^10.0.0",
+ "postcss": "^8.4.14",
"regenerator-runtime": "^0.13.2",
"sass": "^1.50.0",
"sass-loader": "^12.0.0",
+ "tailwindcss": "^3.0.24",
"ts-loader": "^9.0.0",
"typescript": "^4.6.4",
"vue-loader": "^17.0.0",
@@ -26,14 +29,15 @@
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
+ "@typescript-eslint/eslint-plugin-tslint": "^5.26.0",
"@vueup/vue-quill": "^1.0.0-beta.8",
"axios": "^0.27.1",
"bootsdark": "^1.0.16",
- "bootstrap": "^5.1.3",
"eslint": "^8.15.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.26.0",
- "eslint-plugin-vue": "^8.7.1",
+ "eslint-plugin-tailwindcss": "^3.5.0",
+ "eslint-plugin-vue": "^9.0.1",
"fork-awesome": "^1.2.0",
"highlight.js": "^11.5.1",
"husky": "^7.0.4",
@@ -41,9 +45,11 @@
"marked": "^4.0.15",
"pinia": "^2.0.14",
"popper.js": "^1.16.1",
- "primevue": "^3.12.6",
+ "postcss-import": "^14.1.0",
+ "postcss-loader": "^7.0.0",
"quill": "^1.3.7",
"quill-html-edit-button": "^2.2.12",
+ "tailwind": "^4.0.0",
"vue": "3",
"vue-navigation-bar": "^5.0.0",
"vue-router": "4"
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..a0e0356
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+ plugins: [
+ require('tailwindcss'),
+ require('autoprefixer'),
+ require('postcss-import')
+ ]
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..2dd52ba
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+ theme: {
+ extend: {}
+ },
+ variants: {},
+ plugins: [],
+ //prefix:
+ content: [
+ './assets/**/*.{vue,js}'
+ ]
+}
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 932ac44..489cacb 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -8,6 +8,7 @@
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
+ {{ encore_entry_link_tags('tailwind') }}
{% endblock %}
{% block javascripts %}
@@ -22,4 +23,4 @@