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 () {
3import { useAuth } from "./useAuth.tsx";
4
5const ENDPOINT = "/api/create-project";
6
7export function useCreateProject () {
2import { useAuth } from "./useAuth.tsx";
3
4const ENDPOINT = "/api/create-branch";
5
6export function useCreateBranch (projectId: string) {
6 project: any;
7 branchId: string | undefined;
8 anthropicApiKey: string;
9 bearerToken: string;
10 selectedFiles: string[];
16 project,
17 branchId,
18 anthropicApiKey,
19 bearerToken,
20 selectedFiles,
37 status,
38 } = useChat({
39 api: "/api/send-message",
40 body: {
41 project,
42 branchId,
43 anthropicApiKey,
44 selectedFiles,
45 images: images
2import { useAuth } from "./useAuth.tsx";
3
4const ENDPOINT = "/api/project-branches";
5
6export function useBranches (projectId: string) {
