├── .gitignore
├── .vscode
    └── settings.json
├── client
    ├── static
    │   ├── obs-trans.png
    │   ├── obsidianLogo2.png
    │   ├── obsidianLogo3.png
    │   ├── prism.css
    │   ├── github-icon.svg
    │   ├── Deno-Logo.svg
    │   ├── logo.svg
    │   ├── prism.js
    │   └── style.css
    ├── Components
    │   ├── SideBarContext
    │   │   ├── AboutContext.jsx
    │   │   ├── MainContext.tsx
    │   │   ├── DemoContext.tsx
    │   │   └── DocsContext.tsx
    │   ├── DocPages
    │   │   ├── Caching
    │   │   │   ├── Errors.tsx
    │   │   │   ├── Server.tsx
    │   │   │   ├── Client.tsx
    │   │   │   └── Strategies.tsx
    │   │   ├── Advanced
    │   │   │   └── Polling.tsx
    │   │   ├── Basics
    │   │   │   ├── Errors.tsx
    │   │   │   ├── Mutations.tsx
    │   │   │   ├── Queries.tsx
    │   │   │   ├── GettingStarted.tsx
    │   │   │   └── ServerSideRendering.tsx
    │   │   ├── Philosophy.tsx
    │   │   ├── Overview.tsx
    │   │   └── QuickStart.tsx
    │   ├── About.tsx
    │   ├── Main.tsx
    │   ├── MainContainer.tsx
    │   ├── NestedCache.tsx
    │   ├── Cache.tsx
    │   ├── Demo.tsx
    │   ├── TeamMember.jsx
    │   ├── Docs.tsx
    │   ├── SideBar.tsx
    │   ├── NavBar.tsx
    │   ├── ObsidianLogo.tsx
    │   └── Team.jsx
    ├── client.tsx
    └── app.tsx
├── serverDeps.ts
├── README.md
├── docker-compose.yml
├── Dockerfile
├── .travis.yml
├── deno.test.ts
├── deps.ts
├── staticFileMiddleware.ts
├── tsconfig.json
└── server.tsx


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "deno.enable": true,
3 |   "deno.lint": true,
4 |   "deno.unstable": true
5 | }


--------------------------------------------------------------------------------
/client/static/obs-trans.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lascaux-obsidian/obsidian-website/HEAD/client/static/obs-trans.png


--------------------------------------------------------------------------------
/client/static/obsidianLogo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lascaux-obsidian/obsidian-website/HEAD/client/static/obsidianLogo2.png


--------------------------------------------------------------------------------
/client/static/obsidianLogo3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lascaux-obsidian/obsidian-website/HEAD/client/static/obsidianLogo3.png


--------------------------------------------------------------------------------
/client/Components/SideBarContext/AboutContext.jsx:
--------------------------------------------------------------------------------
1 | import { React } from '../../../deps.ts';
2 | 
3 | const AboutContext = (props) => <div></div>;
4 | 
5 | export default AboutContext;
6 | 


--------------------------------------------------------------------------------
/serverDeps.ts:
--------------------------------------------------------------------------------
1 | import {
2 |   Application,
3 |   Router,
4 |   Context,
5 |   send,
6 | } from 'https://deno.land/x/oak@v6.0.1/mod.ts';
7 | 
8 | export { Application, Router, Context, send };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ObsidianWebsite
2 | 
3 | <img alt="Travis (.org)" src="https://img.shields.io/travis/lascaux-obsidian/obsidian-website">
4 | 
5 | deno run --allow-net --allow-read --unstable server.tsx -c tsconfig.json
6 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: "3.8"
 2 | 
 3 | services:
 4 |     site:
 5 |         build: .
 6 |         restart: always
 7 |         volumes:
 8 |             - ./:/usr/app
 9 |         ports:
10 |             - "80:3000"
11 | 


--------------------------------------------------------------------------------
/client/client.tsx:
--------------------------------------------------------------------------------
1 | import { React, ReactDom } from '../deps.ts';
2 | import App from './app.tsx';
3 | 
4 | // Hydrate the app and reconnect React functionality
5 | (ReactDom as any).hydrate(
6 |   <App />,
7 |   document.getElementById('root')
8 | );
9 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM denoland/deno:1.11.3
 2 | 
 3 | EXPOSE 3000
 4 | 
 5 | WORKDIR /usr/app
 6 | 
 7 | USER deno
 8 | 
 9 | COPY . .
10 | 
11 | CMD [ "run", "--allow-net", "--allow-env", "--allow-read", "--unstable", "server.tsx" ]
12 | 
13 | 
14 | # deno run --unstable --allow-net --allow-env --allow-read server.tsx -c tsconfig.json
15 | 


--------------------------------------------------------------------------------
/client/Components/SideBarContext/MainContext.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../../deps.ts';
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     interface IntrinsicElements {
 6 |       div: any;
 7 |     }
 8 |   }
 9 | }
10 | 
11 | const MainContext = (props: any) => {
12 |   return <div></div>;
13 | };
14 | 
15 | export default MainContext;
16 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Caching/Errors.tsx:
--------------------------------------------------------------------------------
 1 | import { React, CodeBlock, dracula } from '../../../../deps.ts';
 2 | 
 3 | const CachingErrors = (props: any) => {
 4 | 
 5 |   return (
 6 |     <div className="docContainer">
 7 |       <h1>Errors</h1>
 8 |       <p>This page is a stub.  Check back soon for more information about caching errors in <code className="obsidianInline">obsidian</code>.</p>
 9 |     </div>
10 |   )
11 | }
12 | 
13 | export default CachingErrors;
14 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: required
 2 | 
 3 | services:
 4 |   - docker
 5 | before_install:
 6 |   - docker build -t lascaux-obsidian/obsidian-website .
 7 | script:
 8 |   - docker run lascaux-obsidian/obsidian-website test
 9 | deploy:
10 |   provider: elasticbeanstalk
11 |   region: 'us-east-1'
12 |   app: 'obs-website'
13 |   env: 'obs-website-prod'
14 |   bucket_name: 'elasticbeanstalk-us-east-1-416954177761'
15 |   bucket_path: 'obs_website'
16 |   access_key_id: '$AWS_ACCESS_KEY_ID'
17 |   secret_access_key: '$AWS_SECRET_ACCESS_KEY'
18 |   on:
19 |     branch: master
20 | 


--------------------------------------------------------------------------------
/client/app.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../deps.ts';
 2 | import NavBar from './Components/NavBar.tsx';
 3 | import MainContainer from './Components/MainContainer.tsx';
 4 | 
 5 | declare global {
 6 |   namespace JSX {
 7 |     interface IntrinsicElements {
 8 |       div: any;
 9 |     }
10 |   }
11 | }
12 | 
13 | const App = () => {
14 |   const [page, setPage] = (React as any).useState('home');
15 | 
16 |   return (
17 |       <div className='app'>
18 |         <NavBar setPage={setPage} />
19 |         <MainContainer page={page} />
20 |       </div>
21 |   );
22 | };
23 | 
24 | export default App;


--------------------------------------------------------------------------------
/client/Components/About.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../deps.ts';
 2 | import Team from './Team.jsx';
 3 | import SideBar from './SideBar.tsx';
 4 | 
 5 | declare global {
 6 |   namespace JSX {
 7 |     interface IntrinsicElements {
 8 |       div: any;
 9 |     }
10 |   }
11 | }
12 | 
13 | 
14 | 
15 | 
16 | 
17 | const About = (props: any) => {
18 |   return (
19 |     <>
20 |       <div className="mainContainer">
21 | 
22 |           
23 |           <div className="devGrid">     
24 |           <Team/>
25 |           </div>
26 |           </div>
27 |   
28 | 
29 |       <SideBar page={props.page}  />
30 |     </>
31 |   );
32 | };
33 | 
34 | export default About;
35 | 


--------------------------------------------------------------------------------
/deno.test.ts:
--------------------------------------------------------------------------------
 1 | // import { superoak } from 'https://deno.land/x/superoak@2.3.1/mod.ts';
 2 | // import { describe, it } from 'https://deno.land/x/superoak@2.3.1/test/utils.ts';
 3 | // import { expect } from 'https://deno.land/x/superoak@2.3.1/test/deps.ts';
 4 | // import { app } from './server.tsx';
 5 | 
 6 | // describe('GET request to root url', () => {
 7 | //   it('Sends 200 Status and Content Type text/html', async (done) => {
 8 | //     (await superoak(app)).get('/').end((err, res) => {
 9 | //       expect(res.status).toEqual(200);
10 | //       expect(res.type).toEqual('text/html');
11 | //       done();
12 | //     });
13 | //   });
14 | // });
15 | 
16 | // deno test -A --unstable
17 | 


--------------------------------------------------------------------------------
/deps.ts:
--------------------------------------------------------------------------------
 1 | import React from 'https://dev.jspm.io/react';
 2 | import ReactDomServer from 'https://dev.jspm.io/react-dom/server';
 3 | import ReactDom from 'https://dev.jspm.io/react-dom';
 4 | 
 5 | import rsh from 'https://dev.jspm.io/react-syntax-highlighter';
 6 | import codeStyles from 'https://dev.jspm.io/npm:react-syntax-highlighter@15.3.1/dist/cjs/styles/prism';
 7 | 
 8 | 
 9 | const realRSH: any = rsh;
10 | const realCodeStyles: any = codeStyles;
11 | 
12 | const CodeBlock = realRSH.Prism;
13 | const { dracula } = realCodeStyles;
14 | 
15 | dracula['pre[class*="language-"]'].background = 'rgba(5, 5, 5, 0.93)';
16 | 
17 | export {
18 |   React,
19 |   ReactDomServer,
20 |   ReactDom,
21 |   CodeBlock,
22 |   dracula
23 | };
24 | 


--------------------------------------------------------------------------------
/staticFileMiddleware.ts:
--------------------------------------------------------------------------------
 1 | import { Context, send } from './serverDeps.ts';
 2 | 
 3 | export const staticFileMiddleware = async (ctx: Context, next: Function) => {
 4 |   const path = `${Deno.cwd()}/client${ctx.request.url.pathname}`;
 5 |   if (await fileExists(path)) {
 6 |     await send(ctx, ctx.request.url.pathname, {
 7 |       root: `${Deno.cwd()}/client`,
 8 |     });
 9 |   } else {
10 |     await next();
11 |   }
12 | };
13 | 
14 | async function fileExists(path: string) {
15 |   try {
16 |     const stats = await Deno.lstat(path);
17 |     return stats && stats.isFile;
18 |   } catch (e) {
19 |     if (e && e instanceof Deno.errors.NotFound) {
20 |       return false;
21 |     } else {
22 |       throw e;
23 |     }
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/client/Components/Main.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../deps.ts';
 2 | import ObsidianLogo from './ObsidianLogo.tsx';
 3 | import SideBar from './SideBar.tsx';
 4 | 
 5 | declare global {
 6 |   namespace JSX {
 7 |     interface IntrinsicElements {
 8 |       div: any;
 9 |       img: any;
10 |     }
11 |   }
12 | }
13 | 
14 | const Main = (props: any) => {
15 |   return (
16 |     <>
17 |       <div className='mainContainerLogo'>
18 |         <div className='homePage'>
19 |           {/* <img src="static/logo.svg" alt="obsidianLogo" className="animate__animated animate__fadeInDown" id="logo"/> */}
20 |           <ObsidianLogo />
21 |         </div>
22 |       </div>
23 |       <SideBar page={props.page} />
24 |     </>
25 |   );
26 | };
27 | 
28 | export default Main;
29 | 


--------------------------------------------------------------------------------
/client/Components/MainContainer.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../deps.ts';
 2 | import Main from './Main.tsx';
 3 | import About from './About.tsx';
 4 | import Demo from './Demo.tsx';
 5 | import Docs from './Docs.tsx';
 6 | 
 7 | declare global {
 8 |   namespace JSX {
 9 |     interface IntrinsicElements {
10 |       div: any;
11 |     }
12 |   }
13 | }
14 | 
15 | const MainContainer = (props: any) => {
16 |   const { page } = props;
17 | 
18 |   let curPage;
19 |   if (page === 'home') curPage = <Main page={props.page} />;
20 |   if (page === 'about') curPage = <About page={props.page} />;
21 |   if (page === 'demo') curPage = <Demo page={props.page} />;
22 |   if (page === 'docs') curPage = <Docs page={props.page} />;
23 | 
24 |   return <>{curPage}</>;
25 | };
26 | 
27 | export default MainContainer;
28 | 


--------------------------------------------------------------------------------
/client/Components/NestedCache.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../deps.ts';
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     interface IntrinsicElements {
 6 |       div: any;
 7 |       p: any;
 8 |     }
 9 |   }
10 | }
11 | 
12 | const NestedCache = (props: any) => {
13 |   const { cache } = props;
14 |   const cachedPair: any = [];
15 | 
16 |   Object.entries(cache).forEach((pair, i) => {
17 |     if (pair[1] instanceof Object) {
18 |       cachedPair.push(<p>{pair[0]} : <NestedCache key={`NestedCache--${i}`} cache={pair[1]} /></p>)
19 |     } else {
20 |       cachedPair.push(<p className="tab">{pair[0]} : {JSON.stringify(pair[1])}</p>)
21 |     }  
22 |   })
23 | 
24 |   return (
25 |     <div className="nested">
26 |       {'{'}{cachedPair}{'}'}
27 |     </div>
28 |   );
29 | };
30 | 
31 | export default NestedCache;
32 | 


--------------------------------------------------------------------------------
/client/Components/Cache.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../deps.ts';
 2 | import NestedCache from './NestedCache.tsx';
 3 | 
 4 | declare global {
 5 |   namespace JSX {
 6 |     interface IntrinsicElements {
 7 |       div: any;
 8 |       p: any;
 9 |     }
10 |   }
11 | }
12 | 
13 | const Cache = (props: any) => {
14 |   const { cache } = props;
15 | 
16 |   const cachedPair: any = [];
17 | 
18 |   Object.entries(cache).forEach((pair, i, arr) => {
19 |       if(pair[0] === 'ROOT_MUTATION' || pair[0] === 'ROOT_QUERY') return;
20 |       cachedPair.push(
21 |         <p key={`pair${i}`}>
22 |           {pair[0]} : , <NestedCache key ={`NestedCache-${i}`} cache={pair[1]}/>
23 |         </p>
24 |       );
25 |   });
26 | 
27 |   return (
28 |     <>
29 |       {'{'}{cachedPair}{'}'}
30 |     </>
31 |   );
32 | };
33 | 
34 | export default Cache;


--------------------------------------------------------------------------------
/client/Components/Demo.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../deps.ts';
 2 | import SideBar from './SideBar.tsx';
 3 | 
 4 | declare global {
 5 |   namespace JSX {
 6 |     interface IntrinsicElements {
 7 |       div: any;
 8 |       br: any;
 9 |       pre: any;
10 |       code: any;
11 |       label: any;
12 |       select: any;
13 |       option: any;
14 |       p: any;
15 |       input: any;
16 |     }
17 |   }
18 | }
19 | 
20 | const Demo = (props: any) => {
21 |   return (
22 |     <>
23 |       <div className='demoContainer'>
24 |         {/* <div id='demo-block'> */}
25 |         <iframe
26 |           src='http://demo.obsidian.land/'
27 |           height='100%'
28 |           width='100%'
29 |         ></iframe>
30 |         {/* </div> */}
31 |       </div>
32 |       {/* <SideBar page={props.page} /> */}
33 |     </>
34 |   );
35 | };
36 | 
37 | export default Demo;
38 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "jsx": "react",
 4 |     "target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
 5 |     "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
 6 |     "lib": [
 7 |       "DOM",
 8 |       "ES2017",
 9 |       "deno.ns"
10 |     ] /* Specify library files to be included in the compilation. */,
11 |     "strict": true /* Enable all strict type-checking options. */,
12 |     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
13 |     "skipLibCheck": true /* Skip type checking of declaration files. */,
14 |     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/client/Components/TeamMember.jsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../deps.ts';
 2 | 
 3 | const TeamMember = ({
 4 |   user: { firstName, lastName, image, info, linkedin, github },
 5 | }) => {
 6 |   return (
 7 |     <div className='col-lg-3 col-md-6 mb-lg-0 mb-5'>
 8 |       <div className='avatar mx-auto'>
 9 |         <div
10 |           rel='prefetch'
11 |           className='slideContent z-depth-1'
12 |           style={{
13 |             backgroundColor: 'black',
14 |             backgroundImage: `url('${image}')`,
15 |           }}
16 |         ></div>
17 |         <h5 className='font-weight-bold mt-4 mb-3'>{`${firstName} ${lastName}`}</h5>
18 |         <ul className='list-unstyled mb-0'>
19 |           <a className='p-2 fa-lg fb-ic' href={github}>
20 |             <i className='fab fa-github '></i>
21 |           </a>
22 | 
23 |           <a className='p-2 fa-lg tw-ic' href={linkedin}>
24 |             <i className='fab fa-linkedin '> </i>
25 |           </a>
26 |         </ul>
27 |         <p className='grey-text'>{info}</p>
28 |       </div>
29 |     </div>
30 |   );
31 | };
32 | export default TeamMember;
33 | 


--------------------------------------------------------------------------------
/client/Components/SideBarContext/DemoContext.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../../deps.ts';
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     interface IntrinsicElements {
 6 |       div: any;
 7 |       h4: any;
 8 |       h6: any;
 9 |       p: any;
10 |     }
11 |   }
12 | }
13 | 
14 | const DemoContext = (props: any) => {
15 |   return (
16 |     <div id='docsTOC'>
17 |       <div className='list-group'>
18 |         <h4
19 |           className={`list-group-item list-group-item-action 
20 |           `}
21 |         >
22 |           Demo Guide
23 |         </h4>
24 | 
25 |         <div className='list-group-item'>
26 |         <h6>Execute A Query</h6>
27 |           <div className='list-group'>
28 |             <p
29 |               className={`list-group-item list-group-item-action 
30 |               
31 |           `}
32 |             >
33 |               Utilize the input fields on the left to make a GraphQL query or mutation.
34 |             </p>
35 |           </div>
36 |         </div>
37 | 
38 |         <div className='list-group-item'>
39 |           <h6>Response</h6>
40 |           <div className='list-group'>
41 |             <p
42 |               className={`list-group-item list-group-item-action 
43 |           `}
44 |             >
45 |               Moments after the query is excecuted, the raw response from the
46 |               GraphQL API is displayed.
47 |             </p>
48 |           </div>
49 |         </div>
50 |         <div className='list-group-item'>
51 |           <h6>Cache</h6>
52 |           <div className='list-group'>
53 |             <p
54 |               className={`list-group-item list-group-item-action 
55 |           `}
56 |             >
57 |               Finally, we can see our destructured query and responses which are
58 |               currently stored in a Redis cache. If you query for a specific
59 |               property that is stored in the cache, the Obsidian algorithm will
60 |               find and return it. Eliminating the need to query the database again.
61 |             </p>
62 |           </div>
63 |         </div>
64 |       </div>
65 |     </div>
66 |   );
67 | };
68 | 
69 | export default DemoContext;
70 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Advanced/Polling.tsx:
--------------------------------------------------------------------------------
 1 | import { React, CodeBlock, dracula } from '../../../../deps.ts';
 2 | 
 3 | const Polling = (props: any) => {
 4 |   return (
 5 |     <div className="docContainer">
 6 |       <h1>Polling</h1>
 7 |       <p>
 8 |         Some applications require regular streams of GraphQL queries sent via
 9 |         HTTP requests. If you find yourself in this position,
10 |         <code className="obsidianInline">obsidian</code> can help. The
11 |         <code className="obsidianInline"> query</code> method accepts an
12 |         optional 'pollInterval' property in its options parameter, which
13 |         provides near-real-time synchronization with your server by causing a
14 |         query to execute periodically and will automatically update the cache
15 |         consistently. To enable polling for a query, pass a 'pollInterval'
16 |         configuration option to the{' '}
17 |         <code className="obsidianInline">query</code> method with a specified
18 |         interval in milliseconds:
19 |       </p>
20 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
21 |         {`function actorsPhoto() {
22 |   const interval = query(GET_ACTOR_PHOTO, {
23 |     pollInterval: 2000,
24 |   });
25 |   setInterval(interval); // react hook to add the interval in the state
26 |   return (
27 |     <div>
28 |       <h1>Actor Showcase</h1>
29 |       <p>Check out our favorite actor photo by clicking the button below</p>
30 |       <button
31 |         onClick={() => {
32 |           query(GET_ACTOR).then((resp) => setActor(resp.data.actor));
33 |         }}
34 |       >
35 |         Get Actor Photo
36 |       </button>
37 |       <p>Name: {actor.name}</p>
38 |       <img src={actor.displayImage} />
39 |     </div>
40 |   );
41 | }`}
42 |       </CodeBlock>
43 |       <br />
44 |       <p>
45 |         This query will be sent every 2 seconds, updating the cache via the
46 |         default normalized caching strategy if any changes are found. You can
47 |         also stop polling dynamically with the{' '}
48 |         <code className="obsidianInline">stopPollInterval</code> method on the
49 |         cache class using the interval returned by the invocation of the{' '}
50 |         <code className="obsidianInline">obsidian query</code>, here an example:
51 |       </p>
52 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
53 |         {`const { cache } = useObsidian();
54 | const { stopPollInterval } = cache;
55 | stopPollInterval(interval);`}
56 |       </CodeBlock>
57 |     </div>
58 |   );
59 | };
60 | 
61 | export default Polling;
62 | 


--------------------------------------------------------------------------------
/client/Components/Docs.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../deps.ts';
 2 | 
 3 | import Overview from './DocPages/Overview.tsx';
 4 | import Polling from './DocPages/Advanced/Polling.tsx';
 5 | 
 6 | import BasicsErrors from './DocPages/Basics/Errors.tsx';
 7 | import GettingStarted from './DocPages/Basics/GettingStarted.tsx';
 8 | 
 9 | import Mutations from './DocPages/Basics/Mutations.tsx';
10 | import Queries from './DocPages/Basics/Queries.tsx';
11 | import ServerSideRendering from './DocPages/Basics/ServerSideRendering.tsx';
12 | 
13 | import Client from './DocPages/Caching/Client.tsx';
14 | import CachingErrors from './DocPages/Caching/Errors.tsx';
15 | 
16 | import Server from './DocPages/Caching/Server.tsx';
17 | 
18 | import Strategies from './DocPages/Caching/Strategies.tsx';
19 | import Philosophy from './DocPages/Philosophy.tsx';
20 | import QuickStart from './DocPages/QuickStart.tsx';
21 | 
22 | import SideBar from './SideBar.tsx';
23 | 
24 | declare global {
25 |   namespace JSX {
26 |     interface IntrinsicElements {
27 |       [elemName: string]: any;
28 |     }
29 |   }
30 | }
31 | 
32 | const Docs = (props: any) => {
33 |   const [docsPage, setDocsPage] = (React as any).useState('QuickStart');
34 | 
35 |   let curDocsPage;
36 |   if (docsPage === 'QuickStart') curDocsPage = <QuickStart />;
37 |   if (docsPage === 'Overview') curDocsPage = <Overview />;
38 |   if (docsPage === 'Philosophy') curDocsPage = <Philosophy />;
39 | 
40 |   if (docsPage === 'Polling') curDocsPage = <Polling />;
41 | 
42 |   if (docsPage === 'BasicsErrors')
43 |     curDocsPage = <BasicsErrors setDocsPage={setDocsPage} />;
44 |   if (docsPage === 'GettingStarted')
45 |     curDocsPage = <GettingStarted setDocsPage={setDocsPage} />;
46 |   if (docsPage === 'Mutations')
47 |     curDocsPage = <Mutations setDocsPage={setDocsPage} />;
48 |   if (docsPage === 'Queries')
49 |     curDocsPage = <Queries setDocsPage={setDocsPage} />;
50 |   if (docsPage === 'ServerSideRendering') curDocsPage = <ServerSideRendering />;
51 | 
52 |   if (docsPage === 'Client') curDocsPage = <Client setDocsPage={setDocsPage} />;
53 |   if (docsPage === 'CachingErrors') curDocsPage = <CachingErrors />;
54 |   if (docsPage === 'Server') curDocsPage = <Server />;
55 |   if (docsPage === 'Strategies')
56 |     curDocsPage = <Strategies setDocsPage={setDocsPage} />;
57 | 
58 |   return (
59 |     <>
60 |       <div className="mainContainer pinkATags">
61 |         <div style={{ height: '100%' }}>{curDocsPage}</div>
62 |       </div>
63 |       <SideBar
64 |         page={props.page}
65 |         docsPage={docsPage}
66 |         setDocsPage={setDocsPage}
67 |       />
68 |     </>
69 |   );
70 | };
71 | 
72 | export default Docs;
73 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Basics/Errors.tsx:
--------------------------------------------------------------------------------
 1 | import { React, CodeBlock, dracula } from '../../../../deps.ts';
 2 | 
 3 | const BasicsErrors = (props: any) => {
 4 |   return (
 5 |     <div className="docContainer">
 6 |       <h1>Errors</h1>
 7 |       <p>
 8 |         This chapter will cover the most common errors related to{' '}
 9 |         <code className="obsidianInline">obsidian</code> implementation.
10 |       </p>
11 |       <h2>ObsidianRouter</h2>
12 |       <h3>Connection Refused</h3>
13 |       <p>
14 |         This error is likely to arise if you have not disabled the server-side
15 |         cache and/or do not have an active redis instance at port 6379. To learn
16 |         more about redis and server-side caching, check out the{' '}
17 |         <a href="#" onClick={() => props.setDocsPage('Server')}>
18 |           Caching
19 |         </a>{' '}
20 |         section.
21 |       </p>
22 |       <h2>ObsidianWrapper</h2>
23 |       <h3>Cache is returning undefined</h3>
24 |       <p>
25 |         Check to see if your query and/or mutation is being sent with an id
26 |         field, as not providing one prevents normalization of the response
27 |         object
28 |       </p>
29 |       <h3>Your app doesn't work after wrapping it with Obsidian</h3>
30 |       <p>
31 |         Check to make sure you've wrapped your app at the proper level. You
32 |         should be wrapping your app at the top-level component, but not in the
33 |         server, as this will require wrapping the app in the hydrate method as
34 |         well. For example, if your top level component is App, App should be
35 |         used in the <code className="obsidianInline">renderToString</code>{' '}
36 |         method and in the <code className="obsidianInline">hydrate</code>{' '}
37 |         methods, and ObsidianWrapper should be the first child of App. Check out
38 |         the chapter on server-side rendering to see an example.
39 |       </p>
40 |       <h4>Recap & Next Up</h4>
41 |       <p>
42 |         This section has walked through a simple implementation of{' '}
43 |         <code className="obsidianInline">obsidian</code> with ObsidianRouter and
44 |         ObsidianWrapper, and covered the most common use cases and errors. Next,
45 |         we're going to dive into caching and{' '}
46 |         <code className="obsidianInline">obsidian</code>'s design philosophy and
47 |         guiding development principles. Once we have a firm grasp on how{' '}
48 |         <code className="obsidianInline">obsidian</code> approaches GraphQL
49 |         caching, we'll examine the specifics of server-side and client-side
50 |         caching in <code className="obsidianInline">obsidian</code>.
51 |       </p>
52 |     </div>
53 |   );
54 | };
55 | 
56 | export default BasicsErrors;
57 | 


--------------------------------------------------------------------------------
/client/static/prism.css:
--------------------------------------------------------------------------------
  1 | /* PrismJS 1.21.0
  2 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
  3 | /**
  4 |  * prism.js default theme for JavaScript, CSS and HTML
  5 |  * Based on dabblet (http://dabblet.com)
  6 |  * @author Lea Verou
  7 |  */
  8 | 
  9 |  /*
 10 | 
 11 | code[class*="language-"],
 12 | pre[class*="language-"] {
 13 | 	color: black;
 14 | 	background: none;
 15 | 	text-shadow: 0 1px white;
 16 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 17 | 	font-size: 1em;
 18 | 	text-align: left;
 19 | 	white-space: pre;
 20 | 	word-spacing: normal;
 21 | 	word-break: normal;
 22 | 	word-wrap: normal;
 23 | 	line-height: 1.5;
 24 | 
 25 | 	-moz-tab-size: 4;
 26 | 	-o-tab-size: 4;
 27 | 	tab-size: 4;
 28 | 
 29 | 	-webkit-hyphens: none;
 30 | 	-moz-hyphens: none;
 31 | 	-ms-hyphens: none;
 32 | 	hyphens: none;
 33 | }
 34 | 
 35 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 36 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 37 | 	text-shadow: none;
 38 | 	background: #b3d4fc;
 39 | }
 40 | 
 41 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 42 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 43 | 	text-shadow: none;
 44 | 	background: #b3d4fc;
 45 | }
 46 | 
 47 | @media print {
 48 | 	code[class*="language-"],
 49 | 	pre[class*="language-"] {
 50 | 		text-shadow: none;
 51 | 	}
 52 | }
 53 | 
 54 | /* Code blocks */
 55 | pre[class*="language-"] {
 56 | 	padding: 1em;
 57 | 	margin: .5em 0;
 58 | 	overflow: auto;
 59 | }
 60 | 
 61 | :not(pre) > code[class*="language-"],
 62 | pre[class*="language-"] {
 63 | 	background: #f5f2f0;
 64 | }
 65 | 
 66 | /* Inline code */
 67 | :not(pre) > code[class*="language-"] {
 68 | 	padding: .1em;
 69 | 	border-radius: .3em;
 70 | 	white-space: normal;
 71 | }
 72 | 
 73 | .token.comment,
 74 | .token.prolog,
 75 | .token.doctype,
 76 | .token.cdata {
 77 | 	color: slategray;
 78 | }
 79 | 
 80 | .token.punctuation {
 81 | 	color: #999;
 82 | }
 83 | 
 84 | .token.namespace {
 85 | 	opacity: .7;
 86 | }
 87 | 
 88 | .token.property,
 89 | .token.tag,
 90 | .token.boolean,
 91 | .token.number,
 92 | .token.constant,
 93 | .token.symbol,
 94 | .token.deleted {
 95 | 	color: #905;
 96 | }
 97 | 
 98 | .token.selector,
 99 | .token.attr-name,
100 | .token.string,
101 | .token.char,
102 | .token.builtin,
103 | .token.inserted {
104 | 	color: #690;
105 | }
106 | 
107 | .token.operator,
108 | .token.entity,
109 | .token.url,
110 | .language-css .token.string,
111 | .style .token.string {
112 | 	color: #9a6e3a;
113 | 	/* This background color was intended by the author of this theme. */
114 | 	background: hsla(0, 0%, 100%, .5);
115 | }
116 | 
117 | .token.atrule,
118 | .token.attr-value,
119 | .token.keyword {
120 | 	color: #07a;
121 | }
122 | 
123 | .token.function,
124 | .token.class-name {
125 | 	color: #DD4A68;
126 | }
127 | 
128 | .token.regex,
129 | .token.important,
130 | .token.variable {
131 | 	color: #e90;
132 | }
133 | 
134 | .token.important,
135 | .token.bold {
136 | 	font-weight: bold;
137 | }
138 | .token.italic {
139 | 	font-style: italic;
140 | }
141 | 
142 | .token.entity {
143 | 	cursor: help;
144 | }
145 | 
146 | */
147 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Philosophy.tsx:
--------------------------------------------------------------------------------
 1 | import { React, CodeBlock, dracula } from '../../../deps.ts';
 2 | 
 3 | const Philosophy = (props: any) => {
 4 |   return (
 5 |     <div className="docContainer">
 6 |       <h1>Philosophy</h1>
 7 |       <p>
 8 |         In this chapter we seek to lay bare our approach to GraphQL caching,
 9 |         providing context for our caching implementations in each part of{' '}
10 |         <code className="obsidianInline">obsidian</code>.
11 |       </p>
12 |       <h2>Core Values</h2>
13 |       <h3>Fast</h3>
14 |       <p className="mission">
15 |         Caching with obsidian should be nearly imperceptible - a client or
16 |         server module should feel no slower with a caching layer
17 |       </p>
18 |       <p>
19 |         While building <code className="obsidianInline">obsidian</code>'s
20 |         caching strategies, speed reigned supreme. We believe that a caching
21 |         layer for your GraphQL service has to be fast and efficient. Your API
22 |         should not take a large performance hit after incorporating a cache.
23 |       </p>
24 |       <h3>Flexible</h3>
25 |       <p className="mission">
26 |         Caching with obsidian should be developer friendly without sacrificing
27 |         performance{' '}
28 |       </p>
29 |       <p>
30 |         <code className="obsidianInline">obsidian</code>'s flexible API is
31 |         designed to be performant, no matter how big or small your project is.
32 |         Our caching solutions do not require strict conventions or a schema on
33 |         the client side to be able to offer efficiency and expandability for the
34 |         developer.
35 |       </p>
36 |       <h3>Consistent</h3>
37 |       <p className="mission">
38 |         Caching with obsidian should prize consistency - discerning truth should
39 |         be automatic and transparent
40 |       </p>
41 |       <p>
42 |         Many GraphQL caching solutions give up on consistency and mutations,
43 |         choosing to give the tools to the developer and letting go of the
44 |         reigns. With <code className="obsidianInline">obsidian</code>,
45 |         consistent truth is a priority and a responsibility, rather than an
46 |         afterthought.
47 |       </p>
48 |       <h2>Integration</h2>
49 |       <p>
50 |         <code className="obsidianInline">obsidian</code> was built for Deno, and
51 |         as such it has been designed to integrate into React apps the way they
52 |         are built in Deno, on both the frontend and backend. While{' '}
53 |         <code className="obsidianInline">obsidian</code> is still in it's early
54 |         stages, we are actively seeking to define what that means. For now, Oak
55 |         has proven to be Deno's prevailing framework, and React apps are
56 |         typically constructed with server-side rendering.
57 |       </p>
58 |       <p>
59 |         We choose to view these restrictions as inspiration for innovation, and
60 |         we have applied that philosophy to our caching implementations. By
61 |         adhering to pre-defined scaffolding, opportunities to improve upon
62 |         existing methodologies readily present themselves. Whenever possible, we
63 |         chose to build in favor of the above core values, and we hope they can
64 |         guide your implementation of{' '}
65 |         <code className="obsidianInline">obsidian</code>.
66 |       </p>
67 |       <h4>Recap & Next Up</h4>
68 |       <p>
69 |         Now that we have a grasp on the guiding principles behind the
70 |         development of <code className="obsidianInline">obsidian</code> and it's
71 |         integration into your application, we'll move onto a deeper dive into
72 |         the caching capabilities of{' '}
73 |         <code className="obsidianInline">obsidian</code>.
74 |       </p>
75 |     </div>
76 |   );
77 | };
78 | 
79 | export default Philosophy;
80 | 


--------------------------------------------------------------------------------
/client/static/github-icon.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg width="80%" height="80%" viewBox="0 0 256 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
3 |     <g>
4 |         <path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#f7f7f7"></path>
5 |     </g>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/client/Components/SideBar.tsx:
--------------------------------------------------------------------------------
 1 | import { React } from '../../deps.ts';
 2 | import DocsContext from './SideBarContext/DocsContext.tsx';
 3 | import MainContext from './SideBarContext/MainContext.tsx';
 4 | import AboutContext from './SideBarContext/AboutContext.jsx';
 5 | import DemoContext from './SideBarContext/DemoContext.tsx';
 6 | 
 7 | declare global {
 8 |   namespace JSX {
 9 |     interface IntrinsicElements {
10 |       div: any;
11 |       img: any;
12 |       h4: any;
13 |       a: any;
14 |       hr: any;
15 |       button: any;
16 |       footer: any;
17 |     }
18 |   }
19 | }
20 | 
21 | const NavBar = (props: any) => {
22 |   const { page, docsPage, setDocsPage } = props;
23 | 
24 |   let curContext;
25 | 
26 |   if (page === 'home') curContext = <MainContext />;
27 |   if (page === 'about') curContext = <AboutContext/> ;
28 |   if (page === 'demo') curContext = <DemoContext />;
29 |   if (page === 'docs')
30 |     curContext = <DocsContext docsPage={docsPage} setDocsPage={setDocsPage} />;
31 |   
32 |   const [open, setOpen] = (React as any).useState(null);
33 | 
34 |   const createSidebarStyle = () => {
35 |     let styleObj = { height: '94%', position: 'relative', top: '0%' };
36 |     if ((window as any).innerWidth < 600) {
37 |       styleObj = open ? { height: '70%', position: 'absolute', top: '30%' } : { height: '20%', position: 'absolute', top: '75%' };
38 |     }
39 |     const homeAbout = { backgroundColor: 'rgba(0,0,0,0)' };
40 | 
41 |     return page === 'home'|| page ==='about' ? Object.assign(styleObj, homeAbout) : styleObj;
42 |   };
43 | 
44 |   const sidebarStyle = createSidebarStyle();
45 | 
46 |   return (
47 |     <div
48 |       className='sidebar'
49 |       // style={page === 'home'|| page==='about' ? { backgroundColor: 'rgba(0,0,0,0)' } : {}}
50 |       style={sidebarStyle}
51 |     >
52 |       <div className='codeLinks'>
53 |         <a href='https://github.com/open-source-labs/obsidian'>
54 |           <div className='codeLinkDiv'>
55 |             <img
56 |               id='githubLogo'
57 |               src='../static/github-icon.svg'
58 |               alt='GitHub Logo'
59 |             />
60 |             <h4>GitHub</h4>
61 |           </div>
62 |         </a>
63 |         <a href='https://deno.land/x/obsidian'>
64 |           <div className='codeLinkDiv'>
65 |             <img id='denoImg' src='../static/Deno-Logo.svg' alt='Deno Logo' />
66 |             <h4>deno.land</h4>
67 |           </div>
68 |         </a>
69 |       </div>
70 |       <button id='mobile-collapse' style={
71 |           page === 'home'|| page ==='about' || page === 'demo'
72 |             ? { backgroundColor: 'rgba(0,0,0,0)', overflow: 'visible', opacity: 0, display: 'none' }
73 |             : {}
74 |         } onClick={() => setOpen(!open)}>
75 |         { open ? 
76 |           <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" className="bi bi-arrow-down-circle" viewBox="0 0 16 16">
77 |             <path fillRule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/>
78 |           </svg>
79 |         : <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" className="bi bi-arrow-up-circle" viewBox="0 0 16 16">
80 |             <path fillRule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
81 |           </svg>}
82 |       </button>
83 |       <div
84 |         className='sideContent'
85 |         style={
86 |           page === 'home'|| page==='about'
87 |             ? { backgroundColor: 'rgba(0,0,0,0)', overflow: 'visible' }
88 |             : {}
89 |         }
90 |       >
91 |         {curContext}
92 |       </div>
93 |     </div>
94 |   );
95 | };
96 | 
97 | export default NavBar;
98 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Caching/Server.tsx:
--------------------------------------------------------------------------------
  1 | import { React, CodeBlock, dracula } from '../../../../deps.ts';
  2 | 
  3 | const Server = (props: any) => {
  4 | 	return (
  5 | 		<div className="docContainer">
  6 | 			<h1>Server</h1>
  7 | 			<p>
  8 | 				In this chapter, we'll dig into caching in ObsidianRouter, as well as
  9 | 				redis implementation.
 10 | 			</p>
 11 | 			<h2>Server-Side Caching with Obsidian</h2>
 12 | 			<p>
 13 | 				Obsidian utilizes a local redis server to store our server-side cache,
 14 | 				keeping our cache fast and responsive while maintaining ACID compliance.
 15 | 				To learn how to setup redis on your machine, check out the{' '}
 16 | 				<a href="https://redis.io/topics/quickstart">quick start</a>{' '}
 17 | 				documentation.
 18 | 			</p>
 19 | 			<p>
 20 | 				By default, your redis server should be running at port 6379. If you
 21 | 				need to change your port, you may do so inside the ObsidianRouter
 22 | 				options.
 23 | 			</p>
 24 | 			<h3>ObsidianRouter</h3>
 25 | 			<p>
 26 | 				ObsidianRouter setup requires an options object, which we demonstrated
 27 | 				in the Getting Started chapter. The options object accepts the following
 28 | 				properties, only three of which are required:
 29 | 			</p>
 30 | 			<ul>
 31 | 				<li>
 32 | 					<strong>Router</strong> - (required) You must provide the Oak Router
 33 | 					class
 34 | 				</li>
 35 | 				<li>
 36 | 					<strong>path</strong> - (optional, default:{' '}
 37 | 					<code className="obsidianInline">'/graphql'</code>) Your GraphQL
 38 | 					service will be available at this endpoint
 39 | 				</li>
 40 | 				<li>
 41 | 					<strong>typeDefs</strong> - (required) Your GraphQL schema goes here
 42 | 				</li>
 43 | 				<li>
 44 | 					<strong>resolvers</strong> - (required) Your resolvers go here
 45 | 				</li>
 46 | 				<li>
 47 | 					<strong>context</strong> - (optional) A function to alter your Oak
 48 | 					server's context object upon entering the router
 49 | 				</li>
 50 | 				<li>
 51 | 					<strong>usePlayground</strong> - (optional, default:{' '}
 52 | 					<code className="obsidianInline">true</code>) Set to{' '}
 53 | 					<code className="obsidianInline">false</code> to disable the GraphQL
 54 | 					Playground. Recommended when deploying your application in production
 55 | 				</li>
 56 | 				<li>
 57 | 					<strong>useCache</strong> - (optional, default:{' '}
 58 | 					<code className="obsidianInline">true</code>) Set to{' '}
 59 | 					<code className="obsidianInline">false</code> to disable server-side
 60 | 					caching. This negates the caching layer, and institutes a cacheless
 61 | 					caching strategy in ObsidianRouter
 62 | 				</li>
 63 | 				<li>
 64 | 					<strong>redisPort</strong> - (optional, default:{' '}
 65 | 					<code className="obsidianInline">6379</code>) If your redis server is
 66 | 					running at a different port, specify it here
 67 | 				</li>
 68 | 				<li>
 69 | 					<strong>maxQueryDepth</strong> - (optional, default:{' '}
 70 | 					<code className="obsidianInline">0</code>) If set to integer of 1 or
 71 | 					more, returns error in response to request object with nesting depth
 72 | 					greater than the maxQueryDepth and does not route request to GraphQL
 73 | 					server. Feature is disabled by default.
 74 | 				</li>
 75 | 			</ul>
 76 | 			<p>An example of ObsidianRouter with optional parameters:</p>
 77 | 			<CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 78 | 				{`const GraphQLRouter = await ObsidianRouter<ObsRouter>({
 79 |   Router,
 80 |   path = '/graphql',
 81 |   typeDefs,
 82 |   resolvers,
 83 |   context,
 84 |   usePlayground = false,
 85 |   useCache = true,
 86 |   redisPort = 6379,
 87 |   maxQueryDepth = 3,
 88 | });`}
 89 | 			</CodeBlock>
 90 | 			<br />
 91 | 			<h4>Recap</h4>
 92 | 			<p>
 93 | 				This section has walked through caching in{' '}
 94 | 				<code className="obsidianInline">obsidian</code>, including our approach
 95 | 				to GraphQL caching and the various caching strategies{' '}
 96 | 				<code className="obsidianInline">obsidian</code> offers.
 97 | 			</p>
 98 | 		</div>
 99 | 	);
100 | };
101 | 
102 | export default Server;
103 | 


--------------------------------------------------------------------------------
/server.tsx:
--------------------------------------------------------------------------------
  1 | import { Application, Router } from './serverDeps.ts';
  2 | import { React, ReactDomServer } from './deps.ts';
  3 | import App from './client/app.tsx';
  4 | import { staticFileMiddleware } from './staticFileMiddleware.ts';
  5 | 
  6 | const PORT = 3000;
  7 | 
  8 | // Create a new server
  9 | const app = new Application();
 10 | 
 11 | // Track response time in headers of responses
 12 | app.use(async (ctx, next) => {
 13 |   await next();
 14 |   const rt = ctx.response.headers.get('X-Response-Time');
 15 |   console.log(`${ctx.request.method} ${ctx.request.url} - ${rt}`);
 16 | });
 17 | 
 18 | app.use(async (ctx, next) => {
 19 |   const start = Date.now();
 20 |   await next();
 21 |   const ms = Date.now() - start;
 22 |   ctx.response.headers.set('X-Response-Time', `${ms}ms`);
 23 | });
 24 | const initialState = {
 25 |   obsidianSchema: {
 26 |     returnTypes: {
 27 |       Country: { kind: 'NamedType', type: 'Country' },
 28 |     },
 29 |     argTypes: {
 30 |       Country: { _id: 'ID' },
 31 |     },
 32 |     obsidianTypeSchema: {
 33 |       Country: {
 34 |         _id: { type: 'ID', scalar: true },
 35 |         name: { type: 'String', scalar: true },
 36 |         capital: { type: 'String', scalar: true },
 37 |         population: { type: 'Int', scalar: true },
 38 |         flag: { type: 'Flag', scalar: false },
 39 |         borders: { type: 'Country', scalar: false },
 40 |       },
 41 |       Flag: {
 42 |         _id: { type: 'ID', scalar: true },
 43 |         emoji: { type: 'String', scalar: true },
 44 |       },
 45 |     },
 46 |   },
 47 | };
 48 | 
 49 | // Router for base path
 50 | const router = new Router();
 51 | 
 52 | router.get('/', handlePage);
 53 | 
 54 | // Bundle the client-side code
 55 | // const [_, clientJS] = await Deno.bundle('./client/client.tsx');
 56 | 
 57 | const {files, diagnostics } = await Deno.emit('./client/client.tsx', {bundle: 'module'});
 58 | 
 59 | // Router for bundle
 60 | const serverrouter = new Router();
 61 | serverrouter.get('/static/client.js', (context) => {
 62 |   context.response.headers.set('Content-Type', 'text/html');
 63 |   // context.response.body = clientJS;
 64 |   context.response.body = files['deno:///bundle.js'];
 65 | });
 66 | 
 67 | // Implement the routes on the server
 68 | app.use(staticFileMiddleware);
 69 | app.use(router.routes());
 70 | app.use(serverrouter.routes());
 71 | app.use(router.allowedMethods());
 72 | 
 73 | app.addEventListener('listen', () => {
 74 |   console.log(`Listening at http://localhost:${PORT}`);
 75 | });
 76 | 
 77 | if (import.meta.main) {
 78 |   await app.listen({ port: PORT });
 79 | }
 80 | 
 81 | export { app };
 82 | 
 83 | 
 84 | 
 85 | 
 86 | function handlePage(ctx: any) {
 87 |   try {
 88 |     const body = (ReactDomServer as any).renderToString(<App />);
 89 |     ctx.response.body = `<!DOCTYPE html>
 90 |   <html lang="en">
 91 |   <head>
 92 |     <meta charset="UTF-8">
 93 |     <link
 94 |     rel="stylesheet"
 95 |     href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
 96 |     integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
 97 |     crossorigin="anonymous"
 98 |   />
 99 |     <link rel="icon" type="image/png" href="/static/obsidianLogo3.png"/>
100 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
101 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
102 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
103 |     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
104 |     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
105 |     <link href="/static/prism.css" rel="stylesheet" />
106 |     <link
107 |     rel="stylesheet"
108 |     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
109 |     />
110 |     <link rel="stylesheet" href="/static/style.css">
111 |   
112 |     <title>Obsidian</title>
113 |     <script>
114 |     window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
115 |   </script>
116 |   </head>
117 |   <body >
118 |     <div id="root">${body}</div>
119 | 
120 |     <script  src="/static/client.js" defer></script>
121 |   </body>
122 |   </html>`;
123 |   } catch (error) {
124 |     console.error(error);
125 |   }
126 | }
127 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Caching/Client.tsx:
--------------------------------------------------------------------------------
  1 | import { React, CodeBlock, dracula } from '../../../../deps.ts';
  2 | 
  3 | const Client = (props: any) => {
  4 |   return (
  5 |     <div className="docContainer">
  6 |       <h1>Client</h1>
  7 |       <p>
  8 |         In this chapter, we'll cover how to specify your caching strategy in
  9 |         ObsidianWrapper.
 10 |       </p>
 11 |       <h2>ObsidianWrapper</h2>
 12 |       <p>
 13 |         While working with ObsidianWrapper, you have the opportunity to
 14 |         configure caching strategies for specific queries and mutations.
 15 |       </p>
 16 |       <h3>query</h3>
 17 |       <p>
 18 |         Obsidian queries can be configured in five ways through an options
 19 |         parameter that takes in a configuration object:
 20 |       </p>
 21 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 22 |         {`const {
 23 |       endpoint = '/graphql',
 24 |       cacheRead = true,
 25 |       cacheWrite = true,
 26 |       pollInterval = null,
 27 |       wholeQuery = false,
 28 |     } = options;
 29 | query(\`query { getMovie { id title releaseYear } }\`, options)
 30 |   .then(resp => console.log(resp))`}
 31 |       </CodeBlock>
 32 |       <ul>
 33 |         <li>
 34 |           <strong>endpoint</strong> - (default:{' '}
 35 |           <code className="obsidianInline">'/graphql'</code>) The endpoint where{' '}
 36 |           <code className="obsidianInline">obsidian</code> should send all
 37 |           requests by default
 38 |         </li>
 39 |         <li>
 40 |           <strong>cacheRead</strong> - (default:{' '}
 41 |           <code className="obsidianInline">true</code>) When this option is
 42 |           enabled, Obsidian will check the cache to see if the relevant data is
 43 |           available before querying the server
 44 |         </li>
 45 |         <li>
 46 |           <strong>cacheWrite</strong> - (default:{' '}
 47 |           <code className="obsidianInline">true</code>) When this option is
 48 |           enabled, Obsidian will write responses to the cache
 49 |         </li>
 50 |         <li>
 51 |           <strong>pollInterval</strong> - (default:{' '}
 52 |           <code className="obsidianInline">null</code>) Turns query polling on
 53 |           and specifies how often Obsidian should send a GraphQL query to the
 54 |           server
 55 |         </li>
 56 |         <li>
 57 |           <strong>wholeQuery</strong> - (default:{' '}
 58 |           <code className="obsidianInline">false</code>) Enables whole query
 59 |           caching
 60 |         </li>
 61 |       </ul>
 62 |       <br />
 63 |       <h3>mutate</h3>
 64 |       <p>
 65 |         Obsidian mutations can be configured in four ways through an options
 66 |         parameter that takes in a configuration object:
 67 |       </p>
 68 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 69 |         {`const {
 70 |       endpoint = '/graphql',
 71 |       cache = true,
 72 |       toDelete = true,
 73 |       update = null,
 74 |     } = options;
 75 | mutate(\`mutation addFavoriteMovie{favoriteMovie(id:4){ __typename id isFavorite}}\`, options)
 76 |   .then(resp => console.log(resp))`}
 77 |       </CodeBlock>
 78 |       <ul>
 79 |         <li>
 80 |           <strong>endpoint</strong> - (default:{' '}
 81 |           <code className="obsidianInline">'/graphql'</code>) The endpoint where{' '}
 82 |           <code className="obsidianInline">obsidian</code> should send this
 83 |           request
 84 |         </li>
 85 |         <li>
 86 |           <strong>cache</strong> - (default:{' '}
 87 |           <code className="obsidianInline">true</code>) When this option is
 88 |           enabled, <code className="obsidianInline">obsidian</code> will
 89 |           automatically update the cache after a mutation.
 90 |         </li>
 91 |         <li>
 92 |           <strong>toDelete</strong> - (default:{' '}
 93 |           <code className="obsidianInline">false</code>) When this option is set
 94 |           to true, it will indicate to
 95 |           <code className="obsidianInline">obsidian</code> that a delete
 96 |           mutation is being sent and to update the value of that hash in the
 97 |           cache with 'DELETED'.
 98 |         </li>
 99 |         <li>
100 |           <strong>update</strong> - (default:{' '}
101 |           <code className="obsidianInline">null</code>) Optional update function
102 |           to customize cache updating behavior.
103 |         </li>
104 |       </ul>
105 |       <br />
106 |       <h4>Recap & Next Up</h4>
107 |       <p>
108 |         In this chapter we learned how to control our caching strategy in the{' '}
109 |         <code className="obsidianInline">obsidian</code> client,
110 |         ObsidianWrapper. Next, we'll dive into caching options in
111 |         ObsidianRouter.
112 |       </p>
113 |     </div>
114 |   );
115 | };
116 | 
117 | export default Client;
118 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Overview.tsx:
--------------------------------------------------------------------------------
 1 | import { React, CodeBlock, dracula } from '../../../deps.ts';
 2 | 
 3 | const Overview = (props: any) => {
 4 |   return (
 5 |     <div className="docContainer">
 6 |       <h1>Overview</h1>
 7 |       <p>
 8 |         <code className="obsidianInline">obsidian</code> is a{' '}
 9 |         <a href="https://deno.land/">Deno</a>{' '}
10 |         <a href="https://graphql.org/">GraphQL</a> server module and a GraphQL
11 |         client, built to optimize application performance via caching
12 |         strategies. <code className="obsidianInline">obsidian</code>'s server
13 |         module may be used independently to quickly build out a GraphQL API
14 |         while enabling the full suite of caching strategies that{' '}
15 |         <code className="obsidianInline">obsidian</code> offers.
16 |       </p>
17 |       <p>
18 |         <code className="obsidianInline">obsidian</code> simplifies GraphQL
19 |         implementations in Deno by offering a solution integrated across the
20 |         stack, ensuring your API stays lean and performant even as it's scope
21 |         grows. By utilizing <code className="obsidianInline">obsidian</code> and
22 |         the power of server-side rendering, we can maintain rapid page-load
23 |         times.
24 |       </p>
25 |       <h2>The Module</h2>
26 |       <p>
27 |         <code className="obsidianInline">obsidian</code> is a Deno module,
28 |         published at <a href="https://deno.land/x/obsidian@2.0.1">deno.land</a>.
29 |         There are two distinct parts to{' '}
30 |         <code className="obsidianInline">obsidian</code>: ObsidianRouter, a
31 |         caching GraphQL router built upon Deno's{' '}
32 |         <a href="https://deno.land/x/oak@v6.2.0">Oak</a> server framework, and
33 |         ObsidianWrapper, a <a href="https://reactjs.org/">React</a> component
34 |         that functions as a GraphQL client for your application, providing
35 |         global access to fetching and caching capabilities.
36 |       </p>
37 |       <p>
38 |         It is important to note that ObsidianRouter can be implemented as a
39 |         standalone GraphQL router for your server, and third-party client
40 |         implementations may be used in your client-side code. ObsidianWrapper
41 |         can also be used independently of ObsidianRouter if normalized caching
42 |         capabilities are not needed or desired. However, ObsidianWrapper's
43 |         normalized caching strategy is only available when used in conjunction
44 |         with ObsidianRouter- this choice was made to preserve the destructuring
45 |         and normalizing algorithm that is at the heart of{' '}
46 |         <code className="obsidianInline">obsidian</code>'s caching strategy.
47 |       </p>
48 |       <p>
49 |         This two-pronged approach enables{' '}
50 |         <code className="obsidianInline">obsidian</code> to guide your GraphQL
51 |         implementation every step of the way, and brings clarity and speed to
52 |         every part of your app.
53 |       </p>
54 |       <p className="docAside">
55 |         <i>NOTE</i> - To keep our server-side cache efficient and ACID
56 |         compliant, <code className="obsidianInline">obsidian</code> uses redis
57 |         to store cached data. If you are not utilizing the caching features of
58 |         ObsidianRouter, you do not need to have a running redis server.
59 |       </p>
60 |       <h2>The Documentation</h2>
61 |       <p>We've split our documentation into four distinct sections.</p>
62 |       <ul>
63 |         <li>
64 |           <strong>Basics</strong> guides us through a simple implementation of
65 |           full stack <code className="obsidianInline">obsidian</code>, detailing
66 |           the setup of ObsidianRouter, ObsidianWrapper, usage patterns in React,
67 |           and how to harness server-side rendering to improve your client
68 |           caching strategy.
69 |         </li>
70 |         <li>
71 |           <strong>Philosophy</strong> provides a high-level overview of caching
72 |           in <code className="obsidianInline">obsidian</code>, revealing our
73 |           vision of <code className="obsidianInline">obsidian</code> integration
74 |           and guiding principles for development.
75 |         </li>
76 |         <li>
77 |           <strong>Caching</strong> covers the different caching strategies{' '}
78 |           <code className="obsidianInline">obsidian</code> offers and draws upon
79 |           our Philosophy to illustrate their implementations in ObsidianRouter
80 |           and ObsidianWrapper.
81 |         </li>
82 |         <li>
83 |           <strong>Advanced</strong> contains guides for more specialized options
84 |           and use-cases that we won't need while first exploring{' '}
85 |           <code className="obsidianInline">obsidian</code>.
86 |         </li>
87 |       </ul>
88 |       <p>
89 |         We hope you enjoy working with{' '}
90 |         <code className="obsidianInline">obsidian</code>!
91 |       </p>
92 |     </div>
93 |   );
94 | };
95 | 
96 | export default Overview;
97 | 


--------------------------------------------------------------------------------
/client/Components/SideBarContext/DocsContext.tsx:
--------------------------------------------------------------------------------
  1 | import { React } from '../../../deps.ts';
  2 | 
  3 | const DocsContext = (props: any) => {
  4 |   const { setDocsPage } = props;
  5 | 
  6 |   return (
  7 |     <div id="docsTOC">
  8 |       <div className="list-group pink-a-tags">
  9 |         <button
 10 |           className={`list-group-item list-group-item-action ${
 11 |             props.docsPage === 'QuickStart' ? 'active' : ''
 12 |           }`}
 13 |           onClick={() => {
 14 |             setDocsPage('QuickStart');
 15 |           }}
 16 |         >
 17 |           Quick Start
 18 |         </button>
 19 |         <button
 20 |           className={`list-group-item list-group-item-action ${
 21 |             props.docsPage === 'Overview' ? 'active' : ''
 22 |           }`}
 23 |           onClick={() => {
 24 |             setDocsPage('Overview');
 25 |           }}
 26 |         >
 27 |           Overview
 28 |         </button>
 29 |         <div className="list-group-item">
 30 |           <h6>Basics</h6>
 31 |           <div className="list-group">
 32 |             <button
 33 |               className={`list-group-item list-group-item-action ${
 34 |                 props.docsPage === 'GettingStarted' ? 'active' : ''
 35 |               }`}
 36 |               onClick={() => {
 37 |                 setDocsPage('GettingStarted');
 38 |               }}
 39 |             >
 40 |               Getting Started
 41 |             </button>
 42 |             <button
 43 |               className={`list-group-item list-group-item-action ${
 44 |                 props.docsPage === 'ServerSideRendering' ? 'active' : ''
 45 |               }`}
 46 |               onClick={() => {
 47 |                 setDocsPage('ServerSideRendering');
 48 |               }}
 49 |             >
 50 |               Server-Side Rendering
 51 |             </button>
 52 |             <button
 53 |               className={`list-group-item list-group-item-action ${
 54 |                 props.docsPage === 'Queries' ? 'active' : ''
 55 |               }`}
 56 |               onClick={() => {
 57 |                 setDocsPage('Queries');
 58 |               }}
 59 |             >
 60 |               Queries
 61 |             </button>
 62 |             <button
 63 |               className={`list-group-item list-group-item-action ${
 64 |                 props.docsPage === 'Mutations' ? 'active' : ''
 65 |               }`}
 66 |               onClick={() => {
 67 |                 setDocsPage('Mutations');
 68 |               }}
 69 |             >
 70 |               Mutations
 71 |             </button>
 72 |             <button
 73 |               className={`list-group-item list-group-item-action ${
 74 |                 props.docsPage === 'BasicsErrors' ? 'active' : ''
 75 |               }`}
 76 |               onClick={() => {
 77 |                 setDocsPage('BasicsErrors');
 78 |               }}
 79 |             >
 80 |               Errors
 81 |             </button>
 82 |           </div>
 83 |         </div>
 84 |         <button
 85 |           className={`list-group-item list-group-item-action ${
 86 |             props.docsPage === 'Philosophy' ? 'active' : ''
 87 |           }`}
 88 |           onClick={() => {
 89 |             setDocsPage('Philosophy');
 90 |           }}
 91 |         >
 92 |           Philosophy
 93 |         </button>
 94 |         <div className="list-group-item">
 95 |           <h6>Caching</h6>
 96 |           <div className="list-group">
 97 |             <button
 98 |               className={`list-group-item list-group-item-action ${
 99 |                 props.docsPage === 'Strategies' ? 'active' : ''
100 |               }`}
101 |               onClick={() => {
102 |                 setDocsPage('Strategies');
103 |               }}
104 |             >
105 |               Strategies
106 |             </button>
107 |             <button
108 |               className={`list-group-item list-group-item-action ${
109 |                 props.docsPage === 'Client' ? 'active' : ''
110 |               }`}
111 |               onClick={() => {
112 |                 setDocsPage('Client');
113 |               }}
114 |             >
115 |               Client
116 |             </button>
117 |             <button
118 |               className={`list-group-item list-group-item-action ${
119 |                 props.docsPage === 'Server' ? 'active' : ''
120 |               }`}
121 |               onClick={() => {
122 |                 setDocsPage('Server');
123 |               }}
124 |             >
125 |               Server
126 |             </button>
127 |             {/*<button
128 |               className={`list-group-item list-group-item-action disabled ${props.docsPage === 'CachingErrors' ? "active" : ""}`}
129 |               onClick={() => {
130 |                 setDocsPage('CachingErrors');
131 |               }}
132 |             >Errors</button>*/}
133 |           </div>
134 |         </div>
135 |         <div className="list-group-item">
136 |           <h6>Advanced</h6>
137 |           <div className="list-group">
138 |             <button
139 |               className={`list-group-item list-group-item-action ${
140 |                 props.docsPage === 'Polling' ? 'active' : ''
141 |               }`}
142 |               onClick={() => {
143 |                 setDocsPage('Polling');
144 |               }}
145 |             >
146 |               Polling
147 |             </button>
148 |           </div>
149 |         </div>
150 |       </div>
151 |     </div>
152 |   );
153 | };
154 | 
155 | export default DocsContext;
156 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/QuickStart.tsx:
--------------------------------------------------------------------------------
  1 | import { React, CodeBlock, dracula } from '../../../deps.ts';
  2 | 
  3 | const QuickStart = (props: any) => {
  4 |   return (
  5 |     <div className="docContainer">
  6 |       <h1>Quick Start</h1>
  7 |       <p>
  8 |         <code className="obsidianInline">obsidian</code> is Deno's first native
  9 |         GraphQL caching client and server module. Boasting lightning-fast
 10 |         caching and fetching capabilities alongside headlining normalization and
 11 |         destructuring strategies,{' '}
 12 |         <code className="obsidianInline">obsidian</code> is equipped to support
 13 |         scalable, highly performant applications.
 14 |       </p>
 15 |       <p>
 16 |         Optimized for use in server-side rendered React apps built with Deno,
 17 |         full stack integration of{' '}
 18 |         <code className="obsidianInline">obsidian</code> enables many of its
 19 |         most powerful features, including optimized caching exchanges between
 20 |         client and server and extremely lightweight client-side caching.
 21 |       </p>
 22 |       <h2>Installation</h2>
 23 |       <p>In the server:</p>
 24 |       <CodeBlock language="typescript" showLineNumbers={true} style={dracula}>
 25 |         {
 26 |           "import { ObsidianRouter } from 'https://deno.land/x/obsidian/mod.ts';"
 27 |         }
 28 |       </CodeBlock>
 29 |       <br />
 30 |       <p>In the app:</p>
 31 |       <CodeBlock language="typescript" showLineNumbers={true} style={dracula}>
 32 |         {
 33 |           "import { ObsidianWrapper } from 'https://deno.land/x/obsidian/clientMod.ts';"
 34 |         }
 35 |       </CodeBlock>
 36 |       <br />
 37 |       <h2>Creating the Router</h2>
 38 |       <CodeBlock language="typescript" showLineNumbers={true} style={dracula}>
 39 |         {`import { Application, Router } from 'https://deno.land/x/oak@v6.0.1/mod.ts';
 40 | import { ObsidianRouter, gql } from 'https://deno.land/x/obsidian/mod.ts';
 41 | 
 42 | const PORT = 8000;
 43 | 
 44 | const app = new Application();
 45 | 
 46 | const types = (gql as any)\`
 47 |   // Type definitions
 48 | \`;
 49 | 
 50 | const resolvers = {
 51 |   // Resolvers
 52 | }
 53 | 
 54 | interface ObsRouter extends Router {
 55 |   obsidianSchema?: any;
 56 | }
 57 | 
 58 | const GraphQLRouter = await ObsidianRouter<ObsRouter>({
 59 |   Router,
 60 |   typeDefs: types,
 61 |   resolvers: resolvers,
 62 |   redisPort: 6379,
 63 | });
 64 | 
 65 | const router = new Router();
 66 | router.get('/', handlePage);
 67 | 
 68 | function handlePage(ctx: any) {
 69 |   try {
 70 |     const body = (ReactDomServer as any).renderToString(<App />);
 71 |     ctx.response.body = \`<!DOCTYPE html>
 72 |       <html lang="en">
 73 |       <head>
 74 |         <meta charset="UTF-8">
 75 |         <title>SSR React App</title>
 76 |       </head>
 77 |       <body>
 78 |         <div id="root">\${body}</div>
 79 |         <script src="/static/client.tsx" defer></script>
 80 |       </body>
 81 |       </html>\`;
 82 |   } catch (error) {
 83 |     console.error(error);
 84 |   
 85 | app.use(GraphQLRouter.routes(), GraphQLRouter.allowedMethods());
 86 | 
 87 | await app.listen({ port: PORT });`}
 88 |       </CodeBlock>
 89 |       <br />
 90 |       <h2>Creating the Wrapper</h2>
 91 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 92 |         {`import { ObsidianWrapper } from 'https://deno.land/x/obsidian/clientMod.ts';
 93 | 
 94 | const App = () => {
 95 |   return (
 96 |     <ObsidianWrapper>
 97 |       <MovieApp />
 98 |     </ObsidianWrapper>
 99 |   );
100 | };`}
101 |       </CodeBlock>
102 |       <br />
103 |       <h2>Making a Query</h2>
104 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
105 |         {`import { useObsidian, BrowserCache } from 'https://deno.land/x/obsidian/clientMod.ts';
106 | 
107 | const MovieApp = () => {
108 |   const { query, cache, setCache } = useObsidian();
109 |   const [movies, setMovies] = (React as any).useState('');
110 | 
111 |   const queryStr = \`query { 
112 |       movies {
113 |         id
114 |         title
115 |         releaseYear
116 |         genre
117 |       }
118 |     }
119 |   \`
120 | 
121 |   return (
122 |     <h1>{movies}</h1>
123 |     <button
124 |       onClick={() => {
125 |         query(queryStr)
126 |         .then(resp => setMovies(resp.data))
127 |         .then(resp => setCache(new BrowserCache(cache.storage)))
128 |       }}
129 |     >Get Movies</button>
130 |   );
131 | };`}
132 |       </CodeBlock>
133 |       <br />
134 |       <h2>Making a Mutation</h2>
135 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
136 |         {`import { useObsidian, BrowserCache } from 'https://deno.land/x/obsidian/clientMod.ts';
137 | 
138 | const MovieApp = () => {
139 |   const { mutate, cache, setCache } = useObsidian();
140 |   const [movies, setMovies] = (React as any).useState('');
141 | 
142 |   const queryStr = \`mutation {
143 |     addMovie(input: {title: "Cruel Intentions", releaseYear: 1999, genre: "DRAMA" }) {
144 |       id
145 |       title
146 |       releaseYear
147 |       genre
148 |     }
149 |   }
150 |   \`;
151 | 
152 |   return (
153 |     <h1>{movies}</h1>
154 |     <button
155 |       onClick={() => {
156 |         mutate(queryStr)
157 |         .then(resp => setMovies(resp.data))
158 |         .then(resp => setCache(new BrowserCache(cache.storage)))
159 |       }}
160 |     >Add Movie</button>
161 |   );
162 | };`}
163 |       </CodeBlock>
164 |     </div>
165 |   );
166 | };
167 | 
168 | export default QuickStart;
169 | 


--------------------------------------------------------------------------------
/client/Components/NavBar.tsx:
--------------------------------------------------------------------------------
  1 | import { React } from '../../deps.ts';
  2 | 
  3 | declare global {
  4 |   namespace JSX {
  5 |     interface IntrinsicElements {
  6 |       div: any;
  7 |       a: any;
  8 |       h5: any;
  9 |       button: any;
 10 |       svg: any;
 11 |       path: any;
 12 |       h3: any;
 13 |     }
 14 |   }
 15 | }
 16 | 
 17 | const NavBar = (props: any) => {
 18 |   const { setPage } = props;
 19 | 
 20 |   // (React as any).useEffect(() => {
 21 |   //   let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
 22 | 
 23 |   //   window.addEventListener(touchEvent, (e:any) => {
 24 |   //     console.log(e.target)
 25 |   //     console.log('the id???',e.target.id)
 26 |   //     if (e.target.id === 'ontouchie') {
 27 |   //       console.log('found ya!')
 28 |   //       setPage('about');
 29 |   //     }
 30 |   //   })
 31 |   // }, []);
 32 | 
 33 |   return (
 34 |     <div className='navBar'>
 35 |       {/* <a href="jsx:setPage('docs');">DOCS LETS GO jsx</a> */}
 36 |       {/* <a href={() => setPage('docs')}>normal react</a> */}
 37 |       {/* <div id="ontouchie" style={{width: '60px', height: '60px', backgroundColor: 'white', cursor: 'pointer'}}>Touch me</div> */}
 38 |       {/* <a href="javascript:setPage('docs');">string func</a>
 39 |       <a href="#" onClick={(e:any) => {e.preventDefault(); setPage('about');}}>onclick</a>
 40 |       <a href="#" onTouchEnd={(e:any) => {e.preventDefault(); setPage('about');}}>touchend</a> */}
 41 |       <button
 42 |         className='navBtn'
 43 |         onClick={() => {
 44 |           setPage('home');
 45 |         }}
 46 |         onTouchEnd={() => {
 47 |           setPage('home');
 48 |         }}
 49 |       >
 50 |         <svg
 51 |           width='80%'
 52 |           height='70%'
 53 |           viewBox='0 0 16 16'
 54 |           className='bi bi-house-fill'
 55 |           fill='#EBEBEC'
 56 |           xmlns='http://www.w3.org/2000/svg'
 57 |         >
 58 |           <path
 59 |             fillRule='evenodd'
 60 |             d='M8 3.293l6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z'
 61 |           />
 62 |           <path
 63 |             fillRule='evenodd'
 64 |             d='M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z'
 65 |           />
 66 |         </svg>
 67 |         <h3 className='navBtnText'>Home</h3>
 68 |       </button>
 69 |       <button
 70 |         className='navBtn'
 71 |         onTouchEnd={() => {
 72 |           setPage('about');
 73 |         }}
 74 |         onClick={() => {
 75 |           setPage('about');
 76 |         }}
 77 |       >
 78 |         <svg
 79 |           width='80%'
 80 |           height='70%'
 81 |           viewBox='0 0 16 16'
 82 |           className='bi bi-person-lines-fill'
 83 |           fill='#EBEBEC'
 84 |           xmlns='http://www.w3.org/2000/svg'
 85 |         >
 86 |           <path
 87 |             fillRule='evenodd'
 88 |             d='M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7 1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm2 9a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z'
 89 |           />
 90 |         </svg>
 91 |         <h3 className='navBtnText'>Team</h3>
 92 |       </button>
 93 |       <button
 94 |         className='navBtn'
 95 |         onClick={() => {
 96 |           setPage('demo');
 97 |         }}
 98 |       >
 99 |         <svg
100 |           width='80%'
101 |           height='70%'
102 |           viewBox='0 0 16 16'
103 |           className='bi bi-laptop'
104 |           fill='#EBEBEC'
105 |           xmlns='http://www.w3.org/2000/svg'
106 |         >
107 |           <path
108 |             fillRule='evenodd'
109 |             d='M13.5 3h-11a.5.5 0 0 0-.5.5V11h12V3.5a.5.5 0 0 0-.5-.5zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11z'
110 |           />
111 |           <path d='M0 12h16v.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5V12z' />
112 |         </svg>
113 |         <h3 className='navBtnText'>Demo</h3>
114 |       </button>
115 |       <button
116 |         className='navBtn'
117 |         onChange={() => {
118 |           setPage('docs');
119 |         }}
120 |         onClick={() => {
121 |           setPage('docs');
122 |         }}
123 |       >
124 |         <svg
125 |           width='80%'
126 |           height='70%'
127 |           viewBox='0 0 16 16'
128 |           className='bi bi-file-earmark-text'
129 |           fill='#EBEBEC'
130 |           xmlns='http://www.w3.org/2000/svg'
131 |         >
132 |           <path d='M4 0h5.5v1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h1V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z' />
133 |           <path d='M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3z' />
134 |           <path
135 |             fillRule='evenodd'
136 |             d='M5 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z'
137 |           />
138 |         </svg>
139 |         <h3 className='navBtnText'>Docs</h3>
140 |       </button>
141 |       <div className='navBarGitLink'>
142 |         <a href='https://github.com/open-source-labs/obsidian'>
143 |           <img
144 |             id='githubLogoTop'
145 |             src='../static/github-icon.svg'
146 |             alt='GitHub Logo'
147 |           />
148 |         </a>
149 |       </div>
150 |       <div className='navBarDenoLink'>
151 |         <a href='https://deno.land/x/obsidian'>
152 |           <img src='../static/Deno-Logo.svg' alt='Deno Logo' />
153 |         </a>
154 |       </div>
155 |     </div>
156 |   );
157 | };
158 | 
159 | export default NavBar;
160 | 


--------------------------------------------------------------------------------
/client/static/Deno-Logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="100%" height="100%" viewBox="0 0 1024.000000 1024.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017
 9 | </metadata>
10 | <g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
11 | fill="#f7f7f7" stroke="none">
12 | <path d="M4720 9174 c-19 -2 -80 -9 -135 -14 -782 -82 -1552 -413 -2180 -939
13 | -116 -96 -380 -360 -476 -476 -520 -621 -824 -1318 -936 -2143 -25 -183 -25
14 | -801 0 -984 112 -825 416 -1522 936 -2143 96 -116 360 -380 476 -476 621 -520
15 | 1318 -824 2143 -936 183 -25 801 -25 984 0 825 112 1522 416 2143 936 116 96
16 | 380 360 476 476 520 621 824 1318 936 2143 25 183 25 801 0 984 -112 825 -416
17 | 1522 -936 2143 -96 116 -360 380 -476 476 -619 518 -1323 826 -2137 935 -88
18 | 12 -216 17 -453 19 -181 2 -346 1 -365 -1z m50 -432 c0 -117 8 -371 19 -612 6
19 | -118 13 -287 16 -375 11 -312 44 -1131 49 -1204 l5 -73 -45 5 c-25 2 -48 8
20 | -52 11 -3 4 -10 73 -14 154 -18 356 -77 1737 -83 1939 l-6 222 28 4 c15 2 40
21 | 5 56 6 l27 1 0 -78z m957 24 c1 -1 4 -303 7 -671 4 -369 9 -700 12 -736 3 -37
22 | 2 -69 -3 -71 -4 -3 -29 -3 -54 0 l-46 4 -7 291 c-4 161 -9 339 -11 397 -8 177
23 | -15 778 -9 793 4 11 15 12 57 5 29 -6 53 -11 54 -12z m-2313 -335 c6 -9 53
24 | -560 111 -1281 19 -245 38 -469 41 -497 5 -51 4 -53 -28 -73 -18 -11 -36 -20
25 | -40 -20 -3 0 -9 26 -12 58 -14 130 -68 758 -106 1212 -22 267 -42 506 -45 532
26 | -5 44 -4 48 22 62 32 17 50 20 57 7z m2753 -201 c28 -10 31 -15 37 -72 10
27 | -100 7 -578 -4 -578 -29 0 -89 34 -94 53 -3 12 -6 154 -6 315 0 325 -4 306 67
28 | 282z m-1847 -47 c0 -27 7 -176 15 -333 8 -157 17 -356 21 -442 7 -174 9 -168
29 | -58 -172 -33 -1 -33 -1 -35 49 -2 28 -7 115 -13 195 -5 80 -17 253 -25 385 -8
30 | 132 -18 263 -21 291 -6 50 -5 52 22 62 16 6 44 11 62 11 32 1 32 1 32 -46z
31 | m2774 -137 l34 -14 7 -134 c3 -73 5 -231 3 -350 l-3 -218 -42 21 -42 20 -3
32 | 332 c-2 183 -1 338 1 345 4 15 4 15 45 -2z m-1826 -131 c6 -6 20 -491 21 -737
33 | l1 -148 -47 7 c-27 3 -49 6 -50 7 -3 2 -33 743 -33 815 l0 74 51 -6 c29 -4 54
34 | -9 57 -12z m2303 -71 c12 -14 14 -233 17 -1441 3 -1387 3 -1423 -15 -1423 -11
35 | 0 -26 6 -35 13 -15 11 -17 132 -22 1317 -4 718 -9 1370 -12 1449 l-6 144 29
36 | -21 c17 -12 36 -29 44 -38z m-897 -205 c5 -4 10 -61 11 -126 5 -221 6 -1576 1
37 | -1580 -2 -2 -20 3 -40 11 l-36 15 0 851 0 850 28 -6 c15 -4 31 -10 36 -15z
38 | m-2760 -56 c3 -27 8 -88 11 -138 3 -49 10 -161 16 -248 12 -176 10 -187 -47
39 | -187 -30 0 -34 3 -38 33 -10 59 -45 551 -40 559 5 7 57 25 81 27 6 1 14 -20
40 | 17 -46z m-1654 -255 c11 -106 33 -328 49 -493 17 -165 31 -305 31 -311 0 -12
41 | -77 -50 -85 -42 -5 5 -105 890 -105 930 0 24 77 125 87 114 3 -2 13 -91 23
42 | -198z m3921 -105 l29 -17 1 -216 c1 -118 3 -250 3 -293 2 -90 -9 -105 -63 -86
43 | l-31 11 0 86 c0 48 -3 187 -7 310 l-6 222 23 0 c12 0 35 -8 51 -17z m-3482
44 | -388 c18 -192 47 -516 66 -720 l34 -370 -39 -39 -38 -39 -7 79 c-4 44 -24 248
45 | -45 454 -21 206 -51 505 -66 664 l-28 288 39 36 c35 33 39 34 46 16 4 -10 21
46 | -176 38 -369z m-749 -121 c22 -197 80 -721 130 -1164 50 -443 97 -870 106
47 | -950 8 -80 22 -201 30 -270 14 -117 14 -125 -2 -137 -24 -18 -34 -16 -34 5 0
48 | 9 -9 85 -20 167 -18 137 -48 369 -115 890 -14 105 -41 314 -60 465 -20 151
49 | -49 376 -65 500 -16 124 -43 336 -60 473 -18 136 -29 257 -26 270 7 27 66 121
50 | 72 115 2 -3 22 -166 44 -364z m-306 -431 c15 -120 43 -339 62 -488 19 -148 43
51 | -333 54 -410 l19 -140 -21 -18 c-12 -10 -24 -14 -28 -10 -4 4 -12 44 -18 88
52 | -6 44 -43 301 -83 570 l-71 490 23 68 c12 37 25 67 28 67 4 0 19 -98 35 -217z
53 | m5490 131 c14 -14 16 -76 16 -535 l0 -519 -28 0 c-61 0 -60 -15 -64 553 l-3
54 | 517 32 0 c17 0 39 -7 47 -16z m-2189 -179 c226 -34 423 -97 618 -197 126 -65
55 | 186 -110 326 -244 208 -199 336 -373 456 -619 175 -358 243 -675 329 -1525 39
56 | -381 90 -1072 101 -1355 3 -82 10 -217 16 -300 11 -176 24 -152 -131 -227
57 | -215 -104 -422 -176 -695 -243 -334 -82 -550 -108 -880 -109 l-240 -1 2 115
58 | c0 63 6 210 12 325 30 557 24 1260 -15 1650 -22 224 -65 496 -89 556 -5 13 18
59 | 24 117 58 181 63 338 142 362 181 43 74 -34 180 -132 180 -17 0 -68 -18 -115
60 | -39 -224 -103 -673 -224 -932 -251 -179 -19 -457 -8 -650 27 -105 19 -293 90
61 | -450 171 -181 94 -292 219 -325 367 -18 80 -13 240 10 330 25 99 95 243 159
62 | 327 285 375 873 700 1476 814 192 36 464 40 670 9z m3085 -31 c36 -15 40 -19
63 | 40 -53 2 -273 -4 -897 -9 -923 -1 -9 -53 -10 -75 -2 -14 5 -16 59 -16 500 0
64 | 316 4 494 10 494 5 0 28 -7 50 -16z m437 -549 l36 -15 -7 -828 c-8 -1055 -9
65 | -1086 -47 -1177 -62 -149 -59 -179 -53 475 2 327 7 658 9 735 2 77 4 294 5
66 | 483 0 228 3 342 10 342 6 0 27 -7 47 -15z m-6014 -249 c6 -81 4 -89 -25 -153
67 | l-32 -68 -12 100 c-19 160 -19 167 19 191 17 12 35 20 38 18 3 -2 9 -42 12
68 | -88z m-618 -603 c9 -82 79 -626 115 -893 54 -413 58 -472 34 -447 -3 3 -26
69 | 142 -50 309 -156 1078 -155 1071 -142 1079 27 18 36 8 43 -48z m720 -458 c6
70 | -25 35 -296 35 -329 0 -28 -36 -54 -52 -38 -5 5 -18 90 -28 188 -11 99 -22
71 | 202 -25 229 l-6 50 35 -40 c20 -22 38 -49 41 -60z m807 -377 c11 -10 18 -50
72 | 27 -158 15 -195 17 -180 -24 -180 -42 0 -41 -3 -55 173 -14 179 -14 177 13
73 | 177 13 0 30 -6 39 -12z m792 -15 c2 -10 7 -70 11 -133 3 -63 12 -205 20 -315
74 | 28 -404 29 -455 12 -455 -19 0 -21 15 -43 300 -8 118 -23 304 -33 413 -9 109
75 | -15 200 -12 202 11 12 40 3 45 -12z m-1880 -192 c6 -9 44 -329 91 -766 14
76 | -132 28 -259 31 -283 l5 -43 -25 16 c-19 13 -26 26 -26 49 0 63 -43 478 -76
77 | 732 -19 144 -34 271 -34 283 0 21 24 29 34 12z m5771 -418 l-7 -418 -25 -37
78 | c-57 -84 -54 -100 -51 368 l2 429 37 38 c20 20 40 37 44 37 3 0 3 -188 0 -417z
79 | m-925 -663 c5 -581 4 -626 -12 -644 -10 -11 -19 -18 -22 -15 -7 8 -17 1275 -9
80 | 1282 4 4 14 6 23 5 13 -3 16 -74 20 -628z m-3266 398 c7 -62 32 -359 42 -499
81 | 6 -94 6 -97 -16 -104 -12 -4 -26 -3 -30 2 -7 7 -29 229 -56 571 l-7 82 31 0
82 | c29 0 31 -2 36 -52z m-786 -350 c7 -7 12 -32 12 -57 0 -26 12 -161 25 -301 38
83 | -383 41 -435 24 -425 -26 15 -49 38 -44 44 2 4 -2 54 -10 111 -7 58 -16 152
84 | -20 210 -4 58 -13 164 -21 235 -19 175 -18 195 4 195 10 0 23 -5 30 -12z m473
85 | -673 c3 -22 9 -104 13 -182 7 -150 4 -161 -37 -130 -12 9 -20 47 -32 161 -21
86 | 206 -22 198 17 194 29 -3 33 -7 39 -43z"/>
87 | <path d="M3184 5756 c-104 -45 -112 -186 -14 -236 71 -36 143 -19 180 43 70
88 | 114 -44 246 -166 193z"/>
89 | <path d="M3862 5660 c-96 -59 -96 -201 0 -260 95 -57 218 18 218 132 0 110
90 | -126 184 -218 128z"/>
91 | </g>
92 | </svg>
93 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Basics/Mutations.tsx:
--------------------------------------------------------------------------------
  1 | import { React, CodeBlock, dracula } from '../../../../deps.ts';
  2 | 
  3 | const Mutations = (props: any) => {
  4 |   return (
  5 |     <div className="docContainer">
  6 |       <h1>Mutations</h1>
  7 |       <p>
  8 |         In this chapter, we'll learn how to send GraphQL mutations using{' '}
  9 |         <code className="obsidianInline">mutate</code> to ensure our cache
 10 |         behaves as expected.
 11 |       </p>
 12 |       <h2>mutate</h2>
 13 |       <p>
 14 |         To maintain and ascertain the truth of our cache, GraphQL mutations must
 15 |         be handled differently than queries. By allowing the user to send a
 16 |         configurations options object with
 17 |         <code className="obsidianInline">mutate</code>, the cache can be altered
 18 |         to their liking. To learn more about mutations, caching, and{' '}
 19 |         <code className="obsidianInline">obsidian</code>'s caching philosophy,
 20 |         see the{' '}
 21 |         <a href="#" onClick={() => props.setDocsPage('Philosophy')}>
 22 |           Caching
 23 |         </a>{' '}
 24 |         section.
 25 |       </p>
 26 |       <p>
 27 |         Just as with <code className="obsidianInline">query</code>,{' '}
 28 |         <code className="obsidianInline">mutate</code> is made available via{' '}
 29 |         <code className="obsidianInline">useObsidian</code>. To send a mutation,
 30 |         first destructure the hook:
 31 |       </p>
 32 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 33 |         {`// DeleteButton.tsx
 34 | import { useObsidian } from 'https://deno.land/x/obsidian/clientMod.ts';
 35 | 
 36 | const DeleteButton = () => {
 37 |   const { mutate } = useObsidian();
 38 | 
 39 |   // jsx below
 40 | };`}
 41 |       </CodeBlock>
 42 |       <br />
 43 |       <p>
 44 |         <code className="obsidianInline">mutate</code> has two parameters:
 45 |       </p>
 46 |       <ol>
 47 |         <li>
 48 |           <strong>mutation</strong> - Your GraphQL mutation string
 49 |         </li>
 50 |         <li>
 51 |           <strong>options</strong> - (optional) An object with further
 52 |           parameters
 53 |           <ul>
 54 |             <li>
 55 |               <strong>endpoint</strong> - (default:{' '}
 56 |               <code className="obsidianInline">'/graphql'</code>) The endpoint
 57 |               where <code className="obsidianInline">obsidian</code> should send
 58 |               this request
 59 |             </li>
 60 |             <li>
 61 |               <strong>cache</strong> - (default:{' '}
 62 |               <code className="obsidianInline">true</code>) Set to{' '}
 63 |               <code className="obsidianInline">true</code> to enable the cache
 64 |               to automatically update after a mutation request.
 65 |             </li>
 66 |             <li>
 67 |               <strong>delete</strong> - (default:{' '}
 68 |               <code className="obsidianInline">false</code>) Set to{' '}
 69 |               <code className="obsidianInline">true</code> to indicate a delete
 70 |               mutation.
 71 |             </li>
 72 |             <li>
 73 |               <strong>update</strong> - (default:{' '}
 74 |               <code className="obsidianInline">null</code>) Optional update
 75 |               function to customize cache updating behavior.
 76 |             </li>
 77 |           </ul>
 78 |         </li>
 79 |       </ol>
 80 |       <p>
 81 |         Send mutations with or without the configurations options parameter
 82 |         depending on your mutation request.
 83 |       </p>
 84 |       <p>A simple mutation request to update a field:</p>
 85 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 86 |         {`// UpdateFavoriteCharacter.tsx
 87 | 
 88 | const ADD_FAVORITE_MOVIE =\`
 89 |   mutation AddFavoriteMovie {
 90 |     favoriteMovie(id: 4) {
 91 |       __typename
 92 |       id
 93 |       isFavorite
 94 |     }
 95 |   }
 96 | \`;
 97 | 
 98 | return (
 99 |   <div>
100 |     <button
101 |       onClick(() => {
102 |         mutate(ADD_FAVORITE_MOVIE)
103 |         .then(resp => console.log(resp))
104 |       })
105 |     >Update Favorite Movie</button>
106 |   </div>
107 | );`}
108 |       </CodeBlock>
109 |       <p>
110 |         We don’t need an options object since we are using the default settings.
111 |       </p>
112 |       <br />
113 |       <p>
114 |         To send a delete mutation request, provide an options object with delete
115 |         set to true. This will let
116 |         <code className="obsidianInline">obsidian</code> know to update value in
117 |         the cache to ‘DELETED’
118 |       </p>
119 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
120 |         {`// DeleteButton.tsx
121 | 
122 | const DELETE_MOVIE = \`
123 |   mutation DeleteMovie {
124 |     deleteMovie(id: 4) {
125 |       __typename
126 |       id
127 |     }
128 |   }
129 | \`;
130 | 
131 | return (
132 |   <div>
133 |     <button
134 |       onClick(() => {
135 |         mutate(DELETE_MOVIE, {delete: true})
136 |         .then(resp => console.log(resp))
137 |       })
138 |     >Delete Movie</button>
139 |   </div>
140 | );`}
141 |       </CodeBlock>
142 |       <br />
143 | 
144 |       <p>
145 |         When sending a mutation request to create a new element, provide an
146 |         update function to let <code className="obsidianInline">obsidian</code>
147 |         know how to store the newly created element into the existing cache.
148 |       </p>
149 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
150 |         {`// DeleteButton.tsx
151 | 
152 | const ADD_MOVIE = \`
153 |   mutation AddMovie {
154 |     addMovie(input: {title: 'The Fugitive', releaseYear: 1993, genre: ACTION }) {
155 |       __typename
156 |       id
157 |       title
158 |       releaseYear
159 |       genre
160 |       isFavorite
161 |     }
162 |   }
163 | \`;
164 | 
165 | function movieUpdate(cache, respObj) {
166 |   const result = cache.read(ALL_MOVIES_BY_RELEASE_DATE);
167 |   const { movies } = result.data;
168 |   const newMovie = respObj.data.addMovie;
169 |   const updatedMovieArr = movies.push(newMovie).sort((movie1, movie2) => {
170 |     return movie1.releaseYear - movie2.releaseYear;
171 |   });
172 |   const updatedRespObj = { data: { movies: updatedMovieArr } };
173 |   cache.write(ALL_MOVIES_BY_RELEASE_DATE, updatedRespObj);
174 | }
175 | 
176 | return (
177 |   <div>
178 |     <button
179 |       onClick(() => {
180 |         mutate(ADD_MOVIE, {update: movieUpdate})
181 |         .then(resp => console.log(resp))
182 |       })
183 |     >Add Movie</button>
184 |   </div>
185 | );`}
186 |       </CodeBlock>
187 |       <br />
188 |       <h4>Recap & Next Up</h4>
189 |       <p>
190 |         In this chapter we covered how to send mutations using{' '}
191 |         <code className="obsidianInline">mutate</code>. To round out the Basics
192 |         section, we'll examine some common errors you might find when using{' '}
193 |         <code className="obsidianInline">obsidian</code>.
194 |       </p>
195 |     </div>
196 |   );
197 | };
198 | 
199 | export default Mutations;
200 | 


--------------------------------------------------------------------------------
/client/static/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="536" height="395" viewBox="0 0 536 395" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect width="536" height="395" fill="black"/>
 3 | <path d="M222.5 85.6417C229.679 85.0627 242.829 83.368 258 85.6417C308.339 93.1858 381.647 112.852 339 93.6415C319.254 84.747 288.946 81.7493 258 85.6417C201.966 92.6897 144 115.142 144 115.142C144 115.142 191.5 88.1417 222.5 85.6417Z" fill="#BDBDBD"/>
 4 | <path d="M169.572 109.753C169.572 109.753 174.5 127.642 167.5 144.142C163.5 153.57 171.556 170.537 163.5 174.142C144.5 182.642 169.137 136.642 163.5 130.642C157.863 124.642 169.572 109.753 169.572 109.753Z" fill="#BDBDBD"/>
 5 | <path d="M201.923 156.376C224.903 164.073 219.144 133.962 224.977 147.623C230.81 161.283 178.154 164.683 172.461 170.24C166.767 175.798 178.942 148.678 201.923 156.376Z" fill="#BDBDBD"/>
 6 | <path d="M170 176.642C157.876 186.642 169 224.142 178.124 224.892C187.249 225.642 195.5 228.142 175.5 216.142C155.5 204.142 182.124 166.642 170 176.642Z" fill="#BDBDBD"/>
 7 | <path d="M196.948 174.642C184.7 167.732 205.628 186.637 218 203.142C225.325 212.913 221.812 223.142 227.948 223.142C244.448 223.142 233.948 223.142 229.948 213.142C225.948 203.142 216.448 185.642 196.948 174.642Z" fill="#BDBDBD"/>
 8 | <path d="M284 160.642C278.554 150.755 260.149 162.295 234.344 150.374C219.5 143.517 288 155.142 288 155.142L326.411 174.477C326.411 174.477 289.446 170.528 284 160.642Z" fill="#BDBDBD"/>
 9 | <path d="M224.025 99.3429C219.525 83.3429 231.025 112.343 235.525 124.343C240.025 136.343 227.525 142.843 227.525 142.843C227.525 142.843 228.525 115.343 224.025 99.3429Z" fill="#BDBDBD"/>
10 | <path d="M307.955 197.568C310.455 193.318 307.955 183.068 304.955 177.568C301.955 172.068 300.455 193.068 296.455 188.068C292.455 183.068 253.455 178.068 260.955 183.068C268.455 188.068 305.455 201.818 307.955 197.568Z" fill="#BDBDBD"/>
11 | <path id="frontLeg" d="M331.5 174.142C331.5 174.142 366.51 200.142 370.01 202.642C373.51 205.142 381.51 217.642 381.51 217.642C381.51 217.642 365.01 222.142 364.51 217.642C364.01 213.142 360.674 194.142 351 194.142C341.326 194.142 331.5 174.142 331.5 174.142Z" fill="#BDBDBD"/>
12 | <path d="M319 103.142C315.5 95.6416 339.594 110.176 342.438 112.819C345.282 115.462 336.253 144.005 339.345 155.634C342.438 167.262 335.47 170.962 333.16 167.262C330.849 163.562 336.253 134.723 336.253 121.276C336.253 107.83 322.5 110.642 319 103.142Z" fill="#BDBDBD"/>
13 | <path d="M363.963 155.642C370.611 154.758 372.139 155.028 374 156.642C376.481 158.793 383 159.642 383 159.642C383 159.642 381.872 163.481 378.5 162.142C375.975 161.139 366.532 157.071 363.963 158.142C356.724 161.158 348.657 167.955 340.273 174.142C331.89 180.328 348.452 157.704 363.963 155.642Z" fill="#BDBDBD"/>
14 | <path d="M377.318 124.601C375.733 120.144 382.5 128.642 384.5 135.642C386.5 142.642 386.283 164.655 384.5 159.642C382.717 154.628 380.262 144.429 381.5 140.642C382.738 136.854 378.903 129.057 377.318 124.601Z" fill="#BDBDBD"/>
15 | <path d="M354.363 104.144C343.404 99.2721 357.5 109.642 357.5 122.142C360 106.464 372.662 117.384 377.68 119.111C397.694 125.998 371.5 114.642 366.5 109.642C361.5 104.642 368.99 110.646 354.363 104.144Z" fill="#BDBDBD"/>
16 | <path d="M374.5 127.142C376 127.642 375.5 132.142 374.5 132.142C373.5 132.142 368.5 127.142 368 126.142C367.5 125.142 373 126.642 374.5 127.142Z" fill="#BDBDBD"/>
17 | <path d="M370.5 85.6416C370.5 85.6416 362.5 89.6416 359 92.1416C355.5 94.6416 353.5 100.142 355.5 102.642C357.5 105.142 370.5 85.6416 370.5 85.6416Z" fill="#BDBDBD"/>
18 | <path d="M388 91.6415C388 91.6415 376 112.142 378 114.642C380 117.142 382.5 111.642 385 108.142C387.5 104.642 388 91.6415 388 91.6415Z" fill="#BDBDBD"/>
19 | <path d="M155 258V290C155 293.573 153.853 296.347 151.56 298.32C149.32 300.24 145.933 301.2 141.4 301.2C136.92 301.2 133.533 300.24 131.24 298.32C128.947 296.347 127.8 293.573 127.8 290V258C127.8 254.427 128.92 251.68 131.16 249.76C133.453 247.787 136.84 246.8 141.32 246.8C145.853 246.8 149.267 247.787 151.56 249.76C153.853 251.68 155 254.427 155 258ZM149.4 290V258C149.4 253.733 146.733 251.6 141.4 251.6C136.067 251.6 133.4 253.733 133.4 258V290C133.4 294.267 136.067 296.4 141.4 296.4C146.733 296.4 149.4 294.267 149.4 290ZM169.781 248H181.861C186.021 248 189.168 248.987 191.301 250.96C193.488 252.933 194.581 255.68 194.581 259.2V264C194.581 268.533 192.688 271.44 188.901 272.72C193.221 273.893 195.381 276.853 195.381 281.6V288.8C195.381 292.373 194.315 295.147 192.181 297.12C190.048 299.04 186.875 300 182.661 300H169.781V248ZM189.781 288.8V281.6C189.781 279.573 189.168 277.947 187.941 276.72C186.715 275.44 184.955 274.8 182.661 274.8H175.381V295.2H182.661C187.408 295.2 189.781 293.067 189.781 288.8ZM188.981 264V259.2C188.981 257.173 188.368 255.6 187.141 254.48C185.915 253.36 184.155 252.8 181.861 252.8H175.381V270.8H181.861C184.208 270.8 185.968 270.187 187.141 268.96C188.368 267.733 188.981 266.08 188.981 264ZM235.612 290C235.612 297.467 231.105 301.2 222.092 301.2C213.079 301.2 208.572 297.467 208.572 290V283.2H214.172V290.32C214.172 292.24 214.839 293.733 216.172 294.8C217.505 295.867 219.479 296.4 222.092 296.4C224.705 296.4 226.679 295.867 228.012 294.8C229.345 293.733 230.012 292.293 230.012 290.48C230.012 288.613 229.799 287.147 229.372 286.08C228.999 284.96 228.199 283.787 226.972 282.56L212.892 268.8C211.239 267.147 210.092 265.547 209.452 264C208.865 262.4 208.572 260.4 208.572 258C208.572 254.427 209.665 251.68 211.852 249.76C214.092 247.787 217.452 246.8 221.932 246.8C230.519 246.8 234.812 250.533 234.812 258V264.8H229.212V257.68C229.212 255.76 228.572 254.267 227.292 253.2C226.065 252.133 224.199 251.6 221.692 251.6C219.185 251.6 217.292 252.133 216.012 253.2C214.785 254.267 214.172 255.733 214.172 257.6C214.172 259.467 214.359 260.933 214.732 262C215.105 263.067 215.932 264.187 217.212 265.36L231.532 279.12C233.079 280.827 234.145 282.48 234.732 284.08C235.319 285.627 235.612 287.6 235.612 290ZM255.616 300H250.016V248H255.616V300ZM284.458 300H271.578V248H284.458C288.618 248 291.765 248.987 293.898 250.96C296.085 252.933 297.178 255.68 297.178 259.2V288.8C297.178 292.373 296.111 295.147 293.978 297.12C291.845 299.04 288.671 300 284.458 300ZM291.578 288.8V259.2C291.578 257.173 290.965 255.6 289.738 254.48C288.511 253.36 286.751 252.8 284.458 252.8H277.178V295.2H284.458C289.205 295.2 291.578 293.067 291.578 288.8ZM317.569 300H311.969V248H317.569V300ZM358.331 300H355.931L353.851 294.88C352.731 296.8 351.265 298.347 349.451 299.52C347.638 300.64 345.638 301.2 343.451 301.2C335.771 301.2 331.931 297.467 331.931 290V282C331.931 274.533 335.771 270.8 343.451 270.8H352.731V257.68C352.731 255.76 352.118 254.267 350.891 253.2C349.665 252.133 347.851 251.6 345.451 251.6C340.705 251.6 338.331 253.627 338.331 257.68V262.4H332.731V258C332.731 254.427 333.771 251.68 335.851 249.76C337.985 247.787 341.185 246.8 345.451 246.8C349.718 246.8 352.918 247.787 355.051 249.76C357.238 251.68 358.331 254.427 358.331 258V300ZM352.731 275.6H343.451C341.211 275.6 339.665 276.16 338.811 277.28C337.958 278.4 337.531 279.973 337.531 282V290C337.531 292.027 337.958 293.6 338.811 294.72C339.665 295.84 341.211 296.4 343.451 296.4C345.691 296.4 347.771 295.547 349.691 293.84C351.611 292.08 352.625 290.347 352.731 288.64V275.6ZM379.131 300H373.531V248H375.931L377.931 253.2C380.491 248.933 384.038 246.8 388.571 246.8C396.411 246.8 400.331 250.533 400.331 258V300H394.731V258C394.731 255.973 394.278 254.4 393.371 253.28C392.518 252.16 390.918 251.6 388.571 251.6C386.225 251.6 384.065 252.507 382.091 254.32C380.118 256.133 379.131 257.893 379.131 259.6V300Z" fill="#BDBDBD"/>
20 | </svg>
21 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Caching/Strategies.tsx:
--------------------------------------------------------------------------------
  1 | import { React, CodeBlock, dracula } from '../../../../deps.ts';
  2 | 
  3 | const Strategies = (props: any) => {
  4 |   return (
  5 |     <div className="docContainer">
  6 |       <h1>Strategies</h1>
  7 |       <p>
  8 |         In this section, we cover the details of caching in{' '}
  9 |         <code className="obsidianInline">obsidian</code>. In this chapter, we'll
 10 |         learn more about the different caching strategies{' '}
 11 |         <code className="obsidianInline">obsidian</code> makes available to us,
 12 |         and their pros and cons.
 13 |       </p>
 14 |       <h2>Caching in Obsidian</h2>
 15 |       <p>
 16 |         What do we mean when we talk about caching <i>strategies</i>? Throughout
 17 |         this documentation, we use the term to refer to the methods by which you
 18 |         cache and store your GraphQL data. These methods each come with their
 19 |         own strengths and weaknesses- just like in a game of chess, where a
 20 |         development strategy may yield long-term benefits but come at the cost
 21 |         of short-term disadvantages.{' '}
 22 |         <code className="obsidianInline">obsidian</code>'s caching strategies
 23 |         offer control over how ObsidianRouter and ObsidianWrapper store and
 24 |         reconstruct your data, so that you can pick the strategy that best suits
 25 |         your GraphQL needs.
 26 |       </p>
 27 |       <p>
 28 |         Let's examine each caching strategy in{' '}
 29 |         <code className="obsidianInline">obsidian</code>.
 30 |       </p>
 31 |       <h3>Cacheless</h3>
 32 |       <p>
 33 |         At first blush the cacheless caching strategy sounds like an oxymoron-
 34 |         and it is. However, we feel it is important to denote cacheless as it's
 35 |         own caching strategy, as{' '}
 36 |         <code className="obsidianInline">obsidian</code> does not demand a
 37 |         caching layer. If you would prefer to forgo another caching strategy,{' '}
 38 |         <code className="obsidianInline">obsidian</code> can be configured to
 39 |         bypass the caching layer and serve as a basic GraphQL router or client.
 40 |       </p>
 41 |       <p>
 42 |         The cacheless strategy is recommended when your GraphQL needs are light.
 43 |         If you make a very small number of content calls to a GraphQL service,
 44 |         caching can be an unnecessary complexity.
 45 |       </p>
 46 |       <h3>Whole-Query Caching</h3>
 47 |       <p>
 48 |         Whole-query caching is a simple and powerful caching strategy.
 49 |         Whole-query caching stores each query and response in the caching layer.
 50 |         If an identical query enters{' '}
 51 |         <code className="obsidianInline">obsidian</code>, the stored response is
 52 |         returned in its entirety. This approach to caching is extremely fast, as
 53 |         long as queries are absolutely identical. However, even minor
 54 |         differences in queries will store new key-value pairs in the cache,
 55 |         often resulting in large amounts of redundant information.
 56 |       </p>
 57 |       <p>
 58 |         Whole-query caching is recommended if your app makes many identical
 59 |         GraphQL queries throughout a typical user-session, such as flipping
 60 |         through pages of content.
 61 |       </p>
 62 |       <h3>Destructuring & Normalization</h3>
 63 |       <p>
 64 |         Normalized caching is <code className="obsidianInline">obsidian</code>'s
 65 |         headlining caching strategy. As responses from your GraphQL queries exit{' '}
 66 |         <code className="obsidianInline">obsidian</code>, they are{' '}
 67 |         <i>normalized</i> and stored in the cache at an object level. Then, by
 68 |         parsing incoming queries and <i>destructuring</i> their contents,{' '}
 69 |         <code className="obsidianInline">obsidian</code> is able to reconstruct
 70 |         a response object from the cache. This removes replication of data in
 71 |         the cache, improves memory management, and opens the door to mutation
 72 |         consistency in the cache layer.
 73 |       </p>
 74 |       <p>
 75 |         To facilitate the normalized caching strategy,{' '}
 76 |         <code className="obsidianInline">obsidian</code> requires your responses
 77 |         to always return IDs coupled with each GraphQL object type. What exactly
 78 |         does that mean? We can learn more by looking at an example:
 79 |       </p>
 80 |       <CodeBlock language="graphql" showLineNumbers={true} style={dracula}>
 81 |         {`type Movie {
 82 |   id: ID!
 83 |   title: String!
 84 |   releaseYear: Int
 85 |   genre: String
 86 | }`}
 87 |       </CodeBlock>
 88 |       <br />
 89 |       <p>
 90 |         This is a GraphQL object type- it's comprised of many fields, each of
 91 |         which can be assigned a Scalar value (Int, Float, String, Boolean, or
 92 |         ID) or another object type. For example, our Movie type could also have
 93 |         a field comprised of an array of actors that appear in the film:
 94 |       </p>
 95 |       <CodeBlock language="graphql" showLineNumbers={true} style={dracula}>
 96 |         {`type Movie {
 97 |   id: ID!
 98 |   title: String!
 99 |   releaseYear: Int
100 |   genre: String
101 |   actors: [Actor]
102 | }
103 | 
104 | type Actor {
105 |   id: ID!
106 |   firstName: String
107 |   lastName: String
108 |   nickname: String
109 |   movies: [Movie!]
110 | }`}
111 |       </CodeBlock>
112 |       <br />
113 |       <p>
114 |         Note that for both object types, we have an id field. To utilize the
115 |         normalized caching strategy in{' '}
116 |         <code className="obsidianInline">obsidian</code>, you must request the
117 |         id field of each object type you receive in every query. For example, if
118 |         you'd like to query for just the actors in a particular movie, your
119 |         query should look like this:
120 |       </p>
121 |       <CodeBlock language="graphql" showLineNumbers={true} style={dracula}>
122 |         {`query {
123 |   getMovie(id: "1") {
124 |     id
125 |     actors {
126 |       id
127 |       firstName
128 |       lastName
129 |     }
130 |   }
131 | }`}
132 |       </CodeBlock>
133 |       <br />
134 |       <p>
135 |         We requested the id of both the Movie object type and the Actor object
136 |         type. Conversely, if you don't need any information about the actors in
137 |         a movie, there's no need to ask for their id as you won't be accessing
138 |         any info found on the Actor object type:
139 |       </p>
140 |       <CodeBlock language="graphql" showLineNumbers={true} style={dracula}>
141 |         {`query {
142 |   getMovie(id: "1") {
143 |     id
144 |     title
145 |   }
146 | }`}
147 |       </CodeBlock>
148 |       <br />
149 |       <p>
150 |         Normalized caching is incredibly robust, enabling{' '}
151 |         <code className="obsidianInline">obsidian</code> to maintain consistency
152 |         with greater precision, and thus ships as the default option when
153 |         utilizing ObsidianRouter and ObsidianWrapper.
154 |       </p>
155 |       <p>
156 |         Normalized caching is recommended for more complex and robust GraphQL
157 |         applications. If you app is often making queries for subsets of
158 |         information on object types or making many similar but unique API calls,
159 |         normalized caching can drastically improve load times and help maintain
160 |         global consistency.
161 |       </p>
162 |       <h4>Recap & Next Up</h4>
163 |       <p>
164 |         We've learned about the different caching strategies{' '}
165 |         <code className="obsidianInline">obsidian</code> offers, and highlighted
166 |         the best use-case for each. Next, we will walk through the
167 |         implementations of each of these caching strategies in both
168 |         ObsidianWrapper and ObsidianRouter.
169 |       </p>
170 |     </div>
171 |   );
172 | };
173 | 
174 | export default Strategies;
175 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Basics/Queries.tsx:
--------------------------------------------------------------------------------
  1 | import { React, CodeBlock, dracula } from '../../../../deps.ts';
  2 | 
  3 | const Queries = (props: any) => {
  4 |   return (
  5 |     <div className="docContainer">
  6 |       <h1>Queries</h1>
  7 |       <p>
  8 |         In this chapter, we'll cover how to fetch GraphQL data in React using
  9 |         <code className="obsidianInline"> obsidian query</code>, and discuss the
 10 |         options available to you when querying.
 11 |       </p>
 12 |       <h2>useObsidian</h2>
 13 |       <p>
 14 |         After setting up ObsidianWrapper,
 15 |         <code className="obsidianInline"> obsidian</code> exposes a custom React
 16 |         hook, <code className="obsidianInline">useObsidian</code>, that can be
 17 |         used to globally access fetching and caching capabilities. Destructure
 18 |         the hook inside your React components to access
 19 |         <code className="obsidianInline"> obsidian</code> functionality:
 20 |       </p>
 21 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 22 |         {`// MainContainer.tsx
 23 | import { useObsidian } from 'https://deno.land/x/obsidian/clientMod.ts';
 24 | 
 25 | const MainContainer = () => {
 26 |   const { query } = useObsidian();
 27 | 
 28 |   // jsx below
 29 | };`}
 30 |       </CodeBlock>
 31 |       <br />
 32 |       <h2>Executing a query</h2>
 33 |       <p>
 34 |         To run a simple query within a React component, call
 35 |         <code className="obsidianInline"> obsidian query</code> and pass it a
 36 |         GraphQL query string as a required first parameter. When your component
 37 |         renders, the <code className="obsidianInline">obsidian query </code>
 38 |         returns a response object from Obsidian Client that contains data you
 39 |         can use to render your UI. Let's look at an example:
 40 |       </p>
 41 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 42 |         {`// MainContainer.tsx
 43 | 
 44 | const allMoviesQuery = \`query{
 45 |   movies{
 46 |     id
 47 |     title
 48 |   }
 49 | }\`
 50 | async function getAllMovies() {
 51 |   const data = await query(allMoviesQuery);
 52 |   return (
 53 |     <select name="dog" onChange={onDogSelected}>
 54 |       {data.dogs.map(dog => (
 55 |         <option key={dog.id} value={dog.breed}>
 56 |           {dog.breed}
 57 |         </option>
 58 |       ))}
 59 |     </select>
 60 |   );
 61 | }`}
 62 |       </CodeBlock>
 63 |       <br />
 64 |       <p>
 65 |         Whenever Obsidian Client fetches query results from your server, it
 66 |         automatically caches those results locally. This makes subsequent
 67 |         executions of the same query extremely fast. To utilize the caching
 68 |         capabilities of obsidian and to have more control over how the data is
 69 |         fetched, we’re providing some configuration options as a second and
 70 |         optional parameter to the
 71 |         <code className="obsidianInline"> obsidian query</code> in addition to
 72 |         the query string:
 73 |       </p>
 74 |       <ol>
 75 |         <li>
 76 |           <strong>query</strong> - Your GraphQL query string.
 77 |         </li>
 78 |         <li>
 79 |           <strong>options</strong> - (optional) An object with further
 80 |           parameters.
 81 |           <ul>
 82 |             <li>
 83 |               <strong>endpoint</strong> - (default:
 84 |               <code className="obsidianInline">'/graphql'</code>) The endpoint
 85 |               where <code className="obsidianInline">obsidian</code> should send
 86 |               this request.
 87 |             </li>
 88 |             <li>
 89 |               <strong>cacheRead</strong> - (default:
 90 |               <code className="obsidianInline"> true</code>) Determines whether
 91 |               the cache should be checked before making a server request.
 92 |             </li>
 93 |             <li>
 94 |               <strong>cacheWrite</strong> - (default:
 95 |               <code className="obsidianInline"> true</code>) Determines whether
 96 |               the response from a server request should be written into the
 97 |               cache. See the{' '}
 98 |               <a href="#" onClick={() => props.setDocsPage('Client')}>
 99 |                 Caching
100 |               </a>{' '}
101 |               section for more details.
102 |             </li>
103 |             <li>
104 |               <strong>pollInterval</strong> - (default:
105 |               <code className="obsidianInline"> null</code>) How often
106 |               <code className="obsidianInline"> obsidian</code> should execute
107 |               this query, in ms. Learn more in the
108 |               <a href="#" onClick={() => props.setDocsPage('Polling')}>
109 |                 {' '}
110 |                 Advanced{' '}
111 |               </a>
112 |               section.
113 |             </li>
114 |             <li>
115 |               <strong>wholeQuery</strong> - (default:
116 |               <code className="obsidianInline"> false</code>) Set to
117 |               <code className="obsidianInline"> true</code> to conduct
118 |               wholeQuery writes or retrieval from the cache. See the
119 |               <a href="#" onClick={() => props.setDocsPage('Client')}>
120 |                 {' '}
121 |                 Caching{' '}
122 |               </a>
123 |               section for more details.
124 |             </li>
125 |           </ul>
126 |         </li>
127 |       </ol>
128 |       <p>
129 |         As you can see, invoking{' '}
130 |         <code className="obsidianInline">obsidian query</code> with a query
131 |         string as its only argument will make a request to your '/graphql'
132 |         endpoint only once, utilizing the destructure caching strategy and
133 |         storing the cached data in global memory.
134 |       </p>
135 |       <p>
136 |         We'll explore caching in more detail in the
137 |         <a href="#" onClick={() => props.setDocsPage('Strategies')}>
138 |           {' '}
139 |           Caching
140 |         </a>{' '}
141 |         section. For now, let's use
142 |         <code className="obsidianInline"> obsidian query</code> to showcase a
143 |         simple GraphQL request that responds just like the fetch API, returning
144 |         a promise that can be consumed with a .then():
145 |       </p>
146 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
147 |         {`// MainContainer.tsx
148 | import React from 'https://dev.jspm.io/react';
149 | import { useObsidian } from 'https://deno.land/x/obsidian/clientMod.ts';
150 | 
151 | const MainContainer = () => {
152 |   const { query } = useObsidian();
153 |   const [movie, setMovie] = (React as any).useState({});
154 | 
155 |   return (
156 |     <div>
157 |       <h1>Obsidian Film Showcase</h1>
158 |       <p>Check out our favorite movie by clicking the button below</p>
159 |       <button
160 |         onClick(() => {
161 |           query(\`query { getMovie { id title releaseYear } }\`)
162 |           .then(resp => setMovie(resp.data.getMovie))
163 |         })
164 |       >Get Movie</button>
165 |       <p>Title: {movie.title}</p>
166 |       <p>Release Year: {movie.releaseYear}</p>
167 |     </div>
168 |   );
169 | };
170 | 
171 | export default MainContainer;`}
172 |       </CodeBlock>
173 |       <br />
174 |       <p>
175 |         That's it! Subsequent queries will utilize the cache to reconstruct the
176 |         result without querying the GraphQL endpoint.
177 |       </p>
178 |       <h4>Recap & Next Up</h4>
179 |       <p>
180 |         In this chapter we covered{' '}
181 |         <code className="obsidianInline">useObsidian</code> and the basic use
182 |         cases of the <code className="obsidianInline">query</code> method. Next
183 |         up, we'll cover mutations and the
184 |         <code className="obsidianInline"> mutate</code> method
185 |         <code className="obsidianInline"> obsidian</code> supplies.
186 |       </p>
187 |     </div>
188 |   );
189 | };
190 | 
191 | export default Queries;
192 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Basics/GettingStarted.tsx:
--------------------------------------------------------------------------------
  1 | import { React, CodeBlock, dracula } from '../../../../deps.ts';
  2 | 
  3 | const GettingStarted = (props: any) => {
  4 |   return (
  5 |     <div className="docContainer">
  6 |       <h1>Getting Started</h1>
  7 |       <p>
  8 |         In this section, we'll learn{' '}
  9 |         <code className="obsidianInline">obsidian</code> by walking through the
 10 |         setup of a simple full stack server-side rendered React app in Deno.
 11 |       </p>
 12 |       <h2>ObsidianRouter</h2>
 13 |       <p>
 14 |         We're going to build the backend of our app with{' '}
 15 |         <a className="pinkA" href="https://deno.land/x/oak@v6.2.0">
 16 |           Oak
 17 |         </a>
 18 |         , a middleware framework for your Deno server. ObsidianRouter is an{' '}
 19 |         <i>Oak router</i>, so we must build our server with Oak in order to use{' '}
 20 |         <code className="obsidianInline">obsidian</code>.
 21 |       </p>
 22 |       <h3>Installation</h3>
 23 |       <p>
 24 |         Thanks to Deno's ECMAScript package importing, installation of Oak and{' '}
 25 |         <code className="obsidianInline">obsidian</code> is incredibly simple.
 26 |         Just import the pieces of the modules you need at the top of your
 27 |         server, like so:
 28 |       </p>
 29 |       <CodeBlock language="typescript" showLineNumbers={true} style={dracula}>
 30 |         {`// server.tsx
 31 | import { Application, Router } from 'https://deno.land/x/oak@v6.0.1/mod.ts';
 32 | import { ObsidianRouter, gql } from 'https://deno.land/x/obsidian/mod.ts';`}
 33 |       </CodeBlock>
 34 |       <br />
 35 |       <p className="docAside">
 36 |         <i>NOTE</i> - Throughout these guides, we will be illustrating imports
 37 |         directly from a url. It is common practice for Deno apps to utilize a
 38 |         dependencies file, usually called{' '}
 39 |         <code className="obsidianInline">deps.ts</code>, where packages are
 40 |         imported from their urls and then referenced with local imports
 41 |         throughout the app. We recommend this approach, with the key caveat that
 42 |         your Oak import statements not be accidentally bundled with your
 43 |         client-side code, as the browser is unable to interpret any references
 44 |         to Deno. You can easily accomplish this by creating two separate
 45 |         dependency files for your server and client code.
 46 |       </p>
 47 |       <h3>Oak</h3>
 48 |       <p>
 49 |         Now that we've imported our modules, let's begin by setting up our Oak
 50 |         server:
 51 |       </p>
 52 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 53 |         {`// server.tsx
 54 | const PORT = 8000;
 55 | 
 56 | const app = new Application();
 57 | 
 58 | app.addEventListener('listen', () => {
 59 |   console.log(\`Listening at http://localhost:\${PORT}\`);
 60 | });
 61 | 
 62 | await app.listen({ port: PORT });`}
 63 |       </CodeBlock>
 64 |       <br />
 65 |       <h3>Schema</h3>
 66 |       <p>
 67 |         Next we'll add our GraphQL endpoint with ObsidianRouter. Like every
 68 |         GraphQL server, ObsidianRouter requires a GraphQL schema to define the
 69 |         structure of our data. <code className="obsidianInline">obsidian</code>{' '}
 70 |         provides <code className="obsidianInline">gql</code>, a{' '}
 71 |         <a href="https://developers.google.com/web/updates/2015/01/ES6-Template-Strings">
 72 |           tagged template literal
 73 |         </a>{' '}
 74 |         that allows ObsidianRouter to read your GraphQL schema. Let's construct
 75 |         our schema now:
 76 |       </p>
 77 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 78 |         {`// server.tsx
 79 | const types = (gql as any)\`
 80 |   type Movie {
 81 |     id: ID
 82 |     title: String
 83 |     releaseYear: Int
 84 |   }
 85 | 
 86 |   type Query {
 87 |     getMovie: Movie
 88 |   }
 89 | \`;`}
 90 |       </CodeBlock>
 91 |       <br />
 92 |       <h3>Resolvers</h3>
 93 |       <p>
 94 |         Great, we have a schema! But in order for ObsidianRouter to do something
 95 |         with your schema, we need to give it <i>resolvers</i>. Resolvers tell
 96 |         ObsidianRouter what to do with incoming queries and mutations. Let's
 97 |         create a resolver for our{' '}
 98 |         <code className="obsidianInline">getMovie</code> query:
 99 |       </p>
100 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
101 |         {`// server.tsx
102 | const resolvers = {
103 |   Query: {
104 |     getMovie: () => {
105 |       return {
106 |         id: "1",
107 |         title: "Up",
108 |         releaseYear: 2009
109 |       };
110 |     },
111 |   },
112 | };`}
113 |       </CodeBlock>
114 |       <br />
115 |       <p className="docAside">
116 |         <i>NOTE</i> - Resolvers typically do not return hardcoded data like we
117 |         have here. Your resolvers can fetch data from anywhere you might
118 |         normally fetch data from, like a database or another API, but for the
119 |         sake of simplicity our example includes a hardcoded response.
120 |       </p>
121 |       <h3>ObsidianRouter Setup</h3>
122 |       <p>
123 |         We now have everything we need to create our GraphQL endpoint using
124 |         ObsidianRouter. For now, we'll set{' '}
125 |         <code className="obsidianInline">useCache</code> to{' '}
126 |         <code className="obsidianInline">false</code>- we'll learn more about
127 |         caching with ObsidianRouter{' '}
128 |         <a href="#" onClick={() => props.setDocsPage('Server')}>
129 |           later
130 |         </a>
131 |         . Note that the router should come <i>before</i> your{' '}
132 |         <code className="obsidianInline">app.listen</code>.
133 |       </p>
134 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
135 |         {`// server.tsx
136 | interface ObsRouter extends Router {
137 |   obsidianSchema?: any;
138 | }
139 | 
140 | const GraphQLRouter = await ObsidianRouter<ObsRouter>({
141 |   Router,
142 |   typeDefs: types,
143 |   resolvers: resolvers,
144 |   useCache: false,
145 | });
146 | 
147 | app.use(GraphQLRouter.routes(), GraphQLRouter.allowedMethods());`}
148 |       </CodeBlock>
149 |       <br />
150 |       <p className="docAside">
151 |         <i>NOTE</i> - If you are building your server in TypeScript, as we are
152 |         here, you will have to extend the Oak Router interface to create the
153 |         ObsidianRouter. By exposing the{' '}
154 |         <code className="obsidianInline">obsidianSchema</code> property on the
155 |         ObsidianRouter, we open the door to a streamlined caching implementation
156 |         for your client-side code, which we'll explore in{' '}
157 |         <a href="#" onClick={() => props.setDocsPage('ServerSideRendering')}>
158 |           server-side rendering
159 |         </a>
160 |         .
161 |       </p>
162 |       <h3>Spin Up the Server</h3>
163 |       <p>
164 |         Let's start the server! As Deno requires us to explicitly give
165 |         permissions, our command to start up the server looks like this:
166 |       </p>
167 |       <p>
168 |         <code className="obsidianInline">
169 |           deno run --allow-net --unstable server.tsx
170 |         </code>
171 |       </p>
172 |       <h3>GraphQL Playground</h3>
173 |       <p>
174 |         To test our new GraphQL endpoint, head to{' '}
175 |         <a href="localhost:8000/graphql">localhost:8000/graphql</a> to test your
176 |         queries with GraphQL Playground. To learn more about this tool, check
177 |         out their{' '}
178 |         <a href="https://github.com/graphql/graphql-playground">GitHub repo</a>.
179 |       </p>
180 |       <h4>Recap & Next Up</h4>
181 |       <p>
182 |         In this chapter we set up a simple server with Oak and a GraphQL
183 |         endpoint with ObsidianRouter. Next, we'll explore ObsidianWrapper,{' '}
184 |         <code className="obsidianInline">obsidian</code>'s client
185 |         implementation, via a React app built with server-side rendering.
186 |       </p>
187 |     </div>
188 |   );
189 | };
190 | 
191 | export default GettingStarted;
192 | 


