From 161e17411ab93944c6166a9dc49435cdfd7b7c77 Mon Sep 17 00:00:00 2001 From: Aurelius Ivan Wijaya Date: Tue, 11 Jun 2024 21:36:06 +0700 Subject: [PATCH] add: bing webmaster verification key --- client/next.config.mjs | 9 ++- client/public/BingSiteAuth.xml | 4 ++ client/src/app/post/[slug]/page.module.scss | 26 ++++++- client/src/app/post/[slug]/page.tsx | 71 +++++++++++-------- client/src/components/section/post.tsx | 2 +- client/src/components/ui/button.tsx | 5 +- .../how-i-develop-my-personal-website.md | 44 ++++++++++-- docker-compose.prod.yml | 3 + docker-compose.yml | 6 +- script/init.sh | 40 ----------- src/config/express.config.ts | 3 - src/index.ts | 49 +++++++------ src/utils/log_error.ts | 15 +--- 13 files changed, 160 insertions(+), 117 deletions(-) create mode 100644 client/public/BingSiteAuth.xml delete mode 100644 script/init.sh diff --git a/client/next.config.mjs b/client/next.config.mjs index 2836670..d2ff74e 100644 --- a/client/next.config.mjs +++ b/client/next.config.mjs @@ -6,8 +6,15 @@ const withMDX = mdx() const nextConfig = { pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'], experimental: { - webVitalsAttribution: ['CLS', 'LCP'], mdxRs: true, + turbo: { + rules: { + '*.svg': { + loaders: ['@svgr/webpack'], + as: '*.js', + }, + } + } }, images: { dangerouslyAllowSVG: true, diff --git a/client/public/BingSiteAuth.xml b/client/public/BingSiteAuth.xml new file mode 100644 index 0000000..f1b24ed --- /dev/null +++ b/client/public/BingSiteAuth.xml @@ -0,0 +1,4 @@ + + + A5BAF2CED21531C2027D8B084BCA761C + \ No newline at end of file diff --git a/client/src/app/post/[slug]/page.module.scss b/client/src/app/post/[slug]/page.module.scss index d8d943b..ae0ad1f 100644 --- a/client/src/app/post/[slug]/page.module.scss +++ b/client/src/app/post/[slug]/page.module.scss @@ -2,10 +2,26 @@ display: flex; flex-direction: column; align-items: center; - padding: 20px; - gap: 20px; + padding-inline: 20px; min-height: 100vh; + + .article { + animation: fadeIn 0.3s ease-in-out 1; + will-change: opacity, transform; + } + + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(50vh); + } + to { + opacity: 1; + transform: translateY(0); + } + } + h1 { font-size: 2rem; font-weight: 700; @@ -45,4 +61,10 @@ max-width: 100%; border-radius: 5px; } + + a{ + color: #a4ff9c; + text-decoration: none; + font-weight: 700; + } } \ No newline at end of file diff --git a/client/src/app/post/[slug]/page.tsx b/client/src/app/post/[slug]/page.tsx index ceb87d4..dc866b5 100644 --- a/client/src/app/post/[slug]/page.tsx +++ b/client/src/app/post/[slug]/page.tsx @@ -1,15 +1,17 @@ "use server" import styles from './page.module.scss' -import {MDXRemote} from "next-mdx-remote/rsc"; -import {getPostDataBySlug} from "@/app/action"; import Link from "next/link"; import Image from "next/image"; import CloseIcon from "@/static/svg/close.svg"; +import {MDXRemote} from "next-mdx-remote/rsc"; +import {getPostDataBySlug} from "@/app/action"; import {LinkButton} from "@/components/ui/button"; +import {cn} from "@/lib/utils" export default async function Page({params}: { params: { slug: string } }) { const res: any = await getPostDataBySlug(params.slug) + if (!res) { return
404
} @@ -19,40 +21,51 @@ export default async function Page({params}: { params: { slug: string } }) { className={styles.page} > - -
- - {'Back'} - - - - Share - -
+ {/* close button */} + + {'Back'} + -

- {res.title} -

+ {/* share button */} + + Share + + + + +

+ {res.title} +

- + + ) } \ No newline at end of file diff --git a/client/src/components/section/post.tsx b/client/src/components/section/post.tsx index 15ddb36..92ea755 100644 --- a/client/src/components/section/post.tsx +++ b/client/src/components/section/post.tsx @@ -10,7 +10,7 @@ async function PostSection() { const res: any = await getPostData() return (
{ res.map((post: PostData) => { diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx index ed10875..43dc9c0 100644 --- a/client/src/components/ui/button.tsx +++ b/client/src/components/ui/button.tsx @@ -55,7 +55,7 @@ const Button = React.forwardRef( Button.displayName = "Button" -const LinkButton = React.forwardRef( +const LinkButton = React.forwardRef( ({className, variant, size, asChild = false, ...props}, ref) => { const Comp = asChild ? Slot : "a" as any return ( @@ -75,4 +75,5 @@ LinkButton.displayName = "LinkButton" export { Button, LinkButton, - buttonVariants} + buttonVariants +} diff --git a/client/src/posts/how-i-develop-my-personal-website.md b/client/src/posts/how-i-develop-my-personal-website.md index ff166e8..7321450 100644 --- a/client/src/posts/how-i-develop-my-personal-website.md +++ b/client/src/posts/how-i-develop-my-personal-website.md @@ -3,10 +3,46 @@ _description: I'm working on a personal website and I'm documenting my process _date: 08-06-2023 _tags: website, nextjs, tailwindcss, mdx, react, nginx, digitalocean, github-actions, vercel - ## Introduction -I've been working on my personal website for a while now and I'm documenting my process here. -I'm using Next.js, Tailwind CSS, and MDX to build the site. I'm also using React for the frontend and Nginx for the server. -I'm hosting the site on DigitalOcean and using GitHub Actions to automate the deployment process. +I've been working on my personal website for a while now and I'm documenting my process here. +I'm using a combination of technologies to build the site and I'm also using some tools to automate the deployment +process. +I'm using Next.js, Tailwind CSS, and MDX to build the site. I'm also using React for the frontend and Nginx for the +server. +I'm hosting the site on DigitalOcean and using GitHub Actions to automate the deployment process. I'm also using Vercel for preview deployments. + +## Setting Up The Project + +## Building The Site + +## Wait, what is SSR!? + +Starting on Next.js 12, you can now choose between Server Side Rendering (SSR) and Static Site Generation (SSG) on a +per-page basis. +This is a great feature because it allows you to choose the best rendering method for each page of your site. + +```javascript +"use server"; +``` + +...and for the client side rendering: +```javascript +"use client"; +``` +Which will allow us to use some web APIs that are not available on the server side. + +## Deployment + +## Final Result + +(END) + +## Also check out my other posts: + +- [How I Built My Personal Blog](/post/how-i-develop-my-personal-website) + +## References: + +- [Next.js](https://nextjs.org/) \ No newline at end of file diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml index 5d6e5c9..ded8457 100644 --- a/docker-compose.prod.yml +++ b/docker-compose.prod.yml @@ -33,6 +33,9 @@ services: - cmsnetwork volumes: - ./volumes/mongo:/data/db + command: + - sleep + - infinity networks: cmsnetwork: diff --git a/docker-compose.yml b/docker-compose.yml index 91d3370..b9a5396 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -10,6 +10,7 @@ services: tty: true ports: - 3000:3000 + - 4000:4000 volumes: - .:/app - ./volumes/logs:/app/logs @@ -22,7 +23,7 @@ services: mongo: container_name: mongo-${PROJECT_NAME} - image: mongo:5.0-focal + image: mongo:5.0 tty: true ports: - 27017:27017 @@ -30,6 +31,9 @@ services: - cmsnetwork volumes: - ./volumes/mongo:/data/db + command: + - sleep + - infinity networks: cmsnetwork: diff --git a/script/init.sh b/script/init.sh deleted file mode 100644 index 4d81c2d..0000000 --- a/script/init.sh +++ /dev/null @@ -1,40 +0,0 @@ -#!/bin/bash - -# Initialize all service dependencies - -# Check if Node.js is installed -# if ! command -v node &> /dev/null -# then -# echo "Error: Node.js is not installed. Please install Node.js before running this script." -# exit 1 -# fi - -# Install pnpm (if not already installed) -if ! command -v pnpm &> /dev/null -then - echo "pnpm is not found. Installing pnpm..." - curl -sL https://pnpm.io/install.sh | sh -fi - -# Install dependencies for client and server directories -pnpm install -echo "Node Modules for client installed succesfully!" -echo "Installing dependencies..." -cd client && pnpm install -echo "Node Modules for client installed succesfully!" -cd .. -echo "Dependencies installed successfully." - -# build docker images -# make sure docker service running -# SERVICE_NAME="docker.service" - -# Check if Docker service is running -# if ! docker service ps $SERVICE_NAME >/dev/null 2>&1; then -# echo "Error Docker service '$SERVICE_NAME' is not running." -# exit 1 -# else -# echo "Docker service '$SERVICE_NAME' is running." -# fi -sudo systemctl start docker -docker-compose up -d diff --git a/src/config/express.config.ts b/src/config/express.config.ts index 7b93691..a6a06d2 100644 --- a/src/config/express.config.ts +++ b/src/config/express.config.ts @@ -1,8 +1,5 @@ import express, {Application} from 'express'; import morgan from "morgan"; -import {config as env} from "dotenv"; - -env(); class ExpressApp { private readonly app: Application; diff --git a/src/index.ts b/src/index.ts index df6e030..ae33489 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,34 +1,41 @@ import dotenv from 'dotenv'; import path from 'path'; import compression from 'compression'; -// import morgan from "morgan"; import express from 'express'; -import {AppRouter} from './routes/routes'; -import {connectDB} from './data/mongo-database.config'; -import {ExpressApp} from './config/express.config'; +import { AppRouter } from './routes/routes'; +import { connectDB } from './data/mongo-database.config'; +import { ExpressApp } from './config/express.config'; +// Load environment variables from .env file dotenv.config({ path: path.resolve(__dirname, '../.env') }); const APP_PORT: string | number = process.env.PORT || 4000; -connectDB().then(r => console.log(r)).catch(e => console.log(e)); +const startServer = async () => { + try { + // Connect to the database + await connectDB(); + console.log('Database connected successfully'); -const Middleware = [ - express.json, - compression -]; - -const app: express.Application = new ExpressApp( - Middleware, - AppRouter -).getApp(); - -// app.use(morgan('dev')); - -app.listen(APP_PORT, - () => { + // Create the express application + const app: express.Application = new ExpressApp( + [ + express.json(), + compression() + ], + AppRouter + ).getApp(); + // Start the server + app.listen(APP_PORT, () => { console.log(`[server]: Server is running at http://localhost:${APP_PORT}`); - } -); \ No newline at end of file + }); + } catch (error) { + console.error('Failed to start the server:', error); + process.exit(1); // Exit with failure + } +}; + +// noinspection JSIgnoredPromiseFromCall +startServer(); diff --git a/src/utils/log_error.ts b/src/utils/log_error.ts index 904280b..8664469 100644 --- a/src/utils/log_error.ts +++ b/src/utils/log_error.ts @@ -6,19 +6,8 @@ async function log_error( logDir: any = `${__dirname}/../logs/` ): Promise { console.error(error); - const errorLogFile = path.join(logDir); - const errorMessage = `${`error-` + new Date().toISOString()} - ${error.stack}\n`; - - fs.appendFile( - errorLogFile, - errorMessage, - (err: any): void => { - if (err) { - console.error(`Error occurred while writing to error log file: ${err}`); - } else { - console.log(`Error logged to ${errorLogFile}`); - } - }); + // const errorLogFile = path.join(logDir); + // const errorMessage = `${`error-` + new Date().toISOString()} - ${error.stack}\n`; } export {log_error}; \ No newline at end of file