jahir.dev

Jahir.Dev

กองซ้อน

• เฟรมเวิร์ก : next.js
• สไตล์ : Tailwind CSS
• เนื้อหา : mdx และ velite
• ฐานข้อมูล : Neon and Drizzle Orm
• Analytics : อูมามิ
• การปรับใช้ : vercel

โครงสร้างโครงการ

 .
| ____config
| ____content
| ____public
| ____scripts
| ____src
| | ____actions
| | ____app
| | ____assets
| | ____components
| | | ____core
| | | ____molecules
| | | ____og
| | | ____views
| | | ____icons.ts
| | ____data
| | ____hooks
| | ____lib
| | ____providers
| | ____styles
| | ____types
| | ____utils

• config/* - รวมการกำหนดค่าที่กำหนดเองทั้งหมดสำหรับ mdx, velite และ next.js
• content/* - โพสต์บล็อก MDX และเนื้อหาสำหรับหน้า donate
• public/* - สินทรัพย์คงที่รวมถึงรูปภาพ, แบบอักษร, เสียง, ไฟล์, ฯลฯ
• scripts/* - ยูทิลิตี้เพื่อตั้งค่าโครงการ
• src/app/* - ทุกหน้าและเส้นทาง API ในเว็บไซต์ ใช้เราเตอร์แอพใหม่จาก next.js 13.+
• src/assets/* - แบบอักษรและภาพคงที่ที่ใช้ในส่วนประกอบที่แตกต่างกัน
• src/components/core/* - ส่วนประกอบที่ง่ายที่สุด ส่วนใหญ่ไม่มีสัญลักษณ์
• src/components/molecules/* -บล็อกหลักสำหรับเว็บไซต์: toolbar , footer , เค้าโครง main , ปุ่ม back-to-top และ social links
• src/components/og/* - รหัสที่ให้พลังการสร้างภาพแบบเปิดกราฟแบบไดนามิก
• src/components/views/* - ส่วนประกอบที่ซับซ้อนมากขึ้นเพื่อสร้างหน้าต่างๆของเว็บไซต์ของฉัน (พวกเขาอยู่ที่นี่เพื่อรักษา src/app/ ให้สะอาดที่สุด)
• src/components/icons.ts - เส้นทางไอคอน SVG ไอคอนมาจากไอคอนการออกแบบวัสดุและลูไซด์
• src/data/* - ไฟล์ JSON ที่มีข้อมูลสำหรับโครงการและหน้า uses
• src/hooks/* - ตะขอสองตัวที่ใช้ตลอดแอป
• src/lib/* - สั้นสำหรับ "ไลบรารี" คอลเลกชันของยูทิลิตี้ที่เป็นประโยชน์หรือรหัสสำหรับบริการภายนอก
• src/providers/* - ทำปฏิกิริยาบริบทสำหรับการจัดเก็บชุดรูปแบบและการโพสต์บล็อกปัจจุบัน
• src/styles/* - สไตล์ระดับโลกที่มี scss ส่วนใหญ่ใช้คลาส Tailwind
• src/types/* - คำจำกัดความบางประเภท
• src/utils/* - ฟังก์ชั่นยูทิลิตี้มากขึ้น แต่ซับซ้อนน้อยกว่าใน lib

ทำงานในพื้นที่

แอปพลิเคชันนี้ต้องการ node.js v18.18+

1. โคลนโครงการติดตั้งการพึ่งพาและเรียกใช้การตั้งค่าเริ่มต้น

   git clone https://github.com/jahirfiquitiva/jahir.dev.git
   cd jahir.dev
   bun
   bun run setup # You can skip this if you're contributing to this repository. It removes all of my personal content and files

2. สร้างไฟล์ .env คล้ายกับ .env.example

3. (ไม่บังคับ) โครงการนี้ใช้ฐานข้อมูล Postgres เพื่อจัดเก็บจำนวนมุมมองและปฏิกิริยา

    CREATE TABLE counters (
     slug VARCHAR ( 255 ) PRIMARY KEY NOT NULL ,
     views INTEGER NOT NULL DEFAULT 0 ,
     likes INTEGER NOT NULL DEFAULT 0 ,
     loves INTEGER NOT NULL DEFAULT 0 ,
     awards INTEGER NOT NULL DEFAULT 0 ,
     bookmarks INTEGER NOT NULL DEFAULT 0
   );

4. เรียกใช้โครงการในพื้นที่:

   bun run dev

บันทึก

บางสิ่งอาจเสียหรือไม่พบเพราะสคริปต์ bun run setup จะลบไฟล์จำนวนมาก โปรดตรวจสอบรหัสและการใช้งานอีกครั้ง

การโคลนนิ่ง / ฟอร์ก

โปรดตรวจสอบใบอนุญาตอย่าคัดลอกโดยตรงลบเนื้อหาส่วนบุคคลและไฟล์ทั้งหมดของฉัน (เรซูเม่โพสต์บล็อกรูปภาพ ฯลฯ ) โดยเรียกใช้ bun run setup และโปรดเปลี่ยนสไตล์และสีให้ตรงกับแบรนด์ส่วนตัวของคุณ คุณมีอิสระที่จะใช้รหัสนี้เป็นแรงบันดาลใจหรือการอ้างอิงการเรียนรู้ แต่นี่ไม่ได้มีไว้เพื่อเป็นเทมเพลต

การเปลี่ยนแปลงเพิ่มเติม

ตรวจสอบให้แน่ใจว่าได้ตั้งค่าตัวแปรสภาพแวดล้อม IS_TEMPLATE เป็นเท็จ มิฉะนั้นสีในเว็บไซต์อาจกลับด้าน (ดู src/styles/globals.scss )

รุ่นก่อนหน้า

เวอร์ชันก่อนหน้าทั้งหมดของเว็บไซต์นี้สามารถดูได้ที่ jahirfiquitiva/prev-websites