[examples][m]: stub 2 examples for #346 (wordpress to markdown) and #292

 (fonts and colors).

examples/fonts-and-colors/.flowershow/.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "extends": [
+    "plugin:@nrwl/nx/react",
+    "next",
+    "next/core-web-vitals",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": [".obsidian/**/*", ".next/**/*", "out/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": [
+          "error",
+          "packages/template/pages"
+        ],
+        "react/no-unescaped-entities": "warn"
+      }
+    }
+  ],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off"
+  },
+  "env": {
+    "jest": true
+  }
+}

examples/fonts-and-colors/.flowershow/README.md

@@ -0,0 +1,5 @@
+# Flowershow default template
+
+Flowershow default app template. Uses Next.js with Tailwind and MDX.
+
+To learn more how to create and customize your Flowershow website check our docs at https://flowershow.app/docs

examples/fonts-and-colors/.flowershow/components/BaseLink.jsx

@@ -0,0 +1,15 @@
+import Link from "next/link";
+import { forwardRef } from "react";
+
+const BaseLink = forwardRef((props, ref) => {
+  const { href, children, ...rest } = props;
+  return (
+    <Link href={href} ref={ref} {...rest}>
+      {children}
+    </Link>
+  );
+});
+
+BaseLink.displayName = "BaseLink";
+
+export { BaseLink };

examples/fonts-and-colors/.flowershow/components/BlogItem.jsx

@@ -0,0 +1,31 @@
+import { Card } from "@/components/Card";
+import { formatDate } from "@/lib/formatDate";
+
+export function BlogItem({ blog }) {
+  return (
+    <article className="md:grid md:grid-cols-4 md:items-baseline">
+      <Card className="md:col-span-3">
+        <Card.Title href={`${blog.url_path}`}>{blog.title}</Card.Title>
+        <Card.Eyebrow
+          as="time"
+          dateTime={blog.created}
+          className="md:hidden"
+          decorate
+        >
+          {formatDate(blog.created)}
+        </Card.Eyebrow>
+        {blog.description && (
+          <Card.Description>{blog.description}</Card.Description>
+        )}
+        <Card.Cta>Read article</Card.Cta>
+      </Card>
+      <Card.Eyebrow
+        as="time"
+        dateTime={blog.created}
+        className="mt-1 hidden md:block"
+      >
+        {formatDate(blog.created)}
+      </Card.Eyebrow>
+    </article>
+  );
+}

examples/fonts-and-colors/.flowershow/components/BlogsList.jsx

@@ -0,0 +1,35 @@
+import { BlogItem } from "@/components/BlogItem.jsx";
+import { useState } from "react";
+
+const BLOGS_LOAD_COUNT = 10;
+
+export function BlogsList({ blogs }) {
+  const [blogsCount, setBlogsCount] = useState(BLOGS_LOAD_COUNT);
+
+  const handleLoadMore = () => {
+    setBlogsCount((prevCount) => prevCount + BLOGS_LOAD_COUNT);
+  };
+
+  return (
+    <>
+      <div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
+        <div className="flex flex-col space-y-16">
+          {blogs.slice(0, blogsCount).map((blog) => {
+            return <BlogItem key={blog.url_path} blog={blog} />;
+          })}
+        </div>
+      </div>
+      {blogs.length > blogsCount && (
+        <div className="text-center pt-20">
+          <button
+            onClick={handleLoadMore}
+            type="button"
+            className="inline-flex items-center rounded border border-gray-300 px-2.5 py-1.5 text-xs font-medium text-gray-200 shadow-sm hover:bg-gray-50/10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          >
+            Show more
+          </button>
+        </div>
+      )}
+    </>
+  );
+}

examples/fonts-and-colors/.flowershow/components/Card.jsx

@@ -0,0 +1,86 @@
+// import Link from 'next/link'
+import clsx from "clsx";
+import { ChevronRightIcon } from "@/components/ChevronRightIcon.jsx";
+
+export function Card({ as: Component = "div", className, children }) {
+  return (
+    <Component
+      className={clsx(className, "group relative flex flex-col items-start")}
+    >
+      {children}
+    </Component>
+  );
+}
+
+Card.Link = function CardLink({ children, ...props }) {
+  // <Link {...props}>
+  //   <span className="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+  //   <span className="relative z-10">{children}</span>
+  // </Link>
+  return (
+    <>
+      <div className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-slate-800/75 sm:-inset-x-6 sm:rounded-2xl" />
+      <a {...props}>
+        <span className="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+        <span className="relative z-10">{children}</span>
+      </a>
+    </>
+  );
+};
+
+Card.Title = function CardTitle({ as: Component = "h2", href, children }) {
+  return (
+    <Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+      {href ? <Card.Link href={href}>{children}</Card.Link> : children}
+    </Component>
+  );
+};
+
+Card.Description = function CardDescription({ children }) {
+  return (
+    <p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+      {children}
+    </p>
+  );
+};
+
+Card.Cta = function CardCta({ children }) {
+  return (
+    <div
+      aria-hidden="true"
+      className="relative z-10 mt-4 flex items-center text-sm font-medium text-teal-500"
+    >
+      {children}
+      <ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" />
+    </div>
+  );
+};
+
+Card.Eyebrow = function CardEyebrow({
+  as: Component = "p",
+  decorate = false,
+  className,
+  children,
+  ...props
+}) {
+  return (
+    <Component
+      className={clsx(
+        className,
+        "relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500",
+        decorate && "pl-3.5"
+      )}
+      {...props}
+    >
+      {decorate && (
+        <span
+          className="absolute inset-y-0 left-0 flex items-center"
+          aria-hidden="true"
+        >
+          <span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+        </span>
+      )}
+      {children}
+    </Component>
+  );
+};

examples/fonts-and-colors/.flowershow/components/ChevronRightIcon.jsx

@@ -0,0 +1,12 @@
+export function ChevronRightIcon(props) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}>
+      <path
+        d="M6.75 5.75 9.25 8l-2.5 2.25"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

examples/fonts-and-colors/.flowershow/components/Container.jsx

@@ -0,0 +1,42 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+
+const OuterContainer = forwardRef(function OuterContainer(
+  { className, children, ...props },
+  ref
+) {
+  return (
+    <div ref={ref} className={clsx("sm:px-8", className)} {...props}>
+      <div className="mx-auto max-w-5xl lg:px-8">{children}</div>
+    </div>
+  );
+});
+
+const InnerContainer = forwardRef(function InnerContainer(
+  { className, children, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={clsx("relative px-4 sm:px-8 lg:px-12", className)}
+      {...props}
+    >
+      <div className="mx-auto max-w-2xl lg:max-w-5xl">{children}</div>
+    </div>
+  );
+});
+
+export const Container = forwardRef(function Container(
+  { children, ...props },
+  ref
+) {
+  return (
+    <OuterContainer ref={ref} {...props}>
+      <InnerContainer>{children}</InnerContainer>
+    </OuterContainer>
+  );
+});
+
+Container.Outer = OuterContainer;
+Container.Inner = InnerContainer;