Skip to content

Commit

Permalink
install contentlayer and init config (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
benorloff committed Apr 23, 2024
1 parent da70038 commit 89702a7
Show file tree
Hide file tree
Showing 12 changed files with 11,856 additions and 7,899 deletions.
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,7 @@ yarn-error.log*
*.tsbuildinfo
next-env.d.ts

*storybook.log
*storybook.log

# contentlayer
.contentlayer
126 changes: 126 additions & 0 deletions app/gluons/content-accordion/_demo/content-accordion-code.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
export const ContentAccordionCode = `
"use client"
import { useState } from "react";
import Image from "next/image";
import { cn } from "@/lib/utils";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger
} from "@/components/ui/accordion";
export const ContentAccordion = () => {
const [active, setActive] = useState<number | null>(1);
return (
<div className="@container grid grid-cols-3 items-stretch">
<div className="col-span-3 @lg:col-span-2">
{active === 1 && (
<Image
src="/unsplash-abstract-1.jpeg"
alt="placeholder"
width={1920}
height={1080}
className={cn(
active === 1 ? "opacity-100" : "opacity-0",
"transition-opacity duration-500 ease-in-out",
)}
/>
)}
{active === 2 && (
<Image
src="/unsplash-abstract-2.jpeg"
alt="placeholder"
width={1920}
height={1080}
className={cn(
active === 2 ? "opacity-100" : "opacity-0",
"transition-opacity duration-500 ease-in-out",
)}
/>
)}
{active === 3 && (
<Image
src="/unsplash-abstract-3.jpeg"
alt="placeholder"
width={1920}
height={1080}
className={cn(
active === 3 ? "opacity-100" : "opacity-0",
"transition-opacity duration-500 ease-in-out",
)}
/>
)}
</div>
<div className="col-span-3 @lg:col-span-1">
<Accordion type="single" defaultValue="1" className="flex flex-col items-stretch h-full border-t border-x">
<AccordionItem
value="1"
className={cn(
"relative grow text-lg group before:content[''] before:w-[2px] before:absolute before:top-0 before:left-0 before:bg-foreground before:transition-all before:ease-in-out before:duration-300 ",
active === 1
? "before:h-full before:opacity-100"
: "before:h-0 before:opacity-0"
)}
>
<AccordionTrigger
onClick={() => setActive(1)}
className="text-muted-foreground data-[state=open]:text-foreground p-6 group-hover:text-foreground !no-underline transition-colors ease-in-out duration-300"
>
Accordion 1
</AccordionTrigger>
<AccordionContent
className="p-6 pt-0"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</AccordionContent>
</AccordionItem>
<AccordionItem
value="2"
className={cn(
"relative grow text-lg group before:content[''] before:w-[2px] before:absolute before:top-0 before:left-0 before:bg-foreground before:transition-all before:ease-in-out before:duration-300 ",
active === 2
? "before:h-full before:opacity-100"
: "before:h-0 before:opacity-0"
)}
>
<AccordionTrigger
onClick={() => setActive(2)}
className="text-muted-foreground data-[state=open]:text-foreground p-6 group-hover:text-foreground !no-underline transition-colors ease-in-out duration-300"
>
Accordion 2
</AccordionTrigger>
<AccordionContent
className="p-6 pt-0"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</AccordionContent>
</AccordionItem>
<AccordionItem
value="3"
className={cn(
"relative grow text-lg group before:content[''] before:w-[2px] before:absolute before:top-0 before:left-0 before:bg-foreground before:transition-all before:ease-in-out before:duration-300 ",
active === 3
? "before:h-full before:opacity-100"
: "before:h-0 before:opacity-0"
)}
>
<AccordionTrigger
onClick={() => setActive(3)}
className="text-muted-foreground data-[state=open]:text-foreground p-6 group-hover:text-foreground !no-underline transition-colors ease-in-out duration-300"
>
Accordion 3
</AccordionTrigger>
<AccordionContent
className="p-6 pt-0"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</div>
)
}`.trim();
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { ContentAccordion } from "@/components/gluons/content-accordion"

export const ContentAccordionPreview = () => {
return (
<ContentAccordion />
)
};
48 changes: 15 additions & 33 deletions app/gluons/content-accordion/page.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Breadcrumbs } from "@/components/breadcrumbs";
import { Demo } from "@/components/demo";
import { ContentAccordion } from "@/components/gluons/content-accordion";
import {
Breadcrumb,
Expand All @@ -13,45 +15,25 @@ import {
TabsTrigger
} from "@/components/ui/tabs";
import { Code } from "bright";
import { ContentAccordionPreview } from "./_demo/content-accordion-preview";
import { ContentAccordionCode } from "./_demo/content-accordion-code";

const ContentAccordionPage = () => {
return (
<div>
<section className="w-full space-y-2">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Docs</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Gluons</BreadcrumbLink>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<h1 className="text-4xl font-semibold">ContentAccordion</h1>
</section>
<section className="flex h-full w-full py-10 m-auto items-center justify-start">
<Tabs defaultValue="preview" className="w-full">
<TabsList>
<TabsTrigger value="preview">Preview</TabsTrigger>
<TabsTrigger value="code">Code</TabsTrigger>
</TabsList>
<TabsContent value="preview" className="w-full border rounded-md p-10">
<ContentAccordion />
</TabsContent>
<TabsContent value="code">
<Code
lang="tsx"
title="HoverGrid.tsx"
lineNumbers
className="w-full border rounded-md"
>
{`import React from "react";`}
</Code>
</TabsContent>
</Tabs>
<Breadcrumbs />
<h1 className="text-4xl font-semibold">HoverGrid</h1>
</section>
<Demo
title="HoverGrid.tsx"
lang="tsx"
code={ContentAccordionCode}
lineNumbers={true}
className="!my-0"
>
<ContentAccordionPreview />
</Demo>
</div>
)
}
Expand Down
6 changes: 3 additions & 3 deletions app/gluons/hover-grid/_demo/hover-grid-preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { ArrowUpRight } from "lucide-react";
export const HoverGridPreview = () => {
return (
<HoverGrid>
<HoverGridCell>
<HoverGridCell className="col-span-3 @lg:col-span-1">
<HoverGridHeader>
<HoverGridLeader>
01
Expand All @@ -34,7 +34,7 @@ export const HoverGridPreview = () => {
</HoverGridContent>
<HoverGridFooter>Learn more</HoverGridFooter>
</HoverGridCell>
<HoverGridCell>
<HoverGridCell className="col-span-3 @lg:col-span-1">
<HoverGridHeader>
<HoverGridLeader>
02
Expand All @@ -53,7 +53,7 @@ export const HoverGridPreview = () => {
</HoverGridContent>
<HoverGridFooter>Explore features</HoverGridFooter>
</HoverGridCell>
<HoverGridCell>
<HoverGridCell className="col-span-3 @lg:col-span-1">
<HoverGridHeader>
<HoverGridLeader>
03
Expand Down
8 changes: 4 additions & 4 deletions components/demo-preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ export const DemoPreview = ({
}

return (
<Card>
<CardHeader className="border-b py-4">
<Card className="bg-dot-grid bg-top">
<CardHeader className="border-b py-4 bg-background">
<div className="flex flex-row items-center justify-between">
<div>Header</div>
<div className="space-x-2">
Expand Down Expand Up @@ -57,12 +57,12 @@ export const DemoPreview = ({
</CardHeader>
<CardContent
className={cn(
"py-8 flex justify-center items-center bg-dot-grid bg-center h-auto pxoverflow-hidden",
"py-8 flex justify-center items-start h-[500px] overflow-scroll",
devicePreview === "desktop" && "px-8",
)}
>
<div className={cn(
"@container grow h-full border rounded-md bg-background",
"@container grow border rounded-md bg-background",
devicePreview === "desktop" && "w-full",
devicePreview === "tablet" && "max-w-lg",
devicePreview === "smartphone" && "max-w-sm",
Expand Down
50 changes: 11 additions & 39 deletions components/gluons/content-accordion.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
"use client"

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { useState } from "react";
import Image from "next/image";
import { cn } from "@/lib/utils";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger
} from "@/components/ui/accordion";

export const ContentAccordion = () => {
const [active, setActive] = useState<number | null>(1);

return (
<>
<div className="grid grid-cols-3 items-stretch">
<div className="col-span-3 lg:col-span-2">
<div className="@container grid grid-cols-3 items-stretch">
<div className="col-span-3 @lg:col-span-2">
{active === 1 && (
<Image
src="/unsplash-abstract-1.jpeg"
Expand Down Expand Up @@ -49,7 +53,7 @@ export const ContentAccordion = () => {
/>
)}
</div>
<div className="col-span-3 lg:col-span-1">
<div className="col-span-3 @lg:col-span-1">
<Accordion type="single" defaultValue="1" className="flex flex-col items-stretch h-full border-t border-x">
<AccordionItem
value="1"
Expand Down Expand Up @@ -117,37 +121,5 @@ export const ContentAccordion = () => {
</Accordion>
</div>
</div>
{/* <div className="flex flex-row flex-wrap items-stretch">
<div className="relative grow bg-red-500 p-10 h-64">
<div
className={cn(
"absolute top-0 left-0 transition-opacity duration-500 ease-in-out",
active === 1 ? "opacity-100" : "opacity-0"
)}
>
Image 1
</div>
<div
className={cn(
"absolute top-0 left-0 transition-opacity duration-500 ease-in-out",
active === 2 ? "opacity-100" : "opacity-0"
)}
>
Image 2
</div>
<div
className={cn(
"absolute top-0 left-0 transition-opacity duration-500 ease-in-out",
active === 3 ? "opacity-100" : "opacity-0"
)}
>
Image 3
</div>
</div>
<div className="w-full lg:w-80 bg-blue-500 p-10">
Image
</div>
</div> */}
</>
)
}
16 changes: 16 additions & 0 deletions contentlayer.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// contentlayer.config.ts
import { defineDocumentType, makeSource } from 'contentlayer/source-files'

export const Post = defineDocumentType(() => ({
name: 'Post',
filePathPattern: `**/*.md`,
fields: {
title: { type: 'string', required: true },
date: { type: 'date', required: true },
},
computedFields: {
url: { type: 'string', resolve: (post) => `/posts/${post._raw.flattenedPath}` },
},
}))

export default makeSource({ contentDirPath: 'posts', documentTypes: [Post] })
4 changes: 3 additions & 1 deletion next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { withContentlayer } from "next-contentlayer";

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;
export default withContentlayer(nextConfig);
Loading

0 comments on commit 89702a7

Please sign in to comment.