before symfony/security-bundle update

.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,

TODO

@@ -1,3 +1,6 @@
+entity types
+
+
 - use quill vue
 - add linenumbering
 - add yntax highlighning

assets/js/App.vue

@@ -13,9 +13,18 @@
 				<the-sidebar/>
 			</div>
 			<div class="col-xl-9">
-				<router-view
+				<suspense>
-					@user-authenticated="onUserAuthenticated"
+					<template #default>
-				/>
+						<router-view
+							@user-authenticated="onUserAuthenticated"
+						/>
+					</template>
+					<template #fallback>
+						<div class="loading">
+							loading …
+						</div>
+					</template>
+				</suspense>
 			</div>
 			<div class="col mt-2"/>
 		</div>

assets/js/components/LoginForm.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script setup>
-import { ref, defineEmits } from 'vue'
+import { ref } from 'vue'
 import axios from 'axios'
 
 const username = ref('')

assets/js/components/TheNavbar.vue

@@ -1,122 +1,45 @@
 <template>
-	<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-top">
+	<nav
-		<router-link
+		class="
-			class="navbar-brand"
+		grid fixed inset-x-0 top-0 flex-wrap justify-between items-center py-0 leading-6 border-b
-			:to="{ name: 'Home' }"
+		@border-orange-400 opacity-90 md:flex-nowrap md:justify-start md:px-24 box-border
-		>
+		bg-neutral-800 text-stone-300 grid-cols-2 place-content-around"
-			<img
+		style="z-index: 1030;"
-				src="/build/images/24unix/24_logo_bg_96x96.png"
+	>
-				class="img-fluid"
+		<div>
-				alt="24unix.net"
+			<router-link
+				class="py-1 mr-4 text-xl leading-7 text-white whitespace-nowrap cursor-pointer box-border
+			hover:text-white focus:text-white"
+				:to="{ name: 'Home' }"
 			>
-		</router-link>
+				<img
-		<button
+					src="/build/images/24unix/24_logo_bg_96x96.png"
-			class="navbar-toggler border-0"
+					class="align-middle box-border"
-			type="button"
+					alt="24unix.net"
-			data-toggle="collapse"
+				>
-			data-target="#CollapsingNavbar"
+			</router-link>
-		>
-			☰
-		</button>
-		<div
-			id="CollapsingNavbar"
-			class="collapse navbar-collapse"
-		>
-			<ul class="navbar-nav ms-auto">
-				<li class="nav-item">
-					<div v-if="isLoggedIn">
-						<button
-							v-if="isLoggedIn"
-							data-bs-target="#dropdown-menu"
-							data-bs-toggle="dropdown"
-							class="btn btn-primary button-login dropdown-toggle ml-auto mb-2 mr-5"
-							:to="{ name: 'Home'}"
-						>
-							{{ user.username }}
-						</button>
-						<div
-							id="dropdown-menu"
-							class="dropdown-menu dropdown-menu-dark dropdown-menu-end"
-							aria-labelledby="navbar-dropdown"
-						>
-							<router-link
-								:to="{name: 'Profile'}"
-								class="dropdown-item"
-								href="/profile"
-							>
-								<span
-									class="fa fa-lg fa-fw fa-user"
-									aria-hidden="true"
-								/>
-								Profile
-							</router-link>
-							<a
-								class="dropdown-item"
-								href="#"
-							>
-								<span
-									class="fa fa-lg fa-fw fa-wrench"
-									aria-hidden="true"
-								/>
-								Settings</a>
-							<div class="dropdown-divider"/>
-							<a
-								class="dropdown-item"
-								href="/admin"
-							>
-								<span
-									class="fa fa-lg fa-fw fa-cog"
-									aria-hidden="true"
-								/>
-								Administration
-							</a>
-							<div class="dropdown-divider"/>
-							<a
-								class="dropdown-item"
-								href="/logout"
-							>
-								<span
-									class="fa fa-lg fa-fw fa-sign-out"
-									aria-hidden="true"
-								/>
-								&nbsp;Logout
-							</a>
-						</div>
-					</div>
-
-					<button
-						v-else
-						class="btn btn-outline-primary"
-					>
-						<router-link :to="{ name: 'LoginForm'}">
-							<span
-								class="fa fa-sign-in fa-lg fa-fw"
-								aria-hidden="true"
-							/>
-							Login
-						</router-link>
-					</button>
-				</li>
-			</ul>
 		</div>
