update to be object oranted

.gitignore

@@ -1 +1,2 @@
-/__picache__
+/__pycache__
+/public

Dockerfile

@@ -0,0 +1,10 @@
+FROM python:3
+
+WORKDIR /app
+
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+copy . .
+
+CMD [ "python", "./render.py" ]

index.py

@@ -0,0 +1,139 @@
+import os
+import yaml
+import shutil
+from jinja2 import Template
+import sass
+
+from page import Page
+
+pages = []
+
+# SRC_DIR = "/home/mreenen/Documents/git/kladjes"
+SRC_DIR = os.path.abspath("/home/mreenen/Documents/git/kladjes")
+TARGET_DIR = os.path.abspath("public")
+
+def renderPage(page, template, header):
+    html = page.renderPage(template, header, SRC_DIR)
+
+    path = TARGET_DIR + page.url
+    if (path.split('.')[-1] != "html"):
+        path = os.path.abspath(path + '/index.html')
+
+    pathDir = os.path.dirname(path)
+    fileName = os.path.basename(path)
+
+    os.makedirs(pathDir, exist_ok=True)
+    with open(path, 'w') as file:
+        file.write(html)
+    del html
+
+    if (page.assets is not None):
+        print("assets found")
+        for asset in page.assets:
+            srcAssets = SRC_DIR + asset
+            destAssets = TARGET_DIR + asset
+
+            if(not os.path.isdir(destAssets)):
+                os.mkdir(destAssets)
+
+            print(f"asset: {asset}")
+
+            for f in os.listdir(srcAssets):
+                print(f"f: {f}")
+                if ((f[0] != '.') and os.path.isfile(srcAssets + "/" + f)):
+                    print("copy: " + asset + "/" + f)
+                    shutil.copyfile(srcAssets + "/" + f, destAssets + "/" + f)
+
+def findPageInList(list, url):
+    i = 0
+    while (i < len(list)):
+        if (list[i].url == url):
+            return i
+        i += 1
+    return -1
+
+def render(rootPage, template, header):
+    done = False
+    isSub = False
+    lastPage = []
+    curPage = 0
+    while not done:
+        if (curPage == 0):
+            page = rootPage
+        else:
+            pageIndex = curPage - 1
+            page = None
+            if (pageIndex < len(rootPage.subPages)):
+                page = rootPage.subPages[pageIndex]
+            else:
+                pageIndex -= len(rootPage.subPages)
+                if (pageIndex < len(rootPage.sidebar)):
+                    page = rootPage.sidebar[pageIndex]
+
+        if (page is not None):
+            if (page.clickable):
+                renderPage(page, template, header)
+
+            if ((curPage != 0) and
+                    ((len(page.subPages) > 0) or (len(page.sidebar) > 0))):
+                rootPage = page
+                lastPage.append(curPage)
+                curPage = 1
+            else:
+                curPage += 1
+
+        else:
+            if (len(lastPage) > 0):
+                curPage = lastPage.pop() + 1
+                rootPage = rootPage.parrent
+            else:
+                done = True
+                print(f"done")
+
+
+
+def index(fileName):
+    global pages
+    with open(SRC_DIR + '/index.yaml', 'r') as file:
+        index = yaml.safe_load(file)
+
+    if ('sitemap' not in index):
+        print("ERROR: /index.yaml is missing a sitemap")
+    else:
+        pages = []
+        for item in index["sitemap"]:
+            pages.append(Page(item, None))
+
+        for page in pages:
+            page.scan(SRC_DIR)
+
+        print("START INDEX")
+        for p in pages:
+            print(p)
+        print("END INDEX")
+
+        seperator = False
+        header = ""
+        for p in pages:
+            if (seperator):
+                header += "<span class='menuSeparator'>|</span>"
+            header += p.topMenuHTML()
+            seperator = True
+
+        os.makedirs(TARGET_DIR, exist_ok=True)
+        with open(TARGET_DIR + '/header.html', 'w') as file:
+            file.write(header);
+
+        with open('template.html') as file:
+            template = Template(file.read())
+            for p in pages:
+                render(p, template, header)
+
+        with open('style.scss', 'r') as file:
+            css = sass.compile(string=file.read())
+        with open(TARGET_DIR + '/style.css', 'w') as file:
+            file.write(css)
+        del css
+
+if __name__ == '__main__':
+    index('index.yml')

