3
4const TOKEN_KEY = "bearer";
5const ANTHROPIC_KEY = "anthropic_api_key";
6
7export function useAuth() {
8 const [token, setToken, removeToken] = useLocalStorage(TOKEN_KEY, "");
9 const [anthropicApiKey, setAnthropicApiKey, removeAnthropicApiKey] = useLocalStorage(ANTHROPIC_KEY, "");
10 const [error, setError] = useState(null);
11
12 const isAuthenticated = !!token;
13
14 const authenticate = async (valTownAPIKey: string, anthropicKey: string) => {
15 // replace all this with oauth when it's ready
16 try {
17 const res = await fetch("/api/user", {
18 headers: {
19 "Authorization": "Bearer " + valTownAPIKey,
20 },
21 });
25 setError(data.error);
26 removeToken();
27 removeAnthropicApiKey();
28 return;
29 }
30 setError(null);
31 setToken(valTownAPIKey);
32 setAnthropicApiKey(anthropicKey);
33 } catch (e) {
34 console.error(e);
35 setError(e.error);
36 removeToken();
37 removeAnthropicApiKey();
38 }
39 };
41 const logOut = () => {
42 removeToken();
43 removeAnthropicApiKey();
44 };
45
50 logOut,
51 token,
52 anthropicApiKey,
53 };
54}
87});
88
89// API endpoint to get all posts
90app.get('/api/posts', async (c) => {
91 const posts = await getAllPosts();
92 return c.json(posts);
93});
94
95// API endpoint to get a single post
96app.get('/api/posts/:slug', async (c) => {
97 const slug = c.req.param('slug');
98 const post = await getPost(slug);
116 posts = window.INITIAL_DATA.posts;
117 } else {
118 const response = await fetch('/api/posts');
119 posts = await response.json();
120 }
156
157 try {
158 const response = await fetch(`/api/posts/${params.slug}`);
159
160 if (!response.ok) {
13## Authentication
14
15Login to your SQLite Explorer with [password authentication](https://www.val.town/v/pomdtr/password_auth) with your [Val Town API Token](https://www.val.town/settings/api) as the password.
16
17## Todos / Plans
27 <head>
28 <title>SQLite Explorer</title>
29 <link rel="preconnect" href="https://fonts.googleapis.com" />
30
31 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
32 <link
33 href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
34 rel="stylesheet"
35 />
3date: 2023-12-10
4author: Alex Johnson
5summary: Exploring emerging trends and technologies shaping the future of blogging
6---
7
14
15// Get list of blog posts
16app.get("/api/posts", async (c) => {
17 try {
18 const posts = await listBlogPosts();
25
26// Get a specific blog post
27app.get("/api/posts/:slug", async (c) => {
28 const slug = c.req.param("slug");
29 try {
25
262. **Backend**: A Hono app serves the blog:
27 - Lists all blog posts via API
28 - Retrieves individual posts
29 - Serves the frontend HTML
592. Parse the frontmatter metadata
603. Convert markdown to HTML
614. Serve the content via API endpoints
62
63## Step 4: Create the Frontend
2import { useAuth } from "./useAuth.tsx";
3
4const PROJECT_ENDPOINT = "/api/project";
5const FILES_ENDPOINT = "/api/project-files";
6
7export function useProject (projectId: string, branchId?: string) {
