Initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Mohd. Nisab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,100 @@
+## AriaDocs - Documentation Template
+
+This feature-packed documentation template, built with Next.js, offers a sleek and responsive design, perfect for all your project documentation needs.
+
+<img src="./public/public-og.png" />
+
+<br/>
+
+Here are all versions of the AriaDocs template, each crafted for specific use cases:
+
+
+- **Advanced Docs:** A comprehensive template offering extensive features for in-depth documentation needs. Perfect for larger projects that require detailed explanations and advanced configurations.  
+  [Explore the Advanced Docs](https://github.com/nisabmohd/Aria-Docs/tree/master)
+
+- **Lite Version:** A streamlined, no-frills template perfect for straightforward documentation needs.  
+  [Explore the Lite Version](https://github.com/nisabmohd/Aria-Docs/tree/minimal-docs)
+
+- **Version with Versioning:** A powerful option for projects that require historical documentation tracking. Manage multiple versions of your docs effortlessly.  
+  [Check out the Versioning Feature](https://github.com/nisabmohd/Aria-Docs/tree/version_docs)
+
+- **i18n Support Version (WIP):** Designed for international audiences, this version will offer comprehensive multilingual support.  
+  [Preview the i18n Support](https://github.com/nisabmohd/Aria-Docs/tree/i18n-support)
+
+### Quick Start
+
+You can create a new Ariadocs project using the command:
+
+```plaintext
+npx create-aria-doc <project-directory>
+```
+
+### Expected Output
+
+When you run the CLI, you can expect an output similar to this:
+
+```
+Creating a new Ariadocs project in /path/to/your/project from the master branch...
+Cloning Master (Full Documentation)...
+Ariadocs project successfully created in /path/to/your/project!
+
+Next steps:
+1. Navigate to your project directory:
+   cd <project-directory>
+2. Install dependencies:
+   // To support React 19, package maintainers will need to test and update their packages to include React 19 as a peer dependency. This is already in progress.
+   npm install --force 
+3. Start the development server:
+   npm run dev
+```
+
+## Getting Started
+
+First, run the development server:
+
+```plaintext
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/nisabmohd/Aria-Docs)
+
+## Key Features
+
+| **Feature**                   | **Description**                                          |
+|-------------------------------|----------------------------------------------------------|
+| MDX Support                   | Write interactive documentation with MDX.                |
+| Nested Pages                  | Organize content in a nested, hierarchical structure.    |
+| Blog Section                  | Include a dedicated blog section.                        |
+| Table of Contents             | Auto-generated TOC for easy navigation.                  |
+| Pagination                    | Split content across multiple pages.                     |
+| Syntax Highlighting           | Highlight code for better readability.                   |
+| Code Line Highlighting & Titles | Highlight specific lines with descriptive titles.      |
+| Interactive Code Blocks       | Language-specific and interactive code display.          |
+| Custom Components             | Embed custom, reusable components in your docs.          |
+| Light & Dark Mode             | Toggle between light and dark themes.                    |
+| Search Functionality          | Quickly find content with a built-in search.             |
+| Code Switcher                 | Switch between code languages or variations.             |
+| Code Copy                     | Copy code blocks with a single click.                    |
+| TOC Observer Highlight        | Highlight active sections in the TOC as you scroll.      |
+| Static Site Generation        | Generate a static, high-performance site.                |
+| SEO-Optimized                 | Structured for optimal search engine indexing.           |
+
+
+## Additional Themes
+
+<img src="./public/halloween.png" alt="halloween" />
+<img src="./public/nebula.png" alt="halloween" />
+<img src="./public/ocean.png" alt="halloween" />

app/blog/[slug]/page.tsx

@@ -0,0 +1,112 @@
+import { Typography } from "@/components/typography";
+import { buttonVariants } from "@/components/ui/button";
+import { Author, getAllBlogStaticPaths, getBlogForSlug } from "@/lib/markdown";
+import { ArrowLeftIcon } from "lucide-react";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { formatDate } from "@/lib/utils";
+import Image from "next/image";
+
+type PageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export async function generateMetadata(props: PageProps) {
+  const params = await props.params;
+
+  const {
+    slug
+  } = params;
+
+  const res = await getBlogForSlug(slug);
+  if (!res) return null;
+  const { frontmatter } = res;
+  return {
+    title: frontmatter.title,
+    description: frontmatter.description,
+  };
+}
+
+export async function generateStaticParams() {
+  const val = await getAllBlogStaticPaths();
+  if (!val) return [];
+  return val.map((it) => ({ slug: it }));
+}
+
+export default async function BlogPage(props: PageProps) {
+  const params = await props.params;
+
+  const {
+    slug
+  } = params;
+
+  const res = await getBlogForSlug(slug);
+  if (!res) notFound();
+  return (
+    <div className="lg:w-[60%] sm:[95%] md:[75%] mx-auto">
+      <Link
+        className={buttonVariants({
+          variant: "link",
+          className: "!mx-0 !px-0 mb-7 !-ml-1 ",
+        })}
+        href="/blog"
+      >
+        <ArrowLeftIcon className="w-4 h-4 mr-1.5" /> Back to blog
+      </Link>
+      <div className="flex flex-col gap-3 pb-7 w-full mb-2">
+        <p className="text-muted-foreground text-sm">
+          {formatDate(res.frontmatter.date)}
+        </p>
+        <h1 className="sm:text-4xl text-3xl font-extrabold">
+          {res.frontmatter.title}
+        </h1>
+        <div className="mt-6 flex flex-col gap-3">
+          <p className="text-sm text-muted-foreground">Posted by</p>
+          <Authors authors={res.frontmatter.authors} />
+        </div>
+      </div>
+      <div className="!w-full">
+        <div className="w-full mb-7">
+          <Image
+            src={res.frontmatter.cover}
+            alt="cover"
+            width={700}
+            height={400}
+            className="w-full h-[400px] rounded-md border object-cover"
+          />
+        </div>
+        <Typography>{res.content}</Typography>
+      </div>
+    </div>
+  );
+}
+
+function Authors({ authors }: { authors: Author[] }) {
+  return (
+    <div className="flex items-center gap-8 flex-wrap">
+      {authors.map((author) => {
+        return (
+          <Link
+            href={author.handleUrl}
+            className="flex items-center gap-2"
+            key={author.username}
+          >
+            <Avatar className="w-10 h-10">
+              <AvatarImage src={author.avatar} />
+              <AvatarFallback>
+                {author.username.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <div className="">
+              <p className="text-sm font-medium">{author.username}</p>
+              <p className="font-code text-[13px] text-muted-foreground">
+                @{author.handle}
+              </p>
+            </div>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}

app/blog/layout.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+
+export default function BlogLayout({ children }: PropsWithChildren) {
+  return (
+    <div className="flex flex-col items-start justify-center pt-8 pb-10 w-full mx-auto">
+      {children}
+    </div>
+  );
+}

app/blog/page.tsx

@@ -0,0 +1,96 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Author, BlogMdxFrontmatter, getAllBlogs } from "@/lib/markdown";
+import { formatDate2, stringToDate } from "@/lib/utils";
+import { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "AriaDocs - Blog",
+};
+
+export default async function BlogIndexPage() {
+  const blogs = (await getAllBlogs()).sort(
+    (a, b) => stringToDate(b.date).getTime() - stringToDate(a.date).getTime()
+  );
+  return (
+    <div className="w-full mx-auto flex flex-col gap-1 sm:min-h-[91vh] min-h-[88vh] pt-2">
+      <div className="mb-7 flex flex-col gap-2">
+        <h1 className="text-3xl font-extrabold">
+          The latest blogs of this product
+        </h1>
+        <p className="text-muted-foreground">
+          All the latest blogs and news, straight from the team.
+        </p>
+      </div>
+      <div className="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 sm:gap-8 gap-4 mb-5">
+        {blogs.map((blog) => (
+          <BlogCard {...blog} slug={blog.slug} key={blog.slug} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function BlogCard({
+  date,
+  title,
+  description,
+  slug,
+  cover,
+  authors,
+}: BlogMdxFrontmatter & { slug: string }) {
+  return (
+    <Link
+      href={`/blog/${slug}`}
+      className="flex flex-col gap-2 items-start border rounded-md py-5 px-3 min-h-[400px]"
+    >
+      <h3 className="text-md font-semibold -mt-1 pr-7">{title}</h3>
+      <div className="w-full">
+        <Image
+          src={cover}
+          alt={title}
+          width={400}
+          height={150}
+          quality={80}
+          className="w-full rounded-md object-cover h-[180px] border"
+        />
+      </div>
+      <p className="text-sm text-muted-foreground">{description}</p>
+      <div className="flex items-center justify-between w-full mt-auto">
+        <p className="text-[13px] text-muted-foreground">
+          Published on {formatDate2(date)}
+        </p>
+        <AvatarGroup users={authors} />
+      </div>
+    </Link>
+  );
+}
+
+function AvatarGroup({ users, max = 4 }: { users: Author[]; max?: number }) {
+  const displayUsers = users.slice(0, max);
+  const remainingUsers = Math.max(users.length - max, 0);
+
+  return (
+    <div className="flex items-center">
+      {displayUsers.map((user, index) => (
+        <Avatar
+          key={user.username}
+          className={`inline-block border-2 w-9 h-9 border-background ${
+            index !== 0 ? "-ml-3" : ""
+          } `}
+        >
+          <AvatarImage src={user.avatar} alt={user.username} />
+          <AvatarFallback>
+            {user.username.slice(0, 2).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+      ))}
+      {remainingUsers > 0 && (
+        <Avatar className="-ml-3 inline-block border-2 border-background hover:translate-y-1 transition-transform">
+          <AvatarFallback>+{remainingUsers}</AvatarFallback>
+        </Avatar>
+      )}
+    </div>
+  );
+}