Skip to content

Commit

Permalink
Merge pull request #64 from DarrenBaldwin07/docs-website
Browse files Browse the repository at this point in the history
Docs website
  • Loading branch information
DarrenBaldwin07 authored Oct 4, 2023
2 parents b177113 + eb5e466 commit 54cd4d0
Show file tree
Hide file tree
Showing 23 changed files with 623 additions and 147 deletions.
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
dist
build
target
*.mdx
2 changes: 1 addition & 1 deletion crates/rapid-web/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ pub use rapid_web_codegen;
pub(crate) mod default_routes;
pub mod logger;
pub mod server;
pub mod shift; // TODO: shift needs to be abstracted out into its own crate (for now it will be left private to rapid-web as users do not need to access it)
pub mod shift; // TODO: shift needs to be abstracted out into its own crate
pub(crate) mod tui;
pub mod types;
pub(crate) mod util;
Expand Down
2 changes: 1 addition & 1 deletion crates/rapid-web/src/shift/util.rs
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ use super::convert::{convert_primitive, TypescriptType};
use syn::{parse_file, Expr, File as SynFile, Generics, Item, Lit, Type};

pub const GENERATED_TS_FILE_MESSAGE: &str =
"// @generated automatically by Rapid-web (https://rapid.cincinnati.ventures). DO NOT CHANGE OR EDIT THIS FILE!";
"// @generated automatically by Rapid-web (https://rapidframework.dev). DO NOT CHANGE OR EDIT THIS FILE!";

