├── .gitignore ├── README.md ├── components ├── Callout.js ├── DocSearch.js ├── Logo.js ├── Tags.js └── Video.js ├── next.config.js ├── package.json ├── pages ├── _app.js ├── _document.js ├── api-reference │ ├── ComponentStructure.excalidraw │ ├── components │ │ ├── admin.mdx │ │ ├── app-settings.mdx │ │ ├── editor.mdx │ │ ├── login.mdx │ │ ├── meta.json │ │ ├── page-viewer.mdx │ │ ├── playground.mdx │ │ └── react-bricks.mdx │ ├── hooks │ │ ├── meta.json │ │ ├── use-admin-context.mdx │ │ ├── use-auth.mdx │ │ ├── use-page-public.mdx │ │ ├── use-page-values.mdx │ │ ├── use-pages-public.mdx │ │ ├── use-react-bricks-context.mdx │ │ ├── use-tags-public.mdx │ │ └── use-visual-edit.mdx │ ├── introduction │ │ ├── components-structure.mdx │ │ ├── introduction.mdx │ │ └── meta.json │ ├── meta.json │ ├── types │ │ ├── enums.mdx │ │ ├── interfaces.mdx │ │ ├── meta.json │ │ └── types.mdx │ ├── utilities │ │ ├── block-plugin-constructor.mdx │ │ ├── clean-page.mdx │ │ ├── fetch-page.mdx │ │ ├── fetch-pages.mdx │ │ ├── fetch-tags.mdx │ │ ├── get-page-plain-text.mdx │ │ ├── mark-plugin-constructor.mdx │ │ ├── meta.json │ │ ├── plain.mdx │ │ └── uuid.mdx.old │ └── visual-components │ │ ├── file.mdx │ │ ├── image.mdx │ │ ├── link.mdx │ │ ├── meta.json │ │ ├── repeater.mdx │ │ ├── rich-text-ext.mdx │ │ ├── rich-text.mdx │ │ └── text.mdx ├── docs │ ├── admin-dashboard │ │ ├── app-settings.mdx │ │ ├── click-to-edit.mdx │ │ ├── editor.mdx │ │ ├── i18n.mdx │ │ ├── meta.json │ │ ├── overview.mdx │ │ ├── pages.mdx │ │ ├── playground.mdx │ │ └── user-roles.mdx │ ├── bricks │ │ ├── access-page-meta.mdx │ │ ├── create-visual-editing.mdx │ │ ├── external-content.mdx │ │ ├── meta.json │ │ ├── schema.mdx │ │ ├── side-edit-props.mdx │ │ ├── styling.mdx │ │ ├── visual-edit.mdx │ │ └── what-is-a-brick.mdx │ ├── configuration │ │ ├── configuration.mdx │ │ ├── custom-fields.mdx │ │ ├── meta.json │ │ └── page-types.mdx │ ├── deploy │ │ ├── how-to-deploy.mdx │ │ └── meta.json │ ├── getting-started │ │ ├── cli.mdx │ │ ├── introduction.mdx.old │ │ ├── learning-resources.mdx │ │ ├── meta.json │ │ ├── react-bricks-dashboard.mdx │ │ └── starter-projects.mdx │ ├── internationalization │ │ ├── meta.json │ │ ├── nextjs-i18-rounting.mdx │ │ └── page-and-queries.mdx │ ├── meta.json │ ├── nested-blocks │ │ ├── get-default-props.mdx │ │ ├── meta.json │ │ ├── overview.mdx │ │ ├── repeated-bricks.mdx │ │ └── repeater-items.mdx │ └── release-notes │ │ ├── meta.json │ │ ├── react-bricks-v2.mdx │ │ ├── react-bricks-v3.mdx │ │ ├── react-bricks-v31.mdx │ │ ├── upgrade-guide-v1-v2.mdx │ │ └── upgrade-guide-v2-v3.mdx ├── index.mdx └── meta.json ├── postcss.config.js ├── public ├── favicon-32x32.png ├── images │ ├── admin_app_settings.png │ ├── admin_editor.png │ ├── admin_editor_page.png │ ├── admin_playground.png │ ├── components-structure-admin.svg │ ├── components-structure-frontend.png │ ├── components-structure-frontend.svg │ ├── dashboard_app_keys.png │ ├── dashboard_app_keys_large.png │ ├── dashboard_app_settings.png │ ├── dashboard_app_settings_large.png │ ├── dashboard_app_users.png │ ├── dashboard_app_users_large.png │ ├── dashboard_apps.png │ ├── dashboard_apps_large.png │ ├── dashboard_user_settings.png │ ├── dashboard_user_settings_large.png │ ├── react-bricks-ui.ai │ └── react-bricks-ui.png ├── reactbricks-logo.svg └── videos │ ├── RB_CLI_opt.mp4 │ ├── click_to_edit.mp4 │ ├── i18n_delete.mp4 │ ├── i18n_settings.mp4 │ └── i18n_translation.mp4 ├── styles ├── globals.css ├── night-owl.css └── tailwind.css ├── tailwind.config.js ├── theme.config.js ├── utils └── gtag.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Bricks documentation 2 | 3 | This is the documentation website for [React Bricks](https://reactbricks.com). -------------------------------------------------------------------------------- /components/Callout.js: -------------------------------------------------------------------------------- 1 | const Callout = ({ children, background = 'bg-pink-50', emoji = '💡' }) => { 2 | return ( 3 |
4 | {emoji} 5 | {children} 6 | 11 |
12 | ) 13 | } 14 | 15 | export default Callout 16 | -------------------------------------------------------------------------------- /components/DocSearch.js: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from 'react' 2 | 3 | const DocSearch = () => { 4 | const input = useRef(null) 5 | 6 | useEffect(() => { 7 | const inputs = ['input', 'select', 'button', 'textarea'] 8 | 9 | const down = (e) => { 10 | if ( 11 | document.activeElement && 12 | inputs.indexOf(document.activeElement.tagName.toLowerCase() !== -1) 13 | ) { 14 | if (e.key === '/') { 15 | e.preventDefault() 16 | input.current?.focus() 17 | } 18 | } 19 | } 20 | 21 | window.addEventListener('keydown', down) 22 | return () => window.removeEventListener('keydown', down) 23 | }, []) 24 | 25 | useEffect(() => { 26 | if (window.docsearch) { 27 | window.docsearch({ 28 | apiKey: '0fe0aa5e6289732435481bbfe5d5a915', 29 | indexName: 'reactbricks', 30 | inputSelector: 'input#algolia-doc-search', 31 | }) 32 | } 33 | }, []) 34 | 35 | return ( 36 |
37 | 44 |
45 | ) 46 | } 47 | 48 | export default DocSearch 49 | -------------------------------------------------------------------------------- /components/Logo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Logo = () => { 4 | return ( 5 |
6 | 14 | 15 | 19 | 27 | 31 | 38 | 45 | 46 | 47 | 48 | 49 |
50 | ) 51 | } 52 | 53 | export default Logo 54 | -------------------------------------------------------------------------------- /components/Tags.js: -------------------------------------------------------------------------------- 1 | const Tags = ({ tags }) => { 2 | const getColor = (tag) => { 3 | switch (tag.toLowerCase()) { 4 | case 'required': 5 | return 'bg-violet-200 text-violet-700 dark:text-violet-200 dark:bg-violet-700' 6 | case 'easy': 7 | return 'bg-light-blue-200 text-light-blue-700 dark:text-light-blue-200 dark:bg-light-blue-700' 8 | case 'medium': 9 | return 'bg-amber-200 text-amber-700 dark:text-amber-100 dark:bg-amber-700' 10 | case 'heavy': 11 | return 'bg-rose-200 text-rose-700 dark:text-rose-200 dark:bg-rose-700' 12 | case 'new': 13 | return 'bg-lime-200 text-lime-700 dark:text-lime-200 dark:bg-lime-700' 14 | case 'pro': 15 | return 'bg-blue-200 text-blue-700 dark:text-blue-200 dark:bg-blue-700' 16 | case 'enterprise': 17 | return 'bg-purple-200 text-purple-700 dark:text-purple-200 dark:bg-purple-700' 18 | default: 19 | return 'bg-gray-200 text-gray-700 dark:text-gray-200 dark:bg-gray-700' 20 | } 21 | } 22 | 23 | return ( 24 |
25 | {tags.map((tag) => { 26 | return ( 27 |
33 | {tag.toUpperCase()} 34 |
35 | ) 36 | })} 37 |
38 | ) 39 | } 40 | 41 | export default Tags 42 | -------------------------------------------------------------------------------- /components/Video.js: -------------------------------------------------------------------------------- 1 | import { useRef, useCallback, useEffect } from 'react' 2 | import { useInView } from 'react-intersection-observer' 3 | import 'intersection-observer' 4 | 5 | const Video = ({ src }) => { 6 | const [inViewRef, inView] = useInView({ 7 | threshold: 0.5, 8 | }) 9 | const videoRef = useRef(null) 10 | 11 | const setRefs = useCallback( 12 | (node) => { 13 | // Ref's from useRef needs to have the node assigned to `current` 14 | videoRef.current = node 15 | // Callback refs, like the one from `useInView`, is a function that takes the node as an argument 16 | inViewRef(node) 17 | 18 | if (node) { 19 | node.addEventListener('click', function () { 20 | if (this.paused) { 21 | this.play() 22 | } else { 23 | this.pause() 24 | } 25 | }) 26 | } 27 | }, 28 | [inViewRef] 29 | ) 30 | 31 | useEffect(() => { 32 | if (!videoRef || !videoRef.current) { 33 | return 34 | } 35 | 36 | if (inView) { 37 | videoRef.current.play() 38 | } else { 39 | videoRef.current.pause() 40 | } 41 | }, [inView]) 42 | 43 | return ( 44 | 47 | ) 48 | } 49 | 50 | export default Video 51 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js') 2 | module.exports = withNextra() -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-bricks-docs-v2-nextra", 3 | "version": "0.1.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "export": "next export" 10 | }, 11 | "dependencies": { 12 | "autoprefixer": "^10.2.1", 13 | "next": "10.0.5", 14 | "nextra": "^0.3.2", 15 | "nextra-theme-docs": "^1.0.4", 16 | "postcss": "^8.2.3", 17 | "react": "16.13.1", 18 | "react-dom": "16.13.1", 19 | "react-intersection-observer": "^8.31.0", 20 | "tailwindcss": "^2.0.2" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | // import 'nextra-theme-docs/style.css' 2 | import { useEffect } from 'react' 3 | import { useRouter } from 'next/router' 4 | import * as gtag from '../utils/gtag' 5 | import '../styles/tailwind.css' 6 | import '../styles/globals.css' 7 | import '../styles/night-owl.css' 8 | 9 | function MyApp({ Component, pageProps }) { 10 | const router = useRouter() 11 | 12 | useEffect(() => { 13 | const handleRouteChange = (url) => { 14 | gtag.trackPageview(url) 15 | } 16 | router.events.on('routeChangeComplete', handleRouteChange) 17 | return () => { 18 | router.events.off('routeChangeComplete', handleRouteChange) 19 | } 20 | }, [router.events]) 21 | return 22 | } 23 | 24 | export default MyApp 25 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Document, { Html, Head, Main, NextScript } from 'next/document' 3 | 4 | import { GA_TRACKING_ID_UA, GA_TRACKING_ID_V4 } from '../utils/gtag' 5 | 6 | class MyDocument extends Document { 7 | render() { 8 | return ( 9 | 10 | 11 | 12 |
13 | 14 |