From e885ce12c46f67d869de04cbdda4e7978dfc395b Mon Sep 17 00:00:00 2001 From: stawan15 Date: Thu, 16 Jul 2026 14:31:47 +0700 Subject: [PATCH 1/8] feat: add URL lengthening and expanding functionality with corresponding UI updates --- .github/workflows/deploy-feature.yml | 20 +++++ app/assets/stylesheets/app.css | 57 +++++++++++++ app/controllers/urls_controller.rb | 77 +++++++++++++++++ app/views/urls/index.html.erb | 120 +++++++++++++++++++++++++++ config/routes.rb | 2 + 5 files changed, 276 insertions(+) create mode 100644 .github/workflows/deploy-feature.yml diff --git a/.github/workflows/deploy-feature.yml b/.github/workflows/deploy-feature.yml new file mode 100644 index 0000000..a5c1d52 --- /dev/null +++ b/.github/workflows/deploy-feature.yml @@ -0,0 +1,20 @@ +name: Deploy + +on: + push: + branches: [ feature/* ] + +jobs: + deploy: + runs-on: self-hosted + + steps: + - name: Checkout code + uses: actions/checkout@v6 + with: + fetch-depth: 0 + + - name: Push to Dokku + run: | + git remote add dokku dokku@localhost:${{ secrets.DOKKU_APP }} 2>/dev/null || true + git push dokku feature/long-url:main --force diff --git a/app/assets/stylesheets/app.css b/app/assets/stylesheets/app.css index c7894fa..9b3c7fe 100644 --- a/app/assets/stylesheets/app.css +++ b/app/assets/stylesheets/app.css @@ -867,3 +867,60 @@ body { .link-date { display: none; } #version-banner { white-space: normal; width: calc(100% - 2rem); } } + +/* ── Expand URL section ──────────────────────────────────────────────── */ +.expand-card { + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--r); + padding: 1.5rem 2rem; + max-width: 720px; + margin: 0 auto 1.5rem; + box-shadow: 0 1px 6px rgba(0,0,0,.06); +} +.expand-title { + font-size: 1rem; + font-weight: 600; + margin-bottom: 0.25rem; +} +.expand-hint { + font-size: 0.82rem; + color: var(--muted); + margin-bottom: 0.75rem; +} +.expand-row { + display: flex; + border: 1px solid var(--border); + border-radius: var(--r); + overflow: hidden; + background: var(--card); +} +.expand-row:focus-within { + border-color: var(--blue); + box-shadow: 0 0 0 3px rgba(59,130,246,.15); +} +.expand-row .form-input { + border: none; + box-shadow: none; + border-radius: 0; + flex: 1; +} +#expand-result { + display: flex; + align-items: center; + gap: 0.6rem; + margin-top: 0.75rem; + flex-wrap: wrap; +} +.expand-result-label { + font-size: 0.82rem; + color: var(--muted); + white-space: nowrap; +} +.expand-result-link { + font-size: 0.88rem; + color: var(--blue); + word-break: break-all; + flex: 1; +} +.expand-result-link:hover { text-decoration: underline; } diff --git a/app/controllers/urls_controller.rb b/app/controllers/urls_controller.rb index 97c70e7..6fcc842 100644 --- a/app/controllers/urls_controller.rb +++ b/app/controllers/urls_controller.rb @@ -1,3 +1,5 @@ +require "net/http" + class UrlsController < ApplicationController before_action :authenticate_user!, only: [:destroy, :analytics] before_action :set_url, only: [:destroy, :analytics, :qr_code] @@ -46,6 +48,41 @@ def analytics @recent_clicks = @url.click_events.order(created_at: :desc).limit(50) end + def lengthen + raw = params[:url].to_s.strip + raw = "https://#{raw}" unless raw.match?(/\Ahttps?:\/\//i) + + @url = Url.new(original_url: raw) + @url.user = current_user if user_signed_in? + + # Override auto-generated short_code with a very long one + @url.short_code = generate_long_code + + if @url.save + long_url = short_url_for(@url) + render json: { long_url: long_url } + else + render json: { error: @url.errors.full_messages.first }, status: :unprocessable_entity + end + end + + def expand + raw = params[:url].to_s.strip + raw = "https://#{raw}" unless raw.match?(/\Ahttps?:\/\//i) + + begin + uri = URI.parse(raw) + raise ArgumentError unless uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS) + rescue URI::InvalidURIError, ArgumentError + return render json: { error: "Invalid URL" }, status: :unprocessable_entity + end + + final_url = follow_redirects(uri) + render json: { original: raw, expanded: final_url } + rescue => e + render json: { error: "Could not expand URL: #{e.message}" }, status: :unprocessable_entity + end + def qr_code qr = RQRCode::QRCode.new(short_url_for(@url)) svg = qr.as_svg( @@ -75,6 +112,46 @@ def set_url end end + PRIVATE_IP_PATTERNS = [ + /\A127\./, + /\A10\./, + /\A172\.(1[6-9]|2[0-9]|3[01])\./, + /\A192\.168\./, + /\A::1\z/, + /\Alocalhost\z/i + ].freeze + + MAX_REDIRECTS = 10 + + def follow_redirects(uri, hops = 0) + raise "Too many redirects" if hops >= MAX_REDIRECTS + + host = uri.host.to_s + raise "Requests to private addresses are not allowed" if PRIVATE_IP_PATTERNS.any? { |p| p.match?(host) } + + use_ssl = uri.scheme == "https" + response = Net::HTTP.start(uri.host, uri.port, use_ssl: use_ssl, open_timeout: 5, read_timeout: 5) do |http| + http.head(uri.request_uri) + end + + case response + when Net::HTTPRedirection + location = response["location"] + next_uri = URI.parse(location) + next_uri = uri.merge(next_uri) if next_uri.relative? + follow_redirects(next_uri, hops + 1) + else + uri.to_s + end + end + + def generate_long_code + loop do + code = SecureRandom.alphanumeric(rand(200..300)) + return code unless Url.exists?(short_code: code) + end + end + def permitted_url_params allowed = [:original_url] allowed << :short_code if user_signed_in? diff --git a/app/views/urls/index.html.erb b/app/views/urls/index.html.erb index 84f4777..8bb89aa 100644 --- a/app/views/urls/index.html.erb +++ b/app/views/urls/index.html.erb @@ -37,6 +37,36 @@

