Optimize about page loading (#1464)

Use webpack markdown-loader to compile the about page contents from the README.md file.

Remove separate Privacy page, and instead link to file in GitHub repository.

Author: ethanliu24

.gitignore

@@ -49,6 +49,7 @@ cabal.sandbox.config
 /public/js/generate/app.js
 /public/js/graph/app.js
 /public/js/draw/app.js
+/public/js/about/app.js
 /public/*.svg
 /public/*.png
 /public/*.ttf

.yarn/cache/camel-case-npm-4.1.2-082bf67a9a-bcbd25cd25.zip

@@ -28,6 +28,8 @@
 - Refactored the HTTPS response generation from `App/Database/CourseQueries` to the controller `App/Controllers/`
 - Moved config values from .hs file to .yaml file
 - Changed representation from translation to matrix in `App/Svg/Parser`
+- Optimized about page using Webpack and new dependencies `html-loader` and `markdown-loader`
+- Removed `privacy` route and codes related to it
 
 ## [0.6.0] - 2024-06-24
 

.yarn/cache/clean-css-npm-5.3.3-d2bb553a94-941987c148.zip

@@ -125,6 +125,6 @@ Zi Kai Xu
 
 ## Privacy Policy and Licensing
 
-Click [here](/PRIVACY.md) to learn about our Privacy Policy.
+Click [here](https://github.com/Courseography/courseography/blob/master/PRIVACY.md) to learn about our Privacy Policy.
 
-Click [here](/LICENSE) to learn about our licensing.
+Click [here](https://github.com/Courseography/courseography/blob/master/LICENSE) to learn about our licensing.

.yarn/cache/dot-case-npm-3.0.4-09675b5521-a65e351941.zip

@@ -10,7 +10,6 @@ module Config (
     serverConf,
     databasePath,
     runDb,
-    markdownPath,
     graphPath,
     genCssPath,
     timetableUrl,
@@ -46,7 +45,6 @@ data Config = Config
     { portValue             :: Int
     , logMessage            :: String
     , databasePathValue     :: Text
-    , markdownPathValue     :: String
     , graphPathValue        :: String
     , genCssPathValue       :: String
     , timetableUrlValue     :: String
@@ -66,7 +64,6 @@ instance FromJSON Config where
         <$> obj .: "port"
         <*> obj .: "logMessage"
         <*> obj .: "databasePath"
-        <*> obj .: "markdownPath"
         <*> obj .: "graphPath"
         <*> obj .: "genCssPath"
         <*> obj .: "timetableUrl"
@@ -124,10 +121,6 @@ runDb action = do
 
 -- FILE PATH STRINGS
 
--- | The relative path to the directory with the markdown files rendered for site content.
-markdownPath :: IO String
-markdownPath = markdownPathValue <$> loadConfig
-
 -- | The relative path to the directory that contains all of the graph SVG files.
 graphPath :: IO String
 graphPath = graphPathValue <$> loadConfig

.yarn/cache/html-loader-npm-5.1.0-9903251782-d2557af690.zip

@@ -6,5 +6,4 @@ import Response.Image as X
 import Response.Loading as X
 import Response.NotFound as X
 import Response.Post as X
-import Response.Privacy as X
 import Response.Search as X

.yarn/cache/html-minifier-terser-npm-7.2.0-b9eba92a3b-39feed354b.zip

@@ -1,26 +1,20 @@
 module Response.About
     (aboutResponse) where
 
-import Data.Text.Lazy (Text)
 import Happstack.Server
 import MasterTemplate
 import Text.Blaze ((!))
 import qualified Text.Blaze.Html5 as H
 import qualified Text.Blaze.Html5.Attributes as A
-import Util.Blaze (mdToHTML)
+import Scripts (aboutScripts)
 
-aboutResponse :: Text -> ServerPart Response
-aboutResponse aboutContents =
+aboutResponse :: ServerPart Response
+aboutResponse =
    ok $ toResponse $
     masterTemplate "Courseography - About"
                 []
                 (do
                     header "about"
-                    aboutHtml aboutContents
+                    H.div ! A.id "aboutDiv" $ ""
                 )
-                ""
-
--- | AboutHtml takes in the contents of the README.md file (the GitHub README file) and translates
--- the markdown to blaze-HTML.
-aboutHtml :: Text -> H.Html
-aboutHtml contents = H.div ! A.id "aboutDiv" $ mdToHTML contents
+                aboutScripts

.yarn/cache/lower-case-npm-2.0.2-151055f1c2-83a0a5f159.zip

@@ -7,7 +7,6 @@ import Controllers.Graph as GraphsController
     ( graphResponse, index, getGraphJSON, graphImageResponse )
 import Controllers.Generate as GenerateController (generateResponse, findAndSavePrereqsResponse)
 import Controllers.Timetable as TimetableController
-import Data.Text.Lazy (Text)
 import Database.CourseInsertion (saveGraphJSON)
 import Database.CourseQueries (retrievePost)
 import Happstack.Server
@@ -24,21 +23,20 @@ import Happstack.Server
 import Response
     ( drawResponse,
       aboutResponse,
-      privacyResponse,
       notFoundResponse,
       searchResponse,
       postResponse,
       loadingResponse)
 
-routeResponses :: String -> Text -> Text -> ServerPartT IO Response
-routeResponses staticDir aboutContents privacyContents =
-    msum (map strictMatchDir (strictRoutes aboutContents privacyContents) ++
+routeResponses :: String -> ServerPartT IO Response
+routeResponses staticDir =
+    msum (map strictMatchDir strictRoutes ++
          [dir "static" $ serveDirectory DisableBrowsing [] staticDir,
           nullDir >> seeOther ("graph" :: String) (toResponse ("Redirecting to /graph" :: String)),
           notFoundResponse])
 
-strictRoutes :: Text -> Text -> [ (String, ServerPart Response)] 
-strictRoutes aboutContents privacyContents = [
+strictRoutes :: [(String, ServerPart Response)] 
+strictRoutes = [
     ("grid", TimetableController.gridResponse),
     ("graph", GraphsController.graphResponse),
     ("graph-generate", GenerateController.findAndSavePrereqsResponse),
@@ -48,8 +46,7 @@ strictRoutes aboutContents privacyContents = [
     ("post", retrievePost),
     ("post-progress", postResponse),
     ("draw", drawResponse),
-    ("about", aboutResponse aboutContents),
-    ("privacy", privacyResponse privacyContents),
+    ("about", aboutResponse),
     ("graphs", GraphsController.index),
     ("timesearch", searchResponse),
     ("generate", generateResponse),

.yarn/cache/markdown-loader-npm-8.0.0-8cc869e04f-c5f878a24a.zip

@@ -1,5 +1,5 @@
 module Scripts (
-    graphScripts, timetableScripts, drawScripts, postScripts, searchScripts, generateScripts
+    graphScripts, timetableScripts, drawScripts, postScripts, searchScripts, generateScripts, aboutScripts,
     )
     where
 
@@ -35,3 +35,7 @@ searchScripts = do
 generateScripts :: H.Html
 generateScripts = do
     H.script ! A.src "/static/js/generate/app.js" $ ""
+
+aboutScripts :: H.Html
+aboutScripts = do 
+    H.script ! A.src "/static/js/about/app.js" $ ""

.yarn/cache/marked-npm-4.3.0-e7ef9e874f-0db6817893.zip

@@ -9,10 +9,9 @@ responses.
 module Server
     (runServer) where
 
-import Config (markdownPath, serverConf)
+import Config (serverConf)
 import Control.Concurrent (forkIO, killThread)
 import Data.String (fromString)
-import qualified Data.Text.Lazy.IO as LazyIO
 import Filesystem.Path.CurrentOS as Path
 import Happstack.Server hiding (host)
 import Routes (routeResponses)
@@ -25,15 +24,12 @@ runServer :: IO ()
 runServer = do
     configureLogger
     staticDir <- getStaticDir
-    markdown <- markdownPath
-    aboutContents <- LazyIO.readFile $ markdown ++ "README.md"
-    privacyContents <- LazyIO.readFile $ markdown ++ "PRIVACY.md"
 
     -- Start the HTTP server
     server <- serverConf
     httpThreadId <- forkIO $ simpleHTTP server $ do
       decodeBody (defaultBodyPolicy "/tmp/" 4096 4096 4096)
-      routeResponses staticDir aboutContents privacyContents
+      routeResponses staticDir
     waitForTermination
     killThread httpThreadId
     where

.yarn/cache/no-case-npm-3.0.4-12884c3d98-0b2ebc113d.zip

@@ -6,7 +6,6 @@ logMessage: "Happstack.Server.AccessLog.Combined"
 databasePath: "db/database.sqlite3"
 
 # File Path Strings
-markdownPath: "./"
 graphPath: "./graphs/"
 genCssPath: "./public/style/"
 

.yarn/cache/param-case-npm-3.0.4-cfb242ad97-b34227fd0f.zip

@@ -94,7 +94,6 @@ executable courseography
     Response.Loading,
     Response.NotFound,
     Response.Post,
-    Response.Privacy,
     Response.Search,
     Routes,
     Scripts,

.yarn/cache/parse5-npm-7.2.1-c48f333f28-11253cf8aa.zip

@@ -0,0 +1,6 @@
+import aboutContent from "../../../README.md"
+
+document.addEventListener("DOMContentLoaded", () => {
+  const container = document.getElementById("aboutDiv")
+  container.innerHTML = aboutContent
+})

.yarn/cache/pascal-case-npm-3.1.2-35f5b9bff6-ba98bfd595.zip

@@ -53,9 +53,11 @@
     "eslint-plugin-prettier": "5",
     "eslint-plugin-react": "^7.34.1",
     "fetch-mock": "^9.11.0",
+    "html-loader": "^5.1.0",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "markdown-loader": "^8.0.0",
     "mini-css-extract-plugin": "^2.7.6",
     "node-fetch": "^3.3.2",
     "postcss": "^8.4.38",

.yarn/cache/relateurl-npm-0.2.7-7687cc0a2a-5891e792ea.zip

@@ -1943,19 +1943,6 @@ div[id*="_inq"] .code::after {
   color: #437699;
 }
 
-#privacyDiv {
-  margin: 0 auto;
-  max-width: 1000px;
-  padding: 0 1em;
-  text-align: justify;
-}
-
-#privacyDiv > h1,
-#privacyDiv > h2,
-#privacyDiv > h3 {
-  color: #437699;
-}
-
 #contentDiv {
   margin: 0 25px;
 }

.yarn/cache/terser-npm-5.36.0-e5678e2258-489afd3190.zip

@@ -18,6 +18,7 @@ module.exports = {
     "js/post/app": "./js/components/post/post.js.jsx",
     "js/draw/app": "./js/components/draw/main.js",
     "js/generate/app": "./js/components/generate/generate.jsx",
+    "js/about/app": "./js/components/about/about.js",
     "style/app": "./style/app.js",
   },
   output: {
@@ -51,6 +52,10 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
       },
+      {
+        test: /\.md$/,
+        use: [{ loader: "html-loader" }, { loader: "markdown-loader" }],
+      },
     ],
   },
   plugins: [