From 80d924aeaf7a5ed1e21c7ed3d88d7b2dfa675513 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Thu, 22 Sep 2022 10:19:48 +0700 Subject: [PATCH] feat: Banner --- components/Ad.tsx | 25 ----- components/Code.tsx | 24 ----- components/CoverCard.tsx | 149 ------------------------- components/CssScanBanner.tsx | 16 --- components/Follow.tsx | 8 -- components/FooterBlock.tsx | 32 ------ components/HeaderBlock.tsx | 37 ------- components/RelatedPatterns.tsx | 21 ---- contents/_includes/css-scan.njk | 12 +++ contents/_includes/layouts/post.njk | 3 + contents/index.njk | 2 + pages/_app.tsx | 22 ---- pages/_document.tsx | 52 --------- pages/index.tsx | 161 ---------------------------- styles/blocks/_css-scan.scss | 83 ++++++++++++++ styles/index.scss | 1 + 16 files changed, 101 insertions(+), 547 deletions(-) delete mode 100644 components/Ad.tsx delete mode 100644 components/Code.tsx delete mode 100644 components/CoverCard.tsx delete mode 100644 components/CssScanBanner.tsx delete mode 100644 components/Follow.tsx delete mode 100644 components/FooterBlock.tsx delete mode 100644 components/HeaderBlock.tsx delete mode 100644 components/RelatedPatterns.tsx create mode 100644 contents/_includes/css-scan.njk delete mode 100644 pages/_app.tsx delete mode 100644 pages/_document.tsx delete mode 100644 pages/index.tsx create mode 100644 styles/blocks/_css-scan.scss diff --git a/components/Ad.tsx b/components/Ad.tsx deleted file mode 100644 index aa89a13..0000000 --- a/components/Ad.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; - -export const Ad: React.FC<{}> = () => { - const containerRef = React.useRef(null); - const source = 'https://cdn.carbonads.com/carbon.js?serve=CE7I6KQL&placement=csslayoutio'; - - React.useEffect(() => { - const container = containerRef.current; - if (!container) { - return; - } - - const script = document.createElement('script'); - script.src = source; - script.async = true; - script.id = '_carbonads_js'; - container.appendChild(script); - - return () => { - container.removeChild(script); - }; - }, []); - - return
; -}; diff --git a/components/Code.tsx b/components/Code.tsx deleted file mode 100644 index 18b8d96..0000000 --- a/components/Code.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import Highlight, { defaultProps, Language } from 'prism-react-renderer'; -import theme from 'prism-react-renderer/themes/vsDark'; - -export const Code: React.FC<{ - children: string; - language: Language; -}> = ({ children, language }) => { - return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - 
-                    {tokens.map((line, i) => (
-                        

-                            {line.map((token, key) => (
-                                
-                            ))}
-                        

-                    ))}
-
- )} - - ); -}; diff --git a/components/CoverCard.tsx b/components/CoverCard.tsx deleted file mode 100644 index 3b90aa3..0000000 --- a/components/CoverCard.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import * as React from 'react'; -import dynamic from 'next/dynamic'; -import Link from 'next/link'; - -import { Pattern } from '../constants/Pattern'; -import { slug } from '../utils/slug'; - -interface CoverCardProps { - pattern: Pattern; -} - -const CoverList = { - // A - [Pattern.Accordion]: dynamic(() => import('../patterns/accordion/Cover')), - [Pattern.ArrowButtons]: dynamic(() => import('../patterns/arrow-buttons/Cover')), - [Pattern.Avatar]: dynamic(() => import('../patterns/avatar/Cover')), - [Pattern.AvatarList]: dynamic(() => import('../patterns/avatar-list/Cover')), - // B - [Pattern.Badge]: dynamic(() => import('../patterns/badge/Cover')), - [Pattern.Breadcrumb]: dynamic(() => import('../patterns/breadcrumb/Cover')), - [Pattern.ButtonWithIcon]: dynamic(() => import('../patterns/button-with-icon/Cover')), - // C - [Pattern.Card]: dynamic(() => import('../patterns/card/Cover')), - [Pattern.CardLayout]: dynamic(() => import('../patterns/card-layout/Cover')), - [Pattern.Centering]: dynamic(() => import('../patterns/centering/Cover')), - [Pattern.Chip]: dynamic(() => import('../patterns/chip/Cover')), - [Pattern.CircularNavigation]: dynamic(() => import('../patterns/circular-navigation/Cover')), - [Pattern.CloseButton]: dynamic(() => import('../patterns/close-button/Cover')), - [Pattern.ColorSwatch]: dynamic(() => import('../patterns/color-swatch/Cover')), - [Pattern.ConcaveCorners]: dynamic(() => import('../patterns/concave-corners/Cover')), - [Pattern.CookieBanner]: dynamic(() => import('../patterns/cookie-banner/Cover')), - [Pattern.CornerRibbon]: dynamic(() => import('../patterns/corner-ribbon/Cover')), - [Pattern.CurvedBackground]: dynamic(() => import('../patterns/curved-background/Cover')), - [Pattern.CustomCheckboxButton]: dynamic(() => import('../patterns/custom-checkbox-button/Cover')), - [Pattern.CustomRadioButton]: dynamic(() => import('../patterns/custom-radio-button/Cover')), - // D - [Pattern.DiagonalSection]: dynamic(() => import('../patterns/diagonal-section/Cover')), - [Pattern.DockedAtCorner]: dynamic(() => import('../patterns/docked-at-corner/Cover')), - [Pattern.DotLeader]: dynamic(() => import('../patterns/dot-leader/Cover')), - [Pattern.DotNavigation]: dynamic(() => import('../patterns/dot-navigation/Cover')), - [Pattern.Drawer]: dynamic(() => import('../patterns/drawer/Cover')), - [Pattern.DropArea]: dynamic(() => import('../patterns/drop-area/Cover')), - [Pattern.DropCap]: dynamic(() => import('../patterns/drop-cap/Cover')), - [Pattern.Dropdown]: dynamic(() => import('../patterns/dropdown/Cover')), - // F - [Pattern.FadingLongSection]: dynamic(() => import('../patterns/fading-long-section/Cover')), - [Pattern.FeatureComparison]: dynamic(() => import('../patterns/feature-comparison/Cover')), - [Pattern.FeatureList]: dynamic(() => import('../patterns/feature-list/Cover')), - [Pattern.FixedAtCorner]: dynamic(() => import('../patterns/fixed-at-corner/Cover')), - [Pattern.FixedAtSide]: dynamic(() => import('../patterns/fixed-at-side/Cover')), - [Pattern.FloatingLabel]: dynamic(() => import('../patterns/floating-label/Cover')), - [Pattern.FolderStructure]: dynamic(() => import('../patterns/folder-structure/Cover')), - [Pattern.FullBackground]: dynamic(() => import('../patterns/full-background/Cover')), - [Pattern.FullScreenMenu]: dynamic(() => import('../patterns/full-screen-menu/Cover')), - // H - [Pattern.HolyGrail]: dynamic(() => import('../patterns/holy-grail/Cover')), - // I - [Pattern.InitialAvatar]: dynamic(() => import('../patterns/initial-avatar/Cover')), - [Pattern.InputAddon]: dynamic(() => import('../patterns/input-addon/Cover')), - [Pattern.InvertedCorners]: dynamic(() => import('../patterns/inverted-corners/Cover')), - // K - [Pattern.KeyboardShortcut]: dynamic(() => import('../patterns/keyboard-shortcut/Cover')), - // L - [Pattern.LayeredCard]: dynamic(() => import('../patterns/layered-card/Cover')), - [Pattern.LinedPaper]: dynamic(() => import('../patterns/lined-paper/Cover')), - // M - [Pattern.MasonryGrid]: dynamic(() => import('../patterns/masonry-grid/Cover')), - [Pattern.MediaObject]: dynamic(() => import('../patterns/media-object/Cover')), - [Pattern.MegaMenu]: dynamic(() => import('../patterns/mega-menu/Cover')), - [Pattern.Menu]: dynamic(() => import('../patterns/menu/Cover')), - [Pattern.Modal]: dynamic(() => import('../patterns/modal/Cover')), - // N - [Pattern.NestedDropdowns]: dynamic(() => import('../patterns/nested-dropdowns/Cover')), - [Pattern.Notification]: dynamic(() => import('../patterns/notification/Cover')), - // O - [Pattern.OverlayPlayButton]: dynamic(() => import('../patterns/overlay-play-button/Cover')), - // P - [Pattern.Pagination]: dynamic(() => import('../patterns/pagination/Cover')), - [Pattern.PopoverArrow]: dynamic(() => import('../patterns/popover-arrow/Cover')), - [Pattern.PresenceIndicator]: dynamic(() => import('../patterns/presence-indicator/Cover')), - [Pattern.PreviousNextButtons]: dynamic(() => import('../patterns/previous-next-buttons/Cover')), - [Pattern.PriceTag]: dynamic(() => import('../patterns/price-tag/Cover')), - [Pattern.PricingTable]: dynamic(() => import('../patterns/pricing-table/Cover')), - [Pattern.ProgressBar]: dynamic(() => import('../patterns/progress-bar/Cover')), - [Pattern.PropertyList]: dynamic(() => import('../patterns/property-list/Cover')), - // Q - [Pattern.QuestionsAndAnswers]: dynamic(() => import('../patterns/questions-and-answers/Cover')), - // R - [Pattern.RadialProgressBar]: dynamic(() => import('../patterns/radial-progress-bar/Cover')), - [Pattern.RadioButtonGroup]: dynamic(() => import('../patterns/radio-button-group/Cover')), - [Pattern.RadioSwitch]: dynamic(() => import('../patterns/radio-switch/Cover')), - [Pattern.Rating]: dynamic(() => import('../patterns/rating/Cover')), - [Pattern.ResizableElement]: dynamic(() => import('../patterns/resizable-element/Cover')), - [Pattern.Ribbon]: dynamic(() => import('../patterns/ribbon/Cover')), - // S - [Pattern.SameHeightColumns]: dynamic(() => import('../patterns/same-height-columns/Cover')), - [Pattern.SearchBox]: dynamic(() => import('../patterns/search-box/Cover')), - [Pattern.Separator]: dynamic(() => import('../patterns/separator/Cover')), - [Pattern.Sidebar]: dynamic(() => import('../patterns/sidebar/Cover')), - [Pattern.SimpleGrid]: dynamic(() => import('../patterns/simple-grid/Cover')), - [Pattern.Slider]: dynamic(() => import('../patterns/slider/Cover')), - [Pattern.SpinButton]: dynamic(() => import('../patterns/spin-button/Cover')), - [Pattern.SplitNavigation]: dynamic(() => import('../patterns/split-navigation/Cover')), - [Pattern.SplitScreen]: dynamic(() => import('../patterns/split-screen/Cover')), - [Pattern.StackedCards]: dynamic(() => import('../patterns/stacked-cards/Cover')), - [Pattern.StampBorder]: dynamic(() => import('../patterns/stamp-border/Cover')), - [Pattern.Statistic]: dynamic(() => import('../patterns/statistic/Cover')), - [Pattern.StatusLight]: dynamic(() => import('../patterns/status-light/Cover')), - [Pattern.StepperInput]: dynamic(() => import('../patterns/stepper-input/Cover')), - [Pattern.StickyFooter]: dynamic(() => import('../patterns/sticky-footer/Cover')), - [Pattern.StickyHeader]: dynamic(() => import('../patterns/sticky-header/Cover')), - [Pattern.StickySections]: dynamic(() => import('../patterns/sticky-sections/Cover')), - [Pattern.StickyTableColumn]: dynamic(() => import('../patterns/sticky-table-column/Cover')), - [Pattern.StickyTableHeaders]: dynamic(() => import('../patterns/sticky-table-headers/Cover')), - [Pattern.Switch]: dynamic(() => import('../patterns/switch/Cover')), - // T - [Pattern.Tab]: dynamic(() => import('../patterns/tab/Cover')), - [Pattern.Teardrop]: dynamic(() => import('../patterns/teardrop/Cover')), - [Pattern.ThreeDimensionsCard]: dynamic(() => import('../patterns/three-dimensions-card/Cover')), - [Pattern.Timeline]: dynamic(() => import('../patterns/timeline/Cover')), - [Pattern.TogglePasswordVisibility]: dynamic(() => import('../patterns/toggle-password-visibility/Cover')), - [Pattern.Tooltip]: dynamic(() => import('../patterns/tooltip/Cover')), - [Pattern.TreeDiagram]: dynamic(() => import('../patterns/tree-diagram/Cover')), - [Pattern.TriangleButtons]: dynamic(() => import('../patterns/triangle-buttons/Cover')), - // U - [Pattern.UploadButton]: dynamic(() => import('../patterns/upload-button/Cover')), - // V - [Pattern.ValidationIcon]: dynamic(() => import('../patterns/validation-icon/Cover')), - [Pattern.VideoBackground]: dynamic(() => import('../patterns/video-background/Cover')), - [Pattern.Voting]: dynamic(() => import('../patterns/voting/Cover')), - // W - [Pattern.Watermark]: dynamic(() => import('../patterns/watermark/Cover')), - [Pattern.Wizard]: dynamic(() => import('../patterns/wizard/Cover')), - // Z - [Pattern.ZigzagTimeline]: dynamic(() => import('../patterns/zigzag-timeline/Cover')), -}; - -export const CoverCard: React.FC = ({ pattern }) => { - const Cover = CoverList[pattern]; - - return ( - - - -

{pattern}

- - - ); -}; diff --git a/components/CssScanBanner.tsx b/components/CssScanBanner.tsx deleted file mode 100644 index c3b99b9..0000000 --- a/components/CssScanBanner.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; - -export const CssScanBanner = () => ( - -
-

Have you seen CSS Scan?

-

The fastest and easiest way to check, copy and edit CSS.

-

Learn more →

- CSS Scan logo -
- -); diff --git a/components/Follow.tsx b/components/Follow.tsx deleted file mode 100644 index 433f7dc..0000000 --- a/components/Follow.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; - -export const Follow = () => ( -
- If you find this site helpful, follow me on Twitter and{' '} - GitHub to get more useful content like this. -
-); diff --git a/components/FooterBlock.tsx b/components/FooterBlock.tsx deleted file mode 100644 index 414b13e..0000000 --- a/components/FooterBlock.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import { Footer, FooterGroup, FooterLink } from '@1milligram/design'; - -export const FooterBlock = () => ( -
-
-
- - Blur Page - Form Validation - IntersectionObserver Examples - React PDF Viewer - - - 1 LOC - CSS Layout - Front-end Tips - HTML DOM - this VS that - - - GitHub - Twitter - -
- -
- © 2020 — {new Date().getFullYear()}, Nguyen Huu Phuoc. All rights reserved. -
-
-
-); diff --git a/components/HeaderBlock.tsx b/components/HeaderBlock.tsx deleted file mode 100644 index 8fe6af9..0000000 --- a/components/HeaderBlock.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import Link from 'next/link'; -import * as React from 'react'; -import { Logo } from '@1milligram/design'; - -export const HeaderBlock = () => { - const [totalStars, setTotalStars] = React.useState(0); - - React.useEffect(() => { - fetch('https://api.github.com/repos/phuocng/csslayout') - .then((res) => res.json()) - .then((data) => setTotalStars(data.stargazers_count)) - .catch(console.log); - }, []); - - const HeaderLogo = React.forwardRef>( - (props, ref) => ( - - - - ) - ); - - return ( -
-
-
- - - - - GitHub {totalStars}★ - -
-
-
- ); -}; diff --git a/components/RelatedPatterns.tsx b/components/RelatedPatterns.tsx deleted file mode 100644 index 357c7d8..0000000 --- a/components/RelatedPatterns.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import { Heading } from '@1milligram/design'; - -import { Pattern } from '../constants/Pattern'; -import { CoverCard } from './CoverCard'; - -export const RelatedPatterns: React.FC<{ - patterns: Pattern[]; -}> = ({ patterns }) => { - return ( -
- See also - -
- {patterns.map((pattern) => ( - - ))} -
-
- ); -}; diff --git a/contents/_includes/css-scan.njk b/contents/_includes/css-scan.njk new file mode 100644 index 0000000..c65f5f9 --- /dev/null +++ b/contents/_includes/css-scan.njk @@ -0,0 +1,12 @@ + +
+

