rebuilt: remove tailwindcss

xihale · Apr 4, 2024 · 1e7b37d · 1e7b37d
1 parent cb09a0b
commit 1e7b37d
Show file tree

Hide file tree

Showing 17 changed files with 257 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,34 @@
-## Why
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-1. Just for practice and fun.
-2. Use blog to collect seems like too waste
+## Getting Started
 
-## todo
+First, run the development server:
 
-- [ ] commits for poems
-  my wish is use <N> to highlight the footnote.
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
 
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-## Usage
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-Just fill public/text with `[number].txt` which is your poem.
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/bun.lockb b/bun.lockb
diff --git a/next.config.js b/next.config.js
@@ -1,10 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
-
-  output: 'export',
-  distDir: 'build',
-}
+const nextConfig = {}
 
 module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -12,14 +12,12 @@
     "@types/node": "20.12.4",
     "@types/react": "18.2.74",
     "@types/react-dom": "18.2.24",
-    "autoprefixer": "10.4.19",
     "eslint": "8.57.0",
     "eslint-config-next": "14.1.4",
     "next": "14.1.4",
-    "postcss": "8.4.38",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.4.3",
+    "sass": "^1.74.1",
     "typescript": "5.4.3"
   }
 }
diff --git a/src/apis/getPoems.ts b/src/apis/getPoems.ts
@@ -3,12 +3,12 @@ import fs from "node:fs"
 
 export default function getPoems(){
 
-  let poemIds = fs.readdirSync("public/text").map((f)=>parseInt(f.split(".")[0])).sort((a,b)=>a-b);
+  let poemIds = fs.readdirSync("src/text").map((f)=>parseInt(f.split(".")[0])).sort((a,b)=>a-b);
 
   let poems:PoemBrief[] = [];
 
   poemIds.forEach(id => {
-    let content = fs.readFileSync("public/text/"+id+".txt").toString();
+    let content = fs.readFileSync("src/text/"+id+".txt").toString();
     let meta = content.slice(0, content.indexOf("\n")).split('|');
     poems.push({
       id: id,

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,3 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+body{
+  overflow: hidden;
+  margin: 0;
+}
+
+a{
+  color: inherit;
+  text-decoration: inherit;
+  cursor: default;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 
-import PoemList from '../components/PoemList'
+import PoemList from '../ui/PoemList'
 import './globals.css'
 import type { Metadata } from 'next'
 
@@ -18,7 +18,7 @@ export default function RootLayout({
       <head>
         <link rel="icon" href="/favicon.png" />
       </head>
-      <body className="overflow-hidden">
+      <body>
         <PoemList></PoemList>
         {children}
       </body>

diff --git a/src/app/poem/[id]/page.module.scss b/src/app/poem/[id]/page.module.scss
@@ -0,0 +1,57 @@
+.container{
+  // h-screen w-screen overflow-auto
+  height: 100vh;
+  width: 100vw;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.poem{
+  position: relative;
+  z-index: 10;
+  top: 0;
+  width: 50%;
+  min-width: 40rem;
+  background: #ffffed;
+  margin: auto;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
+  outline: dashed;
+  outline-width: 2px;
+  outline-offset: -2px;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+
+  .meta{
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: baseline;
+    font-weight: bold;
+
+    .title{
+      font-size: 3rem;
+      margin-right: 2rem;
+    }
+  }
+
+  .content{
+    // mt-5 mb-1 text-xl
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+  }
+
+
+}
+
+
+.back{
+  z-index: 1;
+  background: #00000045;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+}
diff --git a/src/app/poem/[id]/page.tsx b/src/app/poem/[id]/page.tsx
@@ -3,9 +3,11 @@ import Link from "next/link";
 
 import fs from "node:fs"
 
+import styles from "./page.module.scss";
+
 export default function Poem({ params }: { params: { id:number } }) {
 
-  let content = fs.readFileSync( process.cwd() + `/public/text/${params.id}.txt`).toString();
+  let content = fs.readFileSync( process.cwd() + `/src/text/${params.id}.txt`).toString();
   let br = content.indexOf('\n');
   let meta = content.slice(0, br).split('|');
   let poem:Poem = {
@@ -14,14 +16,14 @@ export default function Poem({ params }: { params: { id:number } }) {
     content: content.slice(br + 2),
   };
 
-  return <div className="h-screen w-screen overflow-auto">
-    <Link href="/" className="cursor-default"><div className="z-0 bg-[#00000045] fixed w-screen h-screen top-0"></div></Link>
-    <div className="relative z-10 top-0 w-1/2 min-w-[40rem] bg-[#ffffed] m-auto p-5 rounded shadow-2xl mb-20 mt-20 outline-dashed">
-      <div className="flex flex-row justify-between items-baseline font-bold">
-        <div className="text-3xl">{poem.title}</div>
+  return <div className={styles.container}>
+    <Link href="/"><div className={styles.back}></div></Link>
+    <div className={styles.poem}>
+      <div className={styles.meta}>
+        <div className={styles.title}>{poem.title}</div>
         <div>{poem.extra}</div>
       </div>
-      <div className="mt-5 mb-1 text-xl">
+      <div className={styles.content}>
         {poem.content.split('\n').map((line) => (<>{line}<br/></>))}
       </div>
     </div>

diff --git a/src/components/PoemList.tsx b/src/components/PoemList.tsx
diff --git a/public/text/0.txt → src/text/0.txt b/public/text/0.txt → src/text/0.txt
@@ -1,4 +1,4 @@
-刺刀与风|2024.4.3 18:49
+刺刀与风|4.3
 
 刺刀刺入我的身躯， 
 血， 

diff --git a/public/text/1.txt → src/text/1.txt b/public/text/1.txt → src/text/1.txt
@@ -1,4 +1,4 @@
-雨与磁针|2024.4.3 17:49
+雨与磁针|4.3
 
 乌云密布，随风飘浮。
 地上也是微风不断。

diff --git a/src/text/2.txt b/src/text/2.txt
@@ -0,0 +1,67 @@
+刺刀与甲|4.4
+
+狂风不断，
+血，
+不断地涌出，
+的确不是动脉。
+
+刺刀贯穿整个身躯，
+有的人就这样倒下。
+
+然，
+今狂风相助。
+
+拔出这刺刀！
+让血流得更猛烈些！
+
+我的血终将凝固！
+它们终将，
+形成一道，
+无比坚硬的甲。
+让那刺刀再难，
+如此轻易地，
+刺伤我。
+
+狂风不断，
+有的人就这样倒下，
+他们以为是狂风的错。
+而我认为是刺刀的错。
+
+我仰天而笑，
+啊！刺刀啊，
+你们这些刺刀啊，
+尽管来吧！
+“杀不死我的，终将使我更加强大。”
+我已然掌握进化的力量，
+我的甲愈来愈强大，
+这是我的血换来的。
+而你们，
+很快就将葬身狂风！
+
+
+狂风不断地吹，
+我的血液终将凝固。
+直到最后一滴。
+
+反反复复，
+甲敌不过他们。
+他们的进攻太过频繁？
+还是我的甲始终不够？
+
+不，
+显然易见的。
+他们早已经不是原来的刺刀，
+而那狂风还是原来的狂风，
+我的血也还是原来的血，
+
+是啊，
+那刺刀上面，
+为什么会有火药？
+原来是这样，
+他们在我们身体里面爆炸！
+
+我敌不过他们，
+我的血敌不过他们。
+
+他们究竟为什么刺伤我们？
+我们究竟怎样才可挡下那些刺刀？
diff --git a/src/ui/PoemList.module.scss b/src/ui/PoemList.module.scss
@@ -0,0 +1,47 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  position: fixed;
+  overflow-x: auto;
+}
+
+.card {
+  width: 20rem;
+  height: 30%;
+  margin: 1.25rem;
+  padding: 1.25rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
+  background-color: #ffffed;
+
+  display: flex;
+  flex-direction: column;
+
+  &:hover {
+    outline-style: dashed;
+  }
+
+  .meta{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+    font-weight: 700;
+    line-height: 2.25rem;
+
+    .title{
+      font-size: 1.875rem;
+      margin-right: 1rem;
+    }
+  }
+
+  .brief{
+    overflow: hidden;
+    flex: 1 1 auto;
+    padding-top: 0.5rem;
+  }
+
+}
diff --git a/src/ui/PoemList.tsx b/src/ui/PoemList.tsx
@@ -0,0 +1,27 @@
+import getPoems from "@/apis/getPoems"
+
+import styles from  "./PoemList.module.scss"
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+export default function PoemList(){
+
+  let poems = getPoems();
+
+  return <>
+    <div className={styles.container}>
+      {poems.map((d)=>
+        <Link href={`/poem/${d.id}`} key={d.id} className={styles.card}>
+          <div className={styles.meta}>
+            <div className={styles.title}>{d.title}</div>
+            <div>{d.extra}</div>
+          </div>
+          <div className={styles.brief}>
+            {d.brief.map((b,i)=>(<span key={i}>{b}<br/></span>))}
+          </div>
+          <span>......</span>
+        </Link>
+      )}
+    </div>
+  </>
+}