Initial commit

Created from https://vercel.com/new
raphaelsalaja · Oct 19, 2024 · 13902c0 · 13902c0
commit 13902c0
Show file tree

Hide file tree

Showing 69 changed files with 12,967 additions and 0 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: [raphaelsalaja]
diff --git a/.github/assets/readme.png b/.github/assets/readme.png
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/posts/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+enable-pre-post-scripts=true
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+*.mdx
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "importOrder": ["<TYPES>^(node:)", "", "<TYPES>", "", "<TYPES>^[.]", "", "@/(.*)$", "", "<BUILTIN_MODULES>", "", "<THIRD_PARTY_MODULES>", "", "^[.]"]
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://json.schemastore.org/stylelintrc.json",
+  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "at-rule-empty-line-before": [
+      "always",
+      {
+        "except": ["blockless-after-same-name-blockless", "first-nested"]
+      }
+    ],
+    "comment-empty-line-before": [
+      "always",
+      {
+        "except": ["first-nested"],
+        "ignore": ["stylelint-commands"]
+      }
+    ],
+    "declaration-empty-line-before": [
+      "always",
+      {
+        "except": ["after-declaration", "first-nested"]
+      }
+    ],
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "order/order": ["at-rules", "custom-properties", "declarations", "rules"],
+    "rule-empty-line-before": [
+      "always",
+      {
+        "except": ["first-nested"]
+      }
+    ]
+  }
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["biomejs.biome"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "mdx-preview.preview.useVscodeMarkdownStyles": false
+}
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Raphael Salaja
+
+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.
diff --git a/README.md b/README.md
@@ -0,0 +1,47 @@
+<p align="center">
+<img src=".github/assets/readme.png">
+<a href="https://github.com/sponsors/raphaelsalaja">
+    <picture>
+        <img src="https://github.com/user-attachments/assets/e9754454-5f51-4166-8194-0f3ba1db82dc" alt="Sponsor" height="30">
+    </picture>
+</a>
+<a href="https://vercel.com/new/clone?repository-url=https://github.com/raphaelsalaja/sylph&env=NEXT_PUBLIC_SITE_URL&project-name=portfolio&repository-name=portfolio&redirect-url=https://twitter.com/raphaelsalaja&demo-title=next-slyph-portfolio&demo-description=A+minimal+blog+built+with+Next.js.&demo-url=https://next-sylph-portfolio.vercel.app&demo-image=https://raw.githubusercontent.com/raphaelsalaja/sylph/refs/heads/main/.github/assets/readme.png&teamSlug=raphael-salaja">
+    <picture>
+        <img src="https://github.com/user-attachments/assets/7ea626bf-b827-4995-b0d0-6eea0c0ba2d5" alt="Deploy" height="30">
+    </picture>
+</a>
+<a href="https://x.com/raphaelsalaja">
+    <picture>
+        <img src="https://github.com/user-attachments/assets/8d599ebf-b73e-4c05-8297-867b5846b7c4" alt="Twitter" height="30">
+    </picture>
+</a>
+</p>
+
+
+
+A minimal and lightweight portfolio template designed for developers, designers, and creatives. It offers a clean, modern interface to showcase your work, share your ideas, and write blog posts.
+
+Built using Next.js, Sylph is optimized for performance and developer experience, providing flexibility and ease of use whether you're showcasing projects or writing content.
+
+## Features
+
+- **Responsive Design**: Works seamlessly on all devices and browsers.
+- **MDX and Markdown Support**: Write posts using MDX or Markdown, with extensive flexibility.
+- **Optimized for SEO**: Includes sitemaps, robots.txt, and metadata for better search engine visibility.
+- **Dynamic OpenGraph (OG) Images**: Automatically generate OG images for social media sharing.
+- **Syntax Highlighting**: Built-in support for highlighting code blocks.
+- **Tailwind v4**: Fully configured with the latest version of Tailwind CSS for efficient styling.
+- **Automated Blog Time Dating**: Automatically manage post creation and updated timestamps.
+- **Extensive Frontmatter**: Customize posts with rich metadata and organizational fields.
+- **Clean and Simple Structure**: Easy-to-navigate codebase for efficient customization.
+- **Light and Dark Mode**: Simple theming with light/dark mode toggle support.
+- **Foundations for Expansion**: Built with flexibility in mind, allowing easy expansion and customization.
+- **Theming**: Easily extend or customize themes to suit your brand.
+
+## Documentation
+
+To get started with Sylph, check out the [Guides](https://next-sylph-portfolio.vercel.app/guides).
+
+## Sponsor
+
+If you find this project helpful, consider supporting the project. Your contribution helps maintain the project and supports future development.
diff --git a/app/(posts)/examples/[slug]/page.tsx b/app/(posts)/examples/[slug]/page.tsx
@@ -0,0 +1,49 @@
+import type { Post } from "@/types";
+
+import { Layout } from "@/components/screens/posts";
+import { getPosts } from "@/lib/mdx";
+import { OpenGraph } from "@/lib/og";
+
+import { notFound } from "next/navigation";
+
+const route = "examples";
+
+const Posts = getPosts(route);
+
+interface PageProps {
+  params: Post;
+}
+
+export async function generateStaticParams() {
+  return Posts.map((post) => ({
+    slug: `${post.slug}`,
+  }));
+}
+
+export function generateMetadata({ params }: PageProps) {
+  const post = Posts.find((post: { slug: string }) => post.slug === params.slug);
+  const title = post ? post.title : "";
+  const image = `${process.env.NEXT_PUBLIC_SITE_URL}api/og?title=${encodeURIComponent(title)}`;
+
+  return {
+    ...OpenGraph,
+    title,
+    openGraph: {
+      title,
+      images: [image],
+    },
+    twitter: {
+      images: [image],
+    },
+  };
+}
+
+export default function Page({ params }: PageProps) {
+  const post = Posts.find((post: { slug: string }) => post.slug === params.slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  return <Layout post={post} route={route} />;
+}
diff --git a/app/(posts)/examples/page.tsx b/app/(posts)/examples/page.tsx
@@ -0,0 +1,33 @@
+import * as FadeIn from "@/components/motion/staggers/fade";
+import { Posts } from "@/components/posts";
+import { OpenGraph } from "@/lib/og";
+
+import React from "react";
+
+const category = "examples";
+
+export function generateMetadata() {
+  const image = `${process.env.NEXT_PUBLIC_SITE_URL}api/og?title=${encodeURIComponent(category)}`;
+
+  return {
+    ...OpenGraph,
+    category,
+    openGraph: {
+      category,
+      images: [image],
+    },
+    twitter: {
+      images: [image],
+    },
+  };
+}
+
+export default function Page() {
+  return (
+    <React.Fragment>
+      <FadeIn.Item>
+        <Posts category={category} />
+      </FadeIn.Item>
+    </React.Fragment>
+  );
+}
diff --git a/app/(posts)/examples/posts/component-showcase.mdx b/app/(posts)/examples/posts/component-showcase.mdx
@@ -0,0 +1,10 @@
+---
+title: "Component Showcase"
+time:
+  created: "2024-09-18T19:24:46.167Z"
+  updated: "2024-10-17T09:56:06.853Z"
+---
+
+<Preview>
+<PreviewExample/>
+</Preview>
diff --git a/app/(posts)/guides/[slug]/page.tsx b/app/(posts)/guides/[slug]/page.tsx
@@ -0,0 +1,49 @@
+import type { Post } from "@/types";
+
+import { Layout } from "@/components/screens/posts";
+import { getPosts } from "@/lib/mdx";
+import { OpenGraph } from "@/lib/og";
+
+import { notFound } from "next/navigation";
+
+const route = "guides";
+
+const Posts = getPosts(route);
+
+interface PageProps {
+  params: Post;
+}
+
+export async function generateStaticParams() {
+  return Posts.map((post) => ({
+    slug: `${post.slug}`,
+  }));
+}
+
+export function generateMetadata({ params }: PageProps) {
+  const post = Posts.find((post: { slug: string }) => post.slug === params.slug);
+  const title = post ? post.title : "";
+  const image = `${process.env.NEXT_PUBLIC_SITE_URL}api/og?title=${encodeURIComponent(title)}`;
+
+  return {
+    ...OpenGraph,
+    title,
+    openGraph: {
+      title,
+      images: [image],
+    },
+    twitter: {
+      images: [image],
+    },
+  };
+}
+
+export default function Page({ params }: PageProps) {
+  const post = Posts.find((post: { slug: string }) => post.slug === params.slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  return <Layout post={post} route={route} />;
+}
diff --git a/app/(posts)/guides/page.tsx b/app/(posts)/guides/page.tsx
@@ -0,0 +1,32 @@
+import * as FadeIn from "@/components/motion/staggers/fade";
+import { Posts } from "@/components/posts";
+import { OpenGraph } from "@/lib/og";
+
+import React from "react";
+
+export function generateMetadata() {
+  const title = "Guides";
+  const image = `${process.env.NEXT_PUBLIC_SITE_URL}api/og?title=${encodeURIComponent(title)}`;
+
+  return {
+    ...OpenGraph,
+    title,
+    openGraph: {
+      title,
+      images: [image],
+    },
+    twitter: {
+      images: [image],
+    },
+  };
+}
+
+export default function Page() {
+  return (
+    <React.Fragment>
+      <FadeIn.Item>
+        <Posts category="guides" />
+      </FadeIn.Item>
+    </React.Fragment>
+  );
+}