--------------------------------------------------------------------------------
/client/Components/DocPages/Basics/ServerSideRendering.tsx:
--------------------------------------------------------------------------------
  1 | import { React, CodeBlock, dracula } from '../../../../deps.ts';
  2 | 
  3 | const ServerSideRendering = (props: any) => {
  4 |   return (
  5 |     <div className="docContainer">
  6 |       <h1>Server-Side Rendering</h1>
  7 |       <p>
  8 |         In this chapter, we'll learn how to implement ObsidianWrapper,{' '}
  9 |         <code className="obsidianInline">obsidian</code>'s GraphQL client, in a
 10 |         React app built with server-side rendering.
 11 |       </p>
 12 |       <h2>ObsidianWrapper</h2>
 13 |       <p>
 14 |         Before we can discuss server-side rendering in Deno, we must first build
 15 |         out our client application. Setting up ObsidianWrapper is super simple:
 16 |         wrap your app with ObsidianWrapper and you are ready to start using{' '}
 17 |         <code className="obsidianInline">obsidian</code>'s caching capabilities!{' '}
 18 |       </p>
 19 |       <h3>Installation</h3>
 20 |       <p>
 21 |         Import React and ObsidianWrapper at your top-level component along with
 22 |         any child components:
 23 |       </p>
 24 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 25 |         {`// App.tsx
 26 | import React from 'https://dev.jspm.io/react';
 27 | import { ObsidianWrapper } from 'https://deno.land/x/obsidian/clientMod.ts';
 28 | import MainContainer from './MainContainer.tsx';`}
 29 |       </CodeBlock>
 30 |       <br />
 31 |       <h3>App Setup</h3>
 32 |       <p>
 33 |         Wrap your main container in ObsidianWrapper. This exposes the{' '}
 34 |         <code className="obsidianInline">useObsidian</code> hook, which will
 35 |         enable us to make GraphQL requests and access our cache from anywhere in
 36 |         our app.
 37 |       </p>
 38 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 39 |         {`// App.tsx
 40 | declare global {
 41 |   namespace JSX {
 42 |     interface IntrinsicElements {
 43 |       [elemName: string]: any;
 44 |     }
 45 |   }
 46 | }
 47 | 
 48 | const App = () => {
 49 |   return (
 50 |     <ObsidianWrapper>
 51 |       <MainContainer />
 52 |     </ObsidianWrapper>
 53 |   );
 54 | };
 55 | 
 56 | export default App;`}
 57 |       </CodeBlock>
 58 |       <br />
 59 |       <p>And let's set up our MainContainer with some static html:</p>
 60 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 61 |         {`// MainContainer.tsx
 62 | import React from 'https://dev.jspm.io/react';
 63 | 
 64 | const MainContainer = () => {
 65 |   return (
 66 |     <div>
 67 |       <h1>Obsidian Film Showcase</h1>
 68 |       <p>Check out our favorite movie by clicking the button below</p>
 69 |       <button>Get Movie</button>
 70 |     </div>
 71 |   );
 72 | };
 73 | 
 74 | export default MainContainer;`}
 75 |       </CodeBlock>
 76 |       <br />
 77 |       <h2>Serving Our App</h2>
 78 |       <p>
 79 |         Now that we've built a simple React app, let's utilize server-side
 80 |         rendering to send a pre-rendered version to the client.
 81 |       </p>
 82 |       <h3>Router Setup</h3>
 83 |       <p>We can create a router for our base path like so:</p>
 84 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
 85 |         {`// server.tsx
 86 | const router = new Router();
 87 | router.get('/', handlePage);
 88 | 
 89 | app.use(router.routes(), router.allowedMethods());`}
 90 |       </CodeBlock>
 91 |       <br />
 92 |       <h3>renderToString</h3>
 93 |       <p>
 94 |         At last, let's build our HTML file inside of our{' '}
 95 |         <code className="obsidianInline">handlePage</code> function, using
 96 |         ReactDomServer's <code className="obsidianInline">renderToString</code>{' '}
 97 |         method to insert our pre-rendered app inside the body. We'll also send
 98 |         our initialState object in the head, providing ObsidianWrapper all of
 99 |         the tools it needs to execute caching on the client-side:
100 |       </p>
101 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
102 |         {`// server.tsx
103 | import React from 'https://dev.jspm.io/react';
104 | import ReactDomServer from 'https://dev.jspm.io/react-dom/server';
105 | import App from './App.tsx';
106 | 
107 | function handlePage(ctx: any) {
108 |   try {
109 |     const body = (ReactDomServer as any).renderToString(<App />);
110 |     ctx.response.body = \`<!DOCTYPE html>
111 |       <html lang="en">
112 |       <head>
113 |         <meta charset="UTF-8">
114 |         <title>Obsidian Film Showcase</title>
115 |       </head>
116 |       <body>
117 |         <div id="root">\${body}</div>
118 |         <script src="/static/client.tsx" defer></script>
119 |       </body>
120 |       </html>\`;
121 |   } catch (error) {
122 |     console.error(error);
123 |   }
124 | }`}
125 |       </CodeBlock>
126 |       <br />
127 |       <h3>Hydration</h3>
128 |       <p>
129 |         We're almost there! In order to reattach all of our React functionality
130 |         to our pre-rendered app, we have to <i>hydrate</i> our root div. First,
131 |         let's create the client.tsx file that will contain the hydrate
132 |         functionality:
133 |       </p>
134 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
135 |         {`// client.tsx
136 | import React from 'https://dev.jspm.io/react';
137 | import ReactDom from 'https://dev.jspm.io/react-dom';
138 | import App from './App.tsx';
139 | 
140 | (ReactDom as any).hydrate(
141 |   <App />,
142 |   document.getElementById('root')
143 | );`}
144 |       </CodeBlock>
145 |       <br />
146 |       <p>
147 |         In the server, we'll use Deno's native emit method to wrap up all of
148 |         the React logic contained in our app, ready to be reattached to the DOM
149 |         via hydration:
150 |       </p>
151 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
152 |         {`// server.tsx
153 | const { files, diagnostics } = await Deno.emit('./client/client.tsx', {
154 |   bundle: 'esm',
155 | });`}
156 |       </CodeBlock>
157 |       <br />
158 |       <p>
159 |         Once our client code is bundled, we can send it to the client via
160 |         another router in our server:
161 |       </p>
162 |       <CodeBlock language="tsx" showLineNumbers={true} style={dracula}>
163 |         {`// server.tsx
164 | const hydrateRouter = new Router();
165 | 
166 | hydrateRouter.get('/static/client.js', (context) => {
167 |   context.response.headers.set('Content-Type', 'text/html');
168 |   context.response.body = files['deno:///bundle.js'];
169 | });
170 | 
171 | app.use(hydrateRouter.routes(), hydrateRouter.allowedMethods());`}
172 |       </CodeBlock>
173 |       <br />
174 |       <h3>Compiling</h3>
175 |       <p>
176 |         Just one more step before we're up and running: specify our compiler
177 |         options with a tsconfig.json file. To learn more about TypeScript
178 |         project configuration, check out the official documentation{' '}
179 |         <a href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html">
180 |           here
181 |         </a>
182 |         .
183 |       </p>
184 |       <CodeBlock language="json" showLineNumbers={true} style={dracula}>
185 |         {`// tsconfig.json
186 | {
187 |   "compilerOptions": {
188 |     "jsx": "react",
189 |     "target": "es6",
190 |     "module": "commonjs",
191 |     "lib": [
192 |       "DOM",
193 |       "ES2017",
194 |       "deno.ns"
195 |     ],
196 |     "strict": true,
197 |     "esModuleInterop": true,
198 |     "skipLibCheck": true,
199 |     "forceConsistentCasingInFileNames": true
200 |   }
201 | }`}
202 |       </CodeBlock>
203 |       <br />
204 |       <h3>Spin Up the Server</h3>
205 |       <p>
206 |         Our command to start our server has expanded now that we're bundling our
207 |         client.tsx file. The new command to start up our server looks like this:
208 |       </p>
209 |       <p>
210 |         <code className="obsidianInline">
211 |           deno run --allow-net --allow-read --unstable server.tsx -c
212 |           tsconfig.json
213 |         </code>
214 |       </p>
215 |       <h4>Recap & Next Up</h4>
216 |       <p>
217 |         In this chapter we set up a simple React app and implemented
218 |         ObsidianWrapper, enabling fetching and caching at a global level. We
219 |         utilized server-side rendering to send a pre-rendered version of our app
220 |         to the client. Next, we'll take a look at querying with{' '}
221 |         <code className="obsidianInline">obsidian</code> and the different
222 |         methods and options available.
223 |       </p>
224 |     </div>
225 |   );
226 | };
227 | 
228 | export default ServerSideRendering;
229 | 


