Skip to content

Commit 3bea988

Browse files
nelsonicnelsonic
committed
borrow index.html and app.js from JS version as a starting point #66 
1 parent 7c47023 commit 3bea988

File tree

6 files changed

+132
-52
lines changed

6 files changed

+132
-52
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ built-in application monitoring
4545
([`supervisor`](http://erlang.org/doc/man/supervisor.html))
4646
and metrics ([`telemetry`](https://github.com/beam-telemetry/telemetry))
4747
and the built-in support for _highly_ scalable WebSockets
48-
will allow us to build an _awesome_ UX!
48+
that will allow us to build an _awesome_ real-time UX!
4949

5050
For more on "Why Elixir?" see:
5151
https://github.com/dwyl/learn-elixir/issues/102
@@ -320,7 +320,7 @@ Run the following to execute the _single_ test starting on line 36
320320
```sh
321321
mix test test/hits_web/controllers/hit_controller_test.exs:36
322322
```
323-
323+
Open the `test/hits_web/controllers/hit_controller_test.exs` file in your editor.
324324

325325

326326

‎assets/js/app.js

+53
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,56 @@ import "phoenix_html"
1515
//
1616
// Local files can be imported directly using relative paths, for example:
1717
// import socket from "./socket"
18+
19+
var root = document.getElementById("hits");
20+
console.log('Ready!', window.location.host);
21+
22+
setTimeout(function(){
23+
// var socket = io(window.location.host);
24+
// socket.on('news', function (data) {
25+
// console.log(data);
26+
// socket.emit('hello', { msg: 'Hi!' });
27+
// });
28+
//
29+
// socket.on('hit', function (data) {
30+
// var previous = root.childNodes[0];
31+
// root.insertBefore(div(Date.now(), data.hit), previous);
32+
// });
33+
34+
// borrowed from: https://git.io/v536m
35+
function div(divid, text) {
36+
var div = document.createElement('div');
37+
div.id = divid;
38+
div.className = divid;
39+
if(text !== undefined) { // if text is passed in render it in a "Text Node"
40+
var txt = document.createTextNode(text);
41+
div.appendChild(txt);
42+
}
43+
return div;
44+
}
45+
document.getElementById("how").classList.remove('dn'); // show form if JS available (progressive enhancement)
46+
document.getElementById("nojs").classList.add('dn'); // show form if JS available (progressive enhancement)
47+
display_badge_markdown(); // render initial markdown template
48+
var get = document.getElementsByTagName('input');
49+
for (var i = 0; i < get.length; i++) {
50+
get[i].addEventListener('keyup', display_badge_markdown, false);
51+
get[i].addEventListener('keyup', display_badge_markdown, false);
52+
}
53+
}, 500);
54+
55+
// Markdown Template
56+
var mt = '[![HitCount](http://hits.dwyl.io/{user}/{repo}.svg)](http://hits.dwyl.io/{user}/{repo})';
57+
58+
function generate_markdown () {
59+
var user = document.getElementById("username").value || '{username}';
60+
var repo = document.getElementById("repo").value || '{project}';
61+
// console.log('user: ', user, 'repo: ', repo);
62+
user = user.replace(/[.*+?^$<>()|[\]\\]/g, '');
63+
repo = repo.replace(/[.*+?^$<>()|[\]\\]/g, '');
64+
return mt.replace(/{user}/g, user).replace(/{repo}/g, repo);
65+
}
66+
67+
function display_badge_markdown() {
68+
var md = generate_markdown()
69+
var pre = document.getElementById("badge").innerHTML = md;
70+
}

‎lib/hits_web/controllers/hit_controller.ex

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ defmodule HitsWeb.HitController do
1515
end
1616

1717
def create(conn, %{"hit" => hit_params}) do
18+
IO.inspect(hit_params, label: "hit_params")
1819
case Context.create_hit(hit_params) do
1920
{:ok, hit} ->
2021
conn

‎lib/hits_web/templates/layout/app.html.eex

+3-14
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,12 @@
44
<meta charset="utf-8"/>
55
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7-
<title>Hits · Phoenix Framework</title>
7+
<title>Hits</title>
8+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
89
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
910
</head>
1011
<body>
11-
<header>
12-
<section class="container">
13-
<nav role="navigation">
14-
<ul>
15-
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
16-
</ul>
17-
</nav>
18-
<a href="http://phoenixframework.org/" class="phx-logo">
19-
<img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
20-
</a>
21-
</section>
22-
</header>
23-
<main role="main" class="container">
12+
<main role="main"">
2413
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
2514
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
2615
<%= render @view_module, @view_template, assigns %>

‎lib/hits_web/templates/page/index.html.eex

+72-35
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,72 @@
1-
<section class="phx-hero">
2-
<h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1>
3-
<p>A productive web framework that<br/>does not compromise speed or maintainability.</p>
4-
</section>
5-
6-
<section class="row">
7-
<article class="column">
8-
<h2>Resources</h2>
9-
<ul>
10-
<li>
11-
<a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a>
12-
</li>
13-
<li>
14-
<a href="https://github.com/phoenixframework/phoenix">Source</a>
15-
</li>
16-
<li>
17-
<a href="https://github.com/phoenixframework/phoenix/blob/v1.4/CHANGELOG.md">v1.4 Changelog</a>
18-
</li>
19-
</ul>
20-
</article>
21-
<article class="column">
22-
<h2>Help</h2>
23-
<ul>
24-
<li>
25-
<a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
26-
</li>
27-
<li>
28-
<a href="https://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on Freenode IRC</a>
29-
</li>
30-
<li>
31-
<a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
32-
</li>
33-
</ul>
34-
</article>
35-
</section>
1+
<h2 class="bg-teal white h-25 tc ttu f1 lh-title lh-solid mt0 pa2 pb3 mb0 pb0">
2+
Hits!
3+
<a href="http://hits.dwyl.io/" >
4+
<img src="http://hits.dwyl.io/homepage.svg" alt="Hit Count" class="pa0 ba bw1 b--white">
5+
</a>
6+
</h2>
7+
<h4 class="mt0 tc fw5 f5 teal pa2 mb0">
8+
The <em>easy</em> way to know how many people are
9+
<strong><em>viewing</em></strong> your GitHub projects!
10+
</h4>
11+
12+
<h2 class="mt0 fw5 tc f2 bg-teal white pa2"><em>How?</em></h2>
13+
<div id="how" class="dn">
14+
15+
16+
<table class="collapse pv2 ph3 w-100">
17+
<tr class="">
18+
<td class="pv2 ph3 w-40">
19+
Input your <strong class="fw5">GitHub Username</strong>
20+
(<em> <strong class="u">or</strong> org name</em>):
21+
</td>
22+
<td class="pv2 ph3 w-40">
23+
<input class="input-reset f4 pa2 ba bw1 mr5 w-80" type="text"
24+
id="username" name="username" placeholder="username" autofocus maxlength="50">
25+
</td>
26+
</tr>
27+
<tr class="">
28+
<td class="pv2 ph3 w-40">
29+
Input the <strong class="fw5">GitHub Project/Repository</strong>
30+
name:
31+
</td>
32+
<td class="pv2 ph3 w-40">
33+
<input class="input-reset f4 pa2 ba bw1 mr5 w-80" type="text"
34+
id="repo" name="repo" placeholder="repo/project" maxlength="100">
35+
</td>
36+
</tr>
37+
</table>
38+
39+
<h3 class="mt3 fw5 tc db f3 bg-teal white pa2">Your Badge <em>Markdown:</em></h3>
40+
</div>
41+
<pre id="badge" class="pl2 fw4 ba bw1 pa3 ma2" style="white-space: pre-wrap; word-break: keep-all;">
42+
[![HitCount](http://hits.dwyl.io/{username}/{repo}.svg)](http://hits.dwyl.io/{username}/{repo})
43+
</pre>
44+
45+
<p class="pl2" id="nojs">
46+
Using the above markdown as a template, <br />
47+
<em>Replace</em> the <strong class="code">{username}</strong> with <em>your</em> GitHub username <br />
48+
<em>Replace</em> the <strong class="code">{repo}</strong> with the repo name.
49+
</p>
50+
51+
<p class="pl2">
52+
<em>Copy</em> the markdown snippet and <em>Paste</em> it into your
53+
<strong class="code">README.md</strong> file <br />
54+
to start tracking the view count on your GitHub project!
55+
</p>
56+
57+
<h2 class="mt0 fw5 tc f4 bg-teal white pa2 mt5"><em>Recently</em> Viewed Projects (<em>tracked by Hits</em>)</h2>
58+
<div class="h5 pl2" id='hits'>
59+
<div style="display:none">Dummy Child Node for insertBefore to work</div>
60+
</div>
61+
62+
<style>
63+
.teal {
64+
color: #4DB6AC;
65+
}
66+
.bg-teal {
67+
background: #4DB6AC;
68+
}
69+
body { /* dwyl font */
70+
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
71+
}
72+
</style>

‎priv/static/js/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./css/
102102
/***/ (function(module, __webpack_exports__, __webpack_require__) {
103103

104104
"use strict";
105-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css_app_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../css/app.css */ \"./css/app.css\");\n/* harmony import */ var _css_app_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_app_css__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var phoenix_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! phoenix_html */ \"../deps/phoenix_html/priv/static/phoenix_html.js\");\n/* harmony import */ var phoenix_html__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(phoenix_html__WEBPACK_IMPORTED_MODULE_1__);\n// We need to import the CSS so that webpack will load it.\n// The MiniCssExtractPlugin is used to separate it out into\n// its own CSS file.\n // webpack automatically bundles all modules in your\n// entry points. Those entry points can be configured\n// in \"webpack.config.js\".\n//\n// Import dependencies\n//\n\n // Import local files\n//\n// Local files can be imported directly using relative paths, for example:\n// import socket from \"./socket\"\n\n//# sourceURL=webpack:///./js/app.js?");
105+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css_app_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../css/app.css */ \"./css/app.css\");\n/* harmony import */ var _css_app_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_app_css__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var phoenix_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! phoenix_html */ \"../deps/phoenix_html/priv/static/phoenix_html.js\");\n/* harmony import */ var phoenix_html__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(phoenix_html__WEBPACK_IMPORTED_MODULE_1__);\n// We need to import the CSS so that webpack will load it.\n// The MiniCssExtractPlugin is used to separate it out into\n// its own CSS file.\n // webpack automatically bundles all modules in your\n// entry points. Those entry points can be configured\n// in \"webpack.config.js\".\n//\n// Import dependencies\n//\n\n // Import local files\n//\n// Local files can be imported directly using relative paths, for example:\n// import socket from \"./socket\"\n\nvar root = document.getElementById(\"hits\");\nconsole.log('Ready!', window.location.host);\nsetTimeout(function () {\n // var socket = io(window.location.host);\n // socket.on('news', function (data) {\n // console.log(data);\n // socket.emit('hello', { msg: 'Hi!' });\n // });\n //\n // socket.on('hit', function (data) {\n // var previous = root.childNodes[0];\n // root.insertBefore(div(Date.now(), data.hit), previous);\n // });\n // borrowed from: https://git.io/v536m\n function div(divid, text) {\n var div = document.createElement('div');\n div.id = divid;\n div.className = divid;\n\n if (text !== undefined) {\n // if text is passed in render it in a \"Text Node\"\n var txt = document.createTextNode(text);\n div.appendChild(txt);\n }\n\n return div;\n }\n\n document.getElementById(\"how\").classList.remove('dn'); // show form if JS available (progressive enhancement)\n\n document.getElementById(\"nojs\").classList.add('dn'); // show form if JS available (progressive enhancement)\n\n display_badge_markdown(); // render initial markdown template\n\n var get = document.getElementsByTagName('input');\n\n for (var i = 0; i < get.length; i++) {\n get[i].addEventListener('keyup', display_badge_markdown, false);\n get[i].addEventListener('keyup', display_badge_markdown, false);\n }\n}, 500); // Markdown Template\n\nvar mt = '[![HitCount](http://hits.dwyl.io/{user}/{repo}.svg)](http://hits.dwyl.io/{user}/{repo})';\n\nfunction generate_markdown() {\n var user = document.getElementById(\"username\").value || '{username}';\n var repo = document.getElementById(\"repo\").value || '{project}'; // console.log('user: ', user, 'repo: ', repo);\n\n user = user.replace(/[.*+?^$<>()|[\\]\\\\]/g, '');\n repo = repo.replace(/[.*+?^$<>()|[\\]\\\\]/g, '');\n return mt.replace(/{user}/g, user).replace(/{repo}/g, repo);\n}\n\nfunction display_badge_markdown() {\n var md = generate_markdown();\n var pre = document.getElementById(\"badge\").innerHTML = md;\n}\n\n//# sourceURL=webpack:///./js/app.js?");
106106

107107
/***/ }),
108108

0 commit comments

Comments
 (0)