Skip to content

Commit 6403dfd

Browse files
phuocngphuocng
committed
Fix details layout
1 parent 3ca9720 commit 6403dfd

File tree

115 files changed

+767
-797
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

115 files changed

+767
-797
lines changed

‎bin/generateScreenshot.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const main = () => {
1818
const browser = await puppeteer.launch();
1919

2020
const page = await browser.newPage();
21-
await page.goto(`http://localhost:3000/patterns/${pattern}`);
21+
await page.goto(`http://localhost:3000/${pattern}`);
2222

2323
await page.waitForSelector('.demo__live');
2424
const element = await page.$('.demo__live');

‎client/components/Heading.tsx‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎client/components/RelatedPatterns.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎client/layouts/DetailsLayout.tsx‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎components/Code.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
import Highlight, { defaultProps } from 'prism-react-renderer';
3+
import theme from 'prism-react-renderer/themes/vsDark';
4+
5+
export const Code = ({ children, className }) => {
6+
const lang = className ? className.split('-').pop() : 'js';
7+
8+
return (
9+
<Highlight {...defaultProps} theme={theme} code={children.trim()} language={lang}>
10+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
11+
<pre className={`block-code ${className}`} style={{ ...style }}>
12+
{tokens.map((line, i) => (
13+
<div key={i} {...getLineProps({ line, key: i })}>
14+
{line.map((token, key) => (
15+
<span key={key} {...getTokenProps({ token, key })} />
16+
))}
17+
</div>
18+
))}
19+
</pre>
20+
)}
21+
</Highlight>
22+
);
23+
};

‎components/CoverCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
139139
const Cover = CoverList[pattern];
140140

141141
return (
142-
<Link href={`/patterns/${slug(pattern)}`}>
142+
<Link href={`/${slug(pattern)}`}>
143143
<a className="block-cover">
144144
<Cover />
145145
<h4 className="block-cover__name">

‎components/RelatedPatterns.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
import { Heading, Spacer } from '@1milligram/design';
3+
4+
import { Pattern } from '../constants/Pattern';
5+
import { CoverCard } from './CoverCard';
6+
7+
interface RelatedPatternsProps {
8+
patterns: Pattern[];
9+
}
10+
11+
export const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
12+
return (
13+
<section>
14+
<Heading level={2}>See also</Heading>
15+
16+
<div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '1.5rem' }}>
17+
{
18+
patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
19+
}
20+
</div>
21+
</section>
22+
);
23+
};

‎layouts/DetailsLayout.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import * as React from 'react';
2+
import Head from 'next/head';
3+
import { Heading, Spacer } from '@1milligram/design';
4+
5+
import { Pattern } from '../constants/Pattern';
6+
import { slug } from '../utils/slug';
7+
import { Layout } from './Layout';
8+
9+
interface DetailsLayoutProps {
10+
pattern: Pattern;
11+
}
12+
13+
export const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
14+
const patternSlug = slug(pattern);
15+
16+
return (
17+
<Layout title={pattern}>
18+
<Head>
19+
<title>CSS Layout ∙ {pattern}</title>
20+
<meta name="title" content={`${pattern} - CSS Layout`} />
21+
22+
<meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
23+
<meta property="og:title" content={`${pattern} - CSS Layout`} />
24+
<meta property="og:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
25+
26+
<meta property="twitter:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
27+
<meta property="twitter:title" content={`${pattern} - CSS Layout`} />
28+
<meta property="twitter:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
29+
</Head>
30+
31+
<div className="block-container">
32+
<div className="page-home__hero">
33+
<Spacer size="extraLarge" />
34+
<Heading level={1}>{pattern}</Heading>
35+
<Spacer size="large" />
36+
</div>
37+
38+
{children}
39+
</div>
40+
</Layout>
41+
);
42+
};

‎pages/accordion/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
*/
55

66
import * as React from 'react';
7-
import { Helmet } from 'react-helmet';
7+
import Head from 'next/head';
88

9-
import RelatedPatterns from '../../components/RelatedPatterns';
10-
import Pattern from '../../constants/Pattern';
11-
import DetailsLayout from '../../layouts/DetailsLayout';
9+
import { RelatedPatterns } from '../../components/RelatedPatterns';
10+
import { Pattern } from '../../constants/Pattern';
11+
import { DetailsLayout } from '../../layouts/DetailsLayout';
1212
import Block from '../../placeholders/Block';
1313
import BrowserFrame from '../../placeholders/BrowserFrame';
1414
import Rectangle from '../../placeholders/Rectangle';
@@ -58,12 +58,12 @@ const Details: React.FC<{}> = () => {
5858

5959
return (
6060
<DetailsLayout pattern={Pattern.Accordion}>
61-
<Helmet>
61+
<Head>
6262
<meta name="description" content="Create an accordion with CSS flexbox" />
6363
<meta name="og:description" content="Create an accordion with CSS flexbox" />
6464
<meta name="twitter:description" content="Create an accordion with CSS flexbox" />
6565
<meta name="keywords" content="css accordion, css flexbox" />
66-
</Helmet>
66+
</Head>
6767
<div className='p-8 pb-20'>
6868
<BrowserFrame
6969
html={`

‎pages/arrow-buttons/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@
44
*/
55

66
import * as React from 'react';
7-
import { Helmet } from 'react-helmet';
7+
import Head from 'next/head';
88

9-
import RelatedPatterns from '../../components/RelatedPatterns';
10-
import Pattern from '../../constants/Pattern';
11-
import DetailsLayout from '../../layouts/DetailsLayout';
9+
import { RelatedPatterns } from '../../components/RelatedPatterns';
10+
import { Pattern } from '../../constants/Pattern';
11+
import { DetailsLayout } from '../../layouts/DetailsLayout';
1212
import BrowserFrame from '../../placeholders/BrowserFrame';
1313

1414
const Details: React.FC<{}> = () => {
1515
return (
1616
<DetailsLayout pattern={Pattern.ArrowButtons}>
17-
<Helmet>
17+
<Head>
1818
<meta name="description" content="Create arrow buttons with CSS" />
1919
<meta name="og:description" content="Create arrow buttons with CSS" />
2020
<meta name="twitter:description" content="Create arrow buttons with CSS" />
2121
<meta name="keywords" content="css arrow buttons" />
22-
</Helmet>
22+
</Head>
2323
<div className='p-8 pb-20'>
2424
<BrowserFrame
2525
html={`

0 commit comments

Comments
 (0)