Skip to content

Commit

Permalink
Update website (#24)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbashia
mbashia authored Nov 22, 2024
1 parent a24a101 commit c24910b
Show file tree
Hide file tree
Showing 9 changed files with 132 additions and 585 deletions.
11 changes: 11 additions & 0 deletions assets/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,14 @@
scrollbar-width: none; /* Firefox */
}
}
.scroll {
overflow-x: auto;
scroll-behavior: smooth;
white-space: nowrap; /* Prevent wrapping to ensure horizontal scrolling works */
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}

.scroll::-webkit-scrollbar {
display: none; /* For Chrome, Safari, and Opera */
}
2 changes: 2 additions & 0 deletions assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,12 @@ import { LiveSocket } from 'phoenix_live_view'
import topbar from '../vendor/topbar'
import AsciinemaHook from './hooks/asciinema_hook'
import CopyHook from './hooks/copy_hook'
import ScrollingHooks from './hooks/scrolling_hook'

const Hooks = {
AsciinemaHook,
CopyHook,
ScrollingHooks,
}

let csrfToken = document
Expand Down
15 changes: 15 additions & 0 deletions assets/js/hooks/scrolling_hook.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
let ScrollingHooks = {}

ScrollingHooks.scroll = {
mounted() {
document.addEventListener('DOMContentLoaded', () => {
const toolInstallationElement =
document.getElementById('tool-installation')
if (toolInstallationElement) {
toolInstallationElement.scrollLeft = toolInstallationElement.scrollWidth
}
})
},
}

export default ScrollingHooks
180 changes: 55 additions & 125 deletions lib/phx_tools_web/live/phx_tools_components.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ defmodule PhxToolsWeb.PhxToolsComponents do
use PhxToolsWeb, :html

alias Phoenix.LiveView.Utils
alias PhxToolsWeb.Endpoint
alias PhxToolsWeb.PhxToolsLive.Icons
alias PhxToolsWeb.PhxToolsLive.Index