index.yml

@@ -1,134 +1,168 @@
 ---
-- lable: Home
-  url: /
+ - lable: Home
+   url: /
 # - lable: Niet vergeten
 #   url: /niet-vergeten.html
-- lable: HR
-  sub:
+ - lable: HR
+   sub:
+    - lable: ANE10
+      url: ANE10
+      sidebar:
+       - lable: Index
+         url: .
+       - lable: Dingen
+         url: dingen.html
+       - lable: lab 3
+         url: lab-3.html
+       - lable: lab 5
+         url: lab-5.html
+    - lable: ANE10-2
+      url: ANE10-2
+      sidebar:
+       - lable: Index
+         url: .
+       - lable: Bi Polar Junction Transistor
+         url: bjt.html
+       - lable: Field Effect Transistor
+         url: fet.html
+
+    - lable: DIS10
+      sidebar:
+       - lable: index
+         url: .
+       - lable: handigheidjes
+         url: handigheidjes.html
+       - lable: opgavens
+         url: opgaves.html
+       - lable: 3.1 theorie
+         url: week-3.1.html
+       - lable: 3.2 theorie
+         url: week-3.2.html
+       - lable: 3.3 theorie
+         url: week-3.3.html
+       - lable: 3.4 lab
+         url: week-3.4.html
+       - lable: 3.5 theorie
+         url: week-3.5.html
+       # - lable: 3.7 lab
+       #   url: week-3.7.html
+       - lable: 4.1 lab
+         url: week-4.1.html
+       - lable: 4.3 lab
+         url: week-4.3.html
+       - lable: 4.4 theorie
+         url: week-4.4.html
+       - lable: 4.5 theorie
+         url: week-4.5.html
+       - lable: 4.7 lab
+         url: week-5.5.html
+    - lable: EPS20
+      sidebar:
+       - lable: index
+         url: .
+       - lable: week 1
+         url: week-1.html
+       - lable: lab 1
+         url: lab-1.html
+       - lable: week 2
+         url: week-2.html
+
     - lable: Argief (beta)
       url: argief
       sidebar:
         # year 1
 
-        - WIS10 #empty
-        - ELE10 #empty
-        - PEE10 #empty
-        - lable: ELE20
-          sub:
-            - opamp
+       - lable: WIS10 #empty
+         clickable: False
+       - lable: ELE10 #empty
+         clickable: False
+       - lable: PEE10 #empty
+         clickable: False
+       - lable: ELE20
+         sub:
+          - opamp
 
-        #- WIS20
-        - EMS10 #empty
-        - PEE20 #empty
-        - lable: EPS10
-          sub:
-            - buckboost
-            - electiesh-en-machnetich-veld
-            - lab-1
-            - lab-2
-            - lab-3
-            - lab-4
-            - lab-5
-            - lab-6
 
-        # year 2
+       - lable: WIS20
+         sidebar:
+          - lable: formuleblad
+            url: formuleblad.html
+          - lable: diffrencieren
+            url: diffrencieeren.html
+          - lable: supsitutsie
+            url: supsitutsie.html
+          - lable: breuksplitsen
+            url: breuksplitsen.html
+          - lable: parsiele int.
+            url: parsiel.html
+          - lable: fourier transform
+            url: fourier-transformatie.html
+          - lable: divrenciaal vergeleiking
+            url: difrenciaal-vergeleiking.html
+          - lable: 2de Orde DV
+            url: 2de-orde-dv.html
+       - EMS10 #empty
+       - PEE20 #empty
+       - lable: EPS10
+         sub:
+          - buckboost
+          - electiesh-en-machnetich-veld
+          - lab-1
+          - lab-2
+          - lab-3
+          - lab-4
+          - lab-5
+          - lab-6
 
-        #- REG10
-        - EMS20 #empyt
-        - PEE30 #empty
-        #- ANE10
+      # year 2
 
