This repository has no description
fix
author
damedotblog
date
(Feb 24, 2025, 1:37 PM -0500)
commit
856bfa9c
856bfa9c33708f827769b7de3abb6b3d3c45b766
parent
e8835dcb
e8835dcbd065172b259ae2e30633b397a1dd3958
+11
-109
+1
-54
src/components/Shortcut/Shortcut.css
+1
-54
src/components/Shortcut/Shortcut.css
···
37
37
.shortcut-image {
38
38
max-width: 100%;
39
39
height: auto;
40
-
}
41
-
42
-
.image-gallery-content {
43
-
position: fixed;
44
-
top: 0;
45
-
left: 0;
46
-
right: 0;
47
-
bottom: 0;
48
-
background-color: rgba(0, 0, 0, 0.8);
49
-
display: flex;
50
-
justify-content: center;
51
-
align-items: center;
52
-
z-index: 9999;
53
-
}
54
-
55
-
.image-gallery-slide img {
56
-
max-width: 90%;
57
-
max-height: 90%;
58
-
object-fit: contain;
59
-
}
60
-
61
-
/* src/components/Shortcut/Shortcut.css */
62
-
.lightbox-overlay {
63
-
position: fixed;
64
-
top: 0;
65
-
left: 0;
66
-
right: 0;
67
-
bottom: 0;
68
-
background-color: rgba(0, 0, 0, 0.8);
69
-
display: flex;
70
-
justify-content: center;
71
-
align-items: center;
72
-
z-index: 9999;
73
-
}
74
-
75
-
.lightbox-content {
76
-
position: relative;
77
-
}
78
-
79
-
.custom-image-gallery {
80
-
max-width: 90%;
81
-
max-height: 90%;
82
-
}
83
-
84
-
.close-button {
85
-
position: absolute;
86
-
top: 10px;
87
-
right: 10px;
88
-
color: #fff;
89
-
font-size: 24px;
90
-
background: none;
91
-
border: none;
92
-
cursor: pointer;
93
-
}
40
+
}
+10
-55
src/components/Shortcut/Shortcut.js
+10
-55
src/components/Shortcut/Shortcut.js
···
1
1
// src/components/Shortcut/Shortcut.jsx
2
-
import React, { useState, useRef } from 'react';
3
-
import ImageGallery from 'react-image-gallery';
4
-
import 'react-image-gallery/styles/css/image-gallery.css';
2
+
import React from 'react';
5
3
import './Shortcut.css';
6
4
7
5
const Shortcut = () => {
8
-
const [isOpen, setIsOpen] = useState(false);
9
-
const [currentIndex, setCurrentIndex] = useState(0);
10
-
const galleryRef = useRef(null);
11
-
12
-
const images = [
13
-
{
14
-
original: '/how-to-use-cred-blue-shortcut.png',
15
-
thumbnail: '/how-to-use-cred-blue-shortcut.png',
16
-
},
17
-
{
18
-
original: '/enable-share-sheet.png',
19
-
thumbnail: '/enable-share-sheet.png',
20
-
},
21
-
];
22
-
23
-
const openLightbox = (index) => {
24
-
setCurrentIndex(index);
25
-
setIsOpen(true);
26
-
};
27
-
28
-
const closeLightbox = () => {
29
-
setCurrentIndex(0);
30
-
setIsOpen(false);
31
-
};
32
-
33
-
const handleClickOutside = (event) => {
34
-
if (galleryRef.current && !galleryRef.current.contains(event.target)) {
35
-
closeLightbox();
36
-
}
37
-
};
38
-
39
6
return (
40
7
<>
41
8
<main className="shortcut-page">
···
44
11
<p>
45
12
If you have an iPhone, iPad, or Macbook, you can download a special Apple Shortcut to your device that will allow you to quickly check a Bluesky account's cred.blue score while you're scrolling inside of the Bluesky app.
46
13
</p>
14
+
15
+
<p>
16
+
You don't even have to go to an account's profile for the shortcut to work. You can tap the share button on any post, profile, or even use the developer mode "copy author DID" or "copy post URI", letting you quickly check a score even from within a thread or a feed.
17
+
</p>
18
+
47
19
<div className="image-container">
48
20
<img
49
21
src="/how-to-use-cred-blue-shortcut.png"
50
22
alt="How to use Cred.blue Shortcut"
51
23
className="shortcut-image"
52
-
onClick={() => openLightbox(0)}
53
24
/>
54
25
</div>
26
+
55
27
<p>
56
28
Once you have the Apple Shortcut installed, go through the setup process to enter your username and then check to make sure that the Share Sheet feature has been enabled.
57
29
</p>
30
+
58
31
<div className="image-container">
59
32
<img
60
33
src="/enable-share-sheet.png"
61
34
alt="Enable Share Sheet"
62
35
className="shortcut-image"
63
-
onClick={() => openLightbox(1)}
64
36
/>
65
37
</div>
38
+
66
39
<div className="shortcut-buttons">
67
40
<button
68
41
className="shortcut-button"
···
72
45
Download Shortcut
73
46
</button>
74
47
</div>
48
+
75
49
</div>
76
50
</main>
77
-
78
-
{isOpen && (
79
-
<div className="lightbox-overlay" onClick={handleClickOutside}>
80
-
<div className="lightbox-content" ref={galleryRef}>
81
-
<ImageGallery
82
-
items={images}
83
-
startIndex={currentIndex}
84
-
onClose={closeLightbox}
85
-
showThumbnails={false}
86
-
showPlayButton={false}
87
-
showFullscreenButton={false}
88
-
additionalClass="custom-image-gallery"
89
-
/>
90
-
<button className="close-button" onClick={closeLightbox}>
91
-
×
92
-
</button>
93
-
</div>
94
-
</div>
95
-
)}
96
51
</>
97
52
);
98
53
};