从零搭建基于 AI 问答平台(3) 编写Navbar/暗黑模式

从零搭建

我们需要导航栏里添加Logo/暗黑模式/用户按钮，按下面步骤：

添加 Navbar

添加文件 ``:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { UserButton } from '@clerk/nextjs';
import Link from 'next/link';
import React from 'react'
import { ThemeToggle } from './ThemeToggle';

type Props = {}

function Navbar({}: Props) {
  return (
    <div className="fixed inset-x-0 top-0 bg-white dark:bg-gray-950 z-[10] h-fit border-b border-zinc-300  py-2 ">
      <div className="flex items-center justify-between h-full gap-2 px-8 mx-auto max-w-7xl">
        {/* Logo */}
        <Link href={"/"} className="flex items-center gap-2">
          <p className="rounded-lg border-2 border-b-4 border-r-4 border-black px-2 py-1 text-xl font-bold transition-all hover:-translate-y-[2px] md:block dark:border-white">
            SmartQuiz
          </p>
        </Link>
        <div className="flex items-center">
          <ThemeToggle className='mr-4' />
          <UserButton />
        </div>
      </div>
    </div>
  );
}

export default Navbar
More...

如何配置多个ssh密钥对，解决 github 多用户上传问题

当日所学

背景

当我需要在同一个客户端push代码到不同的github账号时，碰到了问题，添加私钥时出错：“key is already in use”，这是因为同一个key只能对应一个github账号。下面我们需要进行配置，将key分开。

生成单独密钥

1
ssh-keygen -t rsa -C 'bearalise@gmail.com' -f ~/.ssh/id_rsa_bearalise_github

配置不同密钥

编辑 ~/.ssh/config:

1
2
3
4
5
6
7
8
9
10
# 个人的GitHub公钥
Host github.com
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_ed25519

Host github_b.com
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa_bearalise_github
More...

从零搭建基于 AI 问答平台(2) 安装 Clerk

从零搭建

注册 Clerk

Clerk 是一个以开发者为中心的身份验证和用户管理系统，提供了预构建的React组件和挂钩，用于登录、注册、用户个人资料以及组织管理。 这个模板专为Clerk和Next.js（App Router）设计，让你能够在几分钟内快速启动并运行一个功能齐全的认证流程应用，按下面步骤操作：

  1. 注册 Clerk 账号
  2. 点击 Create application 创建一个应用，也就是我们现在开发的这个项目。
  3. 配置鉴权选项，例如第三方登录提供商。这里需要事先声明的是，第三方登录提供商在开发环境是可以随意增加的，但是在生产环境每一个都需要额外的配置，一般选常用的就可以了。
  4. 进入 Clerk 控制台 找到 API keys，分别是一个公钥和私钥，将这个配置复制到我们项目中的环境变量里。

安装 Clerk

命令行：

1
bun add @clerk/nextjs

修改.env, 添加环境变量：

1
2
3
4
5
6
7
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=xxxx
CLERK_SECRET_KEY=sk_test_xxxx

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
More...

从零搭建基于 AI 问答平台(1) 搭建框架及数据库

从零搭建

项目介绍

本次计划搭建一个基于AI的问答平台，平台可以根据主题，自动生成问题和待选择的回答。项目会用到NextJS，TailwindCSS，shadcn/ui，Prisma，OpenAI，Next Auth 等技术，根据搭建步骤会一一介绍。

创建NextJs项目

1
bunx create-next-app@latest --ts

通过命令，创建 NextJs 项目 quizdemo

安装shandcn/ui

shandcn/ui 是一个强大的ui组件库，可以按需安装组件。
通过下面的命令，安装shandcn/ui 和 Button 组件：

1
2
bunx --bun shadcn@latest add button
bunx --bun shadcn@latest init

修改 src/app/page.tsx:

1
2
3
4
5
6
7
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <Button>Click me</Button>
  );
}
More...

从头开始创建一个自动产生文档/类型安全的现代API 目录

日常练习

目录

More...

请我喝杯咖啡吧~

支付宝
微信