replace sockets with api

src/app.py

@@ -10,21 +10,21 @@ pages = {
         "template": "home.html",
         "title": "Andrew Simonson - Portfolio Home",
         "description": "Andrew Simonson's Digital Portfolio home",
-        "canonical": "",
+        "canonical": "/",
     },
     "projects": {
         "template": "projects.html",
         "projects": proj,
         "title": "Andrew Simonson - Projects",
         "description": "Recent projects by Andrew Simonson on his lovely portfolio website :)",
-        "canonical": "projects",
+        "canonical": "/projects",
     },
     "about": {
         "template": "about.html",
         "timeline": timeline,
         "title": "Andrew Simonson - About Me",
         "description": "About Andrew Simonson",
-        "canonical": "about",
+        "canonical": "/about",
     },
 }
 
@@ -33,13 +33,10 @@ Minify(app=app, html=True, js=True, cssless=True)
 socketio = SocketIO(app)
 
 
-@socketio.on("goto")
+@app.route('/api/goto/<location>')
 def goto(location):
-    sid = flask.request.sid
     pagevars = pages[location]
-    output = [location, flask.render_template(pagevars["template"], var=pagevars), pagevars['title']]
-    socketio.emit("goto", output, to=sid)
-
+    return [pagevars, flask.render_template(pagevars["template"], var=pagevars)]
 
 @app.route("/")
 def home():

src/static/js/responsive.js

@@ -88,25 +88,22 @@ function toggleMenu() {
   }
 }
 
-let socket = io();
+const loc = "https://asimonson.com"
 
-function emit(event) {
-   socket.emit(event);
-}
-
-function emitData(event, data) {
-   socket.emit(event, data)
-}
-
-socket.on('goto', (page) => {
-  pagename = page[0];
-  content = page[1];
-  let root = document.getElementById('root');
+async function goto(location) {
+  let a = await fetch(loc + "/api/goto/" + location, {
+    credentials: "include",
+    method: "GET",
+    mode: "cors",
+  });
+  const response = await a.json();
+  const metadata = response[0];
+  const content = response[1];
+  let root = document.getElementById("root");
   root.innerHTML = content;
-  root.querySelectorAll("script").forEach(x => {
+  root.querySelectorAll("script").forEach((x) => {
     eval(x.innerHTML);
   });
-  document.querySelector('title').textContent = page[2];
-  if (pagename == 'home') pagename = '/';
-  history.pushState(null, null, pagename);
-});
+  document.querySelector("title").textContent = metadata['title'];
+  history.pushState(null, null, metadata['canonical']);
+}

src/templates/header.html

@@ -52,9 +52,8 @@
       href="{{ url_for('static', filename='css/head.css') }}"
     />
 
-    <link rel="canonical" href="https://asimonson.com/{{ var['canonical'] }}" />
+    <link rel="canonical" href="https://asimonson.com{{ var['canonical'] }}" />
     <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js" integrity="sha512-eVL5Lb9al9FzgR63gDs1MxcDS2wFu3loYAgjIH0+Hg38tCS8Ag62dwKyH+wzDb+QauDpEZjXbMn11blw8cbTJQ==" crossorigin="anonymous"></script>
     <script src="{{ url_for('static', filename='js/idler.js') }}"></script>
     <script src="{{ url_for('static', filename='js/checkbox.js') }}"></script>
     <script src="{{ url_for('static', filename='js/responsive.js') }}"></script>
@@ -67,7 +66,7 @@
     <div class="App">
       <div class="header">
 
-          <div id="name-container" onclick="emitData('goto', 'home')">
+          <div id="name-container" onclick="goto('home')">
             <div class="glitch">
               {% for i in range(9) %}
               <div class="line name">
@@ -86,17 +85,17 @@
         <div class="navControl">
           <div class="navBar">
             <div class="navElement">
-              <p onclick="emitData('goto', 'home')">Home</p>
+              <p onclick="goto('home')">Home</p>
             </div>
             <div class="navElement">
               <a href="Resume.pdf" target="_blank"> Resume </a>
             </div>
             <div class="navElement">
-              <p onclick="emitData('goto', 'projects')">Projects</p>
+              <p onclick="goto('projects')">Projects</p>
             </div>
             <!-- <a href="/activities">Activities</a> -->
             <div class="navElement">
-              <p onclick="emitData('goto', 'about')">About Me</p>
+              <p onclick="goto('about')">About Me</p>
             </div>
           </div>
         </div>