Bunch of WIP work

hyperbolus · Nov 30, 2023 · 168c12c · 168c12c
1 parent de28563
commit 168c12c
Show file tree

Hide file tree

Showing 9 changed files with 268 additions and 181 deletions.
diff --git a/app/Http/Controllers/Content/StyleController.php b/app/Http/Controllers/Content/StyleController.php
@@ -6,6 +6,7 @@
 use App\Models\Forge\Mod;
 use App\Models\Forge\Style;
 use App\Models\System\User;
+use Illuminate\Contracts\Support\Responsable;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 
@@ -52,18 +53,19 @@ public function index(Request $request)
             }
         }
 
-        return Inertia::render('Styles/Index', [
+        return page('Styles/Index', [
             'styles' => $styles
                 ->orderBy($attributes[$sorting['sortBy']], $directions[$sorting['sortDir']])
                 ->paginate(6)
                 ->appends($sorting),
             'filters' => $sorting,
-        ]);
+        ])->meta('Styles', 'Browse a database of texture packs and styles to prettyify your experience.');
     }
 
-    public function create()
+    public function create(): Responsable
     {
-        return Inertia::render('Styles/Create');
+        return page('Styles/Create')
+            ->meta('Create New Style', 'blah blah blah');
     }
 
     public function store(Request $request)
@@ -73,7 +75,9 @@ public function store(Request $request)
 
     public function show(Style $style)
     {
-        return Inertia::render('Styles/Show');
+        return page('Styles/Show', [
+            'style' => $style->load(['author', 'files', 'tags'])
+        ])->meta($style->name, $style->blurb);
     }
 
     public function edit(Style $style)

diff --git a/app/Models/Forge/Style.php b/app/Models/Forge/Style.php
@@ -4,7 +4,7 @@
 
 use App\Models\Content\Tag;
 use App\Models\Media;