Free URL shortener. Shorten links and track clicks.

+
+

Lengthen a URL

+

Paste any link and we'll make it absurdly, ridiculously, unnecessarily long.

+
+ + +
+ + +
+ +
+

Expand a short URL

+

Paste any short link to reveal the final destination before clicking it.

+
+ + +
+ + +
+ <%# Guest result — shows after shortening without an account %> <% if flash[:guest_short_url].present? %>
@@ -201,3 +231,93 @@ setInterval(pollClicks, 10_000); } + + + + diff --git a/config/routes.rb b/config/routes.rb index 2ee1e9c..b590b89 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -10,6 +10,8 @@ end collection do get :click_counts # JSON endpoint for real-time polling + post :expand + post :lengthen end end From da65c1f09523aae530ce25d1e371ba229fc6e2f2 Mon Sep 17 00:00:00 2001 From: stawan15 Date: Thu, 16 Jul 2026 14:32:59 +0700 Subject: [PATCH 2/8] fix: update workflow name from "Deploy" to "Deploy-feature" --- .github/workflows/deploy-feature.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy-feature.yml b/.github/workflows/deploy-feature.yml index a5c1d52..9761210 100644 --- a/.github/workflows/deploy-feature.yml +++ b/.github/workflows/deploy-feature.yml @@ -1,4 +1,4 @@ -name: Deploy +name: Deploy-feature on: push: From 95807db712fa78819d33e1cefefe624a43d3e1d1 Mon Sep 17 00:00:00 2001 From: stawan15 Date: Thu, 16 Jul 2026 14:43:16 +0700 Subject: [PATCH 3/8] feat: implement tools card for URL lengthening and expanding with filter functionality --- app/assets/stylesheets/app.css | 54 +++++++++++++++++++ app/views/urls/index.html.erb | 95 ++++++++++++++++++++++++---------- 2 files changed, 123 insertions(+), 26 deletions(-) diff --git a/app/assets/stylesheets/app.css b/app/assets/stylesheets/app.css index 9b3c7fe..5ec9cfa 100644 --- a/app/assets/stylesheets/app.css +++ b/app/assets/stylesheets/app.css @@ -370,6 +370,31 @@ body { gap: 0.6rem; margin-bottom: 1.25rem; } +.links-filter { + margin-left: auto; + display: flex; + gap: 0.3rem; +} +.filter-btn { + background: none; + border: 1px solid var(--border); + border-radius: 999px; + padding: 0.25rem 0.75rem; + font-size: 0.8rem; + color: var(--muted); + cursor: pointer; + transition: background 0.15s, color 0.15s, border-color 0.15s; +} +.filter-btn:hover { + border-color: var(--blue); + color: var(--blue); +} +.filter-btn.active { + background: var(--blue); + border-color: var(--blue); + color: #fff; + font-weight: 500; +} .links-title { font-size: 1.6rem; @@ -868,6 +893,35 @@ body { #version-banner { white-space: normal; width: calc(100% - 2rem); } } +/* ── Tools card (Lengthen / Expand tabs) ────────────────────────────── */ +.tools-card { + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--r); + max-width: 720px; + margin: 0 auto 1.5rem; + box-shadow: 0 1px 6px rgba(0,0,0,.06); + overflow: hidden; +} +.tools-tabs { + display: flex; + border-bottom: 1px solid var(--border); +} +.tools-tab { + flex: 1; + background: none; + border: none; + padding: 0.7rem 1rem; + font-size: 0.88rem; + font-weight: 500; + color: var(--muted); + cursor: pointer; + transition: color 0.15s, background 0.15s; +} +.tools-tab:hover { color: var(--text); background: var(--hover, rgba(0,0,0,.03)); } +.tools-tab.active { color: var(--blue); border-bottom: 2px solid var(--blue); margin-bottom: -1px; } +.tools-panel { padding: 1.25rem 2rem 1.5rem; } + /* ── Expand URL section ──────────────────────────────────────────────── */ .expand-card { background: var(--card); diff --git a/app/views/urls/index.html.erb b/app/views/urls/index.html.erb index 8bb89aa..0adb95c 100644 --- a/app/views/urls/index.html.erb +++ b/app/views/urls/index.html.erb @@ -37,34 +37,41 @@

