| 1 |
/** |
| 2 |
* Reference material: the shortcode, the template functions, the JavaScript |
| 3 |
* helpers and what changed in each release. |
| 4 |
* |
| 5 |
* The per-option explanations deliberately live next to the options rather |
| 6 |
* than here -- this tab is for the things that have no control to sit beside. |
| 7 |
*/ |
| 8 |
|
| 9 |
import { useEffect, useState } from '@wordpress/element'; |
| 10 |
import apiFetch from '@wordpress/api-fetch'; |
| 11 |
import { __, _n, sprintf } from '@wordpress/i18n'; |
| 12 |
import { |
| 13 |
Card, |
| 14 |
CardBody, |
| 15 |
CardHeader, |
| 16 |
ExternalLink, |
| 17 |
} from '@wordpress/components'; |
| 18 |
|
| 19 |
function Snippet( { children } ) { |
| 20 |
return ( |
| 21 |
<pre className="cryptx-help__snippet"> |
| 22 |
<code>{ children }</code> |
| 23 |
</pre> |
| 24 |
); |
| 25 |
} |
| 26 |
|
| 27 |
/** |
| 28 |
* One release: its version and what changed in it. |
| 29 |
* |
| 30 |
* @param {Object} props Component props. |
| 31 |
* @param {Object} props.release The release, as the endpoint delivers it. |
| 32 |
* @param {boolean} props.isCurrent Whether this is the installed version. |
| 33 |
* @return {Element} The rendered release. |
| 34 |
*/ |
| 35 |
function Release( { release, isCurrent } ) { |
| 36 |
return ( |
| 37 |
<section className="cryptx-help__release"> |
| 38 |
<h3> |
| 39 |
{ release.version } |
| 40 |
{ isCurrent && ( |
| 41 |
<span className="cryptx-help__badge"> |
| 42 |
{ __( 'installed', 'cryptx' ) } |
| 43 |
</span> |
| 44 |
) } |
| 45 |
</h3> |
| 46 |
<ul> |
| 47 |
{ release.items.map( ( item, index ) => ( |
| 48 |
<li |
| 49 |
key={ index } |
| 50 |
// The entries come from readme.txt and were run through |
| 51 |
// wp_kses on the server; they carry links to the support |
| 52 |
// forum. |
| 53 |
|
| 54 |
dangerouslySetInnerHTML={ { __html: item } } |
| 55 |
/> |
| 56 |
) ) } |
| 57 |
</ul> |
| 58 |
</section> |
| 59 |
); |
| 60 |
} |
| 61 |
|
| 62 |
function Changelog() { |
| 63 |
const [ data, setData ] = useState( null ); |
| 64 |
|
| 65 |
useEffect( () => { |
| 66 |
apiFetch( { path: '/cryptx/v1/changelog' } ) |
| 67 |
.then( ( response ) => setData( response ) ) |
| 68 |
.catch( () => setData( { releases: [], current: '' } ) ); |
| 69 |
}, [] ); |
| 70 |
|
| 71 |
if ( data === null ) { |
| 72 |
return <p>{ __( 'Loading…', 'cryptx' ) }</p>; |
| 73 |
} |
| 74 |
|
| 75 |
const { releases, current } = data; |
| 76 |
|
| 77 |
if ( ! releases || releases.length === 0 ) { |
| 78 |
return <p>{ __( 'No changelog available.', 'cryptx' ) }</p>; |
| 79 |
} |
| 80 |
|
| 81 |
const [ newest, ...older ] = releases; |
| 82 |
|
| 83 |
return ( |
| 84 |
<div className="cryptx-help__changelog"> |
| 85 |
<Release |
| 86 |
release={ newest } |
| 87 |
isCurrent={ newest.version === current } |
| 88 |
/> |
| 89 |
|
| 90 |
{ /* Twelve releases printed in full ran to some two thousand pixels |
| 91 |
and buried the shortcode documentation above them. The one |
| 92 |
people came for is the newest; the rest are one click away |
| 93 |
rather than gone. */ } |
| 94 |
{ older.length > 0 && ( |
| 95 |
<details className="cryptx-help__older"> |
| 96 |
<summary> |
| 97 |
{ sprintf( |
| 98 |
/* translators: %d: number of older releases */ |
| 99 |
_n( |
| 100 |
'Show %d earlier release', |
| 101 |
'Show %d earlier releases', |
| 102 |
older.length, |
| 103 |
'cryptx' |
| 104 |
), |
| 105 |
older.length |
| 106 |
) } |
| 107 |
</summary> |
| 108 |
{ older.map( ( release ) => ( |
| 109 |
<Release |
| 110 |
key={ release.version } |
| 111 |
release={ release } |
| 112 |
isCurrent={ release.version === current } |
| 113 |
/> |
| 114 |
) ) } |
| 115 |
</details> |
| 116 |
) } |
| 117 |
</div> |
| 118 |
); |
| 119 |
} |
| 120 |
|
| 121 |
export default function HelpTab() { |
| 122 |
return ( |
| 123 |
<div |
| 124 |
className="cryptx-tab-panel" |
| 125 |
role="tabpanel" |
| 126 |
id="cryptx-panel-help" |
| 127 |
aria-labelledby="cryptx-tab-help" |
| 128 |
> |
| 129 |
<Card className="cryptx-section"> |
| 130 |
<CardHeader> |
| 131 |
<h2 className="cryptx-section__title"> |
| 132 |
{ __( 'Protect a single address', 'cryptx' ) } |
| 133 |
</h2> |
| 134 |
</CardHeader> |
| 135 |
<CardBody> |
| 136 |
<p> |
| 137 |
{ __( |
| 138 |
'The shortcode works even in posts you excluded from CryptX, which makes it the way to protect one address in otherwise untouched content.', |
| 139 |
'cryptx' |
| 140 |
) } |
| 141 |
</p> |
| 142 |
<Snippet>{ '[cryptx]info@example.com[/cryptx]' }</Snippet> |
| 143 |
<p> |
| 144 |
{ __( |
| 145 |
'Any setting from this screen can be overridden for a single shortcode by using its option name, written in lower case:', |
| 146 |
'cryptx' |
| 147 |
) } |
| 148 |
</p> |
| 149 |
<Snippet> |
| 150 |
{ |
| 151 |
'[cryptx opt_linktext="1" alt_linktext="Contact us"]info@example.com[/cryptx]' |
| 152 |
} |
| 153 |
</Snippet> |
| 154 |
<p> |
| 155 |
{ __( |
| 156 |
'On top of the settings, four attributes describe the mail itself. They end up inside the encrypted link, so they stay hidden from spam bots just like the address:', |
| 157 |
'cryptx' |
| 158 |
) } |
| 159 |
</p> |
| 160 |
<Snippet> |
| 161 |
{ |
| 162 |
'[cryptx subject="Price enquiry" cc="sales@example.com"]info@example.com[/cryptx]' |
| 163 |
} |
| 164 |
</Snippet> |
| 165 |
<p> |
| 166 |
{ __( |
| 167 |
'Available are subject, body, cc and bcc — the headers RFC 6068 allows in a mailto link. Anything else is dropped. A link you wrote yourself with its own "?subject=" keeps it; the attribute only fills in where nothing is set.', |
| 168 |
'cryptx' |
| 169 |
) } |
| 170 |
</p> |
| 171 |
<p className="cryptx-help__note"> |
| 172 |
{ __( |
| 173 |
'The shortcode needs an address between its tags. Written self-closing, as [cryptx subject="…" /], there is nothing to protect and nothing is output — the attributes go nowhere.', |
| 174 |
'cryptx' |
| 175 |
) } |
| 176 |
</p> |
| 177 |
<p className="cryptx-help__note"> |
| 178 |
{ __( |
| 179 |
'Until 4.1.0 the attribute "subject" was accepted and then silently discarded, and an address written as "info@example.com?subject=…" lost its subject on the way as well. Both work now. The attribute "linktext", also listed by older versions of this page, never existed — use alt_linktext.', |
| 180 |
'cryptx' |
| 181 |
) } |
| 182 |
</p> |
| 183 |
</CardBody> |
| 184 |
</Card> |
| 185 |
|
| 186 |
<Card className="cryptx-section"> |
| 187 |
<CardHeader> |
| 188 |
<h2 className="cryptx-section__title"> |
| 189 |
{ __( 'In a theme', 'cryptx' ) } |
| 190 |
</h2> |
| 191 |
</CardHeader> |
| 192 |
<CardBody> |
| 193 |
<Snippet> |
| 194 |
{ |
| 195 |
"<?php echo cryptx_encrypt( 'info@example.com' ); ?>" |
| 196 |
} |
| 197 |
</Snippet> |
| 198 |
<p> |
| 199 |
{ __( |
| 200 |
'Takes an optional array of settings as its second argument, using the same option names as the shortcode.', |
| 201 |
'cryptx' |
| 202 |
) } |
| 203 |
</p> |
| 204 |
<p className="cryptx-help__note"> |
| 205 |
{ __( |
| 206 |
'The older function encryptx() still exists but is deprecated and will be removed in a future major release.', |
| 207 |
'cryptx' |
| 208 |
) } |
| 209 |
</p> |
| 210 |
</CardBody> |
| 211 |
</Card> |
| 212 |
|
| 213 |
<Card className="cryptx-section"> |
| 214 |
<CardHeader> |
| 215 |
<h2 className="cryptx-section__title"> |
| 216 |
{ __( 'In your own JavaScript', 'cryptx' ) } |
| 217 |
</h2> |
| 218 |
</CardHeader> |
| 219 |
<CardBody> |
| 220 |
<p> |
| 221 |
{ __( |
| 222 |
'For addresses that are added to the page after it loaded, and therefore never passed through the server side filters.', |
| 223 |
'cryptx' |
| 224 |
) } |
| 225 |
</p> |
| 226 |
<Snippet> |
| 227 |
{ `const link = document.createElement( 'a' ); |
| 228 |
link.href = generateDeCryptXHandler( 'info@example.com' ); |
| 229 |
link.textContent = 'Contact us';` } |
| 230 |
</Snippet> |
| 231 |
</CardBody> |
| 232 |
</Card> |
| 233 |
|
| 234 |
<Card className="cryptx-section"> |
| 235 |
<CardHeader> |
| 236 |
<h2 className="cryptx-section__title"> |
| 237 |
{ __( 'What changed', 'cryptx' ) } |
| 238 |
</h2> |
| 239 |
</CardHeader> |
| 240 |
<CardBody> |
| 241 |
<Changelog /> |
| 242 |
<p> |
| 243 |
<ExternalLink href="https://wordpress.org/plugins/cryptx/#developers"> |
| 244 |
{ __( 'Full history on wordpress.org', 'cryptx' ) } |
| 245 |
</ExternalLink> |
| 246 |
</p> |
| 247 |
</CardBody> |
| 248 |
</Card> |
| 249 |
</div> |
| 250 |
); |
| 251 |
} |
| 252 |
|
