整自己blog #1 基本架構

Programming

導覽

正文

機緣巧合下學左同工作完全冇關既野

今次講下呢個blog係點整出黎
個stack係Next.js + tailwind + strapi

第一篇簡單介紹下3隻野分別係咩黎

nextjs:

超強大既web framework，可以frontend 同backend 一齊寫冇呢隻野之前係普遍係用node.js 做backend，react做frontend

tailwind:

方便既css styling library，唔用呢隻野既話去寫css係極煩例如唔用tailwind想寫一個咁樣既component既話

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Tailwind版

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

可以見到用tailwind既話慳左好多行code
同時亦方便developer 寫blog果陣唔駛styling css同code 之間換黎換去

strapi

headless content management system (cms)
點解叫headless 因為佢係suppose冇front end
佢既主要用途係有api 提供資料俾frontend

下一篇會講下infra

Back to Programming