-        #- DIS10
-        #- EPS20
-        - PEE40 #empty
-        #- TEL10
+       - lable: REG10
+         url: REG10-2
+         sidebar:
+          - lable: Index
+            url: .
+          - lable: Laplace
+            url: laplace.html
+          - lable: Voorbeelden
+            url: voorbeelden.html
+          - lable: Eigenschappen
+            url: eigenschappen.html
+          - lable: P-Regelaar
+            url: pregelaar.html
+          - lable: polen en nulpunten
+            url: polen-en-nulpunten.html
+          - lable: Formuleblad
+            url: formuleblad.html
+          - lable: Lab 1
+            url: lab1.html
+          - lable: Lab 2
+            url: lab2.html
+          - lable: Lab 3
+            url: lab3.html
+       - EMS20 #empyt
+       - PEE30 #empty
+       #- ANE10
 
-        - lable: Fablab making
-          url: fablab-making.html
-    - lable: WIS20
-      sidebar:
-        - lable: Diffrencieren
-          url: diffrencieeren.html
-        - lable: Supsitutsie
-          url: supsitutsie.html
-        - lable: Breuksplitsen
-          url: breuksplitsen.html
-        - lable: Parsiele int.
-          url: parsiel.html
-        - lable: Fourier transform
-          url: fourier-transformatie.html
-        - lable: Divrenciaal vergeleiking
-          url: difrenciaal-vergeleiking.html
-        - lable: 2de Orde DV
-          url: 2de-orde-dv.html
-    - lable: WIS20-2
-      sidebar:
-        - lable: index
-          url: .
-        - lable: formuleblad
-          url: formuleblad.html
+       #- DIS10
+       #- EPS20
+       - PEE40 #empty
+       - lable: TEL10
+         sidebar:
+          - lable: index
+            url: .
+         # - lable: week 4.1
+         #   url: week-1.html
+          - lable: 4.2 theorie
+            url: week-2.html
+          - lable: 4.3 lab
+            url: week-3.html
+          - lable: 4.5 theorie
+            url: week-5.html
 
-    - lable: REG10
-      url: REG10-2
-      sidebar:
-        - lable: Index
-          url: .
-        - lable: Laplace
-          url: laplace.html
-        - lable: Voorbeelden
-          url: voorbeelden.html
-        - lable: Eigenschappen
-          url: eigenschappen.html
-        - lable: P-Regelaar
-          url: pregelaar.html
-        - lable: polen en nulpunten
-          url: polen-en-nulpunten.html
-        - lable: Formuleblad
-          url: formuleblad.html
-        - lable: Lab 1
-          url: lab1.html
-        - lable: Lab 2
-          url: lab2.html
-        - lable: Lab 3
-          url: lab3.html
-    - lable: ANE10
-      url: ANE10-2
-      sidebar:
-        - lable: Index
-          url: .
-        - lable: Bi Polar Junction Transistor
-          url: bjt.html
-        - lable: Field Effect Transistor
-          url: fet.html
-
-    - lable: DIS10
-      sidebar:
-        - lable: index
-          url: .
-        - lable: handigheidjes
-          url: handigheidjes.html
-        - lable: opgavens
-          url: opgaves.html
-        - lable: week 1
-          url: week-1.html
-        - lable: week 2
-          url: week-2.html
-        - lable: week 3
-          url: week-3.html
-        - lable: week 4
-          url: week-4.html
-        - lable: week 5
-          url: week-5.html
-    - lable: EPS20
-      sidebar:
-        - lable: index
-          url: .
-        - lable: week 1
-          url: week-1.html
-        - lable: lab 1
-          url: lab-1.html
-- lable: Toki Pona
-  url: tokipona
+       - lable: Fablab making
+         url: fablab-making.html
+ - lable: Toki Pona
+   url: tokipona
 
 # - lable: Projecten
 #   klickable: False

page.py

