get typescript working, alpinejs working, add flowbite ui framework, update dockerfile to install npm dependencies
This commit is contained in:
parent
f5c2b7d67e
commit
13c9ada901
GPG Key ID:
113DFB380F724A81
|
|
@ -0,0 +1,3 @@
|
||||||
|
nodejs 20.17.0
|
||||||
|
erlang 27.0.1
|
||||||
|
elixir 1.17.2
|
||||||
18
Dockerfile
18
Dockerfile
|
|
@ -51,6 +51,24 @@ COPY lib lib
|
||||||
|
|
||||||
COPY assets assets
|
COPY assets assets
|
||||||
|
|
||||||
|
# update the repository sources list
|
||||||
|
# and install dependencies
|
||||||
|
RUN apt-get update \
|
||||||
|
&& apt-get install -y curl \
|
||||||
|
&& apt-get -y autoclean
|
||||||
|
|
||||||
|
RUN mkdir /usr/local/nvm
|
||||||
|
ENV NVM_DIR /usr/local/nvm
|
||||||
|
ENV NODE_VERSION 20.17.0
|
||||||
|
RUN curl https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash \
|
||||||
|
&& . $NVM_DIR/nvm.sh \
|
||||||
|
&& nvm install $NODE_VERSION \
|
||||||
|
&& nvm alias default $NODE_VERSION \
|
||||||
|
&& nvm use default
|
||||||
|
|
||||||
|
ENV NODE_PATH $NVM_DIR/v$NODE_VERSION/lib/node_modules
|
||||||
|
ENV PATH $NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH
|
||||||
|
|
||||||
# compile assets
|
# compile assets
|
||||||
RUN mix assets.deploy
|
RUN mix assets.deploy
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { Alpine } from "alpinejs";
|
||||||
|
import { LiveSocket } from "phoenix_live_view";
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
liveSocket: LiveSocket;
|
||||||
|
Alpine: Alpine;
|
||||||
|
}
|
||||||
|
interface WindowEventMap {
|
||||||
|
"phx:demo-event": CustomEvent<{ name: string }>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
// If you want to use Phoenix channels, run `mix help phx.gen.channel`
|
|
||||||
// to get started and then uncomment the line below.
|
|
||||||
// import "./user_socket.js"
|
|
||||||
|
|
||||||
// You can include dependencies in two ways.
|
|
||||||
//
|
|
||||||
// The simplest option is to put them in assets/vendor and
|
|
||||||
// import them using relative paths:
|
|
||||||
//
|
|
||||||
// import "../vendor/some-package.js"
|
|
||||||
//
|
|
||||||
// Alternatively, you can `npm install some-package --prefix assets` and import
|
|
||||||
// them using a path starting with the package name:
|
|
||||||
//
|
|
||||||
// import "some-package"
|
|
||||||
//
|
|
||||||
|
|
||||||
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
|
|
||||||
import "phoenix_html"
|
|
||||||
// Establish Phoenix Socket and LiveView configuration.
|
|
||||||
import {Socket} from "phoenix"
|
|
||||||
import {LiveSocket} from "phoenix_live_view"
|
|
||||||
import topbar from "../vendor/topbar"
|
|
||||||
|
|
||||||
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
|
|
||||||
let liveSocket = new LiveSocket("/live", Socket, {
|
|
||||||
longPollFallbackMs: 2500,
|
|
||||||
params: {_csrf_token: csrfToken}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Show progress bar on live navigation and form submits
|
|
||||||
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
|
|
||||||
window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
|
|
||||||
window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
|
|
||||||
|
|
||||||
// connect if there are any LiveViews on the page
|
|
||||||
liveSocket.connect()
|
|
||||||
|
|
||||||
// expose liveSocket on window for web console debug logs and latency simulation:
|
|
||||||
// >> liveSocket.enableDebug()
|
|
||||||
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
|
|
||||||
// >> liveSocket.disableLatencySim()
|
|
||||||
window.liveSocket = liveSocket
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
// If you want to use Phoenix channels, run `mix help phx.gen.channel`
|
||||||
|
// to get started and then uncomment the line below.
|
||||||
|
// import "./user_socket.js"
|
||||||
|
|
||||||
|
// You can include dependencies in two ways.
|
||||||
|
//
|
||||||
|
// The simplest option is to put them in assets/vendor and
|
||||||
|
// import them using relative paths:
|
||||||
|
//
|
||||||
|
// import "../vendor/some-package.js"
|
||||||
|
//
|
||||||
|
// Alternatively, you can `npm install some-package --prefix assets` and import
|
||||||
|
// them using a path starting with the package name:
|
||||||
|
//
|
||||||
|
// import "some-package"
|
||||||
|
//
|
||||||
|
|
||||||
|
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
|
||||||
|
import "phoenix_html";
|
||||||
|
// Establish Phoenix Socket and LiveView configuration.
|
||||||
|
import { Socket } from "phoenix";
|
||||||
|
import { LiveSocket, ViewHook } from "phoenix_live_view";
|
||||||
|
import topbar from "topbar";
|
||||||
|
import Alpine, { XAttributes } from "alpinejs";
|
||||||
|
|
||||||
|
const Hooks: { [name: string]: Partial<ViewHook> } = {
|
||||||
|
HomeHeader: {
|
||||||
|
mounted() {
|
||||||
|
console.log("HomeHeader mounted on element: ", this.el);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
let csrfToken = document
|
||||||
|
.querySelector("meta[name='csrf-token']")
|
||||||
|
?.getAttribute("content");
|
||||||
|
let liveSocket = new LiveSocket("/live", Socket, {
|
||||||
|
hooks: Hooks,
|
||||||
|
|
||||||
|
params: { _csrf_token: csrfToken },
|
||||||
|
|
||||||
|
dom: {
|
||||||
|
onBeforeElUpdated(from, to) {
|
||||||
|
const stack = (from as HTMLElement & XAttributes)._x_dataStack;
|
||||||
|
|
||||||
|
if (stack) {
|
||||||
|
Alpine.clone(from, to);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show progress bar on live navigation and form submits
|
||||||
|
topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
|
||||||
|
window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300));
|
||||||
|
window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide());
|
||||||
|
|
||||||
|
// connect if there are any LiveViews on the page
|
||||||
|
liveSocket.connect();
|
||||||
|
|
||||||
|
// expose liveSocket on window for web console debug logs and latency simulation:
|
||||||
|
// >> liveSocket.enableDebug()
|
||||||
|
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
|
||||||
|
// >> liveSocket.disableLatencySim()
|
||||||
|
window.liveSocket = liveSocket;
|
||||||
|
window.Alpine = Alpine;
|
||||||
|
Alpine.start();
|
||||||
|
|
||||||
|
// Add handler for custom event
|
||||||
|
window.addEventListener(`phx:demo-event`, async (e) => {
|
||||||
|
console.log(`Hello ${e.detail.name}`);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,338 @@
|
||||||
|
{
|
||||||
|
"name": "assets",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"dependencies": {
|
||||||
|
"alpinejs": "^3.14.1",
|
||||||
|
"topbar": "^3.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/alpinejs": "^3.13.10",
|
||||||
|
"@types/phoenix": "^1.6.5",
|
||||||
|
"@types/phoenix_live_view": "^0.18.5",
|
||||||
|
"flowbite": "^2.5.1",
|
||||||
|
"typescript": "^5.5.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@popperjs/core": {
|
||||||
|
"version": "2.11.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||||
|
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/popperjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@rollup/plugin-node-resolve": {
|
||||||
|
"version": "15.2.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz",
|
||||||
|
"integrity": "sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@rollup/pluginutils": "^5.0.1",
|
||||||
|
"@types/resolve": "1.20.2",
|
||||||
|
"deepmerge": "^4.2.2",
|
||||||
|
"is-builtin-module": "^3.2.1",
|
||||||
|
"is-module": "^1.0.0",
|
||||||
|
"resolve": "^1.22.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"rollup": "^2.78.0||^3.0.0||^4.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"rollup": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@rollup/pluginutils": {
|
||||||
|
"version": "5.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
|
||||||
|
"integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/estree": "^1.0.0",
|
||||||
|
"estree-walker": "^2.0.2",
|
||||||
|
"picomatch": "^2.3.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"rollup": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/alpinejs": {
|
||||||
|
"version": "3.13.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/alpinejs/-/alpinejs-3.13.10.tgz",
|
||||||
|
"integrity": "sha512-ah53tF6mWuuwerpDE7EHwbZErNDJQlsLISPqJhYj2RZ9nuTYbRknSkqebUd3igkhLIZKkPa7IiXjSn9qsU9O2w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/@types/estree": {
|
||||||
|
"version": "1.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
|
||||||
|
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/@types/phoenix": {
|
||||||
|
"version": "1.6.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.5.tgz",
|
||||||
|
"integrity": "sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/@types/phoenix_live_view": {
|
||||||
|
"version": "0.18.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/phoenix_live_view/-/phoenix_live_view-0.18.5.tgz",
|
||||||
|
"integrity": "sha512-mxj3KVkp+wX+hLFAILTbfIx5Q890TBgs/jxc6nmmVv6bW6Z9qer/5tZtGOcL3IES75QqqOHSTrjwwz0iZBs0lw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/phoenix": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@types/resolve": {
|
||||||
|
"version": "1.20.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
|
||||||
|
"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"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==",
|
||||||
|
"license": "MIT",
|
||||||
|
"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==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/alpinejs": {
|
||||||
|
"version": "3.14.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.14.1.tgz",
|
||||||
|
"integrity": "sha512-ICar8UsnRZAYvv/fCNfNeKMXNoXGUfwHrjx7LqXd08zIP95G2d9bAOuaL97re+1mgt/HojqHsfdOLo/A5LuWgQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@vue/reactivity": "~3.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/builtin-modules": {
|
||||||
|
"version": "3.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
|
||||||
|
"integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/deepmerge": {
|
||||||
|
"version": "4.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
|
||||||
|
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/estree-walker": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/flowbite": {
|
||||||
|
"version": "2.5.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.5.1.tgz",
|
||||||
|
"integrity": "sha512-7jP1jy9c3QP7y+KU9lc8ueMkTyUdMDvRP+lteSWgY5TigSZjf9K1kqZxmqjhbx2gBnFQxMl1GAjVThCa8cEpKA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@popperjs/core": "^2.9.3",
|
||||||
|
"flowbite-datepicker": "^1.3.0",
|
||||||
|
"mini-svg-data-uri": "^1.4.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/flowbite-datepicker": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-CLVqzuoE2vkUvWYK/lJ6GzT0be5dlTbH3uuhVwyB67+PjqJWABm2wv68xhBf5BqjpBxvTSQ3mrmLHpPJ2tvrSQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||||
|
"flowbite": "^2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/function-bind": {
|
||||||
|
"version": "1.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||||
|
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/hasown": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"function-bind": "^1.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/is-builtin-module": {
|
||||||
|
"version": "3.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
|
||||||
|
"integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"builtin-modules": "^3.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/is-core-module": {
|
||||||
|
"version": "2.15.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
|
||||||
|
"integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"hasown": "^2.0.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/is-module": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/mini-svg-data-uri": {
|
||||||
|
"version": "1.4.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||||
|
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"bin": {
|
||||||
|
"mini-svg-data-uri": "cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/path-parse": {
|
||||||
|
"version": "1.0.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
|
||||||
|
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/picomatch": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||||
|
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.6"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/jonschlinkert"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/resolve": {
|
||||||
|
"version": "1.22.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
|
||||||
|
"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"is-core-module": "^2.13.0",
|
||||||
|
"path-parse": "^1.0.7",
|
||||||
|
"supports-preserve-symlinks-flag": "^1.0.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"resolve": "bin/resolve"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/supports-preserve-symlinks-flag": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.4"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/topbar": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/topbar/-/topbar-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-mhczD7KfYi1anfoMPKRdl0wPSWiYc0YOK4KyycYs3EaNT15pVVNDG5CtfgZcEBWIPJEdfR7r8K4hTXDD2ECBVQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/typescript": {
|
||||||
|
"version": "5.5.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
|
||||||
|
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"bin": {
|
||||||
|
"tsc": "bin/tsc",
|
||||||
|
"tsserver": "bin/tsserver"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.17"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/alpinejs": "^3.13.10",
|
||||||
|
"@types/phoenix": "^1.6.5",
|
||||||
|
"@types/phoenix_live_view": "^0.18.5",
|
||||||
|
"flowbite": "^2.5.1",
|
||||||
|
"typescript": "^5.5.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"typecheck": "tsc --noEmit --pretty"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"alpinejs": "^3.14.1",
|
||||||
|
"topbar": "^3.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,74 +1,92 @@
|
||||||
// See the Tailwind configuration guide for advanced usage
|
// See the Tailwind configuration guide for advanced usage
|
||||||
// https://tailwindcss.com/docs/configuration
|
// https://tailwindcss.com/docs/configuration
|
||||||
|
|
||||||
const plugin = require("tailwindcss/plugin")
|
const plugin = require("tailwindcss/plugin");
|
||||||
const fs = require("fs")
|
const fs = require("fs");
|
||||||
const path = require("path")
|
const path = require("path");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: [
|
content: ["./js/**/*.js", "../lib/quip_web.ex", "../lib/quip_web/**/*.*ex"],
|
||||||
"./js/**/*.js",
|
|
||||||
"../lib/quip_web.ex",
|
|
||||||
"../lib/quip_web/**/*.*ex"
|
|
||||||
],
|
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
brand: "#FD4F00",
|
brand: "#FD4F00",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require("@tailwindcss/forms"),
|
require("@tailwindcss/forms"),
|
||||||
|
require("flowbite/plugin"),
|
||||||
// Allows prefixing tailwind classes with LiveView classes to add rules
|
// Allows prefixing tailwind classes with LiveView classes to add rules
|
||||||
// only when LiveView classes are applied, for example:
|
// only when LiveView classes are applied, for example:
|
||||||
//
|
//
|
||||||
// <div class="phx-click-loading:animate-ping">
|
// <div class="phx-click-loading:animate-ping">
|
||||||
//
|
//
|
||||||
plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
|
plugin(({ addVariant }) =>
|
||||||
plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
|
addVariant("phx-click-loading", [
|
||||||
plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
|
".phx-click-loading&",
|
||||||
|
".phx-click-loading &",
|
||||||
|
])
|
||||||
|
),
|
||||||
|
plugin(({ addVariant }) =>
|
||||||
|
addVariant("phx-submit-loading", [
|
||||||
|
".phx-submit-loading&",
|
||||||
|
".phx-submit-loading &",
|
||||||
|
])
|
||||||
|
),
|
||||||
|
plugin(({ addVariant }) =>
|
||||||
|
addVariant("phx-change-loading", [
|
||||||
|
".phx-change-loading&",
|
||||||
|
".phx-change-loading &",
|
||||||
|
])
|
||||||
|
),
|
||||||
|
|
||||||
// Embeds Heroicons (https://heroicons.com) into your app.css bundle
|
// Embeds Heroicons (https://heroicons.com) into your app.css bundle
|
||||||
// See your `CoreComponents.icon/1` for more information.
|
// See your `CoreComponents.icon/1` for more information.
|
||||||
//
|
//
|
||||||
plugin(function({matchComponents, theme}) {
|
plugin(function ({ matchComponents, theme }) {
|
||||||
let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
|
let iconsDir = path.join(__dirname, "../deps/heroicons/optimized");
|
||||||
let values = {}
|
let values = {};
|
||||||
let icons = [
|
let icons = [
|
||||||
["", "/24/outline"],
|
["", "/24/outline"],
|
||||||
["-solid", "/24/solid"],
|
["-solid", "/24/solid"],
|
||||||
["-mini", "/20/solid"],
|
["-mini", "/20/solid"],
|
||||||
["-micro", "/16/solid"]
|
["-micro", "/16/solid"],
|
||||||
]
|
];
|
||||||
icons.forEach(([suffix, dir]) => {
|
icons.forEach(([suffix, dir]) => {
|
||||||
fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
|
fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
|
||||||
let name = path.basename(file, ".svg") + suffix
|
let name = path.basename(file, ".svg") + suffix;
|
||||||
values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
|
values[name] = { name, fullPath: path.join(iconsDir, dir, file) };
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
matchComponents({
|
matchComponents(
|
||||||
"hero": ({name, fullPath}) => {
|
{
|
||||||
let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
|
hero: ({ name, fullPath }) => {
|
||||||
let size = theme("spacing.6")
|
let content = fs
|
||||||
|
.readFileSync(fullPath)
|
||||||
|
.toString()
|
||||||
|
.replace(/\r?\n|\r/g, "");
|
||||||
|
let size = theme("spacing.6");
|
||||||
if (name.endsWith("-mini")) {
|
if (name.endsWith("-mini")) {
|
||||||
size = theme("spacing.5")
|
size = theme("spacing.5");
|
||||||
} else if (name.endsWith("-micro")) {
|
} else if (name.endsWith("-micro")) {
|
||||||
size = theme("spacing.4")
|
size = theme("spacing.4");
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
[`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
|
[`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
|
||||||
"-webkit-mask": `var(--hero-${name})`,
|
"-webkit-mask": `var(--hero-${name})`,
|
||||||
"mask": `var(--hero-${name})`,
|
mask: `var(--hero-${name})`,
|
||||||
"mask-repeat": "no-repeat",
|
"mask-repeat": "no-repeat",
|
||||||
"background-color": "currentColor",
|
"background-color": "currentColor",
|
||||||
"vertical-align": "middle",
|
"vertical-align": "middle",
|
||||||
"display": "inline-block",
|
display: "inline-block",
|
||||||
"width": size,
|
width: size,
|
||||||
"height": size
|
height: size,
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
}, {values})
|
},
|
||||||
})
|
{ values }
|
||||||
]
|
);
|
||||||
}
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||||
|
|
||||||
|
/* Projects */
|
||||||
|
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
|
||||||
|
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||||
|
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
|
||||||
|
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
|
||||||
|
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||||
|
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||||
|
|
||||||
|
/* Language and Environment */
|
||||||
|
"target": "es2017" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
|
||||||
|
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||||
|
// "jsx": "preserve", /* Specify what JSX code is generated. */
|
||||||
|
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
|
||||||
|
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||||
|
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
|
||||||
|
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||||
|
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
|
||||||
|
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
|
||||||
|
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||||
|
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||||
|
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
|
||||||
|
|
||||||
|
/* Modules */
|
||||||
|
"module": "commonjs" /* Specify what module code is generated. */,
|
||||||
|
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||||
|
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||||
|
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||||
|
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||||
|
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||||
|
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
|
||||||
|
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||||
|
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||||
|
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
|
||||||
|
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
|
||||||
|
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
|
||||||
|
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
|
||||||
|
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
|
||||||
|
// "resolveJsonModule": true, /* Enable importing .json files. */
|
||||||
|
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
|
||||||
|
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
|
||||||
|
|
||||||
|
/* JavaScript Support */
|
||||||
|
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
|
||||||
|
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||||
|
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
|
||||||
|
|
||||||
|
/* Emit */
|
||||||
|
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||||
|
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||||
|
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||||
|
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||||
|
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||||
|
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
|
||||||
|
// "outDir": "./", /* Specify an output folder for all emitted files. */
|
||||||
|
// "removeComments": true, /* Disable emitting comments. */
|
||||||
|
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||||
|
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||||
|
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||||
|
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||||
|
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||||
|
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||||
|
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||||
|
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||||
|
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
|
||||||
|
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
|
||||||
|
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||||
|
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
|
||||||
|
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||||
|
|
||||||
|
/* Interop Constraints */
|
||||||
|
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||||
|
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
|
||||||
|
// "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
|
||||||
|
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||||
|
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
|
||||||
|
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||||
|
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
|
||||||
|
|
||||||
|
/* Type Checking */
|
||||||
|
"strict": true /* Enable all strict type-checking options. */,
|
||||||
|
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
||||||
|
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
|
||||||
|
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||||
|
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
|
||||||
|
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||||
|
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
|
||||||
|
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
|
||||||
|
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||||
|
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
|
||||||
|
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
|
||||||
|
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||||
|
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||||
|
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||||
|
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
|
||||||
|
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||||
|
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
|
||||||
|
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||||
|
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||||
|
|
||||||
|
/* Completeness */
|
||||||
|
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||||
|
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,165 +0,0 @@
|
||||||
/**
|
|
||||||
* @license MIT
|
|
||||||
* topbar 2.0.0, 2023-02-04
|
|
||||||
* https://buunguyen.github.io/topbar
|
|
||||||
* Copyright (c) 2021 Buu Nguyen
|
|
||||||
*/
|
|
||||||
(function (window, document) {
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
// https://gist.github.com/paulirish/1579671
|
|
||||||
(function () {
|
|
||||||
var lastTime = 0;
|
|
||||||
var vendors = ["ms", "moz", "webkit", "o"];
|
|
||||||
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
|
||||||
window.requestAnimationFrame =
|
|
||||||
window[vendors[x] + "RequestAnimationFrame"];
|
|
||||||
window.cancelAnimationFrame =
|
|
||||||
window[vendors[x] + "CancelAnimationFrame"] ||
|
|
||||||
window[vendors[x] + "CancelRequestAnimationFrame"];
|
|
||||||
}
|
|
||||||
if (!window.requestAnimationFrame)
|
|
||||||
window.requestAnimationFrame = function (callback, element) {
|
|
||||||
var currTime = new Date().getTime();
|
|
||||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
|
||||||
var id = window.setTimeout(function () {
|
|
||||||
callback(currTime + timeToCall);
|
|
||||||
}, timeToCall);
|
|
||||||
lastTime = currTime + timeToCall;
|
|
||||||
return id;
|
|
||||||
};
|
|
||||||
if (!window.cancelAnimationFrame)
|
|
||||||
window.cancelAnimationFrame = function (id) {
|
|
||||||
clearTimeout(id);
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
var canvas,
|
|
||||||
currentProgress,
|
|
||||||
showing,
|
|
||||||
progressTimerId = null,
|
|
||||||
fadeTimerId = null,
|
|
||||||
delayTimerId = null,
|
|
||||||
addEvent = function (elem, type, handler) {
|
|
||||||
if (elem.addEventListener) elem.addEventListener(type, handler, false);
|
|
||||||
else if (elem.attachEvent) elem.attachEvent("on" + type, handler);
|
|
||||||
else elem["on" + type] = handler;
|
|
||||||
},
|
|
||||||
options = {
|
|
||||||
autoRun: true,
|
|
||||||
barThickness: 3,
|
|
||||||
barColors: {
|
|
||||||
0: "rgba(26, 188, 156, .9)",
|
|
||||||
".25": "rgba(52, 152, 219, .9)",
|
|
||||||
".50": "rgba(241, 196, 15, .9)",
|
|
||||||
".75": "rgba(230, 126, 34, .9)",
|
|
||||||
"1.0": "rgba(211, 84, 0, .9)",
|
|
||||||
},
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowColor: "rgba(0, 0, 0, .6)",
|
|
||||||
className: null,
|
|
||||||
},
|
|
||||||
repaint = function () {
|
|
||||||
canvas.width = window.innerWidth;
|
|
||||||
canvas.height = options.barThickness * 5; // need space for shadow
|
|
||||||
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
ctx.shadowBlur = options.shadowBlur;
|
|
||||||
ctx.shadowColor = options.shadowColor;
|
|
||||||
|
|
||||||
var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
|
|
||||||
for (var stop in options.barColors)
|
|
||||||
lineGradient.addColorStop(stop, options.barColors[stop]);
|
|
||||||
ctx.lineWidth = options.barThickness;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(0, options.barThickness / 2);
|
|
||||||
ctx.lineTo(
|
|
||||||
Math.ceil(currentProgress * canvas.width),
|
|
||||||
options.barThickness / 2
|
|
||||||
);
|
|
||||||
ctx.strokeStyle = lineGradient;
|
|
||||||
ctx.stroke();
|
|
||||||
},
|
|
||||||
createCanvas = function () {
|
|
||||||
canvas = document.createElement("canvas");
|
|
||||||
var style = canvas.style;
|
|
||||||
style.position = "fixed";
|
|
||||||
style.top = style.left = style.right = style.margin = style.padding = 0;
|
|
||||||
style.zIndex = 100001;
|
|
||||||
style.display = "none";
|
|
||||||
if (options.className) canvas.classList.add(options.className);
|
|
||||||
document.body.appendChild(canvas);
|
|
||||||
addEvent(window, "resize", repaint);
|
|
||||||
},
|
|
||||||
topbar = {
|
|
||||||
config: function (opts) {
|
|
||||||
for (var key in opts)
|
|
||||||
if (options.hasOwnProperty(key)) options[key] = opts[key];
|
|
||||||
},
|
|
||||||
show: function (delay) {
|
|
||||||
if (showing) return;
|
|
||||||
if (delay) {
|
|
||||||
if (delayTimerId) return;
|
|
||||||
delayTimerId = setTimeout(() => topbar.show(), delay);
|
|
||||||
} else {
|
|
||||||
showing = true;
|
|
||||||
if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
|
|
||||||
if (!canvas) createCanvas();
|
|
||||||
canvas.style.opacity = 1;
|
|
||||||
canvas.style.display = "block";
|
|
||||||
topbar.progress(0);
|
|
||||||
if (options.autoRun) {
|
|
||||||
(function loop() {
|
|
||||||
progressTimerId = window.requestAnimationFrame(loop);
|
|
||||||
topbar.progress(
|
|
||||||
"+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
|
|
||||||
);
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
progress: function (to) {
|
|
||||||
if (typeof to === "undefined") return currentProgress;
|
|
||||||
if (typeof to === "string") {
|
|
||||||
to =
|
|
||||||
(to.indexOf("+") >= 0 || to.indexOf("-") >= 0
|
|
||||||
? currentProgress
|
|
||||||
: 0) + parseFloat(to);
|
|
||||||
}
|
|
||||||
currentProgress = to > 1 ? 1 : to;
|
|
||||||
repaint();
|
|
||||||
return currentProgress;
|
|
||||||
},
|
|
||||||
hide: function () {
|
|
||||||
clearTimeout(delayTimerId);
|
|
||||||
delayTimerId = null;
|
|
||||||
if (!showing) return;
|
|
||||||
showing = false;
|
|
||||||
if (progressTimerId != null) {
|
|
||||||
window.cancelAnimationFrame(progressTimerId);
|
|
||||||
progressTimerId = null;
|
|
||||||
}
|
|
||||||
(function loop() {
|
|
||||||
if (topbar.progress("+.1") >= 1) {
|
|
||||||
canvas.style.opacity -= 0.05;
|
|
||||||
if (canvas.style.opacity <= 0.05) {
|
|
||||||
canvas.style.display = "none";
|
|
||||||
fadeTimerId = null;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
fadeTimerId = window.requestAnimationFrame(loop);
|
|
||||||
})();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
if (typeof module === "object" && typeof module.exports === "object") {
|
|
||||||
module.exports = topbar;
|
|
||||||
} else if (typeof define === "function" && define.amd) {
|
|
||||||
define(function () {
|
|
||||||
return topbar;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.topbar = topbar;
|
|
||||||
}
|
|
||||||
}.call(this, window, document));
|
|
||||||
|
|
@ -36,7 +36,7 @@ config :esbuild,
|
||||||
version: "0.17.11",
|
version: "0.17.11",
|
||||||
quip: [
|
quip: [
|
||||||
args:
|
args:
|
||||||
~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
|
~w(js/app.ts --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
|
||||||
cd: Path.expand("../assets", __DIR__),
|
cd: Path.expand("../assets", __DIR__),
|
||||||
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
|
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,8 @@ config :quip, QuipWeb.Endpoint,
|
||||||
secret_key_base: "l4+6blY1rcppRaUjqSzQBM2ZZBfVwIobcktDvsq1eYMd+sMjaRhY0uSdI2qDTUlL",
|
secret_key_base: "l4+6blY1rcppRaUjqSzQBM2ZZBfVwIobcktDvsq1eYMd+sMjaRhY0uSdI2qDTUlL",
|
||||||
watchers: [
|
watchers: [
|
||||||
esbuild: {Esbuild, :install_and_run, [:quip, ~w(--sourcemap=inline --watch)]},
|
esbuild: {Esbuild, :install_and_run, [:quip, ~w(--sourcemap=inline --watch)]},
|
||||||
tailwind: {Tailwind, :install_and_run, [:quip, ~w(--watch)]}
|
tailwind: {Tailwind, :install_and_run, [:quip, ~w(--watch)]},
|
||||||
|
npm: ["--prefix", "assets", "run", "typecheck", "--", "--watch"]
|
||||||
]
|
]
|
||||||
|
|
||||||
# ## SSL Support
|
# ## SSL Support
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
defmodule QuipWeb.DemoController do
|
||||||
|
use QuipWeb, :live_view
|
||||||
|
|
||||||
|
def handle_event("click", _, socket) do
|
||||||
|
{:noreply,
|
||||||
|
socket
|
||||||
|
|> push_event("demo-event", %{name: "World"})}
|
||||||
|
end
|
||||||
|
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="rounded-md bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
|
||||||
|
phx-click="click"
|
||||||
|
>
|
||||||
|
Click me
|
||||||
|
</button>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
@ -46,8 +46,16 @@
|
||||||
fill="#FD4F00"
|
fill="#FD4F00"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
|
<h1
|
||||||
Phoenix Framework
|
phx-hook="HomeHeader"
|
||||||
|
id="header"
|
||||||
|
class="text-brand mt-10 flex items-center text-sm font-semibold leading-6"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
x-data="{ message: 'I ❤️ Phoenix Framework with Alpine and TypeScript' }"
|
||||||
|
x-text="message"
|
||||||
|
>
|
||||||
|
</span>
|
||||||
<small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
|
<small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
|
||||||
v<%= Application.spec(:phoenix, :vsn) %>
|
v<%= Application.spec(:phoenix, :vsn) %>
|
||||||
</small>
|
</small>
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@ defmodule QuipWeb.Router do
|
||||||
pipe_through :browser
|
pipe_through :browser
|
||||||
|
|
||||||
get "/", PageController, :home
|
get "/", PageController, :home
|
||||||
|
live "/demo", DemoController
|
||||||
end
|
end
|
||||||
|
|
||||||
# Other scopes may use custom stacks.
|
# Other scopes may use custom stacks.
|
||||||
|
|
|
||||||
1
mix.exs
1
mix.exs
|
|
@ -75,6 +75,7 @@ defmodule Quip.MixProject do
|
||||||
"ecto.reset": ["ecto.drop", "ecto.setup"],
|
"ecto.reset": ["ecto.drop", "ecto.setup"],
|
||||||
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
|
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
|
||||||
"assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
|
"assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
|
||||||
|
"assets.typecheck": ["cmd npm --prefix assets run typecheck"],
|
||||||
"assets.build": ["tailwind quip", "esbuild quip"],
|
"assets.build": ["tailwind quip", "esbuild quip"],
|
||||||
"assets.deploy": [
|
"assets.deploy": [
|
||||||
"tailwind quip --minify",
|
"tailwind quip --minify",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue