first init

.gitignore

@@ -0,0 +1,11 @@
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# Fresh build directory
+_fresh/
+# npm dependencies
+node_modules/

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "denoland.vscode-deno",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "deno.enable": true,
+  "deno.lint": true,
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ]
+}

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

README.md

@@ -0,0 +1,16 @@
+# Fresh project
+
+Your new Fresh project is ready to go. You can follow the Fresh "Getting
+Started" guide here: https://fresh.deno.dev/docs/getting-started
+
+### Usage
+
+Make sure to install Deno: https://deno.land/manual/getting_started/installation
+
+Then start the project:
+
+```
+deno task start
+```
+
+This will watch the project directory and restart as necessary.

components/PostCard.tsx

@@ -0,0 +1,24 @@
+import { Post } from "@/utils/posts.ts";
+
+export default function PostCard(props: { post: Post }) {
+  const { post } = props;
+  return (
+    <div class="py-8 border(t gray-200)">
+      <a class="sm:col-span-2" href={`/${post.slug}`}>
+        <h3 class="text(3xl gray-900) font-bold">
+          {post.title}
+        </h3>
+        <time class="text-gray-500">
+          {new Date(post.publishedAt).toLocaleDateString("en-us", {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </time>
+        <div class="mt-4 text-gray-900">
+          {post.snippet}
+        </div>
+      </a>
+    </div>
+  );
+}

deno.json

@@ -0,0 +1,43 @@
+{
+  "lock": false,
+  "tasks": {
+    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
+    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
+    "manifest": "deno task cli manifest $(pwd)",
+    "start": "deno run -A --watch=static/,routes/ dev.ts",
+    "build": "deno run -A dev.ts build",
+    "preview": "deno run -A main.ts",
+    "update": "deno run -A -r https://fresh.deno.dev/update ."
+  },
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ],
+  "imports": {
+    "$fresh/": "https://deno.land/x/fresh@1.7.3/",
+    "@deno/gfm": "jsr:@deno/gfm@^0.10.0",
+    "@std/encoding": "jsr:@std/encoding@^1.0.5",
+    "@std/front-matter": "jsr:@std/front-matter@^1.0.5",
+    "preact": "https://esm.sh/preact@10.22.0",
+    "preact/": "https://esm.sh/preact@10.22.0/",
+    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
+    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
+    "tailwindcss": "npm:tailwindcss@3.4.1",
+    "tailwindcss/": "npm:/tailwindcss@3.4.1/",
+    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",
+    "$std/": "https://deno.land/std@0.216.0/",
+    "@/": "./"
+  },
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "nodeModulesDir": "auto"
+}

dev.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env -S deno run -A --watch=static/,routes/
+
+import dev from "$fresh/dev.ts";
+import config from "./fresh.config.ts";
+
+import "$std/dotenv/load.ts";
+
+await dev(import.meta.url, "./main.ts", config);

fresh.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "$fresh/server.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
+
+export default defineConfig({
+  plugins: [tailwind()],
+});

fresh.gen.ts

@@ -0,0 +1,23 @@
+// DO NOT EDIT. This file is generated by Fresh.
+// This file SHOULD be checked into source version control.
+// This file is automatically updated during development when running `dev.ts`.
+
+import * as $_slug_ from "./routes/[slug].tsx";
+import * as $_404 from "./routes/_404.tsx";
+import * as $_app from "./routes/_app.tsx";
+import * as $index from "./routes/index.tsx";
+
+import type { Manifest } from "$fresh/server.ts";
+
+const manifest = {
+  routes: {
+    "./routes/[slug].tsx": $_slug_,
+    "./routes/_404.tsx": $_404,
+    "./routes/_app.tsx": $_app,
+    "./routes/index.tsx": $index,
+  },
+  islands: {},
+  baseUrl: import.meta.url,
+} satisfies Manifest;
+
+export default manifest;

main.ts

@@ -0,0 +1,13 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
+
+import "$std/dotenv/load.ts";
+
+import { start } from "$fresh/server.ts";
+import manifest from "./fresh.gen.ts";
+import config from "./fresh.config.ts";
+
+await start(manifest, config);

posts/hello.md

@@ -0,0 +1,7 @@
+---
+title: This is my first blog post!
+published_at: 2022-11-04T15:00:00.000Z
+snippet: This is an excerpt of my first blog post.
+---
+
+Hello, world!

posts/relearn_react_01.md

@@ -0,0 +1,110 @@
+---
+title: Relearn React 01
+published_at: 2024-11-04T15:00:00.000Z
+snippet: Relearning React from react.dev
+---
+
+I'm relearning React from the official React documentation at [react.dev](https://react.dev). This official documentation is a great resource for learning React.
+
+I'm keeping use React in the past 5 years, from class based components to functional components with hooks, from JavaScript to TypeScript. Recently, I found that this official documentation is so good that I still can learn a lot from it. It has a lot of references of the best practices, it also has a lot of pitfalls and deep dive topics that I didn't know before. I could say this is a hidden gem for me.
+
+I will write down my learning notes here, share with you and hope you can learn something from the documentation as well.
+
+## From "Your Frist Component"
+
+The first section of the documentation is "Your First Component". It's a simple introduction to React.
+
+### export in modern JavaScript and Node.js
+
+In my past projects, I used ESM as default module system, because some JavaScript tools like Webpack, Babel and Vite support ESM out of the box. But in my Node.js project, I still use CommonJS because it's the default module system in Node.js. In recent days, there are some changes in Node.js, it supports ESM as well. And newer JavaScript tools like Deno and Bun are using ESM as default module system. So I think it's time to switch to ESM in my Node.js project.
+
+## Importing and Exporting Components
+
+This section is talking about how to import and export components in React. I think the aurthor is trying to let us know:
+
+- React applications are made up of components.
+- Components are reusable and can be nested inside other components.
+- Components can be imported and exported.
+- Components can be defined in the same file or in separate files.
+
+### Why separate components?
+
+> This lets you keep your files easy to scan and reuse components in more places.
+
+## Pitfalls
+
+### React components and functions
+
+> React components are regular JavaScript functions, but their names must start with a capital letter or they won’t work!
+
+This is a common sense in React.
+
+### Parentheses in JavaScript
+
+> Without parentheses, any code on the lines after return will be ignored!
+
+Maybe this one is a common pitfall in JavaScript?
+
+```javascript
+function getObject() {
+  return;
+  {
+    key: "value";
+  }
+}
+```
+
+The code above will return `undefined` because the JavaScript engine will insert a semicolon after `return`, so the code after `return` will be ignored.
+
+```javascript
+function getObject() {
+  return; // <- JavaScript inserts a semicolon here
+  {
+    key: "value";
+  }
+}
+```
+
+### Nest components
+
+> Components can render other components, but you must never nest their definitions:
+>
+> ```javascript
+> export default function Gallery() {
+>  // 🔴 Never define a component inside another component!
+>  function Profile() {
+>    // ...
+>  }
+>  // ...
+> }
+>
+> export default function Gallery() {
+>  // ...
+> }
+>
+> // ✅ Declare components at the top level
+> function Profile() {
+>  // ...
+> }
+> ```
+>
+> When a child component needs some data from a parent, pass it by props instead of nesting definitions.
+
+## Deep dives
+
+### Components all the way down
+
+React application, in essence, is a tree of components. Each component is a tree of components. This is a very important concept in React. And there is a root component in the tree, it's the entry point of the application, like `pages/index.js` in Next.js.
+
+Some websites only use React for a small part of the page, like a comment form or a search bar. In this case, you can use React components in a non-React website. You can use `ReactDOM.render()` to render a React component in a non-React website.
+
+### Default vs named exports
+
+init a markdown table
+
+| Syntax         | Export Statement                           | Import Statement                               |
+| -------------- | ------------------------------------------ | ---------------------------------------------- |
+| Default export | `export default function MyComponent() {}` | `import MyComponent from './MyComponent';`     |
+| Named export   | `export function MyComponent() {}`         | `import { MyComponent } from './MyComponent';` |
+
+We can rename a default export directly by assigning it any name when importing. For named exports, we can rename them using the `as` keyword.