Skip to content

Commit 817072b

Browse files
mythzmythz
authored
Merge pull request #4 from NetCoreTemplates/claude/convert-to-format-01NHkQfCewN8nQXLVjR7gqWn
Convert Code to Different Format
2 parents 64527cc + 23d69af commit 817072b

File tree

33 files changed

+394
-382
lines changed

33 files changed

+394
-382
lines changed

MyApp.Client/pages/admin.tsx renamed to MyApp.Client/app/admin/page.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client'
2+
13
import { SecondaryButton } from "@servicestack/react"
24
import Page from "@/components/layout-page"
35
import { ValidateAuth, appAuth } from "@/lib/auth"

MyApp.Client/pages/bookings-auto.tsx renamed to MyApp.Client/app/bookings-auto/page.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
'use client'
2+
13
import Link from "next/link"
24
import { AutoQueryGrid } from "@servicestack/react"
35
import Page from "@/components/layout-page"
46
import { ValidateAuth } from "@/lib/auth"
57
import SrcPage from "@/components/src-page"
68

7-
function Index() {
8-
9-
9+
function BookingsAuto() {
1010
return (<Page title="Bookings CRUD (Auto Columns)">
1111

1212
<div className="mb-4 flex justify-end">
@@ -26,5 +26,4 @@ function Index() {
2626
</Page>)
2727
}
2828

29-
export default ValidateAuth(Index, {role: 'Employee'})
30-
29+
export default ValidateAuth(BookingsAuto, {role: 'Employee'})

MyApp.Client/pages/bookings-custom.tsx renamed to MyApp.Client/app/bookings-custom/page.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { useState, useEffect } from "react"
1+
'use client'
2+
3+
import { useState } from "react"
24
import Link from "next/link"
35
import { useFormatters, AutoQueryGrid, TextLink, PreviewFormat, AutoEditForm, Icon } from "@servicestack/react"
46
import Page from "@/components/layout-page"
57
import { ValidateAuth } from "@/lib/auth"
68
import SrcPage from "@/components/src-page"
79

8-
function Index() {
10+
function BookingsCustom() {
911
const { currency } = useFormatters()
1012
const [coupon, setCoupon] = useState<any>(null)
1113

@@ -76,7 +78,7 @@ function Index() {
7678
onSave={() => setCoupon(null)}
7779
/>
7880
)}
79-
81+
8082
<div className="mt-4 text-center text-gray-400 flex justify-center -ml-6">
8183
<SrcPage path="bookings-custom.tsx" />
8284
</div>
@@ -85,5 +87,4 @@ function Index() {
8587
</Page>)
8688
}
8789

88-
export default ValidateAuth(Index, {role: 'Employee'})
89-
90+
export default ValidateAuth(BookingsCustom, {role: 'Employee'})

MyApp.Client/pages/features.mdx renamed to MyApp.Client/app/features/page.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Layout from "../components/layout-article"
1+
import Layout from "@/components/layout-article"
22

33
export const meta = {
44
title: 'Template Features'

MyApp.Client/pages/forbidden.tsx renamed to MyApp.Client/app/forbidden/page.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
export default () => {
2-
return (<>
1+
export default function Forbidden() {
2+
return (
33
<div className="text-black bg-white h-screen text-center flex flex-col items-center justify-center">
44
<div>
55
<h1 className="inline-block border-gray-300 border-r m-0 mr-5 py-2 pr-4 text-2xl font-medium align-top">403</h1>
66
<div className="inline-block text-left h-8 align-middle">
77
<h2 className="text-sm leading-10 font-normal m-0 p-0">You do not have access to this page.</h2>
88
</div>
99
</div>
10-
</div>
11-
</>
10+
</div>
1211
)
1312
}

‎MyApp.Client/app/layout.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import "../styles/index.css"
2+
import "../styles/main.css"
3+
import "../styles/prism-dark-blue.css"
4+
import type { Metadata } from 'next'
5+
import Providers from './providers'
6+
7+
export const metadata: Metadata = {
8+
title: 'Next.js Example',
9+
description: 'Next.js App Router Example',
10+
}
11+
12+
export default function RootLayout({
13+
children,
14+
}: {
15+
children: React.ReactNode
16+
}) {
17+
return (
18+
<html lang="en" className="h-full">
19+
<head />
20+
<body className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
21+
<script
22+
dangerouslySetInnerHTML={{
23+
__html: `
24+
(function() {
25+
function getTheme() {
26+
const theme = localStorage.getItem('color-scheme');
27+
if (theme) return theme;
28+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
29+
}
30+
const theme = getTheme();
31+
if (theme === 'dark') {
32+
document.documentElement.classList.add('dark');
33+
}
34+
})();
35+
`,
36+
}}
37+
/>
38+
<Providers>{children}</Providers>
39+
</body>
40+
</html>
41+
)
42+
}

‎MyApp.Client/app/page.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import Container from "@/components/container"
2+
import MoreStories from "@/components/more-stories"
3+
import HeroPost from "@/components/hero-post"
4+
import Intro from "@/components/intro"
5+
import Layout from "@/components/layout"
6+
import { getAllPosts } from "@/lib/api"
7+
import { CMS_NAME } from "@/lib/constants"
8+
import Post from "@/types/post"
9+
import GettingStarted from "@/components/getting-started"
10+
import BuiltInUis from "@/components/builtin-uis"
11+
import type { Metadata } from 'next'
12+
13+
export const metadata: Metadata = {
14+
title: `Next.js Example with ${CMS_NAME}`,
15+
}
16+
17+
export default function Index() {
18+
const allPosts = getAllPosts([
19+
'title',
20+
'date',
21+
'slug',
22+
'author',
23+
'coverImage',
24+
'excerpt',
25+
]) as unknown as Post[]
26+
27+
const heroPost = allPosts[0]
28+
const morePosts = allPosts.slice(1)
29+
30+
return (
31+
<Layout>
32+
<Container>
33+
<Intro />
34+
<div className="mb-32 flex justify-center">
35+
<GettingStarted template="nextjs" />
36+
</div>
37+
38+
39+
<div className="flex justify-center my-20 py-20 bg-slate-100 dark:bg-slate-800">
40+
<div className="text-center">
41+
<svg className="text-link-dark w-36 h-36 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.58 17.25l.92-3.89l-3-2.58l3.95-.37L12 6.8l1.55 3.65l3.95.33l-3 2.58l.92 3.89L12 15.19zM12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8"/></svg>
42+
<h1 className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">
43+
Built-in UIs
44+
</h1>
45+
</div>
46+
</div>
47+
48+
<div className="mb-40">
49+
<p className="mt-4 mb-10 text-xl text-gray-600 dark:text-gray-400">
50+
Manage your ServiceStack App and explore, discover, query and call APIs instantly with
51+
built-in Auto UIs dynamically generated from the rich metadata of your App's typed C# APIs &amp; DTOs
52+
</p>
53+
54+
<BuiltInUis />
55+
</div>
56+
57+
{heroPost && (
58+
<HeroPost
59+
title={heroPost.title}
60+
coverImage={heroPost.coverImage}
61+
date={heroPost.date}
62+
author={heroPost.author}
63+
slug={heroPost.slug}
64+
excerpt={heroPost.excerpt}
65+
/>
66+
)}
67+
{morePosts.length > 0 && <MoreStories posts={morePosts} />}
68+
</Container>
69+
</Layout>
70+
)
71+
}

‎MyApp.Client/app/posts/[slug]/page.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { notFound } from "next/navigation"
2+
import Container from "@/components/container"
3+
import PostBody from "@/components/post-body"
4+
import Header from "@/components/header"
5+
import PostHeader from "@/components/post-header"
6+
import Layout from "@/components/layout"
7+
import { getPostBySlug, getAllPosts } from "@/lib/api"
8+
import PostTitle from "@/components/post-title"
9+
import { CMS_NAME } from "@/lib/constants"
10+
import markdownToHtml from "@/lib/markdownToHtml"
11+
import type { Metadata } from 'next'
12+
import PostType from "@/types/post"
13+
14+
type Props = {
15+
params: Promise<{
16+
slug: string
17+
}>
18+
}
19+
20+
export async function generateMetadata({ params }: Props): Promise<Metadata> {
21+
const { slug } = await params
22+
const post = getPostBySlug(slug, ['title', 'ogImage']) as unknown as PostType
23+
const title = `${post.title} | Next.js Example with ${CMS_NAME}`
24+
25+
return {
26+
title,
27+
openGraph: {
28+
images: [post.ogImage.url],
29+
},
30+
}
31+
}
32+
33+
export async function generateStaticParams() {
34+
const posts = getAllPosts(['slug'])
35+
36+
return posts.map((post) => ({
37+
slug: post.slug,
38+
}))
39+
}
40+
41+
export default async function Post({ params }: Props) {
42+
const { slug } = await params
43+
const post = getPostBySlug(slug, [
44+
'title',
45+
'date',
46+
'slug',
47+
'author',
48+
'content',
49+
'ogImage',
50+
'coverImage',
51+
]) as unknown as PostType
52+
53+
if (!post?.slug) {
54+
notFound()
55+
}
56+
57+
const content = await markdownToHtml(post.content || '')
58+
59+
return (
60+
<Layout>
61+
<Container>
62+
<Header />
63+
<article className="prose lg:prose-xl max-w-none mb-32">
64+
<PostHeader
65+
title={post.title}
66+
coverImage={post.coverImage}
67+
date={post.date}
68+
author={post.author}
69+
/>
70+
<PostBody content={content} />
71+
</article>
72+
</Container>
73+
</Layout>
74+
)
75+
}

‎MyApp.Client/app/posts/page.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from "react"
2+
import Layout from "@/components/layout"
3+
import { getAllPosts } from "@/lib/api"
4+
import type { Metadata } from 'next'
5+
6+
export const metadata: Metadata = {
7+
title: 'Markdown Posts',
8+
}
9+
10+
export default function Posts() {
11+
const allPosts = getAllPosts([
12+
'title',
13+
'slug',
14+
'excerpt',
15+
])
16+
17+
return (
18+
<Layout>
19+
<main>
20+
<div className="max-w-7xl mx-auto px-5">
21+
<h1 className="text-4xl font-bold my-8 text-gray-900 dark:text-gray-100">Markdown Posts</h1>
22+
<h3 className="text-lg mb-8">
23+
List of Markdown Posts in <span
24+
className="bg-blue-50 text-blue-500 dark:bg-blue-900 dark:text-blue-200 py-1 px-2 rounded">/pages</span>
25+
</h3>
26+
{allPosts.map((post) => (
27+
<div className="mb-8" key={post.slug}>
28+
<a className="text-2xl hover:text-green-600" href={`/posts/${post.slug}`}>{post.title}</a>
29+
{!post.excerpt ? null : <p className="text-gray-500">
30+
{post.excerpt}
31+
</p>}
32+
</div>
33+
))}
34+
</div>
35+
</main>
36+
</Layout>
37+
)
38+
}

MyApp.Client/pages/profile.tsx renamed to MyApp.Client/app/profile/page.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
'use client'
2+
13
import React from "react"
2-
import Page from "../components/layout-page"
4+
import Page from "@/components/layout-page"
35
import {SecondaryButton} from "@servicestack/react"
46
import {appAuth, ValidateAuth} from "@/lib/auth"
57

0 commit comments

Comments
 (0)