-		<!--
+		<div class="text-end">
-												<span
+			<router-link
-													class="fa fa-lg fa-fw fa-wrench"
+				id="buttonLogin"
-													aria-hidden="true"
+				class="inline-block py-1 px-3 mt-6 text-base font-normal leading-normal text-center
-												/>&nbsp;Settings
+			text-black align-middle bg-orange-400 rounded border border-orange-400 border-solid
-								</b-dropdown-item>
+			cursor-pointer select-none box-border hover:border-orange-400 hover:bg-orange-400 hover:text-black
-								<b-dropdown-divider/>
+			focus:border-orange-400 focus:bg-orange-400 focus:text-black"
-								<b-dropdown-item @click="logout">
+				:to="{ name: 'LoginForm' }"
-												<span
+				role="button"
-													class="fa fa-lg fa-fw fa-sign-out"
+				style="text-decoration: none; transition: none 0s ease 0s; list-style: outside none none;"
-													aria-hidden="true"
+			>
-												/>&nbsp;Logout
+				<span class="fa fa-sign-in fa-lg fa-fw"></span>&nbsp;Log In
-								</b-dropdown-item>
+			</router-link>
-	-->
+
+		</div>
+
 	</nav>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import axios from 'axios'
 import 'vue-navigation-bar/dist/vue-navigation-bar.css'
 
@@ -132,6 +55,11 @@ const props = defineProps({
 })
 
 const isLoggedIn = () => (!!this.user)
+let showDropdown = ref(false)
+const toggleDropDown = () => {
+	console.log('toggle', showDropdown)
+	showDropdown.value = !showDropdown.value
+}
 
 /*
 const logout = () => ({

assets/js/components/blog/BlogCard.vue

@@ -1,33 +1,44 @@
 <template>
-	<div
+	<div>
-		class="
+		<!-- media -->
-      flex
+		<div class="h-64 w-auto md:w-1/2">
-      m-2
+			<img
-      gap-2
+				class="inset-0 h-full w-full object-cover object-center"
-      items-center
+				src="/build/images/tracer_schmolle150x150.png"
-      shadow-md
+				alt=""
-      w-1/4
+			>
-      flex-grow
+		</div>
-      rounded
+		<!-- content -->
-      overflow-hidden
+		<div class="w-full py-4 px-6 text-gray-800 flex flex-col justify-between">
-    "
+			<h3 class="font-semibold text-lg leading-tight truncate">
-		style="border: 1px solid #eee"
+				{{ post.title }}
-	>
+			</h3>
-		<img
+			<p class="mt-2">
-			src="https://via.placeholder.com/150"
+				{{ post.body.split('.')[0] }} …
-			style="background: #cccccc"
+			</p>
-			width="150"
+			<p class="text-sm text-gray-700 uppercase tracking-wide font-semibold mt-2">
-			height="150"
+				{{ post.createdAt.toLocaleString('de-DE') }}
-			alt="placeholder"
+			</p>
-		>
+			<p v-if="blogUser">
-		<router-link :to="{ name: 'BlogPost', params: { id: post.id } }">
+				{{ blogUser }}
-			{{ post.title }}<br>
+			</p>
-			User: {{ post.userId }}
+			<p class="font-normal text-gray-700 mb-3">
-		</router-link>
+				dddd
+			</p>
+			<router-link
+				:to="{ name: 'BlogPost', params: { id: post.id } }"
+				class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300
+					font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
+			>
+				Read more
+			</router-link>
+		</div>
 	</div>
 </template>
+
 <script setup>
-console.log('BlogCard')
+import useResource from '@/composables/useResource'
+
 const props = defineProps({
 	post: {
 		type: Object,
@@ -35,4 +46,10 @@ const props = defineProps({
 	}
 })
 const post = { ...props.post }
+
+const { items: blogUser, fetchOne } = useResource('users')
+fetchOne(post.user)
+
+console.log("blug user", post.user)
+console.log(blogUser.value)
 </script>

assets/js/components/blog/BlogIndex.vue

@@ -1,34 +1,37 @@
 <template>
-	<div
+	<div class="pt-6 pb-12 bg-gray-300">
-		class="
+		<div
-      flex
+			id="card"
-      m-2
+			class=""
-      gap-2
+		>
-      items-center
+			<h2 class="text-center font-serif  uppercase text-4xl xl:text-5xl">
-      shadow-md
+				Recent Articles
-      w-1/4
+			</h2>
-      flex-grow
+			<!-- container for all cards -->
-      rounded
+			<div class="container w-100 lg:w-4/5 mx-auto flex flex-col">
-      overflow-hidden
+				<BlogCard
-    "
+					v-for="post in blogPosts"
-		style="border: 1px solid #eee"
+					:key="post.id"
-	>
+					:post="post"
-		BlogIndex
+					class="
-
+						flex flex-col md:flex-row overflow-hidden bg-white rounded-lg
-		<BlogCard
+						shadow-xl mt-4 w-100 mx-2"
-			v-for="post in blogPosts"
+				/>
-			:key="post.id"
+			</div>
-			:post="post"
+		</div>
-		/>
 	</div>
 </template>
 
-<script setup>
+<script setup async>
+
 import useResource from '@/composables/useResource'
 //import useUser from '@/composables/useUser'
 import BlogCard from '@/components/blog/BlogCard'
 
-const { items: blogPosts, fetchAll } = useResource('https://jsonplaceholder.typicode.com/posts')
+const {
+	items: blogPosts,
+	fetchAll
+} = useResource('users/1/blogPosts')
 fetchAll()
 
 </script>

assets/js/components/blog/BlogPost.vue

@@ -32,20 +32,16 @@
 	</div>
 </template>
 
-<script setup>
+<script setup async>
-import { watch } from 'vue'
 import { useRoute } from 'vue-router'
 import useResource from '@/composables/useResource'
 
 const route = useRoute()
 
 const { item: blogPost, fetchOne: fetchOneBlog } = useResource('https://jsonplaceholder.typicode.com/posts')
-fetchOneBlog(route.params.id)
+await fetchOneBlog(route.params.id)
 
 const { item: user, fetchOne: fetchOneUser } = useResource('https://jsonplaceholder.typicode.com/users')
-watch(
+fetchOneUser(blogPost.value.userId)
-	() => ({ ...blogPost.value }),
-	() => fetchOneUser(blogPost.value.userId)
-)
 
 </script>

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; */
 }
 
 </style>

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
 			})
 	}

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'
 

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;
+}

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%);
 }
 
