Filter scaffold

ayush013 · Jul 12, 2022 · ee0eded · ee0eded
1 parent 9ba28d6
commit ee0eded
Show file tree

Hide file tree

Showing 11 changed files with 18,368 additions and 3 deletions.
diff --git a/filter/index.html b/filter/index.html
@@ -0,0 +1,11 @@
+<!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" />
+    <title>Filter</title>
+  </head>
+
+  <body></body>
+</html>
diff --git a/filter/package-lock.json b/filter/package-lock.json
diff --git a/filter/package.json b/filter/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "media-scroller-gui-challenge",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config webpack.prod.js",
+    "start": "webpack serve --open --config webpack.dev.js",
+    "serve:prod": "webpack serve --open --config webpack.prod.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "autoprefixer": "^10.2.5",
+    "css-loader": "^5.2.4",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.3.1",
+    "mini-css-extract-plugin": "^1.6.0",
+    "node-sass": "^6.0.0",
+    "sass-loader": "^11.0.1",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.36.2",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
+  }
+}
diff --git a/filter/src/app/.gitkeep b/filter/src/app/.gitkeep
diff --git a/filter/src/assets/.gitkeep b/filter/src/assets/.gitkeep
diff --git a/filter/src/index.js b/filter/src/index.js
@@ -0,0 +1,11 @@
+import "./style.css";
+const API = "https://picsum.photos/v2/list";
+
+fetch(API)
+  .then((r) => r.json())
+  .then((list) => {
+    // const mediaTemplates = list.map(mapMediaToTemplate);
+    // const fragment = new DocumentFragment();
+    // mediaTemplates.forEach((template) => fragment.appendChild(template));
+    // mediaScroller.appendChild(fragment);
+  });
diff --git a/filter/src/style.css b/filter/src/style.css
@@ -0,0 +1,51 @@
+/* Basic reset */
+@layer reset {
+  html {
+    font-size: 16px;
+  }
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  :root {
+    --bg-light: white;
+    --bg-dark: rgb(2, 20, 20);
+    --bg: var(--bg-light);
+  }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+      "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-size: 1rem;
+    font-weight: 400;
+    min-height: 100vh;
+    color: black;
+    background-color: var(--bg);
+    padding: 2rem;
+  }
+
+  *,
+  *::after,
+  *::before {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: white;
+  }
+
+  :root {
+    color-scheme: dark;
+    --bg: var(--bg-dark);
+  }
+
+}
diff --git a/filter/webpack.dev.js b/filter/webpack.dev.js
@@ -0,0 +1,38 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.js',
+  mode: 'development',
+  devtool: 'inline-source-map',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+  },
+  devServer: {
+    contentBase: './dist',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        loader: 'html-loader',
+      },
+      {
+        test: /\.(svg|png|jpg|gif)$/,
+        type: 'asset/resource'
+      },
+      {
+        test: /\.(scss|css)$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      }
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Scaffold - Development',
+      template: 'index.html'
+    }),
+  ],
+};
diff --git a/filter/webpack.prod.js b/filter/webpack.prod.js
@@ -0,0 +1,39 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: './src/index.js',
+  mode: 'production',
+  output: {
+    filename: '[name].[contenthash].js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+  },
+  optimization: {
+    runtimeChunk: 'single',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        loader: 'html-loader',
+      },
+      {
+        test: /\.(svg|png|jpg|gif)$/,
+        type: 'asset/resource'
+      },
+      {
+        test: /\.(scss|css)$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
+    new HtmlWebpackPlugin({
+      title: 'Scafold - Production',
+      template: 'index.html'
+    }),
+  ],
+};