margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
instructions on how to use ios shortuct
scanash.com
web/public/shortcut_walkthrough.mp4
web/public/shortcut_walkthrough.mp4
This is a binary file and will not be displayed.
+192
web/src/components/modals/IOSShortcutModal.tsx
+192
web/src/components/modals/IOSShortcutModal.tsx
···
1
+
import React from "react";
2
+
import { Button } from "../ui";
3
+
import {
4
+
X,
5
+
ExternalLink,
6
+
Key,
7
+
Share,
8
+
Bookmark,
9
+
PenTool,
10
+
MoreHorizontal,
11
+
} from "lucide-react";
12
+
import { AppleIcon } from "../common/Icons";
13
+
14
+
interface IOSShortcutModalProps {
15
+
isOpen: boolean;
16
+
onClose: () => void;
17
+
}
18
+
19
+
export default function IOSShortcutModal({
20
+
isOpen,
21
+
onClose,
22
+
}: IOSShortcutModalProps) {
23
+
if (!isOpen) return null;
24
+
25
+
return (
26
+
<div
27
+
className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm animate-fade-in overflow-y-auto"
28
+
onClick={onClose}
29
+
>
30
+
<div
31
+
className="bg-white dark:bg-surface-900 rounded-xl shadow-2xl max-w-lg w-full animate-scale-in ring-1 ring-surface-200 dark:ring-surface-700 overflow-hidden my-auto"
32
+
onClick={(e) => e.stopPropagation()}
33
+
>
34
+
<div className="flex items-center justify-between px-6 py-4 border-b border-surface-200 dark:border-surface-800">
35
+
<div className="flex items-center gap-2">
36
+
<div className="w-8 h-8 rounded-lg bg-surface-100 dark:bg-surface-800 flex items-center justify-center text-surface-900 dark:text-white">
37
+
<AppleIcon size={16} />
38
+
</div>
39
+
<h2 className="text-lg font-semibold text-surface-900 dark:text-white">
40
+
Save from iOS Safari
41
+
</h2>
42
+
</div>
43
+
<button
44
+
onClick={onClose}
45
+
className="p-2 text-surface-400 dark:text-surface-500 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-lg transition-colors"
46
+
>
47
+
<X size={20} />
48
+
</button>
49
+
</div>
50
+
51
+
<div className="px-6 py-5 max-h-[70vh] overflow-y-auto space-y-6">
52
+
<div className="rounded-xl overflow-hidden bg-surface-100 dark:bg-surface-800 ring-1 ring-surface-200 dark:ring-surface-700 aspect-[9/16] max-h-80 mx-auto flex items-center justify-center relative">
53
+
<video
54
+
src="/shortcut_walkthrough.mp4"
55
+
autoPlay
56
+
muted
57
+
loop
58
+
playsInline
59
+
controls
60
+
className="w-full h-full object-contain"
61
+
/>
62
+
</div>
63
+
64
+
<div className="space-y-4">
65
+
<h3 className="text-sm font-semibold text-surface-900 dark:text-white uppercase tracking-wider">
66
+
How to use the shortcut
67
+
</h3>
68
+
69
+
<div className="space-y-3">
70
+
<div className="flex gap-3 text-sm">
71
+
<div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
72
+
1
73
+
</div>
74
+
<div>
75
+
<p className="text-surface-900 dark:text-white font-medium">
76
+
Install the shortcut
77
+
</p>
78
+
<a
79
+
href="https://www.icloud.com/shortcuts/21c87edf29b046db892c9e57dac6d1fd"
80
+
target="_blank"
81
+
rel="noopener noreferrer"
82
+
className="inline-flex items-center gap-1.5 mt-1.5 px-3 py-1.5 bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 text-surface-900 dark:text-white rounded-lg text-xs font-medium transition-colors"
83
+
>
84
+
<ExternalLink size={14} /> Get iOS Shortcut
85
+
</a>
86
+
</div>
87
+
</div>
88
+
89
+
<div className="flex gap-3 text-sm">
90
+
<div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
91
+
2
92
+
</div>
93
+
<div>
94
+
<p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5">
95
+
Generate an API Key{" "}
96
+
<Key size={14} className="text-surface-400" />
97
+
</p>
98
+
<p className="text-surface-600 dark:text-surface-400 mt-0.5">
99
+
Create a new key on this settings page and copy it.
100
+
</p>
101
+
</div>
102
+
</div>
103
+
104
+
<div className="flex gap-3 text-sm">
105
+
<div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
106
+
3
107
+
</div>
108
+
<div>
109
+
<p className="text-surface-900 dark:text-white font-medium">
110
+
Configure the shortcut
111
+
</p>
112
+
<p className="text-surface-600 dark:text-surface-400 mt-0.5">
113
+
In the Shortcuts app, click the{" "}
114
+
<MoreHorizontal size={14} className="inline mx-0.5" /> menu
115
+
on the <strong>Save to Margin</strong> shortcut, and paste
116
+
your API key in the Text action right below the setup
117
+
comment.
118
+
</p>
119
+
</div>
120
+
</div>
121
+
122
+
<div className="flex gap-3 text-sm">
123
+
<div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
124
+
4
125
+
</div>
126
+
<div>
127
+
<p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5">
128
+
To Bookmark a page{" "}
129
+
<Bookmark size={14} className="text-surface-400" />
130
+
</p>
131
+
<p className="text-surface-600 dark:text-surface-400 mt-0.5">
132
+
Don't select any text. Click the{" "}
133
+
<MoreHorizontal size={14} className="inline mx-0.5" /> menu
134
+
in Safari, press{" "}
135
+
<Share size={12} className="inline mx-0.5" />{" "}
136
+
<strong>Share</strong>, and select{" "}
137
+
<strong>Save to Margin</strong>.
138
+
</p>
139
+
</div>
140
+
</div>
141
+
142
+
<div className="flex gap-3 text-sm">
143
+
<div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
144
+
5
145
+
</div>
146
+
<div>
147
+
<p className="text-surface-900 dark:text-white font-medium flex items-center gap-1.5">
148
+
To Highlight text{" "}
149
+
<PenTool size={14} className="text-surface-400" />
150
+
</p>
151
+
<p className="text-surface-600 dark:text-surface-400 mt-0.5">
152
+
Select text on the page, click the{" "}
153
+
<MoreHorizontal size={14} className="inline mx-0.5" /> menu,
154
+
press <strong>Share</strong>, and select{" "}
155
+
<strong>Save to Margin</strong>. Leave the Note field empty.
156
+
</p>
157
+
</div>
158
+
</div>
159
+
160
+
<div className="flex gap-3 text-sm">
161
+
<div className="w-6 h-6 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 flex items-center justify-center flex-shrink-0 font-medium text-xs mt-0.5">
162
+
6
163
+
</div>
164
+
<div>
165
+
<p className="text-surface-900 dark:text-white font-medium">
166
+
To Add an Annotation
167
+
</p>
168
+
<p className="text-surface-600 dark:text-surface-400 mt-0.5">
169
+
Select text, share to <strong>Save to Margin</strong> (via
170
+
the <MoreHorizontal size={14} className="inline mx-0.5" />{" "}
171
+
menu), enter your custom note in the Note field, and press
172
+
Done!
173
+
</p>
174
+
</div>
175
+
</div>
176
+
</div>
177
+
</div>
178
+
</div>
179
+
180
+
<div className="px-6 py-4 bg-surface-50 dark:bg-surface-800/50 border-t border-surface-200 dark:border-surface-800">
181
+
<Button
182
+
onClick={onClose}
183
+
variant="primary"
184
+
className="w-full justify-center"
185
+
>
186
+
Got it
187
+
</Button>
188
+
</div>
189
+
</div>
190
+
</div>
191
+
);
192
+
}
+11
-6
web/src/views/core/Settings.tsx
+11
-6
web/src/views/core/Settings.tsx
···
61
61
import { AppleIcon } from "../../components/common/Icons";
62
62
import { Link } from "react-router-dom";
63
63
import { HighlightImporter } from "./HighlightImporter";
64
+
import IOSShortcutModal from "../../components/modals/IOSShortcutModal";
64
65
65
66
export default function Settings() {
66
67
const user = useStore($user);
···
77
78
const [labelerInfo, setLabelerInfo] = useState<LabelerInfo | null>(null);
78
79
const [newLabelerDid, setNewLabelerDid] = useState("");
79
80
const [addingLabeler, setAddingLabeler] = useState(false);
81
+
const [isShortcutModalOpen, setIsShortcutModalOpen] = useState(false);
80
82
const preferences = useStore($preferences);
81
83
82
84
useEffect(() => {
···
647
649
<p className="text-sm text-surface-400 dark:text-surface-500 mb-4">
648
650
Save pages to Margin from Safari on iPhone and iPad
649
651
</p>
650
-
<a
651
-
href="https://www.icloud.com/shortcuts/21c87edf29b046db892c9e57dac6d1fd"
652
-
target="_blank"
653
-
rel="noopener noreferrer"
652
+
<button
653
+
onClick={() => setIsShortcutModalOpen(true)}
654
654
className="inline-flex items-center gap-2.5 px-4 py-2.5 bg-surface-900 dark:bg-white text-white dark:text-surface-900 rounded-xl font-medium text-sm transition-all hover:opacity-90"
655
655
>
656
656
<AppleIcon size={16} />
657
-
Get iOS Shortcut
658
-
</a>
657
+
Setup iOS Shortcut
658
+
</button>
659
659
</section>
660
660
661
661
<section className="card p-5">
···
668
668
</button>
669
669
</section>
670
670
</div>
671
+
672
+
<IOSShortcutModal
673
+
isOpen={isShortcutModalOpen}
674
+
onClose={() => setIsShortcutModalOpen(false)}
675
+
/>
671
676
</div>
672
677
);
673
678
}