Skip to content

Commit 4f48e1b

Browse files
SipherSipher
committed
add ClickableImage component for images in guides to enhance user interaction and visualization across multiple documentation pages
1 parent 6661f21 commit 4f48e1b

6 files changed

Lines changed: 205 additions & 35 deletions

File tree

‎src/components/ClickableImage.astro‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
---
2+
import { Image } from 'astro:assets';
3+
4+
interface Props {
5+
src: any;
6+
alt: string;
7+
class?: string;
8+
}
9+
10+
const { src, alt, class: className = "" } = Astro.props;
11+
---
12+
13+
<div class={`clickable-image-container ${className}`}>
14+
<Image
15+
src={src}
16+
alt={alt}
17+
width={800}
18+
class="clickable-image cursor-pointer hover:opacity-80 transition-opacity h-auto"
19+
/>
20+
</div>
21+
22+
<div class="image-modal fixed inset-0 bg-black bg-opacity-95 items-center justify-center p-8 modal-hidden" style="z-index: 99999999;">
23+
<div class="relative w-full h-full flex items-center justify-center">
24+
<div class="flex flex-col items-center justify-center">
25+
<img
26+
src={src.src}
27+
alt={alt}
28+
class="object-contain rounded-lg shadow-2xl modal-image"
29+
style="width: 1120px; max-width: 90vw; max-height: 70vh;"
30+
/>
31+
32+
<!-- Close button below the image -->
33+
<button class="close-modal-btn h-12 bg-transparent border-2 border-gray-300 hover:border-gray-100 flex items-center justify-center text-gray-300 hover:text-gray-100 text-xl font-bold transition-all duration-200 cursor-pointer mt-2" style="z-index: 999999999;">
34+
✕ Close
35+
</button>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<script>
41+
function initClickableImages() {
42+
const images = document.querySelectorAll('.clickable-image');
43+
const modals = document.querySelectorAll('.image-modal');
44+
45+
images.forEach((image, index) => {
46+
const modal = modals[index];
47+
const closeBtn = modal?.querySelector('.close-modal-btn');
48+
49+
if (!modal) return;
50+
51+
// Open modal when image is clicked
52+
image.addEventListener('click', (e) => {
53+
e.preventDefault();
54+
e.stopPropagation();
55+
modal.classList.remove('modal-hidden');
56+
modal.classList.add('flex');
57+
document.body.style.overflow = 'hidden';
58+
59+
// Hide Starlight sidebar and navigation
60+
const rightSidebar = document.querySelector('.right-sidebar, [data-pagefind-ignore], .sl-sidebar-content') as HTMLElement;
61+
const leftSidebar = document.querySelector('.sidebar, .sl-nav') as HTMLElement;
62+
const header = document.querySelector('header, .sl-nav-header') as HTMLElement;
63+
64+
if (rightSidebar) rightSidebar.style.display = 'none';
65+
if (leftSidebar) leftSidebar.style.display = 'none';
66+
if (header) header.style.display = 'none';
67+
});
68+
69+
// Close modal when clicking on background (click-off functionality)
70+
modal.addEventListener('click', (e) => {
71+
// Check if click is on the modal background (not on the image or close button)
72+
if (e.target === modal || e.target === modal.firstElementChild) {
73+
console.log('Background clicked - closing modal'); // Debug log
74+
closeModal();
75+
}
76+
});
77+
78+
// Function to close modal and restore UI
79+
function closeModal() {
80+
modal.classList.add('modal-hidden');
81+
modal.classList.remove('flex');
82+
document.body.style.overflow = 'auto';
83+
84+
// Restore Starlight sidebar and navigation
85+
const rightSidebar = document.querySelector('.right-sidebar, [data-pagefind-ignore], .sl-sidebar-content') as HTMLElement;
86+
const leftSidebar = document.querySelector('.sidebar, .sl-nav') as HTMLElement;
87+
const header = document.querySelector('header, .sl-nav-header') as HTMLElement;
88+
89+
if (rightSidebar) rightSidebar.style.display = '';
90+
if (leftSidebar) leftSidebar.style.display = '';
91+
if (header) header.style.display = '';
92+
}
93+
94+
// Close modal when clicking close button
95+
closeBtn?.addEventListener('click', (e) => {
96+
e.preventDefault();
97+
e.stopPropagation();
98+
console.log('Close button clicked!'); // Debug log
99+
closeModal();
100+
});
101+
102+
// Also add mousedown event as backup
103+
closeBtn?.addEventListener('mousedown', (e) => {
104+
e.preventDefault();
105+
e.stopPropagation();
106+
console.log('Close button mousedown!'); // Debug log
107+
closeModal();
108+
});
109+
110+
// Close modal on escape key
111+
document.addEventListener('keydown', (e) => {
112+
if (e.key === 'Escape' && !modal.classList.contains('modal-hidden')) {
113+
closeModal();
114+
}
115+
});
116+
});
117+
}
118+
119+
// Initialize on page load
120+
if (document.readyState === 'loading') {
121+
document.addEventListener('DOMContentLoaded', initClickableImages);
122+
} else {
123+
initClickableImages();
124+
}
125+
126+
// Re-initialize on navigation (for SPA-like behavior)
127+
document.addEventListener('astro:page-load', initClickableImages);
128+
</script>
129+
130+
<style>
131+
.clickable-image-container {
132+
display: inline-block;
133+
position: relative;
134+
}
135+
136+
.clickable-image {
137+
border-radius: 8px;
138+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
139+
transition: transform 0.2s ease, box-shadow 0.2s ease;
140+
max-width: 100%;
141+
height: auto;
142+
}
143+
144+
.clickable-image:hover {
145+
transform: scale(1.02);
146+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
147+
}
148+
149+
.image-modal {
150+
backdrop-filter: blur(8px);
151+
-webkit-backdrop-filter: blur(8px);
152+
}
153+
154+
.modal-hidden {
155+
display: none !important;
156+
}
157+
158+
.image-modal img {
159+
border-radius: 8px;
160+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
161+
}
162+
163+
.close-modal-btn {
164+
border: 2px solid rgba(0, 0, 0, 0.1);
165+
}
166+
167+
.close-modal-btn:hover {
168+
border-color: rgba(0, 0, 0, 0.2);
169+
}
170+
</style>

