before switch to turbo

assets/app.js

@@ -10,22 +10,58 @@ import 'fork-awesome/scss/fork-awesome.scss'
 import './styles/app.scss'
 import $ from 'jquery'
 import 'bootstrap'
+
+// Dropzone stuff move to component
+import {Dropzone} from 'dropzone'
+
+// TODO handle error (Chapter 26)
+const formElement = $('#dropzoneForm')
+if (formElement) {
+    const previewContent = $('#preview-content').html()
+    console.log(previewContent)
+    const dropzone = new Dropzone('#dropzoneForm', {
+        acceptedFiles: '.jpg, .jpeg, .png',
+        maxFiles: 1,
+        init: function () {
+            this.hiddenFileInput.removeAttribute('multiple')
+            this.on('maxfilesexceeded', (file) => {
+                this.removeAllFiles()
+                this.addFile(file)
+            })
+            this.on('error', (file, data) => {
+                console.log('error');
+                if (data.detail) {
+                    this.emit('error', file, data.detail)
+                }
+
+            })
+        }
+    })
+    console.log('filename', previewContent)
+    const mockFile = { name: previewContent }
+    console.log('file', mockFile)
+    dropzone.displayExistingFile(mockFile)
+}
+
+// End Dropzone stuff move to component
+
 //import './js/index'
 // needed for legacy code
 //global.$ = $
 
 if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
-	console.log('🎉 Dark mode is supported')
+    console.log('🎉 Dark mode is supported')
 }
 
 $(document).ready(() => {
-	console.log('ready')
-	$('#toggleSidebar').on('click', () => {
-		const toggleIcon = $('#toggleIcon')
-		toggleIcon.toggleClass('fa fa-lg fa-fw fa-caret-square-o-left')
-		toggleIcon.toggleClass('fa fa-lg fa-fw fa-caret-square-o-right')
-		$('#sidebar').toggleClass('active')
-	})
+    console.log('ready')
+    $('#toggleSidebar').on('click', () => {
+        const toggleIcon = $('#toggleIcon')
+        toggleIcon.toggleClass('fa fa-lg fa-fw fa-caret-square-o-left')
+        toggleIcon.toggleClass('fa fa-lg fa-fw fa-caret-square-o-right')
+        $('#sidebar').toggleClass('active')
+    })
 })
+
 // start the Stimulus application
 //import './bootstrap'

assets/js/components/_avatarDropzone.js

@@ -0,0 +1 @@
+i

assets/styles/app.css

@@ -1,3 +0,0 @@
-body {
-    background-color: lightgray;
-}

assets/styles/app.scss

@@ -18,13 +18,17 @@
 $primary: #FF8040;
 $jet-black: #0e0e10;
 
-$body-color: #3f3f3f;
-$list-group-bg: $body-color;
-$list-group-hover-bg: #232323;
-$list-group-active-bg: #232323;
-$list-group-action-active-bg: #232323;
 
-@import '~bootstrap';
+
+$body-color: #9f9f9f;
+$list-group: #232323;
+$list-group-bg: $list-group;
+$list-group-hover-bg: darken($list-group, 10%);
+$list-group-active-bg: $list-group;
+$list-group-action-active-bg: $list-group;
+
+@import 'bootstrap/scss/bootstrap';
+@import 'dropzone/dist/dropzone';
 
 @import './components/sidebar';
 
@@ -36,7 +40,16 @@ html, body {
   background: #0e0e10;
 }
 
+// Dropzone
 
+.dropzone .dz-preview.dz-image-preview {
+  background: transparent !important;
+}
+
+.article-author-img {
+  width: 80px;
+  margin: 15px;
+}
 
 ///