--------------------------------------------------------------------------------
/client/Components/ObsidianLogo.tsx:
--------------------------------------------------------------------------------
  1 | import { React } from '../../deps.ts';
  2 | 
  3 | declare global {
  4 |   namespace JSX {
  5 |     interface IntrinsicElements {
  6 |       div: any;
  7 |       svg: any;
  8 |       path: any;
  9 |       rect: any;
 10 |     }
 11 |   }
 12 | }
 13 | // className="animate__animated animate__zoomInDown animate__slow"
 14 | // className="animate__animated animate__pulse animate__delay-2s"
 15 | 
 16 | const ObsidianLogo = (props: any) => {
 17 |   return (
 18 |     <div id='logo' fill='#242424'>
 19 |       <svg
 20 |         width='100%'
 21 |         height='100%'
 22 |         viewBox='0 0 536 395'
 23 |         // width='338'
 24 |         // height='287'
 25 |         // viewBox='0 0 338 287'
 26 |         fill='none'
 27 |         xmlns='http://www.w3.org/2000/svg'
 28 |       >
 29 |         {/* <rect width="100%" height="100%" fill="#242424"/> */}
 30 |         <path
 31 |           d='M222.5 85.6417C229.679 85.0627 242.829 83.368 258 85.6417C308.339 93.1858 381.647 112.852 339 93.6415C319.254 84.747 288.946 81.7493 258 85.6417C201.966 92.6897 144 115.142 144 115.142C144 115.142 191.5 88.1417 222.5 85.6417Z'
 32 |           fill='#f7f7f7'
 33 |         />
 34 |         <path
 35 |           d='M169.572 109.753C169.572 109.753 174.5 127.642 167.5 144.142C163.5 153.57 171.556 170.537 163.5 174.142C144.5 182.642 169.137 136.642 163.5 130.642C157.863 124.642 169.572 109.753 169.572 109.753Z'
 36 |           fill='#f7f7f7'
 37 |         />
 38 |         <path
 39 |           d='M201.923 156.376C224.903 164.073 219.144 133.962 224.977 147.623C230.81 161.283 178.154 164.683 172.461 170.24C166.767 175.798 178.942 148.678 201.923 156.376Z'
 40 |           fill='#f7f7f7'
 41 |         />
 42 |         <path
 43 |           d='M170 176.642C157.876 186.642 169 224.142 178.124 224.892C187.249 225.642 195.5 228.142 175.5 216.142C155.5 204.142 182.124 166.642 170 176.642Z'
 44 |           fill='#f7f7f7'
 45 |         />
 46 |         <path
 47 |           d='M196.948 174.642C184.7 167.732 205.628 186.637 218 203.142C225.325 212.913 221.812 223.142 227.948 223.142C244.448 223.142 233.948 223.142 229.948 213.142C225.948 203.142 216.448 185.642 196.948 174.642Z'
 48 |           fill='#f7f7f7'
 49 |         />
 50 |         <path
 51 |           d='M284 160.642C278.554 150.755 260.149 162.295 234.344 150.374C219.5 143.517 288 155.142 288 155.142L326.411 174.477C326.411 174.477 289.446 170.528 284 160.642Z'
 52 |           fill='#f7f7f7'
 53 |         />
 54 |         <path
 55 |           d='M224.025 99.3429C219.525 83.3429 231.025 112.343 235.525 124.343C240.025 136.343 227.525 142.843 227.525 142.843C227.525 142.843 228.525 115.343 224.025 99.3429Z'
 56 |           fill='#f7f7f7'
 57 |         />
 58 |         <path
 59 |           d='M307.955 197.568C310.455 193.318 307.955 183.068 304.955 177.568C301.955 172.068 300.455 193.068 296.455 188.068C292.455 183.068 253.455 178.068 260.955 183.068C268.455 188.068 305.455 201.818 307.955 197.568Z'
 60 |           fill='#f7f7f7'
 61 |         />
 62 |         <path
 63 |           className='animate__animated animate__bounce animate__delay-2s'
 64 |           id='frontLeg'
 65 |           d='M331.5 174.142C331.5 174.142 366.51 200.142 370.01 202.642C373.51 205.142 381.51 217.642 381.51 217.642C381.51 217.642 365.01 222.142 364.51 217.642C364.01 213.142 360.674 194.142 351 194.142C341.326 194.142 331.5 174.142 331.5 174.142Z'
 66 |           fill='#f7f7f7'
 67 |         />
 68 |         <path
 69 |           className='animate__animated animate__headShake animate__slow animate__delay-1s'
 70 |           d='M319 103.142C315.5 95.6416 339.594 110.176 342.438 112.819C345.282 115.462 336.253 144.005 339.345 155.634C342.438 167.262 335.47 170.962 333.16 167.262C330.849 163.562 336.253 134.723 336.253 121.276C336.253 107.83 322.5 110.642 319 103.142Z'
 71 |           fill='#f7f7f7'
 72 |         />
 73 |         <path
 74 |           className='animate__animated animate__headShake animate__slow animate__delay-1s'
 75 |           d='M363.963 155.642C370.611 154.758 372.139 155.028 374 156.642C376.481 158.793 383 159.642 383 159.642C383 159.642 381.872 163.481 378.5 162.142C375.975 161.139 366.532 157.071 363.963 158.142C356.724 161.158 348.657 167.955 340.273 174.142C331.89 180.328 348.452 157.704 363.963 155.642Z'
 76 |           fill='#f7f7f7'
 77 |         />
 78 |         <path
 79 |           className='animate__animated animate__headShake animate__slow animate__delay-1s'
 80 |           d='M377.318 124.601C375.733 120.144 382.5 128.642 384.5 135.642C386.5 142.642 386.283 164.655 384.5 159.642C382.717 154.628 380.262 144.429 381.5 140.642C382.738 136.854 378.903 129.057 377.318 124.601Z'
 81 |           fill='#f7f7f7'
 82 |         />
 83 |         <path
 84 |           className='animate__animated animate__headShake animate__slow animate__delay-1s'
 85 |           d='M354.363 104.144C343.404 99.2721 357.5 109.642 357.5 122.142C360 106.464 372.662 117.384 377.68 119.111C397.694 125.998 371.5 114.642 366.5 109.642C361.5 104.642 368.99 110.646 354.363 104.144Z'
 86 |           fill='#f7f7f7'
 87 |         />
 88 |         <path
 89 |           className='animate__animated animate__headShake animate__slow animate__delay-1s'
 90 |           d='M374.5 127.142C376 127.642 375.5 132.142 374.5 132.142C373.5 132.142 368.5 127.142 368 126.142C367.5 125.142 373 126.642 374.5 127.142Z'
 91 |           fill='#f7f7f7'
 92 |         />
 93 |         <path
 94 |           className='animate__animated animate__headShake animate__slow animate__delay-1s'
 95 |           d='M370.5 85.6416C370.5 85.6416 362.5 89.6416 359 92.1416C355.5 94.6416 353.5 100.142 355.5 102.642C357.5 105.142 370.5 85.6416 370.5 85.6416Z'
 96 |           fill='#f7f7f7'
 97 |         />
 98 |         <path
 99 |           className='animate__animated animate__headShake animate__slow animate__delay-1s'
100 |           d='M388 91.6415C388 91.6415 376 112.142 378 114.642C380 117.142 382.5 111.642 385 108.142C387.5 104.642 388 91.6415 388 91.6415Z'
101 |           fill='#f7f7f7'
102 |         />
103 |         <path
104 |           className='animate__animated animate__fadeIn animate__delay-3s animate__slower'
105 |           d='M155 258V290C155 293.573 153.853 296.347 151.56 298.32C149.32 300.24 145.933 301.2 141.4 301.2C136.92 301.2 133.533 300.24 131.24 298.32C128.947 296.347 127.8 293.573 127.8 290V258C127.8 254.427 128.92 251.68 131.16 249.76C133.453 247.787 136.84 246.8 141.32 246.8C145.853 246.8 149.267 247.787 151.56 249.76C153.853 251.68 155 254.427 155 258ZM149.4 290V258C149.4 253.733 146.733 251.6 141.4 251.6C136.067 251.6 133.4 253.733 133.4 258V290C133.4 294.267 136.067 296.4 141.4 296.4C146.733 296.4 149.4 294.267 149.4 290ZM169.781 248H181.861C186.021 248 189.168 248.987 191.301 250.96C193.488 252.933 194.581 255.68 194.581 259.2V264C194.581 268.533 192.688 271.44 188.901 272.72C193.221 273.893 195.381 276.853 195.381 281.6V288.8C195.381 292.373 194.315 295.147 192.181 297.12C190.048 299.04 186.875 300 182.661 300H169.781V248ZM189.781 288.8V281.6C189.781 279.573 189.168 277.947 187.941 276.72C186.715 275.44 184.955 274.8 182.661 274.8H175.381V295.2H182.661C187.408 295.2 189.781 293.067 189.781 288.8ZM188.981 264V259.2C188.981 257.173 188.368 255.6 187.141 254.48C185.915 253.36 184.155 252.8 181.861 252.8H175.381V270.8H181.861C184.208 270.8 185.968 270.187 187.141 268.96C188.368 267.733 188.981 266.08 188.981 264ZM235.612 290C235.612 297.467 231.105 301.2 222.092 301.2C213.079 301.2 208.572 297.467 208.572 290V283.2H214.172V290.32C214.172 292.24 214.839 293.733 216.172 294.8C217.505 295.867 219.479 296.4 222.092 296.4C224.705 296.4 226.679 295.867 228.012 294.8C229.345 293.733 230.012 292.293 230.012 290.48C230.012 288.613 229.799 287.147 229.372 286.08C228.999 284.96 228.199 283.787 226.972 282.56L212.892 268.8C211.239 267.147 210.092 265.547 209.452 264C208.865 262.4 208.572 260.4 208.572 258C208.572 254.427 209.665 251.68 211.852 249.76C214.092 247.787 217.452 246.8 221.932 246.8C230.519 246.8 234.812 250.533 234.812 258V264.8H229.212V257.68C229.212 255.76 228.572 254.267 227.292 253.2C226.065 252.133 224.199 251.6 221.692 251.6C219.185 251.6 217.292 252.133 216.012 253.2C214.785 254.267 214.172 255.733 214.172 257.6C214.172 259.467 214.359 260.933 214.732 262C215.105 263.067 215.932 264.187 217.212 265.36L231.532 279.12C233.079 280.827 234.145 282.48 234.732 284.08C235.319 285.627 235.612 287.6 235.612 290ZM255.616 300H250.016V248H255.616V300ZM284.458 300H271.578V248H284.458C288.618 248 291.765 248.987 293.898 250.96C296.085 252.933 297.178 255.68 297.178 259.2V288.8C297.178 292.373 296.111 295.147 293.978 297.12C291.845 299.04 288.671 300 284.458 300ZM291.578 288.8V259.2C291.578 257.173 290.965 255.6 289.738 254.48C288.511 253.36 286.751 252.8 284.458 252.8H277.178V295.2H284.458C289.205 295.2 291.578 293.067 291.578 288.8ZM317.569 300H311.969V248H317.569V300ZM358.331 300H355.931L353.851 294.88C352.731 296.8 351.265 298.347 349.451 299.52C347.638 300.64 345.638 301.2 343.451 301.2C335.771 301.2 331.931 297.467 331.931 290V282C331.931 274.533 335.771 270.8 343.451 270.8H352.731V257.68C352.731 255.76 352.118 254.267 350.891 253.2C349.665 252.133 347.851 251.6 345.451 251.6C340.705 251.6 338.331 253.627 338.331 257.68V262.4H332.731V258C332.731 254.427 333.771 251.68 335.851 249.76C337.985 247.787 341.185 246.8 345.451 246.8C349.718 246.8 352.918 247.787 355.051 249.76C357.238 251.68 358.331 254.427 358.331 258V300ZM352.731 275.6H343.451C341.211 275.6 339.665 276.16 338.811 277.28C337.958 278.4 337.531 279.973 337.531 282V290C337.531 292.027 337.958 293.6 338.811 294.72C339.665 295.84 341.211 296.4 343.451 296.4C345.691 296.4 347.771 295.547 349.691 293.84C351.611 292.08 352.625 290.347 352.731 288.64V275.6ZM379.131 300H373.531V248H375.931L377.931 253.2C380.491 248.933 384.038 246.8 388.571 246.8C396.411 246.8 400.331 250.533 400.331 258V300H394.731V258C394.731 255.973 394.278 254.4 393.371 253.28C392.518 252.16 390.918 251.6 388.571 251.6C386.225 251.6 384.065 252.507 382.091 254.32C380.118 256.133 379.131 257.893 379.131 259.6V300Z'
106 |           fill='#f7f7f7'
107 |         />
108 |       </svg>
109 |     </div>
110 |   );
111 | };
112 | 
113 | export default ObsidianLogo;
114 | 


--------------------------------------------------------------------------------
/client/Components/Team.jsx:
--------------------------------------------------------------------------------
  1 | import { React } from '../../deps.ts';
  2 | import TeamMember from './TeamMember.jsx';
  3 | 
  4 | const users = [
  5 | 	{
  6 | 		firstName: 'Raymond',
  7 | 		lastName: 'Ahn',
  8 | 		image:
  9 | 			'https://res.cloudinary.com/os-labs/image/upload/v1625079464/Profile_Pic_tcytta.jpg',
 10 | 		info: 'Raymond is a full-stack software engineer whose focus is on developing scalable and responsive programs through algorithmic optimization. During his spare time, he enjoys exploring new cuisines, game nights, fitness, traveling, and anything music-related.',
 11 | 		linkedin: 'https://www.linkedin.com/in/raymondahn/',
 12 | 		github: 'https://github.com/raymondcodes',
 13 | 	},
 14 | 	{
 15 | 		firstName: 'Kyung',
 16 | 		lastName: 'Lee',
 17 | 		image: 'https://res.cloudinary.com/os-labs/image/upload/v1625091906/IMG_1195_ptmaex.jpg',
 18 | 		info: 'Kyung is a software engineer who loves diving deep into technologies and building robust and efficient web applications. Apart from coding, his hobbies include watching MMA and eating tacos or anything spicy.',
 19 | 		linkedin: 'https://www.linkedin.com/in/kyung-lee-9414a6215/',
 20 | 		github: 'https://github.com/kyunglee1',
 21 | 	},
 22 | 	{
 23 | 		firstName: 'Justin',
 24 | 		lastName: 'McKay',
 25 | 		image:
 26 | 			'https://res.cloudinary.com/os-labs/image/upload/v1625079448/Screen_Shot_2021-06-28_at_11.24.08_AM_kyfviq.png',
 27 | 		info: 'Justin is a software engineer with a passion for solving complex problems and full stack system design. When not coding he enjoys music theory, fitness, and cold water.',
 28 | 		linkedin: 'https://www.linkedin.com/in/justinwmckay/',
 29 | 		github: 'https://github.com/justinwmckay',
 30 | 	},
 31 | 	{
 32 | 		firstName: 'Cameron',
 33 | 		lastName: 'Simmons',
 34 | 		image:
 35 | 			'https://res.cloudinary.com/os-labs/image/upload/v1625002810/3C1B71E4-CD2A-4D11-BBF0-B054E80BC132_1_201_a_afrjry.jpg',
 36 | 		info: 'Cameron is a full-stack software engineer who gets excited about fast, full-featured applications and staying up-to-date on the latest tech trends. In his spare time he enjoys producing music and being outdoors.',
 37 | 		linkedin: 'https://www.linkedin.com/in/camsimmons/',
 38 | 		github: 'https://github.com/cssim22',
 39 | 	},
 40 | 	{
 41 | 		firstName: 'Patrick',
 42 | 		lastName: 'Sullivan',
 43 | 		image:
 44 | 			'https://res.cloudinary.com/os-labs/image/upload/v1625079443/PJS-Passport_hv6kvx.jpg',
 45 | 		info: 'Patrick is a full-stack software engineer passionate about back-end tech.  He loves backpacking in the Pacific Northwest and the Rockies, growing vegetables, and living fully.',
 46 | 		linkedin: 'https://www.linkedin.com/in/patrick-j-m-sullivan/',
 47 | 		github: 'https://github.com/pjmsullivan',
 48 | 	},
 49 | 	{
 50 | 		firstName: 'Nhan',
 51 | 		lastName: 'Ly',
 52 | 		image:
 53 | 			'https://res.cloudinary.com/dyigtncwy/image/upload/v1618454676/Nhan_hlhra2.jpg',
 54 | 		info: 'Nhan is a software engineer that enjoys working on the entire stack and particularly enjoys playing with algorithms and learning about new technologies. When not coding Nhan usually listening to podcasts, reading, and taking (too long) breaks at the gym between sets.',
 55 | 		linkedin: 'https://www.linkedin.com/in/nhanly/',
 56 | 		github: 'https://github.com/NhanTLy',
 57 | 	},
 58 | 	{
 59 | 		firstName: 'Damon',
 60 | 		lastName: 'Alfaro',
 61 | 		image:
 62 | 			'https://res.cloudinary.com/dyigtncwy/image/upload/v1618454676/Damon_j1ehdh.jpg',
 63 | 		info: 'As a software engineer Damon enjoys databases and experimenting with emerging back-end technologies. He spends his free time backpacking, running, and traveling in his converted school bus RV.',
 64 | 		linkedin: 'https://www.linkedin.com/in/damon-alfaro-28530a74/',
 65 | 		github: 'https://github.com/djdalfaro',
 66 | 	},
 67 | 	{
 68 | 		firstName: 'Adam',
 69 | 		lastName: 'Wilson',
 70 | 		image:
 71 | 			'https://res.cloudinary.com/dyigtncwy/image/upload/v1618454676/Adam_ddx07d.jpg',
 72 | 		info: 'Adam is a full-stack software engineer originally from Cleveland, OH. He enjoys developing efficient and responsive web applications in addition to performant APIs, using React and Node.js. His favorite things include tacos and Irish wolfhounds.',
 73 | 		linkedin: 'https://www.linkedin.com/in/adam-wilson-houston/',
 74 | 		github: 'https://github.com/aswilson87',
 75 | 	},
 76 | 	{
 77 | 		firstName: 'Christy',
 78 | 		lastName: 'Gomez',
 79 | 		image:
 80 | 			'https://res.cloudinary.com/dyigtncwy/image/upload/v1618456773/IMG_1522_h9j9vi.jpg',
 81 | 		info: 'Christy is a software engineer focused on developing full stack applications with responsive design. She enjoys salsa dancing, trying new restaurants, unplanned traveling, and being eco-friendly.',
 82 | 		linkedin: 'https://www.linkedin.com/in/christy-gomez/',
 83 | 		github: 'https://github.com/christygomez',
 84 | 	},
 85 | 	{
 86 | 		firstName: 'Geovanni',
 87 | 		lastName: 'Alarcon',
 88 | 		image:
 89 | 			'https://res.cloudinary.com/dyigtncwy/image/upload/v1618459654/geo2_jxodpa.jpg',
 90 | 		info: 'Geo is a software engineer who loves building scalable and responsive software tools for the developer community. For fun, he enjoys traveling, and picnics.',
 91 | 		linkedin: 'https://www.linkedin.com/in/geo-alarcon/',
 92 | 		github: 'https://github.com/gealarcon',
 93 | 	},
 94 | 	{
 95 | 		firstName: 'Esma',
 96 | 		lastName: 'Sahraoui',
 97 | 		image:
 98 | 			'https://res.cloudinary.com/dsmiftdyz/image/upload/v1609992320/IMG_2063_htwead.jpg',
 99 | 		info: 'Esma is a full-stack software engineer with a passion for building servers as well as building responsive user interfaces for web applications. In her free time, she is driven by traveling to discover new cultures and kayaking across rivers.',
100 | 		linkedin: 'https://www.linkedin.com/in/esma-sahraoui/',
101 | 		github: 'https://github.com/EsmaShr',
102 | 	},
103 | 	{
104 | 		firstName: 'Derek',
105 | 		lastName: 'Miller',
106 | 		image:
107 | 			'https://res.cloudinary.com/dsmiftdyz/image/upload/v1609990785/Derek-headshot_ofzix3.jpg',
108 | 		info: 'Derek is a full-stack software engineer with a focus on the MERN tech stack. Outside of coding he loves boardgames and rock climbing.',
109 | 		linkedin: 'https://www.linkedin.com/in/dsymiller',
110 | 		github: 'https://github.com/dsymiller',
111 | 	},
112 | 	{
113 | 		firstName: 'Eric',
114 | 		lastName: 'Marcatoma',
115 | 		image:
116 | 			'https://res.cloudinary.com/dsmiftdyz/image/upload/v1609989762/AE476873-B676-4D4D-AF9A-548B386F7AD7_1_201_a_mxvsgu.jpg',
117 | 		info: 'Eric is a software engineer from NYC who focuses on front-end development. During his spare time he loves to go to the gym, play basketball and trying new restaurants in his city.',
118 | 		linkedin: 'https://www.linkedin.com/in/ericmarc159',
119 | 		github: 'https://github.com/ericmarc159',
120 | 	},
121 | 	{
122 | 		firstName: 'Lourent',
123 | 		lastName: 'Flores',
124 | 		image:
125 | 			'https://res.cloudinary.com/dsmiftdyz/image/upload/v1609990832/headshot_e4ijvy.png',
126 | 		info: 'Lourent is a full-stack software engineer specializing in React and Node.js, with a passion for learning new technologies and optimizing frontend web design.',
127 | 		linkedin: 'https://www.linkedin.com/in/lourent-flores/',
128 | 		github: 'https://github.com/lourentflores',
129 | 	},
130 | 	{
131 | 		firstName: 'Spencer',
132 | 		lastName: 'Stockton',
133 | 		image:
134 | 			'https://res.cloudinary.com/dsmiftdyz/image/upload/v1609994346/obsidianpic_gzxcqe.jpg',
135 | 		info: 'Spencer is a software engineer that enjoys working on solving complex problems across the entire tech stack.  When he is not programming, you can find him running on the East River or attending a concert around NYC.',
136 | 		linkedin: 'https://www.linkedin.com/in/spencer-stockton-643823a4/',
137 | 		github: 'https://github.com/tonstock',
138 | 	},
139 | 	{
140 | 		firstName: 'Alonso',
141 | 		lastName: 'Garza',
142 | 		image:
143 | 			'https://res.cloudinary.com/dkxftbzuu/image/upload/v1600479739/Obsidian/WhatsApp_Image_2020-09-18_at_8.38.09_PM_pgshgj.jpg',
144 | 
145 | 		info: 'Alonso Garza is a full-stack software engineer from Austin, Texas. Alonso specializes in React, Node.js, Express, and is passionate about solving complex problems and working in teams. Outside of coding, he loves to travel around Latin America and scuba dive!',
146 | 		linkedin: 'https://www.linkedin.com/in/e-alonso-garza/',
147 | 		github: 'https://github.com/Alonsog66',
148 | 	},
149 | 	{
150 | 		firstName: 'Travis',
151 | 		lastName: 'Frank',
152 | 		image:
153 | 			'https://res.cloudinary.com/dkxftbzuu/image/upload/v1600462593/Obsidian/image_1_c7sggv.jpg',
154 | 		info: 'Travis is a software engineer at Place Exchange focused on building scalable backend solutions. When he isn’t coding he enjoys playing board games, eating copious amounts of sushi, and conducting pit orchestras.',
155 | 		linkedin: 'https://linkedin.com/in/travis-m-frank',
156 | 		github: 'https://github.com/TravisFrankMTG',
157 | 	},
158 | 	{
159 | 		firstName: 'Matt',
160 | 		lastName: 'Meigs',
161 | 		image:
162 | 			'https://res.cloudinary.com/dkxftbzuu/image/upload/v1600811069/Obsidian/IMG_2543_vrhknw.jpg',
163 | 		info: 'Matt is a software engineer interested in clear and responsive frontend web design and algorithmic optimization through the full stack. He’s an expat from the Deep South, a lover of far-flung travel, and a former Broadway actor.',
164 | 		linkedin: 'https://www.linkedin.com/in/matt-meigs/',
165 | 		github: 'https://github.com/mmeigs',
166 | 	},
167 | 	{
168 | 		firstName: 'Burak',
169 | 		lastName: 'Caliskan',
170 | 		image:
171 | 			'https://res.cloudinary.com/dkxftbzuu/image/upload/v1600462610/Obsidian/92C676E9-C9C4-4CFB-80A9-876B30C94732_copy_vfsnjl.jpg',
172 | 		info: 'Burak is a software engineer focused on developing full stack applications. Curious and constantly finding ways to use new ideas to solve problems and provide delight. For fun, he enjoys outdoor activities, traveling, and exploring new cuisines.',
173 | 		linkedin: 'https://www.linkedin.com/in/burakcaliskan/',
174 | 		github: 'https://github.com/CaliskanBurak',
175 | 	},
176 | ];
177 | 
178 | const teamMembers = users.map((user, i) => (
179 | 	<TeamMember key={`TeamMember-${i}`} user={user} />
180 | ));
181 | function Team() {
182 | 	return (
183 | 		<section className="team-section text-center">
184 | 			<h1>Contributors</h1>
185 | 			<div className="row">{teamMembers}</div>
186 | 		</section>
187 | 	);
188 | }
189 | 
190 | export default Team;
191 | 


