//pages/admin/index.js
import Head from 'next/head'
import styles from '../../styles/admin/Index.module.css'
import settings from '../../settings.js'
import Link from 'next/link'
import dynamic from 'next/dynamic'
import {useRouter} from 'next/router'
import {withIronSessionSsr} from "iron-session/next"
export const getServerSideProps = withIronSessionSsr(
async function getServerSideProps(ctx) {
let mySettings = await settings()
if(ctx.req.session.user){
if(ctx.params.page === 'post'){
mySettings.pageTitle = 'ទំព័រការផ្សាយ'
}else if(ctx.params.page === 'user'){
mySettings.pageTitle = 'ទំព័រអ្នកប្រើប្រាស់'
}
return {
props:mySettings,
}
}else{
return {
redirect: {
permanent: false,
destination: "/login",
},
}
}
},
{
cookieName: "myapp_cookiename",
password: process.env.SECRET_KEY,
cookieOptions: {
secure: process.env.NODE_ENV === "production",
},
},
)
export default function Index(props){
const router = useRouter()
const {page} = router.query
let ckeditor = {}
if(page === 'post'){
var Page = dynamic(() => import('./_post.js'),{ ssr: false })
}else if(page === 'user'){
var Page = dynamic(() => import('./_user.js'),{ ssr: false })
}
return(
<div className={styles.Index}>
<Head>
<title>{props.siteTitle} | {props.pageTitle}</title>
<link rel="icon" href="/images/siteLogo.png" />
</Head>
<div className={styles.menuWrapper}>
<div className={`${styles.menu} region`}>
<div className={styles.logo}>{props.pageTitle}</div>
<form>
<select name='label'>
<option>ការផ្សាយ</option>
</select>
<input type='text' name='querry' placeholder='ស្វែងរក'/>
<input type='submit' value='បញ្ជូន' />
</form>
<div className={styles.logout}>
<Link href="/"><a>ទំព័រមុខ</a></Link> | <Link href="/logout"><a>ចេញក្រៅ</a></Link>
</div>
</div>
</div>
<div className={`${styles.main} region`}>
<div className={styles.sidebar}>
<div className={styles.inner}>
<Link href='/admin/post'><a><img src='/images/movie.png' /></a></Link>
<Link href='/admin/post'><a>ការផ្សាយ</a></Link>
<Link href='/admin/category'><a><img src='/images/category.png' /></a></Link>
<Link href='/admin/category'><a>ជំពូក</a></Link>
<Link href='/admin/book'><a><img src='/images/books.png' /></a></Link>
<Link href='/admin/book'><a>សៀវភៅ</a></Link>
<Link href='/admin/upload'><a><img src='/images/upload.png' /></a></Link>
<Link href='/admin/upload'><a>Upload</a></Link>
<Link href='/admin/user'><a><img src='/images/users.png' /></a></Link>
<Link href='/admin/user'><a>អ្នកប្រើប្រាស់</a></Link>
<Link href='/admin/setting'><a><img src='/images/setting.png' /></a></Link>
<Link href='/admin/setting'><a>Setting</a></Link>
</div>
</div>
<div className={styles.content}>
<Page editor={ckeditor}/>
</div>
</div>
<div className={`${styles.status} region`}>សរុបទាំងអស់មានចំនួនៈ </div>
<ul className={styles.items}></ul>
<div className={`${styles.paginate} region`}>
<a><img src="/images/paginate.png" /></a>
</div>
</div>
)
}
//import ClassicEditor from 'ckeditor5-custom-build/build/ckeditor'
import ClassicEditor from 'ckeditor5-custom-build/build/ckeditor'
import { CKEditor } from '@ckeditor/ckeditor5-react'
import styles from '../../styles/admin/User.module.css'
import Video from './_video.js'
let editorConfig = {
toolbar: ['fontfamily', 'fontsize', 'fontcolor', 'bold', 'italic',
'alignment', 'bulletedList', 'indent', 'outdent',
'numberedList', 'link', 'blockQuote', 'HtmlEmbed',
'codeblock', 'imageinsert', 'mediaembed', 'undo', 'redo' ],
fontFamily: {
options: [
'ឧត្តមានជ័យ, OdorMeanChey', 'អក្សរដៃ, HandWriting',
'គូលេន, Koulen', 'ក្រូចឆ្នារ, Limonf3',
'បាយ័ន, Bayon', 'ក្រសាំង, Rooster',
'មូល, Moul',
'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif',
],
supportAllValues: true
},
fontSize: {
options: [9,11,13,'default',17,19,21],
supportAllValues: true
},
}
export default function Ckeditor(ckeditor) {
return (
<div className="Ckeditor">
<form target='/admin/post' method='post'>
<input type='text' className={styles.title} name='title'
placeholder='ឈ្មោះអ្នកប្រើប្រាស់' required />
<CKEditor
editor={ ClassicEditor }
config={ editorConfig }
onReady={ (editor) => {
ckeditor = editor
} }
onChange={ ( event, editor ) => {
const data = editor.getData()
} }
onBlur={ ( event, editor ) => {
console.log( 'Blur.', editor )
} }
onFocus={ ( event, editor ) => {
console.log( 'Focus.', editor )
} }
/>
<input type='hidden' name='content' />
<div className={styles.wrapper}>
<select className={styles.entry} name='category'>
<option>Author</option>
<option>Admin</option>
</select>
<input className={styles.entry} type='text' name='thumb'
placeholder='តំណរភ្ជាប់រូបតំណាង'required/>
<input className={styles.entry} type='datetime-local'
name='datetime' required />
<input className={styles.entry} type='hidden'
name='entries' />
<input className={styles.entry} type='submit' value='បញ្ជូន' />
<input type='text' disabled />
<input name='email' className={styles.entry} type='email'
required placeholder='Email'/>
<input name='password' className={styles.entry} type='password'
required placeholder='ពាក្យសំងាត់'/>
<input type='text' disabled/>
</div>
</form>
</div>
)
}
/* styles/admin/Post.module.css */
.title{
font: var(--body-font);
width: 100%;
padding: 3px 10px;
}
.wrapper{
display: grid;
grid-template-columns: 15% auto 30% 10%;
}
.entry{
font: var(--body-font);
padding: 2px 5px;
}
GitHub: https://github.com/Sokhavuth/nblog
Vercel: https://khmerweb-nblog.vercel.app/admin/user