Expand All @@ -27,115 +28,86 @@ defmodule PhxToolsWeb.PhxToolsComponents do
"""
end

attr :live_action, :atom, required: true
attr :operating_system, :string, required: true
attr :source_code_url, :string, required: true

slot :installation_command, required: true
attr :os_type, :atom, required: true

@spec os_landing_card(assigns()) :: rendered()
def os_landing_card(%{live_action: :index} = assigns) do
~H"""
<div class="flex flex-col items-center max-w-5xl mx-auto">
<div>
<div class="sm:flex flex-col items-center">
<Icons.phx_tools_svg class="h-7 md:h-12" />
<p class="sm:py-6 text-center text-white text-sm md:text-base lg:text-lg font-martian font-semibold ">
The Complete Development Environment for Elixir and Phoenix
</p>
</div>
</div>
<div class="flex flex-col items-center md:w-11/12 lg:w-[1100px]">
<div class="bg-[#110A33] rounded-xl shadow-lg text-white shadow-[#2C2650] blur-shadow max-w-[809px]">
<div class="bg-[#2C2650] p-3 rounded-t-xl flex sm:flex-col md:flex-row sm:items-start md:items-center sm:space-y-2 md:space-y-0 md:space-x-4 sm:justify-start md:justify-center">
<Icons.exclamation_icon />
<p class="font-martian sm:text-sm md:text-base lg:text-lg md:py-2">
Unsupported Operating System Detected
</p>
</div>
<p class="text-xs leading-5 md:leading-6 md:text-sm lg:text-base text-center sm:px-3 font-martian sm:py-6 md:px-8">
It looks like you're using an operating system that Phx.tools doesn't currently support. This script is designed to work on Linux and macOS only. Please switch to a compatible operating system to continue.
</p>
<div class="flex-col items-center text-sm sm:flex font-martian sm:pb-8 md:block md:text-center">
<a href="https://phx.tools/macos" class="text-[#24B2FF] underline">
https://phx.tools/macos
</a>
<span class="px-2">or</span>
<a href="http://phx.tools/linux" class="text-[#24B2FF] underline">
http://phx.tools/linux
</a>
</div>
</div>
<p class="text-center text-white font-martian text-xs md:text-sm lg:text-base leading-5 md:leading-6 sm:py-8">
<%= phx_tools_description() %>
</p>
</div>
<.web_updates />
<.footer />
</div>
"""
end

def os_landing_card(assigns) do
~H"""
<div class="solved-height">
<div class="min-h-full">
<div class="mt-[5%] md:flex flex-col items-center max-w-4xl mx-auto">
<div class="sm:flex flex-col items-center">
<div class="sm:flex flex-col justify-center items-center">
<Icons.phx_tools_svg class="h-7 md:h-12" />
<p class="sm:py-6 text-center text-white text-sm md:text-base lg:text-lg font-martian font-semibold ">
The Complete Development Environment for Elixir and Phoenix
</p>
</div>
<div class="md:flex lg:w-[75%] flex-col relative">
<div class="md:flex lg:w-[75%] flex-col relative md:mb-2">
<div class="md:flex">
<div class="flex justify-end items-center md:order-last md:mx-2 sm:mb-2">
<Heroicons.information_circle
class="w-6 h-6 text-white cursor-pointer focus:text-gray-500"
class="hidden md:block w-6 h-6 text-white cursor-pointer focus:text-gray-500"
phx-click={JS.show(to: "#installation-instructions")}
/>
</div>
<div class="border sm:px-3 bg-[#26168780] w-full flex items-center justify-center py-2 sm:space-x-3 rounded-sm overflow-x-auto whitespace-nowrap no-scrollbar">
<h1 id="tool-installation" class="text-center text-white font-martian sm:text-sm">
<%= render_slot(@installation_command) %>
</h1>
<h1
id="tool-installation"
phx-hook="ScrollingHooks"
class="scroll text-center text-white font-martian sm:text-sm"
phx-no-format
>$SHELL -c "$(curl -fsSL <%= Endpoint.url() %>)"</h1>
<div id="copy" phx-hook="CopyHook" class="sm:py-3 md:my-0 cursor-pointer">
<Icons.copied_icon />
<Icons.copy_icon />
</div>
</div>
</div>
<div class="w-full bg-blue-600 flex justify-end">
<div class="w-full bg-blue-600 flex justify-center">
<.os_instructions
:let={installation_instruction}
installation_instructions={installation_instructions(@live_action)}
live_action={@live_action}
operating_system={@operating_system}
installation_instructions={installation_instructions(@os_type)}
os_type={@os_type}
>
<%= raw(installation_instruction) %>
</.os_instructions>
</div>
<div class="justify-center gap-4 md:flex">
<div class="sm:grid grid-cols-2 gap-4 sm:py-4">
<.command_select_button
live_action={@live_action}
operating_system={@operating_system}
class="px-3 flex justify-center"
/>
<.source_code_button source_code_url={@source_code_url} />
<div class="justify-center gap-4 mt-2 flex">
<div class="sm:grid grid gap-4 sm:py-4">
<.source_code_button />
</div>
</div>
</div>
<div class="lg:w-[1100px]">
<div>
<p class="text-xs px-2 leading-5 text-center text-white font-martian md:mb-5 md:text-sm md:leading-6 lg:text-base">
<%= phx_tools_description() %>
</p>
<div class="w-[100%] flex flex-col gap-8 items-center justify-center">
<div class="md:w-[65%]">
<p class="text-xs px-2 leading-5 text-center text-white font-martian md:text-sm md:leading-6 lg:text-base">
<%= phx_tools_description() %>
</p>
</div>
<div
:if={assigns.os_type == :other}
class="md:w-[61%] mb-6 bg-[#110A33] rounded-[4px] shadow-lg text-white shadow-[#2C2650] blur-shadow max-w-[809px]"
>
<div class="bg-[#2C2650] p-3 rounded-t-[4px] flex sm:flex-col md:flex-row sm:items-start md:items-center sm:space-y-2 md:space-y-0 md:space-x-4 sm:justify-start md:justify-center">
<div class="w-full md:w-auto flex justify-center items-center">
<Icons.exclamation_icon />
</div>
<p class="font-martian text-center sm:text-sm md:text-base lg:text-lg md:py-2">
Unsupported Operating System Detected
</p>
</div>
<p class="text-xs leading-5 md:leading-6 md:text-sm lg:text-base text-center sm:px-3 font-martian sm:py-6 md:px-8">
It looks like you're using an operating system that Phx.tools doesn't currently support. This script is designed to work on Linux and macOS only. Please switch to a compatible operating system to continue.
</p>
</div>
</div>
<div
:if={assigns.os_type != :other}
class="mx-auto"
data-asciicast={asciinema_cast_id(@live_action)}
data-asciicast={asciinema_cast_id(@os_type)}
id={"asciinema-#{Utils.random_id()}"}
phx-hook="AsciinemaHook"
>
Expand All @@ -159,13 +131,13 @@ defmodule PhxToolsWeb.PhxToolsComponents do
<div
id="installation-instructions"
phx-click-away={JS.hide(to: "#installation-instructions")}
class="hidden font-normal solved-height font-martian bg-[#110A33] absolute md:w-[90%]"
class="hidden font-normal solved-height font-martian bg-[#110A33] absolute md:w-[95%]"
>
<div class="block">
<div class="h-full shadow-custom shadow-md rounded-md pb-2">
<div class="text-start px-[3%] lg:text-xl md:text-lg sm:text-md">
<h1 class="text-white text-center text-sm md:text-base lg:text-lg lg:my-[5%] md:my-[2%] sm:my-[2%] lg:pt-5">
<%= Index.get_operating_system("#{@live_action}") %> installation process
<%= Index.get_operating_system(@os_type) %> installation process
</h1>
<ol class="list-decimal ml-3 pl-5 text-xs md:text-sm lg:text-base text-white lg:mt-4 sm:mt-2 leading-6">
<%= for instruction <- @installation_instructions do %>
Expand All @@ -181,57 +153,6 @@ defmodule PhxToolsWeb.PhxToolsComponents do
"""
end

defp command_select_button(%{live_action: :linux} = assigns) do
~H"""
<.link href={~p"/macos"}>
<div
id="macOS"
class={[
"border-2 border-[#755FFF] py-2 rounded-xl cursor-pointer hover:bg-indigo-850 flex items-center md:w-44 space-x-2",
@class
]}
>
<div class="bg-white w-6 h-6 rounded-full flex items-center justify-center">
<Icons.os_icon os="macOS" />
</div>
<h1 class="text-center text-white text-sm md:text-base font-martian">
macOS
</h1>
</div>
</.link>
"""
end

defp command_select_button(%{live_action: :macos} = assigns) do
~H"""
<.link href={~p"/linux"}>
<div
id="Linux"
class={[
"border-2 border-[#755FFF] py-2 rounded-xl cursor-pointer hover:bg-indigo-850 flex items-center md:w-44 space-x-2",
@class
]}
>
<div class="bg-white w-6 h-6 rounded-full flex items-center justify-center">
<Icons.os_icon os="Linux" />
</div>
<h1 class="text-center text-white text-sm md:text-base font-martian">
Linux
</h1>
</div>
</.link>
"""
end

defp installation_instructions(:linux) do
[
"Click on the copy icon to copy this command to your clipboard",
"Open Terminal by pressing <b class=\"font-extrabold\">Ctrl + Alt + T</b> together",
"Paste the shell command by pressing <b>Shift + Ctrl + V</b> together",
"Run the command by hitting <b>ENTER</b>"
]
end

defp installation_instructions(:macos) do
[
"Click on the copy icon to copy this command to your clipboard",
Expand All @@ -242,11 +163,20 @@ defmodule PhxToolsWeb.PhxToolsComponents do
]
end

defp installation_instructions(_os) do
[
"Click on the copy icon to copy this command to your clipboard",
"Open Terminal by pressing <b class=\"font-extrabold\">Ctrl + Alt + T</b> together",
"Paste the shell command by pressing <b>Shift + Ctrl + V</b> together",
"Run the command by hitting <b>ENTER</b>"
]
end

defp source_code_button(assigns) do
~H"""
<div class="border-2 border-[#755FFF] rounded-xl cursor-pointer hover:bg-indigo-850 flex font-martian md:w-44">
<div class="border-2 border-[#755FFF] py-4 rounded-xl cursor-pointer hover:bg-indigo-850 flex font-martian w-44">
<.link
href={@source_code_url}
href="https://github.com/optimumBA/phx.tools/blob/main/priv/script.sh"
target="_blank"
class="flex items-center justify-center w-full space-x-2 text-sm rounded-xl"
>
Expand Down
Loading

0 comments on commit c24910b

Please sign in to comment.