From 04d7d107d9b35cba167b0cd824ccd7dc411bb358 Mon Sep 17 00:00:00 2001 From: shibao Date: Thu, 2 Sep 2021 23:31:15 -0400 Subject: [PATCH] add font awesome --- assets/css/app.scss | 6 ++ assets/package-lock.json | 102 ++++++++++++++++++ assets/package.json | 2 + assets/webpack.config.js | 10 +- assets/yarn.lock | 15 ++- lib/cannery_web/live/component/topbar.ex | 9 +- .../templates/layout/topbar.html.eex | 9 +- 7 files changed, 141 insertions(+), 12 deletions(-) diff --git a/assets/css/app.scss b/assets/css/app.scss index 89407983..4ed7fc35 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -2,6 +2,12 @@ @import "tailwindcss/components"; @import "tailwindcss/utilities"; +$fa-font-path: "@fortawesome/fontawesome-free/webfonts"; +@import "@fortawesome/fontawesome-free/scss/fontawesome"; +@import "@fortawesome/fontawesome-free/scss/regular"; +@import "@fortawesome/fontawesome-free/scss/solid"; +@import "@fortawesome/fontawesome-free/scss/brands"; + @import "components"; /* LiveView specific classes for your customizations */ diff --git a/assets/package-lock.json b/assets/package-lock.json index 621c6f49..b189d879 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -6,6 +6,7 @@ "": { "license": "MIT", "dependencies": { + "@fortawesome/fontawesome-free": "^5.15.4", "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html", "phoenix_live_view": "file:../deps/phoenix_live_view", @@ -19,6 +20,7 @@ "copy-webpack-plugin": "^9.0.0", "css-loader": "^5.2.7", "css-minimizer-webpack-plugin": "^3.0.1", + "file-loader": "^6.2.0", "hard-source-webpack-plugin": "^0.13.1", "mini-css-extract-plugin": "^1.6.0", "node-sass": "^6.0.0", @@ -1379,6 +1381,15 @@ "node": ">=10.0.0" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", + "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4437,6 +4448,58 @@ "node": ">=0.8.0" } }, + "node_modules/file-loader": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz", + "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==", + "dev": true, + "dependencies": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^4.0.0 || ^5.0.0" + } + }, + "node_modules/file-loader/node_modules/loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + }, + "engines": { + "node": ">=8.9.0" + } + }, + "node_modules/file-loader/node_modules/schema-utils": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -13564,6 +13627,11 @@ "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==", "dev": true }, + "@fortawesome/fontawesome-free": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", + "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==" + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -16113,6 +16181,40 @@ "websocket-driver": ">=0.5.1" } }, + "file-loader": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz", + "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==", + "dev": true, + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0" + }, + "dependencies": { + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "schema-utils": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", + "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + } + } + }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", diff --git a/assets/package.json b/assets/package.json index 0b0db1ee..ed934c18 100644 --- a/assets/package.json +++ b/assets/package.json @@ -7,6 +7,7 @@ "watch": "webpack --mode development --watch --watch-options-stdin" }, "dependencies": { + "@fortawesome/fontawesome-free": "^5.15.4", "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html", "phoenix_live_view": "file:../deps/phoenix_live_view", @@ -20,6 +21,7 @@ "copy-webpack-plugin": "^9.0.0", "css-loader": "^5.2.7", "css-minimizer-webpack-plugin": "^3.0.1", + "file-loader": "^6.2.0", "hard-source-webpack-plugin": "^0.13.1", "mini-css-extract-plugin": "^1.6.0", "node-sass": "^6.0.0", diff --git a/assets/webpack.config.js b/assets/webpack.config.js index 8de17527..3969cc70 100644 --- a/assets/webpack.config.js +++ b/assets/webpack.config.js @@ -40,7 +40,15 @@ module.exports = (env, options) => { "css-loader", "postcss-loader", "sass-loader", - ], + ] + }, + { + test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: 'file-loader', + options: { + name: '[name].[ext]?[hash]', + outputPath: '../fonts' + } } ] }, diff --git a/assets/yarn.lock b/assets/yarn.lock index e7611261..ec047ca3 100644 --- a/assets/yarn.lock +++ b/assets/yarn.lock @@ -878,6 +878,11 @@ "resolved" "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz" "version" "0.5.3" +"@fortawesome/fontawesome-free@^5.15.4": + "integrity" "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==" + "resolved" "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz" + "version" "5.15.4" + "@nodelib/fs.scandir@2.1.5": "integrity" "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==" "resolved" "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz" @@ -2675,6 +2680,14 @@ dependencies: "websocket-driver" ">=0.5.1" +"file-loader@^6.2.0": + "integrity" "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==" + "resolved" "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz" + "version" "6.2.0" + dependencies: + "loader-utils" "^2.0.0" + "schema-utils" "^3.0.0" + "fill-range@^4.0.0": "integrity" "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=" "resolved" "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz" @@ -6735,7 +6748,7 @@ "resolved" "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.0.tgz" "version" "3.2.0" -"webpack@^5.50.0": +"webpack@^4.0.0 || ^5.0.0", "webpack@^5.50.0": "integrity" "sha512-hqxI7t/KVygs0WRv/kTgUW8Kl3YC81uyWQSo/7WUs5LsuRw0htH/fCwbVBGCuiX/t4s7qzjXFcf41O8Reiypag==" "resolved" "https://registry.npmjs.org/webpack/-/webpack-5.50.0.tgz" "version" "5.50.0" diff --git a/lib/cannery_web/live/component/topbar.ex b/lib/cannery_web/live/component/topbar.ex index 9309abaa..d82fae21 100644 --- a/lib/cannery_web/live/component/topbar.ex +++ b/lib/cannery_web/live/component/topbar.ex @@ -43,14 +43,13 @@ defmodule CanneryWeb.Live.Component.Topbar do <%# user settings %> <%= if @current_user do %>
  • - <%= @current_user.email %>
    • -
  • - <%= link "Settings", class: "hover:underline", + <%= link @current_user.email, class: "hover:underline", to: Routes.user_settings_path(CanneryWeb.Endpoint, :edit) %>
  • - <%= link "Log out", class: "hover:underline", - to: Routes.user_session_path(CanneryWeb.Endpoint, :delete), method: :delete %> + <%= link to: Routes.user_session_path(CanneryWeb.Endpoint, :delete), method: :delete do %> + + <% end %>
    • <%= if function_exported?(Routes, :live_dashboard_path, 2) do %> diff --git a/lib/cannery_web/templates/layout/topbar.html.eex b/lib/cannery_web/templates/layout/topbar.html.eex index 9220a417..53fbf6ca 100644 --- a/lib/cannery_web/templates/layout/topbar.html.eex +++ b/lib/cannery_web/templates/layout/topbar.html.eex @@ -9,14 +9,13 @@ <%# user settings %> <%= if assigns |> Map.has_key?(:current_user) && @current_user do %>
  • - <%= @current_user.email %>
    • -
  • - <%= link "Settings", class: "hover:underline", + <%= link @current_user.email, class: "hover:underline", to: Routes.user_settings_path(CanneryWeb.Endpoint, :edit) %>
  • - <%= link "Log out", class: "hover:underline", - to: Routes.user_session_path(CanneryWeb.Endpoint, :delete), method: :delete %> + <%= link to: Routes.user_session_path(CanneryWeb.Endpoint, :delete), method: :delete do %> + + <% end %>
    • <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>