.features {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
}

.featureSvg {
  height: 200px;
  width: 200px;
}


/**
 * =============================
 * Global Styles & Infima Overrides
 * =============================
 */

 :root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/**
 * =============================
 * Desktop Layout (min-width: 997px)
 * =============================
 */
@media (min-width: 997px) {
  /* Sticky sidebar for KB pages */
  body.kb-page .theme-doc-sidebar-container {
    position: sticky;
    top: 18.75rem; /* 3.75rem navbar + 15rem hero */
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-right: 0px;
    width: 300px;
  }
    /* Move sidebar to the right */
    .theme-doc-sidebar-container {
      margin-left: 122px; /* 2 inches = 192px */
    }
  /* Shift main content to match sidebar position */
  .theme-doc-main-container {
    margin-left: 122px; /* Same value for clean alignment */
  }
/* Darken sidebar menu items */
.menu__link {
  color: #1a1a1a; /* Or any darker hex value you prefer */
  font-weight: 500;
}
   /* Adjust sidebar alignment if needed */
   body.kb-page .sidebar_njMd {
    padding-top: 4.5rem;
  }

/**
 * =============================
 * Global Padding for Non-KB Pages
 * =============================
 */
 html body:not(.kb-page) div[id="__docusaurus_skipToContent_fallback"][class*="main-wrapper"] {
  padding-top: 1.0rem;
  margin-top: 0;
}

  /* Adjust main content for KB layout */
  body.kb-page .theme-doc-main-container {
    padding-top: 19.00rem; /* navbar + hero + spacing */
  }

  /* Reset unwanted padding on wrapper */
  body.kb-page .main-wrapper {
    padding-top: 0;
    margin-top: 0;
  }

  /* Sidebar inner structure */
  .theme-doc-sidebar-container .menu,
  .theme-doc-sidebar-container .menu__list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: auto;
  }
/* Shrink main content title */
.theme-doc-markdown h1,
.theme-doc-title {
  font-size: 1.5rem;
  font-weight: 700;
}
.theme-doc-markdown h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 1.25rem;
}


  .docMainContainer {
    display: flex;
    flex: 1;
  }

  nav.navbar.navbar--fixed-top {
    position: fixed;
    top: 0;
    z-index: 20;
    width: 100%;
  }
  /* src/css/custom.css */
.navbar__item {
  margin-left: 6px;
}
.navbar__item:first-child {
  margin-left: 0;
}

/* custom.css */
.blogPostTitle {
  color: white;
  margin-top: 12rem;
  padding-top: 4rem;
  margin-bottom: 17rem;
}
/* Add spacing above the blog post title */
article .markdown h1 {
  margin-top: 2rem; /* Adjust as needed */

}
article .markdown h2 {
  margin-top: 12rem; /* Adjust as needed */
padding-top: 10rem;
}
.centered-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
}


}

pre {
  background-color: #1A1A1A; /* or #000000 if you want pure black */
  color: #FFFFFF;
  padding: 1.2rem;
  border-radius: 8px;
  overflow-x: auto;
}

pre code {
  background: none !important; /* force it */
  color: inherit;
  font-size: 0.95rem;
  padding: 0; /* remove inner padding */
  display: block; /* stretch full width */
}




/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}


