1"use strict";(globalThis.webpackChunksecurecodebox=globalThis.webpackChunksecurecodebox||[]).push([[1664],{3872(e,t,s){s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>l});const r=JSON.parse('{"id":"architecture/architecture_decisions/adr_0001","title":"ADR-0001: Choosing the framework for the new secureCodeBox Website","description":"| | |","source":"@site/docs/architecture/09_architecture_decisions/adr_0001.md","sourceDirName":"architecture/09_architecture_decisions","slug":"/architecture/architecture_decisions/adr_0001","permalink":"/docs/architecture/architecture_decisions/adr_0001","draft":false,"unlisted":false,"editUrl":"https://github.com/securecodebox/securecodebox/edit/main/documentation/docs/architecture/09_architecture_decisions/adr_0001.md","tags":[],"version":"current","frontMatter":{"title":"ADR-0001: Choosing the framework for the new secureCodeBox Website","sidebar_label":"ADR-0001"},"sidebar":"docs","previous":{"title":"Architecture Decisions","permalink":"/docs/architecture/architecture_decisions/"},"next":{"title":"ADR-0002","permalink":"/docs/architecture/architecture_decisions/adr_0002"}}');var i=s(4848),n=s(8453);const o={title:"ADR-0001: Choosing the framework for the new secureCodeBox Website",sidebar_label:"ADR-0001"},a="ADR-0001: Choosing the framework for the new secureCodeBox Website",c={},l=[{value:"Context",id:"context",level:2},{value:"Research",id:"research",level:3},{value:"Decision",id:"decision",level:2},{value:"Consequences",id:"consequences",level:2}];function d(e){const t={a:"a",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,n.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"adr-0001-choosing-the-framework-for-the-new-securecodebox-website",children:"ADR-0001: Choosing the framework for the new secureCodeBox Website"})}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{}),(0,i.jsx)(t.th,{})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsxs)(t.td,{children:[(0,i.jsx)(t.strong,{children:"Status"}),":"]}),(0,i.jsx)(t.td,{children:"ACCEPTED"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsxs)(t.td,{children:[(0,i.jsx)(t.strong,{children:"Date"}),":"]}),(0,i.jsx)(t.td,{children:"2019-08-21"})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsxs)(t.td,{children:[(0,i.jsx)(t.strong,{children:"Author(s)"}),":"]}),(0,i.jsxs)(t.td,{children:["Daniel Patanin ",(0,i.jsx)(t.a,{href:"mailto:[email protected]",children:"[email protected]"}),", Jannick Hollenbach ",(0,i.jsx)(t.a,{href:"mailto:[email protected]",children:"[email protected]"})]})]})]})]}),"\n",(0,i.jsx)(t.h2,{id:"context",children:"Context"}),"\n",(0,i.jsx)(t.p,{children:"There are tons of different frameworks for building websites out there. We must choose the most fitting one for our use, fulfilling our mandatory requirements:"}),"\n",(0,i.jsx)(t.p,{children:"\u2022 Common programming language, if applicable easy to learn \u2022 Overall easy to use and start-up, also locally \u2022 Tutorials, examples and a good documentation \u2022 Bonus points for great and many easy to use templates and plugins \u2022 Needs continuous support and contribution \u2022 Must be able to be deployed as GitHub pages"}),"\n",(0,i.jsx)(t.p,{children:"We will choose from the following popular/trending:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://gridsome.org/",children:"Gridsome"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.gatsbyjs.org/",children:"Gatsby"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://gohugo.io/",children:"Hugo"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://jekyllrb.com/",children:"Jekyll"})}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"research",children:"Research"}),"\n",(0,i.jsx)(t.p,{children:"These frameworks do all fulfill the requirements to the extent that I estimate them as wellsuited. First, I researched the listed features on the respective sites or quickly googled after it specifically and found instantly the requested feature. I followed up with a general overview of how old the frameworks, how popular they are and for example pages build with them. Afterwards I searched for c
1omparison blogs and posts, mostly to examine their comments. Most of these \u201epro-cons \u201c-posts are inaccurate and very superficial, but luckily because of that the comment sections hold interesting discussions and comparisons from overall features and usability to specific issues and problems of each framework and which framework fits what use-cases in general. After this research I\u2019ve come to a majority of similar experience sharing and discussions. These described the distribution of these frameworks as follows (roughly summarized):"}),"\n",(0,i.jsx)(t.p,{children:"Gridsome is like Gatsby just for VueJS. Gatsby is blazing fast after building the pages but requires a little bit more understanding of JavaScript and React and may not be as easy to get behind if you\u2019ve never built a site with a static site generator before. Hugo is fast in building and based on Golang. But as a newbie to that language you\u2019ll find yourself using the documentation very much, unless you learn this language to a curtain depth. Jekyll is simple in templating and very good for quickly starting a small blog site but based on ruby and therefore requires ruby dependencies."}),"\n",(0,i.jsx)(t.h2,{id:"decision",children:"Decision"}),"\n",(0,i.jsx)(t.p,{children:"So, it seems that Hugo is a pretty good choice for sites with many, many\u2026. like many pages. Jekyll seems to fit for a quick build. Gatsby and Gridsome require a bit more time to learn but have their advantages in speed and growth of the site. And whether you choose Gridsome over Gatsby relies on whether you want to use VueJS or not."}),"\n",(0,i.jsx)(t.p,{children:"Finally we\u2019ve decided to use Gatsby. Some of the main reasons is it\u2019s fast performance, the extensive documentation and tutorials and also the language, since Hugo (the other framework we considered mainly) is based on Golang, and as for my part as a developer I feel completely comfortable and prefer working with JSX. Overall it comes down to preferences mostly, since we\u2019re not going to build a giant Website, nor are we planning on implementing \u201ccrazy\u201d Features."}),"\n",(0,i.jsx)(t.h2,{id:"consequences",children:"Consequences"}),"\n",(0,i.jsx)(t.p,{children:"For the integration of our multi-repository documentation we\u2019ll use Antora if working this out with Gatsby is going to be more difficult than integrating Antora. We\u2019re aware that using Gatsby requires a bit more maintenance and has the drawback, that if anybody else will maintain or work on the website, this person will need to at least understand the basics of React and GraphQL."})]})}function h(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},8453(e,t,s){s.d(t,{R:()=>o,x:()=>a});var r=s(6540);const i={},n=r.createContext(i);function o(e){const t=r.useContext(n);return r.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(i):e.components||i:o(e.components),r.createElement(n.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.