From 24e088985ed11bf77f96f702d8672623856964f7 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 23 Dec 2019 21:03:53 +0700 Subject: [PATCH 1/3] Add some meta tags --- client/index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/index.html b/client/index.html index d363e8a..e08e50a 100644 --- a/client/index.html +++ b/client/index.html @@ -1,8 +1,11 @@ - + - CSS layout + CSS layout + + + From a01ec56877b8556df8ca5215f3719ae5ad7c3b71 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 23 Dec 2019 21:04:11 +0700 Subject: [PATCH 2/3] Add react-helmet --- package-lock.json | 38 ++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ 2 files changed, 40 insertions(+) diff --git a/package-lock.json b/package-lock.json index 327d599..a407dbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -962,6 +962,15 @@ "@types/react": "*" } }, + "@types/react-helmet": { + "version": "5.0.14", + "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-5.0.14.tgz", + "integrity": "sha512-Q73FFg7+LjblfSQUNbnjrwy2T1avBP8yevEgNrkDjyz1rBbnXkuOQcEV7I5wvmAic9FLUk0CnkLieEDej84Zkw==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-router": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.3.tgz", @@ -6864,6 +6873,22 @@ "scheduler": "^0.18.0" } }, + "react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, + "react-helmet": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz", + "integrity": "sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==", + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.5.4", + "react-fast-compare": "^2.0.2", + "react-side-effect": "^1.1.0" + } + }, "react-is": { "version": "16.12.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", @@ -6900,6 +6925,14 @@ "tiny-warning": "^1.0.0" } }, + "react-side-effect": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.2.0.tgz", + "integrity": "sha512-v1ht1aHg5k/thv56DRcjw+WtojuuDHFUgGfc+bFHOWsF4ZK6C2V57DO0Or0GPsg6+LSTE0M6Ry/gfzhzSwbc5w==", + "requires": { + "shallowequal": "^1.0.1" + } + }, "react-snap": { "version": "1.23.0", "resolved": "https://registry.npmjs.org/react-snap/-/react-snap-1.23.0.tgz", @@ -7513,6 +7546,11 @@ "safe-buffer": "^5.0.1" } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", diff --git a/package.json b/package.json index 094b0d4..c459f3c 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "highlight.js": "^9.16.2", "react": "^16.12.0", "react-dom": "^16.12.0", + "react-helmet": "^5.2.1", "react-router-dom": "^5.1.2" }, "devDependencies": { @@ -25,6 +26,7 @@ "@types/loadable__component": "^5.10.0", "@types/react": "^16.9.16", "@types/react-dom": "^16.9.4", + "@types/react-helmet": "^5.0.14", "@types/react-router-dom": "^5.1.3", "babel-loader": "^8.0.6", "cpx2": "^2.0.0", From c3f5ac9069ba5b835a59718bace470246eac6b06 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 23 Dec 2019 22:22:12 +0700 Subject: [PATCH 3/3] Add keywords and description tags to all pages --- client/index.html | 2 -- client/pages/ExplorePage.tsx | 5 +++++ client/pages/HomePage.tsx | 5 +++++ client/patterns/accordion/Details.tsx | 5 +++++ client/patterns/avatar-list/Details.tsx | 5 +++++ client/patterns/avatar/Details.tsx | 5 +++++ client/patterns/badge/Details.tsx | 5 +++++ client/patterns/breadcrumb/Details.tsx | 5 +++++ client/patterns/button-with-icon/Details.tsx | 5 +++++ client/patterns/card/Details.tsx | 5 +++++ client/patterns/centering/Details.tsx | 5 +++++ client/patterns/chip/Details.tsx | 5 +++++ client/patterns/circular-navigation/Details.tsx | 5 +++++ client/patterns/close-button/Details.tsx | 5 +++++ client/patterns/cookie-banner/Details.tsx | 5 +++++ client/patterns/corner-ribbon/Details.tsx | 5 +++++ client/patterns/custom-checkbox-button/Details.tsx | 5 +++++ client/patterns/custom-radio-button/Details.tsx | 5 +++++ client/patterns/docked-at-corner/Details.tsx | 5 +++++ client/patterns/dot-leader/Details.tsx | 5 +++++ client/patterns/dot-navigation/Details.tsx | 5 +++++ client/patterns/drawer/Details.tsx | 5 +++++ client/patterns/drop-area/Details.tsx | 5 +++++ client/patterns/drop-cap/Details.tsx | 8 +++++--- client/patterns/dropdown/Details.tsx | 5 +++++ client/patterns/feature-comparison/Details.tsx | 5 +++++ client/patterns/feature-list/Details.tsx | 5 +++++ client/patterns/fixed-at-corner/Details.tsx | 5 +++++ client/patterns/fixed-at-side/Details.tsx | 5 +++++ client/patterns/floating-label/Details.tsx | 5 +++++ client/patterns/full-screen-menu/Details.tsx | 5 +++++ client/patterns/holy-grail/Details.tsx | 5 +++++ client/patterns/initial-avatar/Details.tsx | 5 +++++ client/patterns/input-addon/Details.tsx | 5 +++++ client/patterns/keyboard-shortcut/Details.tsx | 9 +++++++-- client/patterns/media-object/Details.tsx | 5 +++++ client/patterns/menu/Details.tsx | 5 +++++ client/patterns/modal/Details.tsx | 5 +++++ client/patterns/notification/Details.tsx | 5 +++++ client/patterns/overlay-play-button/Details.tsx | 5 +++++ client/patterns/pagination/Details.tsx | 5 +++++ client/patterns/popover-arrow/Details.tsx | 5 +++++ client/patterns/presence-indicator/Details.tsx | 5 +++++ client/patterns/previous-next-buttons/Details.tsx | 5 +++++ client/patterns/pricing-table/Details.tsx | 5 +++++ client/patterns/progress-bar/Details.tsx | 5 +++++ client/patterns/property-list/Details.tsx | 5 +++++ client/patterns/questions-and-answers/Details.tsx | 5 +++++ client/patterns/radial-progress-bar/Details.tsx | 5 +++++ client/patterns/radio-button-group/Details.tsx | 5 +++++ client/patterns/radio-switch/Details.tsx | 5 +++++ client/patterns/rating/Details.tsx | 5 +++++ client/patterns/resizable-element/Details.tsx | 5 +++++ client/patterns/ribbon/Details.tsx | 5 +++++ client/patterns/same-height-columns/Details.tsx | 5 +++++ client/patterns/search-box/Details.tsx | 5 +++++ client/patterns/separator/Details.tsx | 5 +++++ client/patterns/sidebar/Details.tsx | 5 +++++ client/patterns/simple-grid/Details.tsx | 5 +++++ client/patterns/slider/Details.tsx | 5 +++++ client/patterns/spin-button/Details.tsx | 5 +++++ client/patterns/split-navigation/Details.tsx | 5 +++++ client/patterns/split-screen/Details.tsx | 5 +++++ client/patterns/stepper-input/Details.tsx | 5 +++++ client/patterns/sticky-footer/Details.tsx | 5 +++++ client/patterns/sticky-header/Details.tsx | 5 +++++ client/patterns/sticky-sections/Details.tsx | 5 +++++ client/patterns/switch/Details.tsx | 5 +++++ client/patterns/tab/Details.tsx | 5 +++++ client/patterns/timeline/Details.tsx | 5 +++++ client/patterns/toggle-password-visibility/Details.tsx | 5 +++++ client/patterns/tooltip/Details.tsx | 5 +++++ client/patterns/upload-button/Details.tsx | 6 +++++- client/patterns/validation-icon/Details.tsx | 5 +++++ client/patterns/video-background/Details.tsx | 5 +++++ client/patterns/wizard/Details.tsx | 5 +++++ 76 files changed, 377 insertions(+), 8 deletions(-) diff --git a/client/index.html b/client/index.html index e08e50a..fb038a8 100644 --- a/client/index.html +++ b/client/index.html @@ -3,8 +3,6 @@ CSS layout - - diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx index 01414d5..b64e66b 100644 --- a/client/pages/ExplorePage.tsx +++ b/client/pages/ExplorePage.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import { Link } from 'react-router-dom'; import CoverCard from '../components/CoverCard'; @@ -14,6 +15,10 @@ const ExplorePage = () => { return ( + + + +
{ return ( + + + +
= () => { return ( + + + +
= ({ children }) => { const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
You can use a close button to remove a chip. diff --git a/client/patterns/circular-navigation/Details.tsx b/client/patterns/circular-navigation/Details.tsx index d9df121..0e5b4ad 100644 --- a/client/patterns/circular-navigation/Details.tsx +++ b/client/patterns/circular-navigation/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -43,6 +44,10 @@ const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
This pattern is also known as off-canvas. diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx index 77b4def..810b553 100644 --- a/client/patterns/drop-area/Details.tsx +++ b/client/patterns/drop-area/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import Block from '../../placeholders/Block'; @@ -7,6 +8,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
Move the mouse over the button to see the dropdown. diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx index 607430b..23fcdd7 100644 --- a/client/patterns/feature-comparison/Details.tsx +++ b/client/patterns/feature-comparison/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import RelatedPatterns from '../../components/RelatedPatterns'; import Pattern from '../../constants/Pattern'; @@ -11,6 +12,10 @@ import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
Type something in the input to see how the label is shown up. diff --git a/client/patterns/full-screen-menu/Details.tsx b/client/patterns/full-screen-menu/Details.tsx index 3af91c7..791bc26 100644 --- a/client/patterns/full-screen-menu/Details.tsx +++ b/client/patterns/full-screen-menu/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -7,6 +8,10 @@ import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
To center the content, you also can use other technique demonstrated in diff --git a/client/patterns/input-addon/Details.tsx b/client/patterns/input-addon/Details.tsx index caf053d..7ede896 100644 --- a/client/patterns/input-addon/Details.tsx +++ b/client/patterns/input-addon/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -7,6 +8,10 @@ import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
= ({ action, keys }) => { return ( -
= ({ action, keys }) => { > {keys} -
+
); }; const Details: React.FC<{}> = () => { return ( + + + +
We use the native kbd tag to display the keyboard shortcut. diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx index 7bb3c47..52ee04e 100644 --- a/client/patterns/media-object/Details.tsx +++ b/client/patterns/media-object/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import Block from '../../placeholders/Block'; @@ -9,6 +10,10 @@ import Square from '../../placeholders/Square'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
You can use the close button to diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx index 6607bd4..f321cab 100644 --- a/client/patterns/notification/Details.tsx +++ b/client/patterns/notification/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import { Link } from 'react-router-dom'; import DetailsLayout from '../../layouts/DetailsLayout'; @@ -9,6 +10,10 @@ import Circle from '../../placeholders/Circle'; const Details: React.FC<{}> = () => { return ( + + + +
You can use the close button to diff --git a/client/patterns/overlay-play-button/Details.tsx b/client/patterns/overlay-play-button/Details.tsx index 9dad788..3d4e0b0 100644 --- a/client/patterns/overlay-play-button/Details.tsx +++ b/client/patterns/overlay-play-button/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import RelatedPatterns from '../../components/RelatedPatterns'; import Pattern from '../../constants/Pattern'; @@ -9,6 +10,10 @@ import Triangle from '../../placeholders/Triangle'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
You can add a ribbon to diff --git a/client/patterns/progress-bar/Details.tsx b/client/patterns/progress-bar/Details.tsx index c650709..44eb0bd 100644 --- a/client/patterns/progress-bar/Details.tsx +++ b/client/patterns/progress-bar/Details.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { Helmet } from 'react-helmet'; import useInterval from '../../hooks/useInterval'; import DetailsLayout from '../../layouts/DetailsLayout'; @@ -12,6 +13,10 @@ const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= ({ percentages }) => { const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
You can move the mouse over each squares located at the corners and the middle of sides to see diff --git a/client/patterns/ribbon/Details.tsx b/client/patterns/ribbon/Details.tsx index 39c6aea..354ec53 100644 --- a/client/patterns/ribbon/Details.tsx +++ b/client/patterns/ribbon/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import RelatedPatterns from '../../components/RelatedPatterns'; import Pattern from '../../constants/Pattern'; @@ -9,6 +10,10 @@ import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
Try to scroll the main content!
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
The footer always sticks to the bottom if the main content is short. diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx index bfa96c1..7605eaa 100644 --- a/client/patterns/sticky-header/Details.tsx +++ b/client/patterns/sticky-header/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import Block from '../../placeholders/Block'; @@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
Try to scroll the main content to see the header sticks to the top of page. diff --git a/client/patterns/sticky-sections/Details.tsx b/client/patterns/sticky-sections/Details.tsx index 160fc41..241a9f2 100644 --- a/client/patterns/sticky-sections/Details.tsx +++ b/client/patterns/sticky-sections/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -6,6 +7,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { return ( + + + +
Try to scroll the main content to see each section sticks to the top of page. diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx index 7949848..04a357d 100644 --- a/client/patterns/switch/Details.tsx +++ b/client/patterns/switch/Details.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { Helmet } from 'react-helmet'; import RelatedPatterns from '../../components/RelatedPatterns'; import Pattern from '../../constants/Pattern'; @@ -11,6 +12,10 @@ const Details: React.FC<{}> = () => { return ( + + + +
The checkbox is placed inside a label. So when clicking on the label, diff --git a/client/patterns/tab/Details.tsx b/client/patterns/tab/Details.tsx index 69e4150..4269f44 100644 --- a/client/patterns/tab/Details.tsx +++ b/client/patterns/tab/Details.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -33,6 +34,10 @@ const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
= () => { return ( + + + +
Move the mouser over the main element to see the tooltip. diff --git a/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx index 783fd49..d26f7ca 100644 --- a/client/patterns/upload-button/Details.tsx +++ b/client/patterns/upload-button/Details.tsx @@ -1,13 +1,17 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; -import Circle from '../../placeholders/Circle'; import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return ( + + + +
You can click the button to choose a file. diff --git a/client/patterns/validation-icon/Details.tsx b/client/patterns/validation-icon/Details.tsx index 2309fe6..4a3320c 100644 --- a/client/patterns/validation-icon/Details.tsx +++ b/client/patterns/validation-icon/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; @@ -6,6 +7,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { return ( + + + +
= () => { return ( + + + +
In this pattern, the video is displayed in the background. diff --git a/client/patterns/wizard/Details.tsx b/client/patterns/wizard/Details.tsx index 5933dff..d1b9bcf 100644 --- a/client/patterns/wizard/Details.tsx +++ b/client/patterns/wizard/Details.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import DetailsLayout from '../../layouts/DetailsLayout'; import Block from '../../placeholders/Block'; @@ -9,6 +10,10 @@ import Line from '../../placeholders/Line'; const Details: React.FC<{}> = () => { return ( + + + +