Browse Source

feat(frontend): Add build logic.

jackyalcine 8 months ago
parent
commit
8db50e6bac
Signed by: Jacky Alciné <yo@jacky.wtf> GPG Key ID: 537A4F904B15268D
60 changed files with 2856 additions and 372 deletions
  1. 2
    0
      .gitignore
  2. 48
    0
      .postcssrc.js
  3. 37
    0
      .sassrc.js
  4. 21
    0
      .stylinelintrc.json
  5. 0
    2
      docker-compose.yml
  6. 2
    0
      docker/scripts/prepare.sh
  7. 2
    2
      mix.exs
  8. 2645
    339
      package-lock.json
  9. 27
    3
      package.json
  10. 0
    1
      priv/static/css/app.css
  11. BIN
      priv/static/favicon.ico
  12. 0
    3
      priv/static/js/app.js
  13. 5
    0
      tsconfig.json
  14. 3
    3
      web/endpoint.ex
  15. 32
    0
      web/static/app.scss
  16. 3
    0
      web/static/fonts.scss
  17. 0
    0
      web/static/images/logo.svg
  18. 0
    0
      web/static/images/marginalia/marginalia-artifficial-intelligence.png
  19. 0
    0
      web/static/images/marginalia/marginalia-bad-gateway.png
  20. 0
    0
      web/static/images/marginalia/marginalia-bitcoin-mining.png
  21. 0
    0
      web/static/images/marginalia/marginalia-car-rental.png
  22. 0
    0
      web/static/images/marginalia/marginalia-come-back-later.png
  23. 0
    0
      web/static/images/marginalia/marginalia-coming-soon.png
  24. 0
    0
      web/static/images/marginalia/marginalia-delete-confirmation.png
  25. 0
    0
      web/static/images/marginalia/marginalia-delivery.png
  26. 0
    0
      web/static/images/marginalia/marginalia-done.png
  27. 0
    0
      web/static/images/marginalia/marginalia-downloading.png
  28. 0
    0
      web/static/images/marginalia/marginalia-fatal-error.png
  29. 0
    0
      web/static/images/marginalia/marginalia-information-security.png
  30. 0
    0
      web/static/images/marginalia/marginalia-list-is-empty.png
  31. 0
    0
      web/static/images/marginalia/marginalia-location-access.png
  32. 0
    0
      web/static/images/marginalia/marginalia-logged-out.png
  33. 0
    0
      web/static/images/marginalia/marginalia-message-sent.png
  34. 0
    0
      web/static/images/marginalia/marginalia-navigation-support.png
  35. 0
    0
      web/static/images/marginalia/marginalia-no-comments.png
  36. 0
    0
      web/static/images/marginalia/marginalia-no-connection.png
  37. 0
    0
      web/static/images/marginalia/marginalia-online-shopping.png
  38. 0
    0
      web/static/images/marginalia/marginalia-order-complete.png
  39. 0
    0
      web/static/images/marginalia/marginalia-page-not-found.png
  40. 0
    0
      web/static/images/marginalia/marginalia-page-under-construction.png
  41. 0
    0
      web/static/images/marginalia/marginalia-payment-error.png
  42. 0
    0
      web/static/images/marginalia/marginalia-payment-processed.png
  43. 0
    0
      web/static/images/marginalia/marginalia-productive-work.png
  44. 0
    0
      web/static/images/marginalia/marginalia-searching.png
  45. 0
    0
      web/static/images/marginalia/marginalia-shipping.png
  46. 0
    0
      web/static/images/marginalia/marginalia-sign-in.png
  47. 0
    0
      web/static/images/marginalia/marginalia-success.png
  48. 0
    0
      web/static/images/marginalia/marginalia-unsubscribed.png
  49. 0
    0
      web/static/images/marginalia/marginalia-upgrade.png
  50. 0
    0
      web/static/images/marginalia/marginalia-uploading.png
  51. 0
    0
      web/static/images/marginalia/marginalia-waiting.png
  52. 0
    0
      web/static/images/marginalia/marginalia-welcome.png
  53. 0
    0
      web/static/images/marginalia/unsubscribed-2.png
  54. 1
    0
      web/static/js/app.ts
  55. 10
    0
      web/static/js/fonts.js
  56. 0
    0
      web/static/js/phoenix.js
  57. 1
    0
      web/static/vendor.scss
  58. 1
    1
      web/templates/auth/new.html.eex
  59. 10
    12
      web/templates/layout/app.html.eex
  60. 6
    6
      web/templates/page/index.html.eex

