Merge pull request #10 from ChangJun2019/dev

components/HomeGallery.vue

@@ -4,11 +4,11 @@
 <template>
   <div class="grid grid-cols-2 animate-zoom-in-right gap-4">
     <div class="grid gap-4">
-      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="/images/blog-home-we.jpg" alt="">
+      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="/images/blog-home-we.webp" alt="">
     </div>
     <div class="grid gap-4">
-      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="/images/blog-home-max.jpg" alt="">
-      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="/images/blog-home-wangzai.jpg" alt="">
+      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="/images/blog-home-max.webp" alt="">
+      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="/images/blog-home-wangzai.webp" alt="">
     </div>
   </div>
 </template>

components/UserCard.vue

@@ -4,7 +4,7 @@ import { MY_LINKS as userLinks } from '@/constants/profile'
 
 <template>
   <div class="max-w-xs flex transform cursor-pointer items-center gap-6 rounded-xl p-3">
-    <img class="aspect-square h-26 w-26 rounded-full object-cover hover:animate-rotate-in" src="https://file.52chinaweb.com/user/avatar.jpeg" alt="avatar">
+    <img class="aspect-square h-26 w-26 rounded-full object-cover hover:animate-rotate-in" src="/images/blog-home-my-avatar.webp" alt="avatar">
 
     <div class="flex flex-col">
       <h1 class="mt-4 text-2xl font-semibold capitalize">

content/posts/7-2023-supabase-get-started.md

@@ -0,0 +1,37 @@
+---
+layout: content
+title: Supabase 的体验之旅
+date: 2023-10-21
+tag: Supabase
+image:
+  src: /images/0-cover-2023-supabase-get-started.png
+  alt: 
+---
+
+Supabase 是一个 BaaS（后端即服务）开源平台，它基于 PostgresSQL，提供了一系列工具和服务，帮助你简化构建安全且可扩展的后端。
+
+用户身份认证：Supabase 内置支持身份验证，授权和用户管理，支持电子邮件、无密码、第三方社交登录，通过简单的 API 就可以在项目中使用。
+
+实时：通过 WebSocket 实时监听数据库中的更改，并将其同步到客户端。
+
+存储：适用于任何文件类型的对象存储，自带有一个对象存储管理器，在客户端中通过简单的 API 控制文件管理，支持图片转化。
+
+数据库：构建与 PostgreSQL（功能强大且可扩展的关系数据库），支持身份验证、实时监听修改。自带管理系统，支持表格编辑器和 SQL 编辑器。
+
+Supabase 的愿景是成为世界上最具生产力的开发者平台，终极目标是确保开发人员基本上可以在周末完成开发，然后将规模扩大到数百万。
+
+> Build in a weekend Scale to millions.
+
+在这篇博客中我想简单体验一下 Supabase 的部分功能。
+
+## 在 Nuxt 中使用 Supabase
+
+
+
+## Supabase 身份验证
+
+## Supabase 存储
+
+## Supabase Realtime
+
+## 通过 Docker 自部署 Supabase

nuxt.config.ts

@@ -17,6 +17,10 @@ export default defineNuxtConfig({
     },
   },
 
+  experimental: {
+    inlineSSRStyles: false,
+  },
+
   // https://devtools.nuxt.com/guide/getting-started
   devtools: { enabled: true },
 
@@ -43,7 +47,6 @@ export default defineNuxtConfig({
   ],
 
   css: [
-    '@unocss/reset/tailwind.css',
     '@/style/var.css',
     '@/style/global.css',
   ],