diff --git a/assets/css/app.css b/assets/css/app.css
index 244bcfb42..bbec7026b 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -2,7 +2,8 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;500;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
/* This file is for your main application CSS */
.solved-height {
padding: 0;
@@ -10,3 +11,15 @@
height: 100vh;
height: var(--doc-height);
}
+
+@layer utilities {
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ .no-scrollbar::-webkit-scrollbar {
+ display: none;
+ }
+ /* Hide scrollbar for IE, Edge and Firefox */
+ .no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
+}
diff --git a/assets/js/app.js b/assets/js/app.js
index 49652b7c9..e2d049c3b 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -21,9 +21,11 @@ import 'phoenix_html'
import { Socket } from 'phoenix'
import { LiveSocket } from 'phoenix_live_view'
import topbar from '../vendor/topbar'
-import CopyHook from './hooks/copy_hook.js'
+import AsciinemaHook from './hooks/asciinema_hook'
+import CopyHook from './hooks/copy_hook'
const Hooks = {
+ AsciinemaHook,
CopyHook,
}
diff --git a/assets/js/hooks/asciinema_hook.js b/assets/js/hooks/asciinema_hook.js
new file mode 100644
index 000000000..021fe51fb
--- /dev/null
+++ b/assets/js/hooks/asciinema_hook.js
@@ -0,0 +1,9 @@
+export default {
+ mounted() {
+ const id = this.el.dataset.asciicast
+ const script = document.createElement('script')
+ script.id = `asciicast-${id}`
+ script.src = `https://asciinema.org/a/${id}.js`
+ this.el.appendChild(script)
+ },
+}
diff --git a/assets/js/hooks/copy_hook.js b/assets/js/hooks/copy_hook.js
index eaa63e979..9e20f591d 100644
--- a/assets/js/hooks/copy_hook.js
+++ b/assets/js/hooks/copy_hook.js
@@ -1,12 +1,22 @@
export default {
mounted() {
- this.el.addEventListener('click', () => {
- var copyText = document.getElementById('tool-installation').innerText
+ const copyContainer = this.el
+ const copyElement = document.getElementById('copy-icon')
+ const copyConfirmationElement = document.getElementById('copied-icon')
+
+ copyContainer.addEventListener('click', (event) => {
+ event.preventDefault()
+ event.stopPropagation()
+
+ const copyText = document.getElementById('tool-installation').innerText
navigator.clipboard.writeText(copyText)
- copyBtn = document.getElementById('copy')
- copyBtn.innerHTML = 'Copied'
- copyBtn.setAttribute('disabled', '')
- copyBtn.classList.add('bg-[#9887FF]')
+ copyElement.classList.add('hidden')
+ copyConfirmationElement.classList.remove('hidden')
+
+ setTimeout(() => {
+ copyConfirmationElement.classList.add('hidden')
+ copyElement.classList.remove('hidden')
+ }, 600)
})
},
}
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index fae9eacd5..a1a6bcf82 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -16,12 +16,21 @@ module.exports = {
// => @media (min-width: 1240px) { ... }
},
extend: {
+ boxShadow: {
+ custom: '0 4px 10px rgba(194, 184, 255, 0.5)',
+ },
fontSize: {
md: '15px',
},
fontFamily: {
montserrat: ['Montserrat', 'sans-serif'],
},
+ fontFamily: {
+ pixelify: ['Pixelify Sans', 'sans-serif'],
+ },
+ fontFamily: {
+ martian: ['Martian Mono', 'sans-serif'],
+ },
colors: {
brand: '#FD4F00',
indigo: {
diff --git a/fly.toml b/fly.toml
index 21771bd3a..52e5135ac 100644
--- a/fly.toml
+++ b/fly.toml
@@ -35,4 +35,4 @@ timeout = "5s"
[[vm]]
cpu_kind = "shared"
cpus = 1
-memory_mb = 256
+memory_mb = 512
diff --git a/lib/phx_tools_web.ex b/lib/phx_tools_web.ex
index 529e54cf3..a54dda284 100644
--- a/lib/phx_tools_web.ex
+++ b/lib/phx_tools_web.ex
@@ -72,7 +72,6 @@ defmodule PhxToolsWeb do
quote do
use Phoenix.Component
- alias PhxToolsWeb.Components.SharedComponents
alias PhxToolsWeb.SeoMetaTagComponent
# Import convenience functions from controllers
diff --git a/lib/phx_tools_web/components/core_components.ex b/lib/phx_tools_web/components/core_components.ex
index 2b8b88ec9..629e94e90 100644
--- a/lib/phx_tools_web/components/core_components.ex
+++ b/lib/phx_tools_web/components/core_components.ex
@@ -21,33 +21,6 @@ defmodule PhxToolsWeb.CoreComponents do
@type rendered :: Rendered.t()
@type selector :: String.t()
- @doc """
- Renders a card for being able to select OS
- """
- attr :id, :string, required: true
- attr :class, :list
- attr :href, :string, required: true
- attr :os_icon, :string, required: true
- attr :os_name, :string, required: true
-
- @spec os_link_card(assigns()) :: rendered()
- def os_link_card(assigns) do
- ~H"""
- <.link patch={@href}>
-
-
-
<%= @os_name %>
-