feat: add new frontend

packages/akeru-frontend/README.md

@@ -1,5 +1,9 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
+## Important Note
+
+This codebase at the moment is being deprecated due to certain reasons; we have decided to adopt a different setup which is named `studios-ts` for now; that matches the goals of this project.
+
 ## Getting Started
 
 First, run the development server:

packages/studio-ts/.eslintrc.json

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

packages/studio-ts/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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

packages/studio-ts/README.md

@@ -0,0 +1,43 @@
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+
+## Important Note
+
+This project here serves as the new setup for the frontend of Akeru moving forward and this will be where subsequent work will be continued on. We have discontinued work on the `akeru-frontend` project.
+
+## Getting Started
+
+First, run 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.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [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.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## 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.
+

packages/studio-ts/mdx-components.tsx

@@ -0,0 +1,10 @@
+import { type MDXComponents as MDXComponentsType } from 'mdx/types'
+
+import { MDXComponents } from '@/components/MDXComponents'
+
+export function useMDXComponents(components: MDXComponentsType) {
+  return {
+    ...components,
+    ...MDXComponents,
+  }
+}

packages/studio-ts/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.

packages/studio-ts/next.config.mjs

@@ -0,0 +1,83 @@
+import rehypeShiki from '@leafac/rehype-shiki'
+import nextMDX from '@next/mdx'
+import { Parser } from 'acorn'
+import jsx from 'acorn-jsx'
+import escapeStringRegexp from 'escape-string-regexp'
+import * as path from 'path'
+import { recmaImportImages } from 'recma-import-images'
+import remarkGfm from 'remark-gfm'
+import { remarkRehypeWrap } from 'remark-rehype-wrap'
+import remarkUnwrapImages from 'remark-unwrap-images'
+import shiki from 'shiki'
+import { unifiedConditional } from 'unified-conditional'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
+}
+
+function remarkMDXLayout(source, metaName) {
+  let parser = Parser.extend(jsx())
+  let parseOptions = { ecmaVersion: 'latest', sourceType: 'module' }
+
+  return (tree) => {
+    let imp = `import _Layout from '${source}'`
+    let exp = `export default function Layout(props) {
+      return <_Layout {...props} ${metaName}={${metaName}} />
+    }`
+
+    tree.children.push(
+      {
+        type: 'mdxjsEsm',
+        value: imp,
+        data: { estree: parser.parse(imp, parseOptions) },
+      },
+      {
+        type: 'mdxjsEsm',
+        value: exp,
+        data: { estree: parser.parse(exp, parseOptions) },
+      },
+    )
+  }
+}
+
+export default async function config() {
+  let highlighter = await shiki.getHighlighter({
+    theme: 'css-variables',
+  })
+
+  let withMDX = nextMDX({
+    extension: /\.mdx$/,
+    options: {
+      recmaPlugins: [recmaImportImages],
+      rehypePlugins: [
+        [rehypeShiki, { highlighter }],
+        [
+          remarkRehypeWrap,
+          {
+            node: { type: 'mdxJsxFlowElement', name: 'Typography' },
+            start: ':root > :not(mdxJsxFlowElement)',
+            end: ':root > mdxJsxFlowElement',
+          },
+        ],
+      ],
+      remarkPlugins: [
+        remarkGfm,
+        remarkUnwrapImages,
+        [
+          unifiedConditional,
+          [
+            new RegExp(`^${escapeStringRegexp(path.resolve('src/app/blog'))}`),
+            [[remarkMDXLayout, '@/app/blog/wrapper', 'article']],
+          ],
+          [
+            new RegExp(`^${escapeStringRegexp(path.resolve('src/app/work'))}`),
+            [[remarkMDXLayout, '@/app/work/wrapper', 'caseStudy']],
+          ],
+        ],
+      ],
+    },
+  })
+
+  return withMDX(nextConfig)
+}

packages/studio-ts/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "tailwindui-studio",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "browserslist": "defaults, not ie <= 11",
+  "dependencies": {
+    "@leafac/rehype-shiki": "^2.2.1",
+    "@mdx-js/loader": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
+    "@next/mdx": "^14.0.4",
+    "@types/mdx": "^2.0.7",
+    "@types/node": "^20.10.8",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "acorn": "^8.10.0",
+    "acorn-jsx": "^5.3.2",
+    "autoprefixer": "^10.4.7",
+    "clsx": "^2.1.0",
+    "escape-string-regexp": "^5.0.0",
+    "fast-glob": "^3.2.12",
+    "framer-motion": "^10.15.2",
+    "next": "^14.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recma-import-images": "0.0.3",
+    "remark-gfm": "^4.0.0",
+    "remark-rehype-wrap": "0.0.3",
+    "remark-unwrap-images": "^4.0.0",
+    "shiki": "^0.11.1",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "unified-conditional": "0.0.2"
+  },
+  "devDependencies": {
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "sharp": "0.33.1"
+  }
+}

packages/studio-ts/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/studio-ts/prettier.config.js

@@ -0,0 +1,6 @@
+/** @type {import('prettier').Options} */
+module.exports = {
+  singleQuote: true,
+  semi: false,
+  plugins: ['prettier-plugin-tailwindcss'],
+}