‎src/content/docs/how-to-guides/become-a-root-agent.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
CardGrid,
1010
Card
1111
} from "@astrojs/starlight/components";
12-
import { Image } from 'astro:assets';
12+
import ClickableImage from '/src/components/ClickableImage.astro';
1313
import daoShapeTheNetwork from '/public/images/how-to-guide/become-a-root-agent/dao-shape-the-network.png';
1414
import selectTheWhitelistOption from '/public/images/how-to-guide/become-a-root-agent/select-the-whitelist-option.png';
1515

@@ -66,7 +66,7 @@ Becoming a Root Agent allows you to receive emissions directly from the root and
6666
3. **Click in Shape the Network Button**
6767
It can be found in the top right corner of the dashboard.
6868
It will open a modal with a form to apply for whitelisting.
69-
<Image src={daoShapeTheNetwork} alt="Shape the network button" width="1920" />
69+
<ClickableImage src={daoShapeTheNetwork} alt="Shape the network button" />
7070

7171
4. **Select the Whitelist an Agent option and fill the form**
7272
In modal, select the option **Whitelist an Agent** and fill in the required fields for your application.
@@ -79,7 +79,7 @@ Becoming a Root Agent allows you to receive emissions directly from the root and
7979
</Aside>
8080

8181

82-
<Image src={selectTheWhitelistOption} alt="Select whitelist option" width="1920" />
82+
<ClickableImage src={selectTheWhitelistOption} alt="Select whitelist option" />
8383

8484
5. **Submit Proposal**
8585
Click in **Submit Proposal** and confirm the transaction in your wallet after you filled in the form.

‎src/content/docs/how-to-guides/bridge-to-base.mdx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
CardGrid,
1010
Card
1111
} from "@astrojs/starlight/components";
12-
import { Image } from 'astro:assets';
12+
import ClickableImage from '/src/components/ClickableImage.astro';
1313
import metamaskSubwalletConnect from '/public/images/how-to-guide/bridge-to-base/metamask-subwallet-connect.png';
1414
import fillInFormToConvert from '/public/images/how-to-guide/bridge-to-base/fill-in-form-to-convert.png';
1515
import confirmTransactionInMetamask from '/public/images/how-to-guide/bridge-to-base/confirm-transaction-in-metamask.png';
@@ -72,7 +72,7 @@ For the sake of simplicity, we are going to refer to the **Native Torus** as **T
7272

