init

.formatter.exs

@@ -0,0 +1,4 @@
+[
+  import_deps: [:phoenix],
+  inputs: ["*.{ex,exs}", "{config,lib,test}/**/*.{ex,exs}"]
+]

.gitignore

@@ -0,0 +1,34 @@
+# The directory Mix will write compiled artifacts to.
+/_build/
+
+# If you run "mix test --cover", coverage assets end up here.
+/cover/
+
+# The directory Mix downloads your dependencies sources to.
+/deps/
+
+# Where 3rd-party dependencies like ExDoc output generated docs.
+/doc/
+
+# Ignore .fetch files in case you like to edit your project deps locally.
+/.fetch
+
+# If the VM crashes, it generates a dump, let's ignore it too.
+erl_crash.dump
+
+# Also ignore archive artifacts (built via "mix archive.build").
+*.ez
+
+# Ignore package tarball (built via "mix hex.build").
+koniphx-*.tar
+
+# Ignore assets that are produced by build tools.
+/priv/static/assets/
+
+# Ignore digested assets cache.
+/priv/static/cache_manifest.json
+
+# In case you use Node.js/npm, you want to ignore these.
+npm-debug.log
+/assets/node_modules/
+

README.md

@@ -0,0 +1,183 @@
+# Koniphx
+
+A small playground for myself to "play" around with [Phoenix](http://www.phoenixframework.org/) and [TailwindCSS](https://tailwindcss.com/).
+
+---
+
+### Adding a new page
+
+1. Create a route for it (`lib/koniphx_web/router.ex`)
+
+```elixir
+ scope "/", KoniphxWeb do
+    pipe_through :browser
+
+    get "/newpage", NewPageController, :index
+  end
+```
+
+We also specified a controller, so lets create that.
+
+2. Create a controller (`lib/koniphx_web/controllers/new_page_controller.ex`)
+
+```elixir
+defmodule KoniphxWeb.NewPageController do
+  use KoniphxWeb, :controller
+
+  def index(conn, _params) do
+    render(conn, "newpage.html")
+  end
+end
+```
+
+3. Create a view (`lib/koniphx_web/views/new_page_view.ex`)
+
+```elixir
+defmodule KoniphxWeb.NewPageView do
+  use KoniphxWeb, :view
+end
+```
+
+4. Create a template (`lib/koniphx_web/templates/new_page/newpage.html.eex`)
+
+```html
+<h1>Welcome to New Page!</h1>
+```
+
+Remember, you first have to create a directory for the template to live in :)
+
+---
+
+### Call a custom controller
+
+If you want to send data to your controller, you can do it like this:
+
+```html
+<form
+  method="post"
+  action="/route_here"
+  id="some_id"
+  class="mx-auto max-w-sm flex flex-col items-center justify-center h-screen"
+>
+  <input
+    type="hidden"
+    name="_csrf_token"
+    value="{Plug.CSRFProtection.get_csrf_token}"
+  />
+  <div class="mb-4">
+    <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
+      Name
+    </label>
+    <input
+      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+      id="name"
+      name="name"
+      type="text"
+      placeholder="Name"
+    />
+  </div>
+  <div class="flex items-center justify-between">
+    <button
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+      type="submit"
+    >
+      Submit
+    </button>
+  </div>
+</form>
+```
+
+This will send a `POST` request to the route `/route_here` with the data `name` and `_csrf_token` (which is needed for security reasons).
+
+Make sure to add the `post` method in the router
+
+```elixir
+post "/route_here", ARouteController, :request_function
+```
+
+and then use the provided `request_function` in the controller
+
+```elixir
+def request_function(conn, params) do
+  if conn.params["name"] == "something" do
+  # do something
+  else
+  # do something else
+end
+```
+
+You could use `phx-click` in [LiveView](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html) to send / handle data requests (generally easier than the above) because of server-rendered HTML..
+
+---
+
+#### Designing with TailwindCSS
+
+If you want to add Tailwind too, follow the steps:
+
+1.) Add to your mix.exs file
+
+```elixir
+defp deps do
+  [
+    {:tailwind, "~> 0.1", runtime: Mix.env() == :dev},
+  ]
+end
+````
+
+2.) Run `mix deps.get`
+This will install the new package
+
+3.) Run `mix tailwind.install`
+
+4.) Add tailwind to `config/config.exs`
+
+```elixir
+config :tailwind,
+  version: "3.0.24",
+  default: [
+    args: ~w(
+      --config=tailwind.config.js
+      --input=css/app.css
+      --output=../priv/static/assets/app.css
+    ),
+    cd: Path.expand("../assets", __DIR__)
+  ]
+```
+
+5.) Add tailwind to the watcher (`config/dev.exs`)
+
+```elixir
+  tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
+```
+
+6.) Create a `tailwind.config.js` file in the `assets` directory
+
+```javascript
+module.exports = {
+  mode: "jit",
+  content: ["./js/**/*.js", "../lib/*_web/**/*.*ex"],
+  plugins: [require("@tailwindcss/typography")],
+};
+```
+
+7.) Add the following to your `app.css` file
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+and delete `phoenix.css` and all the other stuff from app.css
+
+8.) Start coding!
+
+```html
+<div
+  class="mx-auto max-w-sm flex flex-col items-center justify-center h-screen"
+>
+  <div class="text-center">
+    <h1>Welcome, centered text!</h1>
+  </div>
+</div>
+```

assets/css/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

assets/js/app.js

@@ -0,0 +1,44 @@
+// We import the CSS which is extracted to its own file by esbuild.
+// Remove this line if you add a your own CSS build pipeline (e.g postcss).
+
+// 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, {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())
+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
+

assets/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    mode: 'jit',
+    content: [
+      './js/**/*.js',
+      '../lib/*_web/**/*.*ex'
+    ],
+    plugins: [
+      require('@tailwindcss/typography')
+    ],
+  }