-use Illuminate\Database\Eloquent\Casts\Attribute;
+use App\Models\System\User;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\MorphMany;
@@ -17,7 +17,13 @@ class Style extends Model
 {
     use HasFactory;
 
-    public function files(): MorphMany {
+    public function author(): \Illuminate\Database\Eloquent\Relations\BelongsTo
+    {
+        return $this->belongsTo(User::class, 'author_id');
+    }
+
+    public function files(): MorphMany
+    {
         return $this->morphMany(Media::class, 'owner');
     }
 

diff --git a/config/passport.php b/config/passport.php
@@ -59,7 +59,7 @@
 
     'storage' => [
         'database' => [
-            'connection' => env('DB_CONNECTION', 'mysql'),
+            'connection' => null,
         ],
     ],
 

diff --git a/resources/js/Components/PostPad.vue b/resources/js/Components/PostPad.vue
@@ -1,5 +1,4 @@
 <script setup>
-import Toggle from "@/Components/Toggle.vue";
 import TipTap from "@/Components/TipTap.vue";
 import Post from "@/Components/Post.vue";
 import Button from "@/Jetstream/Button.vue";
@@ -11,6 +10,7 @@ import prettyBytes from "pretty-bytes";
 import {usePage} from "@inertiajs/vue3";
 import {getUser} from "../util.js";
 import Checkbox from "@/Jetstream/Checkbox.vue";
+import Icon from "@/Components/Icon.vue";
 
 const props = defineProps({
     modelValue: {
@@ -75,13 +75,10 @@ resumable.value.on('fileProgress', function(file, message){
 <template>
     <div class="pane !p-0 border border-ui-700">
         <TipTap v-model="value.body"/>
-<!--    <textarea v-else v-model="value.body" class="resize-none resize-y !rounded-none w-full bg-neutral-100 dark:bg-neutral-900"></textarea>-->
         <div class="!hidden y gap-2 p-4 bg-ui-800">
             <span class="tracking-widest uppercase text-sm text-ui-500">Attachments:</span>
             <div ref="dropbox" class="y cursor-pointer place-items-center gap-2 p-4 rounded border-2 text-ui-500 border-dashed border-ui-700 bg-ui-900">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
-                </svg>
+                <Icon class="w-8" size="24" type="outline" name="arrow-up-tray"/>
                 <span>Click or drag and drop some file(s) here to upload</span>
             </div>
             <div v-for="(file, id) in filelist" :key="id" class="y gap-2">
@@ -95,9 +92,7 @@ resumable.value.on('fileProgress', function(file, message){
                         - Gif
                         - Film
                         -->
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
-                            <path d="M3 3.5A1.5 1.5 0 014.5 2h6.879a1.5 1.5 0 011.06.44l4.122 4.12A1.5 1.5 0 0117 7.622V16.5a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 013 16.5v-13z" />
-                        </svg>
+                        <Icon class="w-4" size="20" type="solid" name="document"/>
                         <a class="text-sm text-blue-500 hover:underline truncate whitespace-nowrap" href="/download/X3D76GqO">{{ file.name }}</a>
                         <span class="text-xs whitespace-nowrap">({{ prettyBytes(file.size) }})</span>
                     </div>
@@ -121,11 +116,6 @@ resumable.value.on('fileProgress', function(file, message){
                     </select>
                 </div>
             </Tooltip>
-            <!-- TODO: this preview when rendered with a readonly tiptap doesnt update from the other tiptap editor -->
-<!--            <div class="flex items-center space-x-2">-->
-<!--                <Toggle v-model="showingPreview"/>-->
-<!--                <span>Show Preview</span>-->
-<!--            </div>-->
         </div>
     </div>
     <div class="x justify-center">

diff --git a/resources/js/Components/TipTap.vue b/resources/js/Components/TipTap.vue
@@ -1,9 +1,6 @@
 <script setup>
-import {EditorContent, generateJSON, useEditor, VueRenderer} from '@tiptap/vue-3'
-import {ref, toRef, watch} from "vue";
-import {Mention} from "@tiptap/extension-mention";
-import MentionList from "@/Components/MentionList.vue";
-import tippy from "tippy.js";
+import {EditorContent, useEditor,} from '@tiptap/vue-3'
+import {ref, watch} from "vue";
 import {Underline} from "@tiptap/extension-underline";
 import {Youtube} from "@tiptap/extension-youtube";
 import {TextAlign} from "@tiptap/extension-text-align";
@@ -14,11 +11,12 @@ import {CharacterCount} from "@tiptap/extension-character-count";
 import {Image} from "@tiptap/extension-image";
 import {Link} from "@tiptap/extension-link";
 import {StarterKit} from "@tiptap/starter-kit";
-
 import { HSpoiler } from "@/Components/TipTap/Extensions.js";
 
 import Dropdown from "@/Jetstream/Dropdown.vue";
 import Input from "@/Jetstream/Input.vue";
+import Icon from "@/Components/Icon.vue";
+import {getUser, isAuthenticated} from "@/util.js";
 
 const props = defineProps({
     modelValue: {
@@ -31,12 +29,7 @@ const props = defineProps({
     }
 })
 
-const source = ref(false)
-const usernames = ref([]);
-
-const searchNames = async (query) => {
-    return fetch('/api/mention?name=' + query).then(data => data.json())
-}
+const source = ref(false);
 
 const editable = ref(props.editable);
 watch(editable, (old, current) => {
@@ -55,61 +48,13 @@ const extensions = [
     Color,
     Link,
     CharacterCount,
-
     HSpoiler,
-
-    Mention.configure({
-        HTMLAttributes: {
-            class: 'p-1 overflow-hidden rounded bg-ui-900'
-        },
-        suggestion: {
-            items: ({ query }) => {
-                return searchNames(query)
-                //return ['admin', 'aladin', 'albert', 'amy'].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
-            },
-            render: () => {
-                let component, popup
-
-                return {
-                    onStart: props => {
-                        component = new VueRenderer(MentionList, {
-                            props,
-                            editor: props.editor,
-                        })
-
-                        popup = tippy('body', {
-                            getReferenceClientRect: props.clientRect,
-                            appendTo: () => document.body,
-                            content: component.element,
-                            showOnCreate: true,
-                            interactive: true,
-                            trigger: 'manual',
-                            placement: 'bottom-start',
-                        })
-                    },
-                    onUpdate(props) {
-                        component.updateProps(props)
-
-                        popup[0].setProps({
-                            getReferenceClientRect: props.clientRect,
-                        })
-                    },
-                    onKeyDown(props) {
-                        return component.ref?.onKeyDown(props)
-                    },
-                    onExit() {
-                        popup[0].destroy()
-                        component.destroy()
-                    },
-                }
-            }
-        }})
+    // TODO: Mentions
 ];
 const editor = useEditor({
     extensions: extensions,
     content: props.modelValue,
     onUpdate: () => {
-        //emit('update:modelValue', JSON.stringify(editor.value.getJSON()))
         emit('update:modelValue', editor.value.getHTML())
     },
     onCreate: () => {
@@ -133,22 +78,11 @@ const addSpoiler = () => {
 
 const addVideoURL = ref('');
 
-watch(props.modelvalue, (old, current) => {
-    // HTML
-    //const isSame = editor.value.getHTML() === old
-
-    // JSON
-    //const isSame = JSON.stringify(editor.value.getJSON()) === JSON.stringify(value)
-
-    // if (isSame) {
-    //     return
-    // }
-
+watch(props.modelvalue, () => {
     editor.value.commands.setContent(props.modelValue, false)
-},
-    {
-        deep: true,
-    })
+}, {
+    deep: true,
+});
 </script>
 <template>
     <div class="y items-center">
@@ -173,38 +107,14 @@ watch(props.modelvalue, (old, current) => {
                 <button title="Blockquote" class="px-2 py-1 rounded" @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'bg-ui-700': editor.isActive('blockquote') }">
                     <span class="block px-1 scale-[1.8] translate-y-[.42rem]">&#128630;</span>
                 </button>
-                <button title="Bullet Points" class="px-2 py-1 rounded" @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'bg-ui-700': editor.isActive('bulletList') }">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
-                    </svg>
-                </button>
-                <button title="Numbered List" class="px-2 py-1 rounded" @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'bg-ui-700': editor.isActive('orderedList') }">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
-                    </svg>
-                </button>
+                <Icon title="Bullet Points" @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'bg-ui-700': editor.isActive('bulletList') }" class="mx-2 my-1 w-5" size="24" type="outline" name="list-bullet"/>
+                <Icon title="Numbered List" @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'bg-ui-700': editor.isActive('orderedList') }" class="mx-2 my-1 w-5" size="24" type="outline" name="queue-list"/>
             </div>
             <div class="x items-center p-1">
-                <button title="Undo" class="px-2 py-1 rounded" @click="editor.chain().focus().undo().run()">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                        <path fill-rule="evenodd" d="M7.793 2.232a.75.75 0 01-.025 1.06L3.622 7.25h10.003a5.375 5.375 0 010 10.75H10.75a.75.75 0 010-1.5h2.875a3.875 3.875 0 000-7.75H3.622l4.146 3.957a.75.75 0 01-1.036 1.085l-5.5-5.25a.75.75 0 010-1.085l5.5-5.25a.75.75 0 011.06.025z" clip-rule="evenodd" />
-                    </svg>
-                </button>
-                <button title="Redo" class="px-2 py-1 rounded" @click="editor.chain().focus().redo().run()">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                        <path fill-rule="evenodd" d="M12.207 2.232a.75.75 0 00.025 1.06l4.146 3.958H6.375a5.375 5.375 0 000 10.75H9.25a.75.75 0 000-1.5H6.375a3.875 3.875 0 010-7.75h10.003l-4.146 3.957a.75.75 0 001.036 1.085l5.5-5.25a.75.75 0 000-1.085l-5.5-5.25a.75.75 0 00-1.06.025z" clip-rule="evenodd" />
-                    </svg>
-                </button>
-                <button title="Source" class="px-2 py-1 rounded" v-if="$page.props.auth && $page.props.user.roles.includes('admin')" @click="source = !source" :class="{ 'bg-ui-700': source }">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
-                    </svg>
-                </button>
-                <button title="Spoiler" class="px-2 py-1 rounded" @click="addSpoiler">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
-                    </svg>
-                </button>
+                <Icon title="Undo" @click="editor.chain().focus().undo().run()" class="mx-2 my-1 w-5" size="24" type="outline" name="arrow-uturn-left"/>
+                <Icon title="Redo" @click="editor.chain().focus().undo().run()" class="mx-2 my-1 w-5" size="24" type="outline" name="arrow-uturn-right"/>
+                <Icon title="Source" @click="source = !source" v-if="isAuthenticated() && getUser().roles.includes('admin')" :class="{ 'bg-ui-700': source }" class="mx-2 my-1 w-5" size="24" type="outline" name="code-bracket"/>
+                <Icon title="Spoiler" @click="addSpoiler" class="mx-2 my-1 w-5" size="24" type="outline" name="eye-slash"/>
             </div>
             <div class="x items-center p-1">
                 <Dropdown class="hidden" align="left" width="fit">