Val Town Code SearchReturn to Val Town

7- Bluesky authentication using the AT Protocol
8- Fetch and display user's liked posts
9- Search functionality to filter through likes
10- Responsive design
11- Secure session management

4import { LoginResponse, LikesResponse, LogoutResponse } from "../shared/types";
5
6// Helper function to format dates
7const formatDate = (dateString: string) => {
8  const date = new Date(dateString);
16};
17
18// Helper function to process text with mentions and links
19const processText = (text: string) => {
20  if (!text) return "";

114
115    // Fetch all tasks
116    async function fetchTasks() {
117      try {
118        const response = await fetch(API_URL);
141
142    // Add a task to the DOM
143    function addTaskToDOM(task) {
144      const taskElement = document.createElement('div');
145      taskElement.className = `task-item flex items-center justify-between p-3 border rounded ${task.completed ? 'completed bg-gray-50' : 'bg-white'}`;
174
175    // Toggle task completion status
176    async function toggleTaskStatus(taskId, completed) {
177      try {
178        const response = await fetch(`${API_URL}/${taskId}`, {
207
208    // Delete a task
209    async function deleteTaskItem(taskId) {
210      if (!confirm('Are you sure you want to delete this task?')) {
211        return;
237
238    // Show empty state
239    function showEmptyState() {
240      emptyState.style.display = 'block';
241    }
242
243    // Hide empty state
244    function hideEmptyState() {
245      emptyState.style.display = 'none';
246    }
247
248    // Helper function to escape HTML
249    function escapeHtml(unsafe) {
250      return unsafe
251        .replace(/&/g, "&")

2// this uses the full URL because TownieIcon is imported in favicon, which is used on the server
3
4export function TownieIcon({
5  size = 24,
6  color = "currentColor",
51}
52
53export function Circle ({
54  filled,
55}: {
75}
76
77export function Square ({
78  size = 24,
79}: {
99
100// icons from https://lucide.dev
101export function SquarePenIcon () {
102  return (
103    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-square-pen-icon lucide-square-pen"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
105}
106
107export function FileCode2Icon () {
108  return (
109    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-file-code2-icon lucide-file-code-2"><path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="m5 12-3 3 3 3"/><path d="m9 18 3-3-3-3"/></svg>
111}
112
113export function SparklesIcon () {
114  return (
115    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-sparkles-icon lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
117}
118
119export function EyeIcon () {
120  return (
121    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
123}
124
125export function ExternalLinkIcon () {
126  return (
127    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-external-link-icon lucide-external-link"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
129}
130
131export function KeyRoundIcon () {
132  return (
133    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-key-round-icon lucide-key-round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg>
135}
136
137export function LockKeyholeIcon () {
138  return (
139    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-lock-keyhole-icon lucide-lock-keyhole"><circle cx="12" cy="16" r="1"/><rect x="3" y="10" width="18" height="12" rx="2"/><path d="M7 10V7a5 5 0 0 1 10 0v3"/></svg>
141}
142
143export function PlusIcon () {
144  return (
145    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
147}
148
149export function ArrowUpIcon () {
150  return (
151    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-arrow-up-icon lucide-arrow-up"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
153}
154
155export function RefreshIcon ({ size = 24 }: { size: number }) {
156  return (
157    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-rotate-cw-icon lucide-rotate-cw"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
159}
160
161export function XIcon ({ size = 24 }: {
162  size?: number;
163}) {
167}
168
169export function VolumeOffIcon ({ size = 24 }) {
170  return (
171    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-volume-off-icon lucide-volume-off"><path d="M16 9a5 5 0 0 1 .95 2.293"/><path d="M19.364 5.636a9 9 0 0 1 1.889 9.96"/><path d="m2 2 20 20"/><path d="m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"/><path d="M9.828 4.172A.686.686 0 0 1 11 4.657v.686"/></svg>
173}
174
175export function Volume2Icon ({ size = 24 }) {
176  return (
177    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-volume2-icon lucide-volume-2"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><path d="M16 9a5 5 0 0 1 0 6"/><path d="M19.364 18.364a9 9 0 0 0 0-12.728"/></svg>

11
12// Create a new task
13export async function createTask(description: string): Promise<Task> {
14  const result = await sqlite.execute(
15    `INSERT INTO ${TASKS_TABLE} (description, completed) VALUES (?, 0) RETURNING *`,
20
21// Get all tasks
22export async function getAllTasks(): Promise<Task[]> {
23  const result = await sqlite.execute(
24    `SELECT * FROM ${TASKS_TABLE} ORDER BY created_at DESC`
28
29// Update task completion status
30export async function updateTaskStatus(id: number, completed: boolean): Promise<Task | null> {
31  const result = await sqlite.execute(
32    `UPDATE ${TASKS_TABLE} SET completed = ? WHERE id = ? RETURNING *`,
42
43// Delete a task
44export async function deleteTask(id: number): Promise<boolean> {
45  const result = await sqlite.execute(
46    `DELETE FROM ${TASKS_TABLE} WHERE id = ?`,

7 * Creates the tasks table if it doesn't exist
8 */
9export async function createTasksTable() {
10  await sqlite.execute(`
11    CREATE TABLE IF NOT EXISTS ${TASKS_TABLE} (

1/** @jsxImportSource react */
2
3export function Loading () {
4  return (
5    <div className="muted">

39
40// Generate a secure session token
41function generateSessionToken() {
42  return crypto.randomUUID();
43}

4import { Loading } from "./Loading.tsx";
5
6export function ProjectsRoute() {
7  const projects = useProjects();
8
36}
37
38function ProjectCard({
39  user,
40  project,
74}
75
76function Privacy({ privacy }: { privacy: "public" | "unlisted" | "private" }) {
77  switch (privacy) {
78    case "public":

9}
10
11export function PreviewFrame(props: PreviewProps) {
12  const previewKey = useRef<string>("new-chat");
13  const [count, setCount] = useState<number>(0);
73const TSRE = /\/$/;
74
75function URLInput({ url, pathname, setPathname }) {
76  const prefix = url.replace(TSRE, "");
77  return (
90}
91
92function PreviewSelect({ index, setIndex, files }) {
93  return (
94    <div>
116}
117
118function usePreviewURL({ files }) {
119  const [index, setIndex] = useState<number>(0);
120  const htmlVals = files?.filter(file => file.links?.endpoint !== undefined);