Improve URL

Author: RoyalIcing

apps/components_guide_web/assets/js/app.js

@@ -20,6 +20,17 @@ let csrfToken = document
 let liveSocket = new LiveSocket("/live", Socket, {
   params: { _csrf_token: csrfToken },
   hooks: {
+    PreCode: {
+      mounted() {
+        this._highlight(); //
+      },
+      updated() {
+        this._highlight();
+      },
+      _highlight() {
+        window.Prism.highlightElement(this.el);
+      },
+    },
     SwatchInput: {
       mounted() {
         const mouseEventHandler = (e) => {

apps/components_guide_web/lib/components_guide_web/template_engines/markdown_engine.ex

@@ -5,16 +5,18 @@ defmodule ComponentsGuideWeb.TemplateEngines.MarkdownEngine do
 
   require Earmark
 
-  def compile(path, _name) do
-    IO.puts("compile #{path}")
+  def compile(path, name) do
+    IO.puts("compile #{path} #{name}")
     html = path
     |> File.read!()
     |> Earmark.as_html!(%Earmark.Options{code_class_prefix: "language-", smartypants: false})
 
     # regex = ~r{<live-([\w-]+)>(.+)</live-([\w-]+)>}
     regex = ~r{<live-([\w-]+)>([^<]+)</live-([^>]+)>}
     # regex = ~r{<live-([\w-]+)>}
-    
+
+    # live? = Regex.match(regex, html)
+
     html = Regex.replace(regex, html, fn whole, name, content ->
       case name do
         "render" ->
@@ -24,12 +26,20 @@ defmodule ComponentsGuideWeb.TemplateEngines.MarkdownEngine do
           "!" <> name <> "!" <> content
       end
     end)
-    
+
     # html = Regex.replace(regex, html, fn whole, name, content -> "!" <> name <> "!" <> content end)
-    
+
     # html = Regex.replace(regex, html, fn whole, name, content -> "<div><%= live_render(@conn, ComponentsGuideWeb.FakeSearchLive, session: %{}) %></div>" end)
 
     html |> EEx.compile_string(engine: Phoenix.HTML.Engine, file: path, line: 1)
+
+    # case live? do
+    #   true ->
+    #     html |> EEx.compile_string(engine: Phoenix.HTML.Engine, file: path, line: 1)
+
+    #   false ->
+
+    # end
     # html |> EEx.compile_string(engine: Phoenix.LiveView.Engine, file: path, line: 1)
   end
 end

apps/components_guide_web/lib/components_guide_web/templates/web_standards/url.html.md

@@ -2,13 +2,39 @@
 
 ## Anatomy of a URL
 
+<live-render>
+ComponentsGuideWeb.WebStandards.Live.URL
+</live-render>
+
+## Relative URLs
+
+## JavaScript’s `URL`
+
+```js
+const url = new URL('https://example.org/songs?first=20&sortBy=releaseDate');
+url.protocol; // 'https:' 
+url.hostname; // 'example.org' 
+url.origin; // 'https://example.org' 
+url.pathname; // '/songs' 
+```
+
+```js
+const root = new URL('/');
 ```
-https://example.org/songs?first=20&sortBy=releaseDate
+
+```js
+// In a browser
+const current = new URL(window.location.href);
 ```
 
-### Scheme
-### Host
-### Path
-### Query
+```js
+// With a fetch Request
+const current = new URL(request.url);
+```
 
-## Relative URLs
+## Swift’s `URL`
+
+```swift
+let root = URL(string: "/")
+
+```

apps/components_guide_web/lib/components_guide_web/templates/web_standards/url_live.ex

@@ -0,0 +1,111 @@
+defmodule ComponentsGuideWeb.WebStandards.Live.URL do
+  use ComponentsGuideWeb, :live_view
+  alias ComponentsGuideWeb.StylingHelpers
+
+  defmodule State do
+    defstruct raw_url: "https://example.org/songs?first=20&sortBy=releaseDate"
+
+    def to_url(%State{raw_url: raw_url}) do
+      URI.parse(raw_url)
+    end
+
+    def get_field(%State{} = state, field) when field in [:host] do
+      url = state |> to_url()
+      url[field]
+    end
+
+    def change(%State{} = state, :scheme, new_scheme) when is_binary(new_scheme) do
+      url = to_url(state)
+      url = put_in(url.scheme, new_scheme)
+      put_in(state.raw_url, url |> URI.to_string())
+    end
+
+    def change(%State{} = state, :host, new_host) when is_binary(new_host) do
+      url = to_url(state)
+      url = put_in(url.host, new_host)
+      IO.inspect(url)
+      put_in(state.raw_url, url |> URI.to_string())
+    end
+
+    def change(%State{} = state, :path, new_path) when is_binary(new_path) do
+      url = to_url(state)
+      url = put_in(url.path, new_path)
+      IO.inspect(url)
+      put_in(state.raw_url, url |> URI.to_string())
+    end
+  end
+
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket, state: %State{})}
+  end
+
+  def render(assigns) do
+    ~L"""
+    <form phx-change=change>
+
+    <pre class="p-4 my-2" style="color: #d6deeb;">
+    <code><%= @state |> State.to_url() |> URI.to_string() %></code>
+    </pre>
+
+    <pre class="p-4 my-2" style="color: #d6deeb;">
+    <code><span class="text-green-400"><%= State.to_url(@state).scheme %></span>://<span class="text-yellow-400"><%= State.to_url(@state).host %></span><span class="text-orange-400"><%= State.to_url(@state).path %></span><span class="text-indigo-400"/songs</span>?first=20&sortBy=releaseDate</code>
+    </pre>
+
+    <div class="flex flex-col space-y-4">
+
+    <label>
+    <span class="font-bold text-green-400 mr-2">Scheme</span>
+    <input name=scheme type=text value="https" class="text-black text-green-900 bg-green-100 px-2">
+    </label>
+
+    <label>
+    <span class="font-bold text-yellow-400 mr-2">Host</span>
+    <input name=host type=text value="example.org" class="text-black text-yellow-900 bg-yellow-100 px-2">
+    </label>
+
+    <label>
+    <span class="font-bold text-orange-400 mr-2">Path</span>
+    <input name=path type=text value="/songs" class="text-black text-orange-900 bg-orange-100 px-2">
+    </label>
+
+    <label>
+    <span class="font-bold text-orange-400 mr-2">Query</span>
+    <button type=button class="px-2 bg-white text-black rounded">Add query</button>
+    <div>
+      <input name=queryKey type=text value="" class="text-black text-orange-900 bg-orange-100 px-2">
+      <input name=queryValue type=text value="/songs" class="text-black text-orange-900 bg-orange-100 px-2">
+    </div>
+    </label>
+
+    </div>
+
+    </form>
+    
+    <pre class="language-js" phx-hook=PreCode><code>const url = new URL(
+      '<%= @state |> State.to_url() |> URI.to_string() %>'
+    );
+    url.protocol; // <%= State.to_url(@state).scheme %>:
+    url.host; // <%= State.to_url(@state).host %>:
+    url.path; // <%= State.to_url(@state).path %>:
+    url.search; // <%= State.to_url(@state).query %>:
+    </code></pre>
+    """
+  end
+
+  def handle_event(
+        "change",
+        %{"scheme" => new_scheme, "host" => new_host, "path" => new_path},
+        socket
+      ) do
+    state =
+      socket.assigns.state
+      |> State.change(:scheme, new_scheme)
+      |> State.change(:host, new_host)
+      |> State.change(:path, new_path)
+
+    {
+      :noreply,
+      socket |> assign(:state, state)
+    }
+  end
+end