rework entire project with nextjs
This commit is contained in:
parent
28885cbe2e
commit
5f4f8ed144
158
.gitignore
vendored
158
.gitignore
vendored
@ -1,133 +1,41 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
# idea
|
||||
.idea
|
||||
next-env.d.ts
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
FROM node:20-slim
|
||||
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
COPY . .
|
||||
|
||||
EXPOSE 3000
|
||||
CMD ["node", "app.js"]
|
||||
@ -1,4 +1,5 @@
|
||||
# blogpop
|
||||
[](#)
|
||||
[](#)
|
||||
|
||||
A simple blogging platform built with Next.js, shadcn/ui and Tailwind CSS.
|
||||
|
||||
A simple blogging platform built with Node.js, Express, and MongoDB.
|
||||
|
||||
173
app.js
173
app.js
@ -1,173 +0,0 @@
|
||||
const express = require('express');
|
||||
const mongoose = require('mongoose');
|
||||
const bodyParser = require('body-parser');
|
||||
const { marked } = require('marked');
|
||||
const session = require('express-session');
|
||||
const MongoStore = require('connect-mongo');
|
||||
const bcrypt = require('bcrypt');
|
||||
const Admin = require('./models/admin');
|
||||
const Post = require('./models/post');
|
||||
const { requireAuth, checkSetup } = require('./middleware/auth');
|
||||
|
||||
const app = express();
|
||||
|
||||
mongoose.connect('mongodb://mongodb:27017/blog', {
|
||||
useNewUrlParser: true,
|
||||
useUnifiedTopology: true
|
||||
});
|
||||
|
||||
app.use(session({
|
||||
secret: process.env.SESSION_SECRET || 'your-rewkufhriufhweirhfuiewrhfiuewrhfiuehrwifuerhwuifwher-key',
|
||||
resave: false,
|
||||
saveUninitialized: true,
|
||||
store: MongoStore.create({
|
||||
mongoUrl: 'mongodb://mongodb:27017/blog',
|
||||
ttl: 24 * 60 * 60
|
||||
}),
|
||||
cookie: {
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
maxAge: 1000 * 60 * 60 * 24
|
||||
}
|
||||
}));
|
||||
|
||||
marked.setOptions({
|
||||
breaks: true,
|
||||
gfm: true
|
||||
});
|
||||
|
||||
app.set('view engine', 'ejs');
|
||||
app.use(bodyParser.urlencoded({ extended: true }));
|
||||
app.use(express.static('public'));
|
||||
app.locals.marked = marked;
|
||||
|
||||
app.use((req, res, next) => {
|
||||
console.log('Session data after middleware:', req.session);
|
||||
res.locals.isAuthenticated = req.session.isAuthenticated || false;
|
||||
next();
|
||||
});
|
||||
|
||||
app.get('/', async (req, res) => {
|
||||
const posts = await Post.find().sort({ createdAt: -1 });
|
||||
console.log('hi');
|
||||
res.render('index', { posts });
|
||||
});
|
||||
|
||||
app.get('/admin/setup', checkSetup, (req, res) => {
|
||||
console.log('trying');
|
||||
res.render('admin/setup');
|
||||
});
|
||||
|
||||
app.post('/admin/setup', checkSetup, async (req, res) => {
|
||||
try {
|
||||
const admin = new Admin({
|
||||
username: req.body.username,
|
||||
password: req.body.password,
|
||||
email: req.body.email,
|
||||
setupComplete: true
|
||||
});
|
||||
await admin.save();
|
||||
req.session.isAuthenticated = true;
|
||||
res.redirect('/admin/dashboard');
|
||||
} catch (error) {
|
||||
console.error('Setup failed:', error);
|
||||
res.render('admin/setup', { error: 'Setup failed. Please try again.' });
|
||||
}
|
||||
});
|
||||
|
||||
app.post('/admin/login', async (req, res) => {
|
||||
try {
|
||||
const admin = await Admin.findOne({ username: req.body.username });
|
||||
if (admin && await bcrypt.compare(req.body.password, admin.password)) {
|
||||
req.session.isAuthenticated = true;
|
||||
req.session.save((err) => {
|
||||
if (err) {
|
||||
console.error('Session save error:', err);
|
||||
return res.render('admin/login', { error: 'Login failed' });
|
||||
}
|
||||
console.log('Session data after login:', req.session);
|
||||
console.log('Login successful, redirecting to dashboard');
|
||||
return res.redirect('/admin/dashboard');
|
||||
});
|
||||
} else {
|
||||
console.log('Invalid credentials');
|
||||
res.render('admin/login', { error: 'Invalid credentials' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
res.render('admin/login', { error: 'Login failed' });
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/admin/login', (req, res) => {
|
||||
res.render('admin/login');
|
||||
});
|
||||
|
||||
app.post('/admin/login', async (req, res) => {
|
||||
try {
|
||||
const admin = await Admin.findOne({ username: req.body.username });
|
||||
if (admin && await bcrypt.compare(req.body.password, admin.password)) {
|
||||
req.session.isAuthenticated = true;
|
||||
console.log("in loop");
|
||||
return res.redirect('/admin/dashboard');
|
||||
}
|
||||
res.render('admin/login', { error: 'Invalid credentials' });
|
||||
} catch (error) {
|
||||
console.log('Login failed:', error);
|
||||
res.render('admin/login', { error: 'Login failed' });
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/admin/logout', (req, res) => {
|
||||
req.session.destroy((err) => {
|
||||
if (err) {
|
||||
console.error('Logout failed:', err);
|
||||
}
|
||||
res.redirect('/');
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/admin/dashboard', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const posts = await Post.find().sort({ createdAt: -1 });
|
||||
res.render('admin/dashboard', { posts });
|
||||
} catch (error) {
|
||||
console.error('Dashboard error:', error);
|
||||
res.status(500).send('Error loading dashboard');
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/admin/new', requireAuth, (req, res) => {
|
||||
res.render('admin/new');
|
||||
});
|
||||
|
||||
app.post('/admin/posts', requireAuth, async (req, res) => {
|
||||
const post = new Post({
|
||||
title: req.body.title,
|
||||
content: req.body.content
|
||||
});
|
||||
await post.save();
|
||||
res.redirect('/admin/dashboard');
|
||||
});
|
||||
|
||||
app.get('/admin/posts/:id/edit', requireAuth, async (req, res) => {
|
||||
const post = await Post.findById(req.params.id);
|
||||
res.render('admin/edit', { post });
|
||||
});
|
||||
|
||||
app.post('/admin/posts/:id', requireAuth, async (req, res) => {
|
||||
await Post.findByIdAndUpdate(req.params.id, {
|
||||
title: req.body.title,
|
||||
content: req.body.content
|
||||
});
|
||||
res.redirect('/admin/dashboard');
|
||||
});
|
||||
|
||||
app.post('/admin/posts/:id/delete', requireAuth, async (req, res) => {
|
||||
await Post.findByIdAndDelete(req.params.id);
|
||||
res.redirect('/admin/dashboard');
|
||||
});
|
||||
|
||||
const PORT = 2389;
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server running on port ${PORT}`);
|
||||
});
|
||||
79
app/admin/page.tsx
Normal file
79
app/admin/page.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import strings from "@/strings.json"
|
||||
import { PlusCircle, UserPlus } from "lucide-react"
|
||||
|
||||
const posts = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Sample Post 1",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 1",
|
||||
slug: "sample-post-1",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Sample Post 2",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 1",
|
||||
slug: "sample-post-2",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Sample Post 3",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 2",
|
||||
slug: "sample-post-3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Sample Post 4",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 2",
|
||||
slug: "sample-post-4",
|
||||
},
|
||||
]
|
||||
|
||||
export default function Admin() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-4xl font-bold text-primary">{strings.adminHeader}</h1>
|
||||
<div className="grid gap-6 sm:grid-cols-3 lg:grid-cols-4">
|
||||
<Card className="flex flex-col justify-between">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<CardTitle className="text-xl text-primary">{strings.totalPostsCardTitle}</CardTitle>
|
||||
<span className="text-4xl font-bold text-primary ml-2">
|
||||
{posts.length}
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="w-full max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Quick Actions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<Button className="w-full justify-start" variant="outline" asChild>
|
||||
<a href="/admin/post">
|
||||
<PlusCircle className="mr-2 h-4 w-4" />
|
||||
New Post
|
||||
</a>
|
||||
</Button>
|
||||
<Button className="w-full justify-start" variant="outline" asChild>
|
||||
<a href="/admin/users/new">
|
||||
<UserPlus className="mr-2 h-4 w-4" />
|
||||
New User
|
||||
</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
107
app/admin/post/page.tsx
Normal file
107
app/admin/post/page.tsx
Normal file
@ -0,0 +1,107 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import dynamic from "next/dynamic"
|
||||
import strings from "@/strings.json"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
|
||||
const MDEditor = dynamic(() => import("@uiw/react-md-editor"), {
|
||||
ssr: false
|
||||
})
|
||||
|
||||
import "@uiw/react-md-editor/markdown-editor.css"
|
||||
import "@uiw/react-markdown-preview/markdown.css"
|
||||
|
||||
const categories = ["Example Category 1", "Example Category 2"]
|
||||
|
||||
export default function CreatePost() {
|
||||
const [title, setTitle] = useState("")
|
||||
const [description, setDescription] = useState("")
|
||||
const [category, setCategory] = useState("")
|
||||
const [slug, setSlug] = useState("")
|
||||
const [content, setContent] = useState("")
|
||||
|
||||
const handleEditorChange = (value: string | undefined) => {
|
||||
setContent(value || "")
|
||||
}
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// TODO: handle form submission here!
|
||||
console.log({ title, description, category, slug, content })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-4xl font-bold text-primary">{strings.adminNewPostHeader}</h1>
|
||||
<Card>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardHeader>
|
||||
<CardTitle>{strings.newPostCardTitle}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">{strings.newPostTitleFieldLabel}</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder={strings.newPostTitleFieldPlaceholder}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">{strings.newPostDescriptionFieldLabel}</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder={strings.newPostDescriptionFieldPlaceholder}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="category">{strings.newPostCategoryFieldLabel}</Label>
|
||||
<Select value={category} onValueChange={setCategory}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={strings.newPostCategoryFieldPlaceholder} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((cat) => (
|
||||
<SelectItem key={cat} value={cat}>
|
||||
{cat}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="slug">{strings.newPostSlugFieldLabel}</Label>
|
||||
<Input
|
||||
id="slug"
|
||||
value={slug}
|
||||
onChange={(e) => setSlug(e.target.value)}
|
||||
placeholder={strings.newPostSlugFieldPlaceholder}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>{strings.newPostContentFieldLabel}</Label>
|
||||
<MDEditor
|
||||
value={content}
|
||||
onChange={handleEditorChange}
|
||||
height={400}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button type="submit">{strings.createPostButtonText}</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
67
app/admin/users/new/page.tsx
Normal file
67
app/admin/users/new/page.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import strings from "@/strings.json"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
|
||||
export default function CreateUser() {
|
||||
const [name, setName] = useState("")
|
||||
const [email, setEmail] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// TODO: handle form submission here!
|
||||
console.log({ name, email, password })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-4xl font-bold text-primary">{strings.adminNewUserHeader}</h1>
|
||||
<Card>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardHeader>
|
||||
<CardTitle>{strings.newUserCardTitle}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">{strings.newUserNameFieldLabel}</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder={strings.newUserNameFieldPlaceholder}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">{strings.newUserEmailFieldLabel}</Label>
|
||||
<Input
|
||||
id="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder={strings.newUserEmailFieldPlaceholder}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">{strings.newUserPasswordFieldLabel}</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder={strings.newUserPasswordFieldPlaceholder}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button type="submit">{strings.createUserButtonText}</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
38
app/admin/users/page.tsx
Normal file
38
app/admin/users/page.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import strings from "@/strings.json"
|
||||
|
||||
export default function Users() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-4xl font-bold text-primary">{strings.usersHeader}</h1>
|
||||
<div className="grid gap-6 sm:grid-cols-3 lg:grid-cols-4">
|
||||
<Card className="flex flex-col justify-between">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<CardTitle className="text-xl text-primary">{strings.totalUsersCardTitle}</CardTitle>
|
||||
<span className="text-4xl font-bold text-primary ml-2">
|
||||
{/* TODO: Implement user logic and counter */}
|
||||
57
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="flex flex-col justify-between">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<CardDescription>
|
||||
<CardTitle className="text-xl text-primary">{strings.totalUsersLoggedInMonthCardTitle}</CardTitle>
|
||||
<p className="text-sm italic text-muted-foreground mt-1">{strings.totalUsersLoggedInMonthCardDescription}</p>
|
||||
</CardDescription>
|
||||
<span className="text-4xl font-bold text-primary ml-2">
|
||||
{/* TODO: Implement users logged in (by month) logic + counter */}
|
||||
24
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
82
app/categories/page.tsx
Normal file
82
app/categories/page.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import Link from "next/link"
|
||||
import strings from "@/strings.json"
|
||||
|
||||
const posts = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Sample Post 1",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 1",
|
||||
slug: "sample-post-1",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Sample Post 2",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 1",
|
||||
slug: "sample-post-2",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Sample Post 3",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 2",
|
||||
slug: "sample-post-3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Sample Post 4",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 2",
|
||||
slug: "sample-post-4",
|
||||
},
|
||||
]
|
||||
|
||||
export default function Categories() {
|
||||
const categories = posts.reduce((acc, post) => {
|
||||
acc[post.category] = (acc[post.category] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-4xl font-bold text-primary">{strings.categoriesHeader}</h1>
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{Object.entries(categories).map(([category, count]) => (
|
||||
<Card key={category} className="flex flex-col justify-between border-border/40 hover:border-border/60 transition-colors">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<CardTitle className="text-xl text-primary">{category}</CardTitle>
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
{count} {count === 1 ? strings.categoriesPostUnitSingle : strings.categoriesPostUnitPlural }
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription className="mt-2">
|
||||
{strings.categoriesCardDescriptionPre} {category}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{strings.categoriesLastUpdatedLabel}: {posts.find(post => post.category === category)?.date}
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end">
|
||||
<Link
|
||||
href={`/categories/${category.toLowerCase()}`}
|
||||
className="text-sm font-medium text-primary hover:underline"
|
||||
>
|
||||
{strings.categoriesViewPostsFromLinkText}
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
59
app/globals.css
Normal file
59
app/globals.css
Normal file
@ -0,0 +1,59 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Removed .dark selector and its contents */
|
||||
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom styles for Geist font */
|
||||
.font-sans {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.font-heading {
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
|
||||
35
app/layout.tsx
Normal file
35
app/layout.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import './globals.css'
|
||||
import { cn } from "@/lib/utils"
|
||||
import { GeistSans } from 'geist/font/sans';
|
||||
import { Navbar } from "@/components/Navbar"
|
||||
import { Sidebar } from "@/components/Sidebar"
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={cn(
|
||||
"bg-background font-sans antialiased",
|
||||
GeistSans.className
|
||||
)}
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<body className="min-h-screen bg-background font-sans antialiased">
|
||||
<div className="relative flex min-h-screen flex-col">
|
||||
<Navbar />
|
||||
<div className="flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
|
||||
<Sidebar />
|
||||
<main className="relative flex w-full flex-col overflow-hidden px-6 pr-7 py-6 sm:px-8 sm:pr-13 md:px-14 md:pr-7 lg:px-16 lg:pr-11">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
76
app/page.tsx
Normal file
76
app/page.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import Link from "next/link"
|
||||
import strings from "@/strings.json"
|
||||
|
||||
const posts = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Sample Post 1",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 1",
|
||||
slug: "sample-post-1",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Sample Post 2",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 1",
|
||||
slug: "sample-post-2",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Sample Post 3",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 2",
|
||||
slug: "sample-post-3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Sample Post 4",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 2",
|
||||
slug: "sample-post-4",
|
||||
},
|
||||
]
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-4xl font-bold text-primary">{strings.latestPostsHeader}</h1>
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{posts.map((post) => (
|
||||
<Card key={post.id} className="flex flex-col justify-between border-border/40 hover:border-border/60 transition-colors">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<CardTitle className="text-xl text-primary">{post.title}</CardTitle>
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
{post.category}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription className="mt-2">{post.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{strings.recentPostsPublishedOnLabel} {post.date}
|
||||
</p>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end">
|
||||
<Link
|
||||
href={`/posts/${post.slug}`}
|
||||
className="text-sm font-medium text-primary hover:underline"
|
||||
>
|
||||
{strings.recentPostsReadMoreFromLinkText}
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
21
components.json
Normal file
21
components.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": true,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.ts",
|
||||
"css": "app/globals.css",
|
||||
"baseColor": "slate",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
141
components/Navbar.tsx
Normal file
141
components/Navbar.tsx
Normal file
@ -0,0 +1,141 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import { Menu } from 'lucide-react'
|
||||
import { DialogTitle } from "@radix-ui/react-dialog"
|
||||
import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
|
||||
import strings from "@/strings.json"
|
||||
import config from "@/config.json"
|
||||
|
||||
export function Navbar() {
|
||||
const pathname = usePathname()
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container flex h-14 items-center px-4 sm:px-6 lg:px-8">
|
||||
<div className="mr-4 hidden md:flex">
|
||||
<nav className="flex items-center space-x-6 text-sm font-medium">
|
||||
<Link
|
||||
href="/"
|
||||
className={cn(
|
||||
"transition-colors hover:text-primary",
|
||||
pathname === "/" ? "text-primary" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{strings.homeLinkTextNavbar}
|
||||
</Link>
|
||||
<Link
|
||||
href="/categories"
|
||||
className={cn(
|
||||
"transition-colors hover:text-primary",
|
||||
pathname?.startsWith("/categories")
|
||||
? "text-primary"
|
||||
: "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{strings.categoriesLinkTextNavbar}
|
||||
</Link>
|
||||
<Link
|
||||
href="/admin"
|
||||
className={cn(
|
||||
"transition-colors hover:text-primary",
|
||||
pathname?.startsWith("/admin")
|
||||
? "text-primary"
|
||||
: "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{strings.adminLinkTextNavbar}
|
||||
</Link>
|
||||
{config.personalWebsite && (
|
||||
<Link
|
||||
href={config.personalWebsiteUrl}
|
||||
className={cn(
|
||||
"transition-colors hover:text-primary",
|
||||
pathname?.startsWith("/about")
|
||||
? "text-primary"
|
||||
: "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{config.personalWebsiteLinkText}
|
||||
</Link>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="mr-4 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
<span className="sr-only">Toggle Menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="pr-0">
|
||||
<DialogTitle>
|
||||
<VisuallyHidden>Menu</VisuallyHidden>
|
||||
</DialogTitle>
|
||||
<div className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<MobileLink href="/" onOpenChange={() => {}}>
|
||||
Home
|
||||
</MobileLink>
|
||||
<MobileLink href="/categories" onOpenChange={() => {}}>
|
||||
Categories
|
||||
</MobileLink>
|
||||
<MobileLink href="/about" onOpenChange={() => {}}>
|
||||
About
|
||||
</MobileLink>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<div className="flex flex-1 items-center justify-start space-x-2 md:justify-center">
|
||||
<div className="w-full flex-1 md:w-auto md:flex-none">
|
||||
<Input
|
||||
placeholder="Search posts..."
|
||||
className="h-9 w-full md:hidden lg:hidden"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
interface MobileLinkProps extends React.ComponentPropsWithoutRef<typeof Link> {
|
||||
onOpenChange?: (open: boolean) => void
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
function MobileLink({
|
||||
href,
|
||||
onOpenChange,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: MobileLinkProps) {
|
||||
const pathname = usePathname()
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
onClick={() => {
|
||||
onOpenChange?.(false)
|
||||
}}
|
||||
className={cn(
|
||||
"text-muted-foreground transition-colors hover:text-primary",
|
||||
pathname === href && "text-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
99
components/Sidebar.tsx
Normal file
99
components/Sidebar.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import Link from "next/link"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import strings from "@/strings.json"
|
||||
|
||||
const posts = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Sample Post 1",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 1",
|
||||
slug: "sample-post-1",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Sample Post 2",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 1",
|
||||
slug: "sample-post-2",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Sample Post 3",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 2",
|
||||
slug: "sample-post-3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Sample Post 4",
|
||||
description: "Description",
|
||||
date: "2025-01-14",
|
||||
category: "Example Category 2",
|
||||
slug: "sample-post-4",
|
||||
},
|
||||
]
|
||||
|
||||
const uniqueCategories = Array.from(new Set(posts.map(post => post.category)));
|
||||
const latestPosts = posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).slice(0, 3);
|
||||
|
||||
export function Sidebar() {
|
||||
return (
|
||||
<aside className="fixed left-3 md:left-2 lg:left-5 top-15 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto bg-background px-4 py-6 md:sticky md:block md:w-[280px] lg:w-[300px]">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<Link href="/" className="text-4xl font-bold text-primary">{process.env.BLOG_NAME || 'BlogPop'}</Link>
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-start space-x-2 md:justify-center">
|
||||
<div className="w-full flex-1 md:w-auto md:flex-none">
|
||||
<Input
|
||||
placeholder="Search posts..."
|
||||
className="h-9 mb-8 w-full md:w-[250px] lg:w-[270px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle>{strings.recentPostsLabelSidebar}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2">
|
||||
{latestPosts.map((post) => (
|
||||
<li key={post.id}>
|
||||
<Link
|
||||
href={`/posts/${post.slug}`}
|
||||
className="text-sm text-muted-foreground hover:text-primary"
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{strings.categoriesLabelSidebar}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2">
|
||||
{uniqueCategories.map((category) => (
|
||||
<li key={category}>
|
||||
<Link
|
||||
href={`/categories/${category.toLowerCase()}`}
|
||||
className="text-sm text-muted-foreground hover:text-primary"
|
||||
>
|
||||
{category}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
36
components/ui/badge.tsx
Normal file
36
components/ui/badge.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
57
components/ui/button.tsx
Normal file
57
components/ui/button.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
76
components/ui/card.tsx
Normal file
76
components/ui/card.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-xl border bg-card text-card-foreground shadow",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Card.displayName = "Card"
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardHeader.displayName = "CardHeader"
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardTitle.displayName = "CardTitle"
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardDescription.displayName = "CardDescription"
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
))
|
||||
CardContent.displayName = "CardContent"
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardFooter.displayName = "CardFooter"
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||
201
components/ui/dropdown-menu.tsx
Normal file
201
components/ui/dropdown-menu.tsx
Normal file
@ -0,0 +1,201 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-2 w-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
))
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
}
|
||||
22
components/ui/input.tsx
Normal file
22
components/ui/input.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
|
||||
export { Input }
|
||||
26
components/ui/label.tsx
Normal file
26
components/ui/label.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const labelVariants = cva(
|
||||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
)
|
||||
|
||||
const Label = React.forwardRef<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||
VariantProps<typeof labelVariants>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(labelVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Label.displayName = LabelPrimitive.Root.displayName
|
||||
|
||||
export { Label }
|
||||
159
components/ui/select.tsx
Normal file
159
components/ui/select.tsx
Normal file
@ -0,0 +1,159 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Select = SelectPrimitive.Root
|
||||
|
||||
const SelectGroup = SelectPrimitive.Group
|
||||
|
||||
const SelectValue = SelectPrimitive.Value
|
||||
|
||||
const SelectTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
))
|
||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
||||
|
||||
const SelectScrollUpButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
))
|
||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
||||
|
||||
const SelectScrollDownButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
))
|
||||
SelectScrollDownButton.displayName =
|
||||
SelectPrimitive.ScrollDownButton.displayName
|
||||
|
||||
const SelectContent = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
))
|
||||
SelectContent.displayName = SelectPrimitive.Content.displayName
|
||||
|
||||
const SelectLabel = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
||||
|
||||
const SelectItem = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
))
|
||||
SelectItem.displayName = SelectPrimitive.Item.displayName
|
||||
|
||||
const SelectSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectScrollDownButton,
|
||||
}
|
||||
140
components/ui/sheet.tsx
Normal file
140
components/ui/sheet.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Sheet = SheetPrimitive.Root
|
||||
|
||||
const SheetTrigger = SheetPrimitive.Trigger
|
||||
|
||||
const SheetClose = SheetPrimitive.Close
|
||||
|
||||
const SheetPortal = SheetPrimitive.Portal
|
||||
|
||||
const SheetOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
))
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||
bottom:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
VariantProps<typeof sheetVariants> {}
|
||||
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(sheetVariants({ side }), className)}
|
||||
{...props}
|
||||
>
|
||||
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
{children}
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
))
|
||||
SheetContent.displayName = SheetPrimitive.Content.displayName
|
||||
|
||||
const SheetHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetHeader.displayName = "SheetHeader"
|
||||
|
||||
const SheetFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetFooter.displayName = "SheetFooter"
|
||||
|
||||
const SheetTitle = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetTitle.displayName = SheetPrimitive.Title.displayName
|
||||
|
||||
const SheetDescription = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetDescription.displayName = SheetPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetPortal,
|
||||
SheetOverlay,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
22
components/ui/textarea.tsx
Normal file
22
components/ui/textarea.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Textarea = React.forwardRef<
|
||||
HTMLTextAreaElement,
|
||||
React.ComponentProps<"textarea">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Textarea.displayName = "Textarea"
|
||||
|
||||
export { Textarea }
|
||||
5
config.json
Normal file
5
config.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"personalWebsite": true,
|
||||
"personalWebsiteUrl": "https://www.aidxn.cc",
|
||||
"personalWebsiteLinkText": "Main Website"
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
services:
|
||||
blog:
|
||||
build: ./
|
||||
ports:
|
||||
- "2389:2389"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
depends_on:
|
||||
- mongodb
|
||||
restart: unless-stopped
|
||||
mongodb:
|
||||
image: mongo:latest
|
||||
volumes:
|
||||
- mongodb_data:/data/db
|
||||
restart: unless-stopped
|
||||
|
||||
volumes:
|
||||
mongodb_data:
|
||||
16
eslint.config.mjs
Normal file
16
eslint.config.mjs
Normal file
@ -0,0 +1,16 @@
|
||||
import { dirname } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import { FlatCompat } from "@eslint/eslintrc";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
const compat = new FlatCompat({
|
||||
baseDirectory: __dirname,
|
||||
});
|
||||
|
||||
const eslintConfig = [
|
||||
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||
];
|
||||
|
||||
export default eslintConfig;
|
||||
6
lib/utils.ts
Normal file
6
lib/utils.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
async function checkSetup(req, res, next) {
|
||||
console.log("check setup");
|
||||
const Admin = require('../models/admin');
|
||||
try {
|
||||
const adminExists = await Admin.findOne({ setupComplete: true });
|
||||
if (!adminExists && req.path !== '/admin/setup') {
|
||||
console.log("attempting to redirect to setup");
|
||||
return res.redirect('/admin/setup');
|
||||
}
|
||||
if (adminExists && req.path === '/admin/setup') {
|
||||
console.log("attempting to redirect to login");
|
||||
return res.redirect('/admin/login');
|
||||
}
|
||||
next();
|
||||
} catch (error) {
|
||||
console.error('Setup check failed:', error);
|
||||
next(error);
|
||||
}
|
||||
}
|
||||
|
||||
function requireAuth(req, res, next) {
|
||||
console.log('Session data in requireAuth:', req.session);
|
||||
if (req.session && req.session.isAuthenticated) {
|
||||
console.log('User is authenticated');
|
||||
next();
|
||||
} else {
|
||||
console.log('User is not authenticated, redirecting to login');
|
||||
res.redirect('/admin/login');
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Bottom")
|
||||
module.exports = { requireAuth, checkSetup };
|
||||
@ -1,18 +0,0 @@
|
||||
const mongoose = require('mongoose');
|
||||
const bcrypt = require('bcrypt');
|
||||
|
||||
const admin = new mongoose.Schema({
|
||||
username: { type: String, required: true, unique: true },
|
||||
password: { type: String, required: true },
|
||||
email: { type: String, required: true },
|
||||
setupComplete: { type: Boolean, default: false }
|
||||
});
|
||||
|
||||
admin.pre('save', async function(next) {
|
||||
if (this.isModified('password')) {
|
||||
this.password = await bcrypt.hash(this.password, 10);
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
module.exports = mongoose.model('Admin', admin);
|
||||
@ -1,9 +0,0 @@
|
||||
const mongoose = require('mongoose');
|
||||
|
||||
const post = new mongoose.Schema({
|
||||
title: { type: String, required: true },
|
||||
content: { type: String, required: true },
|
||||
createdAt: { type: Date, default: Date.now }
|
||||
});
|
||||
|
||||
module.exports = mongoose.model('Post', post);
|
||||
9
next.config.ts
Normal file
9
next.config.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
env: {
|
||||
BLOG_NAME: process.env.BLOG_NAME,
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
5895
package-lock.json
generated
Normal file
5895
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
41
package.json
Normal file
41
package.json
Normal file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "blogpop",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dialog": "^1.1.4",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.4",
|
||||
"@radix-ui/react-label": "^2.1.1",
|
||||
"@radix-ui/react-select": "^2.1.4",
|
||||
"@radix-ui/react-slot": "^1.1.1",
|
||||
"@radix-ui/react-visually-hidden": "^1.1.1",
|
||||
"@uiw/react-md-editor": "^4.0.5",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"geist": "^1.3.1",
|
||||
"lucide-react": "^0.471.1",
|
||||
"next": "15.1.4",
|
||||
"next-themes": "^0.4.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.1.4",
|
||||
"@eslint/eslintrc": "^3"
|
||||
}
|
||||
}
|
||||
8
postcss.config.mjs
Normal file
8
postcss.config.mjs
Normal file
@ -0,0 +1,8 @@
|
||||
/** @type {import('postcss-load-config').Config} */
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
57
strings.json
Normal file
57
strings.json
Normal file
@ -0,0 +1,57 @@
|
||||
{
|
||||
"latestPostsHeader": "Latest Posts",
|
||||
"categoriesHeader": "Categories",
|
||||
"adminHeader": "Admin",
|
||||
"adminNewPostHeader": "New Post",
|
||||
"adminNewUserHeader": "New User",
|
||||
"usersHeader": "Users",
|
||||
|
||||
"homeLinkTextNavbar": "Home",
|
||||
"categoriesLinkTextNavbar": "Categories",
|
||||
"adminLinkTextNavbar": "Admin",
|
||||
|
||||
"totalPostsCardTitle": "Total Posts",
|
||||
"newPostCardTitle": "Create New Post",
|
||||
"newUserCardTitle": "Create User",
|
||||
"totalUsersCardTitle": "Total Users",
|
||||
"totalUsersLoggedInMonthCardTitle": "Users Logged In",
|
||||
|
||||
"newPostTitleFieldLabel": "Title",
|
||||
"newPostDescriptionFieldLabel": "Description",
|
||||
"newPostCategoryFieldLabel": "Category",
|
||||
"newPostSlugFieldLabel": "Slug",
|
||||
"newPostContentFieldLabel": "Post Content",
|
||||
|
||||
"newUserNameFieldLabel": "Name",
|
||||
"newUserEmailFieldLabel": "Email",
|
||||
"newUserPasswordFieldLabel": "Password",
|
||||
|
||||
"newPostTitleFieldPlaceholder": "Enter post title",
|
||||
"newPostDescriptionFieldPlaceholder": "Enter post description",
|
||||
"newPostCategoryFieldPlaceholder": "Select a category",
|
||||
"newPostSlugFieldPlaceholder": "Enter post slug (i.e. /example-slug)",
|
||||
|
||||
"newUserNameFieldPlaceholder": "Enter desired username",
|
||||
"newUserEmailFieldPlaceholder": "Enter user email",
|
||||
"newUserPasswordFieldPlaceholder": "Enter user password",
|
||||
|
||||
"categoriesCardDescriptionPre": "Explore posts from",
|
||||
|
||||
"totalUsersLoggedInMonthCardDescription": "This month",
|
||||
|
||||
"categoriesLastUpdatedLabel": "Last updated",
|
||||
|
||||
"categoriesViewPostsFromLinkText": "View posts",
|
||||
"recentPostsReadMoreFromLinkText": "Read more",
|
||||
|
||||
"categoriesPostUnitSingle": "post",
|
||||
"categoriesPostUnitPlural": "posts",
|
||||
|
||||
"categoriesLabelSidebar": "Categories",
|
||||
"recentPostsLabelSidebar": "Recent Posts",
|
||||
|
||||
"createPostButtonText": "Create Post",
|
||||
"createUserButtonText": "Create User",
|
||||
|
||||
"recentPostsPublishedOnLabel": "Published on"
|
||||
}
|
||||
62
tailwind.config.ts
Normal file
62
tailwind.config.ts
Normal file
@ -0,0 +1,62 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
export default {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))'
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))'
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))'
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))'
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))'
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))'
|
||||
},
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
chart: {
|
||||
'1': 'hsl(var(--chart-1))',
|
||||
'2': 'hsl(var(--chart-2))',
|
||||
'3': 'hsl(var(--chart-3))',
|
||||
'4': 'hsl(var(--chart-4))',
|
||||
'5': 'hsl(var(--chart-5))'
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
} satisfies Config;
|
||||
27
tsconfig.json
Normal file
27
tsconfig.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Admin Dashboard</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.button.delete {
|
||||
background: #dc3545;
|
||||
}
|
||||
.button.logout {
|
||||
background: #6c757d;
|
||||
}
|
||||
article {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.actions form {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Admin Dashboard</h1>
|
||||
<div>
|
||||
<a href="/admin/new" class="button">New Post</a>
|
||||
<a href="/admin/logout" class="button logout">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% posts.forEach(function(post){ %>
|
||||
<article>
|
||||
<h2><%= post.title %></h2>
|
||||
<div class="date"><%= post.createdAt.toLocaleDateString() %></div>
|
||||
<%- marked(post.content) %>
|
||||
<div class="actions">
|
||||
<a href="/admin/posts/<%= post._id %>/edit" class="button">Edit</a>
|
||||
<form action="/admin/posts/<%= post._id %>/delete" method="POST" style="display: inline;">
|
||||
<button type="submit" class="button delete" onclick="return confirm('Are you sure?')">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
<% }); %>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Edit Post</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
input, textarea {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Edit Blog Post</h1>
|
||||
<form action="/admin/posts/<%= post._id %>" method="POST">
|
||||
<input type="text" name="title" value="<%= post.title %>" required>
|
||||
<textarea name="content" rows="10" required><%= post.content %></textarea>
|
||||
<div>
|
||||
<button type="submit">Update</button>
|
||||
<a href="/admin/dashboard" style="margin-left: 1rem;">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,56 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Admin Login</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Admin Login</h1>
|
||||
<% if (typeof error !== 'undefined') { %>
|
||||
<div class="error"><%= error %></div>
|
||||
<% } %>
|
||||
<form action="/admin/login" method="POST">
|
||||
<div class="form-group">
|
||||
<label>Username:</label>
|
||||
<input type="text" name="username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password:</label>
|
||||
<input type="password" name="password" required>
|
||||
</div>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>New Post</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
input, textarea {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.preview {
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>New Blog Post</h1>
|
||||
<form action="/admin/posts" method="POST">
|
||||
<input type="text" name="title" placeholder="Title" required>
|
||||
<textarea name="content" rows="10" placeholder="Content (Markdown supported)" required></textarea>
|
||||
<div>
|
||||
<button type="submit">Publish</button>
|
||||
<a href="/admin/dashboard" style="margin-left: 1rem;">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,60 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Blog Setup</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Initial Setup</h1>
|
||||
<% if (typeof error !== 'undefined') { %>
|
||||
<div class="error"><%= error %></div>
|
||||
<% } %>
|
||||
<form action="/admin/setup" method="POST">
|
||||
<div class="form-group">
|
||||
<label>Username:</label>
|
||||
<input type="text" name="username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password:</label>
|
||||
<input type="password" name="password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email:</label>
|
||||
<input type="email" name="email" required>
|
||||
</div>
|
||||
<button type="submit">Complete Setup</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,59 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My Blog</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
article {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.date {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
a.button {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.blog-title {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.blog-subtitle {
|
||||
margin-bottom: 15px;
|
||||
color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>My Blog</h1>
|
||||
<p class="blog-subtitle">Powered by <a href="https://github.com/ihatenodejs/blogpop">free and open source software</a>.</p>
|
||||
<div>
|
||||
<% if (isAuthenticated) { %>
|
||||
<a href="/admin/dashboard" class="button">Dashboard</a>
|
||||
<a href="/admin/logout" class="button secondary">Logout</a>
|
||||
<% } else { %>
|
||||
<a href="/admin/login" class="button secondary">Login</a>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<% posts.forEach(function(post){ %>
|
||||
<article>
|
||||
<h1><%= post.title %></h1>
|
||||
<div class="date"><%= post.createdAt.toLocaleDateString() %></div>
|
||||
<%- marked(post.content) %>
|
||||
</article>
|
||||
<% }); %>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,39 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>New Post</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
input, textarea {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>New Blog Post</h1>
|
||||
<form action="/posts" method="POST">
|
||||
<input type="text" name="title" placeholder="Title" required>
|
||||
<textarea name="content" rows="10" placeholder="Content (Markdown supported)" required></textarea>
|
||||
<button type="submit">Publish</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user