content: challenge time

.env.example

@@ -0,0 +1 @@
+PUBLIC_DEVTOOLS_ON=true

package.json

@@ -38,7 +38,8 @@
 		"date-fns": "^2.30.0",
 		"node-html-parser": "^6.1.11",
 		"qrcode": "^1.5.3",
-		"reading-time": "^1.5.0"
+		"reading-time": "^1.5.0",
+		"svelte-material-icons": "^3.0.5"
 	},
 	"engines": {
 		"node": ">=18.0.0"

posts/000_test-flight/index.md

@@ -8,6 +8,6 @@ The 🥷 ships by stealth. Are you ready?
 <hr id="l402" hidden>
 Good!
 
-<span style="font-style: italic;">Taking off...</span>
+<p style="font-style: italic;">Taking off...</p>
 
 ![test flight](./test_flight.jpg)

posts/001_challege-time/index.md

@@ -0,0 +1,14 @@
+---
+title: challenge time
+date: 2023-12-04
+---
+
+## Now available in TESTNET
+
+All you need is to get the preimage of the invoice below and to input it in devtools. Chop your own wood, and it will warm you twice.
+
+<hr id="l402" hidden>
+
+![SuccessKid](https://upload.wikimedia.org/wikipedia/en/f/ff/SuccessKid.jpg)
+
+Paths are made by walking.

src/routes/articles/[slug]/+page.svelte

@@ -1,6 +1,8 @@
 <script>
 	import qrcode from 'qrcode';
 	import { dev } from '$app/environment';
+	import { PUBLIC_DEVTOOLS_ON } from '$env/static/public';
+	import LockIcon from 'svelte-material-icons/Lock.svelte';
 
 	export let data;
 
@@ -25,8 +27,7 @@
 
 	{#if data.paywall.isPaywall}
 		<div class="paywall">
-			<hr />
-			<div>PayWall</div>
+			<div class="paywall-title"><LockIcon size={'3rem'} /></div>
 			{#if data.paywall.status === 402}
 				<div>
 					<button type="button" class="paywall-invoice-qr" on:click={handleClickInvoice}>
@@ -35,9 +36,11 @@
 						{/await}
 					</button>
 				</div>
-				<div class="paywall-invoice-text">{data.paywall.invoice}</div>
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div class="paywall-invoice-text" on:click={handleClickInvoice}>{data.paywall.invoice}</div>
 
-				{#if dev}
+				{#if dev || PUBLIC_DEVTOOLS_ON}
 					<div class="devtools">
 						<div>devtools</div>
 						<form method="POST" action="?/devToolsPreimage">
@@ -74,19 +77,36 @@
 	.header-date {
 		text-align: center;
 	}
+	.header-title {
+		font-size: 2rem;
+	}
 	.header-date {
 		font-size: 0.8rem;
 	}
 	.paywall {
 		text-align: center;
+		margin: 2rem 0;
+		padding: 1.5rem;
+		background-color: silver;
+		filter: drop-shadow(0 1rem 0.75rem black);
+	}
+	.paywall-title {
+		margin-bottom: 1rem;
 	}
 	.paywall-invoice-qr {
+		cursor: pointer;
 		border: transparent;
 		background-color: transparent;
+		filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
 	}
 	.paywall-invoice-text {
+		color: black;
 		font-size: 0.8rem;
-		overflow-wrap: break-word;
+		cursor: pointer;
+		padding: 0 5rem 1rem;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
 	}
 	.devtools {
 		color: red;