nkoz/search.html Secret

## search.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bluesky Manual Search Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        h1 {
            font-size: 24px;
        }

        input, textarea {
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }

        textarea {
            height: 150px;
        }

        .result-item {
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #b3d1ff;
        }

        .link {
            margin-bottom: 5px;
        }
        span.radio-option {
            display: inline-block;
            margin-right: 10px;
        }
        h1 {
            font-size: 24px;
            color: #B0E0E6; /* Pastel blue color */
        }
        .radio-label {
            display: inline;
        }
    </style>
</head>
<body>
    <h1>Bluesky Manual Search Form</h1>
    <p>This form was generated using GPT-3.5 and GPT-4 AI models.</p>

    <label class="radio-label">Profile Link Type:</label>
    <span class="radio-option">
        <input type="radio" id="bluesky-staging" name="profile-link" value="staging" checked>
        <label for="bluesky-staging">Bluesky (Staging)</label>
    </span>
    <span class="radio-option">
        <input type="radio" id="bluesky-social-wrapper" name="profile-link" value="amazingca">
        <label for="bluesky-social-wrapper">BlueSky Social Wrapper</label>
    </span>

    <br><br>

    <label for="search-text">Search Text:</label>
    <input type="text" id="search-text" value="sakura">
    <button onclick="displaySearchLink()">Display Search Link</button>
    <p><a href="https://search.bsky.social/search/posts?q=sakura" id="search-link" target="_blank">Search Link</a></p>


    <script>
        const USE_AUTOMATIC_FETCH = false; // Set to true when CORS issue is resolved
        function displaySearchLink() {
            const searchText = document.getElementById("search-text").value;
            const searchLink = `https://search.bsky.social/search/posts?q=${searchText}`;
            document.getElementById("search-link").href = searchLink;
        }

        async function fetchHandle(did) {
            const response = await fetch(`https://bsky.social/xrpc/com.atproto.repo.describe?user=${did}`);
            const data = await response.json();
            return data.handle;
        }

        async function displayDIDs() {
            const searchData = JSON.parse(document.getElementById("search-data").value);
            const resultsDiv = document.getElementById("results");
            resultsDiv.innerHTML = "";

            // Sort search data by createdAt
            searchData.sort((a, b) => {
                return new Date(b.post.createdAt) - new Date(a.post.createdAt);
            });

            for (const data of searchData) {
                const did = data.user.did;
                const tid = data.tid.replace("app.bsky.feed.post/", "");

                // Convert createdAt to local time
                const localCreatedAt = new Date(data.post.createdAt).toLocaleString();

                const resultItem = document.createElement("div");
                resultItem.className = "result-item";

                const handle = await fetchHandle(did);

                const handleP = document.createElement("p");
                handleP.textContent = `@${handle}`;
                resultItem.appendChild(handleP);

                const p = document.createElement("p");
                p.textContent = data.post.text;
                resultItem.appendChild(p);

                const createdAtP = document.createElement("p");
                createdAtP.textContent = `Created at: ${localCreatedAt}`;
                resultItem.appendChild(createdAtP);

                const button = document.createElement("button");
                button.textContent = "Display Post";
                button.onclick = () => {
                    const selectedProfileLink = document.querySelector('input[name="profile-link"]:checked').value;
                    let profileURL;

                    if (selectedProfileLink === "staging") {
                        profileURL = `https://staging.bsky.app/profile/${handle}/post/${tid}`;
                    } else {
                        profileURL = `https://blue.amazingca.dev/?username=${handle}&postid=${tid}`;
                    }

                    window.open(profileURL, "_blank");
                };
                resultItem.appendChild(button);

                resultsDiv.appendChild(resultItem);
            }
        }
    </script>
    <label for="search-data" style="display: ${USE_AUTOMATIC_FETCH ? 'none' : 'block'}">Paste the search data here:</label>
    <textarea id="search-data" style="display: ${USE_AUTOMATIC_FETCH ? 'none' : 'block'}"></textarea>
    <button onclick="displayDIDs()">Display DIDs</button>
    <div id="results"></div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bluesky Manual Search Form</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 20px;
	}

	h1 {
	font-size: 24px;
	}

	input, textarea {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	}

	textarea {
	height: 150px;
	}

	.result-item {
	margin-bottom: 20px;
	border: 1px solid #ccc;
	padding: 10px;
	background-color: #b3d1ff;
	}

	.link {
	margin-bottom: 5px;
	}
	span.radio-option {
	display: inline-block;
	margin-right: 10px;
	}
	h1 {
	font-size: 24px;
	color: #B0E0E6; /* Pastel blue color */
	}
	.radio-label {
	display: inline;
	}
	</style>
	</head>
	<body>
	<h1>Bluesky Manual Search Form</h1>
	<p>This form was generated using GPT-3.5 and GPT-4 AI models.</p>

	<label class="radio-label">Profile Link Type:</label>
	<span class="radio-option">
	<input type="radio" id="bluesky-staging" name="profile-link" value="staging" checked>
	<label for="bluesky-staging">Bluesky (Staging)</label>
	</span>
	<span class="radio-option">
	<input type="radio" id="bluesky-social-wrapper" name="profile-link" value="amazingca">
	<label for="bluesky-social-wrapper">BlueSky Social Wrapper</label>
	</span>

	<br><br>

	<label for="search-text">Search Text:</label>
	<input type="text" id="search-text" value="sakura">
	<button onclick="displaySearchLink()">Display Search Link</button>
	<p><a href="https://search.bsky.social/search/posts?q=sakura" id="search-link" target="_blank">Search Link</a></p>



	<script>
	const USE_AUTOMATIC_FETCH = false; // Set to true when CORS issue is resolved
	function displaySearchLink() {
	const searchText = document.getElementById("search-text").value;
	const searchLink = `https://search.bsky.social/search/posts?q=${searchText}`;
	document.getElementById("search-link").href = searchLink;
	}

	async function fetchHandle(did) {
	const response = await fetch(`https://bsky.social/xrpc/com.atproto.repo.describe?user=${did}`);
	const data = await response.json();
	return data.handle;
	}

	async function displayDIDs() {
	const searchData = JSON.parse(document.getElementById("search-data").value);
	const resultsDiv = document.getElementById("results");
	resultsDiv.innerHTML = "";

	// Sort search data by createdAt
	searchData.sort((a, b) => {
	return new Date(b.post.createdAt) - new Date(a.post.createdAt);
	});

	for (const data of searchData) {
	const did = data.user.did;
	const tid = data.tid.replace("app.bsky.feed.post/", "");

	// Convert createdAt to local time
	const localCreatedAt = new Date(data.post.createdAt).toLocaleString();

	const resultItem = document.createElement("div");
	resultItem.className = "result-item";

	const handle = await fetchHandle(did);

	const handleP = document.createElement("p");
	handleP.textContent = `@${handle}`;
	resultItem.appendChild(handleP);

	const p = document.createElement("p");
	p.textContent = data.post.text;
	resultItem.appendChild(p);

	const createdAtP = document.createElement("p");
	createdAtP.textContent = `Created at: ${localCreatedAt}`;
	resultItem.appendChild(createdAtP);

	const button = document.createElement("button");
	button.textContent = "Display Post";
	button.onclick = () => {
	const selectedProfileLink = document.querySelector('input[name="profile-link"]:checked').value;
	let profileURL;

	if (selectedProfileLink === "staging") {
	profileURL = `https://staging.bsky.app/profile/${handle}/post/${tid}`;
	} else {
	profileURL = `https://blue.amazingca.dev/?username=${handle}&postid=${tid}`;
	}

	window.open(profileURL, "_blank");
	};
	resultItem.appendChild(button);

	resultsDiv.appendChild(resultItem);
	}
	}
	</script>
	<label for="search-data" style="display: ${USE_AUTOMATIC_FETCH ? 'none' : 'block'}">Paste the search data here:</label>
	<textarea id="search-data" style="display: ${USE_AUTOMATIC_FETCH ? 'none' : 'block'}"></textarea>
	<button onclick="displayDIDs()">Display DIDs</button>
	<div id="results"></div>
	</body>
	</html>