before symfony/security-bundle update

This commit is contained in:
tracer 2022-05-25 14:41:58 +02:00
parent aec0b4356a
commit aa84f3c4c6
21 changed files with 1876 additions and 697 deletions

View File

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

3
TODO
View File

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

View File

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

View File

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

View File

@ -1,122 +1,45 @@
<template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-top">
<nav
class="
grid fixed inset-x-0 top-0 flex-wrap justify-between items-center py-0 leading-6 border-b
@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"
style="z-index: 1030;"
>
<div>
<router-link
class="navbar-brand"
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' }"
>
<img
src="/build/images/24unix/24_logo_bg_96x96.png"
class="img-fluid"
class="align-middle box-border"
alt="24unix.net"
>
</router-link>
<button
class="navbar-toggler border-0"
type="button"
data-toggle="collapse"
data-target="#CollapsingNavbar"
>
</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 class="text-end">
<router-link
id="buttonLogin"
class="inline-block py-1 px-3 mt-6 text-base font-normal leading-normal text-center
text-black align-middle bg-orange-400 rounded border border-orange-400 border-solid
cursor-pointer select-none box-border hover:border-orange-400 hover:bg-orange-400 hover:text-black
focus:border-orange-400 focus:bg-orange-400 focus:text-black"
:to="{ name: 'LoginForm' }"
role="button"
style="text-decoration: none; transition: none 0s ease 0s; list-style: outside none none;"
>
<span class="fa fa-sign-in fa-lg fa-fw"></span>&nbsp;Log In
</router-link>
</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>
<!--
<span
class="fa fa-lg fa-fw fa-wrench"
aria-hidden="true"
/>&nbsp;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"
/>&nbsp;Logout
</b-dropdown-item>
-->
</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 = () => ({

View File

@ -1,33 +1,44 @@
<template>
<div
class="
flex
m-2
gap-2
items-center
shadow-md
w-1/4
flex-grow
rounded
overflow-hidden
"
style="border: 1px solid #eee"
>
<div>
<!-- media -->
<div class="h-64 w-auto md:w-1/2">
<img
src="https://via.placeholder.com/150"
style="background: #cccccc"
width="150"
height="150"
alt="placeholder"
class="inset-0 h-full w-full object-cover object-center"
src="/build/images/tracer_schmolle150x150.png"
alt=""
>
<router-link :to="{ name: 'BlogPost', params: { id: post.id } }">
{{ post.title }}<br>
User: {{ post.userId }}
</div>
<!-- content -->
<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">
{{ post.title }}
</h3>
<p class="mt-2">
{{ post.body.split('.')[0] }}
</p>
<p class="text-sm text-gray-700 uppercase tracking-wide font-semibold mt-2">
{{ post.createdAt.toLocaleString('de-DE') }}
</p>
<p v-if="blogUser">
{{ blogUser }}
</p>
<p class="font-normal text-gray-700 mb-3">
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>

View File

@ -1,34 +1,37 @@
<template>
<div class="pt-6 pb-12 bg-gray-300">
<div
class="
flex
m-2
gap-2
items-center
shadow-md
w-1/4
flex-grow
rounded
overflow-hidden
"
style="border: 1px solid #eee"
id="card"
class=""
>
BlogIndex
<h2 class="text-center font-serif uppercase text-4xl xl:text-5xl">
Recent Articles
</h2>
<!-- container for all cards -->
<div class="container w-100 lg:w-4/5 mx-auto flex flex-col">
<BlogCard
v-for="post in blogPosts"
:key="post.id"
:post="post"
class="
flex flex-col md:flex-row overflow-hidden bg-white rounded-lg
shadow-xl mt-4 w-100 mx-2"
/>
</div>
</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>

View File

@ -32,20 +32,16 @@
</div>
</template>
<script setup>
import { watch } from 'vue'
<script setup async>
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(
() => ({ ...blogPost.value }),
() => fetchOneUser(blogPost.value.userId)
)
fetchOneUser(blogPost.value.userId)
</script>

View File

@ -72,7 +72,7 @@ export default {
}
.tabs-header li.selected:hover {
border-color: $body-color;
/*border-color: $body-color; */
}
</style>

View File

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

View File

@ -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'

442
assets/styles/_old.scss Normal file
View File

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

View File

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

View File

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

View File

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

View File

@ -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"

7
postcss.config.js Normal file
View File

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

11
tailwind.config.js Normal file
View File

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

View File

@ -8,6 +8,7 @@
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{{ encore_entry_link_tags('tailwind') }}
{% endblock %}
{% block javascripts %}

View File

@ -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()

1407
yarn.lock

File diff suppressed because it is too large Load Diff