+ 2
- 0
.gitignore View File

@@ -17,3 +17,5 @@ erl_crash.dump
17 17
 .envrc
18 18
 node_modules
19 19
 .directory
20
+*.map
21
+priv/static/assets

+ 48
- 0
.postcssrc.js View File

@@ -0,0 +1,48 @@
1
+const ENV = process.env.ENV;
2
+const path = require('path');
3
+const CWD = process.cwd();
4
+
5
+module.exports = {
6
+  parser: 'postcss-scss',
7
+  plugins: {
8
+    'postcss-reporter': {
9
+      clearMessages: false
10
+    },
11
+    'postcss-import': {},
12
+    'postcss-url': [
13
+      { filter: '**/*wf', url: 'inline' }
14
+    ],
15
+    autoprefixer: {},
16
+    'postcss-strip-inline-comments': {},
17
+    'postcss-ordered-values': {},
18
+    'postcss-reduce-initial': {},
19
+    'postcss-combine-duplicated-selectors': {},
20
+    'postcss-normalize-charset': {},
21
+    'postcss-font-variant': {},
22
+    'postcss-font-display': {},
23
+    'postcss-font-smoothing': {},
24
+    'postcss-inline': {},
25
+    'postcss-pxtorem': {
26
+      unitPrecision: 8,
27
+      propWhiteList: [],
28
+      replace: true,
29
+      selectorBlackList: [],
30
+      minPixelValue: 8
31
+    },
32
+    cssnano: ENV === 'production' ? {
33
+      preset: [
34
+        'default',
35
+        {
36
+          calc: true,
37
+          colormin: true,
38
+          discardUnused: true,
39
+          normalizeUrl: true,
40
+        }
41
+      ]
42
+    } : false,
43
+    'css-mqpacker': [],
44
+    'mdcss': {
45
+      theme: require('mdcss-theme-github')
46
+    }
47
+  }
48
+};

+ 37
- 0
.sassrc.js View File

@@ -0,0 +1,37 @@
1
+const path = require('path')
2
+const CWD = process.cwd()
3
+const Eyeglass = require('eyeglass');
4
+var assetsDir = path.join(CWD, "web", "static");
5
+var nodeModulesDir = path.join(CWD, "node_modules");
6
+var buildDir = path.join(CWD, "priv", "static", "assets");
7
+
8
+const options = {
9
+  "includePaths": [
10
+    path.resolve(assetsDir),
11
+    path.resolve(nodeModulesDir)
12
+  ],
13
+  "relativeUrls": true,
14
+  "engines": {
15
+    "sass": require("sass"),
16
+  }
17
+}
18
+
19
+const eyeglass = new Eyeglass({
20
+  eyeglass: {
21
+    assets: {
22
+      httpPrefix: '/',
23
+      sources: [{
24
+          directory: assetsDir
25
+        },
26
+        {
27
+          directory: nodeModulesDir
28
+        }
29
+      ]
30
+    },
31
+    buildDir,
32
+    root: CWD,
33
+  },
34
+  ...options
35
+});
36
+
37
+module.exports = eyeglass.sassOptions();

+ 21
- 0
.stylinelintrc.json View File

@@ -0,0 +1,21 @@
1
+{
2
+  "extends": "stylelint-config-recommended-scss",
3
+  "rules": {
4
+    "block-no-empty": null,
5
+    "color-no-invalid-hex": true,
6
+    "comment-empty-line-before": [ "always", {
7
+      "ignore": ["stylelint-commands", "after-comment"]
8
+    } ],
9
+    "declaration-colon-space-after": "always",
10
+    "indentation": ["tab", {
11
+      "except": ["value"]
12
+    }],
13
+    "max-empty-lines": 2,
14
+    "rule-empty-line-before": [ "always", {
15
+      "except": ["first-nested"],
16
+      "ignore": ["after-comment"]
17
+    } ],
18
+    "unit-whitelist": ["em", "rem", "%", "s"],
19
+    "indentation": 2
20
+  }
21
+}