Free URL shortener. Shorten links and track clicks.

-
-

Lengthen a URL

-

Paste any link and we'll make it absurdly, ridiculously, unnecessarily long.

-
- - +
+
+ +
- - -
-
-

Expand a short URL

-

Paste any short link to reveal the final destination before clicking it.

-
- - + <%# Lengthen panel %> +
+

Paste any link and we'll make it absurdly, ridiculously, unnecessarily long.

+
+ + +
+ +
- <%# Guest result — shows after shortening without an account %> @@ -88,12 +95,18 @@

Your links

- <%= @urls.size %> + <%= @urls.size %> +
+ + + +
<% @urls.each do |url| %> -
+ <% kind = url.short_code.length > 20 ? "long" : "short" %> +
<%# Left: URL info — always visible %>
@@ -230,6 +243,36 @@ if (document.querySelector('[data-url-id]')) { setInterval(pollClicks, 10_000); } + + // ── Filter tabs ────────────────────────────────────────────────────── + const filterBtns = document.querySelectorAll('.filter-btn'); + const cards = document.querySelectorAll('.link-card[data-kind]'); + const countEl = document.getElementById('links-count'); + + filterBtns.forEach(btn => { + btn.addEventListener('click', () => { + filterBtns.forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + const filter = btn.dataset.filter; + let visible = 0; + cards.forEach(card => { + const show = filter === 'all' || card.dataset.kind === filter; + card.style.display = show ? '' : 'none'; + if (show) visible++; + }); + if (countEl) countEl.textContent = visible; + }); + }); + + // ── Tools tabs (Lengthen / Expand) ─────────────────────────────────── + document.querySelectorAll('.tools-tab').forEach(tab => { + tab.addEventListener('click', () => { + document.querySelectorAll('.tools-tab').forEach(t => t.classList.remove('active')); + document.querySelectorAll('.tools-panel').forEach(p => p.hidden = true); + tab.classList.add('active'); + document.getElementById('tab-' + tab.dataset.tab).hidden = false; + }); + });