initial

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+electron/dist

README.md

@@ -0,0 +1,93 @@
+# Markdown Blog
+
+A modern blog system built with Next.js, Markdown, and Electron for cross-platform support.
+
+## Features
+
+- Write blog posts in Markdown
+- Responsive web design
+- Desktop application support via Electron
+- Mobile-friendly interface
+- Tag-based organization
+- Clean and modern UI
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ and npm
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone <repository-url>
+cd markdownblog
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Start the development server:
+```bash
+npm run dev
+```
+
+4. For desktop development:
+```bash
+npm run electron-dev
+```
+
+### Writing Posts
+
+Create new blog posts by adding Markdown files to the `posts/` directory. Each post should include frontmatter with the following fields:
+
+```markdown
+---
+title: "Your Post Title"
+date: "YYYY-MM-DD"
+tags: ["tag1", "tag2"]
+summary: "A brief summary of your post"
+---
+
+Your post content here...
+```
+
+### Building for Production
+
+1. Build the web version:
+```bash
+npm run build
+```
+
+2. Build the desktop version:
+```bash
+npm run electron-build
+```
+
+## Project Structure
+
+```
+markdownblog/
+├── posts/           # Markdown blog posts
+├── src/
+│   ├── app/        # Next.js app directory
+│   └── lib/        # Utility functions
+├── electron/       # Desktop app code
+└── public/         # Static assets
+```
+
+## Technologies Used
+
+- Next.js 14
+- TypeScript
+- Tailwind CSS
+- Electron
+- Markdown (remark)
+- date-fns
+
+## License
+
+MIT 

electron/main.js

@@ -0,0 +1,36 @@
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+const isDev = process.env.NODE_ENV === 'development';
+
+function createWindow() {
+  const mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
+  });
+
+  // Load the Next.js app
+  if (isDev) {
+    mainWindow.loadURL('http://localhost:3000');
+    mainWindow.webContents.openDevTools();
+  } else {
+    mainWindow.loadFile(path.join(__dirname, '../.next/server/pages/index.html'));
+  }
+}
+
+app.whenReady().then(createWindow);
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+}); 

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "markdownblog",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "electron-dev": "electron .",
+    "electron-build": "next build && electron-builder"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.16",
+    "autoprefixer": "^10.4.17",
+    "date-fns": "^3.3.1",
+    "gray-matter": "^4.0.3",
+    "next": "14.1.0",
+    "postcss": "^8.4.35",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
+    "tailwindcss": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.2.57",
+    "@types/react-dom": "^18.2.19",
+    "electron": "^28.2.3",
+    "electron-builder": "^24.9.1",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.1.0",
+    "typescript": "^5.3.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 

posts/welcome.md

@@ -0,0 +1,27 @@
+---
+title: "Welcome to My Blog"
+date: "2024-03-10"
+tags: ["welcome", "introduction"]
+summary: "A warm welcome to my new blog built with Next.js and Markdown"
+---
+
+# Welcome to My Blog!
+
+This is my first blog post written in Markdown. I'm excited to share my thoughts and ideas with you.
+
+## What to Expect
+
+- Technical tutorials
+- Personal experiences
+- Random thoughts
+- And much more!
+
+## Features
+
+This blog is built with:
+- Next.js for the framework
+- Markdown for content
+- TailwindCSS for styling
+- Electron for desktop support
+
+Stay tuned for more posts! 

src/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-rgb: 255, 255, 255;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: rgb(var(--background-rgb));
+}
+
+.prose img {
+  margin: 2rem auto;
+  border-radius: 0.5rem;
+}
+
+.prose a {
+  color: #2563eb;
+  text-decoration: underline;
+}
+
+.prose a:hover {
+  color: #1d4ed8;
+} 

src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'My Markdown Blog',
+  description: 'A blog built with Next.js and Markdown',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+} 

src/app/page.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link';
+import { getAllPosts } from '@/lib/markdown';
+import { format } from 'date-fns';
+
+export default async function Home() {
+  const posts = await getAllPosts();
+
+  return (
+    <main className="min-h-screen p-8 max-w-4xl mx-auto">
+      <h1 className="text-4xl font-bold mb-8">My Blog</h1>
+      <div className="grid gap-8">
+        {posts.map((post) => (
+          <article key={post.slug} className="border rounded-lg p-6 hover:shadow-lg transition-shadow">
+            <Link href={`/posts/${post.slug}`}>
+              <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
+              <div className="text-gray-600 mb-4">
+                {format(new Date(post.date), 'MMMM d, yyyy')}
+              </div>
+              <p className="text-gray-700 mb-4">{post.summary}</p>
+              <div className="flex gap-2">
+                {post.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </Link>
+          </article>
+        ))}
+      </div>
+    </main>
+  );
+} 

src/app/posts/[slug]/page.tsx

@@ -0,0 +1,43 @@
+import { getPostBySlug, getAllPosts } from '@/lib/markdown';
+import { format } from 'date-fns';
+import Link from 'next/link';
+
+export async function generateStaticParams() {
+  const posts = await getAllPosts();
+  return posts.map((post) => ({
+    slug: post.slug,
+  }));
+}
+
+export default async function Post({ params }: { params: { slug: string } }) {
+  const post = await getPostBySlug(params.slug);
+
+  return (
+    <article className="min-h-screen p-8 max-w-4xl mx-auto">
+      <Link href="/" className="text-blue-600 hover:underline mb-8 inline-block">
+        ← Back to posts
+      </Link>
+      
+      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
+      <div className="text-gray-600 mb-8">
+        {format(new Date(post.date), 'MMMM d, yyyy')}
+      </div>
+      
+      <div className="flex gap-2 mb-8">
+        {post.tags.map((tag) => (
+          <span
+            key={tag}
+            className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+
+      <div
+        className="prose prose-lg max-w-none"
+        dangerouslySetInnerHTML={{ __html: post.content }}
+      />
+    </article>
+  );
+} 

src/lib/markdown.ts

@@ -0,0 +1,55 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { remark } from 'remark';
+import html from 'remark-html';
+
+export interface Post {
+  slug: string;
+  title: string;
+  date: string;
+  tags: string[];
+  summary: string;
+  content: string;
+}
+
+const postsDirectory = path.join(process.cwd(), 'posts');
+
+export async function getPostBySlug(slug: string): Promise<Post> {
+  const realSlug = slug.replace(/\.md$/, '');
+  const fullPath = path.join(postsDirectory, `${realSlug}.md`);
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
+  const { data, content } = matter(fileContents);
+
+  const processedContent = await remark()
+    .use(html)
+    .process(content);
+
+  return {
+    slug: realSlug,
+    title: data.title,
+    date: data.date,
+    tags: data.tags || [],
+    summary: data.summary,
+    content: processedContent.toString(),
+  };
+}
+
+export async function getAllPosts(): Promise<Post[]> {
+  const fileNames = fs.readdirSync(postsDirectory);
+  const allPostsData = await Promise.all(
+    fileNames
+      .filter((fileName) => fileName.endsWith('.md'))
+      .map(async (fileName) => {
+        const slug = fileName.replace(/\.md$/, '');
+        return getPostBySlug(slug);
+      })
+  );
+
+  return allPostsData.sort((a, b) => (a.date < b.date ? 1 : -1));
+}
+
+export async function getPostsByTag(tag: string): Promise<Post[]> {
+  const allPosts = await getAllPosts();
+  return allPosts.filter((post) => post.tags.includes(tag));
+} 

tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+} 

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}