#[derive(Debug)]
pub enum TypeClass {
Expand Down
68 changes: 40 additions & 28 deletions docs/landing/app/components/CodeBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@ import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-rust';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-toml';
import { faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

interface Props {
language: string;
code: string;
fileName?: string;
}

const CodeBlock = ({ language, code }: Props) => {
const CodeBlock = ({ language, code, fileName }: Props) => {
const codeRef = useRef<HTMLDivElement>(null);
const [isShowingCopy, setIsShowingCopy] = useState(false);
const [isCopied, setIsCopied] = useState(false);
Expand All @@ -23,37 +25,47 @@ const CodeBlock = ({ language, code }: Props) => {

return (
<div
className='z-2 mt-6'
className='mt-6 overflow-y-hidden'
onMouseOver={() => setIsShowingCopy(true)}
onMouseLeave={() => setTimeout(() => setIsShowingCopy(false), 250)}
>
<div className='flex w-full justify-between rounded-lg bg-[#282C34]'>
<pre ref={codeRef as any} className={`language-${language}`}>
{code}
</pre>
<div>
{isShowingCopy && (
<button
className='m-2 flex self-end rounded-lg border border-[#27272D] bg-[#18181C] p-2 text-white transition-all duration-100 ease-linear'
onClick={() => {
navigator.clipboard.writeText(code);
setIsShowingCopy(false);
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 1000);
}}
>
<FontAwesomeIcon
icon={isCopied ? faCheck : faCopy}
color='white'
size='sm'
width={16}
height={16}
/>
</button>
)}
<div className='flex flex-col rounded-lg bg-[#282C34] p-2'>
<div className='flex w-full justify-between'>
<pre
ref={codeRef as any}
className={`language-${language} no-scroll-bar z-10 text-sm`}
>
{code}
</pre>
<div>
{isShowingCopy && (
<button
className='m-2 flex self-end rounded-lg border border-[#27272D] bg-[#18181C] p-2 text-white transition-all duration-100 ease-linear'
onClick={() => {
navigator.clipboard.writeText(code);
setIsShowingCopy(false);
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, 1000);
}}
>
<FontAwesomeIcon
icon={isCopied ? faCheck : faCopy}
color='white'
size='sm'
width={16}
height={16}
/>
</button>
)}
</div>
</div>
{fileName && (
<div className='w-max self-end rounded-full border border-[#27272D] bg-[#18181C] px-2 py-1 text-xs text-white'>
<pre>{fileName}</pre>
</div>
)}
</div>
</div>
);
Expand Down
7 changes: 3 additions & 4 deletions docs/landing/app/components/DocsLinks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const DocsLinks = () => {
<Text styles='gradient-text uppercase text-xs'>
Getting Started
</Text>
<div className='z-10 flex flex-col gap-2 border-l-[0.5px] border-[#222222]'>
<div className='z-100 flex flex-col gap-2 border-l-[0.5px] border-[#222222]'>
<NavLink
to='/docs/introduction/doc'
className={({ isActive }) =>
Expand Down Expand Up @@ -44,7 +44,7 @@ const DocsLinks = () => {
</div>
<div className='flex flex-col gap-6'>
<Text styles='gradient-text uppercase text-xs'>Server</Text>
<div className='z-10 flex flex-col gap-2 border-l-[0.5px] border-[#222222]'>
<div className='z-100 flex flex-col gap-2 border-l-[0.5px] border-[#222222]'>
<NavLink
to='/docs/route-handlers/doc'
className={({ isActive }) =>
Expand Down Expand Up @@ -78,7 +78,7 @@ const DocsLinks = () => {
<Text styles='exclude-from-markdown'>Type Safety</Text>
</NavLink>
<NavLink
to='/docs/rapid-config/doc'
to='/docs/configuration/doc'
className={({ isActive }) =>
`text-docsText exclude-from-markdown z-10 border-l-2 border-transparent pl-4 transition-all duration-100 ease-in-out hover:text-white ${
isActive && 'border-l-mainBlue text-white'
Expand Down Expand Up @@ -127,7 +127,6 @@ const DocsLinks = () => {
</div>
</div>
</>

);
};

Expand Down
16 changes: 8 additions & 8 deletions docs/landing/app/components/DocsNavigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,15 @@ const DocsNavigation = () => {

return (
<div>
<div className='safari-blur fixed top-0 w-full backdrop-blur-lg transition duration-500 md:relative'>
<img
className='absolute -top-[25px] left-1/2 -z-50 -translate-x-1/2 overflow-hidden md:-top-[70px] lg:-top-[100px]'
src={GradientMain}
alt='main gradient'
/>
<img
className='absolute -top-[25px] left-1/2 -z-50 -translate-x-1/2 overflow-hidden md:-top-[70px] lg:-top-[100px]'
src={GradientMain}
alt='main gradient'
/>
<div className='safari-blur fixed top-0 z-50 w-full backdrop-blur-lg transition duration-500'>
<Container>
<div className='flex items-center justify-between pt-[18px]'>
<Link className='z-10' to='/'>
<Link to='/'>
<img width={120} src={Logo} alt='logo' />
</Link>
<div className='flex items-center gap-6'>
Expand Down Expand Up @@ -74,7 +74,7 @@ const DocsNavigation = () => {
</div>
</div>
<div
className='z-10 mt-6 flex w-full flex-col gap-4 rounded-[25px] border border-[#222222] bg-[#1A191D] px-6 py-3 hover:cursor-pointer md:hidden'
className='z-50 mt-6 flex w-full flex-col gap-4 rounded-[25px] border border-[#222222] bg-[#1A191D] px-6 py-3 hover:cursor-pointer md:hidden'
onClick={() => setIsOpen(!isOpen)}
>
<div className='flex items-center gap-4'>
Expand Down
6 changes: 3 additions & 3 deletions docs/landing/app/components/DocsSidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import DocsLinks from './DocsLinks';

const DocsSidebar = () => {
return (
<div className='z-10'>
<div className='z-10 hidden h-screen w-44 flex-col gap-4 border-r-[0.5px] border-[#222222] md:flex lg:w-56'>
<div className='mt-12 flex flex-col gap-12'>
<div className='z-2'>
<div className='hidden h-screen w-44 flex-col gap-4 border-r-[0.5px] border-[#222222] md:flex lg:w-56'>
<div className='mt-24 flex flex-col gap-12'>
<DocsLinks />
</div>
</div>
Expand Down
58 changes: 58 additions & 0 deletions docs/landing/app/components/NextDoc.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, { useEffect, useState } from 'react';
import { Text } from '@rapid-web/ui';
import { Link } from '@remix-run/react';
import Github from '../../assets/github.svg';
import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { getNextDocPathName, shouldShowDocsNavigation } from '../routes/docs';

const NextDoc = () => {
const [pathName, setPathName] = useState<string>();
const [isShowingDocsNavigation, setIsShowingDocsNavigation] =
useState(false);

useEffect(() => {
setPathName(window.location.pathname);
setIsShowingDocsNavigation(
shouldShowDocsNavigation(pathName as string),
);
}, [pathName]);

return (
<>
{isShowingDocsNavigation && (
<div className='mt-16 flex flex-col items-center gap-4 md:flex-row'>
<a
href='https://github.com/Cincinnati-Ventures/rapid'
className='exclude-from-markdown w-full no-underline md:w-1/3'
>
<div className='hover:border-mainBlue flex items-center gap-2 rounded-lg border-[0.5px] border-[#222222] p-4 transition-all duration-100 ease-linear'>
<img width={20} src={Github} alt='github' />
<Text className='text-sm font-bold text-white'>
View on Github
</Text>
</div>
</a>
<Link
to={getNextDocPathName(pathName).path}
className='exclude-from-markdown w-full no-underline md:w-1/3'
>
<div className='hover:border-mainBlue flex items-center gap-2 rounded-lg border-[0.5px] border-[#222222] p-4 transition-all duration-100 ease-linear'>
<FontAwesomeIcon
icon={faChevronRight}
color='white'
width={20}
height={20}
/>
<Text className='text-sm font-bold text-white'>
Next Doc: {getNextDocPathName(pathName)?.text}
</Text>
</div>
</Link>
</div>
)}
</>
);
};

export default NextDoc;
2 changes: 1 addition & 1 deletion docs/landing/app/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const docsSetup = (routeName: string, request: Request) => {
url.pathname = `/docs/${routeName}`;
}

const routes = url.pathname.split('/').filter(Boolean)
const routes = url.pathname.split('/').filter(Boolean);

return json({
routes,
Expand Down
51 changes: 51 additions & 0 deletions docs/landing/app/routes/docs.configuration.doc.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import CodeBlock from '../components/CodeBlock';

Every Rapid project must have a configuration file called `rapid.toml`. This document outlines all of the possible configuration options and what they do in detail.
<br />
## Base configurations

### Server
This is the default config for a Rapid server project scaffolded with `rapid new --server`:
<CodeBlock language='rust' code={`app_type = "server"
[server]
serve_static_files = true // Toggles static file serving from the "/public" directory
is_logging = true // Toggles request/response logging
typescript_generation = true
port = 8080 // Changes the port that the Rapid server is served on
routes_directory = "src/routes" // Specifies the directory where rapid will parse for file-based routing
bindings_export_path = "/" // The path where you want your typescript bindings to be exported from
`} />

<br />

### Remix
This is the default config for a Rapid remix project scaffolded with `rapid new --remix`:
<CodeBlock language='rust' code={`app_type = "remix"
[remix]
server_port = 8080
serve_static_files = true
is_logging = true
typescript_generation = true
bindings_export_path = "app/api"
`} />

<br />

### NextJS
This is the default config for a Rapid nextjs project scaffolded with `rapid new --nextjs`:
<CodeBlock language='rust' code={`app_type = "nextjs"
[nextjs]
server_port = 8080
serve_static_files = true
is_logging = true
typescript_generation = true
bindings_export_path = "pages/api"
`} />

<br />

## Config options
> Coming soon...
48 changes: 48 additions & 0 deletions docs/landing/app/routes/docs.configuration.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import { docsSetup } from '~/helpers';
import { Heading } from '@rapid-web/ui';
import type { LoaderFunction, LinksFunction } from '@remix-run/node';
import { useLoaderData, Outlet } from '@remix-run/react';
import { BreadCrumb } from '~/components/BreadCrumb';
import styles from '../styles/markdown.css';
import prism from '../styles/prism.css';
import NextDoc from '~/components/NextDoc';

interface LoaderOutput {
routes: string[];
}

export const links: LinksFunction = () => {
return [
{
rel: 'stylesheet',
href: styles,
},
{
rel: 'stylesheet',
href: prism,
},
];
};

export const loader: LoaderFunction = ({ request }) => {
return docsSetup('configuration', request);
};

const Configuration = () => {
const data = useLoaderData<LoaderOutput>();
return (
<div className='w-full'>
<BreadCrumb routes={data.routes} />
<Heading styles='exclude-from-markdown text-white text-5xl font-bold'>
Configuration
</Heading>
<div className='mt-12 w-full text-white'>
<Outlet />
</div>
<NextDoc />
</div>
);
};

export default Configuration;
Loading

0 comments on commit 54cd4d0

Please sign in to comment.