avgvstvs96 / astrosite Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 6.37 MB

Built with Astro and TailwindCSS, this MPA portfolio & blog site is version 3 of my personal website, my first MPA.

Home Page: https://astrosite-aid.pages.dev/

License: GNU Affero General Public License v3.0

JavaScript 6.70% Astro 37.62% CSS 4.75% TypeScript 50.94%

astro blog cloudflare-workers openai react shadcn-ui tailwindcss

astrosite's Introduction

🤖 Hi, I'm Bassim, an IT Professional from New York

⚡ Interests

I have a wide range of interests and hobbies including 3D printing and design, drone building and flying, marketing, photography, investing, PC hardware, cars and racing, sim racing, and gaming, in addition to programming. I'm also an avid student of history, philosophy, and political science.

🔭 What I'm working on

I'm currently working on the third version of my personal blog/portfolio website built with Astro and TailwindCSS - astroSite. The second version of my personal website is deployed at bassimshahidy.com and is also built with Astro and TailwindCSS, although it's a much simpler single page site that I built when I started learning web development. I'm also experimenting with shadcn/ui and react in astro-shadcn.

🖥️ What I've built

FastGPT, a lightweight FastAPI based OpenAI GPT3.5/4 chat bot with features like streaming, system message customization, markdown, and syntax highlighting. I also have a Flask version called flaskGPT, and attempted a React version called reactGPT, although reactGPT has some bugs because I've only just started delving into the world of JavaScript frameworks.

⚙️ Skills and Technologies

astrosite's People

Contributors

Watchers

astrosite's Issues

Add mobile table of contents

test issue

Make `SideMenu` accessible, composable

Create nav component for links, use shadcn or radix for accessibility

Worker creates multiple branches of single stream

 [ERROR] Your worker created multiple branches of a single stream 
(for instance, by calling `response.clone()` or `request.clone()`) but 
did not read the body of both branches. This is wasteful, as it forces 
the system to buffer the entire stream of data in memory, rather than 
streaming it through. This may cause your worker to be unexpectedly 
terminated for going over the memory limit. If you only meant to copy 
the request or response headers and metadata (e.g. in order to be able 
to modify them), use the appropriate constructors instead (for instance, 
`new Response(response.body, response)`, `new Request(request)`, etc).

import { OpenAI } from 'openai';
 
interface Message {
  role: string;
  content: string;
}
 
interface ChatRequest {
  messages: Message[];
  model_type: string;
}
 
export async function onRequest(context) {
  const { request, env } = context;
 
  if (request.method !== 'POST') {
    return new Response('Method not allowed', { status: 405 });
  }
 
  let requestBody: ChatRequest;
  try {
    requestBody = await request.json();
  } catch (error) {
    return new Response('Invalid JSON', { status: 400 });
  }
 
  const { messages, model_type } = requestBody;
 
  const chatMessages = messages.map((msg) => ({
    role: msg.role as 'system' | 'user',
    content: msg.content,
  }));
 
  const openai = new OpenAI({
    apiKey: env.OPENAI_API_KEY,
  });
 
  try {
    const stream = await openai.chat.completions.create({
      model: model_type,
      messages: chatMessages,
      stream: true,
    });
 
    let { readable, writable } = new TransformStream();
    let writer = writable.getWriter();
    const textEncoder = new TextEncoder();
 
    (async () => {
      try {
        for await (const part of stream) {
          const content = part.choices[0]?.delta?.content || '';
          if (content) {
            await writer.write(textEncoder.encode(content));
          }
        }
      } catch (error) {
        await writer.write(
          textEncoder.encode(`Error processing stream: ${error.message}`)
        );
      } finally {
        writer.close();
      }
    })();
 
    return new Response(readable);
  } catch (error) {
    return new Response(`Error: ${error.message}`, { status: 500 });
  }
}

Consider creating a Prose component for markdown styling

Instead of using prose in MDLayout

Create React dropdown menu component

Highlight link when page is open

Update `ThemeSwitcher` to shadcn-ui dropdown, use React to set colors

Use React and shadcn dropdown

Astro logo not showing on blog pages when deployed to Cloudflare

Possibly an issue with MDLayout.astro

Footer doesn't stay at the bottom of the page when content is short

tocLinks are only marked when heading is visible in viewport

The .active class is removed when the sections heading is out of the viewport, even if the section is still within the viewport.

Update this to mark tocLinks active when the section itself is in the viewport.

Need remarkSectionize plugin to wrap each markdown section in section tags, allowing us to observe them when the section itself intersects the viewport.

Border not showing in light mode

Copy button icon does not appear in code blocks

The icon is missing from the button

Update blur and background opacity for `CommandMenu`

Add dark mode and theme selections to `CommandMenu`

Dark mode FOUC when built and previewed

Does not occur in dev mode. Dark class is not immediately applied.

Setting class on root element to dark manually does work.

Update GPT page styling

Try prefetching in Astro

Astro supports 4 prefetch strategies for various use cases:

hover (default): Prefetch when you hover over or focus on the link.
tap: Prefetch just before you click on the link.
viewport: Prefetch as the links enter the viewport.
load: Prefetch all links on the page after the page is loaded.

import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: {
    defaultStrategy: 'load',
    prefetchAll: true
  }
});

Improve accessibility on React components

Missing labels on command menu trigger

Dark class toggles continuously after changing modes on both index and react pages

This started after updating to use the same theme variable in local storage between react.astro and BaseLayout.astro theme toggle scripts. Changing the variable names should resolve any conflicts between the separate scripts.