@pushword/js-helper 0.0.51 → 0.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pushword/js-helper",
-    "version": "0.0.51",
+    "version": "0.0.55",
     "description": "Pushword front end helpers. ",
     "author": "Robin@PiedWeb <contact@piedweb.com>",
     "license": "MIT",
@@ -13,6 +13,7 @@
         "@tailwindcss/aspect-ratio": "^0.2",
         "@tailwindcss/forms": "^0.4",
         "@tailwindcss/typography": "^0.5",
+        "tailwindcss-multi-column": "^1.0.2",
         "ace-builds": "^1.4.12",
         "autoprefixer": "^10.1.0",
         "babel-preset-stage-2": "^6.24.1",

package/src/encore.js

@@ -0,0 +1,92 @@
+const WatchExternalFilesPlugin = require("webpack-watch-files-plugin").default;
+const Encore = require("@symfony/webpack-encore");
+const tailwindcss = require("tailwindcss");
+
+function getFilesToWatch() {
+    return [
+        "./../vendor/pushword/core/src/templates/**/*.html.twig",
+        "./../vendor/pushword/core/src/templates/*.html.twig",
+        "./../vendor/pushword/conversation/src/templates/*.html.twig",
+        "./../vendor/pushword/admin-block-editor/src/templates/page/*.html.twig",
+        "./../templates/*.html.twig",
+        "./../templates/**/*.html.twig",
+        "./../templates/**/**/*.html.twig",
+    ];
+}
+function getTailwindConfig(watchFiles = null) {
+    if (watchFiles === null) watchFiles = getFilesToWatch();
+    var tailwindConfig = require("@pushword/js-helper/src/tailwind.config.js");
+    tailwindConfig.content = watchFiles;
+    return tailwindConfig;
+}
+
+module.exports = {
+    getFilesToWatch: getFilesToWatch,
+    getTailwindConfig: getTailwindConfig,
+    getEncore: function (
+        watchFiles = null,
+        tailwindConfig = null,
+        outputPath = "./../public/assets/",
+        publicPath = "/assets",
+        manifestKeyPrefix = null,
+        filesToCopy = [
+            {
+                from: "./media/", // todo explain
+                to: "[name].[ext]",
+                pattern: /svg$/,
+            },
+            {
+                from: "./img/",
+                to: "[name].[ext]",
+                pattern: /header.jpg$/,
+            },
+            {
+                from: "./favicons",
+                to: "[name].[ext]",
+            },
+        ],
+        entries = [{ name: "app", file: "./app.js" }],
+        styleEntries = [{ name: "style", file: "./app.css" }]
+    ) {
+        if (watchFiles === null) {
+            watchFiles = getFilesToWatch();
+        }
+
+        if (tailwindConfig === null) {
+            tailwindConfig = getTailwindConfig(watchFiles);
+        }
+
+        Encore.setOutputPath(outputPath)
+            .setPublicPath(publicPath)
+            .cleanupOutputBeforeBuild()
+            .enableSassLoader()
+            .enableSourceMaps(false)
+            .enableVersioning(false)
+            .addPlugin(
+                new WatchExternalFilesPlugin({
+                    files: watchFiles,
+                })
+            )
+            .enablePostCssLoader((options) => {
+                options.postcssOptions = {
+                    plugins: [require("postcss-import"), tailwindcss(tailwindConfig), require("autoprefixer")],
+                };
+            })
+            .disableSingleRuntimeChunk();
+        filesToCopy.forEach(function (toCopy) {
+            Encore.copyFiles(toCopy);
+        });
+
+        if (manifestKeyPrefix !== null) Encore.setManifestKeyPrefix(manifestKeyPrefix);
+
+        entries.forEach(function (entry) {
+            Encore.addEntry(entry.name, entry.file);
+        });
+
+        styleEntries.forEach(function (entry) {
+            Encore.addStyleEntry(entry.name, entry.file);
+        });
+
+        return Encore;
+    },
+};

package/src/tailwind.config.js

@@ -0,0 +1,35 @@
+const plugin = require("tailwindcss/plugin");
+const pushwordHelper = require("@pushword/js-helper/src/tailwind.helpers.js");
+
+module.exports = {
+    mode: "jit",
+    theme: {
+        minHeight: {
+            0: "0",
+            "screen-1/4": "25vh",
+            "screen-3/4": "75vh",
+            "screen-1/3": "33vh",
+            "screen-2/3": "66vh",
+            "screen-1/2": "50vh",
+            screen: "100vh",
+            full: "100%",
+        },
+        extend: {
+            typography: pushwordHelper.extendTailwindTypography(),
+            colors: {
+                primary: "var(--primary)",
+                secondary: "var(--secondary)",
+            },
+        },
+    },
+    variants: {},
+    plugins: [
+        require("tailwindcss-multi-column")(),
+        require("@tailwindcss/typography"),
+        require("@tailwindcss/aspect-ratio"),
+        require("@tailwindcss/forms"),
+        plugin(pushwordHelper.twFirstLetterPlugin),
+        plugin(pushwordHelper.twFirstChildPlugin),
+        plugin(pushwordHelper.twBleedPlugin),
+    ],
+};

package/src/tailwind.helpers.js

@@ -28,4 +28,21 @@ module.exports = {
             });
         });
     },
+    twBleedPlugin: function ({ addUtilities }) {
+        addUtilities({
+            ".bleed": {
+                width: "100vw",
+                "margin-inline-start": "50%",
+                "margin-inline-end": "unset",
+                transform: "translateX(-50%)",
+                "max-width": "none",
+            },
+            ".bleed-disable": {
+                width: "inherit",
+                "margin-inline-start": "inherit",
+                "margin-inline-end": "inherit",
+                transform: "default",
+            },
+        });
+    },
 };