+ 0
- 2
docker-compose.yml View File

@@ -25,7 +25,6 @@ services:
25 25
       PROXY_PORT: ${PROXY_PORT}
26 26
       PROXY_SCHEME: ${PROXY_SCHEME}
27 27
       DATABASE_URL: ${DATABASE_URL}
28
-      UID: ${UID}
29 28
       GITHUB_CLIENT_ID: ${GITHUB_CLIENT_ID}
30 29
       GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
31 30
       GITLAB_CLIENT_ID: ${GITLAB_CLIENT_ID}
@@ -41,7 +40,6 @@ services:
41 40
       - "${PORT}:${PORT}"
42 41
     volumes:
43 42
       - "./:/opt/fortress"
44
-      - "./priv/repo/db:/opt/fortress/priv/repo/db"
45 43
     healthcheck:
46 44
       test: ["CMD", "/tmp/fortress-docker/healthcheck.sh"]
47 45
       interval: 60s

+ 2
- 0
docker/scripts/prepare.sh View File

@@ -12,6 +12,8 @@ apk add --verbose \
12 12
   coreutils \
13 13
   tzdata \
14 14
   curl \
15
+  nodejs \
16
+  npm \
15 17
   git \
16 18
   || exit 20
17 19
 

+ 2
- 2
mix.exs View File

@@ -30,8 +30,8 @@ defmodule Fortress.Mixfile do
30 30
     ]
31 31
   end
32 32
 
33
-  defp elixirc_paths(:test), do: ["lib", "test/support"]
34
-  defp elixirc_paths(_), do: ["lib"]
33
+  defp elixirc_paths(:test), do: ["lib", "web", "test/support"]
34
+  defp elixirc_paths(_), do: ["lib", "web"]
35 35
 
36 36
   defp deps do
37 37
     [

+ 2645
- 339
package-lock.json
File diff suppressed because it is too large
View File


+ 27
- 3
package.json View File

@@ -8,8 +8,8 @@
8 8
     "test": "web/static/js/test"
9 9
   },
10 10
   "scripts": {
11
-    "watch": "npx parcel serve web/static/images/* web/static/images/**/* web/static/js/*.ts web/static/*css --out-dir priv/static/assets --cache-dir tmp/parcel --global Fortress",
12
-    "build": "npx parcel build web/static/images/* web/static/images/**/* web/static/js/*.ts web/static/*css --out-dir priv/static/assets --cache-dir tmp/parcel --log-level 5 --global Fortress --detailed-report"
11
+    "watch": "npx parcel serve web/static/images/* web/static/images/**/* web/static/js/*.ts web/static/js/*.js web/static/*.scss --out-dir priv/static/assets --cache-dir tmp/parcel --global Fortress",
12
+    "build": "npx parcel build web/static/images/* web/static/images/**/* web/static/js/*.ts web/static/js/*.js web/static/*.scss --out-dir priv/static/assets --cache-dir tmp/parcel --log-level 5 --global Fortress --detailed-report"
13 13
   },
14 14
   "repository": {
15 15
     "type": "git",
@@ -21,7 +21,31 @@
21 21
   "author": "Jacky Alciné <jacky@is.black.af> (https://jacky.wtf/)",
22 22
   "license": "AGPL-3.0-only",
23 23
   "devDependencies": {
24
+    "autoprefixer": "9.4.10",
25
+    "css-mqpacker": "7.0.0",
26
+    "eyeglass": "2.2.1",
24 27
     "parcel": "1.11.0",
25
-    "parcel-plugin-bundle-visualiser": "1.2.0"
28
+    "parcel-plugin-bundle-visualiser": "1.2.0",
29
+    "phoenix": "file:deps/phoenix",
30
+    "phoenix_html": "file:deps/phoenix_html",
31
+    "prettier": "1.16.4",
32
+    "stylelint": "9.10.1",
33
+    "stylelint-config-recommended-scss": "3.2.0",
34
+    "stylelint-scss": "3.5.4",
35
+    "tslint": "5.13.1",
36
+    "tslint-config-prettier": "1.18.0",
37
+    "tslint-immutable": "5.3.0",
38
+    "typescript": "3.3.3333"
39
+  },
40
+  "dependencies": {
41
+    "animate.css": "3.7.0",
42
+    "axios": "0.18.0",
43
+    "pretty-checkbox": "3.0.3",
44
+    "sass": "1.17.2",
45
+    "tachyons-sass": "4.9.5",
46
+    "typeface-crimson-text": "0.0.72",
47
+    "typeface-open-sans": "0.0.54",
48
+    "typeface-source-code-pro": "0.0.71",
49
+    "webfontloader": "1.6.28"
26 50
   }
27 51
 }

