Feature/holopin (#437)

* adds holopin image * bump versions and update tests * snapshots update * fixes holopin link * fixes holopin link * refactor and colour change * demo holopin interactive * demo holopin interactive * migrate to appdir * added Fathom * added Fathom
kochie · Mar 14, 2023 · 92244fb · 92244fb · vercel · Mar 14, 2023
1 parent 23474fe
commit 92244fb
Show file tree

Hide file tree

Showing 41 changed files with 2,500 additions and 4,150 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/mdx-components.tsx b/mdx-components.tsx
@@ -0,0 +1,35 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+const h1 = ({ children }) => (
+  <h1 className="text-gray-900 text-4xl font-extrabold mb-3.5 dark:text-white">
+    {children}
+  </h1>
+)
+const p = ({ children }) => (
+  <p className="text-gray-700 my-3 leading-relaxed dark:text-gray-400">
+    {children}
+  </p>
+)
+const a = ({ children, href }) => (
+  <Link
+    href={href}
+    className="underline dark:text-orange-300 dark:hover:text-orange-600 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+  >
+    {children}
+  </Link>
+)
+const img = ({ src, alt }) => (
+  <Image
+    src={src}
+    alt={alt}
+    className="my-10 rounded-xl"
+    style={{
+      maxWidth: '100%',
+      height: 'auto',
+    }}
+  />
+)
+export function useMDXComponents(components) {
+  return { h1, p, a, img, ...components }
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -29,9 +29,13 @@ const Config = async (phase, { defaultConfig }) => {
       NEXT_PUBLIC_COMMIT_SHA: VERCEL_GIT_COMMIT_SHA,
     },
     images: {
-      domains: ['blog.kochie.io', 'holopin.io'],
+      domains: ['blog.kochie.io', 'holopin.io', 'assets.holopin.io'],
     },
     pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+    experimental: {
+      appDir: true,
+      mdxRs: true,
+    },
   }
 
   const withMDX = MDX({
@@ -40,7 +44,7 @@ const Config = async (phase, { defaultConfig }) => {
       remarkPlugins: [],
       rehypePlugins: [],
       // If you use `MDXProvider`, uncomment the following line.
-      providerImportSource: '@mdx-js/react',
+      // providerImportSource: '@mdx-js/react',
       // development: true,
     },
   })
@@ -50,7 +54,10 @@ const Config = async (phase, { defaultConfig }) => {
     maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
   })
 
-  return withPWA(withMDX(config))
+  if (process.NODE_ENV === 'production') {
+    return withPWA(withMDX(config))
+  }
+  return withMDX(config)
 }
 
 export default Config
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
   "homepage": "https://github.com/kochie/me.kochie.io#readme",
   "devDependencies": {
     "@babel/core": "^7.21.0",
+    "@babel/parser": "^7.21.2",
     "@babel/preset-react": "^7.18.6",
     "@fortawesome/fontawesome-pro": "^6.3.0",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/api/holopin/route.ts b/src/app/api/holopin/route.ts
@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server'
+
+export const config = {
+  runtime: 'edge',
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+
+  // console.log(searchParams.get('username'))
+  const data = await fetch(
+    `https://www.holopin.io/api/auth/user/page?username=${searchParams.get(
+      'username'
+    )}`
+  ).then((res) => res.json())
+  // console.log(data)
+
+  return NextResponse.json({ ...data })
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,40 @@
+import Script from 'next/script'
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '../assets/styles/global.css'
+import 'tailwindcss/tailwind.css'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+import { Source_Sans_Pro } from 'next/font/google'
+
+config.autoAddCss = false
+
+const sourceSansPro = Source_Sans_Pro({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['400', '700'],
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={sourceSansPro.className}>
+        {children}
+        <Script
+          data-name="BMC-Widget"
+          data-cfasync="false"
+          src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+          data-id="kochie"
+          data-description="Support me on Buy me a coffee!"
+          data-message=""
+          data-color="#FF5F5F"
+          data-position="Right"
+          data-x_margin="18"
+          data-y_margin="18"
+        />
+      </body>
+    </html>
+  )
+}