diff --git a/assets/js/app.js b/assets/js/app.js index 778f5d1..c72ccd9 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -26,26 +26,18 @@ import 'phoenix_html' import { Socket } from 'phoenix' import { LiveSocket } from 'phoenix_live_view' import topbar from 'topbar' +import Date from './date' +import DateTime from './datetime' import MaintainAttrs from './maintain_attrs' -import Alpine from 'alpinejs' const csrfTokenElement = document.querySelector("meta[name='csrf-token']") let csrfToken if (csrfTokenElement) { csrfToken = csrfTokenElement.getAttribute('content') } const liveSocket = new LiveSocket('/live', Socket, { - dom: { - onBeforeElUpdated (from, to) { - if (from._x_dataStack) { window.Alpine.clone(from, to) } - } - }, params: { _csrf_token: csrfToken }, - hooks: { MaintainAttrs } + hooks: { Date, DateTime, MaintainAttrs } }) -// alpine.js -window.Alpine = Alpine -Alpine.start() - // Show progress bar on live navigation and form submits topbar.config({ barThickness: 1, barColors: { 0: '#fff' }, shadowColor: 'rgba(0, 0, 0, .3)' }) window.addEventListener('phx:page-loading-start', info => topbar.show()) diff --git a/assets/js/date.js b/assets/js/date.js new file mode 100644 index 0000000..3c6922f --- /dev/null +++ b/assets/js/date.js @@ -0,0 +1,11 @@ +export default { + displayDate (el) { + const date = + Intl.DateTimeFormat([], { timeZone: 'Etc/UTC', dateStyle: 'short' }) + .format(new Date(el.dateTime)) + + el.innerText = date + }, + mounted () { this.displayDate(this.el) }, + updated () { this.displayDate(this.el) } +} diff --git a/assets/js/datetime.js b/assets/js/datetime.js new file mode 100644 index 0000000..ec19d48 --- /dev/null +++ b/assets/js/datetime.js @@ -0,0 +1,11 @@ +export default { + displayDateTime (el) { + const date = + Intl.DateTimeFormat([], { dateStyle: 'short', timeStyle: 'long' }) + .format(new Date(el.dateTime)) + + el.innerText = date + }, + mounted () { this.displayDateTime(this.el) }, + updated () { this.displayDateTime(this.el) } +} diff --git a/assets/package-lock.json b/assets/package-lock.json index 7c1ebf1..e0b745c 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -8,7 +8,6 @@ "dependencies": { "@fontsource/nunito-sans": "^4.5.8", "@fortawesome/fontawesome-free": "^6.1.1", - "alpinejs": "^3.10.2", "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html", "phoenix_live_view": "file:../deps/phoenix_live_view", @@ -38,19 +37,19 @@ "webpack-dev-server": "^4.9.0" }, "engines": { - "node": "18.12.1", - "npm": "8.19.2" + "node": "v18.9.1", + "npm": "8.19.1" } }, "../deps/phoenix": { - "version": "1.6.15", + "version": "1.6.16", "license": "MIT" }, "../deps/phoenix_html": { - "version": "3.2.0" + "version": "3.3.1" }, "../deps/phoenix_live_view": { - "version": "0.18.11", + "version": "0.18.18", "license": "MIT" }, "node_modules/@ampproject/remapping": { @@ -2277,19 +2276,6 @@ "@types/node": "*" } }, - "node_modules/@vue/reactivity": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", - "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", - "dependencies": { - "@vue/shared": "3.1.5" - } - }, - "node_modules/@vue/shared": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", - "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" - }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -2655,14 +2641,6 @@ "ajv": "^6.9.1" } }, - "node_modules/alpinejs": { - "version": "3.10.2", - "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.2.tgz", - "integrity": "sha512-P6DTX78J94FgsskS3eS23s26hfb0NWQZUidBnkUK7fId1x64/kLm5E79lL3HNItUmHDCKOHvfP8EAcuCVab89w==", - "dependencies": { - "@vue/reactivity": "~3.1.1" - } - }, "node_modules/ansi-html-community": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", @@ -14029,19 +14007,6 @@ "@types/node": "*" } }, - "@vue/reactivity": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", - "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", - "requires": { - "@vue/shared": "3.1.5" - } - }, - "@vue/shared": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", - "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" - }, "@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -14355,14 +14320,6 @@ "dev": true, "requires": {} }, - "alpinejs": { - "version": "3.10.2", - "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.10.2.tgz", - "integrity": "sha512-P6DTX78J94FgsskS3eS23s26hfb0NWQZUidBnkUK7fId1x64/kLm5E79lL3HNItUmHDCKOHvfP8EAcuCVab89w==", - "requires": { - "@vue/reactivity": "~3.1.1" - } - }, "ansi-html-community": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", diff --git a/assets/package.json b/assets/package.json index 626d7ad..d844a57 100644 --- a/assets/package.json +++ b/assets/package.json @@ -4,7 +4,7 @@ "license": "MIT", "engines": { "node": "v18.9.1", - "npm": "8.10.0" + "npm": "8.19.1" }, "scripts": { "deploy": "NODE_ENV=production webpack --mode production", @@ -15,7 +15,6 @@ "dependencies": { "@fontsource/nunito-sans": "^4.5.8", "@fortawesome/fontawesome-free": "^6.1.1", - "alpinejs": "^3.10.2", "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html", "phoenix_live_view": "file:../deps/phoenix_live_view", diff --git a/changelog.md b/changelog.md index 81042ba..91d106c 100644 --- a/changelog.md +++ b/changelog.md @@ -1,6 +1,7 @@ # v0.1.10 - Improve accessibility - Code quality improvements +- Fix dates displaying incorrectly # v0.1.9 - Improve server log diff --git a/lib/memex_web/components/core_components.ex b/lib/memex_web/components/core_components.ex index f089650..9ab0b1e 100644 --- a/lib/memex_web/components/core_components.ex +++ b/lib/memex_web/components/core_components.ex @@ -89,7 +89,7 @@ defmodule MemexWeb.CoreComponents do @doc """ Phoenix.Component for a