Compare commits

...

6 Commits

  1. 13
      CHANGELOG.md
  2. 17
      assets/css/app.scss
  3. 4
      assets/js/app.js
  4. 10
      assets/js/keyboard-navigation.js
  5. 13974
      assets/package-lock.json
  6. 30
      assets/package.json
  7. 28
      assets/webpack.config.js
  8. 3
      config/dev.exs
  9. 2
      lib/mirage_web/live/page_live.ex
  10. 20
      lib/mirage_web/live/page_live.html.leex
  11. 3
      lib/mirage_web/router.ex
  12. 4
      lib/mirage_web/templates/layout/_footer.html.eex
  13. 2
      lib/mirage_web/templates/layout/_header.html.eex
  14. 2
      mix.exs
  15. 12
      priv/repo/migrations/20210111174337_add_settings_data.exs
  16. 20
      priv/repo/migrations/20210206173536_add_settings_data2.exs

13
CHANGELOG.md

@ -5,6 +5,19 @@ See [Conventional Commits](Https://conventionalcommits.org) for commit guideline
<!-- changelog -->
## [v0.8.0](https://git.inhji.de/inhji/mirage/compare/v0.7.2...v0.8.0) (2021-02-06)
### Features:
* small css tweaks
* improve settings, add header_title setting
* simple keyboard navigation
## [v0.7.2](https://git.inhji.de/inhji/mirage/compare/v0.7.1...v0.7.2) (2021-02-06)

17
assets/css/app.scss

@ -85,6 +85,7 @@ main[role=main] {
footer {
padding: 2rem;
background: $bg-content;
}
.width-full {
@ -93,6 +94,10 @@ footer {
padding: 2rem;
}
section:not(.hero) + section {
margin-top: 2rem;
}
/* === Navigation === */
nav[role=navigation] {
@ -200,6 +205,13 @@ button[type=submit], a.button {
margin-top: 2rem;
}
kbd {
padding: 1px 3px;
border: 1px solid #111;
background: #222;
border-radius: 3px;
}
/* === Content === */
article {
@ -237,6 +249,11 @@ article {
margin-bottom: 1rem;
}
dl {
dt { font-weight: bold; }
dd { margin-bottom: 1rem; }
}
hr {
color: transparent;
height: 0;

4
assets/js/app.js

@ -17,6 +17,7 @@ import {Socket} from "phoenix"
import NProgress from "nprogress"
import {LiveSocket} from "phoenix_live_view"
import initEditor from "./editor.js"
import {keyDownHandler} from "./keyboard-navigation.js"
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
@ -25,6 +26,9 @@ let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToke
window.addEventListener("phx:page-loading-start", info => NProgress.start())
window.addEventListener("phx:page-loading-stop", info => NProgress.done())
// Handle Keypresses for navigation
window.addEventListener("keydown", keyDownHandler)
// connect if there are any LiveViews on the page
liveSocket.connect()

10
assets/js/keyboard-navigation.js

@ -0,0 +1,10 @@
export function keyDownHandler(e) {
switch (e.key) {
case "n":
window.location.href = '/notes';
break;
case "h":
window.location.href = '/';
break;
}
}

13974
assets/package-lock.json

File diff suppressed because it is too large

30
assets/package.json

@ -1,7 +1,5 @@
{
"repository": {},
"description": " ",
"license": "MIT",
"private": true,
"scripts": {
"deploy": "webpack --mode production",
"watch": "webpack --mode development --watch"
@ -17,19 +15,17 @@
"phoenix_live_view": "file:../deps/phoenix_live_view"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"file-loader": "^6.2.0",
"hard-source-webpack-plugin": "^0.13.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^8.0.2",
"terser-webpack-plugin": "^2.3.2",
"webpack": "4.41.5",
"webpack-cli": "^3.3.2"
"@babel/core": "^7.x",
"@babel/preset-env": "^7.x",
"babel-loader": "^8.x",
"copy-webpack-plugin": "^7.x",
"css-loader": "^5.x",
"css-minimizer-webpack-plugin": "^1.x",
"file-loader": "^6.x",
"mini-css-extract-plugin": "^1.x",
"sass": "^1.x",
"sass-loader": "^10.x",
"webpack": "5.x",
"webpack-cli": "^4.x"
}
}

28
assets/webpack.config.js

@ -1,30 +1,21 @@
const path = require('path');
const glob = require('glob');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = (env, options) => {
const devMode = options.mode !== 'production';
return {
optimization: {
minimizer: [
new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../priv/static/js'),
filename: '[name].js',
publicPath: '/js/'
},
devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
module: {
rules: [
{
@ -58,8 +49,17 @@ module.exports = (env, options) => {
},
plugins: [
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
]
.concat(devMode ? [new HardSourceWebpackPlugin()] : [])
new CopyWebpackPlugin({
patterns: [
{ from: 'static/', to: '../' }
]
})
],
optimization: {
minimizer: [
new CssMinimizerPlugin()
]
},
devtool: devMode ? 'source-map' : undefined
}
};

3
config/dev.exs

@ -25,7 +25,8 @@ config :mirage, MirageWeb.Endpoint,
"node_modules/webpack/bin/webpack.js",
"--mode",
"development",
"--watch-stdin",
"--watch",
"--watch-options-stdin",
cd: Path.expand("../assets", __DIR__)
]
]

2
lib/mirage_web/live/page_live.ex

@ -4,6 +4,6 @@ defmodule MirageWeb.PageLive do
@impl true
def mount(_params, _session, socket) do
settings = Mirage.Settings.list_settings_as_map()
{:ok, assign(socket, _settings: settings)}
{:ok, assign(socket, _s: settings)}
end
end

20
lib/mirage_web/live/page_live.html.leex

@ -1,6 +1,6 @@
<section class="hero">
<h1><%= raw @_settings.user_title %></h1>
<p><%= raw @_settings.user_tagline %></p>
<h1><%= raw @_s.user_title %></h1>
<p><%= raw @_s.user_tagline %></p>
</section>
<section class="grid width-full bg-content">
@ -31,3 +31,19 @@
</ul>
</div>
</section>
<section class="width-full bg-content">
<h2>Keyboard Navigation</h2>
<div class="content html">
<p>This page has some keyboard shortcuts to navigate it.</p>
<dl>
<dt><kbd>n</kbd></dt>
<dd>Navigates to notes</dd>
<dt><kbd>h</kbd></dt>
<dd>Navigates to home</dd>
</dl>
</div>
</section>

3
lib/mirage_web/router.ex

@ -5,8 +5,7 @@ defmodule MirageWeb.Router do
def fetch_settings(conn, _opts) do
settings = Mirage.Settings.list_settings_as_map()
IO.inspect(settings)
assign(conn, :_settings, settings)
assign(conn, :_s, settings)
end
pipeline :browser do

4
lib/mirage_web/templates/layout/_footer.html.eex

@ -1,3 +1,5 @@
<footer>
<%= raw @_settings.footer_text %>
<p>
<%= raw @_s.footer_text %>
</p>
</footer>

2
lib/mirage_web/templates/layout/_header.html.eex

@ -2,7 +2,7 @@
<nav role="navigation">
<ul>
<li class="brand">
<a href="/">Mirage</a>
<a href="/"><%= raw @_s.header_title %></a>
</li>
<li>
<a href="/notes">Notes</a>

2
mix.exs

@ -1,7 +1,7 @@
defmodule Mirage.MixProject do
use Mix.Project
@version "0.7.2"
@version "0.8.0"
def project do
[

12
priv/repo/migrations/20210111174337_add_settings_data.exs

@ -3,16 +3,20 @@ defmodule Mirage.Repo.Migrations.AddSettingsData do
alias Mirage.Settings.Setting
alias Ecto.Multi
import Ecto.Query, warn: false
@settings ["user_tagline", "user_title", "footer_text"]
def up do
Multi.new()
|> Multi.insert(:user_tagline, %Setting{name: "user_tagline", value: "some tagline"})
|> Multi.insert(:user_title, %Setting{name: "user_title", value: "Hi my name is John Void!"})
|> Multi.insert(:footer_text, %Setting{name: "footer_text", value: "2020 was fucking crazy"})
|> Multi.insert(:user_tagline, %Setting{name: "user_tagline", value: "some tagline", value_html: "some tagline"})
|> Multi.insert(:user_title, %Setting{name: "user_title", value: "Hi", value_html: "Hi"})
|> Multi.insert(:footer_text, %Setting{name: "footer_text", value: "2020", value_html: "2020"})
|> repo().transaction()
end
def down do
repo().delete_all(Setting)
from(s in Setting, where: s.name in @settings)
|> repo().delete_all()
end
end

20
priv/repo/migrations/20210206173536_add_settings_data2.exs

@ -0,0 +1,20 @@
defmodule Mirage.Repo.Migrations.AddSettingsData2 do
use Ecto.Migration
alias Mirage.Settings.Setting
alias Ecto.Multi
import Ecto.Query, warn: false
@settings ["header_title"]
def up do
Multi.new()
|> Multi.insert(:header_title, %Setting{name: "header_title", value: "Mirage", value_html: "Mirage"})
|> repo().transaction()
end
def down do
from(s in Setting, where: s.name in @settings)
|> repo().delete_all()
end
end
Loading…
Cancel
Save