Have you seen CSS Scan?

+

The fastest and easiest way to check, copy and edit CSS.

+

Learn more →

+ CSS Scan logo +
+ \ No newline at end of file diff --git a/contents/_includes/layouts/post.njk b/contents/_includes/layouts/post.njk index db0d5a1..a0a15c9 100644 --- a/contents/_includes/layouts/post.njk +++ b/contents/_includes/layouts/post.njk @@ -11,6 +11,9 @@ layout: layouts/base.njk
GitHub {{ github.stargazers }}★ + + {% include "css-scan.njk" %} +

{{ title }}

{{ content | safe }}
diff --git a/contents/index.njk b/contents/index.njk index b6600a3..45fbcad 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -10,6 +10,8 @@ eleventyExcludeFromCollections: true Star me on GitHub · {{ github.stargazers }}★
+ {% include "css-scan.njk" %} +

Display

diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index c1f7cd2..0000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import Head from 'next/head'; - -// Design -import '@1milligram/design/lib/styles/index.css'; -import '../styles/index.scss'; - -const MyApp: React.FC<{ - Component: any; - pageProps: any; -}> = ({ Component, pageProps }) => { - return ( - <> - - - - - - ); -}; - -export default MyApp; diff --git a/pages/_document.tsx b/pages/_document.tsx deleted file mode 100644 index d2dd786..0000000 --- a/pages/_document.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import Document, { Html, Head, Main, NextScript } from 'next/document'; - -class MyDocument extends Document { - render() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - ); - } -} - -export default MyDocument; diff --git a/pages/index.tsx b/pages/index.tsx deleted file mode 100644 index 7f82d39..0000000 --- a/pages/index.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import * as React from 'react'; -import { Heading, Spacer } from '@1milligram/design'; - -import { CoverCard } from '../components/CoverCard'; -import { CssScanBanner } from '../components/CssScanBanner'; -import { Pattern } from '../constants/Pattern'; -import { Layout } from '../layouts/Layout'; - -const HomePage = () => { - return ( - -
-
- - CSS Layout - Popular layouts and patterns made with CSS - - - -
Following covers are made with CSS only. Inspect them!
-
- -
- Display -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- Feedback -
-
- - - - - - - - - -
- -
- Input -
-
- - - - - - - - - - - - - - - - -
- -
- Layout -
-
- - - - - - - - - - -
- -
- Navigation -
-
- - - - - - - - - - - - - - -
- - -
- - ); -}; - -export default HomePage; diff --git a/styles/blocks/_css-scan.scss b/styles/blocks/_css-scan.scss new file mode 100644 index 0000000..6daf854 --- /dev/null +++ b/styles/blocks/_css-scan.scss @@ -0,0 +1,83 @@ +.cssscan { + -webkit-font-smoothing: antialiased; + color: #000; + text-decoration: none; + display: block; +} + +.cssscan__inner { + background: #c2fbd7; + border-radius: 0.5rem; + padding: 2rem; + position: relative; + overflow: hidden; + box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0; + cursor: pointer; + text-align: left; +} + +.cssscan__title { + font-size: 2rem; + font-weight: 700; + margin-bottom: 0; + margin-top: 0; +} + +.cssscan__desc { + opacity: 0.8; + color: #333; + margin-top: 1em; + margin-bottom: 1em; +} + +.cssscan__more { + margin: 0; + margin-top: 2em; +} + +.cssscan__image { + position: absolute; + transform: rotate(-7deg); + transition: all 0.3s; + top: 14%; + right: -37%; + width: 95%; + height: 95%; +} + +.cssscan__inner:hover { + .cssscan__more { + text-decoration: underline; + } + + .cssscan__image { + transform: scale(1.1) rotate(-7deg); + top: 10%; + right: -35%; + } +} + +@media screen and (min-width: 0px) and (max-width: 1024px) { + .cssscan { + padding: 0; + } + + .cssscan__inner { + margin-top: 2rem; + } + + .cssscan__image { + top: initial; + bottom: -14%; + width: 45%; + height: 45%; + right: -5%; + } + + .cssscan__inner:hover .cssscan__image { + top: initial; + bottom: -10%; + right: -5%; + transform: scale(1.1) rotate(-7deg); + } +} \ No newline at end of file diff --git a/styles/index.scss b/styles/index.scss index f7a667e..8566b1d 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -1,6 +1,7 @@ @import './common'; @import './blocks/category'; +@import './blocks/css-scan'; @import './blocks/example'; @import './blocks/hero'; @import './blocks/follow';