From c220583252463266b8a3704dd30e67e81feb85d6 Mon Sep 17 00:00:00 2001 From: Zeno Rocha Date: Tue, 19 Dec 2023 08:45:31 -0300 Subject: [PATCH] feat: Add website redirect --- website/components/AccentColorPicker.js | 41 - website/components/CodeHighlight.js | 124 - website/components/CodeHighlight.module.css | 52 - website/components/DocsOverview.js | 43 - website/components/DocsOverview.module.css | 18 - website/components/Footer.js | 33 - website/components/Footer.module.css | 36 - website/components/Launcher/Launcher.js | 221 -- .../components/Launcher/Launcher.module.css | 97 - website/components/Launcher/icon-map.js | 46 - website/components/Navigation.js | 113 - website/components/Navigation.module.css | 47 - website/components/PropsTable.js | 58 - website/components/Search.js | 42 - website/components/Search.module.css | 63 - website/components/Tabs.js | 90 - website/components/Tabs.module.css | 31 - website/components/Topbar.js | 28 - website/components/Topbar.module.css | 45 - website/layouts/Docs.js | 90 - website/lib/gtag.js | 7 - website/lib/paths.js | 26 - website/lib/prism.js | 76 - website/next.config.js | 16 + website/package.json | 18 +- website/pages/[guide].js | 79 - website/pages/_app.js | 24 - website/pages/_document.js | 48 - website/pages/colors.js | 245 -- website/pages/css.js | 111 - website/pages/design.js | 53 - website/pages/index.js | 14 - website/pages/index.module.css | 61 - website/pages/installation.js | 181 -- website/pages/migration.js | 78 - website/pages/principles.js | 107 - website/pages/spacing.js | 190 -- website/pages/support.js | 85 - website/pages/tooling.js | 103 - website/pages/welcome.js | 66 - website/public/static/favicon.ico | Bin 120782 -> 0 bytes .../public/static/fonts/AbrilText-Bold.woff | Bin 40848 -> 0 bytes .../public/static/fonts/AbrilText-Bold.woff2 | Bin 32088 -> 0 bytes website/public/static/images/avatar.png | Bin 135278 -> 0 bytes website/public/static/images/design-1.png | Bin 334102 -> 0 bytes .../public/static/images/installation-1.png | Bin 596866 -> 0 bytes website/public/static/images/support-1.png | Bin 197839 -> 0 bytes website/public/static/images/support-2.png | Bin 236040 -> 0 bytes website/public/static/images/support-3.png | Bin 235103 -> 0 bytes website/public/static/images/tooling-1.png | Bin 310564 -> 0 bytes website/public/static/images/tooling-2.png | Bin 303951 -> 0 bytes website/public/static/og.jpg | Bin 253975 -> 0 bytes website/styles/main.css | 19 - website/yarn.lock | 2289 ++--------------- 54 files changed, 172 insertions(+), 5042 deletions(-) delete mode 100644 website/components/AccentColorPicker.js delete mode 100644 website/components/CodeHighlight.js delete mode 100644 website/components/CodeHighlight.module.css delete mode 100644 website/components/DocsOverview.js delete mode 100644 website/components/DocsOverview.module.css delete mode 100644 website/components/Footer.js delete mode 100644 website/components/Footer.module.css delete mode 100644 website/components/Launcher/Launcher.js delete mode 100644 website/components/Launcher/Launcher.module.css delete mode 100644 website/components/Launcher/icon-map.js delete mode 100644 website/components/Navigation.js delete mode 100644 website/components/Navigation.module.css delete mode 100644 website/components/PropsTable.js delete mode 100644 website/components/Search.js delete mode 100644 website/components/Search.module.css delete mode 100644 website/components/Tabs.js delete mode 100644 website/components/Tabs.module.css delete mode 100644 website/components/Topbar.js delete mode 100644 website/components/Topbar.module.css delete mode 100644 website/layouts/Docs.js delete mode 100644 website/lib/gtag.js delete mode 100644 website/lib/paths.js delete mode 100644 website/lib/prism.js create mode 100644 website/next.config.js delete mode 100644 website/pages/[guide].js delete mode 100644 website/pages/_app.js delete mode 100644 website/pages/_document.js delete mode 100644 website/pages/colors.js delete mode 100644 website/pages/css.js delete mode 100644 website/pages/design.js delete mode 100644 website/pages/index.js delete mode 100644 website/pages/index.module.css delete mode 100644 website/pages/installation.js delete mode 100644 website/pages/migration.js delete mode 100644 website/pages/principles.js delete mode 100644 website/pages/spacing.js delete mode 100644 website/pages/support.js delete mode 100644 website/pages/tooling.js delete mode 100644 website/pages/welcome.js delete mode 100644 website/public/static/favicon.ico delete mode 100644 website/public/static/fonts/AbrilText-Bold.woff delete mode 100644 website/public/static/fonts/AbrilText-Bold.woff2 delete mode 100644 website/public/static/images/avatar.png delete mode 100644 website/public/static/images/design-1.png delete mode 100644 website/public/static/images/installation-1.png delete mode 100644 website/public/static/images/support-1.png delete mode 100644 website/public/static/images/support-2.png delete mode 100644 website/public/static/images/support-3.png delete mode 100644 website/public/static/images/tooling-1.png delete mode 100644 website/public/static/images/tooling-2.png delete mode 100644 website/public/static/og.jpg delete mode 100644 website/styles/main.css diff --git a/website/components/AccentColorPicker.js b/website/components/AccentColorPicker.js deleted file mode 100644 index a9782efb..00000000 --- a/website/components/AccentColorPicker.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Box, baseColors } from "dracula-ui" - -export function AccentColorPicker() { - return ( - - - - ) -} diff --git a/website/components/CodeHighlight.js b/website/components/CodeHighlight.js deleted file mode 100644 index 7fa10a8b..00000000 --- a/website/components/CodeHighlight.js +++ /dev/null @@ -1,124 +0,0 @@ -import Highlight, { defaultProps } from 'prism-react-renderer' -import React, { Component } from 'react' - -import CopyToClipboard from 'clipboard' -import localStyles from './CodeHighlight.module.css' -import theme from '../lib/prism' - -export default class CodeHighlight extends Component { - state = { copied: false } - copyButton = React.createRef() - - componentDidMount() { - new CopyToClipboard(this.copyButton.current, { - text: () => this.props.code - }) - } - - onCopy = () => { - this.setState( - { - copied: true - }, - () => { - setTimeout(() => this.setState({ copied: false }), 1000) - } - ) - } - - renderButton() { - const { copied } = this.state - - return ( -
- -
- ) - } - - render() { - return ( - - {({ style, tokens, getLineProps, getTokenProps }) => ( -
-
- {this.renderButton()} - 
-                {tokens.map((line, i) => (
-                  

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

-                ))}
-
-
-
- )} - - ) - } -} - -function Clippy(props) { - return ( - - - - - ); -} - -function Check(props) { - return ( - - - - ); -} \ No newline at end of file diff --git a/website/components/CodeHighlight.module.css b/website/components/CodeHighlight.module.css deleted file mode 100644 index 9a8bde6f..00000000 --- a/website/components/CodeHighlight.module.css +++ /dev/null @@ -1,52 +0,0 @@ -.copyButtonContainer { - position: absolute; - right: 5px; - top: 5px; -} - -.copyButton { - appearance: none; - padding: 8px; - border: 0; - border-radius: var(--rounded-md); - outline: 0; - cursor: pointer; - background: #1d1e26; -} - -.copyIcon { - position: relative; - height: 16px; - width: 16px; -} - -.clippy, -.check { - position: absolute; - top: 0; - left: 0; - stroke-dasharray: 50; - transition: all 300ms ease-in-out; -} - -.clippy { - color: var(--disabled); -} - -.copyButton:hover .clippy { - color: var(--white); -} - -.check { - color: var(--green); -} - -.pre { - padding: 1rem; - composes: drac-scrollbar-grey drac-text-xs from global; - border-radius: var(--rounded-md); - margin: 0; - font-family: 'Fira Code', monospace; - line-height: var(--line-height-md); - overflow: auto; -} \ No newline at end of file diff --git a/website/components/DocsOverview.js b/website/components/DocsOverview.js deleted file mode 100644 index 2fa7dad0..00000000 --- a/website/components/DocsOverview.js +++ /dev/null @@ -1,43 +0,0 @@ -import { Anchor, Box, Text } from 'dracula-ui' - -import React from 'react' -import localStyles from './DocsOverview.module.css' - -export function DocsOverview({ sections, showProperties }) { - return ( - - - On this page - - - - {sections.map((section) => { - return ( - - - {section.title} - - - ) - })} - - {showProperties && ( - - - Properties - - - )} - - ) -} diff --git a/website/components/DocsOverview.module.css b/website/components/DocsOverview.module.css deleted file mode 100644 index 18353127..00000000 --- a/website/components/DocsOverview.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.docsOverview { - max-height: 80vh; - margin: 0; - position: fixed; - overflow-y: auto; - top: 64px; - right: 80px; -} - -@media (max-width: 76rem){ - .docsOverview{ - width: 100%; - margin: 3.75rem 0 0 0; - padding: 0; - position: relative; - inset: unset; - } -} \ No newline at end of file diff --git a/website/components/Footer.js b/website/components/Footer.js deleted file mode 100644 index 0c4a9fc3..00000000 --- a/website/components/Footer.js +++ /dev/null @@ -1,33 +0,0 @@ -import { Component } from "react"; -import styles from "./Footer.module.css"; - -class Footer extends Component { - render() { - return ( -
-

- Made with - ♥ - by - - Zeno Rocha - - & - - Netto Farah - -

-
- ); - } -} - -export default Footer; diff --git a/website/components/Footer.module.css b/website/components/Footer.module.css deleted file mode 100644 index a03d1272..00000000 --- a/website/components/Footer.module.css +++ /dev/null @@ -1,36 +0,0 @@ -.footer { - height: 5rem; - flex-shrink: 0; - justify-content: center; - border-top-width: 0.1rem; - border-top-style: solid; - composes: drac-border-purple from global; -} - -.credits { - font-size: 1rem; - composes: drac-text from global; - composes: drac-text-white from global; - text-align: center; -} - -.link { - color: var(--cyan); - text-decoration: none; -} - -.love { - display: inline-block; - position: relative; - top: 0.2em; - font-size: 2.4em; - color: var(--pink); - transform: scale(0.9); - animation: love 0.5s infinite linear alternate-reverse; -} - -@keyframes love { - to { - transform: scale(1.1); - } -} diff --git a/website/components/Launcher/Launcher.js b/website/components/Launcher/Launcher.js deleted file mode 100644 index 046a8528..00000000 --- a/website/components/Launcher/Launcher.js +++ /dev/null @@ -1,221 +0,0 @@ -import { Component, createRef } from 'react' -import Router from 'next/router' -import { HotKeys } from 'react-hotkeys' -import styles from './Launcher.module.css' -import dspComponents from 'dracula-ui/dsp/data/components.json' -import { Box, Text } from 'dracula-ui' -import FocusTrap from 'focus-trap-react' -import Fuse from 'fuse.js' -import { iconMap } from './icon-map' - -class Launcher extends Component { - constructor(props) { - super(props) - - this.options = dspComponents.entities.map((entity) => { - return { - title: entity.name, - icon: iconMap[entity.name], - handler: () => Router.push(`/${entity.name.toLowerCase()}`) - } - }) - - this.state = { - query: '', - selected: 0, - filtered: this.options - } - - this.optionRefs = [] - } - - componentDidMount() { - this.fuse = new Fuse(this.options, { - keys: ['title'] - }) - } - - componentDidUpdate(_prevProps, prevState) { - if (prevState.filtered !== this.state.filtered) { - this.optionRefs = this.optionRefs.filter((x) => x !== null) - } - } - - navigate(option) { - option.handler() - this.prepareToHideLauncher() - } - - onMouseEnter(index, event) { - this.setState({ selected: index }) - event.target.focus() - } - - onSearch(e) { - const query = e.target.value.trim() - - this.setState({ query }) - - if (query.length === 0) { - this.setState({ filtered: this.options }) - return - } - - let filtered = this.fuse.search(query).map((option) => { - return option.item - }) - - this.setState({ filtered, selected: 0 }) - } - - onClickOutsideModal(event) { - if (this.containerRef.current.contains(event.target)) { - return - } - - this.prepareToHideLauncher() - } - - onArrowUpPressed() { - let { selected, filtered } = this.state - - selected = selected > 0 ? selected - 1 : filtered.length - 1 - this.setState({ selected }) - - if (this.optionRefs[selected]) { - this.optionRefs[selected].focus() - } - } - - onArrowDownPressed() { - let { selected, filtered } = this.state - - selected = selected < filtered.length - 1 ? selected + 1 : 0 - this.setState({ selected }) - - if (this.optionRefs[selected]) { - this.optionRefs[selected].focus() - } - } - - onEnterPressed() { - this.navigate(this.state.filtered[this.state.selected]) - } - - prepareToHideLauncher() { - this.setState({ - query: '', - selected: 0, - filtered: this.options - }) - - this.props.hideLauncher() - } - - renderOptions() { - return this.state.filtered.map((option, index) => { - return ( -
  • (this.optionRefs[index] = el)} - aria-selected={this.state.selected === index} - tabIndex={this.state.selected === index ? '0' : '-1'} - onClick={this.navigate.bind(this, option)} - onMouseEnter={this.onMouseEnter.bind(this, index)} - className={styles.option} - > -
    - - - - {option.title} -
    - - - - - - -
    • - ) - }) - } - - renderLauncher() { - this.containerRef = createRef() - - if (this.props.launcherVisible) { - return ( - -
    -
    - - - - - - -
      - {this.renderOptions()} -
    -
    -
    -     - ) - } - } - - render() { - const keyMap = { - LAUNCHER_UP: ['up'], - LAUNCHER_DOWN: ['down'], - LAUNCHER_ENTER: ['enter'] - } - - const handlers = { - LAUNCHER_UP: this.onArrowUpPressed.bind(this), - LAUNCHER_DOWN: this.onArrowDownPressed.bind(this), - LAUNCHER_ENTER: this.onEnterPressed.bind(this) - } - - return ( - - {this.renderLauncher()} - - ) - } -} - -export default Launcher diff --git a/website/components/Launcher/Launcher.module.css b/website/components/Launcher/Launcher.module.css deleted file mode 100644 index dd708058..00000000 --- a/website/components/Launcher/Launcher.module.css +++ /dev/null @@ -1,97 +0,0 @@ -.background { - background: rgba(0, 0, 0, .8); - position: fixed; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - width: 100vw; - top: 0; - left: 0; - z-index: 999; -} - -.container { - background-color: #15171b; - border-radius: var(--rounded-xl); - box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%); - position: relative; - padding: 8px; - width: 600px; -} - -/* Search */ - -.search { - flex: auto; - display: flex; - align-items: center; -} - -.input { - appearance: none; - border: 0; - box-sizing: border-box; - color: white; - display: block; - padding: 1rem; - background: transparent; - font-size: var(--font-md); - outline: none; - font-family: 'Fira Code', monospace; - width: 100%; -} - -.iconSearch { - color: white; - opacity: .5; - padding-left: 1rem; -} - -/* Options */ - -.list { - margin: 0; - padding: 10px 0 0; - max-height: 216px; - overflow-y: scroll; - border-top: 1px solid rgba(255, 255, 255, .2); -} - -.option { - display: flex; - cursor: pointer; - justify-content: space-between; - padding-left: 1.0rem; - padding-right: 1.0rem; - padding-top: 1rem; - padding-bottom: 1rem; - border-radius: var(--rounded-lg); - outline: none; - color: gray; - opacity: .5; - transition: all .3s ease-in-out; -} - -.option[aria-selected="true"] { - color: white; - background: rgba(0, 0, 0, .5); - opacity: 1; -} - -.optionIcon { - padding-right: 12px; -} - -.optionTitle { - display: flex; - flex-direction: row; - align-items: center; -} - -.enterIcon { - width: 16px; - height: 16px; - opacity: 0.5; -} - diff --git a/website/components/Launcher/icon-map.js b/website/components/Launcher/icon-map.js deleted file mode 100644 index 07321b02..00000000 --- a/website/components/Launcher/icon-map.js +++ /dev/null @@ -1,46 +0,0 @@ -import * as Dracula from 'dracula-ui' -import { difference } from 'lodash' - -const componentNames = Object.keys(Dracula) - .filter((name) => { - const exp = Dracula[name] - return Boolean(exp['displayName']) - }) - .sort() - -export const iconMap = { - Anchor: 'box-arrow-up-right', - Avatar: 'person-circle', - Badge: 'textarea-resize', - Box: 'bounding-box-circles', - Button: 'bootstrap', - Card: 'card-heading', - Checkbox: 'ui-checks', - Divider: 'hr', - Heading: 'type-h1', - Input: 'input-cursor-text', - List: 'list-ul', - OrderedList: 'list-ol', - Paragraph: 'card-text', - Radio: 'ui-radios-grid', - Select: 'menu-button', - Spacing: 'grid-1x2', - Switch: 'toggles', - Table: 'table', - Tabs: 'segmented-nav', - Text: 'type' -} - -if (process.env.NODE_ENV === 'development') { - const assert = require('assert') - - const missing = difference(componentNames, Object.keys(iconMap)) - if (missing.length > 0) { - console.log('Missing Icons', missing) - } - - assert( - missing.length === 0, - 'Every Dracula UI component should have a corresponding Icon' - ) -} diff --git a/website/components/Navigation.js b/website/components/Navigation.js deleted file mode 100644 index b93cf5bf..00000000 --- a/website/components/Navigation.js +++ /dev/null @@ -1,113 +0,0 @@ -import { Anchor, Box, List, Text } from 'dracula-ui' -import { Component } from 'react' -import Link from 'next/link' -import dspComponents from 'dracula-ui/dsp/data/components.json' -import styles from './Navigation.module.css' -import Topbar from './Topbar' - -const pages = dspComponents.entities - .map((entity) => { - return entity.name - }) - .filter((en) => !en.startsWith('.')) - -const items = [ - { - title: 'Getting Started', - pages: [ - 'Welcome', - 'Installation', - 'Principles', - 'Migration', - 'Tooling', - 'Design', - 'Support', - 'Spacing', - 'Colors', - 'CSS' - ] - }, - { - title: 'Components', - pages - }, -] - -class Navigation extends Component { - state = { - isVisible: true - } - - toggleMenu() { - this.setState({ isVisible: !this.state.isVisible }) - } - - renderNavigation() { - return items.map((item) => { - return ( - - - {item.title} - - - - {Object.keys(item.pages).map((index) => { - const path = `/${item.pages[index].toLowerCase()}` - if (item.title.includes('Patterns')) { - return ( - - - {item.pages[index]} - - - ) - } - - const isSelected = item.pages[index] === this.props.selected - - return ( - - - - {item.pages[index]} - - - - ) - })} - - - ) - }) - } - - render() { - return ( - - ) - } -} - -export default Navigation diff --git a/website/components/Navigation.module.css b/website/components/Navigation.module.css deleted file mode 100644 index 1f81d813..00000000 --- a/website/components/Navigation.module.css +++ /dev/null @@ -1,47 +0,0 @@ -.nav { - composes: drac-scrollbar-grey from global; - background: #15171b; - height: 100vh; - min-width: 15rem; - overflow-y: auto; - position: fixed; - z-index: 2; -} - -.navSectionTitle { - text-transform: uppercase; - letter-spacing: 1px; - padding: 12px; -} - -.navSectionList, -.navSectionListActive, .navSectionPatterns { - border-radius: var(--rounded-md); - cursor: pointer; - display: block; - padding: 10px; - text-decoration: none; -} - -.navSectionList { - color: #8a8f98; -} - -.navSectionPatterns, .navSectionPatterns:hover { - color: #8a8f989d; - cursor: default; -} - -.navSectionListActive, -.navSectionListActive:hover { - color: var(--purple); - background: var(--purple-transparent); -} - -@media (max-width: 76rem) { - .nav { - position: relative; - height: auto; - min-width: 100%; - } -} diff --git a/website/components/PropsTable.js b/website/components/PropsTable.js deleted file mode 100644 index 197412f3..00000000 --- a/website/components/PropsTable.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react" -import { Box, Paragraph, Text } from "dracula-ui" - -const spacingProps = [ - "p", - "py", - "px", - "pb", - "pt", - "pl", - "pr", - "m", - "my", - "mx", - "mb", - "mt", - "ml", - "mr" -] - -const PropsTable = ({ props }) => { - const propList = Object.values(props) - const ownProps = propList.filter((p) => !spacingProps.includes(p.name)) - - return ( - <> - {ownProps.map((prop) => ( - - - - {prop.name} - - - {" "} - {prop.required ? "(required)" : ""} - - - - - - {prop.description} - - - - - - {prop.type.name - .replace("| undefined", "") - .replace("undefined", "")} - - - - ))} - - ) -} - -export default PropsTable diff --git a/website/components/Search.js b/website/components/Search.js deleted file mode 100644 index 108590ea..00000000 --- a/website/components/Search.js +++ /dev/null @@ -1,42 +0,0 @@ -import { Component } from "react" -import { Box } from "dracula-ui" -import styles from "./Search.module.css" - -class Search extends Component { - renderShortcut() { - if (global.navigator.platform.indexOf('Mac') > -1) { - return - ⌘ - K - - } - else if (global.navigator.platform.indexOf('Win') > -1) { - return - Ctrl - K - - } - - return - } - - render() { - const label = 'Quick search the docs' - - return - - - } -} - -export default Search diff --git a/website/components/Search.module.css b/website/components/Search.module.css deleted file mode 100644 index 0192dd3e..00000000 --- a/website/components/Search.module.css +++ /dev/null @@ -1,63 +0,0 @@ -.container { - background: #1d1e26; - position: fixed; - top: 0; - z-index: 1; -} - -.button { - transition: all .3s ease-in-out; - appearance: none; - border: 0; - box-sizing: border-box; - font-family: 'Fira Code', monospace; - border-bottom: 1px solid var(--disabled); - background: transparent; - color: var(--disabled); - cursor: pointer; - display: block; - font-size: var(--font-lg); - padding-top: 1rem; - padding-bottom: 1rem; - outline: none; - text-align: left; - width: 46rem; -} - -.button:hover { - color: var(--white); - border-color: var(--white); -} - -.button:hover .shortcut { - border-color: var(--white); -} - -.searchIcon { - composes: bi-search from global; - padding-right: 1rem; - position: relative; - font-size: 18px; - top: 2px; -} - -.shortcut { - border: 1px solid var(--disabled); - display: inline; - margin-left: 1rem; - padding: 2px 4px; - border-radius: var(--rounded-md); - font-size: var(--font-md); - transition: border .3s ease-in-out; -} - -.shortcut kbd { - padding: 0 2px; - font-family: sans-serif; -} - -@media (max-width: 76rem) { - .button { - display: none; - } -} \ No newline at end of file diff --git a/website/components/Tabs.js b/website/components/Tabs.js deleted file mode 100644 index 96a53960..00000000 --- a/website/components/Tabs.js +++ /dev/null @@ -1,90 +0,0 @@ -import { Component } from "react" -import styles from "./Tabs.module.css" -import CodeHighlight from "./CodeHighlight" -import { Box, Tabs } from "dracula-ui" - -class DocsTabs extends Component { - constructor(props) { - super(props) - - this.state = { - options: [ - { label: "Preview", panel: this.props.section.html }, - { label: "HTML", panel: this.props.section.html }, - { label: "React", panel: this.props.section.react } - ], - selectedTab: 0 - } - } - - onChangeSelectedTab(index) { - this.setState({ selectedTab: index }) - } - - renderLabels() { - return this.state.options.map((option, index) => { - return ( -
  • - this.onChangeSelectedTab(index)} - > - {option.label} - -
    • - ) - }) - } - - renderPanels() { - return this.state.options.map((option, index) => { - return ( -
    - {this.renderPanel(index, option)} -
    - ) - }) - } - - renderPanel(index, option) { - if (index === 0) { - return ( - - ) - } else if (index === 1) { - return - } else if (index === 2) { - return - } - } - - render() { - return ( -
    - - {this.renderLabels()} - - - {this.renderPanels()} - -
    - ) - } -} - -export default DocsTabs diff --git a/website/components/Tabs.module.css b/website/components/Tabs.module.css deleted file mode 100644 index b5a1bde8..00000000 --- a/website/components/Tabs.module.css +++ /dev/null @@ -1,31 +0,0 @@ -.tab { - cursor: pointer; - composes: drac-tab from global; -} - -.tabActive { - cursor: pointer; - composes: drac-tab from global; - composes: drac-tab-active from global; -} - -.tabPanel { - display: none; -} - -.tabPanelActive { - display: block; -} - -.usage { - padding: 2rem; -} - -.usage, -.codeContainer { - composes: drac-scrollbar-grey from global; - background: #282a36; - border-radius: var(--rounded-md); - max-height: 300px; - overflow: auto; -} \ No newline at end of file diff --git a/website/components/Topbar.js b/website/components/Topbar.js deleted file mode 100644 index fe714d58..00000000 --- a/website/components/Topbar.js +++ /dev/null @@ -1,28 +0,0 @@ -import { Box, Button, Text, Anchor } from "dracula-ui" -import { Component } from "react" -import Link from "next/link" -import styles from "./Topbar.module.css" -import { AccentColorPicker } from "./AccentColorPicker" - -class Topbar extends Component { - render() { - return - - - Dracula - UI - - - - - - - - - - } -} - -export default Topbar diff --git a/website/components/Topbar.module.css b/website/components/Topbar.module.css deleted file mode 100644 index 2f0bb61c..00000000 --- a/website/components/Topbar.module.css +++ /dev/null @@ -1,45 +0,0 @@ -.topbar { - display: flex; - flex-direction: column; - margin-left: 12px; -} - -.title { - text-decoration: none; -} - -.text { - font-size: 25px; - font-weight: 700; - font-family: "Abril Text"; -} - -.menu { - display: none; - position: absolute; - right: 20px; - width: 30px; - height: 30px; - background: none; - border: none; - padding: 0; -} - -.menuPrimary { - background: var(--purple-transparent); - border-radius: var(--rounded-md); -} - -.menuSecondary { - fill: var(--purple); -} - -@media (max-width: 76rem) { - .menu { - display: block; - } - - .colors { - display: none; - } -} \ No newline at end of file diff --git a/website/layouts/Docs.js b/website/layouts/Docs.js deleted file mode 100644 index 14516ea7..00000000 --- a/website/layouts/Docs.js +++ /dev/null @@ -1,90 +0,0 @@ -import { Component } from 'react' -import Head from 'next/head' -import { Box, Heading, Paragraph } from 'dracula-ui' -import Navigation from '../components/Navigation' -import styles from '../pages/index.module.css' - -import { GlobalHotKeys, configure } from 'react-hotkeys' -import Launcher from '../components/Launcher/Launcher' - -import dynamic from 'next/dynamic' -const Search = dynamic(() => import('../components/Search'), { ssr: false }) - -configure({ - ignoreTags: [] -}) - -class Docs extends Component { - constructor(props) { - super(props) - - this.state = { - launcherVisible: false - } - } - - showLauncher(event) { - event.preventDefault() - this.setState({ launcherVisible: true }, () => { - document.body.style.overflow = 'hidden' - }) - } - - hideLauncher() { - this.setState({ launcherVisible: false }, () => { - document.body.style.overflow = 'unset' - }) - } - - render() { - const { title, description } = this.props.children.props.query - const pageTitle = `${title} — Dracula UI` - - const keyMap = { - SHOW_LAUNCHER: ['ctrl+k', 'command+k'], - HIDE_LAUNCHER: 'esc' - } - - const handlers = { - SHOW_LAUNCHER: this.showLauncher.bind(this), - HIDE_LAUNCHER: this.hideLauncher.bind(this) - } - - return ( - - - {pageTitle} - - - - - - - - - - - - -
    - - - {title} - - - {description} - - - {this.props.children} -
    -     -     -     - ) - } -} - -export default Docs diff --git a/website/lib/gtag.js b/website/lib/gtag.js deleted file mode 100644 index 112adadb..00000000 --- a/website/lib/gtag.js +++ /dev/null @@ -1,7 +0,0 @@ -export const GA_TRACKING_ID = "UA-4114546-51"; - -export const pageview = (url) => { - window.gtag("config", GA_TRACKING_ID, { - page_path: url, - }); -}; diff --git a/website/lib/paths.js b/website/lib/paths.js deleted file mode 100644 index a4798f45..00000000 --- a/website/lib/paths.js +++ /dev/null @@ -1,26 +0,0 @@ -import dspComponents from 'dracula-ui/dsp/data/components.json' - -const paths = dspComponents.entities - .filter((entity) => !['Spacing', 'Colors'].includes(entity.name)) - .filter((en) => !en.name.startsWith('.')) - .map((entity) => { - return { - params: { - guide: entity.name.toLowerCase(), - title: entity.name, - description: entity.description, - docgen: entity.ext_com_draculaui_docgen, - sections: Object.values(entity.ext_com_draculaui_variations).map( - (example) => { - return { - ...example, - code: example.html, - description: example.docs - } - } - ) - } - } - }) - -module.exports = paths diff --git a/website/lib/prism.js b/website/lib/prism.js deleted file mode 100644 index eea9d767..00000000 --- a/website/lib/prism.js +++ /dev/null @@ -1,76 +0,0 @@ -/** - * Built on top of the original theme - * - * https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/dracula.js - */ - -const theme = { - plain: { - color: "#F8F8F2", - backgroundColor: "#282a36", - }, - styles: [ - { - types: ["prolog", "constant", "builtin"], - style: { - color: "hsl(250, 100%, 75%)", - }, - }, - { - types: ["inserted", "function"], - style: { - color: "hsl(115, 100%, 75%)", - }, - }, - { - types: ["deleted"], - style: { - color: "hsl(10, 100%, 75%)", - }, - }, - { - types: ["changed"], - style: { - color: "hsl(35, 100%, 75%)", - }, - }, - { - types: ["punctuation", "symbol"], - style: { - color: "rgb(248, 248, 242)", - }, - }, - { - types: ["string", "char", "selector", "attr-value"], - style: { - color: "hsl(60, 100%, 75%)", - }, - }, - { - types: ["keyword", "variable", "tag"], - style: { - color: "hsl(330, 100%, 75%)", - }, - }, - { - types: ["comment"], - style: { - color: "hsl(250, 25%, 55%)", - }, - }, - { - types: ["attr-name"], - style: { - color: "hsl(115, 100%, 75%)", - }, - }, - { - types: ["atrule"], - style: { - color: "hsl(170, 100%, 75%)", - }, - }, - ], -}; - -export default theme; \ No newline at end of file diff --git a/website/next.config.js b/website/next.config.js new file mode 100644 index 00000000..4adc5029 --- /dev/null +++ b/website/next.config.js @@ -0,0 +1,16 @@ +module.exports = { + async redirects() { + return [ + { + source: '/', + destination: 'https://draculatheme.com/blog/sunsetting-dracula-ui', + permanent: true, + }, + { + source: '/:any', + destination: 'https://draculatheme.com/blog/sunsetting-dracula-ui', + permanent: true, + }, + ] + }, +} \ No newline at end of file diff --git a/website/package.json b/website/package.json index 7ef6768a..cab4eb6d 100644 --- a/website/package.json +++ b/website/package.json @@ -2,26 +2,14 @@ "name": "website", "version": "1.0.0", "description": "Dracula UI site", - "engines": { - "node": ">=10 <17.0.0" - }, "scripts": { "dev": "next dev" }, "author": "Netto Farah & Zeno Rocha", "dependencies": { - "bootstrap-icons": "^1.4.1", - "clipboard": "^2.0.8", - "dracula-ui": "file:../dist", - "focus-trap-react": "^8.5.0", - "fuse.js": "^6.4.6", - "globby": "^11.0.2", - "lodash": "^4.17.21", - "next": "^10.2.0", - "prism-react-renderer": "^1.2.0", - "react": "^17.0.1", - "react-dom": "^17.0.1", - "react-hotkeys": "^2.0.0" + "next": "^14.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "license": "SEE LICENSE IN LICENSE.md", "prettier": { diff --git a/website/pages/[guide].js b/website/pages/[guide].js deleted file mode 100644 index 71feabfc..00000000 --- a/website/pages/[guide].js +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react' -import { Anchor, Box, Heading, Paragraph } from 'dracula-ui' -import { DocsOverview } from '../components/DocsOverview' -import PropsTable from '../components/PropsTable' -import Tabs from '../components/Tabs' -import Docs from '../layouts/Docs' -import paths from '../lib/paths' - -export async function getStaticPaths() { - return { paths, fallback: false } -} - -export async function getStaticProps({ params }) { - const query = paths.find((path) => path.params.guide === params.guide).params - return { props: { query } } -} - -function Properties({ docGenProps }) { - return ( - <> - - - Properties - - - - - - ) -} - -function Section({ section }) { - return ( - - - - {section.title} - - - - {section.description && ( - {section.description} - )} - - - - ) -} - -function Guide({ query }) { - const { title, sections, docgen } = query - - return ( - - - - - {sections.map((section) => { - return ( - -
    - - ) - })} - - - - - - - ) -} - -Guide.Layout = Docs - -export default Guide diff --git a/website/pages/_app.js b/website/pages/_app.js deleted file mode 100644 index 3840f659..00000000 --- a/website/pages/_app.js +++ /dev/null @@ -1,24 +0,0 @@ -import App from "next/app" -import Router from "next/router" -import * as gtag from "../lib/gtag" - -Router.events.on("routeChangeComplete", (url) => gtag.pageview(url)) - -import '../styles/main.css'; -import 'dracula-ui/styles/dracula-ui.css' -import 'bootstrap-icons/font/bootstrap-icons.css' - -const Noop = ({ children }) => children - -export default class MyApp extends App { - render() { - const { Component, pageProps } = this.props - const Layout = Component.Layout || Noop - - return ( - - - - ) - } -} diff --git a/website/pages/_document.js b/website/pages/_document.js deleted file mode 100644 index 1cce2299..00000000 --- a/website/pages/_document.js +++ /dev/null @@ -1,48 +0,0 @@ -import Document, { Head, Html, Main, NextScript } from "next/document"; - -import { GA_TRACKING_ID } from "../lib/gtag"; -import React from "react"; - -export default class extends Document { - static async getInitialProps(ctx) { - const initialProps = await Document.getInitialProps(ctx); - return { ...initialProps }; - } - - render() { - return ( - - - - - - - - - -