feat: add blog

2023-02-28 14:07:59 +01:00 · 2023-02-28 14:07:59 +01:00 · 92a08aca83
commit 92a08aca83
parent 3a68df6fd0
26 changed files with 1469 additions and 5205 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -1,3 +0,0 @@
-{
-  "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node"]
-}
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,11 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
-    schedule:
-      interval: "daily"
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@ -1,72 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ "main" ]
-  schedule:
-    - cron: '* * * * *'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        
-        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
-
-        
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-
-    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
-
-    # - run: |
-    #   echo "Run, Build Application using script"
-    #   ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
--- a/.gitignore
+++ b/.gitignore
@ -1,8 +1,8 @@
 node_modules

-.cache
-build
-public/build
+/.cache
+/build
+/public/build
 .env

-app/styles.css
+app/tailwind.css
--- a/9
+++ b/9
@ -1,9 +0,0 @@
-FROM node:16
-
-COPY . /src
-WORKDIR /src
-
-RUN npm install && npm run build
-
-CMD ["npm", "run", "start"]
-
--- a/README.md
+++ b/README.md
@ -1,3 +1,53 @@
-# yaaaw.it
+# Welcome to Remix!

-My personal website made with [Remix.run](https://remix.run) 🚀.
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+From your terminal:
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`
+
+### Using a Template
+
+When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
+
+```sh
+cd ..
+# create a new project, and pick a pre-configured host
+npx create-remix@latest
+cd my-new-remix-app
+# remove the new project's app (not the old one!)
+rm -rf app
+# copy your app over
+cp -R ../my-old-remix-app/app app
+```
--- a/app/entry.client.tsx
+++ b/app/entry.client.tsx
@ -1,4 +1,22 @@
 import { RemixBrowser } from "@remix-run/react";
-import { hydrate } from "react-dom";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";

-hydrate(<RemixBrowser />, document);
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>
+    );
+  });
+}
+
+if (typeof requestIdleCallback === "function") {
+  requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1);
+}
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@ -1,6 +1,11 @@
+import { PassThrough } from "stream";
 import type { EntryContext } from "@remix-run/node";
+import { Response } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
-import { renderToString } from "react-dom/server";
+import isbot from "isbot";
+import { renderToPipeableStream } from "react-dom/server";
+
+const ABORT_DELAY = 5000;

 export default function handleRequest(
  request: Request,
@ -8,14 +13,99 @@ export default function handleRequest(
  responseHeaders: Headers,
  remixContext: EntryContext
 ) {
-  let markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
+  return isbot(request.headers.get("user-agent"))
+    ? handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      )
+    : handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
      );
+}
+
+function handleBotRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return new Promise((resolve, reject) => {
+    let didError = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onAllReady() {
+          const body = new PassThrough();

          responseHeaders.set("Content-Type", "text/html");

-  return new Response("<!DOCTYPE html>" + markup, {
-    status: responseStatusCode,
+          resolve(
+            new Response(body, {
              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
+
+function handleBrowserRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return new Promise((resolve, reject) => {
+    let didError = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onShellReady() {
+          const body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(err: unknown) {
+          reject(err);
+        },
+        onError(error: unknown) {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
  });
 }
--- a/app/root.tsx
+++ b/app/root.tsx
@ -1,5 +1,6 @@
-import type { MetaFunction } from "@remix-run/node";
+import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import {
+  Link,
  Links,
  LiveReload,
  Meta,
@ -7,44 +8,56 @@ import {
  Scripts,
  ScrollRestoration,
 } from "@remix-run/react";
-import styles from "./styles.css";
+import stylesheet from "~/tailwind.css";
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesheet },
+];

 export const meta: MetaFunction = () => ({
  charset: "utf-8",
-  title: "Nullndr",
+  title: "nullndr",
  viewport: "width=device-width,initial-scale=1",
 });

-export function links() {
-  return [
-    {
-      rel: "stylesheet",
-      href: styles,
-    },
-    {
-      rel: "icon",
-      href: "/assets/favicon.png",
-      type: "image/png",
-    },
-  ];
-}
-
 export default function App() {
  return (
-    <html lang="en" className={"h-full bg-white"}>
+    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
-      <body
-        className={
-          "flex bg-[#202020] flex-col items-center justify-around justify-items-center w-[100vw] h-[100vh]"
-        }
-      >
+      <body className="bg-[#202020] text-[#d6d6d6] font-['monospace']">
        <Outlet />
        <ScrollRestoration />
        <Scripts />
-        {process.env.NODE_ENV === "development" && <LiveReload />}
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+
+export function CatchBoundary() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body className="bg-[#202020] text-[#d6d6d6] font-['monospace']">
+        <div className="flex flex-col items-center justify-around h-[100vh]">
+          <div>
+            <div className="text-center text-[#ffff00] text-[10vw] font-bold">
+              404
+            </div>
+            <div className="font-bold">Where do you think you are going?</div>
+            <div className="text-center">
+              <Link to="/" className="hover:text-[#e6c2bf]">
+                Home
+              </Link>
+            </div>
+          </div>
+        </div>
      </body>
    </html>
  );
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@ -0,0 +1,59 @@
+import { Link } from "@remix-run/react";
+import {
+  FaGithub,
+  FaGitlab,
+  FaKey,
+  FaLinkedin,
+  FaMastodon,
+  FaTelegramPlane,
+  FaTwitter,
+} from "react-icons/fa";
+import { MdEmail } from "react-icons/md";
+
+export default function Index() {
+  return (
+    <div className="flex flex-col items-center justify-around h-[100vh]">
+      <div>
+        <div className="text-center text-[6vw]">
+          <span>$ echo "Hello, world!"</span>
+          <span className="animate-blink">|</span>
+        </div>
+        <nav className="flex justify-center flex-wrap">
+          {/*
+           * The component `IconProvider.Provider` doesn't work very well.
+           * I dunno way but I'm too lazy to search for the cause.
+           */}
+          <a rel="me" href="https://mastodon.uno/@nullndr" className="p-2">
+            <FaMastodon color="yellow" size="3em" />
+          </a>
+          <a href="https://t.me/nullndr" className="p-2">
+            <FaTelegramPlane color="yellow" size="3em" />
+          </a>
+          <a href="https://gitlab.com/nullndr" className="p-2">
+            <FaGitlab color="yellow" size="3em" />
+          </a>
+          <a href="https://github.com/nullndr" className="p-2">
+            <FaGithub color="yellow" size="3em" />
+          </a>
+          <a href="https://twitter.com/nullndr" className="p-2">
+            <FaTwitter color="yellow" size="3em" />
+          </a>
+          <a href="mailto: nullndr@duck.com" className="p-2">
+            <MdEmail color="yellow" size="3em" />
+          </a>
+          <a href="https://linkedin.com/in/nullndr" className="p-2">
+            <FaLinkedin color="yellow" size="3em" />
+          </a>
+          <a href="/assets/pgpkey.pub" className="p-2">
+            <FaKey color="yellow" size="3em" />
+          </a>
+        </nav>
+        <div className="pt-10 flex flex-col items-center text-xl">
+          <Link to="/blog" className="hover:text-[#e6c2bf]">
+            Blog
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/routes/blog/Post.tsx
+++ b/app/routes/blog/Post.tsx
@ -0,0 +1,18 @@
+import { Link } from "@remix-run/react";
+
+type PostProps = {
+  title: string;
+  description?: string;
+  href: string;
+};
+
+export function Post({ title, description, href }: PostProps) {
+  return (
+    <div className="mt-10">
+      <Link to={href}>
+        <div className="text-[#ffff00] font-bold text-2xl">{title}</div>
+        <div className="italic text-xl">{description}</div>
+      </Link>
+    </div>
+  );
+}
--- a/app/routes/blog/PostsWrapper.tsx
+++ b/app/routes/blog/PostsWrapper.tsx
@ -0,0 +1,3 @@
+export function PostsWrapper({ children }: React.PropsWithChildren) {
+  return <div className="px-10">{children}</div>;
+}
--- a/app/routes/blog/route.tsx
+++ b/app/routes/blog/route.tsx
@ -0,0 +1,47 @@
+import { Link, useLoaderData } from "@remix-run/react";
+import { Post } from "./Post";
+import { PostsWrapper } from "./PostsWrapper";
+
+export const loader = async () => {
+  const posts: {
+    title: string;
+    description: string;
+    href: string;
+  }[] = [];
+
+  return posts;
+};
+
+export default function () {
+  const posts = useLoaderData<typeof loader>();
+  return (
+    <div className="h-max">
+      <div className="mx-10 mt-10">
+        <div className="flex flex-col items-center">
+          <div className="text-3xl">
+            <span>Here I blog about whatever get my attention</span>
+          </div>
+        </div>
+        <div className="mt-5 flex flex-col items-end">
+          <Link to="/" className="hover:text-[#e6c2bf] text-xl">
+            Home
+          </Link>
+        </div>
+      </div>
+      {posts.length > 0 ? (
+        <PostsWrapper>
+          {posts.map((post) => (
+            <Post {...post} />
+          ))}
+        </PostsWrapper>
+      ) : (
+        <div className="flex flex-col items-center">
+          <div className="text-[#ffff00] font-bold">
+            I haven't post anything yet! So here's a pic of my cat
+          </div>
+          <img src="/cat.jpg" />
+        </div>
+      )}
+    </div>
+  );
+}
--- a/app/routes/blog_.$id.tsx
+++ b/app/routes/blog_.$id.tsx
@ -0,0 +1,20 @@
+import { Link } from "@remix-run/react";
+
+export const loader = () => {
+  throw new Response(null, {
+    status: 404,
+  });
+};
+
+export default function () {
+  return (
+    <div className="m-5 h-max">
+      <div className="flex flex-col items-center text-[#ffff00] text-3xl font-bold">
+        foo
+      </div>
+      <div className="mt-10 flex flex-col items-end hover:text-[#e6c2bf] text-xl">
+        <Link to="/blog">Go back</Link>
+      </div>
+    </div>
+  );
+}
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@ -1,59 +0,0 @@
-import { IconContext } from "react-icons";
-import {
-  FaGithub,
-  FaGitlab,
-  FaKey,
-  FaLinkedin,
-  FaMastodon,
-  FaTelegramPlane,
-  FaTwitter,
-} from "react-icons/fa";
-import { MdEmail } from "react-icons/md";
-
-export default function Index() {
-  return (
-    <div className={"w-auto"}>
-      <div
-        className={"text-center text-[6vw] text-[#d6d6d6] font-['monospace']"}
-      >
-        <span>$ echo "Hello, world!" </span>
-        <span className={"animate-blink"}>|</span>
-      </div>
-      <div>
-        <nav className={"flex justify-center flex-wrap"}>
-          <IconContext.Provider
-            value={{
-              color: "yellow",
-              size: "3em",
-            }}
-          >
-            <a rel="me" href="https://mastodon.uno/@nullndr" className="p-2">
-              <FaMastodon />
-            </a>
-            <a href="https://t.me/nullndr" className="p-2">
-              <FaTelegramPlane />
-            </a>
-            <a href="https://gitlab.com/nullndr" className="p-2">
-              <FaGitlab />
-            </a>
-            <a href="https://github.com/nullndr" className="p-2">
-              <FaGithub />
-            </a>
-            <a href="https://twitter.com/nullndr" className="p-2">
-              <FaTwitter />
-            </a>
-            <a href="mailto: nullndr@duck.com" className="p-2">
-              <MdEmail />
-            </a>
-            <a href="https://linkedin.com/in/nullndr" className="p-2">
-              <FaLinkedin />
-            </a>
-            <a href="/assets/pgpkey.pub" className="p-2">
-              <FaKey />
-            </a>
-          </IconContext.Provider>
-        </nav>
-      </div>
-    </div>
-  );
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,37 +1,30 @@
 {
-  "name": "remix-template-remix",
  "private": true,
-  "description": "",
-  "license": "",
  "sideEffects": false,
  "scripts": {
-    "build": "npm run build:css && remix build",
-    "build:css": "tailwindcss -o ./app/styles.css",
-    "dev": "concurrently -p \"[{name}]\" -n \"tailwind,remix\" -c \"yellow.bold,red.bold\" \"npm:dev:css\" \"npm:dev:remix\"",
-    "dev:remix": "remix dev",
-    "dev:css": "tailwindcss -o ./app/styles.css --watch",
-    "start": "remix-serve build"
+    "build": "remix build",
+    "dev": "remix dev",
+    "start": "remix-serve build",
+    "typecheck": "tsc"
  },
  "dependencies": {
-    "@remix-run/node": "^1.11.0",
-    "@remix-run/react": "^1.11.0",
-    "@remix-run/serve": "^1.11.0",
+    "@code-hike/mdx": "^0.8.0",
+    "@remix-run/node": "^1.13.0",
+    "@remix-run/react": "^1.13.0",
+    "@remix-run/serve": "^1.13.0",
+    "isbot": "^3.6.5",
    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^4.7.1"
+    "react-dom": "^18.2.0"
  },
  "devDependencies": {
-    "@remix-run/dev": "^1.11.0",
-    "@remix-run/eslint-config": "^1.11.0",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.10",
-    "autoprefixer": "^10.4.8",
-    "concurrently": "^7.3.0",
-    "eslint": "^8.21.0",
-    "nodemon": "^2.0.19",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.1.8",
-    "typescript": "^4.7.4"
+    "@remix-run/dev": "^1.13.0",
+    "@remix-run/eslint-config": "^1.13.0",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.27.0",
+    "react-icons": "^4.7.1",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.8.4"
  },
  "engines": {
    "node": ">=14"
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
--- a/public/assets/pgpkey.pub
+++ b/public/assets/pgpkey.pub
@ -1,81 +0,0 @@
-----BEGIN PGP PUBLIC KEY BLOCK-----
-
-
-
-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
-
-OiSL3J58geEh8FWQ7RN0JJkxwLiyiYGEPGW7Qw==
-
-=m89h
-
-----END PGP PUBLIC KEY BLOCK-----
--- a/public/cat.jpg
+++ b/public/cat.jpg
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/remix.config.js
+++ b/remix.config.js
@ -1,10 +1,8 @@
-/**
- * @type {import('@remix-run/dev').AppConfig}
- */
+/** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
  ignoredRouteFiles: ["**/.*"],
-  // appDirectory: "app",
-  // assetsBuildDirectory: "public/build",
-  // serverBuildPath: "build/index.js",
-  // publicPath: "/build/",
+  future: {
+    unstable_tailwind: true,
+    v2_routeConvention: true,
+  },
 };
--- a/remix.env.d.ts
+++ b/remix.env.d.ts
@ -1,2 +1,2 @@
 /// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/node/globals" />
+/// <reference types="@remix-run/node" />
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
  content: ["./app/**/*.{ts,tsx}"],
  theme: {
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,5 +1,5 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "app/routes/blog_.$id.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "isolatedModules": true,
@ -9,12 +9,14 @@
    "resolveJsonModule": true,
    "target": "ES2019",
    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
-    "noEmit": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowJs": true
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
  }
 }