Update manifesto page (#227)

* Update manifesto page

* Fix eslint issues

frontend/eslint.config.js

@@ -2,9 +2,9 @@ import stylistic from "@stylistic/eslint-plugin";
 import pluginImport from "eslint-plugin-import";
 import jsxA11y from "eslint-plugin-jsx-a11y";
 import pluginReact from "eslint-plugin-react";
+import pluginReactHooks from "eslint-plugin-react-hooks";
 import pluginSortDestructureKeys from "eslint-plugin-sort-destructure-keys";
 import pluginTypescriptSortKeys from "eslint-plugin-typescript-sort-keys";
-import pluginReactHooks from "eslint-plugin-react-hooks";
 import globals from "globals";
 import typescriptEslint from "typescript-eslint";
 
@@ -107,6 +107,7 @@ export default [
     rules: {
       "@typescript-eslint/consistent-type-definitions": ["error", "type"],
       "@typescript-eslint/no-explicit-any": 0,
+      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
     },
   },
 

frontend/package.json

@@ -23,14 +23,15 @@
     "dayjs": "^1.11.13",
     "express": "^5.0.1",
     "framer-motion": "^11.15.0",
+    "highlight.js": "^11.11.1",
     "lodash-es": "^4.17.21",
+    "markdown-to-jsx": "^7.7.3",
     "md5": "^2.3.0",
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.7",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^5.0.0",
     "react-hook-form": "^7.54.2",
-    "react-markdown": "^9.0.1",
     "sass-embedded": "^1.83.1",
     "sirv": "^3.0.0",
     "swr": "^2.3.0",

frontend/src/@types/markdown.d.ts

@@ -0,0 +1,5 @@
+type Markdown = {
+  content: string;
+  path?: string;
+  type?: "blogPost" | "docsArticle";
+};

frontend/src/components/Description/index.tsx

@@ -0,0 +1,11 @@
+export type DescriptionProps = {
+  children: string;
+};
+
+export default function Description({ children }: DescriptionProps) {
+  return (
+    <>
+      <meta content={children} name="description" />
+    </>
+  );
+}

frontend/src/components/Manifesto/Manifesto.module.scss

@@ -0,0 +1,12 @@
+@import "base";
+
+.manifesto {
+  h1:global(#poeticmetrics-vision) {
+    font-size: map-get($display-font-sizes, 4);
+  }
+
+  h3:global(#building-a-better-web) {
+    font-size: map-get($font-sizes, 4);
+    margin-block-end: 0;
+  }
+}

frontend/src/components/Manifesto/index.tsx

@@ -1,12 +1,24 @@
+import classNames from "classnames";
+import Description from "~/components/Description";
 import Markdown from "~/components/Markdown";
-import content from "./manifesto.md?raw";
+import Title from "~/components/Title";
+import markdown from "./manifesto.md?raw";
+import styles from "./Manifesto.module.scss";
 
 export default function Manifesto() {
   return (
-    <div className="container">
-      <div className="mx-auto mw-50rem">
-        <Markdown content={content} />
+    <>
+      <Title>Manifesto</Title>
+      <Description>
+        Discover the principles that guide PoeticMetric. Our privacy-first approach, commitment to transparency, dedication to
+        sustainability, and focus on efficiency set us apart in the analytics industry. Read our manifesto now.
+      </Description>
+
+      <div className="container py-32">
+        <div className="mx-auto mw-50rem">
+          <Markdown className={classNames("fs-5 lh-lg", styles.manifesto)}>{markdown}</Markdown>
+        </div>
       </div>
-    </div>
+    </>
   );
 }

frontend/src/components/Markdown/Alert/index.tsx

@@ -0,0 +1,37 @@
+import { IconAlertTriangle, IconBulb, TablerIcon } from "@tabler/icons-react";
+import classNames from "classnames";
+import { Children, cloneElement, createElement, isValidElement, JSX, PropsWithoutRef, ReactElement, ReactNode, useMemo } from "react";
+import Anchor, { AnchorProps } from "~/components/Markdown/Anchor";
+
+export type AlertProps = Overwrite<PropsWithoutRef<JSX.IntrinsicElements["div"]>, {
+  variant: "primary" | "warning";
+}>;
+
+const VariantIcons: Record<AlertProps["variant"], TablerIcon> = {
+  primary: IconBulb,
+  warning: IconAlertTriangle,
+};
+
+export default function Alert({ children: childrenFromProps, className, variant = "primary", ...props }: AlertProps) {
+  const children = useMemo<ReactNode>(() => {
+    return Children.map(childrenFromProps, (child) => {
+      if (isAnchor(child)) {
+        return cloneElement(child, { ...child.props, className: classNames(child.props.className, "alert-link") });
+      }
+
+      return child;
+    });
+  }, [childrenFromProps]);
+
+  return (
+    <div {...props} className={classNames("align-items-center alert d-flex flex-row gap-6 lh-base", `alert-${variant}`, className)}>
+      {createElement(VariantIcons[variant], { className: "flex-shrink-0" })}
+
+      <div>{Children.map(children, (child) => child)}</div>
+    </div>
+  );
+}
+
+function isAnchor(child: ReactNode): child is ReactElement<AnchorProps> {
+  return isValidElement(child) && child.type === Anchor;
+}

frontend/src/components/Markdown/Anchor/index.tsx

@@ -0,0 +1,10 @@
+import { JSX, PropsWithoutRef } from "react";
+import { Link } from "wouter";
+
+export type AnchorProps = PropsWithoutRef<JSX.IntrinsicElements["a"]>;
+
+export default function Anchor({ href, ...props }: AnchorProps) {
+  return (
+    <Link target={href?.startsWith("http") ? "_blank" : undefined} to={href || ""} {...props} />
+  );
+}

frontend/src/components/Markdown/Blockquote/Blockquote.module.scss

@@ -0,0 +1,20 @@
+@import "base";
+
+.blockquote {
+  &::before, &::after {
+    background-color: var(--#{$prefix}primary);
+    content: "";
+    height: calc(50% - 14px);
+    left: 0;
+    position: absolute;
+    width: 4px;
+  }
+
+  &::before {
+    top: 0;
+  }
+
+  &::after {
+    bottom: 0;
+  }
+}

frontend/src/components/Markdown/Blockquote/index.tsx

@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import { JSX, PropsWithoutRef } from "react";
+import styles from "./Blockquote.module.scss";
+
+export type BlockquoteProps = PropsWithoutRef<JSX.IntrinsicElements["blockquote"]>;
+
+export default function Blockquote({ children, className, ...props }: BlockquoteProps) {
+  return (
+    <blockquote
+      {...props}
+      className={classNames(
+        "font-serif fs-5 fst-italic fw-medium lh-base position-relative pe-8 ps-16 py-8",
+        styles.blockquote,
+        className,
+      )}
+    >
+      <div className="fs-2 mt-3 position-absolute start-0 top-50 text-primary translate-middle">&ldquo;</div>
+
+      {children}
+    </blockquote>
+  );
+}