mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-09 15:46:55 +02:00
Code Issues Releases Wiki Activity

Fix build

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-09-27 23:45:49 +07:00
parent 829d57c1bf
commit b53be6fd08
10 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierignore
View File

@@ -1,3 +1,4 @@
.netlify .netlify
.next .next
node_modules node_modules
out

11
components/Code.tsx
View File

@@ -1,12 +1,13 @@
import * as React from 'react'; import * as React from 'react';
import Highlight, { defaultProps } from 'prism-react-renderer'; import Highlight, { defaultProps, Language } from 'prism-react-renderer';
import theme from 'prism-react-renderer/themes/vsDark'; import theme from 'prism-react-renderer/themes/vsDark';
export const Code = ({ children, className }) => { export const Code: React.FC<{
const lang = className ? className.split('-').pop() : 'js'; children: string;
language: Language;
}> = ({ children, language }) => {
return ( return (
<Highlight {...defaultProps} theme={theme} code={children.trim()} language={lang}> <Highlight {...defaultProps} theme={theme} code={children.trim()} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => ( {({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre className={`block-code ${className}`} style={{ ...style }}> <pre className={`block-code ${className}`} style={{ ...style }}>
{tokens.map((line, i) => ( {tokens.map((line, i) => (

10
pages/_app.tsx
View File

@@ -1,10 +1,14 @@
import React from 'react';
import Head from 'next/head'; import Head from 'next/head';
// Design // Design
import '@1milligram/design/lib/styles/index.css'; import '@1milligram/design/lib/styles/index.css';
import '../styles/index.scss'; import '../styles/index.scss';
export default function MyApp({ Component, pageProps }) { const MyApp: React.FC<{
Component: any;
pageProps: any;
}> = ({ Component, pageProps }) => {
return ( return (
<> <>
<Head> <Head>
@@ -13,4 +17,6 @@ export default function MyApp({ Component, pageProps }) {
<Component {...pageProps} /> <Component {...pageProps} />
</> </>
); );
} };
export default MyApp;

1
pages/folder-structure/index.tsx
View File

@@ -7,7 +7,6 @@ import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout'; import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Square from '../../placeholders/Square'; import Square from '../../placeholders/Square';
import './folder-structure.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (

2
pages/inverted-corners/index.tsx
View File

@@ -7,8 +7,6 @@ import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout'; import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import './inverted-corners.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<PatternLayout pattern={Pattern.InvertedCorners}> <PatternLayout pattern={Pattern.InvertedCorners}>

1
pages/layered-card/index.tsx
View File

@@ -6,7 +6,6 @@ import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout'; import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import './styles.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (

2
pages/masonry-grid/index.tsx
View File

@@ -8,8 +8,6 @@ import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle'; import Rectangle from '../../placeholders/Rectangle';
import './masonry-grid.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (
<PatternLayout pattern={Pattern.MasonryGrid}> <PatternLayout pattern={Pattern.MasonryGrid}>

1
pages/three-dimensions-card/index.tsx
View File

@@ -6,7 +6,6 @@ import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern'; import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout'; import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame'; import BrowserFrame from '../../placeholders/BrowserFrame';
import './styles.css';
const Details: React.FC<{}> = () => { const Details: React.FC<{}> = () => {
return ( return (

4
placeholders/BrowserFrame.tsx
View File

@@ -12,10 +12,10 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
return ( return (
<Window> <Window>
<div className="demo__html"> <div className="demo__html">
<Code className="lang-html">{html}</Code> <Code language="markup">{html}</Code>
</div> </div>
<div className="demo__css"> <div className="demo__css">
<Code className="lang-css">{css}</Code> <Code language="css">{css}</Code>
</div> </div>
<div className="demo__live">{children}</div> <div className="demo__live">{children}</div>
</Window> </Window>

2
tsconfig.json
View File

@@ -18,5 +18,5 @@
"isolatedModules": true "isolatedModules": true
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"] "exclude": ["bin", "node_modules"]
} }