updates for blog for help and de

app/(static)/de/blog/[slug]/page.tsx

@@ -0,0 +1,126 @@
+import { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+import BlurImage from "@/components/blur-image";
+import { ContentBody } from "@/components/mdx/post-body";
+import TableOfContents from "@/components/mdx/table-of-contents";
+
+import { getPost, getPostsRemote as getPosts } from "@/lib/content/blog";
+import { constructMetadata, formatDate } from "@/lib/utils";
+
+export async function generateStaticParams() {
+  const posts = await getPosts();
+  return posts.map((post) => ({ slug: post?.data.slug }));
+}
+
+export const generateMetadata = async ({
+  params,
+}: {
+  params: {
+    slug: string;
+  };
+}): Promise<Metadata> => {
+  const post = (await getPosts()).find(
+    (post) => post?.data.slug === params.slug,
+  );
+  const { title, summary: description, image } = post?.data || {};
+
+  return constructMetadata({
+    title: `${title} - Papermark`,
+    description,
+    image,
+  });
+};
+
+export default async function BlogPage({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const post = await getPost(params.slug);
+  if (!post) return notFound();
+
+  return (
+    <>
+      <div className="mx-auto mb-10 w-full max-w-7xl px-4 md:px-8">
+        <div className="flex max-w-screen-sm flex-col space-y-4 pt-16">
+          <div className="flex items-center space-x-4">
+            <time dateTime={post.data.publishedAt} className="text-sm">
+              {formatDate(post.data.publishedAt)}
+            </time>
+          </div>
+          <h1 className="text-balance text-4xl md:text-6xl">
+            {post.data.title}
+          </h1>
+          <p className="text-xl text-gray-600">{post.data.summary}</p>
+
+          <div className="flex flex-col items-center space-x-4 self-start">
+            <Link
+              href={`https://www.linkedin.com/in/marcseitz/`}
+              className="group flex items-center space-x-3"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <BlurImage
+                src={`https://pbs.twimg.com/profile_images/1176854646343852032/iYnUXJ-m_400x400.jpg`}
+                alt={`Marc Seitz`}
+                width={40}
+                height={40}
+                className="rounded-full transition-all group-hover:brightness-90"
+              />
+              <div className="flex flex-col">
+                <p className="font-semibold text-gray-700">Marc Seitz</p>
+                <p className="text-sm text-gray-500">Linkedin</p>
+                {/* <p className="text-sm text-gray-500">@mfts0</p> */}
+              </div>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative">
+        <div className="mx-auto grid w-full max-w-7xl grid-cols-4 gap-10 px-4 py-10 md:px-8">
+          <div className="relative col-span-4 mb-10 flex flex-col space-y-8 bg-white sm:border-r sm:border-orange-500 md:col-span-3">
+            <div
+              data-mdx-container
+              className="prose prose-headings:font-medium prose-h2:mb-2 prose-h2:mt-10 first:prose-h2:mt-0 sm:max-w-screen-md sm:pr-2 md:pr-0"
+            >
+              <ContentBody>{post.body}</ContentBody>
+            </div>
+          </div>
+
+          <div className="sticky top-14 col-span-1 hidden flex-col divide-y divide-gray-200 self-start sm:flex">
+            <div className="flex flex-col space-y-4">
+              <TableOfContents items={post.toc} />
+            </div>
+          </div>
+
+          {/* <div className="sticky top-14 col-span-1 hidden flex-col divide-y divide-gray-200 self-start sm:flex">
+            <div className="flex flex-col space-y-4">
+              <p className="text-sm text-gray-500">Written by</p>
+              <Link
+                href={`https://twitter.com/mfts0`}
+                className="group flex items-center space-x-3"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <BlurImage
+                  src={`https://pbs.twimg.com/profile_images/1176854646343852032/iYnUXJ-m_400x400.jpg`}
+                  alt={`Marc Seitz`}
+                  width={40}
+                  height={40}
+                  className="rounded-full transition-all group-hover:brightness-90"
+                />
+                <div className="flex flex-col">
+                  <p className="font-semibold text-gray-700">Marc Seitz</p>
+                  <p className="text-sm text-gray-500">@mfts0</p>
+                </div>
+              </Link>
+            </div>
+          </div> */}
+        </div>
+      </div>
+    </>
+  );
+}

app/(static)/de/page.tsx

@@ -0,0 +1,51 @@
+import Link from "next/link";
+
+import { getPostsRemote as getPosts } from "@/lib/content/blog";
+
+export default async function BlogIndex() {
+  const posts = await getPosts();
+  return (
+    <div className="bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2 className="text-balance text-6xl text-gray-900 sm:text-6xl">
+            Papermark Blog DE
+          </h2>
+          <p className="mt-2 text-balance text-lg leading-8 text-gray-500">
+            All insights on secure document sharing in 2024
+          </p>
+        </div>
+        <div className="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {posts.map((post) => (
+            <article
+              key={post?.data.slug}
+              className="flex max-w-xl flex-col items-start justify-between"
+            >
+              <div className="flex items-center gap-x-4 text-xs">
+                <h1 className="text-balance text-2xl md:text-2xl">
+                  {post?.data.title}
+                </h1>
+              </div>
+              <p className="mt-1 text-balance text-xs text-gray-500 md:text-xs">
+                {post?.data.summary}
+              </p>
+
+              <div className="group relative">
+                <h3 className="mt-4 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
+                  <Link
+                    href={`/blog/${post?.data.slug}`}
+                    className="text-balance rounded-3xl border border-gray-500 bg-transparent px-4 py-2 text-xs font-light text-gray-500"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Read more
+                  </Link>
+                </h3>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/(static)/help/page.tsx

@@ -0,0 +1,51 @@
+import Link from "next/link";
+
+import { getPostsRemote as getPosts } from "@/lib/content/blog";
+
+export default async function BlogIndex() {
+  const posts = await getPosts();
+  return (
+    <div className="bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2 className="text-balance text-6xl text-gray-900 sm:text-6xl">
+            Papermark Help Center
+          </h2>
+          <p className="mt-2 text-balance text-lg leading-8 text-gray-500">
+            Everything on how to share dcuments with Papermark
+          </p>
+        </div>
+        <div className="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {posts.map((post) => (
+            <article
+              key={post?.data.slug}
+              className="flex max-w-xl flex-col items-start justify-between"
+            >
+              <div className="flex items-center gap-x-4 text-xs">
+                <h1 className="text-balance text-2xl md:text-2xl">
+                  {post?.data.title}
+                </h1>
+              </div>
+              <p className="mt-1 text-balance text-xs text-gray-500 md:text-xs">
+                {post?.data.summary}
+              </p>
+
+              <div className="group relative">
+                <h3 className="mt-4 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
+                  <Link
+                    href={`/blog/${post?.data.slug}`}
+                    className="text-balance rounded-3xl border border-gray-500 bg-transparent px-4 py-2 text-xs font-light text-gray-500"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Read more
+                  </Link>
+                </h3>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

lib/content/de.ts

@@ -0,0 +1,66 @@
+import { cache } from "react";
+
+import matter from "gray-matter";
+
+import { getHeadings } from "./utils";
+
+type Post = {
+  data: {
+    title: string;
+    summary: string;
+    publishedAt: string;
+    author: string;
+    image: string;
+    slug: string;
+    published: boolean;
+  };
+  body: string;
+  toc: { text: string; level: number }[];
+};
+
+const GITHUB_CONTENT_TOKEN = process.env.GITHUB_CONTENT_TOKEN;
+const GITHUB_CONTENT_REPO = process.env.GITHUB_CONTENT_REPO;
+
+export const getPostsRemote = cache(async () => {
+  if (!GITHUB_CONTENT_REPO || !GITHUB_CONTENT_TOKEN) {
+    return [];
+  }
+
+  const apiUrl = `https://api.github.com/repos/${GITHUB_CONTENT_REPO}/contents/content/de/blog`;
+  const headers = {
+    Authorization: `Bearer ${GITHUB_CONTENT_TOKEN}`,
+    Accept: "application/vnd.github+json",
+    "X-GitHub-Api-Version": "2022-11-28",
+  };
+
+  const response = await fetch(apiUrl, { headers });
+  const data = await response.json();
+
+  const posts = await Promise.all(
+    data
+      .filter((file: any) => file.name.endsWith(".mdx"))
+      .map(async (file: any) => {
+        const contentResponse = await fetch(file.url, { headers });
+        const fileDetails = await contentResponse.json();
+        const content = fileDetails.content; // Getting the base64 encoded content
+        const decodedContent = Buffer.from(content, "base64").toString("utf8"); // Decoding the base64 content
+        const { data, content: fileContent } = matter(decodedContent);
+
+        if (data.published === false) {
+          return null;
+        }
+
+        const headingItems = await getHeadings(fileContent);
+
+        return { data, body: fileContent, toc: headingItems } as Post;
+      }),
+  );
+
+  const filteredPosts = posts.filter((post: Post) => post !== null) as Post[];
+  return filteredPosts;
+});
+
+export async function getPost(slug: string) {
+  const postsRemote = await getPostsRemote();
+  return postsRemote.find((post) => post?.data.slug === slug);
+}

middleware.ts

@@ -69,6 +69,8 @@ export default async function middleware(req: NextRequest, ev: NextFetchEvent) {
     !path.startsWith("/solutions") &&
     !path.startsWith("/investors") &&
     !path.startsWith("/blog") &&
+    !path.startsWith("/help") &&
+    !path.startsWith("/de") &&
     !path.startsWith("/view/")
   ) {
     return AppMiddleware(req);