"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[849],{6164:e=>{e.exports=JSON.parse('{"version":{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Placeholder","href":"/docs/placeholder","docId":"placeholder","unlisted":false}]},"docs":{"placeholder":{"id":"placeholder","title":"Placeholder","description":"","sidebar":"tutorialSidebar"}}}}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[209],{569:(e,t,a)=>{a.d(t,{A:()=>U});var s=a(6540),n=a(4164),i=a(1410),r=a(6682),l=a(539),o=a(3750),c=a(3115),m=a(9303),d=a(4848);function u(e){let{year:t,yearGroupHeadingClassName:a,children:s}=e;return(0,d.jsxs)("div",{role:"group",children:[(0,d.jsx)(m.A,{as:"h3",className:a,children:t}),s]})}function g(e){let{items:t,yearGroupHeadingClassName:a,ListComponent:s}=e;if((0,c.p)().blog.sidebar.groupByYear){const e=(0,o.Ki)(t);return(0,d.jsx)(d.Fragment,{children:e.map((e=>{let[t,n]=e;return(0,d.jsx)(u,{year:t,yearGroupHeadingClassName:a,children:(0,d.jsx)(s,{items:n})},t)}))})}return(0,d.jsx)(s,{items:t})}const h=(0,s.memo)(g),p="sidebar_re4s",f="sidebarItemTitle_pO2u",b="sidebarItemList_Yudw",x="sidebarItem__DBe",j="sidebarItemLink_mo7H",N="sidebarItemLinkActive_I1ZP",v="yearGroupHeading_rMGB",C=e=>{let{items:t}=e;return(0,d.jsx)(o.OU,{items:t,ulClassName:(0,n.A)(b,"clean-list"),liClassName:x,linkClassName:j,linkActiveClassName:N})};function k(e){let{sidebar:t}=e;const a=(0,o.Gx)(t.items);return(0,d.jsx)("aside",{className:"col col--3",children:(0,d.jsxs)("nav",{className:(0,n.A)(p,"thin-scrollbar"),"aria-label":(0,l.T)({id:"theme.blog.sidebar.navAriaLabel",message:"Blog recent posts navigation",description:"The ARIA label for recent posts in the blog sidebar"}),children:[(0,d.jsx)("div",{className:(0,n.A)(f,"margin-bottom--md"),children:t.title}),(0,d.jsx)(h,{items:a,ListComponent:C,yearGroupHeadingClassName:v})]})})}const A=(0,s.memo)(k);var y=a(3065);const P="yearGroupHeading_QT03",_=e=>{let{items:t}=e;return(0,d.jsx)(o.OU,{items:t,ulClassName:"menu__list",liClassName:"menu__list-item",linkClassName:"menu__link",linkActiveClassName:"menu__link--active"})};function w(e){let{sidebar:t}=e;const a=(0,o.Gx)(t.items);return(0,d.jsx)(h,{items:a,ListComponent:_,yearGroupHeadingClassName:P})}function B(e){return(0,d.jsx)(y.GX,{component:w,props:e})}const G=(0,s.memo)(B);function O(e){let{sidebar:t}=e;const a=(0,r.l)();return t?.items.length?"mobile"===a?(0,d.jsx)(G,{sidebar:t}):(0,d.jsx)(A,{sidebar:t}):null}function U(e){const{sidebar:t,toc:a,children:s,...r}=e,l=t&&t.items.length>0;return(0,d.jsx)(i.A,{...r,children:(0,d.jsx)("div",{className:"container margin-vert--lg",children:(0,d.jsxs)("div",{className:"row",children:[(0,d.jsx)(O,{sidebar:t}),(0,d.jsx)("main",{className:(0,n.A)("col",{"col--7":l,"col--9 col--offset-1":!l}),children:s}),a&&(0,d.jsx)("div",{className:"col col--2",children:a})]})})})}},3750:(e,t,a)=>{a.d(t,{in:()=>c,OU:()=>P,Ki:()=>y,kJ:()=>f,x:()=>l,e7:()=>m,J_:()=>b,Gx:()=>A});var s=a(6540),n=a(6849),i=a(9062),r=a(4848);function l(){const e=(0,i.A)(),t=e?.data?.blogMetadata;if(!t)throw new Error("useBlogMetadata() can't be called on the current route because the blog metadata could not be found in route context");return t}const o=s.createContext(null);function c(e){let{children:t,content:a,isBlogPostPage:n=!1}=e;const i=function(e){let{content:t,isBlogPostPage:a}=e;return(0,s.useMemo)((()=>({metadata:t.metadata,frontMatter:t.frontMatter,assets:t.assets,toc:t.toc,isBlogPostPage:a})),[t,a])}({content:a,isBlogPostPage:n});return(0,r.jsx)(o.Provider,{value:i,children:t})}function m(){const e=(0,s.useContext)(o);if(null===e)throw new n.dV("BlogPostProvider");return e}var d=a(9030),u=a(797);const g=e=>new Date(e).toISOString();function h(e){const t=e.map(x);return{author:1===t.length?t[0]:t}}function p(e,t,a){return e?{image:j({imageUrl:t(e,{absolute:!0}),caption:`title image for the blog post: ${a}`})}:{}}function f(e){const{siteConfig:t}=(0,u.A)(),{withBaseUrl:a}=(0,d.hH)(),{metadata:{blogDescription:s,blogTitle:n,permalink:i}}=e,r=`${t.url}${i}`;return{"@context":"https://schema.org","@type":"Blog","@id":r,mainEntityOfPage:r,headline:n,description:s,blogPost:e.items.map((e=>function(e,t,a){const{assets:s,frontMatter:n,metadata:i}=e,{date:r,title:l,description:o,lastUpdatedAt:c}=i,m=s.image??n.image,d=n.keywords??[],u=`${t.url}${i.permalink}`,f=c?g(c):void 0;return{"@type":"BlogPosting","@id":u,mainEntityOfPage:u,url:u,headline:l,name:l,description:o,datePublished:r,...f?{dateModified:f}:{},...h(i.authors),...p(m,a,l),...d?{keywords:d}:{}}}(e.content,t,a)))}}function b(){const e=l(),{assets:t,metadata:a}=m(),{siteConfig:s}=(0,u.A)(),{withBaseUrl:n}=(0,d.hH)(),{date:i,title:r,description:o,frontMatter:c,lastUpdatedAt:f}=a,b=t.image??c.image,x=c.keywords??[],j=f?g(f):void 0,N=`${s.url}${a.permalink}`;return{"@context":"https://schema.org","@type":"BlogPosting","@id":N,mainEntityOfPage:N,url:N,headline:r,name:r,description:o,datePublished:i,...j?{dateModified:j}:{},...h(a.authors),...p(b,n,r),...x?{keywords:x}:{},isPartOf:{"@type":"Blog","@id":`${s.url}${e.blogBasePath}`,name:e.blogTitle}}}function x(e){return{"@type":"Person",...e.name?{name:e.name}:{},...e.title?{description:e.title}:{},...e.url?{url:e.url}:{},...e.email?{email:e.email}:{},...e.imageURL?{image:e.imageURL}:{}}}function j(e){let{imageUrl:t,caption:a}=e;return{"@type":"ImageObject","@id":t,url:t,contentUrl:t,caption:a}}var N=a(6347),v=a(6289),C=a(1861),k=a(214);function A(e){const{pathname:t}=(0,N.zy)();return(0,s.useMemo)((()=>e.filter((e=>function(e,t){return!(e.unlisted&&!(0,k.ys)(e.permalink,t))}(e,t)))),[e,t])}function y(e){const t=(0,C.$z)(e,(e=>`${new Date(e.date).getFullYear()}`)),a=Object.entries(t);return a.reverse(),a}function P(e){let{items:t,ulClassName:a,liClassName:s,linkClassName:n,linkActiveClassName:i}=e;return(0,r.jsx)("ul",{className:a,children:t.map((e=>(0,r.jsx)("li",{className:s,children:(0,r.jsx)(v.A,{isNavLink:!0,to:e.permalink,className:n,activeClassName:i,children:e.title})},e.permalink)))})}},3953:(e,t,a)=>{a.d(t,{A:()=>l});a(6540);var s=a(4164),n=a(6289);const i={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var r=a(4848);function l(e){let{permalink:t,label:a,count:l,description:o}=e;return(0,r.jsxs)(n.A,{href:t,title:o,className:(0,s.A)(i.tag,l?i.tagWithCount:i.tagRegular),children:[a,l&&(0,r.jsx)("span",{children:l})]})}},4941:(e,t,a)=>{a.r(t),a.d(t,{default:()=>f});a(6540);var s=a(4164),n=a(539);const i=()=>(0,n.T)({id:"theme.tags.tagsPageTitle",message:"Tags",description:"The title of the tag list page"});var r=a(1082),l=a(204),o=a(569),c=a(3953),m=a(9303);const d={tag:"tag_Nnez"};var u=a(4848);function g(e){let{letterEntry:t}=e;return(0,u.jsxs)("article",{children:[(0,u.jsx)(m.A,{as:"h2",id:t.letter,children:t.letter}),(0,u.jsx)("ul",{className:"padding--none",children:t.tags.map((e=>(0,u.jsx)("li",{className:d.tag,children:(0,u.jsx)(c.A,{...e})},e.permalink)))}),(0,u.jsx)("hr",{})]})}function h(e){let{tags:t}=e;const a=function(e){const t={};return Object.values(e).forEach((e=>{const a=function(e){return e[0].toUpperCase()}(e.label);t[a]??=[],t[a].push(e)})),Object.entries(t).sort(((e,t)=>{let[a]=e,[s]=t;return a.localeCompare(s)})).map((e=>{let[t,a]=e;return{letter:t,tags:a.sort(((e,t)=>e.label.localeCompare(t.label)))}}))}(t);return(0,u.jsx)("section",{className:"margin-vert--lg",children:a.map((e=>(0,u.jsx)(g,{letterEntry:e},e.letter)))})}var p=a(7220);function f(e){let{tags:t,sidebar:a}=e;const n=i();return(0,u.jsxs)(r.e3,{className:(0,s.A)(l.G.wrapper.blogPages,l.G.page.blogTagsListPage),children:[(0,u.jsx)(r.be,{title:n}),(0,u.jsx)(p.A,{tag:"blog_tags_list"}),(0,u.jsxs)(o.A,{sidebar:a,children:[(0,u.jsx)(m.A,{as:"h1",children:n}),(0,u.jsx)(h,{tags:t})]})]})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[672],{7839:(o,e,i)=>{i.r(e),i.d(e,{default:()=>l});i(6540);var r=i(1410),t=i(4848);function l(){return(0,t.jsx)(r.A,{title:"Portfolio",children:(0,t.jsxs)("div",{style:{padding:"20px"},children:[(0,t.jsx)("h1",{children:"Portfolio"}),(0,t.jsx)("p",{children:"This is my portfolio page. Add your portfolio content here."})]})})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[401],{665:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var s=n(4164),a=n(7289),i=n(204),l=n(2362),o=n(4848);function r(e){let{className:t}=e;return(0,o.jsx)(l.A,{type:"caution",title:(0,o.jsx)(a.Rc,{}),className:(0,s.A)(t,i.G.common.unlistedBanner),children:(0,o.jsx)(a.Uh,{})})}function c(e){return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.AE,{}),(0,o.jsx)(r,{...e})]})}},1021:(e,t,n)=>{n.d(t,{A:()=>b});var s=n(6540),a=n(3115);function i(e){const t=e.map((e=>({...e,parentIndex:-1,children:[]}))),n=Array(7).fill(-1);t.forEach(((e,t)=>{const s=n.slice(2,e.level);e.parentIndex=Math.max(...s),n[e.level]=t}));const s=[];return t.forEach((e=>{const{parentIndex:n,...a}=e;n>=0?t[n].children.push(a):s.push(a)})),s}function l(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:s}=e;return t.flatMap((e=>{const t=l({toc:e.children,minHeadingLevel:n,maxHeadingLevel:s});return function(e){return e.level>=n&&e.level<=s}(e)?[{...e,children:t}]:t}))}function o(e){const t=e.getBoundingClientRect();return t.top===t.bottom?o(e.parentNode):t}function r(e,t){let{anchorTopOffset:n}=t;const s=e.find((e=>o(e).top>=n));if(s){return function(e){return e.top>0&&e.bottom<window.innerHeight/2}(o(s))?s:e[e.indexOf(s)-1]??null}return e[e.length-1]??null}function c(){const e=(0,s.useRef)(0),{navbar:{hideOnScroll:t}}=(0,a.p)();return(0,s.useEffect)((()=>{e.current=t?0:document.querySelector(".navbar").clientHeight}),[t]),e}function d(e){const t=(0,s.useRef)(void 0),n=c();(0,s.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:s,linkActiveClassName:a,minHeadingLevel:i,maxHeadingLevel:l}=e;function o(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(s),o=function(e){let{minHeadingLevel:t,maxHeadingLevel:n}=e;const s=[];for(let a=t;a<=n;a+=1)s.push(`h${a}.anchor`);return Array.from(document.querySelectorAll(s.join()))}({minHeadingLevel:i,maxHeadingLevel:l}),c=r(o,{anchorTopOffset:n.current}),d=e.find((e=>c&&c.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,n){n?(t.current&&t.current!==e&&t.current.classList.remove(a),e.classList.add(a),t.current=e):e.classList.remove(a)}(e,e===d)}))}return document.addEventListener("scroll",o),document.addEventListener("resize",o),o(),()=>{document.removeEventListener("scroll",o),document.removeEventListener("resize",o)}}),[e,n])}var u=n(6289),m=n(4848);function h(e){let{toc:t,className:n,linkClassName:s,isChild:a}=e;return t.length?(0,m.jsx)("ul",{className:a?void 0:n,children:t.map((e=>(0,m.jsxs)("li",{children:[(0,m.jsx)(u.A,{to:`#${e.id}`,className:s??void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,m.jsx)(h,{isChild:!0,toc:e.children,className:n,linkClassName:s})]},e.id)))}):null}const v=s.memo(h);function b(e){let{toc:t,className:n="table-of-contents table-of-contents__left-border",linkClassName:o="table-of-contents__link",linkActiveClassName:r,minHeadingLevel:c,maxHeadingLevel:u,...h}=e;const b=(0,a.p)(),x=c??b.tableOfContents.minHeadingLevel,g=u??b.tableOfContents.maxHeadingLevel,f=function(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:a}=e;return(0,s.useMemo)((()=>l({toc:i(t),minHeadingLevel:n,maxHeadingLevel:a})),[t,n,a])}({toc:t,minHeadingLevel:x,maxHeadingLevel:g});return d((0,s.useMemo)((()=>{if(o&&r)return{linkClassName:o,linkActiveClassName:r,minHeadingLevel:x,maxHeadingLevel:g}}),[o,r,x,g])),(0,m.jsx)(v,{toc:f,className:n,linkClassName:o,...h})}},1865:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var s=n(4164),a=n(6289),i=n(4848);function l(e){const{permalink:t,title:n,subLabel:l,isNext:o}=e;return(0,i.jsxs)(a.A,{className:(0,s.A)("pagination-nav__link",o?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t,children:[l&&(0,i.jsx)("div",{className:"pagination-nav__sublabel",children:l}),(0,i.jsx)("div",{className:"pagination-nav__label",children:n})]})}},2075:(e,t,n)=>{n.d(t,{A:()=>d});n(6540);var s=n(4164),a=n(7289),i=n(204),l=n(2362),o=n(4848);function r(e){let{className:t}=e;return(0,o.jsx)(l.A,{type:"caution",title:(0,o.jsx)(a.Yh,{}),className:(0,s.A)(t,i.G.common.draftBanner),children:(0,o.jsx)(a.TT,{})})}var c=n(665);function d(e){let{metadata:t}=e;const{unlisted:n,frontMatter:s}=t;return(0,o.jsxs)(o.Fragment,{children:[(n||s.unlisted)&&(0,o.jsx)(c.A,{}),s.draft&&(0,o.jsx)(r,{})]})}},3953:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var s=n(4164),a=n(6289);const i={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var l=n(4848);function o(e){let{permalink:t,label:n,count:o,description:r}=e;return(0,l.jsxs)(a.A,{href:t,title:r,className:(0,s.A)(i.tag,o?i.tagWithCount:i.tagRegular),children:[n,o&&(0,l.jsx)("span",{children:o})]})}},5418:(e,t,n)=>{n.r(t),n.d(t,{default:()=>ae});var s=n(6540),a=n(1082),i=n(6849),l=n(4848);const o=s.createContext(null);function r(e){let{children:t,content:n}=e;const a=function(e){return(0,s.useMemo)((()=>({metadata:e.metadata,frontMatter:e.frontMatter,assets:e.assets,contentTitle:e.contentTitle,toc:e.toc})),[e])}(n);return(0,l.jsx)(o.Provider,{value:a,children:t})}function c(){const e=(0,s.useContext)(o);if(null===e)throw new i.dV("DocProvider");return e}function d(){const{metadata:e,frontMatter:t,assets:n}=c();return(0,l.jsx)(a.be,{title:e.title,description:e.description,keywords:t.keywords,image:n.image??t.image})}var u=n(4164),m=n(6682),h=n(539),v=n(1865);function b(e){const{previous:t,next:n}=e;return(0,l.jsxs)("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,h.T)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"}),children:[t&&(0,l.jsx)(v.A,{...t,subLabel:(0,l.jsx)(h.A,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc",children:"Previous"})}),n&&(0,l.jsx)(v.A,{...n,subLabel:(0,l.jsx)(h.A,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc",children:"Next"}),isNext:!0})]})}function x(){const{metadata:e}=c();return(0,l.jsx)(b,{previous:e.previous,next:e.next})}var g=n(797),f=n(6289),p=n(6942),j=n(204),A=n(6351),N=n(1858);const L={unreleased:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,l.jsx)(h.A,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:t,versionLabel:(0,l.jsx)("b",{children:n.label})},children:"This is unreleased documentation for {siteTitle} {versionLabel} version."})},unmaintained:function(e){let{siteTitle:t,versionMetadata:n}=e;return(0,l.jsx)(h.A,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:t,versionLabel:(0,l.jsx)("b",{children:n.label})},children:"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained."})}};function C(e){const t=L[e.versionMetadata.banner];return(0,l.jsx)(t,{...e})}function _(e){let{versionLabel:t,to:n,onClick:s}=e;return(0,l.jsx)(h.A,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:t,latestVersionLink:(0,l.jsx)("b",{children:(0,l.jsx)(f.A,{to:n,onClick:s,children:(0,l.jsx)(h.A,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label",children:"latest version"})})})},children:"For up-to-date documentation, see the {latestVersionLink} ({versionLabel})."})}function T(e){let{className:t,versionMetadata:n}=e;const{siteConfig:{title:s}}=(0,g.A)(),{pluginId:a}=(0,p.vT)({failfast:!0}),{savePreferredVersionName:i}=(0,A.g1)(a),{latestDocSuggestion:o,latestVersionSuggestion:r}=(0,p.HW)(a),c=o??(d=r).docs.find((e=>e.id===d.mainDocId));var d;return(0,l.jsxs)("div",{className:(0,u.A)(t,j.G.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert",children:[(0,l.jsx)("div",{children:(0,l.jsx)(C,{siteTitle:s,versionMetadata:n})}),(0,l.jsx)("div",{className:"margin-top--md",children:(0,l.jsx)(_,{versionLabel:r.label,to:c.path,onClick:()=>i(r.name)})})]})}function k(e){let{className:t}=e;const n=(0,N.r)();return n.banner?(0,l.jsx)(T,{className:t,versionMetadata:n}):null}function H(e){let{className:t}=e;const n=(0,N.r)();return n.badge?(0,l.jsx)("span",{className:(0,u.A)(t,j.G.docs.docVersionBadge,"badge badge--secondary"),children:(0,l.jsx)(h.A,{id:"theme.docs.versionBadge.label",values:{versionLabel:n.label},children:"Version: {versionLabel}"})}):null}var M=n(6239),y=n(5783);function B(){const{metadata:e}=c(),{editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s,tags:a}=e,i=a.length>0,o=!!(t||n||s);return i||o?(0,l.jsxs)("footer",{className:(0,u.A)(j.G.docs.docFooter,"docusaurus-mt-lg"),children:[i&&(0,l.jsx)("div",{className:(0,u.A)("row margin-top--sm",j.G.docs.docFooterTagsRow),children:(0,l.jsx)("div",{className:"col",children:(0,l.jsx)(M.A,{tags:a})})}),o&&(0,l.jsx)(y.A,{className:(0,u.A)("margin-top--sm",j.G.docs.docFooterEditMetaRow),editUrl:t,lastUpdatedAt:n,lastUpdatedBy:s})]}):null}var I=n(3535),w=n(1021);const E={tocCollapsibleButton:"tocCollapsibleButton_TO0P",tocCollapsibleButtonExpanded:"tocCollapsibleButtonExpanded_MG3E"};function V(e){let{collapsed:t,...n}=e;return(0,l.jsx)("button",{type:"button",...n,className:(0,u.A)("clean-btn",E.tocCollapsibleButton,!t&&E.tocCollapsibleButtonExpanded,n.className),children:(0,l.jsx)(h.A,{id:"theme.TOCCollapsible.toggleButtonLabel",description:"The label used by the button on the collapsible TOC component",children:"On this page"})})}const O={tocCollapsible:"tocCollapsible_ETCw",tocCollapsibleContent:"tocCollapsibleContent_vkbj",tocCollapsibleExpanded:"tocCollapsibleExpanded_sAul"};function R(e){let{toc:t,className:n,minHeadingLevel:s,maxHeadingLevel:a}=e;const{collapsed:i,toggleCollapsed:o}=(0,I.u)({initialState:!0});return(0,l.jsxs)("div",{className:(0,u.A)(O.tocCollapsible,!i&&O.tocCollapsibleExpanded,n),children:[(0,l.jsx)(V,{collapsed:i,onClick:o}),(0,l.jsx)(I.N,{lazy:!0,className:O.tocCollapsibleContent,collapsed:i,children:(0,l.jsx)(w.A,{toc:t,minHeadingLevel:s,maxHeadingLevel:a})})]})}const G={tocMobile:"tocMobile_ITEo"};function S(){const{toc:e,frontMatter:t}=c();return(0,l.jsx)(R,{toc:e,minHeadingLevel:t.toc_min_heading_level,maxHeadingLevel:t.toc_max_heading_level,className:(0,u.A)(j.G.docs.docTocMobile,G.tocMobile)})}var F=n(7959);function P(){const{toc:e,frontMatter:t}=c();return(0,l.jsx)(F.A,{toc:e,minHeadingLevel:t.toc_min_heading_level,maxHeadingLevel:t.toc_max_heading_level,className:j.G.docs.docTocDesktop})}var U=n(9303),D=n(4522);function z(e){let{children:t}=e;const n=function(){const{metadata:e,frontMatter:t,contentTitle:n}=c();return t.hide_title||void 0!==n?null:e.title}();return(0,l.jsxs)("div",{className:(0,u.A)(j.G.docs.docMarkdown,"markdown"),children:[n&&(0,l.jsx)("header",{children:(0,l.jsx)(U.A,{as:"h1",children:n})}),(0,l.jsx)(D.A,{children:t})]})}var W=n(3751),q=n(214),Y=n(9030);function $(e){return(0,l.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,l.jsx)("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"})})}const Q={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function X(){const e=(0,Y.Ay)("/");return(0,l.jsx)("li",{className:"breadcrumbs__item",children:(0,l.jsx)(f.A,{"aria-label":(0,h.T)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e,children:(0,l.jsx)($,{className:Q.breadcrumbHomeIcon})})})}const Z={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function J(e){let{children:t,href:n,isLast:s}=e;const a="breadcrumbs__link";return s?(0,l.jsx)("span",{className:a,itemProp:"name",children:t}):n?(0,l.jsx)(f.A,{className:a,href:n,itemProp:"item",children:(0,l.jsx)("span",{itemProp:"name",children:t})}):(0,l.jsx)("span",{className:a,children:t})}function K(e){let{children:t,active:n,index:s,addMicrodata:a}=e;return(0,l.jsxs)("li",{...a&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},className:(0,u.A)("breadcrumbs__item",{"breadcrumbs__item--active":n}),children:[t,(0,l.jsx)("meta",{itemProp:"position",content:String(s+1)})]})}function ee(){const e=(0,W.OF)(),t=(0,q.Dt)();return e?(0,l.jsx)("nav",{className:(0,u.A)(j.G.docs.docBreadcrumbs,Z.breadcrumbsContainer),"aria-label":(0,h.T)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"}),children:(0,l.jsxs)("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList",children:[t&&(0,l.jsx)(X,{}),e.map(((t,n)=>{const s=n===e.length-1,a="category"===t.type&&t.linkUnlisted?void 0:t.href;return(0,l.jsx)(K,{active:s,index:n,addMicrodata:!!a,children:(0,l.jsx)(J,{href:a,isLast:s,children:t.label})},n)}))]})}):null}var te=n(2075);const ne={docItemContainer:"docItemContainer_Djhp",docItemCol:"docItemCol_VOVn"};function se(e){let{children:t}=e;const n=function(){const{frontMatter:e,toc:t}=c(),n=(0,m.l)(),s=e.hide_table_of_contents,a=!s&&t.length>0;return{hidden:s,mobile:a?(0,l.jsx)(S,{}):void 0,desktop:!a||"desktop"!==n&&"ssr"!==n?void 0:(0,l.jsx)(P,{})}}(),{metadata:s}=c();return(0,l.jsxs)("div",{className:"row",children:[(0,l.jsxs)("div",{className:(0,u.A)("col",!n.hidden&&ne.docItemCol),children:[(0,l.jsx)(te.A,{metadata:s}),(0,l.jsx)(k,{}),(0,l.jsxs)("div",{className:ne.docItemContainer,children:[(0,l.jsxs)("article",{children:[(0,l.jsx)(ee,{}),(0,l.jsx)(H,{}),n.mobile,(0,l.jsx)(z,{children:t}),(0,l.jsx)(B,{})]}),(0,l.jsx)(x,{})]})]}),n.desktop&&(0,l.jsx)("div",{className:"col col--3",children:n.desktop})]})}function ae(e){const t=`docs-doc-id-${e.content.metadata.id}`,n=e.content;return(0,l.jsx)(r,{content:e.content,children:(0,l.jsxs)(a.e3,{className:t,children:[(0,l.jsx)(d,{}),(0,l.jsx)(se,{children:(0,l.jsx)(n,{})})]})})}},6239:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var s=n(4164),a=n(539),i=n(3953);const l={tags:"tags_jXut",tag:"tag_QGVx"};var o=n(4848);function r(e){let{tags:t}=e;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("b",{children:(0,o.jsx)(a.A,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list",children:"Tags:"})}),(0,o.jsx)("ul",{className:(0,s.A)(l.tags,"padding--none","margin-left--sm"),children:t.map((e=>(0,o.jsx)("li",{className:l.tag,children:(0,o.jsx)(i.A,{...e})},e.permalink)))})]})}},7289:(e,t,n)=>{n.d(t,{AE:()=>r,Rc:()=>l,TT:()=>d,Uh:()=>o,Yh:()=>c});n(6540);var s=n(539),a=n(7143),i=n(4848);function l(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function o(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function r(){return(0,i.jsx)(a.A,{children:(0,i.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function c(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function d(){return(0,i.jsx)(s.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}},7959:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var s=n(4164),a=n(1021);const i={tableOfContents:"tableOfContents_bqdL",docItemContainer:"docItemContainer_F8PC"};var l=n(4848);const o="table-of-contents__link toc-highlight",r="table-of-contents__link--active";function c(e){let{className:t,...n}=e;return(0,l.jsx)("div",{className:(0,s.A)(i.tableOfContents,"thin-scrollbar",t),children:(0,l.jsx)(a.A,{...n,linkClassName:o,linkActiveClassName:r})})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[407],{6067:t=>{t.exports=JSON.parse('{"author":{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun","count":3},"listMetadata":{"permalink":"/blog/authors/yangshun","page":1,"postsPerPage":10,"totalPages":1,"totalCount":3,"blogDescription":"Blog","blogTitle":"Blog"}}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[61],{665:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var i=t(4164),a=t(7289),s=t(204),l=t(2362),r=t(4848);function c(e){let{className:n}=e;return(0,r.jsx)(l.A,{type:"caution",title:(0,r.jsx)(a.Rc,{}),className:(0,i.A)(n,s.G.common.unlistedBanner),children:(0,r.jsx)(a.Uh,{})})}function o(e){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.AE,{}),(0,r.jsx)(c,{...e})]})}},1021:(e,n,t)=>{t.d(n,{A:()=>v});var i=t(6540),a=t(3115);function s(e){const n=e.map((e=>({...e,parentIndex:-1,children:[]}))),t=Array(7).fill(-1);n.forEach(((e,n)=>{const i=t.slice(2,e.level);e.parentIndex=Math.max(...i),t[e.level]=n}));const i=[];return n.forEach((e=>{const{parentIndex:t,...a}=e;t>=0?n[t].children.push(a):i.push(a)})),i}function l(e){let{toc:n,minHeadingLevel:t,maxHeadingLevel:i}=e;return n.flatMap((e=>{const n=l({toc:e.children,minHeadingLevel:t,maxHeadingLevel:i});return function(e){return e.level>=t&&e.level<=i}(e)?[{...e,children:n}]:n}))}function r(e){const n=e.getBoundingClientRect();return n.top===n.bottom?r(e.parentNode):n}function c(e,n){let{anchorTopOffset:t}=n;const i=e.find((e=>r(e).top>=t));if(i){return function(e){return e.top>0&&e.bottom<window.innerHeight/2}(r(i))?i:e[e.indexOf(i)-1]??null}return e[e.length-1]??null}function o(){const e=(0,i.useRef)(0),{navbar:{hideOnScroll:n}}=(0,a.p)();return(0,i.useEffect)((()=>{e.current=n?0:document.querySelector(".navbar").clientHeight}),[n]),e}function d(e){const n=(0,i.useRef)(void 0),t=o();(0,i.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:i,linkActiveClassName:a,minHeadingLevel:s,maxHeadingLevel:l}=e;function r(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(i),r=function(e){let{minHeadingLevel:n,maxHeadingLevel:t}=e;const i=[];for(let a=n;a<=t;a+=1)i.push(`h${a}.anchor`);return Array.from(document.querySelectorAll(i.join()))}({minHeadingLevel:s,maxHeadingLevel:l}),o=c(r,{anchorTopOffset:t.current}),d=e.find((e=>o&&o.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,t){t?(n.current&&n.current!==e&&n.current.classList.remove(a),e.classList.add(a),n.current=e):e.classList.remove(a)}(e,e===d)}))}return document.addEventListener("scroll",r),document.addEventListener("resize",r),r(),()=>{document.removeEventListener("scroll",r),document.removeEventListener("resize",r)}}),[e,t])}var m=t(6289),u=t(4848);function f(e){let{toc:n,className:t,linkClassName:i,isChild:a}=e;return n.length?(0,u.jsx)("ul",{className:a?void 0:t,children:n.map((e=>(0,u.jsxs)("li",{children:[(0,u.jsx)(m.A,{to:`#${e.id}`,className:i??void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,u.jsx)(f,{isChild:!0,toc:e.children,className:t,linkClassName:i})]},e.id)))}):null}const h=i.memo(f);function v(e){let{toc:n,className:t="table-of-contents table-of-contents__left-border",linkClassName:r="table-of-contents__link",linkActiveClassName:c,minHeadingLevel:o,maxHeadingLevel:m,...f}=e;const v=(0,a.p)(),x=o??v.tableOfContents.minHeadingLevel,g=m??v.tableOfContents.maxHeadingLevel,p=function(e){let{toc:n,minHeadingLevel:t,maxHeadingLevel:a}=e;return(0,i.useMemo)((()=>l({toc:s(n),minHeadingLevel:t,maxHeadingLevel:a})),[n,t,a])}({toc:n,minHeadingLevel:x,maxHeadingLevel:g});return d((0,i.useMemo)((()=>{if(r&&c)return{linkClassName:r,linkActiveClassName:c,minHeadingLevel:x,maxHeadingLevel:g}}),[r,c,x,g])),(0,u.jsx)(h,{toc:p,className:t,linkClassName:r,...f})}},2075:(e,n,t)=>{t.d(n,{A:()=>d});t(6540);var i=t(4164),a=t(7289),s=t(204),l=t(2362),r=t(4848);function c(e){let{className:n}=e;return(0,r.jsx)(l.A,{type:"caution",title:(0,r.jsx)(a.Yh,{}),className:(0,i.A)(n,s.G.common.draftBanner),children:(0,r.jsx)(a.TT,{})})}var o=t(665);function d(e){let{metadata:n}=e;const{unlisted:t,frontMatter:i}=n;return(0,r.jsxs)(r.Fragment,{children:[(t||i.unlisted)&&(0,r.jsx)(o.A,{}),i.draft&&(0,r.jsx)(c,{})]})}},7289:(e,n,t)=>{t.d(n,{AE:()=>c,Rc:()=>l,TT:()=>d,Uh:()=>r,Yh:()=>o});t(6540);var i=t(539),a=t(7143),s=t(4848);function l(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function r(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function c(){return(0,s.jsx)(a.A,{children:(0,s.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function o(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function d(){return(0,s.jsx)(i.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}},7959:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var i=t(4164),a=t(1021);const s={tableOfContents:"tableOfContents_bqdL",docItemContainer:"docItemContainer_F8PC"};var l=t(4848);const r="table-of-contents__link toc-highlight",c="table-of-contents__link--active";function o(e){let{className:n,...t}=e;return(0,l.jsx)("div",{className:(0,i.A)(s.tableOfContents,"thin-scrollbar",n),children:(0,l.jsx)(a.A,{...t,linkClassName:r,linkActiveClassName:c})})}},9181:(e,n,t)=>{t.r(n),t.d(n,{default:()=>f});t(6540);var i=t(4164),a=t(1082),s=t(204),l=t(1410),r=t(4522),c=t(7959),o=t(2075),d=t(5783);const m={mdxPageWrapper:"mdxPageWrapper_j9I6"};var u=t(4848);function f(e){const{content:n}=e,{metadata:t,assets:f}=n,{title:h,editUrl:v,description:x,frontMatter:g,lastUpdatedBy:p,lastUpdatedAt:j}=t,{keywords:A,wrapperClassName:b,hide_table_of_contents:L}=g,N=f.image??g.image,C=!!(v||j||p);return(0,u.jsx)(a.e3,{className:(0,i.A)(b??s.G.wrapper.mdxPages,s.G.page.mdxPage),children:(0,u.jsxs)(l.A,{children:[(0,u.jsx)(a.be,{title:h,description:x,keywords:A,image:N}),(0,u.jsx)("main",{className:"container container--fluid margin-vert--lg",children:(0,u.jsxs)("div",{className:(0,i.A)("row",m.mdxPageWrapper),children:[(0,u.jsxs)("div",{className:(0,i.A)("col",!L&&"col--8"),children:[(0,u.jsx)(o.A,{metadata:t}),(0,u.jsx)("article",{children:(0,u.jsx)(r.A,{children:(0,u.jsx)(n,{})})}),C&&(0,u.jsx)(d.A,{className:(0,i.A)("margin-top--sm",s.G.pages.pageFooterEditMetaRow),editUrl:v,lastUpdatedAt:j,lastUpdatedBy:p})]}),!L&&n.toc.length>0&&(0,u.jsx)("div",{className:"col col--2",children:(0,u.jsx)(c.A,{toc:n.toc,minHeadingLevel:g.toc_min_heading_level,maxHeadingLevel:g.toc_max_heading_level})})]})})]})})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[462],{8174:s=>{s.exports=JSON.parse('{"tag":{"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description","allTagsPath":"/blog/tags","count":4,"unlisted":false},"listMetadata":{"permalink":"/blog/tags/docusaurus","page":1,"postsPerPage":10,"totalPages":1,"totalCount":4,"blogDescription":"Blog","blogTitle":"Blog"}}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[867],{1865:(e,t,a)=>{a.d(t,{A:()=>l});a(6540);var s=a(4164),n=a(6289),r=a(4848);function l(e){const{permalink:t,title:a,subLabel:l,isNext:i}=e;return(0,r.jsxs)(n.A,{className:(0,s.A)("pagination-nav__link",i?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t,children:[l&&(0,r.jsx)("div",{className:"pagination-nav__sublabel",children:l}),(0,r.jsx)("div",{className:"pagination-nav__label",children:a})]})}},1926:(e,t,a)=>{a.d(t,{Y4:()=>g,ZD:()=>i,np:()=>d,uz:()=>c,wI:()=>o});a(6540);var s=a(539),n=a(1430),r=a(4848);function l(){const{selectMessage:e}=(0,n.W)();return t=>e(t,(0,s.T)({id:"theme.blog.post.plurals",description:'Pluralized label for "{count} posts". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One post|{count} posts"},{count:t}))}function i(e){const t=l();return(0,s.T)({id:"theme.blog.tagTitle",description:"The title of the page for a blog tag",message:'{nPosts} tagged with "{tagName}"'},{nPosts:t(e.count),tagName:e.label})}function o(e){const t=l();return(0,s.T)({id:"theme.blog.author.pageTitle",description:"The title of the page for a blog author",message:"{authorName} - {nPosts}"},{nPosts:t(e.count),authorName:e.name||e.key})}const c=()=>(0,s.T)({id:"theme.blog.authorsList.pageTitle",message:"Authors",description:"The title of the authors page"});function d(){return(0,r.jsx)(s.A,{id:"theme.blog.authorsList.viewAll",description:"The label of the link targeting the blog authors page",children:"View all authors"})}function g(){return(0,r.jsx)(s.A,{id:"theme.blog.author.noPosts",description:"The text for authors with 0 blog post",children:"This author has not written any posts yet."})}},3953:(e,t,a)=>{a.d(t,{A:()=>i});a(6540);var s=a(4164),n=a(6289);const r={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var l=a(4848);function i(e){let{permalink:t,label:a,count:i,description:o}=e;return(0,l.jsxs)(n.A,{href:t,title:o,className:(0,s.A)(r.tag,i?r.tagWithCount:r.tagRegular),children:[a,i&&(0,l.jsx)("span",{children:i})]})}},4003:(e,t,a)=>{a.r(t),a.d(t,{default:()=>b});a(6540);var s=a(4164),n=a(1082),r=a(204),l=a(1926),i=a(6289),o=a(3750),c=a(569),d=a(7448),g=a(7220),u=a(4005),h=a(5921),m=a(4848);function p(e){let{author:t}=e;const a=(0,l.wI)(t);return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(n.be,{title:a}),(0,m.jsx)(g.A,{tag:"blog_authors_posts"})]})}function x(){const{authorsListPath:e}=(0,o.x)();return(0,m.jsx)(i.A,{href:e,children:(0,m.jsx)(l.np,{})})}function j(e){let{author:t,items:a,sidebar:s,listMetadata:n}=e;return(0,m.jsxs)(c.A,{sidebar:s,children:[(0,m.jsxs)("header",{className:"margin-bottom--xl",children:[(0,m.jsx)(h.A,{as:"h1",author:t}),t.description&&(0,m.jsx)("p",{children:t.description}),(0,m.jsx)(x,{})]}),0===a.length?(0,m.jsx)("p",{children:(0,m.jsx)(l.Y4,{})}):(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)("hr",{}),(0,m.jsx)(u.A,{items:a}),(0,m.jsx)(d.A,{metadata:n})]})]})}function b(e){return(0,m.jsxs)(n.e3,{className:(0,s.A)(r.G.wrapper.blogPages,r.G.page.blogAuthorsPostsPage),children:[(0,m.jsx)(p,{...e}),(0,m.jsx)(j,{...e})]})}},4005:(e,t,a)=>{a.d(t,{A:()=>l});a(6540);var s=a(3750),n=a(8189),r=a(4848);function l(e){let{items:t,component:a=n.A}=e;return(0,r.jsx)(r.Fragment,{children:t.map((e=>{let{content:t}=e;return(0,r.jsx)(s.in,{content:t,children:(0,r.jsx)(a,{children:(0,r.jsx)(t,{})})},t.metadata.permalink)}))})}},6239:(e,t,a)=>{a.d(t,{A:()=>o});a(6540);var s=a(4164),n=a(539),r=a(3953);const l={tags:"tags_jXut",tag:"tag_QGVx"};var i=a(4848);function o(e){let{tags:t}=e;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("b",{children:(0,i.jsx)(n.A,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list",children:"Tags:"})}),(0,i.jsx)("ul",{className:(0,s.A)(l.tags,"padding--none","margin-left--sm"),children:t.map((e=>(0,i.jsx)("li",{className:l.tag,children:(0,i.jsx)(r.A,{...e})},e.permalink)))})]})}},7448:(e,t,a)=>{a.d(t,{A:()=>l});a(6540);var s=a(539),n=a(1865),r=a(4848);function l(e){const{metadata:t}=e,{previousPage:a,nextPage:l}=t;return(0,r.jsxs)("nav",{className:"pagination-nav","aria-label":(0,s.T)({id:"theme.blog.paginator.navAriaLabel",message:"Blog list page navigation",description:"The ARIA label for the blog pagination"}),children:[a&&(0,r.jsx)(n.A,{permalink:a,title:(0,r.jsx)(s.A,{id:"theme.blog.paginator.newerEntries",description:"The label used to navigate to the newer blog posts page (previous page)",children:"Newer entries"})}),l&&(0,r.jsx)(n.A,{permalink:l,title:(0,r.jsx)(s.A,{id:"theme.blog.paginator.olderEntries",description:"The label used to navigate to the older blog posts page (next page)",children:"Older entries"}),isNext:!0})]})}},8189:(e,t,a)=>{a.d(t,{A:()=>C});a(6540);var s=a(4164),n=a(3750),r=a(4848);function l(e){let{children:t,className:a}=e;return(0,r.jsx)("article",{className:a,children:t})}var i=a(6289);const o={title:"title_f1Hy"};function c(e){let{className:t}=e;const{metadata:a,isBlogPostPage:l}=(0,n.e7)(),{permalink:c,title:d}=a,g=l?"h1":"h2";return(0,r.jsx)(g,{className:(0,s.A)(o.title,t),children:l?d:(0,r.jsx)(i.A,{to:c,children:d})})}var d=a(539),g=a(1430),u=a(8569);const h={container:"container_mt6G"};function m(e){let{readingTime:t}=e;const a=function(){const{selectMessage:e}=(0,g.W)();return t=>{const a=Math.ceil(t);return e(a,(0,d.T)({id:"theme.blog.post.readingTime.plurals",description:'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One min read|{readingTime} min read"},{readingTime:a}))}}();return(0,r.jsx)(r.Fragment,{children:a(t)})}function p(e){let{date:t,formattedDate:a}=e;return(0,r.jsx)("time",{dateTime:t,children:a})}function x(){return(0,r.jsx)(r.Fragment,{children:" \xb7 "})}function j(e){let{className:t}=e;const{metadata:a}=(0,n.e7)(),{date:l,readingTime:i}=a,o=(0,u.i)({day:"numeric",month:"long",year:"numeric",timeZone:"UTC"});return(0,r.jsxs)("div",{className:(0,s.A)(h.container,"margin-vert--md",t),children:[(0,r.jsx)(p,{date:l,formattedDate:(c=l,o.format(new Date(c)))}),void 0!==i&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(x,{}),(0,r.jsx)(m,{readingTime:i})]})]});var c}var b=a(5921);const f={authorCol:"authorCol_Hf19",imageOnlyAuthorRow:"imageOnlyAuthorRow_pa_O",imageOnlyAuthorCol:"imageOnlyAuthorCol_G86a"};function A(e){let{className:t}=e;const{metadata:{authors:a},assets:l}=(0,n.e7)();if(0===a.length)return null;const i=a.every((e=>{let{name:t}=e;return!t})),o=1===a.length;return(0,r.jsx)("div",{className:(0,s.A)("margin-top--md margin-bottom--sm",i?f.imageOnlyAuthorRow:"row",t),children:a.map(((e,t)=>(0,r.jsx)("div",{className:(0,s.A)(!i&&(o?"col col--12":"col col--6"),i?f.imageOnlyAuthorCol:f.authorCol),children:(0,r.jsx)(b.A,{author:{...e,imageURL:l.authorsImageUrls[t]??e.imageURL}})},t)))})}function v(){return(0,r.jsxs)("header",{children:[(0,r.jsx)(c,{}),(0,r.jsx)(j,{}),(0,r.jsx)(A,{})]})}var N=a(99),T=a(4522);function w(e){let{children:t,className:a}=e;const{isBlogPostPage:l}=(0,n.e7)();return(0,r.jsx)("div",{id:l?N.LU:void 0,className:(0,s.A)("markdown",a),children:(0,r.jsx)(T.A,{children:t})})}var _=a(204),P=a(5783),k=a(6239);function y(){return(0,r.jsx)("b",{children:(0,r.jsx)(d.A,{id:"theme.blog.post.readMore",description:"The label used in blog post item excerpts to link to full blog posts",children:"Read more"})})}function R(e){const{blogPostTitle:t,...a}=e;return(0,r.jsx)(i.A,{"aria-label":(0,d.T)({message:"Read more about {title}",id:"theme.blog.post.readMoreLabel",description:"The ARIA label for the link to full blog posts from excerpts"},{title:t}),...a,children:(0,r.jsx)(y,{})})}function U(){const{metadata:e,isBlogPostPage:t}=(0,n.e7)(),{tags:a,title:l,editUrl:i,hasTruncateMarker:o,lastUpdatedBy:c,lastUpdatedAt:d}=e,g=!t&&o,u=a.length>0;if(!(u||g||i))return null;if(t){const e=!!(i||d||c);return(0,r.jsxs)("footer",{className:"docusaurus-mt-lg",children:[u&&(0,r.jsx)("div",{className:(0,s.A)("row","margin-top--sm",_.G.blog.blogFooterEditMetaRow),children:(0,r.jsx)("div",{className:"col",children:(0,r.jsx)(k.A,{tags:a})})}),e&&(0,r.jsx)(P.A,{className:(0,s.A)("margin-top--sm",_.G.blog.blogFooterEditMetaRow),editUrl:i,lastUpdatedAt:d,lastUpdatedBy:c})]})}return(0,r.jsxs)("footer",{className:"row docusaurus-mt-lg",children:[u&&(0,r.jsx)("div",{className:(0,s.A)("col",{"col--9":g}),children:(0,r.jsx)(k.A,{tags:a})}),g&&(0,r.jsx)("div",{className:(0,s.A)("col text--right",{"col--3":u}),children:(0,r.jsx)(R,{blogPostTitle:l,to:e.permalink})})]})}function C(e){let{children:t,className:a}=e;const i=function(){const{isBlogPostPage:e}=(0,n.e7)();return e?void 0:"margin-bottom--xl"}();return(0,r.jsxs)(l,{className:(0,s.A)(i,a),children:[(0,r.jsx)(v,{}),(0,r.jsx)(w,{children:t}),(0,r.jsx)(U,{})]})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[858],{5516:o=>{o.exports=JSON.parse('{"name":"docusaurus-plugin-content-blog","id":"default"}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[134],{1943:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>p,default:()=>l,frontMatter:()=>s,metadata:()=>o,toc:()=>d});const o=JSON.parse('{"type":"mdx","permalink":"/markdown-page","source":"@site/src/pages/markdown-page.md","title":"Markdown page example","description":"You don\'t need React to write simple standalone pages.","frontMatter":{"title":"Markdown page example"},"unlisted":false}');var a=t(4848),r=t(8453);const s={title:"Markdown page example"},p="Markdown page example",c={},d=[];function i(e){const n={h1:"h1",header:"header",p:"p",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"markdown-page-example",children:"Markdown page example"})}),"\n",(0,a.jsx)(n.p,{children:"You don't need React to write simple standalone pages."})]})}function l(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(i,{...e})}):i(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>p});var o=t(6540);const a={},r=o.createContext(a);function s(e){const n=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function p(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[121],{8070:o=>{o.exports=JSON.parse('{"tags":[{"label":"Facebook","permalink":"/blog/tags/facebook","description":"Facebook tag description","count":1},{"label":"Hello","permalink":"/blog/tags/hello","description":"Hello tag description","count":2},{"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description","count":4},{"label":"Hola","permalink":"/blog/tags/hola","description":"Hola tag description","count":1}]}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[42],{3042:(e,t,o)=>{o.r(t),o.d(t,{default:()=>l});o(6540);var n=o(539),i=o(1082),s=o(1410),r=o(5932),a=o(4848);function l(){const e=(0,n.T)({id:"theme.NotFound.title",message:"Page Not Found"});return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(i.be,{title:e}),(0,a.jsx)(s.A,{children:(0,a.jsx)(r.A,{})})]})}},5932:(e,t,o)=>{o.d(t,{A:()=>a});o(6540);var n=o(4164),i=o(539),s=o(9303),r=o(4848);function a(e){let{className:t}=e;return(0,r.jsx)("main",{className:(0,n.A)("container margin-vert--xl",t),children:(0,r.jsx)("div",{className:"row",children:(0,r.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,r.jsx)(s.A,{as:"h1",className:"hero__title",children:(0,r.jsx)(i.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,r.jsx)("p",{children:(0,r.jsx)(i.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,r.jsx)("p",{children:(0,r.jsx)(i.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[325],{1632:e=>{e.exports=JSON.parse('{"permalink":"/blog/mdx-blog-post","source":"@site/blog/2021-08-01-mdx-blog-post.mdx","title":"MDX Blog Post","description":"Blog posts support Docusaurus Markdown features, such as MDX.","date":"2021-08-01T00:00:00.000Z","tags":[{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":0.235,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"slug":"mdx-blog-post","title":"MDX Blog Post","authors":["slorber"],"tags":["docusaurus"]},"unlisted":false,"prevItem":{"title":"Welcome","permalink":"/blog/welcome"},"nextItem":{"title":"Long Blog Post","permalink":"/blog/long-blog-post"}}')},7358:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>i,contentTitle:()=>l,default:()=>p,frontMatter:()=>a,metadata:()=>s,toc:()=>c});var s=o(1632),n=o(4848),r=o(8453);const a={slug:"mdx-blog-post",title:"MDX Blog Post",authors:["slorber"],tags:["docusaurus"]},l=void 0,i={authorsImageUrls:[void 0]},c=[];function u(e){const t={a:"a",admonition:"admonition",code:"code",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:["Blog posts support ",(0,n.jsx)(t.a,{href:"https://docusaurus.io/docs/markdown-features",children:"Docusaurus Markdown features"}),", such as ",(0,n.jsx)(t.a,{href:"https://mdxjs.com/",children:"MDX"}),"."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsx)(t.p,{children:"Use the power of React to create interactive blog posts."})}),"\n","\n",(0,n.jsx)(t.p,{children:"For example, use JSX to create an interactive button:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"<button onClick={() => alert('button clicked!')}>Click me!</button>\n"})}),"\n",(0,n.jsx)("button",{onClick:()=>alert("button clicked!"),children:"Click me!"})]})}function p(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},8453:(e,t,o)=>{o.d(t,{R:()=>a,x:()=>l});var s=o(6540);const n={},r=s.createContext(n);function a(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[126],{8199:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>u,frontMatter:()=>s,metadata:()=>o,toc:()=>d});const o=JSON.parse('{"id":"placeholder","title":"Placeholder","description":"","source":"@site/docs/placeholder.md","sourceDirName":".","slug":"/placeholder","permalink":"/docs/placeholder","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar"}');var r=n(4848),c=n(8453);const s={},a="Placeholder",l={},d=[];function i(e){const t={h1:"h1",header:"header",...(0,c.R)(),...e.components};return(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"placeholder",children:"Placeholder"})})}function u(e={}){const{wrapper:t}={...(0,c.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>a});var o=n(6540);const r={},c=o.createContext(r);function s(e){const t=o.useContext(c);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),o.createElement(c.Provider,{value:t},e.children)}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[25],{7134:o=>{o.exports=JSON.parse('{"tag":{"label":"Hola","permalink":"/blog/tags/hola","description":"Hola tag description","allTagsPath":"/blog/tags","count":1,"unlisted":false},"listMetadata":{"permalink":"/blog/tags/hola","page":1,"postsPerPage":10,"totalPages":1,"totalCount":1,"blogDescription":"Blog","blogTitle":"Blog"}}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[647],{8122:(e,s,r)=>{r.r(s),r.d(s,{default:()=>l});r(6540);var o=r(4164),n=r(1082),t=r(204),u=r(2831),a=r(1410),c=r(4848);function l(e){return(0,c.jsx)(n.e3,{className:(0,o.A)(t.G.wrapper.docsPages),children:(0,c.jsx)(a.A,{children:(0,u.v)(e.route.routes)})})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[604],{5604:(t,e,r)=>{r.d(e,{gSK:()=>v});var n=r(6540),o={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},i=n.createContext&&n.createContext(o),c=["attr","size","title"];function l(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r={};for(var n in t)if(Object.prototype.hasOwnProperty.call(t,n)){if(e.indexOf(n)>=0)continue;r[n]=t[n]}return r}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}function a(){return a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},a.apply(this,arguments)}function s(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function u(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?s(Object(r),!0).forEach((function(e){f(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):s(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function f(t,e,r){var n;return(e="symbol"==typeof(n=function(t,e){if("object"!=typeof t||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var n=r.call(t,e||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(e,"string"))?n:n+"")in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function p(t){return t&&t.map(((t,e)=>n.createElement(t.tag,u({key:e},t.attr),p(t.child))))}function b(t){return e=>n.createElement(y,a({attr:u({},t.attr)},e),p(t.child))}function y(t){var e=e=>{var r,{attr:o,size:i,title:s}=t,f=l(t,c),p=i||e.size||"1em";return e.className&&(r=e.className),t.className&&(r=(r?r+" ":"")+t.className),n.createElement("svg",a({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},e.attr,o,f,{className:r,style:u(u({color:t.color||e.color},e.style),t.style),height:p,width:p,xmlns:"http://www.w3.org/2000/svg"}),s&&n.createElement("title",null,s),t.children)};return void 0!==i?n.createElement(i.Consumer,null,(t=>e(t))):e(o)}function v(t){return b({tag:"svg",attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"},child:[]}]})(t)}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[212],{217:(t,e,s)=>{s.r(e),s.d(e,{default:()=>m});s(6540);var o=s(4164),a=s(1082),r=s(204),n=s(1926),l=s(569),u=s(7220),i=s(9303),h=s(5921);const c={authorListItem:"authorListItem_n3yI"};var g=s(4848);function p(t){let{author:e}=t;return(0,g.jsx)("li",{className:c.authorListItem,children:(0,g.jsx)(h.A,{as:"h2",author:e,count:e.count})})}function d(t){let{authors:e}=t;return(0,g.jsx)("section",{className:(0,o.A)("margin-vert--lg",c.authorsListSection),children:(0,g.jsx)("ul",{children:e.map((t=>(0,g.jsx)(p,{author:t},t.key)))})})}function m(t){let{authors:e,sidebar:s}=t;const h=(0,n.uz)();return(0,g.jsxs)(a.e3,{className:(0,o.A)(r.G.wrapper.blogPages,r.G.page.blogAuthorsListPage),children:[(0,g.jsx)(a.be,{title:h}),(0,g.jsx)(u.A,{tag:"blog_authors_list"}),(0,g.jsxs)(l.A,{sidebar:s,children:[(0,g.jsx)(i.A,{as:"h1",children:h}),(0,g.jsx)(d,{authors:e})]})]})}},1926:(t,e,s)=>{s.d(e,{Y4:()=>c,ZD:()=>l,np:()=>h,uz:()=>i,wI:()=>u});s(6540);var o=s(539),a=s(1430),r=s(4848);function n(){const{selectMessage:t}=(0,a.W)();return e=>t(e,(0,o.T)({id:"theme.blog.post.plurals",description:'Pluralized label for "{count} posts". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One post|{count} posts"},{count:e}))}function l(t){const e=n();return(0,o.T)({id:"theme.blog.tagTitle",description:"The title of the page for a blog tag",message:'{nPosts} tagged with "{tagName}"'},{nPosts:e(t.count),tagName:t.label})}function u(t){const e=n();return(0,o.T)({id:"theme.blog.author.pageTitle",description:"The title of the page for a blog author",message:"{authorName} - {nPosts}"},{nPosts:e(t.count),authorName:t.name||t.key})}const i=()=>(0,o.T)({id:"theme.blog.authorsList.pageTitle",message:"Authors",description:"The title of the authors page"});function h(){return(0,r.jsx)(o.A,{id:"theme.blog.authorsList.viewAll",description:"The label of the link targeting the blog authors page",children:"View all authors"})}function c(){return(0,r.jsx)(o.A,{id:"theme.blog.author.noPosts",description:"The text for authors with 0 blog post",children:"This author has not written any posts yet."})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[813],{665:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var a=n(4164),s=n(7289),i=n(204),r=n(2362),l=n(4848);function o(e){let{className:t}=e;return(0,l.jsx)(r.A,{type:"caution",title:(0,l.jsx)(s.Rc,{}),className:(0,a.A)(t,i.G.common.unlistedBanner),children:(0,l.jsx)(s.Uh,{})})}function c(e){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s.AE,{}),(0,l.jsx)(o,{...e})]})}},1865:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var a=n(4164),s=n(6289),i=n(4848);function r(e){const{permalink:t,title:n,subLabel:r,isNext:l}=e;return(0,i.jsxs)(s.A,{className:(0,a.A)("pagination-nav__link",l?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t,children:[r&&(0,i.jsx)("div",{className:"pagination-nav__sublabel",children:r}),(0,i.jsx)("div",{className:"pagination-nav__label",children:n})]})}},1926:(e,t,n)=>{n.d(t,{Y4:()=>g,ZD:()=>l,np:()=>d,uz:()=>c,wI:()=>o});n(6540);var a=n(539),s=n(1430),i=n(4848);function r(){const{selectMessage:e}=(0,s.W)();return t=>e(t,(0,a.T)({id:"theme.blog.post.plurals",description:'Pluralized label for "{count} posts". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One post|{count} posts"},{count:t}))}function l(e){const t=r();return(0,a.T)({id:"theme.blog.tagTitle",description:"The title of the page for a blog tag",message:'{nPosts} tagged with "{tagName}"'},{nPosts:t(e.count),tagName:e.label})}function o(e){const t=r();return(0,a.T)({id:"theme.blog.author.pageTitle",description:"The title of the page for a blog author",message:"{authorName} - {nPosts}"},{nPosts:t(e.count),authorName:e.name||e.key})}const c=()=>(0,a.T)({id:"theme.blog.authorsList.pageTitle",message:"Authors",description:"The title of the authors page"});function d(){return(0,i.jsx)(a.A,{id:"theme.blog.authorsList.viewAll",description:"The label of the link targeting the blog authors page",children:"View all authors"})}function g(){return(0,i.jsx)(a.A,{id:"theme.blog.author.noPosts",description:"The text for authors with 0 blog post",children:"This author has not written any posts yet."})}},3953:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var a=n(4164),s=n(6289);const i={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var r=n(4848);function l(e){let{permalink:t,label:n,count:l,description:o}=e;return(0,r.jsxs)(s.A,{href:t,title:o,className:(0,a.A)(i.tag,l?i.tagWithCount:i.tagRegular),children:[n,l&&(0,r.jsx)("span",{children:l})]})}},4005:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var a=n(3750),s=n(8189),i=n(4848);function r(e){let{items:t,component:n=s.A}=e;return(0,i.jsx)(i.Fragment,{children:t.map((e=>{let{content:t}=e;return(0,i.jsx)(a.in,{content:t,children:(0,i.jsx)(n,{children:(0,i.jsx)(t,{})})},t.metadata.permalink)}))})}},6239:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var a=n(4164),s=n(539),i=n(3953);const r={tags:"tags_jXut",tag:"tag_QGVx"};var l=n(4848);function o(e){let{tags:t}=e;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("b",{children:(0,l.jsx)(s.A,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list",children:"Tags:"})}),(0,l.jsx)("ul",{className:(0,a.A)(r.tags,"padding--none","margin-left--sm"),children:t.map((e=>(0,l.jsx)("li",{className:r.tag,children:(0,l.jsx)(i.A,{...e})},e.permalink)))})]})}},6956:(e,t,n)=>{n.r(t),n.d(t,{default:()=>b});n(6540);var a=n(4164),s=n(539),i=n(1082),r=n(204),l=n(1926),o=n(6289),c=n(569),d=n(7448),g=n(7220),u=n(4005),h=n(665),m=n(9303),p=n(4848);function x(e){let{tag:t}=e;const n=(0,l.ZD)(t);return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(i.be,{title:n,description:t.description}),(0,p.jsx)(g.A,{tag:"blog_tags_posts"})]})}function j(e){let{tag:t,items:n,sidebar:a,listMetadata:i}=e;const r=(0,l.ZD)(t);return(0,p.jsxs)(c.A,{sidebar:a,children:[t.unlisted&&(0,p.jsx)(h.A,{}),(0,p.jsxs)("header",{className:"margin-bottom--xl",children:[(0,p.jsx)(m.A,{as:"h1",children:r}),t.description&&(0,p.jsx)("p",{children:t.description}),(0,p.jsx)(o.A,{href:t.allTagsPath,children:(0,p.jsx)(s.A,{id:"theme.tags.tagsPageLink",description:"The label of the link targeting the tag list page",children:"View All Tags"})})]}),(0,p.jsx)(u.A,{items:n}),(0,p.jsx)(d.A,{metadata:i})]})}function b(e){return(0,p.jsxs)(i.e3,{className:(0,a.A)(r.G.wrapper.blogPages,r.G.page.blogTagPostListPage),children:[(0,p.jsx)(x,{...e}),(0,p.jsx)(j,{...e})]})}},7289:(e,t,n)=>{n.d(t,{AE:()=>o,Rc:()=>r,TT:()=>d,Uh:()=>l,Yh:()=>c});n(6540);var a=n(539),s=n(7143),i=n(4848);function r(){return(0,i.jsx)(a.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function l(){return(0,i.jsx)(a.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function o(){return(0,i.jsx)(s.A,{children:(0,i.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function c(){return(0,i.jsx)(a.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function d(){return(0,i.jsx)(a.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}},7448:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var a=n(539),s=n(1865),i=n(4848);function r(e){const{metadata:t}=e,{previousPage:n,nextPage:r}=t;return(0,i.jsxs)("nav",{className:"pagination-nav","aria-label":(0,a.T)({id:"theme.blog.paginator.navAriaLabel",message:"Blog list page navigation",description:"The ARIA label for the blog pagination"}),children:[n&&(0,i.jsx)(s.A,{permalink:n,title:(0,i.jsx)(a.A,{id:"theme.blog.paginator.newerEntries",description:"The label used to navigate to the newer blog posts page (previous page)",children:"Newer entries"})}),r&&(0,i.jsx)(s.A,{permalink:r,title:(0,i.jsx)(a.A,{id:"theme.blog.paginator.olderEntries",description:"The label used to navigate to the older blog posts page (next page)",children:"Older entries"}),isNext:!0})]})}},8189:(e,t,n)=>{n.d(t,{A:()=>B});n(6540);var a=n(4164),s=n(3750),i=n(4848);function r(e){let{children:t,className:n}=e;return(0,i.jsx)("article",{className:n,children:t})}var l=n(6289);const o={title:"title_f1Hy"};function c(e){let{className:t}=e;const{metadata:n,isBlogPostPage:r}=(0,s.e7)(),{permalink:c,title:d}=n,g=r?"h1":"h2";return(0,i.jsx)(g,{className:(0,a.A)(o.title,t),children:r?d:(0,i.jsx)(l.A,{to:c,children:d})})}var d=n(539),g=n(1430),u=n(8569);const h={container:"container_mt6G"};function m(e){let{readingTime:t}=e;const n=function(){const{selectMessage:e}=(0,g.W)();return t=>{const n=Math.ceil(t);return e(n,(0,d.T)({id:"theme.blog.post.readingTime.plurals",description:'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One min read|{readingTime} min read"},{readingTime:n}))}}();return(0,i.jsx)(i.Fragment,{children:n(t)})}function p(e){let{date:t,formattedDate:n}=e;return(0,i.jsx)("time",{dateTime:t,children:n})}function x(){return(0,i.jsx)(i.Fragment,{children:" \xb7 "})}function j(e){let{className:t}=e;const{metadata:n}=(0,s.e7)(),{date:r,readingTime:l}=n,o=(0,u.i)({day:"numeric",month:"long",year:"numeric",timeZone:"UTC"});return(0,i.jsxs)("div",{className:(0,a.A)(h.container,"margin-vert--md",t),children:[(0,i.jsx)(p,{date:r,formattedDate:(c=r,o.format(new Date(c)))}),void 0!==l&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(x,{}),(0,i.jsx)(m,{readingTime:l})]})]});var c}var b=n(5921);const f={authorCol:"authorCol_Hf19",imageOnlyAuthorRow:"imageOnlyAuthorRow_pa_O",imageOnlyAuthorCol:"imageOnlyAuthorCol_G86a"};function A(e){let{className:t}=e;const{metadata:{authors:n},assets:r}=(0,s.e7)();if(0===n.length)return null;const l=n.every((e=>{let{name:t}=e;return!t})),o=1===n.length;return(0,i.jsx)("div",{className:(0,a.A)("margin-top--md margin-bottom--sm",l?f.imageOnlyAuthorRow:"row",t),children:n.map(((e,t)=>(0,i.jsx)("div",{className:(0,a.A)(!l&&(o?"col col--12":"col col--6"),l?f.imageOnlyAuthorCol:f.authorCol),children:(0,i.jsx)(b.A,{author:{...e,imageURL:r.authorsImageUrls[t]??e.imageURL}})},t)))})}function v(){return(0,i.jsxs)("header",{children:[(0,i.jsx)(c,{}),(0,i.jsx)(j,{}),(0,i.jsx)(A,{})]})}var T=n(99),N=n(4522);function w(e){let{children:t,className:n}=e;const{isBlogPostPage:r}=(0,s.e7)();return(0,i.jsx)("div",{id:r?T.LU:void 0,className:(0,a.A)("markdown",n),children:(0,i.jsx)(N.A,{children:t})})}var _=n(204),y=n(5783),k=n(6239);function P(){return(0,i.jsx)("b",{children:(0,i.jsx)(d.A,{id:"theme.blog.post.readMore",description:"The label used in blog post item excerpts to link to full blog posts",children:"Read more"})})}function R(e){const{blogPostTitle:t,...n}=e;return(0,i.jsx)(l.A,{"aria-label":(0,d.T)({message:"Read more about {title}",id:"theme.blog.post.readMoreLabel",description:"The ARIA label for the link to full blog posts from excerpts"},{title:t}),...n,children:(0,i.jsx)(P,{})})}function U(){const{metadata:e,isBlogPostPage:t}=(0,s.e7)(),{tags:n,title:r,editUrl:l,hasTruncateMarker:o,lastUpdatedBy:c,lastUpdatedAt:d}=e,g=!t&&o,u=n.length>0;if(!(u||g||l))return null;if(t){const e=!!(l||d||c);return(0,i.jsxs)("footer",{className:"docusaurus-mt-lg",children:[u&&(0,i.jsx)("div",{className:(0,a.A)("row","margin-top--sm",_.G.blog.blogFooterEditMetaRow),children:(0,i.jsx)("div",{className:"col",children:(0,i.jsx)(k.A,{tags:n})})}),e&&(0,i.jsx)(y.A,{className:(0,a.A)("margin-top--sm",_.G.blog.blogFooterEditMetaRow),editUrl:l,lastUpdatedAt:d,lastUpdatedBy:c})]})}return(0,i.jsxs)("footer",{className:"row docusaurus-mt-lg",children:[u&&(0,i.jsx)("div",{className:(0,a.A)("col",{"col--9":g}),children:(0,i.jsx)(k.A,{tags:n})}),g&&(0,i.jsx)("div",{className:(0,a.A)("col text--right",{"col--3":u}),children:(0,i.jsx)(R,{blogPostTitle:r,to:e.permalink})})]})}function B(e){let{children:t,className:n}=e;const l=function(){const{isBlogPostPage:e}=(0,s.e7)();return e?void 0:"margin-bottom--xl"}();return(0,i.jsxs)(r,{className:(0,a.A)(l,n),children:[(0,i.jsx)(v,{}),(0,i.jsx)(w,{children:t}),(0,i.jsx)(U,{})]})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[972],{5802:e=>{e.exports=JSON.parse('{"permalink":"/blog/long-blog-post","source":"@site/blog/2019-05-29-long-blog-post.md","title":"Long Blog Post","description":"This is the summary of a very long blog post,","date":"2019-05-29T00:00:00.000Z","tags":[{"inline":false,"label":"Hello","permalink":"/blog/tags/hello","description":"Hello tag description"},{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":2.06,"hasTruncateMarker":true,"authors":[{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun"}],"frontMatter":{"slug":"long-blog-post","title":"Long Blog Post","authors":"yangshun","tags":["hello","docusaurus"]},"unlisted":false,"prevItem":{"title":"MDX Blog Post","permalink":"/blog/mdx-blog-post"},"nextItem":{"title":"First Blog Post","permalink":"/blog/first-blog-post"}}')},8371:(e,s,i)=>{i.r(s),i.d(s,{assets:()=>l,contentTitle:()=>r,default:()=>a,frontMatter:()=>u,metadata:()=>t,toc:()=>m});var t=i(5802),o=i(4848),n=i(8453);const u={slug:"long-blog-post",title:"Long Blog Post",authors:"yangshun",tags:["hello","docusaurus"]},r=void 0,l={authorsImageUrls:[void 0]},m=[];function c(e){const s={code:"code",p:"p",...(0,n.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.p,{children:"This is the summary of a very long blog post,"}),"\n",(0,o.jsxs)(s.p,{children:["Use a ",(0,o.jsx)(s.code,{children:"\x3c!--"})," ",(0,o.jsx)(s.code,{children:"truncate"})," ",(0,o.jsx)(s.code,{children:"--\x3e"})," comment to limit blog post size in the list view."]}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}),"\n",(0,o.jsx)(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"})]})}function a(e={}){const{wrapper:s}={...(0,n.R)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,s,i)=>{i.d(s,{R:()=>u,x:()=>r});var t=i(6540);const o={},n=t.createContext(o);function u(e){const s=t.useContext(n);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:u(e.components),t.createElement(n.Provider,{value:s},e.children)}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[737],{4695:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>i,contentTitle:()=>l,default:()=>g,frontMatter:()=>a,metadata:()=>s,toc:()=>u});var s=o(8811),n=o(4848),r=o(8453);const a={slug:"welcome",title:"Welcome",authors:["slorber","yangshun"],tags:["facebook","hello","docusaurus"]},l=void 0,i={authorsImageUrls:[void 0,void 0]},u=[];function c(e){const t={a:"a",p:"p",...(0,r.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"https://docusaurus.io/docs/blog",children:"Docusaurus blogging features"})," are powered by the ",(0,n.jsx)(t.a,{href:"https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog",children:"blog plugin"}),"."]}),"\n",(0,n.jsx)(t.p,{children:"Here are a few tips you might find useful."})]})}function g(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}},8453:(e,t,o)=>{o.d(t,{R:()=>a,x:()=>l});var s=o(6540);const n={},r=s.createContext(n);function a(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),s.createElement(r.Provider,{value:t},e.children)}},8811:e=>{e.exports=JSON.parse('{"permalink":"/blog/welcome","source":"@site/blog/2021-08-26-welcome/index.md","title":"Welcome","description":"Docusaurus blogging features are powered by the blog plugin.","date":"2021-08-26T00:00:00.000Z","tags":[{"inline":false,"label":"Facebook","permalink":"/blog/tags/facebook","description":"Facebook tag description"},{"inline":false,"label":"Hello","permalink":"/blog/tags/hello","description":"Hello tag description"},{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":0.465,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"},{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun"}],"frontMatter":{"slug":"welcome","title":"Welcome","authors":["slorber","yangshun"],"tags":["facebook","hello","docusaurus"]},"unlisted":false,"nextItem":{"title":"MDX Blog Post","permalink":"/blog/mdx-blog-post"}}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[472],{5513:e=>{e.exports=JSON.parse('{"title":"Recent posts","items":[{"title":"Welcome","permalink":"/blog/welcome","unlisted":false,"date":"2021-08-26T00:00:00.000Z"},{"title":"MDX Blog Post","permalink":"/blog/mdx-blog-post","unlisted":false,"date":"2021-08-01T00:00:00.000Z"},{"title":"Long Blog Post","permalink":"/blog/long-blog-post","unlisted":false,"date":"2019-05-29T00:00:00.000Z"},{"title":"First Blog Post","permalink":"/blog/first-blog-post","unlisted":false,"date":"2019-05-28T00:00:00.000Z"}]}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[694],{2997:(t,o,e)=>{e.r(o),e.d(o,{assets:()=>i,contentTitle:()=>a,default:()=>g,frontMatter:()=>r,metadata:()=>n,toc:()=>u});var n=e(5802),s=e(4848),l=e(8453);const r={slug:"long-blog-post",title:"Long Blog Post",authors:"yangshun",tags:["hello","docusaurus"]},a=void 0,i={authorsImageUrls:[void 0]},u=[];function c(t){const o={code:"code",p:"p",...(0,l.R)(),...t.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.p,{children:"This is the summary of a very long blog post,"}),"\n",(0,s.jsxs)(o.p,{children:["Use a ",(0,s.jsx)(o.code,{children:"\x3c!--"})," ",(0,s.jsx)(o.code,{children:"truncate"})," ",(0,s.jsx)(o.code,{children:"--\x3e"})," comment to limit blog post size in the list view."]})]})}function g(t={}){const{wrapper:o}={...(0,l.R)(),...t.components};return o?(0,s.jsx)(o,{...t,children:(0,s.jsx)(c,{...t})}):c(t)}},5802:t=>{t.exports=JSON.parse('{"permalink":"/blog/long-blog-post","source":"@site/blog/2019-05-29-long-blog-post.md","title":"Long Blog Post","description":"This is the summary of a very long blog post,","date":"2019-05-29T00:00:00.000Z","tags":[{"inline":false,"label":"Hello","permalink":"/blog/tags/hello","description":"Hello tag description"},{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":2.06,"hasTruncateMarker":true,"authors":[{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun"}],"frontMatter":{"slug":"long-blog-post","title":"Long Blog Post","authors":"yangshun","tags":["hello","docusaurus"]},"unlisted":false,"prevItem":{"title":"MDX Blog Post","permalink":"/blog/mdx-blog-post"},"nextItem":{"title":"First Blog Post","permalink":"/blog/first-blog-post"}}')},8453:(t,o,e)=>{e.d(o,{R:()=>r,x:()=>a});var n=e(6540);const s={},l=n.createContext(s);function r(t){const o=n.useContext(l);return n.useMemo((function(){return"function"==typeof t?t(o):{...o,...t}}),[o,t])}function a(t){let o;return o=t.disableParentContext?"function"==typeof t.components?t.components(s):t.components||s:r(t.components),n.createElement(l.Provider,{value:o},t.children)}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[609],{2421:t=>{t.exports=JSON.parse('{"permalink":"/blog/first-blog-post","source":"@site/blog/2019-05-28-first-blog-post.md","title":"First Blog Post","description":"Lorem ipsum dolor sit amet...","date":"2019-05-28T00:00:00.000Z","tags":[{"inline":false,"label":"Hola","permalink":"/blog/tags/hola","description":"Hola tag description"},{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":0.135,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"},{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun"}],"frontMatter":{"slug":"first-blog-post","title":"First Blog Post","authors":["slorber","yangshun"],"tags":["hola","docusaurus"]},"unlisted":false,"prevItem":{"title":"Long Blog Post","permalink":"/blog/long-blog-post"}}')},8453:(t,e,o)=>{o.d(e,{R:()=>a,x:()=>i});var s=o(6540);const n={},r=s.createContext(n);function a(t){const e=s.useContext(r);return s.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function i(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(n):t.components||n:a(t.components),s.createElement(r.Provider,{value:e},t.children)}},9420:(t,e,o)=>{o.r(e),o.d(e,{assets:()=>l,contentTitle:()=>i,default:()=>p,frontMatter:()=>a,metadata:()=>s,toc:()=>u});var s=o(2421),n=o(4848),r=o(8453);const a={slug:"first-blog-post",title:"First Blog Post",authors:["slorber","yangshun"],tags:["hola","docusaurus"]},i=void 0,l={authorsImageUrls:[void 0,void 0]},u=[];function c(t){const e={p:"p",...(0,r.R)(),...t.components};return(0,n.jsx)(e.p,{children:"Lorem ipsum dolor sit amet..."})}function p(t={}){const{wrapper:e}={...(0,r.R)(),...t.components};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(c,{...t})}):c(t)}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[711],{4750:(e,r,t)=>{t.r(r),t.d(r,{default:()=>m});t(6540);var a=t(6289),n=t(539),s=t(1082),i=t(8569),c=t(1410),l=t(9303),o=t(4848);function d(e){let{year:r,posts:t}=e;const n=(0,i.i)({day:"numeric",month:"long",timeZone:"UTC"});return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(l.A,{as:"h3",id:r,children:r}),(0,o.jsx)("ul",{children:t.map((e=>{return(0,o.jsx)("li",{children:(0,o.jsxs)(a.A,{to:e.metadata.permalink,children:[(r=e.metadata.date,n.format(new Date(r)))," - ",e.metadata.title]})},e.metadata.date);var r}))})]})}function h(e){let{years:r}=e;return(0,o.jsx)("section",{className:"margin-vert--lg",children:(0,o.jsx)("div",{className:"container",children:(0,o.jsx)("div",{className:"row",children:r.map(((e,r)=>(0,o.jsx)("div",{className:"col col--4 margin-vert--lg",children:(0,o.jsx)(d,{...e})},r)))})})})}function m(e){let{archive:r}=e;const t=(0,n.T)({id:"theme.blog.archive.title",message:"Archive",description:"The page & hero title of the blog archive page"}),a=(0,n.T)({id:"theme.blog.archive.description",message:"Archive",description:"The page & hero description of the blog archive page"}),i=function(e){const r=e.reduce(((e,r)=>{const t=r.metadata.date.split("-")[0],a=e.get(t)??[];return e.set(t,[r,...a])}),new Map);return Array.from(r,(e=>{let[r,t]=e;return{year:r,posts:t}}))}(r.blogPosts);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.be,{title:t,description:a}),(0,o.jsxs)(c.A,{children:[(0,o.jsx)("header",{className:"hero hero--primary",children:(0,o.jsxs)("div",{className:"container",children:[(0,o.jsx)(l.A,{as:"h1",className:"hero__title",children:t}),(0,o.jsx)("p",{className:"hero__subtitle",children:a})]})}),(0,o.jsx)("main",{children:i.length>0&&(0,o.jsx)(h,{years:i})})]})]})}},8569:(e,r,t)=>{t.d(r,{i:()=>n});var a=t(797);function n(e){void 0===e&&(e={});const{i18n:{currentLocale:r}}=(0,a.A)(),t=function(){const{i18n:{currentLocale:e,localeConfigs:r}}=(0,a.A)();return r[e].calendar}();return new Intl.DateTimeFormat(r,{calendar:t,...e})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[643],{1865:(e,t,a)=>{a.d(t,{A:()=>i});a(6540);var n=a(4164),s=a(6289),r=a(4848);function i(e){const{permalink:t,title:a,subLabel:i,isNext:l}=e;return(0,r.jsxs)(s.A,{className:(0,n.A)("pagination-nav__link",l?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t,children:[i&&(0,r.jsx)("div",{className:"pagination-nav__sublabel",children:i}),(0,r.jsx)("div",{className:"pagination-nav__label",children:a})]})}},3953:(e,t,a)=>{a.d(t,{A:()=>l});a(6540);var n=a(4164),s=a(6289);const r={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var i=a(4848);function l(e){let{permalink:t,label:a,count:l,description:o}=e;return(0,i.jsxs)(s.A,{href:t,title:o,className:(0,n.A)(r.tag,l?r.tagWithCount:r.tagRegular),children:[a,l&&(0,i.jsx)("span",{children:l})]})}},4005:(e,t,a)=>{a.d(t,{A:()=>i});a(6540);var n=a(3750),s=a(8189),r=a(4848);function i(e){let{items:t,component:a=s.A}=e;return(0,r.jsx)(r.Fragment,{children:t.map((e=>{let{content:t}=e;return(0,r.jsx)(n.in,{content:t,children:(0,r.jsx)(a,{children:(0,r.jsx)(t,{})})},t.metadata.permalink)}))})}},5631:(e,t,a)=>{a.r(t),a.d(t,{default:()=>j});a(6540);var n=a(4164),s=a(797),r=a(1082),i=a(204),l=a(569),o=a(7448),c=a(7220),d=a(4005),g=a(7143),m=a(3750),u=a(4848);function h(e){const t=(0,m.kJ)(e);return(0,u.jsx)(g.A,{children:(0,u.jsx)("script",{type:"application/ld+json",children:JSON.stringify(t)})})}function p(e){const{metadata:t}=e,{siteConfig:{title:a}}=(0,s.A)(),{blogDescription:n,blogTitle:i,permalink:l}=t,o="/"===l?a:i;return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(r.be,{title:o,description:n}),(0,u.jsx)(c.A,{tag:"blog_posts_list"})]})}function x(e){const{metadata:t,items:a,sidebar:n}=e;return(0,u.jsxs)(l.A,{sidebar:n,children:[(0,u.jsx)(d.A,{items:a}),(0,u.jsx)(o.A,{metadata:t})]})}function j(e){return(0,u.jsxs)(r.e3,{className:(0,n.A)(i.G.wrapper.blogPages,i.G.page.blogListPage),children:[(0,u.jsx)(p,{...e}),(0,u.jsx)(h,{...e}),(0,u.jsx)(x,{...e})]})}},6239:(e,t,a)=>{a.d(t,{A:()=>o});a(6540);var n=a(4164),s=a(539),r=a(3953);const i={tags:"tags_jXut",tag:"tag_QGVx"};var l=a(4848);function o(e){let{tags:t}=e;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("b",{children:(0,l.jsx)(s.A,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list",children:"Tags:"})}),(0,l.jsx)("ul",{className:(0,n.A)(i.tags,"padding--none","margin-left--sm"),children:t.map((e=>(0,l.jsx)("li",{className:i.tag,children:(0,l.jsx)(r.A,{...e})},e.permalink)))})]})}},7448:(e,t,a)=>{a.d(t,{A:()=>i});a(6540);var n=a(539),s=a(1865),r=a(4848);function i(e){const{metadata:t}=e,{previousPage:a,nextPage:i}=t;return(0,r.jsxs)("nav",{className:"pagination-nav","aria-label":(0,n.T)({id:"theme.blog.paginator.navAriaLabel",message:"Blog list page navigation",description:"The ARIA label for the blog pagination"}),children:[a&&(0,r.jsx)(s.A,{permalink:a,title:(0,r.jsx)(n.A,{id:"theme.blog.paginator.newerEntries",description:"The label used to navigate to the newer blog posts page (previous page)",children:"Newer entries"})}),i&&(0,r.jsx)(s.A,{permalink:i,title:(0,r.jsx)(n.A,{id:"theme.blog.paginator.olderEntries",description:"The label used to navigate to the older blog posts page (next page)",children:"Older entries"}),isNext:!0})]})}},8189:(e,t,a)=>{a.d(t,{A:()=>U});a(6540);var n=a(4164),s=a(3750),r=a(4848);function i(e){let{children:t,className:a}=e;return(0,r.jsx)("article",{className:a,children:t})}var l=a(6289);const o={title:"title_f1Hy"};function c(e){let{className:t}=e;const{metadata:a,isBlogPostPage:i}=(0,s.e7)(),{permalink:c,title:d}=a,g=i?"h1":"h2";return(0,r.jsx)(g,{className:(0,n.A)(o.title,t),children:i?d:(0,r.jsx)(l.A,{to:c,children:d})})}var d=a(539),g=a(1430),m=a(8569);const u={container:"container_mt6G"};function h(e){let{readingTime:t}=e;const a=function(){const{selectMessage:e}=(0,g.W)();return t=>{const a=Math.ceil(t);return e(a,(0,d.T)({id:"theme.blog.post.readingTime.plurals",description:'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One min read|{readingTime} min read"},{readingTime:a}))}}();return(0,r.jsx)(r.Fragment,{children:a(t)})}function p(e){let{date:t,formattedDate:a}=e;return(0,r.jsx)("time",{dateTime:t,children:a})}function x(){return(0,r.jsx)(r.Fragment,{children:" \xb7 "})}function j(e){let{className:t}=e;const{metadata:a}=(0,s.e7)(),{date:i,readingTime:l}=a,o=(0,m.i)({day:"numeric",month:"long",year:"numeric",timeZone:"UTC"});return(0,r.jsxs)("div",{className:(0,n.A)(u.container,"margin-vert--md",t),children:[(0,r.jsx)(p,{date:i,formattedDate:(c=i,o.format(new Date(c)))}),void 0!==l&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(x,{}),(0,r.jsx)(h,{readingTime:l})]})]});var c}var A=a(5921);const b={authorCol:"authorCol_Hf19",imageOnlyAuthorRow:"imageOnlyAuthorRow_pa_O",imageOnlyAuthorCol:"imageOnlyAuthorCol_G86a"};function f(e){let{className:t}=e;const{metadata:{authors:a},assets:i}=(0,s.e7)();if(0===a.length)return null;const l=a.every((e=>{let{name:t}=e;return!t})),o=1===a.length;return(0,r.jsx)("div",{className:(0,n.A)("margin-top--md margin-bottom--sm",l?b.imageOnlyAuthorRow:"row",t),children:a.map(((e,t)=>(0,r.jsx)("div",{className:(0,n.A)(!l&&(o?"col col--12":"col col--6"),l?b.imageOnlyAuthorCol:b.authorCol),children:(0,r.jsx)(A.A,{author:{...e,imageURL:i.authorsImageUrls[t]??e.imageURL}})},t)))})}function v(){return(0,r.jsxs)("header",{children:[(0,r.jsx)(c,{}),(0,r.jsx)(j,{}),(0,r.jsx)(f,{})]})}var N=a(99),_=a(4522);function T(e){let{children:t,className:a}=e;const{isBlogPostPage:i}=(0,s.e7)();return(0,r.jsx)("div",{id:i?N.LU:void 0,className:(0,n.A)("markdown",a),children:(0,r.jsx)(_.A,{children:t})})}var k=a(204),w=a(5783),y=a(6239);function P(){return(0,r.jsx)("b",{children:(0,r.jsx)(d.A,{id:"theme.blog.post.readMore",description:"The label used in blog post item excerpts to link to full blog posts",children:"Read more"})})}function R(e){const{blogPostTitle:t,...a}=e;return(0,r.jsx)(l.A,{"aria-label":(0,d.T)({message:"Read more about {title}",id:"theme.blog.post.readMoreLabel",description:"The ARIA label for the link to full blog posts from excerpts"},{title:t}),...a,children:(0,r.jsx)(P,{})})}function C(){const{metadata:e,isBlogPostPage:t}=(0,s.e7)(),{tags:a,title:i,editUrl:l,hasTruncateMarker:o,lastUpdatedBy:c,lastUpdatedAt:d}=e,g=!t&&o,m=a.length>0;if(!(m||g||l))return null;if(t){const e=!!(l||d||c);return(0,r.jsxs)("footer",{className:"docusaurus-mt-lg",children:[m&&(0,r.jsx)("div",{className:(0,n.A)("row","margin-top--sm",k.G.blog.blogFooterEditMetaRow),children:(0,r.jsx)("div",{className:"col",children:(0,r.jsx)(y.A,{tags:a})})}),e&&(0,r.jsx)(w.A,{className:(0,n.A)("margin-top--sm",k.G.blog.blogFooterEditMetaRow),editUrl:l,lastUpdatedAt:d,lastUpdatedBy:c})]})}return(0,r.jsxs)("footer",{className:"row docusaurus-mt-lg",children:[m&&(0,r.jsx)("div",{className:(0,n.A)("col",{"col--9":g}),children:(0,r.jsx)(y.A,{tags:a})}),g&&(0,r.jsx)("div",{className:(0,n.A)("col text--right",{"col--3":m}),children:(0,r.jsx)(R,{blogPostTitle:i,to:e.permalink})})]})}function U(e){let{children:t,className:a}=e;const l=function(){const{isBlogPostPage:e}=(0,s.e7)();return e?void 0:"margin-bottom--xl"}();return(0,r.jsxs)(i,{className:(0,n.A)(l,a),children:[(0,r.jsx)(v,{}),(0,r.jsx)(T,{children:t}),(0,r.jsx)(C,{})]})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[235],{8552:s=>{s.exports=JSON.parse('{"name":"docusaurus-plugin-content-pages","id":"default"}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[98],{7419:(n,e,s)=>{s.r(e),s.d(e,{default:()=>d});s(6540);var o=s(1082);function r(n,e){return`docs-${n}-${e}`}var t=s(1858),i=s(2831),c=s(7220),u=s(4848);function l(n){const{version:e}=n;return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(c.A,{version:e.version,tag:r(e.pluginId,e.version)}),(0,u.jsx)(o.be,{children:e.noIndex&&(0,u.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})]})}function a(n){const{version:e,route:s}=n;return(0,u.jsx)(o.e3,{className:e.className,children:(0,u.jsx)(t.n,{version:e,children:(0,i.v)(s.routes)})})}function d(n){return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(l,{...n}),(0,u.jsx)(a,{...n})]})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[48],{1841:(e,t,n)=>{n.r(t),n.d(t,{default:()=>pe});var a=n(6540),o=n(4164),i=n(1082),s=n(204),l=n(3751),r=n(2306),c=n(539),d=n(5627),u=n(7685);const m={backToTopButton:"backToTopButton_sjWU",backToTopButtonShow:"backToTopButtonShow_xfvO"};var h=n(4848);function b(){const{shown:e,scrollToTop:t}=function(e){let{threshold:t}=e;const[n,o]=(0,a.useState)(!1),i=(0,a.useRef)(!1),{startScroll:s,cancelScroll:l}=(0,d.gk)();return(0,d.Mq)(((e,n)=>{let{scrollY:a}=e;const s=n?.scrollY;s&&(i.current?i.current=!1:a>=s?(l(),o(!1)):a<t?o(!1):a+window.innerHeight<document.documentElement.scrollHeight&&o(!0))})),(0,u.$)((e=>{e.location.hash&&(i.current=!0,o(!1))})),{shown:n,scrollToTop:()=>s(0)}}({threshold:300});return(0,h.jsx)("button",{"aria-label":(0,c.T)({id:"theme.BackToTopButton.buttonAriaLabel",message:"Scroll back to top",description:"The ARIA label for the back to top button"}),className:(0,o.A)("clean-btn",s.G.common.backToTopButton,m.backToTopButton,e&&m.backToTopButtonShow),type:"button",onClick:t})}var p=n(4924),x=n(6347),f=n(6682),j=n(3115),v=n(2862);function _(e){return(0,h.jsx)("svg",{width:"20",height:"20","aria-hidden":"true",...e,children:(0,h.jsxs)("g",{fill:"#7a7a7a",children:[(0,h.jsx)("path",{d:"M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"}),(0,h.jsx)("path",{d:"M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"})]})})}const g="collapseSidebarButton_PEFL",A="collapseSidebarButtonIcon_kv0_";function C(e){let{onClick:t}=e;return(0,h.jsx)("button",{type:"button",title:(0,c.T)({id:"theme.docs.sidebar.collapseButtonTitle",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),"aria-label":(0,c.T)({id:"theme.docs.sidebar.collapseButtonAriaLabel",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),className:(0,o.A)("button button--secondary button--outline",g),onClick:t,children:(0,h.jsx)(_,{className:A})})}var k=n(3380),S=n(6849);const T=Symbol("EmptyContext"),N=a.createContext(T);function I(e){let{children:t}=e;const[n,o]=(0,a.useState)(null),i=(0,a.useMemo)((()=>({expandedItem:n,setExpandedItem:o})),[n]);return(0,h.jsx)(N.Provider,{value:i,children:t})}var y=n(3535),B=n(214),w=n(6289),L=n(9136);function E(e){let{collapsed:t,categoryLabel:n,onClick:a}=e;return(0,h.jsx)("button",{"aria-label":t?(0,c.T)({id:"theme.DocSidebarItem.expandCategoryAriaLabel",message:"Expand sidebar category '{label}'",description:"The ARIA label to expand the sidebar category"},{label:n}):(0,c.T)({id:"theme.DocSidebarItem.collapseCategoryAriaLabel",message:"Collapse sidebar category '{label}'",description:"The ARIA label to collapse the sidebar category"},{label:n}),"aria-expanded":!t,type:"button",className:"clean-btn menu__caret",onClick:a})}function M(e){let{item:t,onItemClick:n,activePath:i,level:r,index:c,...d}=e;const{items:u,label:m,collapsible:b,className:p,href:x}=t,{docs:{sidebar:{autoCollapseCategories:f}}}=(0,j.p)(),v=function(e){const t=(0,L.A)();return(0,a.useMemo)((()=>e.href&&!e.linkUnlisted?e.href:!t&&e.collapsible?(0,l.Nr)(e):void 0),[e,t])}(t),_=(0,l.w8)(t,i),g=(0,B.ys)(x,i),{collapsed:A,setCollapsed:C}=(0,y.u)({initialState:()=>!!b&&(!_&&t.collapsed)}),{expandedItem:k,setExpandedItem:I}=function(){const e=(0,a.useContext)(N);if(e===T)throw new S.dV("DocSidebarItemsExpandedStateProvider");return e}(),M=function(e){void 0===e&&(e=!A),I(e?null:c),C(e)};return function(e){let{isActive:t,collapsed:n,updateCollapsed:o}=e;const i=(0,S.ZC)(t);(0,a.useEffect)((()=>{t&&!i&&n&&o(!1)}),[t,i,n,o])}({isActive:_,collapsed:A,updateCollapsed:M}),(0,a.useEffect)((()=>{b&&null!=k&&k!==c&&f&&C(!0)}),[b,k,c,C,f]),(0,h.jsxs)("li",{className:(0,o.A)(s.G.docs.docSidebarItemCategory,s.G.docs.docSidebarItemCategoryLevel(r),"menu__list-item",{"menu__list-item--collapsed":A},p),children:[(0,h.jsxs)("div",{className:(0,o.A)("menu__list-item-collapsible",{"menu__list-item-collapsible--active":g}),children:[(0,h.jsx)(w.A,{className:(0,o.A)("menu__link",{"menu__link--sublist":b,"menu__link--sublist-caret":!x&&b,"menu__link--active":_}),onClick:b?e=>{n?.(t),x?M(!1):(e.preventDefault(),M())}:()=>{n?.(t)},"aria-current":g?"page":void 0,role:b&&!x?"button":void 0,"aria-expanded":b&&!x?!A:void 0,href:b?v??"#":v,...d,children:m}),x&&b&&(0,h.jsx)(E,{collapsed:A,categoryLabel:m,onClick:e=>{e.preventDefault(),M()}})]}),(0,h.jsx)(y.N,{lazy:!0,as:"ul",className:"menu__list",collapsed:A,children:(0,h.jsx)(V,{items:u,tabIndex:A?-1:0,onItemClick:n,activePath:i,level:r+1})})]})}var H=n(2887),G=n(5891);const P="menuExternalLink_NmtK";function R(e){let{item:t,onItemClick:n,activePath:a,level:i,index:r,...c}=e;const{href:d,label:u,className:m,autoAddBaseUrl:b}=t,p=(0,l.w8)(t,a),x=(0,H.A)(d);return(0,h.jsx)("li",{className:(0,o.A)(s.G.docs.docSidebarItemLink,s.G.docs.docSidebarItemLinkLevel(i),"menu__list-item",m),children:(0,h.jsxs)(w.A,{className:(0,o.A)("menu__link",!x&&P,{"menu__link--active":p}),autoAddBaseUrl:b,"aria-current":p?"page":void 0,to:d,...x&&{onClick:n?()=>n(t):void 0},...c,children:[u,!x&&(0,h.jsx)(G.A,{})]})},u)}const W="menuHtmlItem_M9Kj";function D(e){let{item:t,level:n,index:a}=e;const{value:i,defaultStyle:l,className:r}=t;return(0,h.jsx)("li",{className:(0,o.A)(s.G.docs.docSidebarItemLink,s.G.docs.docSidebarItemLinkLevel(n),l&&[W,"menu__list-item"],r),dangerouslySetInnerHTML:{__html:i}},a)}function F(e){let{item:t,...n}=e;switch(t.type){case"category":return(0,h.jsx)(M,{item:t,...n});case"html":return(0,h.jsx)(D,{item:t,...n});default:return(0,h.jsx)(R,{item:t,...n})}}function U(e){let{items:t,...n}=e;const a=(0,l.Y)(t,n.activePath);return(0,h.jsx)(I,{children:a.map(((e,t)=>(0,h.jsx)(F,{item:e,index:t,...n},t)))})}const V=(0,a.memo)(U),Y="menu_SIkG",K="menuWithAnnouncementBar_GW3s";function z(e){let{path:t,sidebar:n,className:i}=e;const l=function(){const{isActive:e}=(0,k.M)(),[t,n]=(0,a.useState)(e);return(0,d.Mq)((t=>{let{scrollY:a}=t;e&&n(0===a)}),[e]),e&&t}();return(0,h.jsx)("nav",{"aria-label":(0,c.T)({id:"theme.docs.sidebar.navAriaLabel",message:"Docs sidebar",description:"The ARIA label for the sidebar navigation"}),className:(0,o.A)("menu thin-scrollbar",Y,l&&K,i),children:(0,h.jsx)("ul",{className:(0,o.A)(s.G.docs.docSidebarMenu,"menu__list"),children:(0,h.jsx)(V,{items:n,activePath:t,level:1})})})}const q="sidebar_njMd",O="sidebarWithHideableNavbar_wUlq",J="sidebarHidden_VK0M",Q="sidebarLogo_isFc";function X(e){let{path:t,sidebar:n,onCollapse:a,isHidden:i}=e;const{navbar:{hideOnScroll:s},docs:{sidebar:{hideable:l}}}=(0,j.p)();return(0,h.jsxs)("div",{className:(0,o.A)(q,s&&O,i&&J),children:[s&&(0,h.jsx)(v.A,{tabIndex:-1,className:Q}),(0,h.jsx)(z,{path:t,sidebar:n}),l&&(0,h.jsx)(C,{onClick:a})]})}const Z=a.memo(X);var $=n(3065),ee=n(4635);const te=e=>{let{sidebar:t,path:n}=e;const a=(0,ee.M)();return(0,h.jsx)("ul",{className:(0,o.A)(s.G.docs.docSidebarMenu,"menu__list"),children:(0,h.jsx)(V,{items:t,activePath:n,onItemClick:e=>{"category"===e.type&&e.href&&a.toggle(),"link"===e.type&&a.toggle()},level:1})})};function ne(e){return(0,h.jsx)($.GX,{component:te,props:e})}const ae=a.memo(ne);function oe(e){const t=(0,f.l)(),n="desktop"===t||"ssr"===t,a="mobile"===t;return(0,h.jsxs)(h.Fragment,{children:[n&&(0,h.jsx)(Z,{...e}),a&&(0,h.jsx)(ae,{...e})]})}const ie={expandButton:"expandButton_TmdG",expandButtonIcon:"expandButtonIcon_i1dp"};function se(e){let{toggleSidebar:t}=e;return(0,h.jsx)("div",{className:ie.expandButton,title:(0,c.T)({id:"theme.docs.sidebar.expandButtonTitle",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),"aria-label":(0,c.T)({id:"theme.docs.sidebar.expandButtonAriaLabel",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),tabIndex:0,role:"button",onKeyDown:t,onClick:t,children:(0,h.jsx)(_,{className:ie.expandButtonIcon})})}const le={docSidebarContainer:"docSidebarContainer_YfHR",docSidebarContainerHidden:"docSidebarContainerHidden_DPk8",sidebarViewport:"sidebarViewport_aRkj"};function re(e){let{children:t}=e;const n=(0,r.t)();return(0,h.jsx)(a.Fragment,{children:t},n?.name??"noSidebar")}function ce(e){let{sidebar:t,hiddenSidebarContainer:n,setHiddenSidebarContainer:i}=e;const{pathname:l}=(0,x.zy)(),[r,c]=(0,a.useState)(!1),d=(0,a.useCallback)((()=>{r&&c(!1),!r&&(0,p.O)()&&c(!0),i((e=>!e))}),[i,r]);return(0,h.jsx)("aside",{className:(0,o.A)(s.G.docs.docSidebarContainer,le.docSidebarContainer,n&&le.docSidebarContainerHidden),onTransitionEnd:e=>{e.currentTarget.classList.contains(le.docSidebarContainer)&&n&&c(!0)},children:(0,h.jsx)(re,{children:(0,h.jsxs)("div",{className:(0,o.A)(le.sidebarViewport,r&&le.sidebarViewportHidden),children:[(0,h.jsx)(oe,{sidebar:t,path:l,onCollapse:d,isHidden:r}),r&&(0,h.jsx)(se,{toggleSidebar:d})]})})})}const de={docMainContainer:"docMainContainer_TBSr",docMainContainerEnhanced:"docMainContainerEnhanced_lQrH",docItemWrapperEnhanced:"docItemWrapperEnhanced_JWYK"};function ue(e){let{hiddenSidebarContainer:t,children:n}=e;const a=(0,r.t)();return(0,h.jsx)("main",{className:(0,o.A)(de.docMainContainer,(t||!a)&&de.docMainContainerEnhanced),children:(0,h.jsx)("div",{className:(0,o.A)("container padding-top--md padding-bottom--lg",de.docItemWrapper,t&&de.docItemWrapperEnhanced),children:n})})}const me={docRoot:"docRoot_UBD9",docsWrapper:"docsWrapper_hBAB"};function he(e){let{children:t}=e;const n=(0,r.t)(),[o,i]=(0,a.useState)(!1);return(0,h.jsxs)("div",{className:me.docsWrapper,children:[(0,h.jsx)(b,{}),(0,h.jsxs)("div",{className:me.docRoot,children:[n&&(0,h.jsx)(ce,{sidebar:n.items,hiddenSidebarContainer:o,setHiddenSidebarContainer:i}),(0,h.jsx)(ue,{hiddenSidebarContainer:o,children:t})]})]})}var be=n(5932);function pe(e){const t=(0,l.B5)(e);if(!t)return(0,h.jsx)(be.A,{});const{docElement:n,sidebarName:a,sidebarItems:c}=t;return(0,h.jsx)(i.e3,{className:(0,o.A)(s.G.page.docsDocPage),children:(0,h.jsx)(r.V,{name:a,items:c,children:(0,h.jsx)(he,{children:n})})})}},5932:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var a=n(4164),o=n(539),i=n(9303),s=n(4848);function l(e){let{className:t}=e;return(0,s.jsx)("main",{className:(0,a.A)("container margin-vert--xl",t),children:(0,s.jsx)("div",{className:"row",children:(0,s.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,s.jsx)(i.A,{as:"h1",className:"hero__title",children:(0,s.jsx)(o.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,s.jsx)("p",{children:(0,s.jsx)(o.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,s.jsx)("p",{children:(0,s.jsx)(o.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[742],{7093:o=>{o.exports=JSON.parse('{"name":"docusaurus-plugin-content-docs","id":"default"}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[903],{1912:o=>{o.exports=JSON.parse('{"blogBasePath":"/blog","blogTitle":"Blog","authorsListPath":"/blog/authors"}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[146],{9328:o=>{o.exports=JSON.parse('{"metadata":{"permalink":"/blog","page":1,"postsPerPage":10,"totalPages":1,"totalCount":4,"blogDescription":"Blog","blogTitle":"Blog"}}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[634],{9179:(e,t,r)=>{r.r(t),r.d(t,{default:()=>s});r(6540);var n=r(1410),o=(r(6289),r(5604)),i=r(4848);function s(){return(0,i.jsx)(n.A,{title:"John Potter's Portfolio",children:(0,i.jsxs)("main",{style:{padding:"20px",display:"flex",gap:"40px",maxWidth:"1200px",margin:"0 auto"},children:[(0,i.jsxs)("div",{style:{flex:"0 0 30%",textAlign:"center",padding:"0",borderRadius:"8px",color:"#222222"},children:[(0,i.jsxs)("div",{style:{backgroundColor:"#FFF5E1",padding:"20px",borderRadius:"8px 8px 0 0",borderBottom:"1px solid #ddd",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",minHeight:"150px",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.1)"},children:[(0,i.jsx)("h2",{style:{margin:"0"},children:"John M. Potter"}),(0,i.jsx)("div",{style:{lineHeight:"1.2",marginTop:"10px"},children:(0,i.jsx)("span",{children:"Technical Writer & Enthusiast"})})]}),(0,i.jsxs)("div",{style:{backgroundColor:"#ffffff",padding:"20px",borderRadius:"0 0 8px 8px"},children:[(0,i.jsxs)("div",{style:{marginTop:"30px"},children:[(0,i.jsx)("h4",{style:{margin:"0 0 10px",fontSize:"1.1rem"},children:"Connect"}),(0,i.jsx)("h5",{style:{margin:"20px 0 5px"},children:(0,i.jsx)("a",{href:"mailto:johnpottergr@gmail.com",style:{color:"#222222",textDecoration:"none"},children:"johnpottergr@gmail.com"})}),(0,i.jsx)("h5",{style:{margin:"20px 0 5px"},children:(0,i.jsx)("a",{href:"tel:+16167452985",style:{color:"#222222",textDecoration:"none"},children:"616.745.2985"})}),(0,i.jsx)("h5",{style:{margin:"20px 0 5px"},children:"Grand Rapids, MI"})]}),(0,i.jsx)("div",{style:{marginTop:"50px",display:"flex",justifyContent:"center"},children:(0,i.jsxs)("a",{href:"https://youtu.be/7DYhiD3IuxE?si=JRLkSk2bOVUUbwPf",style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"10px",border:"1px solid #222222",borderRadius:"8px",backgroundColor:"#ffffff",color:"#2E7D32",textDecoration:"none",fontSize:"1rem",fontWeight:"500",transition:"background-color 0.3s, color 0.3s, transform 0.2s",maxWidth:"80%",textAlign:"center"},onMouseEnter:e=>{e.target.style.backgroundColor="#E8F5E9",e.target.style.color="#2E7D32",e.target.style.transform="scale(1.02)"},onMouseLeave:e=>{e.target.style.backgroundColor="#ffffff",e.target.style.color="#2E7D32",e.target.style.transform="scale(1)"},children:[(0,i.jsx)(o.gSK,{style:{marginRight:"8px",fontSize:"0.9rem"}}),"The Best Recommendation You'll Ever See"]})})]})]}),(0,i.jsxs)("div",{style:{flex:"1",textAlign:"left"},children:[(0,i.jsxs)("div",{style:{display:"flex",alignItems:"flex-start"},children:[(0,i.jsxs)("div",{style:{flex:"1"},children:[(0,i.jsx)("p",{style:{margin:"0 0 10px 0"},children:"Welcome to my portfolio! I\u2019m a technical writer with 7+ years of experience in fintech, blockchain, and more. I\u2019ve published 200+ articles on AI, quantum computing, and cryptocurrency.              "}),(0,i.jsx)("p",{style:{margin:"0"},children:"One project I\u2019m proud of was turning a complex machine learning study into a series of blog posts that made the topic approachable. I enjoy working with clients to create clear, engaging content\u2014whether that\u2019s articles, guides, or documentation\u2014that resonates with users and supports business goals. While most of my work has focused on articles, I\u2019ve also contributed to technical documentation and am eager to take on more of it."})]}),(0,i.jsx)("img",{src:"/img/me-2.jpeg",alt:"John Potter",style:{width:"100%",maxWidth:"200px",display:"block",paddingLeft:"20px"}})]}),(0,i.jsx)("p",{}),(0,i.jsx)("p",{children:"Explore my full portfolio"}),(0,i.jsx)("h3",{children:"Documentation Skills"}),(0,i.jsxs)("ul",{children:[(0,i.jsxs)("li",{children:["Markdown: ",(0,i.jsx)("a",{href:"https://github.com/EdifyContent",children:"Explore my GitHub contributions at Edify"}),". Over 35+ documentation commits"]}),(0,i.jsxs)("li",{children:["Software: Authored the ",(0,i.jsx)("a",{href:"/django.pdf",children:"Django App"})," and ",(0,i.jsx)("a",{href:"/NodeJS.pdf",children:"NodeJS Deploy Guide"})," for an Edify client"]}),(0,i.jsx)("li",{children:"API: Currently working on API documentation"}),(0,i.jsxs)("li",{children:["Samples: ",(0,i.jsx)("a",{href:"/Release.pdf",children:"QuickSwap Release Notes"}),", ",(0,i.jsx)("a",{href:"/Proposal.pdf",children:"Program Proposal"}),","," ",(0,i.jsx)("a",{href:"/Guide.pdf",children:"SaucerSwap Beginner's Guide"})]})]}),(0,i.jsx)("h3",{children:"Current Projects"}),(0,i.jsxs)("ul",{children:[(0,i.jsxs)("li",{children:[(0,i.jsx)("a",{href:"https://johnpottergr.substack.com/",children:"Fintech Pulse: Stocks to Watch"}),": A blog where I analyze trending stocks (currently on hold)"]}),(0,i.jsxs)("li",{children:[(0,i.jsx)("a",{href:"https://medium.com/@SaucerSwap",children:"Weekly guest blogger for SaucerSwap Labs"}),": I write about decentralized finance for a DEX on the Hedera Blockchain"]}),(0,i.jsxs)("li",{children:[(0,i.jsx)("a",{href:"https://support.microsoft.com/en-us/office/sharepoint-video-training-cb8ef501-84db-4427-ac77-ec2009fb8e23",children:"Learning SharePoint"}),","," ",(0,i.jsx)("a",{href:"https://www.tableau.com/learn/training",children:"Tableau"}),", and"," ",(0,i.jsx)("a",{href:"https://learn.microsoft.com/en-us/training/browse/?products=power-bi",children:"PowerBI"}),": Great resources!"]})]})]})]})})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[634],{9179:(e,t,r)=>{r.r(t),r.d(t,{default:()=>l});r(6540);var n=r(1410),o=r(6289),i=r(5604),s=r(4848);function l(){return(0,s.jsx)(n.A,{title:"John Potter's Portfolio",children:(0,s.jsxs)("main",{style:{padding:"20px",display:"flex",gap:"40px",maxWidth:"1200px",margin:"0 auto"},children:[(0,s.jsxs)("div",{style:{flex:"0 0 30%",textAlign:"center",padding:"0",borderRadius:"8px",color:"#222222"},children:[(0,s.jsxs)("div",{style:{backgroundColor:"#FFF5E1",padding:"20px",borderRadius:"8px 8px 0 0",borderBottom:"1px solid #ddd",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",minHeight:"150px",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.1)"},children:[(0,s.jsx)("h2",{style:{margin:"0"},children:"John M. Potter"}),(0,s.jsx)("div",{style:{lineHeight:"1.2",marginTop:"10px"},children:(0,s.jsx)("span",{children:"Technical Writer & Enthusiast"})})]}),(0,s.jsxs)("div",{style:{backgroundColor:"#ffffff",padding:"20px",borderRadius:"0 0 8px 8px"},children:[(0,s.jsxs)("div",{style:{marginTop:"30px"},children:[(0,s.jsx)("h4",{style:{margin:"0 0 10px",fontSize:"1.1rem"},children:"Connect"}),(0,s.jsx)("h5",{style:{margin:"20px 0 5px"},children:(0,s.jsx)("a",{href:"mailto:johnpottergr@gmail.com",style:{color:"#222222",textDecoration:"none"},children:"johnpottergr@gmail.com"})}),(0,s.jsx)("h5",{style:{margin:"20px 0 5px"},children:(0,s.jsx)("a",{href:"tel:+16167452985",style:{color:"#222222",textDecoration:"none"},children:"616.745.2985"})}),(0,s.jsx)("h5",{style:{margin:"20px 0 5px"},children:"Grand Rapids, MI"})]}),(0,s.jsx)("div",{style:{marginTop:"50px",display:"flex",justifyContent:"center"},children:(0,s.jsxs)("a",{href:"https://youtu.be/7DYhiD3IuxE?si=JRLkSk2bOVUUbwPf",style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"10px",border:"1px solid #222222",borderRadius:"8px",backgroundColor:"#ffffff",color:"#2E7D32",textDecoration:"none",fontSize:"1rem",fontWeight:"500",transition:"background-color 0.3s, color 0.3s, transform 0.2s",maxWidth:"80%",textAlign:"center"},onMouseEnter:e=>{e.target.style.backgroundColor="#E8F5E9",e.target.style.color="#2E7D32",e.target.style.transform="scale(1.02)"},onMouseLeave:e=>{e.target.style.backgroundColor="#ffffff",e.target.style.color="#2E7D32",e.target.style.transform="scale(1)"},children:[(0,s.jsx)(i.gSK,{style:{marginRight:"8px",fontSize:"0.9rem"}}),"The Best Recommendation You'll Ever See"]})})]})]}),(0,s.jsxs)("div",{style:{flex:"1",textAlign:"left"},children:[(0,s.jsxs)("div",{style:{display:"flex",alignItems:"flex-start"},children:[(0,s.jsxs)("div",{style:{flex:"1"},children:[(0,s.jsx)("p",{style:{margin:"0 0 10px 0"},children:"Welcome to my portfolio! I\u2019m a technical writer with 7+ years of experience in fintech, blockchain, and more. I\u2019ve published 200+ articles on AI, quantum computing, and cryptocurrency.              "}),(0,s.jsx)("p",{style:{margin:"0"},children:"One project I\u2019m proud of was turning a complex machine learning study into a series of blog posts that made the topic approachable. I enjoy working with clients to create clear, engaging content\u2014whether that\u2019s articles, guides, or documentation\u2014that resonates with users and supports business goals. While most of my work has focused on articles, I\u2019ve also contributed to technical documentation and am eager to take on more of it."})]}),(0,s.jsx)("img",{src:"/img/me-2.jpeg",alt:"John Potter",style:{width:"100%",maxWidth:"200px",display:"block",paddingLeft:"20px"}})]}),(0,s.jsx)("p",{}),(0,s.jsx)("p",{children:(0,s.jsx)(o.A,{to:"/portfolio",children:"Explore my full portfolio"})}),(0,s.jsx)("h3",{children:"Documentation Skills"}),(0,s.jsxs)("ul",{children:[(0,s.jsxs)("li",{children:["Markdown: ",(0,s.jsx)("a",{href:"https://github.com/EdifyContent",children:"Explore my GitHub contributions at Edify"}),". Over 35+ documentation commits"]}),(0,s.jsxs)("li",{children:["Software: Authored the ",(0,s.jsx)("a",{href:"/django.pdf",children:"Django App"})," and ",(0,s.jsx)("a",{href:"/NodeJS.pdf",children:"NodeJS Deploy Guide"})," for an Edify client"]}),(0,s.jsx)("li",{children:"API: Currently working on API documentation"}),(0,s.jsxs)("li",{children:["Samples: ",(0,s.jsx)("a",{href:"/Release.pdf",children:"QuickSwap Release Notes"}),", ",(0,s.jsx)("a",{href:"/Proposal.pdf",children:"Program Proposal"}),","," ",(0,s.jsx)("a",{href:"/Guide.pdf",children:"SaucerSwap Beginner's Guide"})]})]}),(0,s.jsx)("h3",{children:"Current Projects"}),(0,s.jsxs)("ul",{children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("a",{href:"https://johnpottergr.substack.com/",children:"Fintech Pulse: Stocks to Watch"}),": A blog where I analyze trending stocks (currently on hold)"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("a",{href:"https://medium.com/@SaucerSwap",children:"Weekly guest blogger for SaucerSwap Labs"}),": I write about decentralized finance for a DEX on the Hedera Blockchain"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("a",{href:"https://support.microsoft.com/en-us/office/sharepoint-video-training-cb8ef501-84db-4427-ac77-ec2009fb8e23",children:"Learning SharePoint"}),","," ",(0,s.jsx)("a",{href:"https://www.tableau.com/learn/training",children:"Tableau"}),", and"," ",(0,s.jsx)("a",{href:"https://learn.microsoft.com/en-us/training/browse/?products=power-bi",children:"PowerBI"}),": Great resources!"]})]})]})]})})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[794],{4971:e=>{e.exports=JSON.parse('{"author":{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber","count":3},"listMetadata":{"permalink":"/blog/authors/all-sebastien-lorber-articles","page":1,"postsPerPage":10,"totalPages":1,"totalCount":3,"blogDescription":"Blog","blogTitle":"Blog"}}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[508],{3488:(e,s,r)=>{r.r(s),r.d(s,{default:()=>i});r(6540);var n=r(1410),h=r(4848);function i(){return(0,h.jsx)(n.A,{title:"Resume",children:(0,h.jsxs)("div",{style:{padding:"20px"},children:[(0,h.jsx)("h1",{children:"Resume"}),(0,h.jsxs)("p",{children:["View my resume here: ",(0,h.jsx)("a",{href:"/resume3.pdf",children:"Download Resume (PDF)"})]})]})})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[249],{665:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var a=n(4164),s=n(7289),i=n(204),r=n(2362),l=n(4848);function o(e){let{className:t}=e;return(0,l.jsx)(r.A,{type:"caution",title:(0,l.jsx)(s.Rc,{}),className:(0,a.A)(t,i.G.common.unlistedBanner),children:(0,l.jsx)(s.Uh,{})})}function c(e){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s.AE,{}),(0,l.jsx)(o,{...e})]})}},1021:(e,t,n)=>{n.d(t,{A:()=>x});var a=n(6540),s=n(3115);function i(e){const t=e.map((e=>({...e,parentIndex:-1,children:[]}))),n=Array(7).fill(-1);t.forEach(((e,t)=>{const a=n.slice(2,e.level);e.parentIndex=Math.max(...a),n[e.level]=t}));const a=[];return t.forEach((e=>{const{parentIndex:n,...s}=e;n>=0?t[n].children.push(s):a.push(s)})),a}function r(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:a}=e;return t.flatMap((e=>{const t=r({toc:e.children,minHeadingLevel:n,maxHeadingLevel:a});return function(e){return e.level>=n&&e.level<=a}(e)?[{...e,children:t}]:t}))}function l(e){const t=e.getBoundingClientRect();return t.top===t.bottom?l(e.parentNode):t}function o(e,t){let{anchorTopOffset:n}=t;const a=e.find((e=>l(e).top>=n));if(a){return function(e){return e.top>0&&e.bottom<window.innerHeight/2}(l(a))?a:e[e.indexOf(a)-1]??null}return e[e.length-1]??null}function c(){const e=(0,a.useRef)(0),{navbar:{hideOnScroll:t}}=(0,s.p)();return(0,a.useEffect)((()=>{e.current=t?0:document.querySelector(".navbar").clientHeight}),[t]),e}function d(e){const t=(0,a.useRef)(void 0),n=c();(0,a.useEffect)((()=>{if(!e)return()=>{};const{linkClassName:a,linkActiveClassName:s,minHeadingLevel:i,maxHeadingLevel:r}=e;function l(){const e=function(e){return Array.from(document.getElementsByClassName(e))}(a),l=function(e){let{minHeadingLevel:t,maxHeadingLevel:n}=e;const a=[];for(let s=t;s<=n;s+=1)a.push(`h${s}.anchor`);return Array.from(document.querySelectorAll(a.join()))}({minHeadingLevel:i,maxHeadingLevel:r}),c=o(l,{anchorTopOffset:n.current}),d=e.find((e=>c&&c.id===function(e){return decodeURIComponent(e.href.substring(e.href.indexOf("#")+1))}(e)));e.forEach((e=>{!function(e,n){n?(t.current&&t.current!==e&&t.current.classList.remove(s),e.classList.add(s),t.current=e):e.classList.remove(s)}(e,e===d)}))}return document.addEventListener("scroll",l),document.addEventListener("resize",l),l(),()=>{document.removeEventListener("scroll",l),document.removeEventListener("resize",l)}}),[e,n])}var m=n(6289),u=n(4848);function g(e){let{toc:t,className:n,linkClassName:a,isChild:s}=e;return t.length?(0,u.jsx)("ul",{className:s?void 0:n,children:t.map((e=>(0,u.jsxs)("li",{children:[(0,u.jsx)(m.A,{to:`#${e.id}`,className:a??void 0,dangerouslySetInnerHTML:{__html:e.value}}),(0,u.jsx)(g,{isChild:!0,toc:e.children,className:n,linkClassName:a})]},e.id)))}):null}const h=a.memo(g);function x(e){let{toc:t,className:n="table-of-contents table-of-contents__left-border",linkClassName:l="table-of-contents__link",linkActiveClassName:o,minHeadingLevel:c,maxHeadingLevel:m,...g}=e;const x=(0,s.p)(),f=c??x.tableOfContents.minHeadingLevel,p=m??x.tableOfContents.maxHeadingLevel,v=function(e){let{toc:t,minHeadingLevel:n,maxHeadingLevel:s}=e;return(0,a.useMemo)((()=>r({toc:i(t),minHeadingLevel:n,maxHeadingLevel:s})),[t,n,s])}({toc:t,minHeadingLevel:f,maxHeadingLevel:p});return d((0,a.useMemo)((()=>{if(l&&o)return{linkClassName:l,linkActiveClassName:o,minHeadingLevel:f,maxHeadingLevel:p}}),[l,o,f,p])),(0,u.jsx)(h,{toc:v,className:n,linkClassName:l,...g})}},1865:(e,t,n)=>{n.d(t,{A:()=>r});n(6540);var a=n(4164),s=n(6289),i=n(4848);function r(e){const{permalink:t,title:n,subLabel:r,isNext:l}=e;return(0,i.jsxs)(s.A,{className:(0,a.A)("pagination-nav__link",l?"pagination-nav__link--next":"pagination-nav__link--prev"),to:t,children:[r&&(0,i.jsx)("div",{className:"pagination-nav__sublabel",children:r}),(0,i.jsx)("div",{className:"pagination-nav__label",children:n})]})}},2075:(e,t,n)=>{n.d(t,{A:()=>d});n(6540);var a=n(4164),s=n(7289),i=n(204),r=n(2362),l=n(4848);function o(e){let{className:t}=e;return(0,l.jsx)(r.A,{type:"caution",title:(0,l.jsx)(s.Yh,{}),className:(0,a.A)(t,i.G.common.draftBanner),children:(0,l.jsx)(s.TT,{})})}var c=n(665);function d(e){let{metadata:t}=e;const{unlisted:n,frontMatter:a}=t;return(0,l.jsxs)(l.Fragment,{children:[(n||a.unlisted)&&(0,l.jsx)(c.A,{}),a.draft&&(0,l.jsx)(o,{})]})}},3953:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var a=n(4164),s=n(6289);const i={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};var r=n(4848);function l(e){let{permalink:t,label:n,count:l,description:o}=e;return(0,r.jsxs)(s.A,{href:t,title:o,className:(0,a.A)(i.tag,l?i.tagWithCount:i.tagRegular),children:[n,l&&(0,r.jsx)("span",{children:l})]})}},6239:(e,t,n)=>{n.d(t,{A:()=>o});n(6540);var a=n(4164),s=n(539),i=n(3953);const r={tags:"tags_jXut",tag:"tag_QGVx"};var l=n(4848);function o(e){let{tags:t}=e;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("b",{children:(0,l.jsx)(s.A,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list",children:"Tags:"})}),(0,l.jsx)("ul",{className:(0,a.A)(r.tags,"padding--none","margin-left--sm"),children:t.map((e=>(0,l.jsx)("li",{className:r.tag,children:(0,l.jsx)(i.A,{...e})},e.permalink)))})]})}},7191:(e,t,n)=>{n.r(t),n.d(t,{default:()=>j});n(6540);var a=n(4164),s=n(1082),i=n(204),r=n(3750),l=n(569),o=n(8189),c=n(539),d=n(1865),m=n(4848);function u(e){const{nextItem:t,prevItem:n}=e;return(0,m.jsxs)("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,c.T)({id:"theme.blog.post.paginator.navAriaLabel",message:"Blog post page navigation",description:"The ARIA label for the blog posts pagination"}),children:[n&&(0,m.jsx)(d.A,{...n,subLabel:(0,m.jsx)(c.A,{id:"theme.blog.post.paginator.newerPost",description:"The blog post button label to navigate to the newer/previous post",children:"Newer post"})}),t&&(0,m.jsx)(d.A,{...t,subLabel:(0,m.jsx)(c.A,{id:"theme.blog.post.paginator.olderPost",description:"The blog post button label to navigate to the older/next post",children:"Older post"}),isNext:!0})]})}function g(){const{assets:e,metadata:t}=(0,r.e7)(),{title:n,description:a,date:i,tags:l,authors:o,frontMatter:c}=t,{keywords:d}=c,u=e.image??c.image;return(0,m.jsxs)(s.be,{title:c.title_meta??n,description:a,keywords:d,image:u,children:[(0,m.jsx)("meta",{property:"og:type",content:"article"}),(0,m.jsx)("meta",{property:"article:published_time",content:i}),o.some((e=>e.url))&&(0,m.jsx)("meta",{property:"article:author",content:o.map((e=>e.url)).filter(Boolean).join(",")}),l.length>0&&(0,m.jsx)("meta",{property:"article:tag",content:l.map((e=>e.label)).join(",")})]})}var h=n(7143);function x(){const e=(0,r.J_)();return(0,m.jsx)(h.A,{children:(0,m.jsx)("script",{type:"application/ld+json",children:JSON.stringify(e)})})}var f=n(7959),p=n(2075);function v(e){let{sidebar:t,children:n}=e;const{metadata:a,toc:s}=(0,r.e7)(),{nextItem:i,prevItem:c,frontMatter:d}=a,{hide_table_of_contents:g,toc_min_heading_level:h,toc_max_heading_level:x}=d;return(0,m.jsxs)(l.A,{sidebar:t,toc:!g&&s.length>0?(0,m.jsx)(f.A,{toc:s,minHeadingLevel:h,maxHeadingLevel:x}):void 0,children:[(0,m.jsx)(p.A,{metadata:a}),(0,m.jsx)(o.A,{children:n}),(i||c)&&(0,m.jsx)(u,{nextItem:i,prevItem:c})]})}function j(e){const t=e.content;return(0,m.jsx)(r.in,{content:e.content,isBlogPostPage:!0,children:(0,m.jsxs)(s.e3,{className:(0,a.A)(i.G.wrapper.blogPages,i.G.page.blogPostPage),children:[(0,m.jsx)(g,{}),(0,m.jsx)(x,{}),(0,m.jsx)(v,{sidebar:e.sidebar,children:(0,m.jsx)(t,{})})]})})}},7289:(e,t,n)=>{n.d(t,{AE:()=>o,Rc:()=>r,TT:()=>d,Uh:()=>l,Yh:()=>c});n(6540);var a=n(539),s=n(7143),i=n(4848);function r(){return(0,i.jsx)(a.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function l(){return(0,i.jsx)(a.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function o(){return(0,i.jsx)(s.A,{children:(0,i.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function c(){return(0,i.jsx)(a.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function d(){return(0,i.jsx)(a.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}},7959:(e,t,n)=>{n.d(t,{A:()=>c});n(6540);var a=n(4164),s=n(1021);const i={tableOfContents:"tableOfContents_bqdL",docItemContainer:"docItemContainer_F8PC"};var r=n(4848);const l="table-of-contents__link toc-highlight",o="table-of-contents__link--active";function c(e){let{className:t,...n}=e;return(0,r.jsx)("div",{className:(0,a.A)(i.tableOfContents,"thin-scrollbar",t),children:(0,r.jsx)(s.A,{...n,linkClassName:l,linkActiveClassName:o})})}},8189:(e,t,n)=>{n.d(t,{A:()=>O});n(6540);var a=n(4164),s=n(3750),i=n(4848);function r(e){let{children:t,className:n}=e;return(0,i.jsx)("article",{className:n,children:t})}var l=n(6289);const o={title:"title_f1Hy"};function c(e){let{className:t}=e;const{metadata:n,isBlogPostPage:r}=(0,s.e7)(),{permalink:c,title:d}=n,m=r?"h1":"h2";return(0,i.jsx)(m,{className:(0,a.A)(o.title,t),children:r?d:(0,i.jsx)(l.A,{to:c,children:d})})}var d=n(539),m=n(1430),u=n(8569);const g={container:"container_mt6G"};function h(e){let{readingTime:t}=e;const n=function(){const{selectMessage:e}=(0,m.W)();return t=>{const n=Math.ceil(t);return e(n,(0,d.T)({id:"theme.blog.post.readingTime.plurals",description:'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One min read|{readingTime} min read"},{readingTime:n}))}}();return(0,i.jsx)(i.Fragment,{children:n(t)})}function x(e){let{date:t,formattedDate:n}=e;return(0,i.jsx)("time",{dateTime:t,children:n})}function f(){return(0,i.jsx)(i.Fragment,{children:" \xb7 "})}function p(e){let{className:t}=e;const{metadata:n}=(0,s.e7)(),{date:r,readingTime:l}=n,o=(0,u.i)({day:"numeric",month:"long",year:"numeric",timeZone:"UTC"});return(0,i.jsxs)("div",{className:(0,a.A)(g.container,"margin-vert--md",t),children:[(0,i.jsx)(x,{date:r,formattedDate:(c=r,o.format(new Date(c)))}),void 0!==l&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(f,{}),(0,i.jsx)(h,{readingTime:l})]})]});var c}var v=n(5921);const j={authorCol:"authorCol_Hf19",imageOnlyAuthorRow:"imageOnlyAuthorRow_pa_O",imageOnlyAuthorCol:"imageOnlyAuthorCol_G86a"};function b(e){let{className:t}=e;const{metadata:{authors:n},assets:r}=(0,s.e7)();if(0===n.length)return null;const l=n.every((e=>{let{name:t}=e;return!t})),o=1===n.length;return(0,i.jsx)("div",{className:(0,a.A)("margin-top--md margin-bottom--sm",l?j.imageOnlyAuthorRow:"row",t),children:n.map(((e,t)=>(0,i.jsx)("div",{className:(0,a.A)(!l&&(o?"col col--12":"col col--6"),l?j.imageOnlyAuthorCol:j.authorCol),children:(0,i.jsx)(v.A,{author:{...e,imageURL:r.authorsImageUrls[t]??e.imageURL}})},t)))})}function A(){return(0,i.jsxs)("header",{children:[(0,i.jsx)(c,{}),(0,i.jsx)(p,{}),(0,i.jsx)(b,{})]})}var N=n(99),_=n(4522);function L(e){let{children:t,className:n}=e;const{isBlogPostPage:r}=(0,s.e7)();return(0,i.jsx)("div",{id:r?N.LU:void 0,className:(0,a.A)("markdown",n),children:(0,i.jsx)(_.A,{children:t})})}var y=n(204),C=n(5783),T=n(6239);function k(){return(0,i.jsx)("b",{children:(0,i.jsx)(d.A,{id:"theme.blog.post.readMore",description:"The label used in blog post item excerpts to link to full blog posts",children:"Read more"})})}function H(e){const{blogPostTitle:t,...n}=e;return(0,i.jsx)(l.A,{"aria-label":(0,d.T)({message:"Read more about {title}",id:"theme.blog.post.readMoreLabel",description:"The ARIA label for the link to full blog posts from excerpts"},{title:t}),...n,children:(0,i.jsx)(k,{})})}function w(){const{metadata:e,isBlogPostPage:t}=(0,s.e7)(),{tags:n,title:r,editUrl:l,hasTruncateMarker:o,lastUpdatedBy:c,lastUpdatedAt:d}=e,m=!t&&o,u=n.length>0;if(!(u||m||l))return null;if(t){const e=!!(l||d||c);return(0,i.jsxs)("footer",{className:"docusaurus-mt-lg",children:[u&&(0,i.jsx)("div",{className:(0,a.A)("row","margin-top--sm",y.G.blog.blogFooterEditMetaRow),children:(0,i.jsx)("div",{className:"col",children:(0,i.jsx)(T.A,{tags:n})})}),e&&(0,i.jsx)(C.A,{className:(0,a.A)("margin-top--sm",y.G.blog.blogFooterEditMetaRow),editUrl:l,lastUpdatedAt:d,lastUpdatedBy:c})]})}return(0,i.jsxs)("footer",{className:"row docusaurus-mt-lg",children:[u&&(0,i.jsx)("div",{className:(0,a.A)("col",{"col--9":m}),children:(0,i.jsx)(T.A,{tags:n})}),m&&(0,i.jsx)("div",{className:(0,a.A)("col text--right",{"col--3":u}),children:(0,i.jsx)(H,{blogPostTitle:r,to:e.permalink})})]})}function O(e){let{children:t,className:n}=e;const l=function(){const{isBlogPostPage:e}=(0,s.e7)();return e?void 0:"margin-bottom--xl"}();return(0,i.jsxs)(r,{className:(0,a.A)(l,n),children:[(0,i.jsx)(A,{}),(0,i.jsx)(L,{children:t}),(0,i.jsx)(w,{})]})}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[557],{5033:(e,s,o)=>{o.d(s,{A:()=>t});const t=o.p+"assets/images/docusaurus-plushie-banner-a60f7593abca1e3eef26a9afa244e4fb.jpeg"},8453:(e,s,o)=>{o.d(s,{R:()=>r,x:()=>a});var t=o(6540);const n={},l=t.createContext(n);function r(e){const s=t.useContext(l);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:r(e.components),t.createElement(l.Provider,{value:s},e.children)}},8811:e=>{e.exports=JSON.parse('{"permalink":"/blog/welcome","source":"@site/blog/2021-08-26-welcome/index.md","title":"Welcome","description":"Docusaurus blogging features are powered by the blog plugin.","date":"2021-08-26T00:00:00.000Z","tags":[{"inline":false,"label":"Facebook","permalink":"/blog/tags/facebook","description":"Facebook tag description"},{"inline":false,"label":"Hello","permalink":"/blog/tags/hello","description":"Hello tag description"},{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":0.465,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"},{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun"}],"frontMatter":{"slug":"welcome","title":"Welcome","authors":["slorber","yangshun"],"tags":["facebook","hello","docusaurus"]},"unlisted":false,"nextItem":{"title":"MDX Blog Post","permalink":"/blog/mdx-blog-post"}}')},9701:(e,s,o)=>{o.r(s),o.d(s,{assets:()=>i,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>t,toc:()=>c});var t=o(8811),n=o(4848),l=o(8453);const r={slug:"welcome",title:"Welcome",authors:["slorber","yangshun"],tags:["facebook","hello","docusaurus"]},a=void 0,i={authorsImageUrls:[void 0,void 0]},c=[];function u(e){const s={a:"a",code:"code",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.a,{href:"https://docusaurus.io/docs/blog",children:"Docusaurus blogging features"})," are powered by the ",(0,n.jsx)(s.a,{href:"https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog",children:"blog plugin"}),"."]}),"\n",(0,n.jsx)(s.p,{children:"Here are a few tips you might find useful."}),"\n",(0,n.jsxs)(s.p,{children:["Simply add Markdown files (or folders) to the ",(0,n.jsx)(s.code,{children:"blog"})," directory."]}),"\n",(0,n.jsxs)(s.p,{children:["Regular blog authors can be added to ",(0,n.jsx)(s.code,{children:"authors.yml"}),"."]}),"\n",(0,n.jsx)(s.p,{children:"The blog post date can be extracted from filenames, such as:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.code,{children:"2019-05-30-welcome.md"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.code,{children:"2019-05-30-welcome/index.md"})}),"\n"]}),"\n",(0,n.jsx)(s.p,{children:"A blog post folder can be convenient to co-locate blog post images:"}),"\n",(0,n.jsx)(s.p,{children:(0,n.jsx)(s.img,{alt:"Docusaurus Plushie",src:o(5033).A+"",width:"1500",height:"500"})}),"\n",(0,n.jsx)(s.p,{children:"The blog supports tags as well!"}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.strong,{children:"And if you don't want a blog"}),": just delete this directory, and use ",(0,n.jsx)(s.code,{children:"blog: false"})," in your Docusaurus config."]})]})}function d(e={}){const{wrapper:s}={...(0,l.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[328],{2421:t=>{t.exports=JSON.parse('{"permalink":"/blog/first-blog-post","source":"@site/blog/2019-05-28-first-blog-post.md","title":"First Blog Post","description":"Lorem ipsum dolor sit amet...","date":"2019-05-28T00:00:00.000Z","tags":[{"inline":false,"label":"Hola","permalink":"/blog/tags/hola","description":"Hola tag description"},{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":0.135,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"},{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun"}],"frontMatter":{"slug":"first-blog-post","title":"First Blog Post","authors":["slorber","yangshun"],"tags":["hola","docusaurus"]},"unlisted":false,"prevItem":{"title":"Long Blog Post","permalink":"/blog/long-blog-post"}}')},4304:(t,e,s)=>{s.r(e),s.d(e,{assets:()=>l,contentTitle:()=>a,default:()=>p,frontMatter:()=>i,metadata:()=>o,toc:()=>u});var o=s(2421),n=s(4848),r=s(8453);const i={slug:"first-blog-post",title:"First Blog Post",authors:["slorber","yangshun"],tags:["hola","docusaurus"]},a=void 0,l={authorsImageUrls:[void 0,void 0]},u=[];function c(t){const e={p:"p",...(0,r.R)(),...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"Lorem ipsum dolor sit amet..."}),"\n",(0,n.jsx)(e.p,{children:"...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"})]})}function p(t={}){const{wrapper:e}={...(0,r.R)(),...t.components};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(c,{...t})}):c(t)}},8453:(t,e,s)=>{s.d(e,{R:()=>i,x:()=>a});var o=s(6540);const n={},r=o.createContext(n);function i(t){const e=o.useContext(r);return o.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function a(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(n):t.components||n:i(t.components),o.createElement(r.Provider,{value:e},t.children)}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[276],{8539:o=>{o.exports=JSON.parse('{"tag":{"label":"Facebook","permalink":"/blog/tags/facebook","description":"Facebook tag description","allTagsPath":"/blog/tags","count":1,"unlisted":false},"listMetadata":{"permalink":"/blog/tags/facebook","page":1,"postsPerPage":10,"totalPages":1,"totalCount":1,"blogDescription":"Blog","blogTitle":"Blog"}}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[947],{6600:t=>{t.exports=JSON.parse('{"authors":[{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun","count":3},{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber","count":3}]}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[637],{1632:t=>{t.exports=JSON.parse('{"permalink":"/blog/mdx-blog-post","source":"@site/blog/2021-08-01-mdx-blog-post.mdx","title":"MDX Blog Post","description":"Blog posts support Docusaurus Markdown features, such as MDX.","date":"2021-08-01T00:00:00.000Z","tags":[{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":0.235,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"slug":"mdx-blog-post","title":"MDX Blog Post","authors":["slorber"],"tags":["docusaurus"]},"unlisted":false,"prevItem":{"title":"Welcome","permalink":"/blog/welcome"},"nextItem":{"title":"Long Blog Post","permalink":"/blog/long-blog-post"}}')},7810:(t,e,o)=>{o.r(e),o.d(e,{assets:()=>l,contentTitle:()=>i,default:()=>p,frontMatter:()=>a,metadata:()=>s,toc:()=>u});var s=o(1632),r=o(4848),n=o(8453);const a={slug:"mdx-blog-post",title:"MDX Blog Post",authors:["slorber"],tags:["docusaurus"]},i=void 0,l={authorsImageUrls:[void 0]},u=[];function c(t){const e={a:"a",admonition:"admonition",p:"p",...(0,n.R)(),...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:["Blog posts support ",(0,r.jsx)(e.a,{href:"https://docusaurus.io/docs/markdown-features",children:"Docusaurus Markdown features"}),", such as ",(0,r.jsx)(e.a,{href:"https://mdxjs.com/",children:"MDX"}),"."]}),"\n",(0,r.jsx)(e.admonition,{type:"tip",children:(0,r.jsx)(e.p,{children:"Use the power of React to create interactive blog posts."})})]})}function p(t={}){const{wrapper:e}={...(0,n.R)(),...t.components};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(c,{...t})}):c(t)}},8453:(t,e,o)=>{o.d(e,{R:()=>a,x:()=>i});var s=o(6540);const r={},n=s.createContext(r);function a(t){const e=s.useContext(n);return s.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function i(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(r):t.components||r:a(t.components),s.createElement(n.Provider,{value:e},t.children)}}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[130],{7735:e=>{e.exports=JSON.parse('{"archive":{"blogPosts":[{"id":"welcome","metadata":{"permalink":"/blog/welcome","source":"@site/blog/2021-08-26-welcome/index.md","title":"Welcome","description":"Docusaurus blogging features are powered by the blog plugin.","date":"2021-08-26T00:00:00.000Z","tags":[{"inline":false,"label":"Facebook","permalink":"/blog/tags/facebook","description":"Facebook tag description"},{"inline":false,"label":"Hello","permalink":"/blog/tags/hello","description":"Hello tag description"},{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":0.465,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"},{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun"}],"frontMatter":{"slug":"welcome","title":"Welcome","authors":["slorber","yangshun"],"tags":["facebook","hello","docusaurus"]},"unlisted":false,"nextItem":{"title":"MDX Blog Post","permalink":"/blog/mdx-blog-post"}},"content":"[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).\\n\\nHere are a few tips you might find useful.\\n\\n\x3c!-- truncate --\x3e\\n\\nSimply add Markdown files (or folders) to the `blog` directory.\\n\\nRegular blog authors can be added to `authors.yml`.\\n\\nThe blog post date can be extracted from filenames, such as:\\n\\n- `2019-05-30-welcome.md`\\n- `2019-05-30-welcome/index.md`\\n\\nA blog post folder can be convenient to co-locate blog post images:\\n\\n![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)\\n\\nThe blog supports tags as well!\\n\\n**And if you don\'t want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config."},{"id":"mdx-blog-post","metadata":{"permalink":"/blog/mdx-blog-post","source":"@site/blog/2021-08-01-mdx-blog-post.mdx","title":"MDX Blog Post","description":"Blog posts support Docusaurus Markdown features, such as MDX.","date":"2021-08-01T00:00:00.000Z","tags":[{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":0.235,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"}],"frontMatter":{"slug":"mdx-blog-post","title":"MDX Blog Post","authors":["slorber"],"tags":["docusaurus"]},"unlisted":false,"prevItem":{"title":"Welcome","permalink":"/blog/welcome"},"nextItem":{"title":"Long Blog Post","permalink":"/blog/long-blog-post"}},"content":"Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).\\n\\n:::tip\\n\\nUse the power of React to create interactive blog posts.\\n\\n:::\\n\\n{/* truncate */}\\n\\nFor example, use JSX to create an interactive button:\\n\\n```js\\n<button onClick={() => alert(\'button clicked!\')}>Click me!</button>\\n```\\n\\n<button onClick={() => alert(\'button clicked!\')}>Click me!</button>"},{"id":"long-blog-post","metadata":{"permalink":"/blog/long-blog-post","source":"@site/blog/2019-05-29-long-blog-post.md","title":"Long Blog Post","description":"This is the summary of a very long blog post,","date":"2019-05-29T00:00:00.000Z","tags":[{"inline":false,"label":"Hello","permalink":"/blog/tags/hello","description":"Hello tag description"},{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":2.06,"hasTruncateMarker":true,"authors":[{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun"}],"frontMatter":{"slug":"long-blog-post","title":"Long Blog Post","authors":"yangshun","tags":["hello","docusaurus"]},"unlisted":false,"prevItem":{"title":"MDX Blog Post","permalink":"/blog/mdx-blog-post"},"nextItem":{"title":"First Blog Post","permalink":"/blog/first-blog-post"}},"content":"This is the summary of a very long blog post,\\n\\nUse a `\x3c!--` `truncate` `--\x3e` comment to limit blog post size in the list view.\\n\\n\x3c!-- truncate --\x3e\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet\\n\\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"},{"id":"first-blog-post","metadata":{"permalink":"/blog/first-blog-post","source":"@site/blog/2019-05-28-first-blog-post.md","title":"First Blog Post","description":"Lorem ipsum dolor sit amet...","date":"2019-05-28T00:00:00.000Z","tags":[{"inline":false,"label":"Hola","permalink":"/blog/tags/hola","description":"Hola tag description"},{"inline":false,"label":"Docusaurus","permalink":"/blog/tags/docusaurus","description":"Docusaurus tag description"}],"readingTime":0.135,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer","url":"https://sebastienlorber.com","page":{"permalink":"/blog/authors/all-sebastien-lorber-articles"},"socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://thisweekinreact.com"},"imageURL":"https://github.com/slorber.png","key":"slorber"},{"name":"Yangshun Tay","title":"Front End Engineer @ Facebook","url":"https://github.com/yangshun","page":{"permalink":"/blog/authors/yangshun"},"socials":{"x":"https://x.com/yangshunz","github":"https://github.com/yangshun"},"imageURL":"https://github.com/yangshun.png","key":"yangshun"}],"frontMatter":{"slug":"first-blog-post","title":"First Blog Post","authors":["slorber","yangshun"],"tags":["hola","docusaurus"]},"unlisted":false,"prevItem":{"title":"Long Blog Post","permalink":"/blog/long-blog-post"}},"content":"Lorem ipsum dolor sit amet...\\n\\n\x3c!-- truncate --\x3e\\n\\n...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"}]}}')}}]);

"use strict";(self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[]).push([[584],{4035:l=>{l.exports=JSON.parse('{"tag":{"label":"Hello","permalink":"/blog/tags/hello","description":"Hello tag description","allTagsPath":"/blog/tags","count":2,"unlisted":false},"listMetadata":{"permalink":"/blog/tags/hello","page":1,"postsPerPage":10,"totalPages":1,"totalCount":2,"blogDescription":"Blog","blogTitle":"Blog"}}')}}]);

(()=>{"use strict";var e,a,t,r,f,o={},c={};function d(e){var a=c[e];if(void 0!==a)return a.exports;var t=c[e]={id:e,loaded:!1,exports:{}};return o[e].call(t.exports,t,t.exports,d),t.loaded=!0,t.exports}d.m=o,d.c=c,e=[],d.O=(a,t,r,f)=>{if(!t){var o=1/0;for(i=0;i<e.length;i++){t=e[i][0],r=e[i][1],f=e[i][2];for(var c=!0,n=0;n<t.length;n++)(!1&f||o>=f)&&Object.keys(d.O).every((e=>d.O[e](t[n])))?t.splice(n--,1):(c=!1,f<o&&(o=f));if(c){e.splice(i--,1);var b=r();void 0!==b&&(a=b)}}return a}f=f||0;for(var i=e.length;i>0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[t,r,f]},d.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return d.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);d.r(f);var o={};a=a||[null,t({}),t([]),t(t)];for(var c=2&r&&e;"object"==typeof c&&!~a.indexOf(c);c=t(c))Object.getOwnPropertyNames(c).forEach((a=>o[a]=()=>e[a]));return o.default=()=>e,d.d(f,o),f},d.d=(e,a)=>{for(var t in a)d.o(a,t)&&!d.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((a,t)=>(d.f[t](e,a),a)),[])),d.u=e=>"assets/js/"+({25:"5e90a9b3",48:"a94703ab",61:"1f391b9e",98:"a7bd4aaa",121:"3a2db09e",126:"5d9411d3",130:"f81c1134",134:"393be207",146:"c15d9823",209:"01a85c17",212:"621db11d",235:"a7456010",249:"ccc49370",276:"e5aefb32",325:"59362658",328:"e273c56f",401:"17896441",407:"1dea6ca3",462:"3217192f",472:"814f3328",557:"d9f32620",584:"f82cd581",609:"925b3f96",634:"c4f5d8e4",637:"f4f34a3a",643:"a6aa9e1f",647:"5e95c892",672:"0e80eeec",694:"8717b14a",711:"9e4087bc",737:"7661071f",742:"aba21aa0",794:"c9c9bef8",813:"6875c492",849:"0058b4c6",858:"36994c47",867:"33fc5bb8",903:"acecf23e",947:"ef8b811a",972:"73664a40"}[e]||e)+"."+{25:"f3a0b15a",42:"c8bc1a87",48:"2d7463ed",61:"6ee43cea",98:"9c3b9f04",121:"d6e89f58",126:"7af4c40c",130:"04b7839b",134:"1313a269",146:"4bcbec55",209:"5c295a40",212:"39b6661c",235:"12b2ab02",249:"f5076605",276:"4df28445",325:"4a937568",328:"f07c444c",392:"1f9f25a0",401:"d1d116a8",407:"8209ea1f",462:"ca06e35d",472:"39d716ed",557:"23c6fa85",584:"e5794a13",604:"70adcc7d",609:"10b4e8e8",622:"e02331f8",634:"668136f2",637:"5a15a695",643:"cf9f3283",647:"500eccf7",672:"5306bba1",694:"7c8052a6",711:"7bb95e30",737:"b66c3836",742:"d09fe2ea",794:"7804c93e",813:"a7eb2545",849:"cb07004b",858:"4e25a1b8",867:"ef14f095",903:"700b0f69",947:"d0735acd",972:"66b4185e"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},f="johns-portfolio:",d.l=(e,a,t,o)=>{if(r[e])r[e].push(a);else{var c,n;if(void 0!==t)for(var b=document.getElementsByTagName("script"),i=0;i<b.length;i++){var l=b[i];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==f+t){c=l;break}}c||(n=!0,(c=document.createElement("script")).charset="utf-8",c.timeout=120,d.nc&&c.setAttribute("nonce",d.nc),c.setAttribute("data-webpack",f+t),c.src=e),r[e]=[a];var u=(a,t)=>{c.onerror=c.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],c.parentNode&&c.parentNode.removeChild(c),f&&f.forEach((e=>e(t))),a)return a(t)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=u.bind(null,c.onerror),c.onload=u.bind(null,c.onload),n&&document.head.appendChild(c)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/",d.gca=function(e){return e={17896441:"401",59362658:"325","5e90a9b3":"25",a94703ab:"48","1f391b9e":"61",a7bd4aaa:"98","3a2db09e":"121","5d9411d3":"126",f81c1134:"130","393be207":"134",c15d9823:"146","01a85c17":"209","621db11d":"212",a7456010:"235",ccc49370:"249",e5aefb32:"276",e273c56f:"328","1dea6ca3":"407","3217192f":"462","814f3328":"472",d9f32620:"557",f82cd581:"584","925b3f96":"609",c4f5d8e4:"634",f4f34a3a:"637",a6aa9e1f:"643","5e95c892":"647","0e80eeec":"672","8717b14a":"694","9e4087bc":"711","7661071f":"737",aba21aa0:"742",c9c9bef8:"794","6875c492":"813","0058b4c6":"849","36994c47":"858","33fc5bb8":"867",acecf23e:"903",ef8b811a:"947","73664a40":"972"}[e]||e,d.p+d.u(e)},(()=>{var e={354:0,869:0};d.f.j=(a,t)=>{var r=d.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(354|869)$/.test(a))e[a]=0;else{var f=new Promise(((t,f)=>r=e[a]=[t,f]));t.push(r[2]=f);var o=d.p+d.u(a),c=new Error;d.l(o,(t=>{if(d.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var f=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;c.message="Loading chunk "+a+" failed.\n("+f+": "+o+")",c.name="ChunkLoadError",c.type=f,c.request=o,r[1](c)}}),"chunk-"+a,a)}},d.O.j=a=>0===e[a];var a=(a,t)=>{var r,f,o=t[0],c=t[1],n=t[2],b=0;if(o.some((a=>0!==e[a]))){for(r in c)d.o(c,r)&&(d.m[r]=c[r]);if(n)var i=n(d)}for(a&&a(t);b<o.length;b++)f=o[b],d.o(e,f)&&e[f]&&e[f][0](),e[f]=0;return d.O(i)},t=self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[];t.forEach(a.bind(null,0)),t.push=a.bind(null,t.push.bind(t))})()})();

(()=>{"use strict";var e,a,t,r,f,c={},o={};function n(e){var a=o[e];if(void 0!==a)return a.exports;var t=o[e]={id:e,loaded:!1,exports:{}};return c[e].call(t.exports,t,t.exports,n),t.loaded=!0,t.exports}n.m=c,n.c=o,e=[],n.O=(a,t,r,f)=>{if(!t){var c=1/0;for(i=0;i<e.length;i++){t=e[i][0],r=e[i][1],f=e[i][2];for(var o=!0,d=0;d<t.length;d++)(!1&f||c>=f)&&Object.keys(n.O).every((e=>n.O[e](t[d])))?t.splice(d--,1):(o=!1,f<c&&(c=f));if(o){e.splice(i--,1);var b=r();void 0!==b&&(a=b)}}return a}f=f||0;for(var i=e.length;i>0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[t,r,f]},n.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return n.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,n.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);n.r(f);var c={};a=a||[null,t({}),t([]),t(t)];for(var o=2&r&&e;"object"==typeof o&&!~a.indexOf(o);o=t(o))Object.getOwnPropertyNames(o).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,n.d(f,c),f},n.d=(e,a)=>{for(var t in a)n.o(a,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((a,t)=>(n.f[t](e,a),a)),[])),n.u=e=>"assets/js/"+({25:"5e90a9b3",48:"a94703ab",61:"1f391b9e",98:"a7bd4aaa",121:"3a2db09e",126:"5d9411d3",130:"f81c1134",134:"393be207",146:"c15d9823",209:"01a85c17",212:"621db11d",235:"a7456010",249:"ccc49370",276:"e5aefb32",325:"59362658",328:"e273c56f",401:"17896441",407:"1dea6ca3",462:"3217192f",472:"814f3328",508:"cca68ad1",557:"d9f32620",584:"f82cd581",609:"925b3f96",634:"c4f5d8e4",637:"f4f34a3a",643:"a6aa9e1f",647:"5e95c892",672:"0e80eeec",694:"8717b14a",711:"9e4087bc",737:"7661071f",742:"aba21aa0",794:"c9c9bef8",813:"6875c492",849:"0058b4c6",858:"36994c47",867:"33fc5bb8",903:"acecf23e",947:"ef8b811a",972:"73664a40"}[e]||e)+"."+{25:"f3a0b15a",42:"c8bc1a87",48:"2d7463ed",61:"6ee43cea",98:"9c3b9f04",121:"d6e89f58",126:"7af4c40c",130:"04b7839b",134:"1313a269",146:"4bcbec55",209:"5c295a40",212:"39b6661c",235:"12b2ab02",249:"f5076605",276:"4df28445",325:"4a937568",328:"f07c444c",392:"1f9f25a0",401:"d1d116a8",407:"8209ea1f",462:"ca06e35d",472:"39d716ed",508:"0f731710",557:"23c6fa85",584:"e5794a13",604:"70adcc7d",609:"10b4e8e8",622:"e02331f8",634:"380d6bf6",637:"5a15a695",643:"cf9f3283",647:"500eccf7",672:"17694783",694:"7c8052a6",711:"7bb95e30",737:"b66c3836",742:"d09fe2ea",794:"7804c93e",813:"a7eb2545",849:"cb07004b",858:"4e25a1b8",867:"ef14f095",903:"700b0f69",947:"d0735acd",972:"66b4185e"}[e]+".js",n.miniCssF=e=>{},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},f="johns-portfolio:",n.l=(e,a,t,c)=>{if(r[e])r[e].push(a);else{var o,d;if(void 0!==t)for(var b=document.getElementsByTagName("script"),i=0;i<b.length;i++){var l=b[i];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==f+t){o=l;break}}o||(d=!0,(o=document.createElement("script")).charset="utf-8",o.timeout=120,n.nc&&o.setAttribute("nonce",n.nc),o.setAttribute("data-webpack",f+t),o.src=e),r[e]=[a];var u=(a,t)=>{o.onerror=o.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((e=>e(t))),a)return a(t)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=u.bind(null,o.onerror),o.onload=u.bind(null,o.onload),d&&document.head.appendChild(o)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.p="/",n.gca=function(e){return e={17896441:"401",59362658:"325","5e90a9b3":"25",a94703ab:"48","1f391b9e":"61",a7bd4aaa:"98","3a2db09e":"121","5d9411d3":"126",f81c1134:"130","393be207":"134",c15d9823:"146","01a85c17":"209","621db11d":"212",a7456010:"235",ccc49370:"249",e5aefb32:"276",e273c56f:"328","1dea6ca3":"407","3217192f":"462","814f3328":"472",cca68ad1:"508",d9f32620:"557",f82cd581:"584","925b3f96":"609",c4f5d8e4:"634",f4f34a3a:"637",a6aa9e1f:"643","5e95c892":"647","0e80eeec":"672","8717b14a":"694","9e4087bc":"711","7661071f":"737",aba21aa0:"742",c9c9bef8:"794","6875c492":"813","0058b4c6":"849","36994c47":"858","33fc5bb8":"867",acecf23e:"903",ef8b811a:"947","73664a40":"972"}[e]||e,n.p+n.u(e)},(()=>{var e={354:0,869:0};n.f.j=(a,t)=>{var r=n.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(354|869)$/.test(a))e[a]=0;else{var f=new Promise(((t,f)=>r=e[a]=[t,f]));t.push(r[2]=f);var c=n.p+n.u(a),o=new Error;n.l(c,(t=>{if(n.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var f=t&&("load"===t.type?"missing":t.type),c=t&&t.target&&t.target.src;o.message="Loading chunk "+a+" failed.\n("+f+": "+c+")",o.name="ChunkLoadError",o.type=f,o.request=c,r[1](o)}}),"chunk-"+a,a)}},n.O.j=a=>0===e[a];var a=(a,t)=>{var r,f,c=t[0],o=t[1],d=t[2],b=0;if(c.some((a=>0!==e[a]))){for(r in o)n.o(o,r)&&(n.m[r]=o[r]);if(d)var i=d(n)}for(a&&a(t);b<c.length;b++)f=c[b],n.o(e,f)&&e[f]&&e[f][0](),e[f]=0;return n.O(i)},t=self.webpackChunkjohns_portfolio=self.webpackChunkjohns_portfolio||[];t.forEach(a.bind(null,0)),t.push=a.bind(null,t.push.bind(t))})()})();

  // @ts-check
  // `@type` JSDoc annotations allow editor autocompletion and type checking
  // (when paired with `@ts-check`).
  // There are various equivalent ways to declare your Docusaurus config.
  // See: https://docusaurus.io/docs/api/docusaurus-config

  import { themes as prismThemes } from 'prism-react-renderer';

  // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)

  /** @type {import('@docusaurus/types').Config} */
  const config = {
    title: 'StableCraft LLC', // Updated title
    tagline: 'Payment solutions for stablecoins', // Updated tagline
    favicon: 'img/favicon.ico',
    url: 'https://stablecraft.io', // Update this to your actual domain
    // Set the /<baseUrl>/ pathname under which your site is served
    // For GitHub pages deployment, it is often '/<projectName>/'
    baseUrl: '/',

    // GitHub pages deployment config.
    // If you aren't using GitHub pages, you don't need these.
    organizationName: 'johnpottergr', // Updated to your GitHub username
    projectName: 'stablecraft.io', // Updated to your repo name
    deploymentBranch: 'gh-pages',
    trailingSlash: false, // Recommended for GitHub Pages

    onBrokenLinks: 'throw',
    onBrokenMarkdownLinks: 'warn',

    // Even if you don't use internationalization, you can use this field to set
    // useful metadata like html lang. For example, if your site is Chinese, you
    // may want to replace "en" with "zh-Hans".
    i18n: {
      defaultLocale: 'en',
      locales: ['en'],
    },

    presets: [
      [
        'classic',
        /** @type {import('@docusaurus/preset-classic').Options} */
        ({
          docs: {
            routeBasePath: 'kb', // instead of
            sidebarPath: require.resolve('./sidebars.js'),
            // Update this to your repo
            path: 'docs', // Ensure this points to the correct directory
            editUrl: 'https://github.com/johnpottergr/stablecraft.io/edit/main/',

          },
          blog: {
            showReadingTime: true,
            routeBasePath: 'blog', // this makes your blog accessible at /blog
            feedOptions: {
              type: ['rss', 'atom'],
              xslt: true,
            },
            // Update this to your repo
            editUrl: 'https://github.com/johnpottergr/stablecraft.io',
            // Useful options to enforce blogging best practices
            onInlineTags: 'warn',
            onInlineAuthors: 'warn',
            onUntruncatedBlogPosts: 'warn',
          },
          theme: {
            customCss:  [require.resolve('./src/css/custom.css')],
          },
        }),
      ],
    ],

    themeConfig:
      /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
      ({
        colorMode: {
          defaultMode: 'light',
          disableSwitch: true, // Enable the toggle
          respectPrefersColorScheme: false, // Optional: sync with user's system theme
        },
        // Replace with your project's social card
        // Remove logo entirely:
        // logo: {
        //   alt: 'StableCraft Logo',
        // }

        navbar: {
          title: 'Stablecraft',
          logo: {
            alt: 'Stablecraft Logo',
            src: 'img/green.png', // path relative to the `static` folder
            height: '90px',
          },
          items: [
            { to: '/', label: 'Welcome', position: 'left' }, // Moved to first position
            { to: '/stablecoin-payment-services', label: 'Payment Services', position: 'left' }, // Moved to second position
            { to: '/kb/intro/what-is-a-stablecoin', label: 'Knowledge Base', position: 'left', },
            { href: '/stablecoin-liquidity-tracker', label: 'Liquidity Tracker', position: 'left' },
            { href: '/stablecoin-stress-test', label: 'Stress Test', position: 'left'},
            { href: '/risk-manager', label: 'Risk Manager', position: 'left'},
            { to: '/blog', label: 'Updates & Blog', position: 'left' },
            { href: 'https://docs.stablecraft.io', label: 'Docs', position: 'right' }, // Link to docs subdomain

          ],
        },

        footer: {
          style: 'dark',
          links: [
            {
              title: 'Pages',
              items: [
                {
                  label: 'Welcome',
                  to: '/',
                },

                {
                  label: 'Services',
                  to: '/stablecoin-payment-services',
                },
                {
                  label: 'Blog',
                  to: '/blog',
                },
              ],
            },
            {
              title: 'Community',
              items: [
                {

                  label: 'X',
                  href: 'https://x.com/johnpottergr', // Update this to your X handle
                },
              ],
            },
            {
              title: 'More',
              items: [
                {
                  label: 'Blog',
                  to: '/blog',
                },
                {
                  label: 'Stress Test',
                  href: 'https://github.com/johnpottergr', // Update this to your GitHub URL
                },
              ],
            },
          ],
          copyright: `Copyright © ${new Date().getFullYear()} John Potter. Built with Docusaurus.`,
        },
        prism: {
          theme: prismThemes.github,
          darkTheme: prismThemes.dracula,
        },
      }),
  };

  export default config;


// @ts-check

// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)

/**
 * Creating a sidebar enables you to:
 - create an ordered group of docs
 - render a sidebar for each doc of that group
 - provide next/previous navigation

 The sidebars can be generated from the filesystem, or explicitly defined here.

 Create as many sidebars as you want.

 @type {import('@docusaurus/plugin-content-docs').SidebarsConfig}
 */
const sidebars = {
  // By default, Docusaurus generates a sidebar from the docs folder structure
  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],

  // But you can create a sidebar manually
  /*
  tutorialSidebar: [
    'intro',
    'hello',
    {
      type: 'category',
      label: 'Tutorial',
      items: ['tutorial-basics/create-a-document'],
    },
  ],
   */
};
module.exports = {
  kbSidebar: [
    {
      type: 'category',
      label: 'Introduction to Stablecoins',
      collapsed: false,
      items: [
        'intro/what-is-a-stablecoin',
        'intro/stablecoins-vs-fiat',
        'intro/types-of-stablecoins',
        'intro/hello-stable-world',
      ],
    },
    {
      type: 'category',
      label: 'Quick Start Guide',
      items: [
        'quick-guide/getting-started',
        'quick-guide/wallet-setup',
        'quick-guide/accepting-payments',
        'quick-guide/fees-gas-costs',
        'quick-guide/safety-tips',
        'quick-guide/regulations-101',
      ],
    },
{
  type: 'category',
  label: 'Protocols & Networks',
  items: [
    'protocols-and-networks/well-known-stablecoins',
    'protocols-and-networks/l1-vs-l2-networks',
    'protocols-and-networks/chains-with-stablecoins',
    'protocols-and-networks/comparing-network-fees',
  ],
},
{
  type: 'category',
  label: 'Business Implementation',
  items: [
    'business-implementation/taking-payments-online',
    'business-implementation/connecting-to-your-POS',
    'business-implementation/cashing-out-to-fiat',
    'business-implementation/handling-business-funds',
    'business-implementation/stablecoin-accounting',
  ],
},
{
  type: 'category',
  label: 'Wallets and Custody',
  items: [
    'wallets-and-custody/hot-vs-cold-wallets',
    'wallets-and-custody/wallets-for-teams',
    'wallets-and-custody/custody-options',
    'wallets-and-custody/popular-wallet-brands',
  ],
},
{
  type: 'category',
  label: 'Stablecoin Mechanics',
  items: [
    'stablecoin-mechanics/how-minting-works',
    'stablecoin-mechanics/dai-and-collateral',
    'stablecoin-mechanics/algorithmic-pegs',
    'stablecoin-mechanics/smart-contract-risks',
    'stablecoin-mechanics/peg-adjustment-logic',
  ],
},
{
type: 'category',
label: 'Code Examples',
items: [
  'code-examples/web3js-send-USDC',
  'code-examples/hedera-payment-demo',
  'code-examples/metamask-integration',
  'code-examples/sample-api-requests',
],
},
    // add more categories as needed
  ],
};



import clsx from 'clsx';
import Heading from '@theme/Heading';
import styles from './styles.module.css';

const FeatureList = [
  {
    title: 'Easy to Use',
    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
    description: (
      <>
        Docusaurus was designed from the ground up to be easily installed and
        used to get your website up and running quickly.
      </>
    ),
  },
  {
    title: 'Focus on What Matters',
    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
    description: (
      <>
        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
        ahead and move your docs into the <code>docs</code> directory.
      </>
    ),
  },
  {
    title: 'Powered by React',
    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
    description: (
      <>
        Extend or customize your website layout by reusing React. Docusaurus can
        be extended while reusing the same header and footer.
      </>
    ),
  },
];

function Feature({Svg, title, description}) {
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <Heading as="h3">{title}</Heading>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}


import React from 'react';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import { FaPlay } from 'react-icons/fa'; // Import the FaPlay icon

export default function Home() {
  return (
    <Layout title="Stablecraft">
      <main style={{
        padding: '20px',
        maxWidth: '700px',
        margin: '40px auto',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '40px'
      }}>

        {/* Intro Section */}
        <div style={{ width: '100%', textAlign: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start' }}>
            <div style={{ flex: '1' }}>
              <h1 style={{
                fontWeight: 600,
                fontSize: '3rem',
                paddingBottom: '6px',
                marginTop: '3rem',
                marginBottom: '0rem',
                color: '#36A77A',
              }}>
                Stablecraft LLC
              </h1>

              {/* Subheading */}
              <div style={{
                fontSize: '1.25rem',
                color: '#111',
                fontStyle: 'italic',
                marginBottom: '1.5rem',
                paddingBottom: '0.5rem',
                borderBottom: '2px solid #5ED1A5'
              }}>
                Stablecoin Payments for Real Businesses
              </div>

              <p>
                Imagine slashing your payment processing fees from
                3% to near-zero, settling cross-border payments in minutes
                instead of days, and tapping into a global customer base
                without worrying about exchange rates. That’s the power of stablecoins like USDC and BUSD. In 2022 alone, stablecoins facilitated $11 trillion in on-chain
                transactions—businesses are catching on, and you don’t want to be left behind.
              </p>

              <a
                href="mailto:johnpottergr@gmail.com"
                style={{
                  display: 'inline-block',
                  marginTop: '0.5rem',
                  marginBottom: '1.25rem',
                  padding: '10px 20px',
                  backgroundColor: '#5ED1A5',
                  color: '#1A202C',
                  fontWeight: 'bold',
                  borderRadius: '6px',
                  textDecoration: 'none',
                }}
              >
                Get Started Now
              </a>
            </div>
          </div>
        </div>

        {/* Offer Card Section */}
        <div style={{ width: '100%', maxWidth: '1100px', textAlign: 'center', padding: '0', color: '#222222' }}>

          {/* Top Header */}
          <div
            style={{
              backgroundColor: '#fff',
              padding: '15px',
              borderRadius: '12px 12px 0 0',
              border: '2px solid #5ED1A5',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              minHeight: '80px',
              boxShadow: '0 0px 0px rgba(0, 0, 0, 0.1)'
            }}
          >
           <p style={{ margin: 0, marginTop: '0rem', color: '#111', fontStyle: 'italic' }}>
              Let’s make payments simple
            </p>
            <p style={{ margin: '0.5rem 0 0 0', fontSize: '0.9rem', lineHeight: '1.8' }}>
              <a href="mailto:johnpottergr@gmail.com" style={{ color: '#111', textDecoration: 'underline' }}>
                johnpottergr@gmail.com
              </a><br />
              616.745.2985
            </p>
          </div>

        </div>
      </main>
    </Layout>
  );
}

// src/pages/red-flag-monitor.js
import React from 'react';
import Layout from '@theme/Layout';

export default function RedFlagMonitor() {
  const stablecoinData = [
    {
      name: 'USDC',
      peg: '✅',
      tvl: '⚠️ -8.2%',
      audit: 'Mar 2024',
      flags: 'Recent depeg due to SVB',
    },
    {
      name: 'DAI',
      peg: '✅',
      tvl: '✅ Stable',
      audit: 'Jan 2024',
      flags: 'High exposure to ETH collateral',
    },
    {
      name: 'USDT',
      peg: '✅',
      tvl: '✅ Stable',
      audit: '❌ Unknown',
      flags: 'No public audits',
    },
    {
      name: 'TUSD',
      peg: '⚠️',
      tvl: '⚠️ -10.5%',
      audit: 'Nov 2023',
      flags: 'Liquidity risk; paused redemptions in Jan',
    },
    {
      name: 'FRAX',
      peg: '✅',
      tvl: '✅ Stable',
      audit: 'Feb 2024',
      flags: 'Partially algorithmic; recent governance changes',
    },
  ];

  return (
    <Layout title="Risk Manager">
    <main style={{ padding: '60px 20px', maxWidth: '1100px', margin: '0 auto' }}>
    <h1 style={{ color: '#36A77A', textAlign: 'center'   }}>
    Stablecoin Risk Manager
  </h1>
      <p style={{ color: '#666', marginBottom: '1.5rem',
       paddingBottom: '0.5rem',          // Optional: extra breathing room
      borderBottom: '1px solid #36A77A', // Keep or adjust as needed
      textAlign: 'center'
       }}>
          Tracks stability issues, audit delays, and red flags across major stablecoins
          </p>

        <div style={{ display: 'flex', gap: '24px', alignItems: 'flex-start' }}>
          <div style={{ flex: 3 }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 0 0 2px #eee' }}>
              <thead style={{ backgroundColor: '#f9f9f9', textAlign: 'left' }}>
                <tr>
                  <th style={{ padding: '12px' }}>Stablecoin</th>
                  <th>Peg</th>
                  <th>TVL</th>
                  <th>Last Audit</th>
                  <th>Red Flags</th>
                </tr>
              </thead>
              <tbody>
                {stablecoinData.map((coin, index) => (
                  <tr key={coin.name} style={{ backgroundColor: index % 2 === 0 ? '#fff' : '#f7f7f7', borderBottom: '1px solid #eee' }}>
                    <td style={{ padding: '12px', fontWeight: 'bold' }}>{coin.name}</td>
                    <td>{coin.peg}</td>
                    <td>{coin.tvl}</td>
                    <td>{coin.audit}</td>
                    <td>{coin.flags}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Right-hand Alert Signup */}
          <div style={{
            flex: 1,
            backgroundColor: '#fefefe',
            border: '1px solid #ddd',
            padding: '20px',
            borderRadius: '8px',
            boxShadow: '0 1px 4px rgba(0,0,0,0.06)'
          }}>
            <h4 style={{ marginBottom: '0.5rem' }}>Get Notified About Red Flags</h4>
            <p style={{ fontSize: '0.9rem', color: '#444', marginBottom: '1rem' }}>
              Enter your email and we’ll notify you if a monitored stablecoin depegs or flags a critical issue.
            </p>
            <form>
              <input
                type="email"
                placeholder="you@example.com"
                style={{
                  width: '100%',
                  padding: '10px',
                  border: '1px solid #ccc',
                  borderRadius: '6px',
                  marginBottom: '12px',
                  fontSize: '0.95rem'
                }}
              />
              <button type="submit" style={{
                width: '100%',
                padding: '10px',
                backgroundColor: '#DB4B4B',
                color: '#fff',
                fontWeight: 'bold',
                border: 'none',
                borderRadius: '6px',
                cursor: 'pointer'
              }}>
                Subscribe
              </button>
            </form>
          </div>

        </div>

        <hr />
        <div className="centered-content">
        <h2 style={{ textAlign: 'center' }}>USDT: Fiat-Backed Stability</h2>
<p>
  <strong>Tether (USDT)</strong> is pegged 1:1 to the US dollar and remains the largest stablecoin by market capitalization, with a value exceeding <strong>$143 billion</strong>. Recent reports indicate its backing consists primarily of fiat currencies, with a significant portion held in <strong>US Treasury bills</strong>, following a shift away from commercial paper to enhance security. It prioritizes liquidity and stability, making USDT a cornerstone for global cryptocurrency transactions, with over <strong>350 million users worldwide as of 2024</strong>.
</p>

<hr />

<h2 style={{ textAlign: 'center' }}>USDC: Fiat-Backed with Regulatory Compliance</h2>
<p>
  <strong>USD Coin (USDC)</strong>, launched in <strong>September 2018</strong>, is a fiat-backed stablecoin designed for stability and trust. It maintains a 1:1 peg to the US dollar, with reserves held in <strong>cash, US Treasury bills, and other secure assets</strong>, and is audited monthly by top-tier accounting firms. USDC’s market cap, around <strong>$55.9 billion in 2025</strong>, highlights its prominence as a reliable, regulated option for global users.
</p>

<hr />

<h2 style={{ textAlign: 'center' }}>TUSD: Fiat-Backed with Transparency</h2>
<p>
  <strong>TrueUSD (TUSD)</strong>, launched in <strong>January 2018</strong>, is a fiat-backed stablecoin focused on transparency and stability. As of 2025, it maintains a 1:1 peg to the US dollar, with reserves held in <strong>traditional banks and escrow accounts</strong>, audited regularly by independent third parties. These <strong>daily attestations</strong> ensure that the circulating supply is fully backed by USD, enhancing trust. TUSD's market cap, around <strong>$3.26 billion in early 2023</strong> and likely higher in 2025, highlights its role in providing a secure and stable option for users.
</p>

<hr />

<h2 style={{ textAlign: 'center' }}>DAI: Crypto-Collateralized and Decentralized</h2>
<p>
  <strong>DAI</strong>, issued by <strong>MakerDAO</strong>, is a decentralized stablecoin operating on the Ethereum blockchain, designed to maintain a $1 peg through <strong>overcollateralization</strong>. It is backed by a basket of cryptocurrencies—primarily <strong>Ethereum (ETH)</strong>, as well as <strong>Basic Attention Token (BAT)</strong>, <strong>wrapped Bitcoin (wBTC)</strong>, and others—held in <strong>Maker Vaults</strong>. DAI is crypto-collateralized and governed by smart contracts. Its stability is maintained by requiring
</p>
<hr />
<h2 style={{ textAlign: 'center' }}>FRAX: Fiat-Backed with Transparency</h2>
<p>
<strong>Frax Finance</strong>, initially known for its fractional-algorithmic stablecoin FRAX, launched <strong>frxUSD</strong> in <strong>2025</strong>. The rebranded version is backed by <strong>BlackRock's USD Institutional Digital Liquidity Fund (BUIDL)</strong> and tokenized by <strong>Securitize</strong> (<strong>FRAX BUIDL Backing</strong>). This fund invests in **cash, U.S. Treasury bills, and repurchase agreements**, ensuring full collateralization and transparency.
</p>
</div>
      </main>
    </Layout>
  );
}


import React, { useState } from 'react';
import Layout from '@theme/Layout';

export default function StablecoinLiquidity() {
  const allDexes = ['Uniswap', 'SushiSwap', 'Curve'];
  const allStablecoins = ['DAI', 'USDC', 'USDT', 'TUSD', 'FRAX'];

  const tokenLogos = {
    USDC: 'https://assets.coingecko.com/coins/images/6319/thumb/USD_Coin_icon.png',
    USDT: 'https://assets.coingecko.com/coins/images/325/thumb/Tether.png',
    DAI: 'https://assets.coingecko.com/coins/images/9956/thumb/4943.png',
    TUSD: 'https://assets.coingecko.com/coins/images/3449/thumb/tusd.png',
    FRAX: 'https://assets.coingecko.com/coins/images/13422/thumb/frax_logo.png',
    WETH: 'https://assets.coingecko.com/coins/images/2518/thumb/weth.png',
  };


  const mockData = [
    { dex: 'Uniswap', pool: 'USDC/DAI', tvl: 250300000, change30d: 9.3, ilRisk: 'Moderate', apy: 5.55 },
    { dex: 'Uniswap', pool: 'USDT/USDC', tvl: 190800000, change30d: 4.8, ilRisk: 'Low', apy: 4.12 },
    { dex: 'Uniswap', pool: 'DAI/USDT', tvl: 107200000, change30d: -2.1, ilRisk: 'Moderate', apy: 5.91 },
    { dex: 'Uniswap', pool: 'WETH/USDC', tvl: 93500000, change30d: -7.5, ilRisk: 'High', apy: 22.45 },
  ];

  const [selectedDEX, setSelectedDEX] = useState('Uniswap');
  const [selectedStablecoin, setSelectedStablecoin] = useState('All');
  const [minTVL, setMinTVL] = useState(500000);

  const filteredData = mockData.filter(pool =>
    pool.dex === selectedDEX &&
    (selectedStablecoin === 'All' || pool.pool.includes(selectedStablecoin)) &&
    pool.tvl >= minTVL
  );


  const getRowColor = (risk) => {
    if (risk === 'Low') return '#F0FAF7';
    if (risk === 'Moderate') return '#FEF9E7';
    if (risk === 'High') return '#FCE8E6';
    return 'white';
  };

  return (
<Layout title="Stablecoin Liquidity Tracker">
  <main style={{ padding: '60px 20px', maxWidth: '1200px', margin: '0 auto' }}>
  <h1 style={{ color: '#36A77A', textAlign: 'center'   }}>
  Stablecoin Liquidity Tracker
</h1>
    <p style={{ color: '#666', marginBottom: '1.5rem',
     paddingBottom: '0.5rem',          // Optional: extra breathing room
    borderBottom: '1px solid #36A77A', // Keep or adjust as needed
    textAlign: 'center'
     }}>
      Tracks stablecoin-heavy liquidity pools on major decentralized exchanges (DEXs)
    </p>

    {/* Filters */}
        <div style={{ display: 'flex', gap: '12px', marginTop: '1rem', marginBottom: '1.5rem' }}>
          <select value={selectedDEX} onChange={(e) => setSelectedDEX(e.target.value)}>
            {allDexes.map(dex => <option key={dex} value={dex}>{dex}</option>)}
          </select>
          <select value={selectedStablecoin} onChange={(e) => setSelectedStablecoin(e.target.value)}>
            <option value="All">All Stablecoins</option>
            {allStablecoins.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
          <select value={minTVL} onChange={(e) => setMinTVL(Number(e.target.value))}>
            <option value={0}>No filter</option>
            <option value={500000}>Over $500K</option>
            <option value={1000000}>Over $1M</option>
          </select>
        </div>

{/* Two-column layout: Table + Sidebar */}
<div style={{ display: 'flex', gap: '24px', alignItems: 'flex-start' }}>
  {/* Table + Pool Depth chart column */}
  <div style={{ flex: 3 }}>
    <table style={{ width: '100%', borderCollapse: 'collapse', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 0 0 2px #eee' }}>
      <thead style={{ backgroundColor: '#f9f9f9', textAlign: 'left' }}>
        <tr>
          <th style={{ padding: '12px' }}>Pool</th>
          <th>Pool Depth</th>
          <th>30D Change</th>
          <th>IL Risk</th>
          <th>Yield</th>
        </tr>
      </thead>
      <tbody>
        {filteredData.map((pool, index) => (
          <tr key={pool.pool} style={{ backgroundColor: index % 2 === 0 ? '#fff' : '#f7f7f7', borderBottom: '1px solid #eee' }}>
           <td style={{ padding: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
  {pool.pool.split('/').map(token => (
    <img
      key={token}
      src={tokenLogos[token]}
      alt={token}
      style={{ width: '20px', height: '20px', borderRadius: '50%' }}
    />
  ))}
  <span style={{ marginLeft: '8px' }}>{pool.pool}</span>
</td>

            <td>${(pool.tvl / 1e6).toFixed(1)}M</td>
            <td style={{ color: pool.change30d < 0 ? '#DB4B4B' : '#3BBE86' }}>
              {pool.change30d > 0 ? '+' : ''}{pool.change30d}%
            </td>
            <td>{pool.ilRisk}</td>
            <td>{pool.apy}%</td>
          </tr>
        ))}
      </tbody>
    </table>

    {/* Pool Depth chart directly under table */}
    <div style={{
      marginTop: '1.5rem',
      height: '150px',
      backgroundColor: '#f4f4f4',
      borderRadius: '8px',
      textAlign: 'center',
      paddingTop: '60px'
    }}>
      Pool Depth (chart)
    </div>
  </div>

  {/* Right-side summary charts */}
  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '16px' }}>
    <div style={{ height: '150px', backgroundColor: '#f4f4f4', borderRadius: '8px', textAlign: 'center', paddingTop: '60px' }}>
      Stablecoin Dominance (chart)
    </div>
    <div style={{ height: '150px', backgroundColor: '#f4f4f4', borderRadius: '8px', textAlign: 'center', paddingTop: '60px' }}>
      Yield Opportunities (chart)
    </div>
  </div>
</div>
      </main>
    </Layout>
  );
}



import React from 'react';
import Layout from '@theme/Layout';

export default function Stablecoinpaymentservices() {
  return (
    <Layout title="Services">
      <div style={{ padding: '20px', maxWidth: '870px', margin: '40px auto', color: '#111',  }}>
        <h1 style={{ color: '#36A77A', textAlign: 'center'   }}>Payment Services</h1>

        <div style={{
         textAlign: 'center',

        color: '#111',
        fontStyle: 'none',              // Makes it italic
        marginBottom: '1.5rem',           // Adds space between subtitle and border
        paddingBottom: '0.5rem',          // Optional: extra breathing room
        borderBottom: '1px solid #36A77A' // Keep or adjust as needed
      }}>
We don’t just consult—we implement.
      </div>
        <p style={{  textAlign: 'left'  }}>

        From wallets to webhooks, we help businesses adopt
        stablecoins with a setup that’s practical, secure, and
        built for long-term use. Here are 4 major ways we do so:
                  </p>

         <h3 style={{
        color: '#36A77A', fontWeight:'600',
      }}>1. Gateway Integration</h3>
<p style={{
        color: '#111',
      }}>
We'll connect your site or platform to stablecoin-compatible payment gateways. Whether you're using Stripe's crypto support, Coinbase Commerce, or on-chain solutions like smart contract-based checkout, we’ll make sure payments are fast, secure, and verified on-chain.
</p>
<h3 style={{
        color: '#36A77A', fontWeight:'600',
      }}>2. Wallet Setup & Management</h3>
<p>From custodial wallets (for ease of use) to non-custodial options (for maximum control), we’ll guide your team through wallet selection, setup, and safe handling of private keys—so your customers can pay and your team can sleep at night.
</p>
<h3 style={{
        color: '#36A77A', fontWeight:'600',
      }}>3. Stablecoin Strategy</h3>

<p>
  <img
    src="img/usdc.jpg"
    alt="USDC"
    style={{ width: '150px', float: 'right', marginLeft: '15px', marginBottom: '5px' }}
  />
  Need help deciding between USDC, USDT, or something like EUROC? We’ll help you match your business model to the right token, with a view on transaction volume, jurisdiction, and compliance.
</p>
<h3 style={{
        color: '#36A77A', fontWeight:'600',
      }}>
4. Connected Dashboards & Data Sync
</h3>
<p>
We build real-time dashboards that let you track stablecoin payments, wallet activity, and compliance status across borders—all in one place. Whether you’re syncing on-chain transactions with CRMs, ERPs, or marketing tools, we’ll help you bridge your web3 infrastructure with the rest of your business stack. No more spreadsheets or disconnected systems—just clean, usable data where and when you need it.
</p>
<div style={{
  backgroundColor: '#f5f5f5',
  padding: '2rem',
  borderRadius: '8px',
  color: '#111',
  marginTop: '2rem'
}}>
<h3>Example Scenarios</h3>

 <h4> 🛒 Cross-Border Payouts Without Banks</h4>
 <p>A small but growing business wants to pay contractors in multiple countries without waiting days for wire transfers or dealing with international banking fees. They’re interested in using USDC for faster, cheaper payouts but aren’t sure how to manage wallets, track transactions, or stay compliant. We help them design a stablecoin payment flow that automates fund transfers, integrates with their accounting tools, and gives them visibility into every payment—no crypto background required.
  </p>
  <h4>📊 Internal Wallet Activity Dashboard</h4>
  <p>A finance team accepts stablecoin payments from customers but struggles to track what’s been received, from whom, and for what. Instead of relying on block explorers or copy-pasting wallet logs into spreadsheets, they need a cleaner way to view and organize transactions. We build a custom dashboard that connects to their wallets, displays incoming payments in real time, and highlights any missing metadata—making reconciliation simple and shareable.
  </p>
  <h4>🔗 Smart Contract Triggers for Operations</h4>
<p>An operations team wants to know the moment a customer completes an on-chain payment—so they can unlock content, send onboarding emails, or notify the right people. They don’t want to manage infrastructure or write webhook handlers from scratch. We help them bridge smart contract events to tools like Slack, Google Sheets, or HubSpot, giving them an automated, low-maintenance way to tie payments to business workflows.
</p>
      </div>
      </div>
    </Layout>
  );
}



// src/pages/stablecoin-stress-test.js
import React, { useState } from 'react';
import Layout from '@theme/Layout';

export default function StablecoinStressTest() {
  const initialWeights = {
    'Peg deviation': 27,
    'Volume volatility': 16,
    'Supply changes': 16,
    'Liquidity change': 21,
    'Collateral quality': 15,
    'Sentiment Analysis': 5,
  };

  const [riskWeights, setRiskWeights] = useState(initialWeights);

  const total = Object.values(riskWeights).reduce((sum, val) => sum + val, 0);

  const handleSliderChange = (factor, value) => {
    const newWeights = { ...riskWeights, [factor]: Number(value) };
    const newTotal = Object.values(newWeights).reduce((sum, val) => sum + val, 0);
    if (newTotal <= 100) setRiskWeights(newWeights);
  };

  const simulatedMetrics = {
    USDT: {
      'Peg deviation': 0.01,
      'Volume volatility': 0.1,
      'Supply changes': 0.05,
      'Liquidity change': 0.03,
      'Collateral quality': 0.1,
      'Sentiment Analysis': 0.05,
    },
    USDC: {
      'Peg deviation': 0.12,
      'Volume volatility': 0.15,
      'Supply changes': 0.1,
      'Liquidity change': 0.08,
      'Collateral quality': 0.12,
      'Sentiment Analysis': 0.07,
    },
    DAI: {
      'Peg deviation': 0.05,
      'Volume volatility': 0.2,
      'Supply changes': 0.1,
      'Liquidity change': 0.1,
      'Collateral quality': 0.08,
      'Sentiment Analysis': 0.1,
    },
    TUSD: {
      'Peg deviation': 0.25,
      'Volume volatility': 0.15,
      'Supply changes': 0.2,
      'Liquidity change': 0.25,
      'Collateral quality': 0.2,
      'Sentiment Analysis': 0.2,
    },
    FRAX: {
      'Peg deviation': 0.03,
      'Volume volatility': 0.05,
      'Supply changes': 0.08,
      'Liquidity change': 0.05,
      'Collateral quality': 0.06,
      'Sentiment Analysis': 0.03,
    },
  };

  const collateralData = {
    USDT: '60% Treasuries, 20% commercial paper',
    USDC: '100% short-term U.S. Treasuries',
    DAI: 'Multi-collateral: ETH, USDC, others',
    TUSD: 'Fully backed by U.S. dollars',
    FRAX: 'Partially algorithmic, partly collateralized'
  };

  const calculateRiskScore = (coin) => {
    const metrics = simulatedMetrics[coin];
    let total = 0;
    Object.entries(riskWeights).forEach(([factor, weight]) => {
      const metric = metrics[factor] || 0;
      total += metric * (weight / 100);
    });
    return total;
  };

  const scoreToLabel = (score) => {
    if (score < 0.1) return { label: 'Low Risk', color: '#8BD4A1' };
    if (score < 0.2) return { label: 'Moderate', color: '#6E7C88' };
    if (score < 0.3) return { label: 'High', color: '#F2B94B' };
    return { label: 'Critical', color: '#DB4B4B' };
  };

  const stablecoins = Object.keys(simulatedMetrics).map((coin) => {
    const score = calculateRiskScore(coin);
    const { label, color } = scoreToLabel(score);
    return {
      name: coin,
      price: '$1.00',
      change: '+0.0%',
      trend: '—',
      risk: label,
      riskColor: color,
      last: '—',
      recovery: '—',
      score: (score * 100).toFixed(1),
      collateral: collateralData[coin]
    };
  });
  const events = [
    {
      name: 'USDC',
      date: 'Mar 11, 2023',
      drawdown: '-12%',
      recovery: '56 hrs',
      cause: 'Triggered by collapse of Silicon Valley Bank',
      link: 'https://www.coindesk.com/policy/2023/03/11/usdc-falls-to-87-cents-as-circle-discloses-33b-svb-exposure/'
    },
    {
      name: 'DAI',
      date: 'May 12, 2022',
      drawdown: '-6%',
      recovery: '6 hrs',
      cause: 'ETH volatility + cascading liquidations',
      link: 'https://www.theblock.co/post/148913/dai-stablecoin-drops-peg'
    },
    {
      name: 'TUSD',
      date: 'Jun 28, 2021',
      drawdown: '-1.2%',
      recovery: '17 hrs',
      cause: 'Low liquidity during withdrawal spike',
      link: 'https://cryptobriefing.com/trusttoken-says-tusd-depeg-was-due-to-liquidity-issue/'
    },
    {
      name: 'FRAX',
      date: 'Dec 12, 2020',
      drawdown: '-3%',
      recovery: '9 hrs',
      cause: 'Algorithmic supply shift post-launch',
      link: 'https://blog.frax.finance/frax-v1-deployment-and-early-lessons-3ba8893a4a6e'
    }
  ];

  return (
    <Layout title="Stablecraft Stress Test">
      <main style={{ padding: '60px 20px', maxWidth: '1200px', margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <h1 style={{ color: '#36A77A'}}>Stablecoin Stress Test Assessment</h1>
          <p style={{ color: '#666', marginBottom: '1.5rem',
           paddingBottom: '0.5rem',          // Optional: extra breathing room
           borderBottom: '1px solid #36A77A' // Keep or adjust as needed
            }}>
            Dynamic risk levels based on real-time (simulated) metrics and weighting.
          </p>
        </div>

        <div style={{ display: 'flex', gap: '16px', marginTop: '1rem', flexWrap: 'wrap', justifyContent: 'center' }}>
          {stablecoins.map((coin) => (
            <div key={coin.name} style={{ width: '180px', padding: '16px', backgroundColor: '#fff', borderRadius: '12px', boxShadow: '0 0 0 2px #e5e7eb' }}>
              <h3 style={{ margin: '0 0 6px 0', fontSize: '1.25rem', color: '#222' }}>{coin.name}</h3>
              <div style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>{coin.price}</div>
              <div style={{ fontSize: '0.9rem', marginBottom: '4px', color: '#666' }}>{coin.change} <span>{coin.trend}</span></div>
              <div style={{ backgroundColor: coin.riskColor, color: '#111', fontWeight: 'bold', borderRadius: '6px', padding: '4px 8px', display: 'inline-block', marginBottom: '12px' }}>{coin.risk} ({coin.score})</div>
              <div style={{ fontSize: '0.85rem', color: '#555' }}>Last depegging<br /><strong>{coin.last}</strong></div>
              <div style={{ fontSize: '0.85rem', color: '#555' }}>Recovery<br /><strong>{coin.recovery}</strong></div>
              <div style={{ fontSize: '0.85rem', color: '#555', marginTop: '6px' }}>Collateral:<br /><strong>{coin.collateral}</strong></div>
            </div>
          ))}
        </div>

        {/* Risk Factor Sliders */}
        <div style={{ marginTop: '3rem', width: '100%', textAlign: 'center' }}>
          <h2 style={{ color: '#222', fontSize: '1.4rem', marginBottom: '0.25rem' }}>Risk Factor Weights</h2>
          <p style={{ fontSize: '0.9rem', color: '#666', marginBottom: '1.5rem' }}>
            Adjust how much weight each risk factor should carry. Total must stay ≤ 100%.
          </p>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '16px',
            maxWidth: '650px',
            margin: '0 auto',
            padding: '0 1rem'
          }}>
            {Object.entries(riskWeights).map(([label, value]) => (
              <div key={label} style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                <div style={{ flex: '0 0 160px', textAlign: 'left', fontSize: '1rem', color: '#333' }}>{label}</div>
                <input
                  type="range"
                  min={0}
                  max={100}
                  value={value}
                  onChange={(e) => handleSliderChange(label, e.target.value)}
                  style={{ flex: '1' }}
                />
                <div style={{ flex: '0 0 50px', textAlign: 'right', fontSize: '0.95rem' }}>{value}%</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: '1rem', fontSize: '0.9rem', color: total > 100 ? '#DB4B4B' : '#3BBE86', fontWeight: 'bold' }}>
            Total: {total}%
          </div>
</div>

{/* Timeline Section */}
<div style={{ marginTop: '2rem' }}>
  <h3 style={{ textAlign: 'center', marginBottom: '1rem' }}>Depeg History Timeline</h3>
  <div style={{
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
    gap: '16px'
  }}>
    {events.map((event) => (
      <a
        key={event.name}
        href={event.link}
        target="_blank"
        rel="noopener noreferrer"
        style={{
          textDecoration: 'none',
          color: '#111',
          width: '250px',
          backgroundColor: '#fff',
          border: '2px solid #5ED1A5',
          borderRadius: '12px',
          padding: '16px',
          boxShadow: '0 0 0 1px #eee',
          transition: 'all 0.25s ease-in-out',
          cursor: 'pointer',
          transform: 'translateY(0)'
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.boxShadow = '0 6px 16px rgba(0,0,0,0.12)';
          e.currentTarget.style.transform = 'translateY(-4px)';
          e.currentTarget.style.backgroundColor = '#f7fdfb';  // slight background shift
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.boxShadow = '0 0 0 1px #eee';
          e.currentTarget.style.transform = 'translateY(0)';
          e.currentTarget.style.backgroundColor = '#fff';
        }}
      >
        <strong style={{ textDecoration: 'underline', textUnderlineOffset: '3px' }}>{event.name}</strong> — {event.date}
        <div style={{ fontSize: '0.9rem', marginTop: '8px' }}>
          Drawdown: <strong>{event.drawdown}</strong><br />
          Recovery: <strong>{event.recovery}</strong><br />
          <em>{event.cause}</em>
        </div>
        <div style={{ marginTop: '8px', fontSize: '0.85rem', color: '#5ED1A5', textDecoration: 'underline' }}>
  Read more →
</div>
      </a>
    ))}
  </div>
</div>


      </main>
    </Layout>
  );
}


import React, { useEffect, useCallback } from 'react';
import Layout from '@theme-original/Layout';
import { useLocation } from '@docusaurus/router';
import { useWindowSize } from '@docusaurus/theme-common';

function LayoutWrapper(props) {
  const location = useLocation();
  const isKB = location.pathname.startsWith('/kb');
  const windowSize = useWindowSize();

  const updateBodyClass = useCallback(() => {
    const body = document.body;
    if (body) {
      console.log('Current Path:', location.pathname);
      console.log('isKB:', isKB);
      if (isKB) {
        body.classList.add('kb-page');
        console.log('Added kb-page class to body');
      } else {
        body.classList.remove('kb-page');
        console.log('Removed kb-page class from body');
      }
    } else {
      console.warn('Document body not found, skipping class update');
    }
  }, [isKB, location.pathname]);

  useEffect(() => {
    const timer = setTimeout(updateBodyClass, 0);
    return () => clearTimeout(timer);
  }, [updateBodyClass]);

  // Debug viewport and navbar rendering
  useEffect(() => {
    console.log('Window Size (from useWindowSize):', windowSize);
    console.log('Viewport Width (window.innerWidth):', window.innerWidth);
    const navbarToggle = document.querySelector('.navbar__toggle');
    if (navbarToggle) {
      console.log('Hamburger menu element found:', navbarToggle);
      console.log('Hamburger menu computed display:', window.getComputedStyle(navbarToggle).display);
    } else {
      console.log('Hamburger menu element not found in DOM');
    }
  }, [windowSize]);

  const showBanner = isKB && windowSize === 'desktop';
  const navbarHeight = '3.75rem'; // Navbar height (60px)

  return (
    <>
      {showBanner && (
        <div
          style={{
            background: 'white',
            color: '#36A77A',
            textAlign: 'center',
            height: '5rem',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            borderBottom: '1px solid #36A77A', // Keep or adjust as needed
            fontSize: '2.10rem',
    
            fontWeight: 'bold',
            position: 'relative',
            zIndex: 250,
            marginTop: navbarHeight,
          }}
        >
          Knowledge Base
        </div>
      )}
      <Layout {...props} />
    </>
  );
}

export default LayoutWrapper;


import React from 'react';
import Navbar from '@theme-original/Navbar';

function NavbarWrapper(props) {
  console.log('Navbar - Custom component loaded!');
  return <Navbar {...props} />;
}

export default NavbarWrapper;


🔗 Available Integration Guides

📚 Sandbox API Documentation (Optional)

Service Docs

Stablecraft

What we offer and what our documentation covers

How We Work

Create and safely store API credentials for payment vendors, your wallet, or smart contract

API Credential Setup

Integrate with Coinbase to receive payment confirmation and status updates.

Coinbase Commerce Integration

Possible Stripe setup for stablecoin-enabled checkout and payout options

Stripe Crypto Integration (Early Access)

Directly send stablecoins to a smart contract or wallet address you control

On-Chain Checkout Setup

Custodial and non-custodial wallet setup instructions

Wallet Setup & Management

API documentation for calculating dynamic risk scores for stablecoins based on peg deviation, liquidity, volume, collateral quality, and other adjustable risk factors.

Stress Test Docs

Track stablecoin trading volume using CoinGecko's API as part of the Stress Test framework.

Daily Volume Monitoring

Monitor stablecoin peg stability using CoinGecko's API as part of the Stress Test framework.

Peg Deviation Monitoring

Monitor crypto sentiment trends for stablecoins using LunarCrush's API as part of the Stress Test framework.

Sentiment Analysis

Track changes in stablecoin circulating supply using CoinGecko's API as part of the Stress Test framework.

Supply Changes Monitoring

Monitor stablecoin pool liquidity (TVL) on Curve Finance using Curve's public API as part of the Stress Test framework.

TVL Monitoring (Curve)

Monitor stablecoin pool liquidity (TVL) on SushiSwap using The Graph’s public subgraph API as part of the Stress Test framework.

TVL Monitoring (SushiSwap)

Monitor stablecoin pool liquidity (TVL) on Uniswap using The Graph’s public subgraph API as part of the Stress Test framework.

TVL Monitoring (Uniswap)

Monitor stablecoin risks by tracking pool liquidity, peg stability, audit recency, and known risk factors across Uniswap, SushiSwap, and Curve.

Stablecoin Risk Manager

Retrieve and evaluate stablecoin prices using the CoinGecko public API to monitor peg stability.

Peg Monitoring with CoinGecko

Retrieve stablecoin pool liquidity and yield opportunities using the Curve Finance public REST API.

TVL and Yield Monitoring with Curve API

Retrieve daily stablecoin liquidity data from SushiSwap using The Graph's public subgraph API.

Stablecoin TVL Monitoring with SushiSwap Subgraph

Retrieve daily stablecoin liquidity data from Uniswap using The Graph's public subgraph API.

Stablecoin TVL Monitoring with Uniswap Subgraph

An overview of available endpoints and data sources for liquidity tracking, stablecoin dominance, and yield opportunities across Uniswap, SushiSwap, and Curve.

Liquidity API Overview

Instructions for retrieving daily price data and yield data from Curve using free public APIs.

Curve Data API

Instructions for retrieving daily price data from SushiSwap using free public APIs.

SushiSwap Data API

Instructions for retrieving daily price data, pool depth data, and stablecoin dominance data from UniSwap using free public APIs.

UniSwap Data API

Retrieve all wallets associated with your Stablecraft account, along with their balances and asset types

List Wallets

Retrieve detailed information about a specific wallet by providing its unique wallet ID

Get Wallet by ID

Create and send a stablecoin transaction from one of your wallets to a specified recipient address

Send a Stablecoin Payment

Retrieve detailed information about specific stablecoin transactions using their unique transaction ID

Get Transaction by ID

Retrieve the latest conversion rates for supported stablecoins relative to USD

Service Docs

Service Integrations

Stress Test Pages

Risk Manager Pages

Liquidity Pages

Sandbox API

Service Docs

🔗 Available Integration Guides

📚 Sandbox API Documentation (Optional)

Service Docs

Service Integrations

Stress Test Pages

Risk Manager Pages

Liquidity Pages

Sandbox API

​🔗 Available Integration Guides

​📚 Sandbox API Documentation (Optional)

🔗 Available Integration Guides

📚 Sandbox API Documentation (Optional)