use elm-pages-native links

this adds the `prefetch` attribute. This should provide a better user experience
joshuanianji · Jan 27, 2024 · d733dba · d733dba
1 parent 7603a62
commit d733dba
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/app/Route/Index.elm b/app/Route/Index.elm
@@ -75,7 +75,9 @@ init app shared =
     let
         icoConfig =
             { size = 500
-            , degs = 90
+
+            -- a nice prime number
+            , degs = 23
             , color = Colours.gray
             }
     in
@@ -356,21 +358,21 @@ about =
             , property "gap" "2em"
             ]
         ]
-        [ Util.linkedHeader "About" "about"
+        [ Util.linkedHeader "about" "About"
         , textBlock [] [ Html.text "I started off with HTML, CSS and Javascript: making blogs, web apps, or anything that seemed cool to me." ]
         , textBlock []
             [ Html.text "Currently, I use "
-            , Util.textLink "Elm" "https://elm-lang.org/"
+            , Util.textLink "https://elm-lang.org/" "Elm"
             , Html.text " and Typescript for most of my projects, and I'm learning Haskell, Purescript and Rust on my free time."
             ]
         , textBlock []
             [ Html.text "I've recently been taking a deep dive into DevOps. I've recently interned at "
-            , Util.textLink "Nanostics" "https://www.nanosticsdx.com/"
+            , Util.textLink "https://www.nanosticsdx.com/" "Nanostics"
             , Html.text " where I worked on deploying and maintaining a ML model on Azure, as well as creating a webapp interface for it."
             ]
         , textBlock []
             [ Html.text "In my free time, I like to play volleyball and walk my dog. I always try to find time to read, check me out on "
-            , Util.textLink "Hardcover" "https://hardcover.app/@OshuaJay"
+            , Util.textLink "https://hardcover.app/@OshuaJay" "Hardcover"
             , Html.text "!"
             ]
         ]
@@ -388,7 +390,7 @@ projects data_ =
             , property "gap" "2em"
             ]
         ]
-        [ Util.linkedHeader "Projects" "projects"
+        [ Util.linkedHeader "projects" "Projects"
         , Html.h2 [] [ Html.text "⭐ Featured" ]
         , featuredProjects data_.pinnedProjects
         , Html.div
@@ -398,7 +400,7 @@ projects data_ =
                 , fontSize (em 1.25)
                 ]
             ]
-            [ Util.textLink "See more projects" "/all-projects"
+            [ Util.textRouteLink Route.AllProjects "See more projects"
             , Icon.view [] { icon = FeatherIcons.chevronRight, strokeWidth = 2, size = 20, msg = Nothing }
             ]
 
@@ -443,7 +445,7 @@ blog =
             , property "gap" "2em"
             ]
         ]
-        [ Util.linkedHeader "Blog" "blog"
+        [ Util.linkedHeader "blog" "Blog"
         , Html.h2 [] [ Html.text "Work in progress..." ]
 
         -- , Html.h2 [] [ Html.text "📅 Recent Posts" ]
@@ -472,7 +474,7 @@ footer =
         , Html.p
             []
             [ Html.text "Fun fact: This is the 6th iteration of my website! "
-            , Util.textLink "See other iterations" "/time-machine"
+            , Util.textRouteLink Route.TimeMachine "See other iterations"
             , Html.text "."
             ]
         ]
diff --git a/app/Shared.elm b/app/Shared.elm
@@ -152,12 +152,13 @@ navbar model =
                 [ Html.Styled.Attributes.href "/" ]
                 [ Icosahedron.view model.ico
                     |> Html.Styled.map IcoMsg
+                    |> Util.htmlRouteLink Route.Index
                 ]
             ]
         , Html.Styled.li
             [ css [ marginLeft auto ] ]
-            [ Util.textLink "Home" "/" ]
+            [ Util.textRouteLink Route.Index "Home" ]
         , Html.Styled.li
             []
-            [ Util.textLink "Projects" "/all-projects" ]
+            [ Util.textRouteLink Route.AllProjects "Projects" ]
         ]
diff --git a/src/Util.elm b/src/Util.elm
@@ -1,12 +1,13 @@
 module Util exposing (..)
 
+import Color.Manipulate
+import Colours
 import Css exposing (..)
-import Html.Styled as Html exposing (Html, Attribute)
-import Color.Manipulate 
-import Colours 
-import FeatherIcons 
-import Icon 
+import FeatherIcons
+import Html.Styled as Html exposing (Attribute, Html)
 import Html.Styled.Attributes exposing (css)
+import Icon
+import Route exposing (Route)
 
 
 type FlexDirection
@@ -29,19 +30,36 @@ flexDirection direction =
                 , Css.flexDirection Css.column
                 ]
 
+
+
 -- Links
 
 
+textRouteLink : Route -> String -> Html msg
+textRouteLink route text =
+    htmlRouteLink route (Html.text text)
+
+
+htmlRouteLink : Route -> Html msg -> Html msg
+htmlRouteLink route html =
+    Route.toLink
+        (\attrs ->
+            underlinedLink Html.a
+                (List.map Html.Styled.Attributes.fromUnstyled attrs)
+                [ html ]
+        )
+        route
+
 
 textLink : String -> String -> Html msg
-textLink text url =
+textLink url text =
     underlinedLink Html.a
         [ Html.Styled.Attributes.href url ]
         [ Html.text text ]
 
 
 linkedHeader : String -> String -> Html msg
-linkedHeader text fragment =
+linkedHeader fragment text =
     Html.div
         [ css
             [ fontSize (em 1.5)