Initial Config of components

- eleventy - tailwindcss - postcss - webpack
2021-09-15 08:00:11 +02:00
parent 61bf73dc36
commit bad5d0302a
7 changed files with 87 additions and 0 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -0,0 +1,23 @@
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+
+module.exports = (config) => {
+  config.addPlugin(syntaxHighlight);
+  config.addPassthroughCopy({ 'src/assets': 'assets' });
+  config.setFrontMatterParsingOptions({
+    excerpt: true,
+    excerpt_sperator: ' <!-- excerpt -->',
+  });
+  config.setTemplateFormats(['jpg', 'png', 'webp', 'md', 'njk']);
+  config.setBrowserSyncConfig({
+    files: ['dist/**/*'],
+    open: true,
+  });
+  config.setDataDeepMerge(true);
+
+  return {
+    dir: {
+      input: 'src',
+      output: 'dist',
+    },
+  };
+};
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss')('./tailwind.config.js'),
+    require('autoprefixer'),
+  ],
+};
--- a/src/_bundle/main.js
+++ b/src/_bundle/main.js
@@ -0,0 +1 @@
+import './main.pcss';
--- a/src/_bundle/main.pcss
+++ b/src/_bundle/main.pcss
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
--- a/src/_includes/layout.njk
+++ b/src/_includes/layout.njk
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="stylesheet" href="/assets/main.bundle.css">
+    <link rel="stylesheet" href="https://upkg.com/prismjs@1.20.0/themes/prism-okaida.css">
+    <script src="/assets/main.bundle.js" defer></script>
+    <title>{{title}}</title>
+  </head>
+  <body>
+    <main></main>
+  </body>
+</html>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+    },
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/typography')],
+  pruge: ['./src/**/*.js', './src/**/*.njk', './src/**/*.svg'],
+};
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,24 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: './src/_bundle/main.js',
+  mode: process.env.NODE_ENV,
+  module: {
+    rules: [
+      {
+        test: /\.pcss$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
+      },
+    ],
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist', 'assets'),
+    filename: 'main.bundle.js',
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'main.bulde.css',
+    }),
+  ],
+};