@@ -0,0 +1,211 @@
+import os
+import yaml
+
+from renderMD import renderMD
+
+class Page:
+    lable = ''
+    url = ''
+    clickable = True
+
+    subPages = []
+    sidebar = []
+    parrent = None
+    assets = None
+
+    def __init__(self, item, parrent):
+        self.subPages = []
+        self.sidebar = []
+        self.parrent = parrent
+
+        if (parrent is None):
+            root = ''
+        else:
+            root = parrent.url
+
+        if (type(item) is str):
+            self.lable = item
+            self.url = os.path.abspath(root + '/' + item)
+            self.clickable = True
+
+        elif (type(item) is dict):
+            if('url' not in item):
+                if(('klickable' in item) and (item['klickable'] is False)):
+                    self.url = root # still set the url for sub pages
+                else:
+                    self.url = root + '/' + item['lable']
+            else:
+                self.url = item['url']
+
+            if(self.url == ''):
+                self.url = '/'
+
+            if(self.url[0] != '/'):
+                self.url = root + '/' + self.url
+
+            self.url = os.path.abspath(self.url)
+
+            if('lable' not in item):
+                self.lable = item['url'].split('/')[-1]
+            else:
+                self.lable = item['lable']
+            self.lable = self.lable.replace('<', '&lt;')
+            self.lable = self.lable.replace('>', '&gt;')
+
+            if ('sub' in item):
+                for subItem in item['sub']:
+                    self.subPages.append(Page(subItem, self))
+
+            if ('sidebar' in item):
+                for subItem in item['sidebar']:
+                    self.sidebar.append(Page(subItem, self))
+            else:
+                self.sidebar = []
+
+            if ('klickable' in item):
+                self.clickable = item["klickable"]
+
+        else:
+            print('ERROR: Page.__init__(): invalid index itemtype ' + type(item))
+
+    def scan(self, srcDir):
+        if ((self.parrent is None) or (self.url != self.parrent.url)):
+            indexFile = os.path.abspath(srcDir + self.url + '/index.yaml')
+            print(f"INFO: Page.scan(): indexFile: {indexFile}")
+
+            index = None
+            if (os.path.isfile(indexFile)):
+                with open(indexFile, 'r') as file:
+                    index = yaml.safe_load(file)
+
+            if (index is not None):
+                if ('subPages' in index):
+                    print(f"INFO: Page.scan(): subpages found for {self.url}")
+                    for item in index["subPages"]:
+                        page = Page(item, self)
+                        self.subPages.append(page)
+                        page.scan(srcDir)
+
+                if ('sidebar' in index):
+                    print(f"INFO: Page.scan(): sidemenu found for {self.url}")
+                    for item in index["sidebar"]:
+                        page = Page(item, self)
+                        self.sidebar.append(page)
+                        page.scan(srcDir)
+
+                if ('assets' in index):
+                    print(f"INFO: Page.scan(): assets found for {self.url}")
+                    self.assets = index["assets"]
+                    i = 0
+                    while (i < len(self.assets)):
+                        if(self.assets[i][0] != '/'):
+                            self.assets[i] = self.url + '/' + self.assets[i]
+                        self.assets[i] = os.path.abspath(self.assets[i])
+                        i += 1
+
+
+
+    def getSidebar(self):
+        if ((len(self.sidebar) == 0) and (self.parrent is not None)):
+            return self.parrent.getSidebar()
+        else:
+            return self.sidebar
+
+    def __str__(self):
+        return self.toString(0)
+    def toString(self, indents):
+        indent = "   "*indents
+        str =  f"{indent} - lable: {self.lable}\n"
+        str += f"{indent}   url: {self.url}\n"
+        if (self.clickable):
+            str += f"{indent}   clickable: True\n"
+        else:
+            str += f"{indent}   clickable: False\n"
+        if (self.assets is not None):
+            str += f"{indent}   assets: {len(self.assets)}\n"
+            for asset in self.assets:
+                str += f"{indent}    - {asset}\n"
+        if (len(self.subPages) > 0):
+            str += f"{indent}   sub: {len(self.subPages)}\n"
+            for page in self.subPages:
+                str += page.toString(indents + 1)
+        if (len(self.sidebar) > 0):
+            str += f"{indent}   sidebar:\n"
+            for page in self.sidebar:
+                str += page.toString(indents + 1)
+        return str
+
+    def topMenuHTML(self):
+        if (len(self.subPages) == 0):
+            propertys = ''
+            if (self.clickable):
+                html = f"<span class='menuLable'><a href='{self.url}'>{self.lable}</a></span>"
+            else:
+                html = f"<span class='menuLable'>{self.lable}</span>"
+        else:
+            subicon = " <svg class='menuDropIcon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M1,3.7L5,8L9,3.7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' fill='none' stroke='#eee'></path></svg>"
+            propertys = " data-hassub='true'"
+            propertys += " class=\"sub\""
+            if (self.clickable):
+                html = f"<span class='menuLable'><a href='{self.url}'>{self.lable}</a>{subicon}</span><ul>"
+            else:
+                html = f"<span class='menuLable'>{self.lable}{subicon}</span><ul>"
+            for page in self.subPages:
+                html += page.topMenuHTML()
+            html += "</ul>"
+
+        return f"<li{propertys}>{html}</li>"
+
+    def sidebarHTML(self):
+        if (len(self.subPages) == 0):
+            propertys = ""
+            if (self.clickable):
+                html = f"<span class='menuLable'><a href='{self.url}'>{self.lable}</a></span>"
+            else:
+                html = f"<span class='menuLable'>{self.lable}</span>"
+        else:
+            propertys = " data-hassub='true'"
+            propertys += " class=\"sub\""
+            if (self.clickable):
+                html = f"<span class='menuLable'><a href='{self.url}'>{self.lable}</a></span><ul>"
+            else:
+                html = f"<span class='menuLable'>{self.lable}</span><ul>"
+            for page in self.subPages:
+                html += page.sidebarHTML()
+            html += "</ul>"
+
+        return f"<li{propertys}>{html}</li>"
+
+    def renderPage(self, template, header, srcDir):
+        html = ""
+
+        if (os.path.isdir(srcDir + self.url)):
+            if(self.url[-1] == '/'):
+                srcFile = self.url + 'index.md'
+            else:
+                srcFile = self.url + '/index.md'
+        elif (len(self.url.split('.')) > 1 and len(self.url.split('.')[-1]) < 5):
+            srcFile = '.'.join(self.url.split('.')[0:-1]) + '.md'
+        else:
+            srcFile = self.url + '.md'
+
+        if(not os.path.isfile(srcDir + srcFile)):
+            print(f"ERROR: faild to find srouce file for page {self.lable} ({self.url})")
+        else:
+            print('md: ' + srcFile)
+
+            if(len(self.getSidebar()) != 0):
+                sidebar = '<aside><nav><ul id="sidemenu">'
+                for item in self.getSidebar():
+                    sidebar += item.sidebarHTML()
+                sidebar += '</ul></nav></aside>'
+            else:
+                sidebar = ""
+
+            html = template.render(
+                header = header,
+                sidebar = sidebar,
+                body = renderMD(srcDir + srcFile)
+            )
+
+        return html

