Init: First Commit

一个初始的版本

app/components/common/article/article.module.less

@@ -0,0 +1,37 @@
+.article {
+  line-height: 1.7;
+
+  > * {
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  pre {
+    tab-size: 4;
+    padding: 1em;
+    color: #fff;
+    overflow: auto;
+    border-radius: .75rem;
+    background-color: #333;
+  }
+
+  :not(pre) > code {
+    font-size: smaller;
+    padding: .15rem .5rem;
+    border-radius: .75rem;
+    background-color: rgb(165 243 252);
+  }
+
+  ul {
+    line-height: 2;
+    list-style: disc;
+    margin-left: 1.25rem;
+
+    ::marker {
+      color: rgb(244 114 182 / var(--tw-bg-opacity));
+    }
+  }
+}

app/components/common/article/index.tsx

@@ -0,0 +1,15 @@
+import { clsn } from "~/utils";
+import styles from "./article.module.less";
+
+interface ArticleProps {
+  className?: string;
+  html: string;
+}
+
+function Article({ className, html }: ArticleProps) {
+  return (
+    <article className={clsn(styles.article, className)} dangerouslySetInnerHTML={{ __html: html }} />
+  );
+}
+
+export default Article;

app/components/common/spinner.tsx

@@ -0,0 +1,9 @@
+import { useNavigation } from "@remix-run/react";
+
+export default function SpinnerBar() {
+  const navigation = useNavigation();
+
+  return navigation.state === "loading" ? (
+    <div className="spinner animate-spinner-bar h-1 z-20 fixed top-0 left-0 right-0 bg-orange-200" />
+  ) : null;
+}

app/components/layout/footer.tsx

@@ -0,0 +1,14 @@
+const { APP_SITENAME, APP_FOOTER_EXTRA } = import.meta.env; 
+
+function Footer() {
+  return (
+    <footer className="pb-12">
+      <div className="grid grid-cols-2 px-2 max-w-3xl mx-auto text-sm opacity-60">
+        <p>{`© ${new Date().getFullYear()} ${APP_SITENAME}`}</p>
+        {APP_FOOTER_EXTRA && <p className="text-right" dangerouslySetInnerHTML={{ __html: APP_FOOTER_EXTRA }} />}
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

app/components/layout/header.tsx

@@ -0,0 +1,31 @@
+import { Link, NavLink } from "@remix-run/react";
+
+const navItems = [
+  { name: "首页", to: "/" },
+  { name: "日记", to: "/note" },
+  { name: "相册", to: "/gallery" },
+  { name: "关于我", to: "/about" },
+];
+
+const inheritCls = "inline-block py-2 px-5";
+const activeCls = "inline-block py-2 px-5 bg-orange-200 text-pink-400 rounded-xl";
+
+function Header() {
+  return (
+    <header className="fixed top-0 left-0 right-0 bg-pink-400 text-white z-10">
+      <nav className="py-3 px-2">
+        {navItems.map((item) => (
+          <NavLink
+            key={item.name}
+            to={item.to}
+            className={({ isActive }) => isActive ? activeCls : inheritCls}
+          >
+            {item.name}
+          </NavLink>
+        ))}
+      </nav>
+    </header>
+  );
+}
+
+export default Header;