--------------------------------------------------------------------------------
/client/static/prism.js:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.21.0
2 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
3 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,M={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof W?new W(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function t(e,r){var a,n;switch(r=r||{},M.util.type(e)){case"Object":if(n=M.util.objId(e),r[n])return r[n];for(var i in a={},r[n]=a,e)e.hasOwnProperty(i)&&(a[i]=t(e[i],r));return a;case"Array":return n=M.util.objId(e),r[n]?r[n]:(a=[],r[n]=a,e.forEach(function(e,n){a[n]=t(e,r)}),a);default:return e}},getLanguage:function(e){for(;e&&!c.test(e.className);)e=e.parentElement;return e?(e.className.match(c)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var n=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(e.stack)||[])[1];if(n){var t=document.getElementsByTagName("script");for(var r in t)if(t[r].src==n)return t[r]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{extend:function(e,n){var t=M.util.clone(M.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(t,e,n,r){var a=(r=r||M.languages)[t],i={};for(var l in a)if(a.hasOwnProperty(l)){if(l==e)for(var o in n)n.hasOwnProperty(o)&&(i[o]=n[o]);n.hasOwnProperty(l)||(i[l]=a[l])}var s=r[t];return r[t]=i,M.languages.DFS(M.languages,function(e,n){n===s&&e!=t&&(this[e]=i)}),i},DFS:function e(n,t,r,a){a=a||{};var i=M.util.objId;for(var l in n)if(n.hasOwnProperty(l)){t.call(n,l,n[l],r||l);var o=n[l],s=M.util.type(o);"Object"!==s||a[i(o)]?"Array"!==s||a[i(o)]||(a[i(o)]=!0,e(o,t,l,a)):(a[i(o)]=!0,e(o,t,null,a))}}},plugins:{},highlightAll:function(e,n){M.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};M.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),M.hooks.run("before-all-elements-highlight",r);for(var a,i=0;a=r.elements[i++];)M.highlightElement(a,!0===n,r.callback)},highlightElement:function(e,n,t){var r=M.util.getLanguage(e),a=M.languages[r];e.className=e.className.replace(c,"").replace(/\s+/g," ")+" language-"+r;var i=e.parentElement;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(c,"").replace(/\s+/g," ")+" language-"+r);var l={element:e,language:r,grammar:a,code:e.textContent};function o(e){l.highlightedCode=e,M.hooks.run("before-insert",l),l.element.innerHTML=l.highlightedCode,M.hooks.run("after-highlight",l),M.hooks.run("complete",l),t&&t.call(l.element)}if(M.hooks.run("before-sanity-check",l),!l.code)return M.hooks.run("complete",l),void(t&&t.call(l.element));if(M.hooks.run("before-highlight",l),l.grammar)if(n&&u.Worker){var s=new Worker(M.filename);s.onmessage=function(e){o(e.data)},s.postMessage(JSON.stringify({language:l.language,code:l.code,immediateClose:!0}))}else o(M.highlight(l.code,l.grammar,l.language));else o(M.util.encode(l.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};return M.hooks.run("before-tokenize",r),r.tokens=M.tokenize(r.code,r.grammar),M.hooks.run("after-tokenize",r),W.stringify(M.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new i;return I(a,a.head,e),function e(n,t,r,a,i,l){for(var o in r)if(r.hasOwnProperty(o)&&r[o]){var s=r[o];s=Array.isArray(s)?s:[s];for(var u=0;u<s.length;++u){if(l&&l.cause==o+","+u)return;var c=s[u],g=c.inside,f=!!c.lookbehind,h=!!c.greedy,d=0,v=c.alias;if(h&&!c.pattern.global){var p=c.pattern.toString().match(/[imsuy]*$/)[0];c.pattern=RegExp(c.pattern.source,p+"g")}for(var m=c.pattern||c,y=a.next,k=i;y!==t.tail&&!(l&&k>=l.reach);k+=y.value.length,y=y.next){var b=y.value;if(t.length>n.length)return;if(!(b instanceof W)){var x=1;if(h&&y!=t.tail.prev){m.lastIndex=k;var w=m.exec(n);if(!w)break;var A=w.index+(f&&w[1]?w[1].length:0),P=w.index+w[0].length,S=k;for(S+=y.value.length;S<=A;)y=y.next,S+=y.value.length;if(S-=y.value.length,k=S,y.value instanceof W)continue;for(var E=y;E!==t.tail&&(S<P||"string"==typeof E.value);E=E.next)x++,S+=E.value.length;x--,b=n.slice(k,S),w.index-=k}else{m.lastIndex=0;var w=m.exec(b)}if(w){f&&(d=w[1]?w[1].length:0);var A=w.index+d,O=w[0].slice(d),P=A+O.length,L=b.slice(0,A),N=b.slice(P),j=k+b.length;l&&j>l.reach&&(l.reach=j);var C=y.prev;L&&(C=I(t,C,L),k+=L.length),z(t,C,x);var _=new W(o,g?M.tokenize(O,g):O,v,O);y=I(t,C,_),N&&I(t,y,N),1<x&&e(n,t,r,y.prev,k,{cause:o+","+u,reach:j})}}}}}}(e,a,n,a.head,0),function(e){var n=[],t=e.head.next;for(;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=M.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=M.hooks.all[e];if(t&&t.length)for(var r,a=0;r=t[a++];)r(n)}},Token:W};function W(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function I(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function z(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;(n.next=r).prev=n,e.length-=a}if(u.Prism=M,W.stringify=function n(e,t){if("string"==typeof e)return e;if(Array.isArray(e)){var r="";return e.forEach(function(e){r+=n(e,t)}),r}var a={type:e.type,content:n(e.content,t),tag:"span",classes:["token",e.type],attributes:{},language:t},i=e.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),M.hooks.run("wrap",a);var l="";for(var o in a.attributes)l+=" "+o+'="'+(a.attributes[o]||"").replace(/"/g,"&quot;")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+l+">"+a.content+"</"+a.tag+">"},!u.document)return u.addEventListener&&(M.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),t=n.language,r=n.code,a=n.immediateClose;u.postMessage(M.highlight(r,M.languages[t],t)),a&&u.close()},!1)),M;var e=M.util.currentScript();function t(){M.manual||M.highlightAll()}if(e&&(M.filename=e.src,e.hasAttribute("data-manual")&&(M.manual=!0)),!M.manual){var r=document.readyState;"loading"===r||"interactive"===r&&e&&e.defer?document.addEventListener("DOMContentLoaded",t):window.requestAnimationFrame?window.requestAnimationFrame(t):window.setTimeout(t,16)}return M}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
4 | Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var n={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};n["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var t={};t[a]={pattern:RegExp("(<__[^]*?>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,function(){return a}),"i"),lookbehind:!0,greedy:!0,inside:n},Prism.languages.insertBefore("markup","cdata",t)}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
5 | !function(e){var s=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+s.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+s.source+"$"),alias:"url"}}},selector:RegExp("[^{}\\s](?:[^{};\"']|"+s.source+")*?(?=\\s*\\{)"),string:{pattern:s,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var t=e.languages.markup;t&&(t.tag.addInlined("style","css"),e.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:t.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:e.languages.css}},alias:"language-css"}},t.tag))}(Prism);
6 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
7 | Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|(?:get|set)(?=\s*[\[$\w\xA0-\uFFFF])|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,function:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-flags":/[a-z]+$/,"regex-delimiter":/^\/|\/$/}},"function-variable":{pattern:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.js=Prism.languages.javascript;
8 | 


--------------------------------------------------------------------------------
/client/static/style.css:
--------------------------------------------------------------------------------
  1 | .app,
  2 | #root {
  3 |   /* font-size: 14px; */
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   height: 100vh;
  7 |   width: 100vw;
  8 | }
  9 | 
 10 | body {
 11 |   font-family: 'Nunito Sans', sans-serif !important;
 12 | }
 13 | 
 14 | #root {
 15 |   background-image: url(https://images.unsplash.com/photo-1597871119022-42906cd7c9b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
 16 |   background-repeat: no-repeat;
 17 |   background-size: cover;
 18 | 
 19 |   display: flex;
 20 |   justify-content: space-between;
 21 |   align-items: center;
 22 | }
 23 | 
 24 | .app {
 25 |   display: flex;
 26 |   justify-content: space-between;
 27 |   align-items: center;
 28 |   background: rgba(0, 0, 0, 0.6);
 29 | }
 30 | 
 31 | .pinkATags a {
 32 |   color: #e83e8c !important;
 33 |   text-decoration: none;
 34 | }
 35 | 
 36 | a:hover {
 37 |   text-decoration: underline;
 38 | }
 39 | 
 40 | .navBar {
 41 |   display: flex;
 42 |   flex-direction: column;
 43 |   justify-content: space-around;
 44 | 
 45 |   width: 20%;
 46 |   height: 100%;
 47 |   max-width: 140px;
 48 |   max-height: 600px;
 49 |   padding: 3rem 0.5rem;
 50 | }
 51 | 
 52 | .navBtn {
 53 |   border-radius: 10px;
 54 |   /* // border: '1px solid #EBEBEC', */
 55 |   background-color: rgb(53, 54, 56);
 56 |   border: none;
 57 |   border-style: none;
 58 |   padding: 2% 3%;
 59 |   height: 20%;
 60 |   max-height: 100px;
 61 |   min-height: 60px;
 62 |   animation: fadeInDown;
 63 |   animation-duration: 1s;
 64 |   cursor: pointer;
 65 | }
 66 | /* Demo Styling */
 67 | 
 68 | .pre-block {
 69 |   width: 60%;
 70 |   border: 1px solid black;
 71 |   display: block;
 72 |   background-color: #fff;
 73 |   padding: 10px;
 74 |   margin: 1vw;
 75 | }
 76 | /* .pre-block, */
 77 | .code-block {
 78 |   border: 1px solid black;
 79 |   display: block;
 80 |   padding: 20px;
 81 |   margin: 1vw;
 82 | }
 83 | 
 84 | .code-block p {
 85 |   margin-top: 1rem;
 86 | }
 87 | 
 88 | #demo-block {
 89 |   padding: 2vh;
 90 |   display: flex;
 91 |   justify-content: center;
 92 |   align-items: center;
 93 |   flex-direction: column;
 94 |   font-size: 1vw;
 95 | }
 96 | 
 97 | #demo-block label {
 98 |   margin: 0 10px;
 99 | }
100 | 
101 | .optionsForCountry {
102 |   margin-top: 5%;
103 | }
104 | 
105 | pre {
106 |   white-space: pre-wrap; /* Since CSS 2.1 */
107 |   word-wrap: break-word; /* Internet Explorer 5.5+ */
108 | }
109 | 
110 | .demoInput {
111 |   display: flex;
112 |   justify-content: center;
113 |   width: 100%;
114 | }
115 | 
116 | .query-timer {
117 |   font-size: 1.7rem;
118 | }
119 | 
120 | .buildQueryTitle {
121 |   text-align: center;
122 |   font-size: 3em;
123 | }
124 | 
125 | .showQuery,
126 | .buildQuery {
127 |   display: inline-block;
128 | }
129 | 
130 | #stretchQuery {
131 |   margin: auto;
132 |   width: 80%;
133 | }
134 | 
135 | .buildQuery {
136 |   color: rgb(20, 20, 20);
137 |   border-radius: 10px;
138 |   background-color: rgb(212, 212, 212);
139 |   width: 40%;
140 |   padding: 2%;
141 | }
142 | 
143 | #fetchBtn {
144 |   margin-top: 5%;
145 | }
146 | 
147 | .showQuery {
148 |   width: 40%;
149 | }
150 | 
151 | #code-black {
152 |   background-color: rgb(20, 20, 20);
153 |   color: white;
154 | }
155 | 
156 | #code-yellow {
157 |   background-color: rgb(20, 20, 20);
158 |   color: rgb(255, 255, 138);
159 | }
160 | 
161 | #code-pink {
162 |   line-height: 0.5rem;
163 |   background-color: rgb(20, 20, 20);
164 |   color: pink;
165 | }
166 | #demo-form {
167 |   padding: 1rem;
168 |   justify-content: center;
169 |   align-items: center;
170 | }
171 | /* .navBtn:active {
172 |   border: none;
173 | } */
174 | .navBtn:focus {
175 |   border: none;
176 | }
177 | .navBtnText {
178 |   font-size: 1em;
179 |   color: white;
180 | }
181 | 
182 | .navBtn svg {
183 |   width: 40%;
184 | }
185 | 
186 | .navBarGitLink,
187 | .navBarDenoLink {
188 |   position: absolute;
189 |   display: none;
190 |   visibility: hidden;
191 | }
192 | 
193 | .mainContainer {
194 |   width: 70vw;
195 |   height: 94vh;
196 |   background-color: rgba(219, 219, 219, 0.514);
197 |   margin: 3vh 0 3vh 0;
198 |   border-radius: 10px;
199 |   overflow-y: auto;
200 |   overflow-x: hidden;
201 | }
202 | 
203 | .demoContainer {
204 |   width: 100vw;
205 |   height: 94vh;
206 |   background-color: rgba(219, 219, 219, 0.514);
207 |   margin: 0 10vh 0 0;
208 |   border-radius: 10px;
209 |   overflow-y: hidden;
210 |   overflow-x: hidden;
211 |   border: none;
212 |   /* margin-top: 3vh;
213 |   margin-right: 140px; */
214 | }
215 | .mainContainerLogo {
216 |   width: 70vw;
217 |   height: 94vh;
218 |   /* background-color: rgba(219, 219, 219, 0.514); */
219 |   margin: 3vh 0 3vh 0;
220 |   border-radius: 10px;
221 |   overflow: hidden;
222 | }
223 | /* SIDEBAR STYLING */
224 | 
225 | .sidebar {
226 |   display: flex;
227 |   flex-direction: column;
228 |   justify-content: space-around;
229 |   background-color: rgba(219, 219, 219, 0.1);
230 |   /* border-color: rgba(252, 121, 121, 0.5); */
231 |   border-radius: 10px;
232 |   width: 20%;
233 |   height: 94%;
234 |   margin: auto 15px;
235 | }
236 | 
237 | .homePage {
238 |   display: flex;
239 |   justify-content: center;
240 |   align-items: center;
241 |   /* background-color: #242424; */
242 |   height: 100%;
243 |   width: 100%;
244 | }
245 | 
246 | div#logo {
247 |   width: 75%;
248 |   height: 75%;
249 |   position: absolute;
250 |   top: 0;
251 |   left: 0;
252 |   right: 0;
253 |   bottom: 0;
254 |   margin: auto;
255 |   z-index: 0;
256 | }
257 | 
258 | #logo svg {
259 |   border-radius: 10px;
260 | }
261 | 
262 | /* path#frontLeg {
263 |   animation: bounce;
264 |   animation-duration: 2s;
265 | }
266 | 
267 | path.bullHead {
268 |   animation: headShake;
269 |   animation-duration: 2s;
270 | } */
271 | .sidebar a:hover {
272 |   text-decoration: none;
273 | }
274 | 
275 | .sidebar .codeLinks .codeLinkDiv::before {
276 |   content: '';
277 |   display: block;
278 |   height: 0.5px;
279 |   width: 0%;
280 |   background-color: #f7f7f7;
281 |   opacity: 90%;
282 |   border-radius: 5px;
283 |   z-index: 1;
284 |   position: absolute;
285 |   transition: all ease-in-out 350ms;
286 | }
287 | 
288 | .sidebar .codeLinks .codeLinkDiv:hover::before {
289 |   width: 16%;
290 | }
291 | 
292 | .sidebar .codeLinks {
293 |   height: 15%;
294 |   max-height: 60px;
295 |   display: flex;
296 |   flex-direction: column;
297 |   align-items: center;
298 |   justify-content: space-around;
299 | }
300 | 
301 | .sidebar .codeLinks .codeLinkDiv {
302 |   display: flex;
303 |   justify-content: center;
304 |   align-content: center;
305 | }
306 | 
307 | .sidebar .codeLinks img {
308 |   width: 20px;
309 |   height: 20px;
310 |   display: inline-block;
311 |   z-index: 2;
312 | }
313 | 
314 | #denoImg {
315 |   width: 26px;
316 |   height: 26px;
317 | }
318 | 
319 | #githubLogo {
320 |   margin-right: 3%;
321 | }
322 | 
323 | .sidebar .codeLinks h4 {
324 |   display: inline-block;
325 |   margin: 0;
326 |   color: #f7f7f7;
327 |   z-index: 2;
328 |   margin-left: 1%;
329 | }
330 | 
331 | .sidebar .sideContent {
332 |   background-color: rgba(219, 219, 219, 0.25);
333 |   height: 85%;
334 |   overflow-y: scroll;
335 |   padding: 0.6rem;
336 | }
337 | 
338 | /* SIDEBAR SOCIAL ACCOUNT BUTTONS  */
339 | .social-button {
340 |   display: flex;
341 |   justify-content: center;
342 |   padding-top: 50px;
343 | }
344 | 
345 | .fab {
346 |   color: black;
347 |   margin: 5px;
348 | }
349 | 
350 | .fab:hover {
351 |   color: #fff;
352 | }
353 | 
354 | .user-info {
355 |   text-align: center;
356 |   padding: 20px 3px 0 3px;
357 | }
358 | 
359 | /* Carousel Styling! */
360 | #about::before,
361 | #about::after {
362 |   box-sizing: border-box;
363 |   position: relative;
364 | }
365 | 
366 | #about {
367 |   height: 100%;
368 |   width: 100%;
369 |   margin: 0;
370 |   padding: 0;
371 |   font-size: 3vmin;
372 |   display: flex;
373 |   justify-content: center;
374 |   align-items: center;
375 | }
376 | 
377 | .slides {
378 |   display: grid;
379 | }
380 | 
381 | .slides > .slide {
382 |   grid-area: 1 / -1;
383 | }
384 | 
385 | .slides > button {
386 |   appearance: none;
387 |   background: transparent;
388 |   border: none;
389 |   color: black;
390 |   position: relative;
391 |   font-size: 5rem;
392 |   height: 0rem;
393 |   top: 30%;
394 |   transition: opacity 0.3s;
395 |   opacity: 0.7;
396 |   z-index: 5;
397 | }
398 | 
399 | .slides > button:hover {
400 |   opacity: 1;
401 | }
402 | 
403 | .slides > button:focus {
404 |   outline: none;
405 | }
406 | 
407 | .slides > button:first-child {
408 |   left: -50%;
409 | }
410 | 
411 | .slides > button:last-child {
412 |   right: -50%;
413 | }
414 | 
415 | .slideContent {
416 |   /* width: 15vw; */
417 |   height: 25vh;
418 |   background-size: cover;
419 |   background-position: center center;
420 |   background-repeat: no-repeat;
421 |   border-radius: 30px;
422 | 
423 |   transition: transform 0.5s ease-in-out;
424 |   opacity: 0.7;
425 | }
426 | 
427 | .slideContentInner {
428 |   text-align: center;
429 |   transform-style: preserve-3d;
430 |   transform: translateZ(2rem);
431 |   transition: opacity 0.3s linear;
432 |   text-shadow: 0 0.1rem 1rem #000;
433 |   opacity: 0;
434 | }
435 | 
436 | .slideContentInner .slideSubtitle,
437 | .slideContentInner .slideTitle {
438 |   font-size: 2rem;
439 |   font-weight: bold;
440 |   color: #fff;
441 |   letter-spacing: 0.2ch;
442 |   text-transform: uppercase;
443 |   margin: 0;
444 | }
445 | 
446 | .slide[data-active] {
447 |   z-index: 2;
448 |   pointer-events: auto;
449 | }
450 | 
451 | .slide[data-active] .slideContentInner {
452 |   opacity: 1;
453 | }
454 | 
455 | .slide[data-active] .slideContent {
456 |   --x: calc(var(--px) - 0.5);
457 |   --y: calc(var(--py) - 0.5);
458 |   opacity: 1;
459 |   transform: perspective(1000px);
460 | }
461 | 
462 | .slide[data-active] .slideContent:hover {
463 |   transition: none;
464 |   transform: perspective(1000px) rotateY(calc(var(--x) * 20deg))
465 |     rotateX(calc(var(--y) * -20deg));
466 | }
467 | 
468 | .tab {
469 |   margin-left: 30px;
470 | }
471 | 
472 | .nested {
473 |   margin: 10px 0 0 30px;
474 | }
475 | 
476 | .p {
477 |   margin-bottom: 1rem;
478 | }
479 | 
480 | .key {
481 |   color: rgb(0, 139, 23);
482 | }
483 | 
484 | /* STYLES DOCS PAGE */
485 | 
486 | #docsTOC .list-group-item.active {
487 |   color: rgba(5, 5, 5, 1) !important;
488 |   border-color: rgb(80, 250, 123) !important;
489 |   background-color: rgb(80, 250, 123) !important;
490 | }
491 | 
492 | #docsTOC .list-group-item {
493 |   color: #fff !important;
494 |   background-color: rgba(5, 5, 5, 0.7) !important;
495 | }
496 | 
497 | .docContainer {
498 |   padding: 2rem 3rem;
499 |   width: 100%;
500 |   height: 100%;
501 |   overflow: scroll;
502 |   background-color: rgba(219, 219, 219, 0.7);
503 | }
504 | 
505 | .docContainer h1,
506 | .mainContainer h1 {
507 |   text-align: center;
508 |   font-size: 3.5rem;
509 |   font-weight: 700;
510 |   margin-bottom: 1.5rem;
511 | }
512 | 
513 | .docContainer h2 {
514 |   font-size: 3rem;
515 |   font-weight: 700;
516 |   margin-bottom: 1.5rem;
517 | }
518 | 
519 | .docContainer h3 {
520 |   font-size: 2rem;
521 |   font-weight: 700;
522 |   margin-bottom: 1.5rem;
523 | }
524 | 
525 | .docContainer h3 {
526 |   font-size: 1.5rem;
527 |   font-weight: 700;
528 |   margin-bottom: 1.5rem;
529 | }
530 | 
531 | .docContainer p {
532 |   font-size: 1rem;
533 |   font-weight: 400;
534 |   margin-bottom: 1.5rem;
535 | }
536 | 
537 | .docContainer .docAside {
538 |   border: 2px;
539 |   border-style: dashed;
540 |   padding: 1rem;
541 | }
542 | 
543 | .docContainer code {
544 |   font-family: monospace !important;
545 | }
546 | 
547 | .obsidianInline {
548 |   font-size: 100%;
549 |   color: #212529 !important;
550 | }
551 | 
552 | .mission {
553 |   font-style: italic;
554 |   font-size: 1.5rem;
555 |   padding-left: 2rem;
556 |   padding-right: 2rem;
557 | }
558 | 
559 | .token.operator {
560 |   background: transparent !important;
561 | }
562 | 
563 | .apiLink {
564 |   margin-top: 30px;
565 | }
566 | 
567 | .apiLink p {
568 |   color: rgb(246, 246, 246);
569 | }
570 | 
571 | .apiLink a {
572 |   color: rgb(35, 35, 255);
573 |   text-emphasis-style: bold;
574 | }
575 | 
576 | #mobile-collapse {
577 |   display: none;
578 |   opacity: 0;
579 | }
580 | 
581 | /* phone sizing */
582 | 
583 | @media only screen and (max-width: 700px) {
584 |   html {
585 |     font-size: 1em;
586 |   }
587 | 
588 |   .app {
589 |     flex-direction: column;
590 |     justify-content: flex-start;
591 |     align-items: center;
592 |   }
593 | 
594 |   .mainContainerLogo {
595 |     height: 60vh;
596 |   }
597 | 
598 |   .navBar {
599 |     flex-direction: row;
600 |     width: 100%;
601 |     height: 11%;
602 |     z-index: 10;
603 |     max-width: 100%;
604 |     justify-content: center;
605 |     align-items: center;
606 |     margin-right: 0.5vw;
607 |     padding: 0;
608 |     margin-top: 5%;
609 |   }
610 | 
611 |   .navBtn,
612 |   #demo-form {
613 |     max-width: 15%;
614 |     z-index: 10;
615 |     padding: 0;
616 |   }
617 | 
618 |   .mainContainer {
619 |     width: 90%;
620 |     height: 65%;
621 |     margin: 0 5%;
622 |   }
623 |   .demoContainer {
624 |     margin: 0;
625 |   }
626 | 
627 |   .sidebar {
628 |     position: absolute;
629 |     flex-direction: row;
630 |     justify-content: flex-start;
631 |     z-index: 1;
632 |     width: 94%;
633 |     height: 20%;
634 |     max-width: 94%;
635 |     margin: 15px auto;
636 |     background-color: rgba(0, 0, 0, 0.9);
637 |     transition: height 1s, top 1s;
638 |   }
639 | 
640 |   #mobile-collapse {
641 |     width: 6vh;
642 |     height: 6vh;
643 |     background-color: rgba(0, 0, 0, 0);
644 |     color: white;
645 |     display: block;
646 |     position: relative;
647 |     border-radius: 20px;
648 |     /* margin-top: 1%; */
649 |     margin: 1% 3% 1% 1%;
650 |     opacity: 1;
651 |     border: none;
652 |   }
653 | 
654 |   #mobile-collapse:focus {
655 |     outline: none;
656 |   }
657 | 
658 |   /* .sideContent {
659 |     padding: 0;
660 |   } */
661 | 
662 |   .codeLinks {
663 |     position: absolute;
664 |     display: none;
665 |     visibility: hidden;
666 |   }
667 | 
668 |   .navBarGitLink {
669 |     margin-left: 7%;
670 |   }
671 | 
672 |   .navBarGitLink,
673 |   .navBarDenoLink {
674 |     position: relative;
675 |     display: inline-block;
676 |     visibility: visible;
677 |     max-width: 10%;
678 |   }
679 | 
680 |   #githubLogoTop {
681 |     width: 70%;
682 |   }
683 | 
684 |   .navBarDenoLink img {
685 |     width: 90%;
686 |   }
687 | 
688 |   .social-button {
689 |     padding-top: 0;
690 |   }
691 |   /* fix font size in Docs */
692 |   .docContainer {
693 |     padding: 2rem 1rem;
694 |   }
695 | 
696 |   .docContainer h1,
697 |   .mainContainer h1 {
698 |     font-size: 2.5rem;
699 |   }
700 | 
701 |   .docContainer h2 {
702 |     font-size: 2rem;
703 |   }
704 | 
705 |   .docContainer h3 {
706 |     font-size: 1.8rem;
707 |   }
708 | 
709 |   .docContainer h3 {
710 |     font-size: 1.5rem;
711 |   }
712 | 
713 |   .docContainer p {
714 |     font-size: 1rem;
715 |   }
716 | }
717 | 
718 | .container {
719 |   max-width: 1280px;
720 |   margin-left: 5%;
721 |   margin-right: 5%;
722 | }
723 | 
724 | .team {
725 |   text-align: center;
726 | }
727 | 
728 | .team h2 {
729 |   margin-bottom: 8%;
730 | }
731 | 
732 | .team-wrapper {
733 |   margin: 5%;
734 |   display: flex;
735 |   justify-content: center;
736 |   color: white;
737 | }
738 | 
739 | .developerBio {
740 |   margin-bottom: 1.5rem;
741 |   text-align: center;
742 | }
743 | 
744 | .developerName {
745 |   margin: 0;
746 | }
747 | 
748 | .devGrid {
749 |   display: flex;
750 |   flex-wrap: wrap;
751 |   justify-content: space-evenly;
752 |   padding: 1.5vw;
753 | }
754 | 
755 | .developerImage {
756 |   width: 80%;
757 |   border-radius: 50%;
758 |   opacity: 0.7;
759 | }
760 | 
761 | a.githubLink {
762 |   color: white;
763 |   text-decoration: none;
764 | }
765 | 


--------------------------------------------------------------------------------