Создайте свой собственный github с помощью Deno Fresh и Github REST API

Экосистема Javascript расширяется с каждым днем. Время от времени энтузиасты javascript представляют новые концепции и новые способы улучшения работы разработчиков, такие как островная архитектура, возобновляемость, мелкозернистая реактивность и многое другое.

В этой статье мы рассмотрим фреймворк Fresh и построим небольшой github, используя github rest api.

Deno — это простая, современная и безопасная среда выполнения для JavaScript, TypeScript и WebAssembly, которая использует V8 и построена на Rust.

Preact — это фронтенд-фреймворк на основе javascript, альтернатива react с тем же современным api, таким как hooks, context и т.д..

Fresh — это серверный веб-фреймворк, построенный на основе deno, preact и архитектурного паттерна Island.
Прекрасным фактом о Fresh является то, что у него нет сборки, поэтому если вы развернете Fresh на Deno-Deploy, это займет очень мало времени.

В этом проекте мы будем использовать twind, который предоставляет tailwind api для разработки ui.

Создайте проект с помощью Fresh и запустите его локально

deno run -A -r https://fresh.deno.dev fresh-hub
cd fresh-hub
deno task start

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Перейдите внутрь routes/index.tsx


/** @jsx h */
import { h } from "preact";
import { tw } from "@twind";
import { PageProps, Handlers } from "$fresh/server.ts";
import { fetchUserInfo } from "../services/github.ts";
import Layout from "../components/Layout.tsx";

export const handler: Handlers = {
  async POST(req, ctx) {
    try {
      // get form data from request
      const formData = await req.formData();
      // extract username from form data
      const username = formData.get("username");
      // add validation
      if (!username || username.toString().trim().length === 0) {
        return ctx.render({ error: "Username should not be empty" });
      }

      // check if username exists
      const [status] = await fetchUserInfo(String(username));
      // handle different error status code
      if (status === 404) {
        return ctx.render({ error: "User not found" });
      }
      if (status === 403) {
        return ctx.render({
          error: "Exceeded github api limit try after an hour",
        });
      }

      // redirect to user profile screen
      return new Response(undefined, {
        headers: {
          location: `/${username}`,
        },
        status: 302,
      });
    } catch (error) {
      return ctx.render({ error: error.message });
    }
  },
};
export default function Home({ data }: PageProps) {
  return (
    <Layout title={"Home"}>
      <form
        method="post"
        className={tw`max-w-md  mx-auto bg-gray-800 p-4 rounded-xl shadow-md`}
      >
        <div className={tw`flex flex-col space-y-2`}>
          <label htmlFor="username">Github Username</label>
          <input
            autoFocus
            type="text"
            name="username"
            id="username"
            className={tw`bg-gray-700 px-4 py-2 rounded-md border-2 ${
              data?.error ? "border-red-400" : "border-blue-400"
            } focus:outline-none`}
            placeholder={"harshmangalam"}
          />
          {data?.error && (
            <p className={tw`text-sm text-red-400`}>{data.error}</p>
          )}
        </div>
        <button
          className={tw`focus:outline-none hover:bg-gray-600 bg-gray-700 text-lg font-bold w-full mt-4 py-2 px-4 rounded-md`}
        >
          Continue
        </button>
      </form>
    </Layout>
  );
}



Войдите в полноэкранный режим Выйти из полноэкранного режима

Layout — это простой компонент, который содержит навигационную панель и заголовок веб-страницы.

Когда мы отправим форму, будет запущен обработчик метода POST.

Если вы хотите получить доступ к данным формы, вызовите метод req.formData(), который вернет FormData.

fetchUserInfo — это вспомогательный метод, который извлекает данные из github rest api. Если вы неавторизованный пользователь, то вы можете сделать только 60 запросов в час к github rest api.

ctx.render() возвращает Response, который будет доступен внутри реквизита страницы data.

Если вы хотите посмотреть живую демонстрацию, посетите сайт https://freshhub.deno.dev/.

Если вы хотите изучить полный исходный код, он доступен на github

harshmangalam / freshHub

FreshHub — это веб-приложение на базе deno fresh, использующее GIthub REST api.

FreshHub

Использование

Запустите проект:

deno task start

LiveDeno Deploy

Просмотр на GitHub

Оцените статью
devanswers.ru
Добавить комментарий