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) {
2import { useAuth } from "./useAuth.tsx";
3
4const ENDPOINT = "/api/projects-loader";
5
6export function useProjects () {