+ 0
- 1
priv/static/css/app.css View File

@@ -1 +0,0 @@
1
-@import url("https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css");

BIN
priv/static/favicon.ico View File


+ 0
- 3
priv/static/js/app.js View File

@@ -1,3 +0,0 @@
1
-// for phoenix_html support, including form and button helpers
2
-// copy the following scripts into your javascript bundle:
3
-// * https://raw.githubusercontent.com/phoenixframework/phoenix_html/v2.10.0/priv/static/phoenix_html.js

+ 5
- 0
tsconfig.json View File

@@ -0,0 +1,5 @@
1
+{
2
+  "compilerOptions": {
3
+    "lib": ["es6", "dom"]
4
+  }
5
+}

+ 3
- 3
web/endpoint.ex View File

@@ -4,11 +4,11 @@ defmodule Fortress.Web.Endpoint do
4 4
   socket("/socket", Fortress.Web.UserSocket)
5 5
   plug(Logster.Plugs.Logger)
6 6
 
7
-  plug(Plug.Static, at: "/", from: :fortress, gzip: false, only: ~w(css fonts images js favicon.ico robots.txt))
7
+  plug(Plug.Static, at: "/", from: :fortress, gzip: true, only: ~w(assets))
8 8
 
9 9
   if code_reloading? do
