Skip to content

Commit

Permalink
added cms skeleton (local/static)
Browse files Browse the repository at this point in the history
  • Loading branch information
@laubsauger
laubsauger committed May 22, 2024
1 parent 4d642e8 commit 1861871
Show file tree
Hide file tree
Showing 11 changed files with 1,351 additions and 243 deletions.
7 changes: 5 additions & 2 deletions next.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
module.exports = {
const withMDX = require('@next/mdx')()
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
// Optionally, add any other Next.js config below
reactStrictMode: true,
compiler: {
styledComponents: true,
},
output: 'standalone',
};
})
4 changes: 4 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@
"dependencies": {
"@ant-design/icons": "^5.2.6",
"@babel/runtime": "^7.23.2",
"@mdx-js/loader": "^3.0.1",
"@mdx-js/react": "^3.0.1",
"@next/mdx": "^14.2.3",
"@next/third-parties": "^14.2.3",
"@types/mdx": "^2.0.13",
"antd": "^5.12.2",
"autoprefixer": "^10.4.16",
"next": "^14.0.1",
Expand Down
20 changes: 20 additions & 0 deletions pages/blog/[...post].tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import LayoutBlog from '@/components/layouts/layout-blog';
import Link from 'next/link';

const BlogPostPage = ({post}) => {
return (
<LayoutBlog>
<div>
A blog post / article
<div className="dark:bg-gray-900">
<Link href={'/blog'}>
Back to list
</Link>
{JSON.stringify(post)}
</div>
</div>
</LayoutBlog>
)
}

export default BlogPostPage
14 changes: 14 additions & 0 deletions pages/blog/hello-eden.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import MdxLayout from '@/components/layouts/layout-blog'

[//]: # (This is a comment. All of this is markdown)
# Welcome to my MDX page!

Bla **Bli** blub [Create stuff with Eden.Art](https://app.eden.art/)

export default function MDXPage({ children }) {
return (
<MdxLayout>
{children}
</MdxLayout>
)
}
48 changes: 48 additions & 0 deletions pages/blog/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import LayoutBlog from '@/components/layouts/layout-blog';
import BlogPostPreview from '@/components/BlogPostPreview';

export async function getStaticProps() {
// const res = await fetch('https://.../posts')
// const posts = await res.json()

const posts = [{
id: '1',
title: 'title',
image: '/123.png',
date: 'date',
content: 'content content content',
permalink: '/blog/1'
},
{
id: '2',
title: 'title',
image: '/456.png',
date: 'date',
content: 'content content content',
permalink: '/blog/2'
}]

return {
props: {
posts,
},
}
}

const BlogIndexPage = ({posts}) => {
return (
<LayoutBlog>
<div>
<h2>Blog</h2>
<div>
<h4>Posts</h4>
<div className="flex flex-col gap-16">
{posts.map(post => (<BlogPostPreview post={post}/>))}
</div>
</div>
</div>
</LayoutBlog>
)
}

export default BlogIndexPage
30 changes: 30 additions & 0 deletions src/components/BlogPostPreview.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Link from 'next/link';

const BlogPostPreview = ({post}) => {
return (
<div className="flex flex-col items-center gap-4 w-2xl">
<Link href={post.permalink}>
<img
alt="By artists, for artists"
src="/custom-models.jpg"
className="rounded-2xl w-full h-72 object-cover object-top"
/>
</Link>
<div className="w-full">
<p className="lg:mb-4 text-2xl font-bold lg:text-3xl md:text-xl sm:text-lg">
<Link href={'https://app.eden.art/'}>
{post.title}
</Link>
</p>
<p
className="mt-2 md:mt-1 lg:mt-4 max-w-xl text-lg text-white lg:text-xl md:text-lg sm:text-xs font-extralight">
{post.content}
</p>
</div>

<pre className="bg-gray-800 p-4 rounded-lg">{JSON.stringify(post, null, 2)}</pre>
</div>
)
}

export default BlogPostPreview
250 changes: 9 additions & 241 deletions src/components/EdenArtFrontPage/EdenArtFrontPage.tsx
View file

Large diffs are not rendered by default.

47 changes: 47 additions & 0 deletions src/components/VideoHeroSection.tsx
View file

Large diffs are not rendered by default.

21 changes: 21 additions & 0 deletions src/components/layouts/layout-blog.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { ReactNode } from 'react';
import Footer from '@/components/Footer';
import NavHeader from '@/components/navigation/NavHeader';

export default function LayoutBlog({ children }: { children: ReactNode }) {
return (
<div className="bg-black">
<NavHeader/>
<div className="relative min-h-screen flex flex-col ">
<section className="flex-grow">
<div className="text-white flex px-4 xl:px-24 flex-col z-10 m-10 mt-32">
{children}
</div>
</section>
<div className="mt-2">
<Footer/>
</div>
</div>
</div>
)
}
204 changes: 204 additions & 0 deletions src/components/navigation/NavHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
import Link from 'next/link';
import { ControlOutlined, FileTextOutlined, MenuOutlined } from '@ant-design/icons';
import { useState } from 'react';
import useWindowSize from '@/hooks/useWindowSize';

const NavHeader = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false)
const size = useWindowSize()

return (
<div
className={`fixed z-50 w-full bg-black opacity-75 ${
isMenuOpen && size.width < 640 ? 'h-72' : 'h-16'
} mt-8`}
>
{' '}
<div className="flex justify-between">
<div className=" flex items-center">
<Link href="/">
<img
src="/logo.png"
alt="Eden Logo"
className="cursor-pointer h-16 sm:h-16 pl-4 sm:pl-24 pt-3 pb-3 object-contain"
/>
</Link>
<Link href="/">
<p className="text-xl pl-2 font-sarif font-light text-white sm:text-2xl">
eden.art
</p>
</Link>
<Link href="https://app.eden.art/">
{size.width > 640 && (
<div className="flex">
<div className="border border-l-white h-8 ml-4 opacity-40"></div>

<p className="text-xl mt-0.5 pl-4 font-sarif font-light text-white sm:text-lg">
Explore
</p>
</div>
)}
</Link>
<Link href="https://docs.eden.art/">
{size.width > 640 && (
<div className="flex">
<div className="border border-l-white h-8 ml-4 opacity-40"></div>

<p className="text-xl mt-0.5 pl-4 font-sarif font-light text-white sm:text-lg">
Docs
</p>
</div>
)}
</Link>
</div>

<div className="flex items-center pr-4 sm:pr-20">
<div className="sm:hidden text-white pb-1">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="px-2 py-1"
>
<MenuOutlined/>
</button>
</div>
<div className="hidden sm:flex">
<Link
target="_blank"
rel="noopener noreferrer"
href="https://github.com/edenartlab"
>
<img alt="Github Logo" src="/github.png" className="h-8 sm:h-10 object-contain"/>
</Link>
<Link
target="_blank"
rel="noopener noreferrer"
href="https://discord.com/invite/4dSYwDT"
>
<img
alt="Discord Logo"
src="/discord.png"
className="h-8 ml-2 sm:h-10 sm:ml-4 object-contain"
/>
</Link>
<Link
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/Eden_Art_"
>
<img
alt="Twitter Logo"
src="/twitter.png"
className="h-8 ml-2 sm:h-10 sm:ml-4 object-contain"
/>
</Link>
<Link
target="_blank"
rel="noopener noreferrer"
href="https://instagram.com/eden.art____"
>
<img
alt="Instagram Logo"
src="/instagram.png"
className="h-8 ml-2 sm:h-10 sm:ml-4 object-contain"
/>
</Link>
</div>
</div>
</div>
{isMenuOpen && size.width < 640 && (
<div className="flex flex-col mt-1">
<Link
target="_blank"
rel="noopener noreferrer"
href="https://app.eden.art"
>
<div className="flex">
<ControlOutlined
style={{ fontSize: '26px' }}
className="text-white ml-5 mt-1 mb-2"
/>{' '}
<p className="text-white ml-2.5 mt-2 text-sm font-bold">
EXPLORE
</p>
</div>
</Link>
<Link
target="_blank"
rel="noopener noreferrer"
href="https://docs.eden.art"
>
<div className="flex">
<FileTextOutlined
style={{ fontSize: '26px' }}
className="text-white ml-5 mt-1 mb-2"
/>{' '}
<p className="text-white ml-2.5 mt-2 text-sm font-bold">
DOCS
</p>
</div>
</Link>
<div className="border border-b mx-5 opacity-40 "></div>
<Link
target="_blank"
rel="noopener noreferrer"
href="https://github.com/edenartlab"
>
<div className="flex">
<img
alt="Github Logo"
src="/github.png"
className="h-8 mt-1.5 ml-4 object-contain"
/>{' '}
<p className="text-white ml-2 mt-3 text-sm font-bold">
GITHUB
</p>
</div>
</Link>

<Link
target="_blank"
rel="noopener noreferrer"
href="https://discord.com/invite/4dSYwDT"
>
<div className="flex">
<img
alt="Discord Logo"
src="/discord.png"
className="h-8 ml-4 mt-0.5 object-contain"
/>{' '}
<p className="text-white ml-2 mt-2 text-sm font-bold">
DISCORD
</p>
</div>
</Link>
<Link
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/Eden_Art_"
>
<div className="flex">
<img alt="Twitter Logo" src="/twitter.png" className="h-8 ml-4 object-contain"/>{' '}
<p className="text-white ml-2 mt-2 text-sm font-bold">
TWITTER
</p>
</div>
</Link>
<Link
target="_blank"
rel="noopener noreferrer"
href="https://instagram.com/eden.art____"
>
<div className="flex">
<img alt="Instagram Logo" src="/instagram.png" className="h-8 ml-4 object-contain"/>{' '}
<p className="text-white ml-2 mt-2 text-sm font-bold">
INSTAGRAM
</p>
</div>
</Link>
</div>
)}
</div>
)
}

export default NavHeader
Loading

0 comments on commit 1861871

Please sign in to comment.