add frontend

.gitignore

@@ -1,6 +1,7 @@
 **/.direnv
 **/result
 **/result-*
+**/.gup
 
 .stack-work
 

.gitlab-ci.yml

@@ -16,7 +16,7 @@ cache:
 pages:
   stage: deploy
   script: &build-script
-    - nix develop -c stack run site -- build
+    - nix develop -c gup public
   artifacts:
     paths:
       - public

flake.nix

@@ -69,6 +69,8 @@
                     "
                 '';
               })
+              yarn
+              gup
             ];
             shellHook = ''
               ${config.pre-commit.installationScript}
@@ -81,9 +83,6 @@
               fourmolu.enable = true;
             };
           };
-
-          packages = {
-          };
         };
       };
     });

fourmolu.yaml

@@ -1 +1,3 @@
 indentation: 2
+
+indent-wheres: true

frontend/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

frontend/dist.gup

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+
+gup --always
+rm -rf dist
+yarn run build

frontend/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "my-webpack-project",
+  "version": "1.0.0",
+  "main": "index.js",
+  "private": true,
+  "dependencies": {},
+  "scripts": {
+    "build": "webpack"
+  },
+  "devDependencies": {
+    "@webpack-cli/generators": "^3.0.4",
+    "autoprefixer": "^10.4.14",
+    "css-loader": "^6.7.3",
+    "js-yaml": "^4.1.0",
+    "mini-css-extract-plugin": "^2.7.5",
+    "postcss": "^8.4.23",
+    "postcss-loader": "^7.3.0",
+    "prettier": "^2.8.8",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.2.2",
+    "style-loader": "^3.3.2",
+    "webpack": "^5.82.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-manifest-plugin": "^5.0.0",
+    "webpack-remove-empty-scripts": "^1.0.3"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  // Add you postcss configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};

frontend/src/index.js

@@ -0,0 +1 @@
+import './main.sass';

frontend/src/main.sass

@@ -0,0 +1,2 @@
+.red
+  color: red

frontend/webpack.config.js

@@ -0,0 +1,70 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+const path = require("path");
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+const yaml = require('js-yaml');
+
+const stylesHandler = MiniCssExtractPlugin.loader;
+
+const webpackVersion = require('webpack/package.json').version.split('.').slice(0, 2).join('.');
+
+const config = {
+  mode: 'production',
+  devtool: 'source-map',
+  entry: {
+    main: [ path.resolve(__dirname, "src", "index.js")
+	  ]
+  },
+  output: {
+    chunkFilename: '[chunkhash].js',
+    filename: '[chunkhash].js',
+    path: path.resolve(__dirname, 'dist', `wp-${webpackVersion}`),
+    publicPath: `/wp-${webpackVersion}/`,
+    hashFunction: 'shake256',
+    hashDigestLength: 36
+  },
+  plugins: [
+    new WebpackManifestPlugin({
+      fileName: path.resolve(__dirname, 'dist', '.manifest.yaml'),
+      publicPath: `/wp-${webpackVersion}/`,
+      generate: (seed, files, entrypoints) => Object.keys(entrypoints).reduce((acc, fs) => ({...acc, [fs]: files.filter(file => entrypoints[fs].filter(basename => !(/\.map$/.test(basename))).some(basename => file.path.endsWith(basename))).filter(file => file.isInitial).map(file => file.path)}), {}),
+      serialize: yaml.dump
+    }),
+
+    new MiniCssExtractPlugin({
+      filename: '[chunkhash].css',
+      chunkFilename: '[chunkhash].css',
+    }),
+
+    new RemoveEmptyScriptsPlugin({
+      extensions: /\.(js|css|scss|sass|less|styl)([?].*)?$/
+    }),
+
+    // Add your plugins here
+    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
+      },
+      {
+        test: /\.css$/i,
+        use: [stylesHandler, "css-loader", "postcss-loader"],
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+        type: "asset",
+      },
+
+      // Add your rules for custom modules here
+      // Learn more about loaders from https://webpack.js.org/loaders/
+    ],
+  },
+};
+
+module.exports = config;

package.yaml

@@ -5,6 +5,10 @@ default-extensions:
   - OverloadedStrings
   - NoImplicitPrelude
   - ViewPatterns
+  - DerivingStrategies
+  - DeriveGeneric
+  - GeneralizedNewtypeDeriving
+  - TypeApplications
 
 executables:
   site:
@@ -26,3 +30,6 @@ executables:
       - base
       - hakyll
       - filepath
+      - yaml
+      - containers
+      - Glob

public.gup

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+
+gup --always
+gup -u frontend/dist
+
+stack run site -- rebuild

src/Main.hs

@@ -7,6 +7,14 @@ import Hakyll
 import qualified Data.List as List
 import Data.Maybe
 import System.FilePath
+import qualified System.FilePath.Glob as Glob
+
+import qualified Data.Yaml as Yaml
+
+import Data.Map (Map)
+import qualified Data.Map as Map
+
+import Control.Monad
 
 config :: Configuration
 config =
@@ -25,11 +33,36 @@ main = hakyllWith config $ do
     route idRoute
     compile copyFileCompiler
 
+  frontendManifest <-
+    preprocess $
+      Yaml.decodeFileThrow @_ @(Map String [FilePath]) "frontend/dist/.manifest.yaml"
+
   match "content/index.html" $ do
     route $ stripPathPrefix "content"
 
+    let context =
+          defaultContext
+            <> cssContext
+
+        cssContext = listField "css" innerContext genCSSItems
+          where
+            innerContext = urlField "url"
+            genCSSItems = genManifestItems $ Glob.compile "**/*.css"
+
+        genManifestItems :: Glob.Pattern -> Compiler [Item CopyFile]
+        genManifestItems p = do
+          let entryPoint = "main"
+              resources = filter (Glob.match p) $ frontendManifest Map.! entryPoint
+          forM resources $ load . fromFilePath . ("frontend/dist" </>) . dropDrive
+
     compile $ do
       getResourceBody
-        >>= loadAndApplyTemplate "templates/site-layout.html" defaultContext
+        >>= loadAndApplyTemplate "templates/site-layout.html" context
+        >>= relativizeUrls
+
+  match "frontend/dist/wp-*/**" $ do
+    route $ stripPathPrefix "frontend/dist"
+
+    compile copyFileCompiler
 
   match "templates/*" $ compile templateBodyCompiler

templates/site-layout.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    $for(css)$
+      <link rel="stylesheet" href="$url$">
+    $endfor$
   </head>
 
   <body>