10
-    # socket("/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket)
11
-    # plug(Phoenix.LiveReloader)
10
+    socket("/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket)
11
+    plug(Phoenix.LiveReloader)
12 12
     plug(Phoenix.CodeReloader)
13 13
   end
14 14
 

+ 32
- 0
web/static/app.scss View File

@@ -0,0 +1,32 @@
1
+@import "tachyons-sass/tachyons.scss";
2
+@import "animate.css/animate.css";
3
+
4
+:root {
5
+  --font-family-sans: "Open Sans";
6
+  --font-family-serif: "Crimson Text";
7
+  --font-family-mono: "Source Code Pro";
8
+}
9
+
10
+html.wf-active {
11
+  &.wf-crimsontext-n4-active {
12
+    .serif {
13
+      font-family: var(--font-family-serif);
14
+    }
15
+  }
16
+
17
+  &.wf-opensans-n4-active {
18
+    .sans-serif {
19
+      font-family: var(--font-family-sans);
20
+    }
21
+
22
+    h1, h2, h3, h4, h5, h6 {
23
+      font-family: var(--font-family-sans);
24
+    }
25
+  }
26
+
27
+  &.wf-sourcecodepro-n4-active {
28
+    .code {
29
+      font-family: var(--font-family-mono);
30
+    }
31
+  }
32
+}

+ 3
- 0
web/static/fonts.scss View File

@@ -0,0 +1,3 @@
1
+// @import "typeface-open-sans";
2
+// @import "typeface-crimson-text";
3
+// @import "typeface-source-code-pro";

priv/static/images/logo.svg → web/static/images/logo.svg View File


priv/static/images/marginalia/marginalia-artifficial-intelligence.png → web/static/images/marginalia/marginalia-artifficial-intelligence.png View File


priv/static/images/marginalia/marginalia-bad-gateway.png → web/static/images/marginalia/marginalia-bad-gateway.png View File


priv/static/images/marginalia/marginalia-bitcoin-mining.png → web/static/images/marginalia/marginalia-bitcoin-mining.png View File


priv/static/images/marginalia/marginalia-car-rental.png → web/static/images/marginalia/marginalia-car-rental.png View File


priv/static/images/marginalia/marginalia-come-back-later.png → web/static/images/marginalia/marginalia-come-back-later.png View File


priv/static/images/marginalia/marginalia-coming-soon.png → web/static/images/marginalia/marginalia-coming-soon.png View File


priv/static/images/marginalia/marginalia-delete-confirmation.png → web/static/images/marginalia/marginalia-delete-confirmation.png View File


priv/static/images/marginalia/marginalia-delivery.png → web/static/images/marginalia/marginalia-delivery.png View File


priv/static/images/marginalia/marginalia-done.png → web/static/images/marginalia/marginalia-done.png View File


priv/static/images/marginalia/marginalia-downloading.png → web/static/images/marginalia/marginalia-downloading.png View File


priv/static/images/marginalia/marginalia-fatal-error.png → web/static/images/marginalia/marginalia-fatal-error.png View File


priv/static/images/marginalia/marginalia-information-security.png → web/static/images/marginalia/marginalia-information-security.png View File


priv/static/images/marginalia/marginalia-list-is-empty.png → web/static/images/marginalia/marginalia-list-is-empty.png View File


priv/static/images/marginalia/marginalia-location-access.png → web/static/images/marginalia/marginalia-location-access.png View File


priv/static/images/marginalia/marginalia-logged-out.png → web/static/images/marginalia/marginalia-logged-out.png View File


priv/static/images/marginalia/marginalia-message-sent.png → web/static/images/marginalia/marginalia-message-sent.png View File


priv/static/images/marginalia/marginalia-navigation-support.png → web/static/images/marginalia/marginalia-navigation-support.png View File


priv/static/images/marginalia/marginalia-no-comments.png → web/static/images/marginalia/marginalia-no-comments.png View File


priv/static/images/marginalia/marginalia-no-connection.png → web/static/images/marginalia/marginalia-no-connection.png View File


priv/static/images/marginalia/marginalia-online-shopping.png → web/static/images/marginalia/marginalia-online-shopping.png View File


priv/static/images/marginalia/marginalia-order-complete.png → web/static/images/marginalia/marginalia-order-complete.png View File


priv/static/images/marginalia/marginalia-page-not-found.png → web/static/images/marginalia/marginalia-page-not-found.png View File


priv/static/images/marginalia/marginalia-page-under-construction.png → web/static/images/marginalia/marginalia-page-under-construction.png View File


priv/static/images/marginalia/marginalia-payment-error.png → web/static/images/marginalia/marginalia-payment-error.png View File


priv/static/images/marginalia/marginalia-payment-processed.png → web/static/images/marginalia/marginalia-payment-processed.png View File


priv/static/images/marginalia/marginalia-productive-work.png → web/static/images/marginalia/marginalia-productive-work.png View File


priv/static/images/marginalia/marginalia-searching.png → web/static/images/marginalia/marginalia-searching.png View File


priv/static/images/marginalia/marginalia-shipping.png → web/static/images/marginalia/marginalia-shipping.png View File


priv/static/images/marginalia/marginalia-sign-in.png → web/static/images/marginalia/marginalia-sign-in.png View File


priv/static/images/marginalia/marginalia-success.png → web/static/images/marginalia/marginalia-success.png View File


priv/static/images/marginalia/marginalia-unsubscribed.png → web/static/images/marginalia/marginalia-unsubscribed.png View File


priv/static/images/marginalia/marginalia-upgrade.png → web/static/images/marginalia/marginalia-upgrade.png View File


priv/static/images/marginalia/marginalia-uploading.png → web/static/images/marginalia/marginalia-uploading.png View File


priv/static/images/marginalia/marginalia-waiting.png → web/static/images/marginalia/marginalia-waiting.png View File


priv/static/images/marginalia/marginalia-welcome.png → web/static/images/marginalia/marginalia-welcome.png View File


priv/static/images/marginalia/unsubscribed-2.png → web/static/images/marginalia/unsubscribed-2.png View File


+ 1
- 0
web/static/js/app.ts View File

@@ -0,0 +1 @@
1
+import * as Phoenix from './phoenix';

+ 10
- 0
web/static/js/fonts.js View File

@@ -0,0 +1,10 @@
1
+import WebFont from 'webfontloader';
2
+
3
+window.addEventListener('load', () => {
4
+  WebFont.load({
5
+    custom: {
6
+      families: ['Open Sans', 'Source Code Pro', 'Crimson Text'],
7
+      urls: ['/assets/fonts.css']
8
+    }
9
+  });
10
+});

priv/static/js/phoenix.js → web/static/js/phoenix.js View File


+ 1
- 0
web/static/vendor.scss View File

@@ -0,0 +1 @@
1
+@import "pretty-checkbox/src/pretty-checkbox";

+ 1
- 1
web/templates/auth/new.html.eex View File

@@ -2,7 +2,7 @@
2 2
   <article class="pb4">
3 3
     <div class="ph3 ph5-ns">
4 4
       <div class="cf center mw8 w-100 tc-m flex flex-column flex-row-l justify-around items-start">
5
-        <img src="<%= static_path(@conn, "/images/marginalia/marginalia-uploading.png") %>" class="v-mid order-1 w-100 dn db-ns self-center mw5">
5
+        <img src="<%= static_path(@conn, "/assets/images/marginalia/marginalia-uploading.png") %>" class="v-mid order-1 w-100 dn db-ns self-center mw5">
6 6
         <div class="pb3 pb4-ns mt4 black-70 order-2 w-50-l self-center">
7 7
           <h1 class="f2 tracked ttu lh-title gray">
8 8
             Your Options

+ 10
- 12
web/templates/layout/app.html.eex View File

@@ -7,26 +7,23 @@
7 7
     <meta name="description" content="Distributed authentication as a service." />
8 8
     <meta name="author" content="https://black.af" />
9 9
     <title>Fortress</title>
10
-    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>" />
11
-    <link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css" />
12
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css" />
13
-    <link rel="authorization_endpoint" href="<%= indie_auth_path(@conn, :authorize) %>" />
14
-    <link rel="token_endpoint" href="<%= indie_api_token_path(@conn, :create) %>" />
15
-    <link rel="shortcut icon" href="<%= static_path(@conn, "/images/logo.svg") %>" />
10
+    <link rel="shortcut icon" href="<%= static_path(@conn, "/assets/images/logo.svg") %>" />
11
+    <link rel="stylesheet" href="<%= static_path(@conn, "/assets/app.css") %>" />
12
+    <link rel="me" href="https://black.af" />
16 13
   </head>
17 14
   <body class="bg-near-white near-black w-100 sans-serif">
18 15
     <header class="w-100 f5 pa3 ph5-ns bg-white bb b--moon-gray bw1">
19 16
       <div class="db dt-ns mw9 center w-100">
20
-        <div class="db dtc-ns v-mid tc tl-l w-20-l h-app h-x-app">
17
+        <div class="db dtc-ns v-mid tc tl-l w-20-l h-app h-x-app fadeInDownBig animated faster">
21 18
           <a href="/" class="u-url u-id f4 f3-l w-100 fw1 mv1 link v-mid" title="Home">
22
-            <img src="<%= static_path(@conn, "/images/logo.svg") %>" class="w2 h2 v-mid u-logo center-s dn dib-l"/>
19
+            <img src="<%= static_path(@conn, "/assets/images/logo.svg") %>" class="w2 h2 v-mid u-logo center-s dn dib-l"/>
23 20
             <span class="black-70 ttu tracked fr-m p-name">Fortress</span>
24 21
           </a>
25
-          <span class="v-mid f6 black-40 dib w-100-m pl4-m ml2-m tc tl-m tr-l">
26
-            by <a href="https://black.af" class="link color-inherit underline tracked-tight u-author"><strong>black</strong>&nbsp;<em>af</em></a>
22
+          <span class="v-mid f6 dib w-100-m pl4-m ml2-m tc tl-m tr-l">
23
+            <span class="black-40 f7 v-mid">by </span><a href="https://black.af" class="v-mid link underline-hover color-inherit near-black tracked-tight u-author e-name"><strong>black</strong>.<em>af</em></a>
27 24
           </span>
28 25
         </div>
29
-        <nav class="db dtc-ns v-mid w-100 tc tr-ns mt2 mt0-ns ttu f6">
26
+        <nav class="db dtc-ns v-mid w-100 tc tr-ns mt2 mt0-ns ttu f6 animated fadeInRight">
30 27
           <div class="dib">
31 28
             <a title="How" href="/#how" class="hover-blue link black-70 mr2 mr3-m mr4-l dib">
32 29
               How
@@ -79,6 +76,7 @@
79 76
         <a rel="me" class="link underline white-80 hover-green" href="mailto:support@black.af">support@black.af</a>
80 77
       </p>
81 78
     </footer>
82
-    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
79
+    <script async defer src="<%= static_path(@conn, "/assets/js/app.js") %>"></script>
80
+    <script async defer src="<%= static_path(@conn, "/assets/js/fonts.js") %>"></script>
83 81
   </body>
84 82
 </html>

+ 6
- 6
web/templates/page/index.html.eex View File

@@ -3,16 +3,16 @@
3 3
   <article class="pb4">
4 4
     <div class="ph3 ph5-ns">
5 5
       <div class="cf mw8 center tc-m flex flex-column flex-row-l justify-around items-center">
6
-        <img src="<%= static_path(@conn, "/images/marginalia/marginalia-welcome.png") %>" class="v-mid order-1 w-100 dn db-ns self-center mw6">
6
+        <img src="<%= static_path(@conn, "/assets/images/marginalia/marginalia-welcome.png") %>" class="v-mid order-1 w-100 dn db-ns self-center mw6 animated slideInLeft faster">
7 7
         <div class="pb3 pb4-ns mt4 black-70 order-2 w-60-l self-center">
8
-          <h1 class="f4 fw6 f1-ns lh-title measure tracked-tight mt0">
8
+          <h1 class="f4 fw6 f1-ns lh-title measure tracked-tight mt0 animated fadeIn">
9 9
             Sign In As You
10 10
           </h1>
11
-          <p class="f5 f4-ns fw4 b measure dib-m lh-copy self-center">
11
+          <p class="f5 f4-ns fw4 b measure dib-m lh-copy self-center animated fadeIn">
12 12
             You have your own <strong>personal website</strong> or a profile on a platform
13 13
             you use a lot. With <a href="https://indieweb.org/IndieAuth" class="navy fw5">IndieAuth</a>, you can use it as a means of signing in! No more extra passwords.
14 14
           </p>
15
-          <form class="black-80 w-100 measure" method="get" action="<%= indie_auth_path(@conn, :new) %>">
15
+          <form class="animated fadeInUpBig black-80 w-100 measure" method="get" action="<%= indie_auth_path(@conn, :new) %>">
16 16
             <input type="hidden" name="redirect_uri" value="<%= dashboard_path(@conn, :demo) %>" />
17 17
             <input type="hidden" name="state" value="<%= new_state %>" />
18 18
             <input type="hidden" name="client_id" value="<%= page_path(@conn, :index) %>" />
@@ -28,7 +28,7 @@
28 28
     </div>
29 29
   </article>
30 30
   <article class="bt bb flex flex-column flex-row-l b--black-10 bg-white black-70 justify-center pa3 pa4-ns" id="how">
31
-    <img src="<%= static_path(@conn, "/images/marginalia/marginalia-productive-work.png") %>" class="v-mid order-2 w-100 dn db-ns self-center mw6">
31
+    <img src="<%= static_path(@conn, "/assets/images/marginalia/marginalia-productive-work.png") %>" class="v-mid order-2 w-100 dn db-ns self-center mw6">
32 32
     <div class="order-1">
33 33
       <h1 id="set-up" class="mt0 f5 f3-ns">1. Setting Up</h1>
34 34
       <p class="f5 measure lh-copy">
@@ -183,7 +183,7 @@
183 183
 </section>
184 184
 <section id="sign-in" class="pv5 bb bt b--black-10 bg-white black-80 flex flex-column flex-wrap flex-row-l justify-center">
185 185
   <h3 class="order-1 f4 fw6 ttu tracked black-70 w-100 mb4 flex-auto flex-grow tc">Try it Out</h3>
186
-  <img src="<%= static_path(@conn, "/images/marginalia/marginalia-waiting.png") %>" class="v-mid order-2 w-100 dn db-ns self-center mw6">
186
+  <img src="<%= static_path(@conn, "/assets/images/marginalia/marginalia-waiting.png") %>" class="v-mid order-2 w-100 dn db-ns self-center mw6">
187 187
   <div class="ph3 ph5-ns order-3 self-center w-100 w-40-l">
188 188
     <p class="f4 lh-copy measure">
189 189
       Sign in using <strong title="IndieAuth, the specification here, requires you to use your own URL.">your URL</strong> to

Loading…
Cancel
Save