render.py

@@ -10,8 +10,8 @@ from renderSCSS import renderSCSS
 with open('template.html', 'r') as file:
   template = Template(file.read())
 
-srcDir = '../notes'
-destDir = '../public'
+srcDir = '/source'
+destDir = '/target'
 
 firstItem = True
 

renderMD.py

@@ -7,6 +7,8 @@ def renderLatex(code):
   code = code.strip()
   code = code.replace("=>", "\\Rightarrow")
   code = code.replace("->", "\\rightarrow")
+  code = code.replace("\\(", "\\left(")
+  code = code.replace("\\)", "\\right)")
   code = code.replace("*", "\\cdot")
 
   a = re.search(r"{[^{}]*} */ *{[^{}]*}", code)

requirements.txt

@@ -0,0 +1,5 @@
+pyyaml
+jinja2
+misaka
+latex2mathml
+libsass

style.scss

@@ -0,0 +1,215 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap');
+
+$main-color: #222;
+$second-color: #333;
+$oposit-color: #eee;
+$accent-color: #7d7;
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+
+  background-color: $main-color;
+  color: $oposit-color;
+  font-family: 'Roboto', sans-serif;
+}
+
+header {
+   position: fixed;
+   top: 0;
+   left: 0;
+   width: 100%;
+   text-align: right;
+   height: 50px;
+
+   background: linear-gradient(180deg, $main-color 0%, $main-color 80%, rgba(0,0,0,0) 100%);
+
+   #headerLogo{
+      padding-left: 50px;
+      height: 50px;
+   }
+
+   ul {
+      list-style: none;
+      padding: 0 50px 0 0;
+      margin: 0;
+      display: inline-block;
+      user-select: none;
+
+      font-family: 'Ubuntu', sans-serif;
+      font-size: 18px;
+
+      .menuSeparator,
+      .menuLable{
+         display: inline-block;
+      }
+      li.sub .menuLable{
+         padding: 15px 5px;
+
+         a {
+            display: inline-block;
+            padding: 0;
+         }
+      }
+
+      li {
+         display: inline-block;
+      }
+
+      li.open {
+         .menuLable {
+            background-color: $second-color;
+         }
+         ul {
+            display: block;
+            ul {
+               display: none;
+            }
+         }
+      }
+
+      ul{
+         display: none;
+         position: absolute;
+         text-align: center;
+         padding: 0;
+         // margin-left: 10px;
+         background-color: $second-color;
+         border-bottom-right-radius: 5px;
+         border-bottom-left-radius: 5px;
+
+         li {
+            display: block;
+         }
+      }
+   }
+
+   .menuDropIcon{
+      width: 15px;
+   }
+
+   a {
+      padding: 15px 5px;
+      color: $accent-color;
+      text-decoration: none;
+
+      &:hover{
+         color: $accent-color;
+         text-decoration: underline;
+      }
+   }
+
+   li a{
+      display: block;
+   }
+}
+
+aside{
+   height: 100vh;
+   position: fixed;
+   top: 0;
+   left: 0;
+
+   overflow-y: auto;
+
+   ul{
+      list-style: none;
+      padding: 50px 0 0 0;
+      margin: 0;
+      display: block;
+      user-select: none;
+
+      font-family: 'Ubuntu', sans-serif;
+      font-size: 18px;
+
+      .menuLable {
+         height: 50px;
+      }
+
+      ul {
+         padding: 0 0 0 25px;
+      }
+   }
+
+   a {
+      width: 150px;
+      display: block;
+      padding: 15px 5px;
+      color: $accent-color;
+      text-decoration: none;
+
+      &:hover{
+         color: $accent-color;
+         background-color: $second-color;
+         text-decoration: underline;
+      }
+
+   }
+}
+
+main {
+  padding: 0 calc(50vw - 250px) 50px;
+  max-width: 500px;
+
+  a {
+    color: $accent-color;
+    text-decoration: none;
+
+    &:hover{
+      text-decoration: underline;
+    }
+  }
+  a.btn {
+    padding: 5px;
+    border: 1px $accent-color solid;
+    border-radius: 5px;
+
+    &:hover{
+      color: $main-color;
+      background-color: $accent-color;
+      text-decoration: none;
+    }
+  }
+
+  img, video {
+    width: 100%;
+  }
+}
+
+#bigPicture {
+  display: none;
+  position: fixed;
+  top: 50vh;
+  width: 100vw;
+  transform: translateY(-50%);
+  &.show{
+    display: block;
+  }
+  &.tall{
+    width: auto;
+    height: 100vh;
+    left: 50vw;
+    transform: translateY(-50%) translateX(-50%);
+  }
+}
+
+@media only screen and (max-width: 850px){
+  main {
+    padding-left: 175px;
+  }
+}
+
+@media only screen and (max-width: 555px){
+  main {
+    width: auto;
+    padding: 0 28px 50px;
+  }
+}
+
+h1, h2, h3, h4, h5, h6{
+  font-family: 'Ubuntu', sans-serif;
+}
+h1 { padding-top: 50px; font-size: 40px; }
+h2 { padding-top: 40px; font-size: 30px; }
+h3 { padding-top: 10px; font-size: 20px; }

template.html

@@ -4,15 +4,21 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="/styles/main.css">
-  <title>Notes</title>
+  <link rel="stylesheet" href="/style.css">
+  <title>Kladjes</title>
 </head>
 <body>
-  {{ header }}
-  {{ sidebar }}
-  <main>
-    {{ body }}
-  </main>
-  <script src="/scripts/app.js"></script>
+   <header>
+      <nav>
+         <ul class="menu">
+            {{ header }}
+         </ul>
+      </nav>
+   </header>
+   {{ sidebar }}
+   <main>
+      {{ body }}
+   </main>
+   <script src="/scripts/app.js"></script>
 </body>
-</html>
+</html>