Add Header

Add components/header.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import React from 'react'
import HeaderLogo from './header-logo'
import Navigation from './navigation'

export default function Header() {
  return (
    <div className='bg-gradient-to-b from-blue-700 to-blue-500 px-4 py-8 lg:px-14 pb-36'>
      <div className='max-w-screen-2xl mx-auto'>
        <div className='w-full flex items-center justify-between mb-14'>
          <div className='flex items-center lg:gap-x-16'>
            <HeaderLogo />
            <Navigation />
          </div>
        </div>
      </div>
    </div>
  )
}

Install Hono

1

npm i hono@latest

Install Hono plugin

1

npm i hono @hono/clerk-auth @clerk/backend

Create New NEXTJS Project

1

npx create-next-app@latest finance-demo

Install shadcn-ui

1

npx shadcn-ui@latest init

Install Button

Follow instruction of shadcn doc

1

npx shadcn-ui@latest add button

Nextcloud 搭建步骤（Windows环境）

假设是安装在Windows环境并已经安装好了Docker。

拉取NextCloud镜像

1

docker pull nextcloud

创建数据卷

1

docker volume create --driver local --opt device=F:\Nextcloud\data --opt type=none --opt o=bind nextcloud 

其中F:\Nextcloud\data 为你要保持数据的目录

启动NextCloud容器

1

docker run -d --restart=always --name nextcloud -p 9000:80 -v nextcloud:/var/www/html nextcloud

背景

在我们拉取 Git repo 时，如果不需要大量的日志记录，只想获取某个分支或者某次提交下的文件状态，可以借助 depth=1 参数实现。

使用

在使用 git clone 时直接携带 depth:

1
2
3
4
5

*# 实现默认分支的拉取*
git clone --depth **1** xxx.git

*# 某个分支/标签*
git clone --depth **1** -b "branch_name/tag_name" xxx.git

其中 depth 指定的是 commit 的深度，指定 1 则表示只拉取一次 commit，就是某次提交的完整状态。如果指定 2，就表示只想更深一层的 commit。

背景

开源的软件photoprism, 可以帮助你很好的管理你的相册及视频. 我们在Windows上安装一下这个开源软件。

参考资料

PhotoPrism - Features

[PhotoPrism - Github]https://github.com/photoprism/photoprism

前提条件

1. 有充足空间的Windows环境
2. 安装了Docker Desktop并正常启动
3. 有一定的Linus操作知识（可选）

安装photoprism

背景

git提交的commit的书写之前比较随意，看到了一个规范：

约定式提交

我顺便总结了一下，自己以后可以选用。

总体规范

1
2
3
4
5

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

详细解释：

Type：

1. fix: 类型 为 fix 的提交表示在代码库中修复了一个bug。
2. feat: 类型 为 feat 的提交表示在代码库中新增了一个功能。
3. build: 用于修改项目构建系统，例如修改依赖库、外部接口或者升级 Node 版本等；
4. chore: 用于对非业务性代码进行修改，例如修改构建流程或者工具配置等；
5. ci: 用于修改持续集成流程，例如修改 Travis、Jenkins 等工作流配置；
6. docs: 用于修改文档，例如修改 README 文件、API 文档等；
7. style: 用于修改代码的样式，例如调整缩进、空格、空行等；
8. refactor: 用于重构代码，例如修改代码结构、变量名、函数名等但不修改功能逻辑；
9. perf: 用于优化性能，例如提升代码的性能、减少内存占用等；
10. test: 用于修改测试用例，例如添加、删除、修改代码的测试用例等。

Install email package

1

npm i @react-email/components @react-email/tailwind

Add email format component

add email/contact-form-email.tsx:

Register Resend

To send email, we need Register a account in resend.com:

Click APIKey:

from: https://submara.com/posts/utils/

存储localStorage

1
2
3
4
5
6
7

export const setStorage = (name, content) => { 
 if (!name) return;  
 if (content) {    
		 content = JSON.stringify(content);  
 }  
 window.localStorage.setItem(name, content);
};

获取localStorage

1
2
3
4
5
6
7
8
9

export const getStorage = name => {
  if (!name) return;  
  const data = window.localStorage.getItem(name);  
  if (data) {    
	  return JSON.parse(data);  
	} else {
	    return null;  
	}
};