release: v0.1.1

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "dev",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.env.example

@@ -0,0 +1,2 @@
+# NEXT_PUBLIC_GA_ID=""
+# NEXT_PUBLIC_GOOGLE_ADSENSE_ACCOUNT=""

.github/workflows/release.yml

@@ -0,0 +1,32 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - dev
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22.15.0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel

CHANGELOG.md

@@ -0,0 +1,7 @@
+# sourcemap-online
+
+## 0.1.1
+
+### Patch Changes
+
+- env & mode toggle

README.md

@@ -1,36 +1,100 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Source Map Online Parser
+
+<div align="center">
+  <img src="design/logo.svg" alt="Source Map Online Parser Logo" width="200"/>
+  <br/>
+  <p><em>Online JavaScript Source Map parser, supporting single file parsing and error stack parsing</em></p>
+</div>
+
+## Features
+
+- 🔍 **Source Map Parsing**: Parse and analyze JavaScript source maps online
+- 📝 **Error Stack Parsing**: Convert minified error stacks to original source locations
+- 🎯 **Single File Support**: Parse individual source map files
+- 🌙 **Dark Mode**: Support for both light and dark themes
+- 📱 **Responsive Design**: Works seamlessly on desktop and mobile devices
+- 🚀 **Fast & Efficient**: Built with Next.js and optimized for performance
 
 ## Getting Started
 
-First, run the development server:
+### Prerequisites
+
+- Node.js >= 22.15.0
+- pnpm >= 10.11.0
+
+### Installation
+
+1. Clone the repository:
+```bash
+git clone https://github.com/whale4113/sourcemap-online
+cd sourcemap-online
+```
+
+2. Install dependencies:
+```bash
+pnpm install
+```
 
+3. Start the development server:
 ```bash
-npm run dev
-# or
-yarn dev
-# or
 pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Development
+
+### Project Structure
+
+```
+sourcemap-online/
+├── app/              # Next.js app directory
+├── components/       # React components
+├── lib/             # Utility functions and shared logic
+├── public/          # Static assets
+└── styles/          # Global styles
+```
+
+### Available Scripts
+
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm start` - Start production server
+- `pnpm lint` - Run ESLint
+
+### Tech Stack
+
+- [Next.js](https://nextjs.org/) - React framework
+- [TypeScript](https://www.typescriptlang.org/) - Type safety
+- [Tailwind CSS](https://tailwindcss.com/) - Styling
+- [Zustand](https://github.com/pmndrs/zustand) - State management
+- [source-map-js](https://github.com/7rulnik/source-map-js) - Source map parsing
+
+## Contributing
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+### How to Contribute
 
-## Learn More
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
 
-To learn more about Next.js, take a look at the following resources:
+### Development Guidelines
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- Follow the existing code style
+- Write meaningful commit messages
+- Add tests for new features
+- Update documentation as needed
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## License
 
-## Deploy on Vercel
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-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.
+## Acknowledgments
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- [Next.js](https://nextjs.org/) for the amazing framework
+- [source-map-js](https://github.com/7rulnik/source-map-js) for the source map parsing library
+- All contributors who have helped shape this project

app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
+import { env } from "@/lib/env";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -87,12 +88,16 @@ export default function RootLayout({
           {children}
         </ThemeProvider>
         <Toaster />
-        <GoogleAnalytics gaId="G-L61TTVLT2K" />
-        <script
-          async
-          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9339016402558827"
-          crossOrigin="anonymous"
-        ></script>
+        {env.NEXT_PUBLIC_GA_ID !== undefined && (
+          <GoogleAnalytics gaId={env.NEXT_PUBLIC_GA_ID} />
+        )}
+        {env.NEXT_PUBLIC_GOOGLE_ADSENSE_ACCOUNT !== undefined && (
+          <script
+            async
+            src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${env.NEXT_PUBLIC_GOOGLE_ADSENSE_ACCOUNT}`}
+            crossOrigin="anonymous"
+          ></script>
+        )}
       </body>
     </html>
   );

app/original-position-for/layout.tsx

@@ -1,5 +1,9 @@
 import type { Metadata } from "next";
+import { Button } from "@/components/ui/button";
 import { Nav } from "@/features/original-position-for/nav";
+import packageJson from "@/package.json";
+import { ModeToggle } from "@/components/mode-toggle";
+import { Github } from "@/components/icons";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -14,8 +18,20 @@ export default function RootLayout({
   return (
     <div className="min-h-screen bg-background">
       <header className="border-b bg-card">
-        <div className="container mx-auto p-4">
+        <div className="container mx-auto p-4 flex justify-between items-center">
           <h1 className="text-2xl font-bold">Source Map Parser</h1>
+          <div className="flex items-center gap-2">
+            <ModeToggle />
+            <a
+              href={packageJson.repository.url.slice(0, -".git".length)}
+              target="_blank"
+              aria-label="GitHub Repository"
+            >
+              <Button variant="outline" size="icon">
+                <Github strokeWidth={0} fill="currentColor" />
+              </Button>
+            </a>
+          </div>
         </div>
       </header>
       <main className="container mx-auto p-4">

components/icons/github.tsx

@@ -0,0 +1,13 @@
+import { createLucideIcon, type IconNode } from "lucide-react";
+
+const __iconNode: IconNode = [
+  [
+    "path",
+    {
+      d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12",
+      key: "github",
+    },
+  ],
+];
+
+export const Github = createLucideIcon("github", __iconNode);

components/icons/index.ts

@@ -0,0 +1 @@
+export * from "./github";

components/mode-toggle.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}