feat(bump): 2.0.0 (#283)

* feat(bump): 2.0.0

* feat(bump): 2.0.0

Author: okisdev

.env.example

@@ -1,2 +1,14 @@
-NOTION_API =
-NOTION_TABLE_SLUG =
+# Notion
+NOTION_API_KEY=
+NOTION_DATABASE_ID=
+
+# Redis
+REDIS_URL=
+REDIS_TOKEN=
+
+# Umami
+NEXT_PUBLIC_UMAMI_URL=
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=
+
+# Site
+NEXT_PUBLIC_SITE_URL=

.eslintrc.json

@@ -3,7 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -23,15 +28,17 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
+next-env.d.ts
+
+# Turborepo
+.turbo

.gitignore

@@ -0,0 +1,8 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.organizeImports.biome": "explicit"
+  },
+  "i18n-ally.localesPaths": [
+    "**/locales"
+  ]
+}

.vscode/settings.json

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Harry Yep
+Copyright (c) 2025 Harry Yep
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

LICENSE

@@ -1,28 +1,12 @@
 # Notion Photo React
 
-> A fast serverless Photo Gallery powered by Notion.
+> A Notion Photo powered by Next.js
 
-A Photo Gallery powered by [Notion](https://notion.so), built with [React.JS](https://reactjs.org), [Next.JS](https://nextjs.org), [tailwindcss](https://tailwindcss.com), [TypeScript](https://www.typescriptlang.org/), [notion-api-worker](https://github.com/splitbee/notion-api-worker) and more.
-
-> See [Notion Blog React](https://github.com/Harry-Yep/Notion-Blog-React), if you would like to blog with Notion.
+> See [Notion Blog React](https://github.com/okisdev/Notion-Blog-React) for a similar project that uses Notion as a database for blog posts.
 
 ## Demo
 
--   [npr.okis.dev](https://npr.okis.dev)
-
-## Features
-
--   Easily change the things you want by editing [`.env`](./.env.example) file.
--   Support [Google Analytics](https://analytics.google.com/) & [Splitbee Analytics](https://splitbee.io/).
--   Self host notion-api by using [Cloudflare Workers](https://workers.dev). (Default [notion-api](https://notion-api.splitbee.io) By Splitbee)
--   Use your favorite Google Fonts.
--   Use your own domain.
-
-## Performance
-
-![Notion-Photo-React-Lighthouse-Performance-Desktop](https://cdn.harrly.com/project/GitHub/Notion-Photo-React/img/Lighthouse-Performance-Desktop.png)
-
--   Use [Lighthouse](https://developers.google.com/web/tools/lighthouse) for testing
+-   [nbr.okis.dev](https://nbr.okis.dev)
 
 ## How to deploy
 
@@ -31,16 +15,16 @@ Please visit Notion Photo React [Documentation](https://docs.okis.dev/docs/notio
 ## Problem(s) with deployment
 
 -   email: [[email protected]](mailto:[email protected])
--   Telegram: [@okisdev](https://t.me/okisdev)
 
-## Improvement / Plans
+## Alternatives
 
--   [ ] Add PostView.
--   [ ] Using [Notion Official API](https://developers.notion.com/).
--   [ ] Add Tag.
+> Turn Notion to Blog/Page
 
-## Credits
+-   [React-Notion](https://github.com/splitbee/react-notion)
+-   [React-Notion-X](https://github.com/NotionX/react-notion-x)
+-   [Super.so](https://super.so/)
+-   [Fruition](https://fruitionsite.com/)
 
-Copyright (c) 2022 Harry Yep
+## Credits
 
--   All Authors & Contributors who own its repository
+Copyright (c) 2025 Harry Yep

README.md

@@ -0,0 +1,5 @@
+import { PostLoadingSkeleton } from '@/components/post/loading';
+
+export default function PostLoading() {
+  return <PostLoadingSkeleton />;
+}

README.zh-CN.md

@@ -0,0 +1,104 @@
+import { env } from '@/lib/env';
+import { getPhotoBySlug } from '@/lib/notion';
+import { format } from 'date-fns';
+import { ImageResponse } from 'next/og';
+
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = 'image/png';
+
+// Image generation
+export default async function Image({ params }: { params: { slug: string } }) {
+  const photo = await getPhotoBySlug(params.slug);
+
+  if (!photo) {
+    return new Response('Not found', { status: 404 });
+  }
+
+  return new ImageResponse(
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'white',
+        padding: '60px 80px',
+        fontFamily: 'Inter, system-ui, sans-serif',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          textAlign: 'center',
+        }}
+      >
+        <h1
+          style={{
+            fontSize: '60px',
+            fontWeight: 'bold',
+            color: 'black',
+            marginBottom: '20px',
+            lineHeight: 1.2,
+            maxWidth: '1000px',
+          }}
+        >
+          {photo.title}
+        </h1>
+
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '20px',
+            fontSize: '24px',
+            color: '#666',
+          }}
+        >
+          {photo.date && <div>{format(new Date(photo.date), 'MMMM d, yyyy')}</div>}
+          {photo.location && photo.location.length > 0 && (
+            <div style={{ display: 'flex', gap: '10px' }}>
+              {photo.location.map((location) => (
+                <div
+                  key={location}
+                  style={{
+                    backgroundColor: '#f0f0f0',
+                    padding: '4px 12px',
+                    borderRadius: '4px',
+                    fontSize: '18px',
+                  }}
+                >
+                  {location}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: '40px',
+          fontSize: '20px',
+          color: '#666',
+        }}
+      >
+        <div>{env.NEXT_PUBLIC_SITE_URL}</div>
+        <div>View Photo →</div>
+      </div>
+    </div>,
+    {
+      ...size,
+    }
+  );
+}

app/(posts)/[slug]/loading.tsx

@@ -0,0 +1,47 @@
+import { PhotoContent } from '@/components/post/content';
+import { PhotoHeader } from '@/components/post/header';
+import { PhotoContentSkeleton, PhotoHeaderSkeleton, RelatedPhotosSkeleton } from '@/components/post/loading';
+import { RelatedPhotos } from '@/components/post/related';
+import { config } from '@/config';
+import { getPhotoBySlug } from '@/lib/notion';
+import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const photo = await getPhotoBySlug(slug);
+
+  if (!photo) return notFound();
+
+  return {
+    title: `${photo.title} - ${config.site.name}`,
+    description: photo.location || `Photo taken on ${photo.date}`,
+  };
+}
+
+export default async function PhotoPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const photo = await getPhotoBySlug(slug);
+
+  if (!photo) return notFound();
+
+  return (
+    <div className='mx-auto max-w-4xl space-y-8'>
+      <Suspense fallback={<PhotoHeaderSkeleton />}>
+        <PhotoHeader photo={photo} />
+      </Suspense>
+
+      <Suspense fallback={<PhotoContentSkeleton />}>
+        <PhotoContent photo={photo} />
+      </Suspense>
+
+      <div className='border-tertiary border-b' />
+
+      <Suspense fallback={<RelatedPhotosSkeleton />}>
+        <RelatedPhotos currentPhotoId={photo.id} />
+      </Suspense>
+
+      {config.post.footer}
+    </div>
+  );
+}