7373
1. **Connect both the Torus and Metamask wallets in the [Base Bridge Web App](https://bridge.torus.network/?tab=base&from=base&to=torus)**.
7474
At the top right corner of the app, connect both your **Torus Wallet** and **MetaMask**.
75-
<Image src={metamaskSubwalletConnect} alt="SubWallet and Metamask connect screen" width="1920" />
75+
<ClickableImage src={metamaskSubwalletConnect} alt="SubWallet and Metamask connect screen" />
7676

7777
2. **Swap from Base Torus to Torus EVM**
7878
- Make sure you are **connected** in **Both Wallets**
@@ -82,22 +82,22 @@ For the sake of simplicity, we are going to refer to the **Native Torus** as **T
8282
Fill in the form with the amount you want to convert and the Recipient Address, by clicking on the Self button, it will automatically fill the address for you with your connected base wallet.
8383
With all the information filled in, click **Continue**.
8484

85-
<Image src={fillInFormToConvert} alt="Convert Base TORUS with Torus EVM" width="1920" />
85+
<ClickableImage src={fillInFormToConvert} alt="Convert Base TORUS with Torus EVM" />
8686

8787
3. **Confirm the transaction**
8888
After filling in the form, you will be prompted to confirm the transaction in Metamask.
8989
<Aside type="caution">
9090
Always verify the transaction in Metamask before signing it, it is of your responsibility to verify the transaction details.
9191
You also must have enough funds in your Metamask wallet to cover the transaction fees.
9292
</Aside>
93-
<Image src={confirmTransactionInMetamask} alt="Confirm the transaction in Metamask" width="1920" />
93+
<ClickableImage src={confirmTransactionInMetamask} alt="Confirm the transaction in Metamask" />
9494

9595
4. **Confirmation of the swap**
9696
After the transaction succeeds, your Base Torus should now be displayed as Torus EVM as it was successfully swapped.
9797
This process can take a while to happen in the chain side,
9898
so please, wait a few minutes and refresh the [Base Bridge Web App](https://bridge.torus.network/?tab=base&from=base&to=torus).
9999
If you have any issues, reach out to our support on the [Official Torus Discord](https://discord.gg/torus).
100-
<Image src={baseTorusSwappedSuccessfully} alt="Confirmation of the swap" width="1920" />
100+
<ClickableImage src={baseTorusSwappedSuccessfully} alt="Confirmation of the swap" />
101101

102102

103103
</Steps>
@@ -109,7 +109,7 @@ For the sake of simplicity, we are going to refer to the **Native Torus** as **T
109109
<Steps>
110110
1. **Connect both the Torus and Metamask wallets in the [Base Bridge Web App](https://bridge.torus.network/?tab=base&from=base&to=torus)**.
111111
At the top right corner of the app, connect both your **Torus Wallet** and **MetaMask**.
112-
<Image src={metamaskConnectEvm} alt="SubWallet and Metamask connect screen" width="1920" />
112+
<ClickableImage src={metamaskConnectEvm} alt="SubWallet and Metamask connect screen" />
113113

114114

115115
1. **Swap from Torus EVM to Torus**
@@ -118,7 +118,7 @@ For the sake of simplicity, we are going to refer to the **Native Torus** as **T
118118
- Make sure it is **FROM** Torus EVM **TO** Torus
119119

120120
Fill in the form with the amount you want to convert, after confirmation, you will be prompted to sign the transaction in Torus.
121-
<Image src={fillInFormToConvertTorusEvmNativeTorus} alt="Convert Torus EVM to Native Torus" width="1920" />
121+
<ClickableImage src={fillInFormToConvertTorusEvmNativeTorus} alt="Convert Torus EVM to Native Torus" />
122122

123123
2. **Confirm the transaction**
124124
After filling in the form, you will be prompted to confirm the transaction in Metamask.
@@ -127,13 +127,13 @@ For the sake of simplicity, we are going to refer to the **Native Torus** as **T
127127
You also must have enough funds in your Metamask wallet to cover the transaction fees.
128128
</Aside>
129129

130-
<Image src={confirmTransactionInMetamaskTorusEvmToTorus} alt="Confirm the transaction in Metamask" width="1920" />
130+
<ClickableImage src={confirmTransactionInMetamaskTorusEvmToTorus} alt="Confirm the transaction in Metamask" />
131131

132132
3. **Confirmation of the swap**
133133
After the transaction succeeds, your Torus EVM should now be displayed as Torus as it was successfully swapped.
134134
This process can take a while to happen in the chain side,
135135
so please, wait a few minutes and refresh the [Base Bridge Web App](https://bridge.torus.network/?tab=base&from=base&to=torus).
136-
<Image src={torusEvmConvertSuccessfully} alt="Confirmation of the swap" width="1920" />
136+
<ClickableImage src={torusEvmConvertSuccessfully} alt="Confirmation of the swap" />
137137

138138
4. **All Done**
139139
You’ve now successfully bridged Torus tokens between **Torus**, **Torus EVM**, and **Base**.

‎src/content/docs/how-to-guides/register-an-agent.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Card,
1111
LinkCard
1212
} from "@astrojs/starlight/components";
13-
import { Image } from 'astro:assets';
13+
import ClickableImage from '/src/components/ClickableImage.astro';
1414
import registerAnAgentButton from '/public/images/how-to-guide/register-an-agent/register-an-agent-button.png';
1515
import connectWalletOnPortal from '/public/images/how-to-guide/register-an-agent/connect-wallet-on-portal.png';
1616
import filledAgentInformation from '/public/images/how-to-guide/register-an-agent/filled-agent-information.png';
@@ -59,11 +59,11 @@ Registered agents can actively participate in the network by creating permission
5959

6060
1. **Visit the [Agent Registration Page](https://portal.torus.network/network-operations/register-agent)**
6161
This is found under the **Network Operations** tab in the [Torus Portal](https://portal.torus.network)'s sidebar.
62-
<Image src={registerAnAgentButton} alt="Agent registration tab" width="1920" />
62+
<ClickableImage src={registerAnAgentButton} alt="Agent registration tab" />
6363

6464
2. **Connect your Torus Wallet**
6565
Click the **Connect Wallet** button at the top right and select your Torus wallet.
66-
<Image src={connectWalletOnPortal} alt="Connect Torus Wallet" width="1920" />
66+
<ClickableImage src={connectWalletOnPortal} alt="Connect Torus Wallet" />
6767

6868
3. **Fill in your agent details**
6969
Provide the required information such as your agent name, description, and technical details.
@@ -77,12 +77,12 @@ Registered agents can actively participate in the network by creating permission
7777
- agent_name (Valid agent Name)
7878
- agent-name (Valid agent Name)
7979
</Aside>
80-
<Image src={filledAgentInformation} alt="Agent details form" width="1920" />
80+
<ClickableImage src={filledAgentInformation} alt="Agent details form" />
8181

8282
4. **Add Relevant links and social profiles**
8383
Even though it is not mandatory, we strongly recommend adding links and social profiles.
8484
This will help your agent to be discovered and used by the Torus community.
85-
<Image src={filledAgentSocials} alt="Agent metadata input" width="1920" />
85+
<ClickableImage src={filledAgentSocials} alt="Agent metadata input" />
8686

8787
5. **Confirm registration**
8888
Click in register an agent and confirm the transaction in your wallet.

‎src/content/docs/how-to-guides/setup-a-wallet.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
Card
1212
} from "@astrojs/starlight/components";
1313

14-
import { Image } from 'astro:assets';
14+
import ClickableImage from '/src/components/ClickableImage.astro';
1515
import subwalletExtensionActivated from '/public/images/how-to-guide/setup-wallet/subwallet-extension-activated.png';
1616
import subwalletCreatedSuccessfully from '/public/images/how-to-guide/setup-wallet/subwallet-created-successfully.png';
1717
import subwalletOpenSetup from '/public/images/how-to-guide/setup-wallet/subwallet-open-setup.png';
@@ -54,7 +54,7 @@ For simplicity’s sake, though, we’ll focus on SubWallet.
5454

5555
</span>
5656

57-
<Image src={subwalletExtensionActivated} alt="SubWallet extension activated in Brave browser" width="1920" />
57+
<ClickableImage src={subwalletExtensionActivated} alt="SubWallet extension activated in Brave browser" />
5858

5959
</Steps>
6060

@@ -100,7 +100,7 @@ For simplicity’s sake, though, we’ll focus on SubWallet.
100100

101101
</span>
102102

103-
<Image src={subwalletCreatedSuccessfully} alt="SubWallet account successfully created" width="1920" />
103+
<ClickableImage src={subwalletCreatedSuccessfully} alt="SubWallet account successfully created" />
104104

105105
</Steps>
106106

@@ -110,21 +110,21 @@ For simplicity’s sake, though, we’ll focus on SubWallet.
110110

111111
1. **Open the Subwallet Setup**
112112
Click in the three bars(**☰**) on the top left corner of the subwallet extension.
113-
<Image src={subwalletOpenSetup} alt="SubWallet setup button" width="1920" />
113+
<ClickableImage src={subwalletOpenSetup} alt="SubWallet setup button" />
114114

115115
2. **Select Manage Networks**
116116
Under the **Assets & Addresses** tab, click on **Manage Networks**.
117-
<Image src={subwalletSelectConfigToAddNetwork} alt="SubWallet manage networks button" width="1920" />
117+
<ClickableImage src={subwalletSelectConfigToAddNetwork} alt="SubWallet manage networks button" />
118118

119119

120120
3. **Search for Torus and activate it**
121121
Click on the search bar, type Torus, and select it from the list. Make sure to enable it so it appears in your list of active tokens.
122-
<Image src={subwalletSearchTorusNetwork} alt="SubWallet search for Torus button" width="1920" />
122+
<ClickableImage src={subwalletSearchTorusNetwork} alt="SubWallet search for Torus button" />
123123

124124
4. **Confirm Torus is active**
125125
Once enabled, **Torus** will appear in your list of active networks.
126126
You might have to scroll down to find Torus in the list.
127-
<Image src={subwalletDoneTorusSetup} alt="SubWallet network list with torus" width="1920" />
127+
<ClickableImage src={subwalletDoneTorusSetup} alt="SubWallet network list with torus" />
128128

129129

130130
<Aside>

0 commit comments

Comments
 (0)