-
+$primary: #FF8040;
-
+$jet-black: #0e0e10;
-
-
-// the ~ allows you to reference things in node_modules
-
-@import 'bootstrap/dist/css/bootstrap.css';
-@import 'bootsdark/dist/bootsdark.min.css';
 
 
 @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;
-}

assets/styles/tailwind.css

@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind componts;
+
+@tailwind utilities;

config/packages/security.yaml

@@ -1,4 +1,4 @@
-security:
+ hisecurity:
     enable_authenticator_manager: true
     hide_user_not_found: false
 

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"

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	plugins: [
+		require('tailwindcss'),
+		require('autoprefixer'),
+		require('postcss-import')
+	]
+}

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	theme: {
+		extend: {}
+	},
+	variants: {},
+	plugins: [],
+	//prefix:
+	content: [
+		'./assets/**/*.{vue,js}'
+	]
+}

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 @@
 </script>
 <div id="app"></div>
 </body>
-</html>
+</html>

webpack.config.js

@@ -14,6 +14,7 @@ Encore
 		to: 'images/[path][name].[ext]'
 	})
 	.addEntry('app', './assets/js/index.js')
+	.addEntry('tailwind', './assets/styles/tailwind.css')
 	.splitEntryChunks()
 	// will require an extra script tag for runtime.js
 	// but, you probably want this, unless you're building a single-page app
@@ -37,6 +38,12 @@ Encore
 	.enableSassLoader()
 	.enableVueLoader(() => {}, { runtimeCompilerBuild: false })
 	.enableTypeScriptLoader()
+	.enablePostCssLoader((options) => {
+		options.postcssOptions = {
+			// directory where the postcss.config.js file is stored
+			path: './postcss.config.js'
+		}
+	})
 	.autoProvidejQuery()
 
 module.exports = Encore.getWebpackConfig()