diff --git a/.eslintrc.js b/.eslintrc.js index b902567..29acd4d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,7 +5,6 @@ module.exports = { }, 'extends': [ 'eslint:recommended', - 'plugin:vue/essential' ], 'parserOptions': { 'ecmaVersion': 12, diff --git a/app/resources/js/app.js b/app/resources/js/app.js index 7001168..eee7ccd 100644 --- a/app/resources/js/app.js +++ b/app/resources/js/app.js @@ -1,51 +1,15 @@ -import Vue from 'vue'; -import FileInfoModal from './components/file-info-modal.vue'; +import Alpine from 'alpinejs'; import hljs from 'highlight.js'; -new Vue({ - el: '#app', - components: { FileInfoModal }, - data: () => ({ - loading: true, - theme: 'light', - }), - computed: { - darkMode() { - return this.theme === 'dark'; - }, - lightMode() { - return this.theme === 'light'; - } - }, - methods: { - showFileInfo(filePath) { - this.$refs.fileInfoModal.show(filePath); - }, - toggleTheme() { - this.theme = this.lightMode ? 'dark' : 'light'; - }, - }, - created: function () { - this.theme = localStorage.theme || (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'); - }, - mounted: function () { - window.addEventListener('keyup', e => e.key === '/' && this.$refs.searchInput.focus()); +// Alpine.js components +import Application from './components/application.js'; +import FileInfoModal from './components/file-info-modal.js'; - window.addEventListener('scroll', function () { - if (window.scrollY > 10) { - this.$refs.scrollToTop.classList.remove('hidden'); - } else { - this.$refs.scrollToTop.classList.add('hidden'); - } - }.bind(this)); +Alpine.data('application', Application); +Alpine.data('file-info-modal', FileInfoModal); - this.loading = false; - }, - watch: { - theme(value) { - localStorage.setItem('theme', value); - } - } -}); +// Run Alpine.js +Alpine.start(); +// Highlight.js hljs.highlightAll(); diff --git a/app/resources/js/components/application.js b/app/resources/js/components/application.js new file mode 100644 index 0000000..34f312c --- /dev/null +++ b/app/resources/js/components/application.js @@ -0,0 +1,12 @@ +export default () => ({ + theme: 'light', + loading: true, + + init() { + this.theme = localStorage.theme || (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'); + }, + + toggleTheme() { + this.theme = this.theme == 'light' ? 'dark' : 'light'; + }, +}); diff --git a/app/resources/js/components/file-info-modal.js b/app/resources/js/components/file-info-modal.js new file mode 100644 index 0000000..63d3682 --- /dev/null +++ b/app/resources/js/components/file-info-modal.js @@ -0,0 +1,40 @@ +import axios from 'axios'; + +export default () => ({ + error: null, + filePath: 'file.info', + hashes: { + md5: '••••••••••••••••••••••••••••••••', + sha1: '••••••••••••••••••••••••••••••••••••••••', + sha256: '••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••' + }, + loading: true, + visible: false, + + get title() { + return this.filePath.split('/').pop(); + }, + + async show(filePath) { + this.filePath = filePath; + this.visible = true; + + try { + var response = await axios.get('?info=' + filePath); + } catch (error) { + this.error = error.response.request.statusText; + } + + this.hashes = response.data.hashes; + this.loading = false; + }, + + hide() { + this.visible = false; + + this.$nextTick(() => { + this.loading = true; + this.error = null; + }); + } +}); diff --git a/app/resources/js/components/file-info-modal.vue b/app/resources/js/components/file-info-modal.vue deleted file mode 100644 index 40152b7..0000000 --- a/app/resources/js/components/file-info-modal.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - diff --git a/app/resources/sass/app.scss b/app/resources/sass/app.scss index 4230944..94caf9f 100644 --- a/app/resources/sass/app.scss +++ b/app/resources/sass/app.scss @@ -19,6 +19,6 @@ $fa-font-path: "./webfonts"; @import "markdown.scss"; // Miscellaneous -[v-cloak] { - display: none; +[x-cloak] { + display: none !important; } diff --git a/app/views/components/file-info-modal.twig b/app/views/components/file-info-modal.twig new file mode 100644 index 0000000..487682f --- /dev/null +++ b/app/views/components/file-info-modal.twig @@ -0,0 +1,35 @@ +
+
+
+ + +
+ + +
+ + +
+

+ + + + + +
+
+
+
+ + +
diff --git a/app/views/components/file.twig b/app/views/components/file.twig index 84f6cce..567375d 100644 --- a/app/views/components/file.twig +++ b/app/views/components/file.twig @@ -17,10 +17,8 @@ {% if file.isFile %}
- diff --git a/app/views/components/header.twig b/app/views/components/header.twig index f761f54..36b2851 100644 --- a/app/views/components/header.twig +++ b/app/views/components/header.twig @@ -1,4 +1,4 @@ -