Aaron's Elm-Pages Demo (👈 click me)

elm-pages Compelling Features

• Elm type safety plus even more!
• Missing Env variables as compiler warning
• Build time API data as compiler warning
• SEO as compiler warning

Goals and Results

I had elm & Netlify experience, but not elm-pages or elm-ui.

• Took ~16 hours to convert the demo app to a the current content.
• Is elm-pages a suitable option for personal small projects?

  • Yes

• Is elm-pages a suitable replacement for Jekyll?

  • Yes

  • Learning elm-pages was way easier than Jekyll
• Cloudinary for hosting static images
• elm-ui was a great experience
• StaticData was also great (load API data on deploy vs. live)

Dev Experience

• npm start == elm-pages develop
• npm run build == elm-pages-beta # AKA prod artifact, this is the new part
• npm run serve - host static files from ☝️ without watch

Development Example for others trying out `elm-pages`

How

I cloned DKs repo and checked out his Template Modules branch

Getting Started Example

Started a new page test.md and followed the compiler

• frontmatter error on published: "2020-12-30" needed quotes around date
• author needed, add

  • Problem with the value at json.author: "Aaron Votre"

• author image doesn't exist

  • , avatar = Pages.images.author.aaron (does not have aaron field)

  • Slightly harder to find because that file is generated from the image/X directory
• built, but my page stinks
• Wondering how to add custom things inline
  • example - inject a bit of elm defined UI into my markdown
  • discovered in MarkdownRenderer.elm you can add custom tags and then it basically gets built like react with uppercase tags
  • <BOX> example and this article on the elm markdown rendered

Steps I took

• ✅ Browser title (1hr, several revisions)
• ✅ Remove extra blog posts (tiny)
• ✅ Create landing page (med)
• ✅ Update header links (small)
• ✅ Code syntax highlighting (3hr, include elm lib for it, tried embedded JS…failed)
• ✅ Missing monokai styling in deployed version
• ✅ Favicon (2hr, cloudinary + understanding beta build)
• ✅ Spotify Page
  • ✅ Load Data (~3hr)
  • ✅ Style Data (2hr, learned elm-ui)
  • ✅ Write content (big)
    • ✅ First Draft
    • ✅ 2nd Version
    • ✅ Get Feedback
    • ✅ Final Edit
• ✅ release on github

Resources

• Beta Changes
• dillonkearns/elm-pages#151
• Remove Bundling from build
• Documentation site: https://elm-pages.com
• Elm Package docs
• elm-pages blog