From 2ecb98a842e120d0e13884517b57e3c2bb74a8b0 Mon Sep 17 00:00:00 2001
From: uf0 <scnepa222@gmail.com>
Date: Sun, 8 Nov 2020 15:52:40 +0100
Subject: [PATCH] bootstrap

---
 .gitignore                        |   6 +
 .prettierrc                       |   6 +
 README.md                         |  64 ++++++++
 package.json                      |  24 +++
 public/favicon.png                | Bin 0 -> 3127 bytes
 public/global.css                 |  10 ++
 public/index.html                 |  17 ++
 src/App.svelte                    | 104 ++++++++++++
 src/components/Chat.svelte        |  19 +++
 src/components/Description.svx    |  13 ++
 src/components/Nav.svelte         |  57 +++++++
 src/components/Offline.svelte     | 263 ++++++++++++++++++++++++++++++
 src/components/VideoPlayer.svelte |  42 +++++
 src/main.js                       |   9 +
 src/stores.js                     |  15 ++
 webpack.config.js                 |  57 +++++++
 16 files changed, 706 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .prettierrc
 create mode 100644 README.md
 create mode 100644 package.json
 create mode 100644 public/favicon.png
 create mode 100644 public/global.css
 create mode 100644 public/index.html
 create mode 100644 src/App.svelte
 create mode 100644 src/components/Chat.svelte
 create mode 100644 src/components/Description.svx
 create mode 100644 src/components/Nav.svelte
 create mode 100644 src/components/Offline.svelte
 create mode 100644 src/components/VideoPlayer.svelte
 create mode 100644 src/main.js
 create mode 100644 src/stores.js
 create mode 100644 webpack.config.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f60de0b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+public/bundle.*
+package-lock.json
+yarn.lock
+.vscode
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0181079
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{"svelteSortOrder" : "styles-scripts-markup",
+"svelteStrictMode": true,
+"svelteBracketNewLine": true,
+"svelteAllowShorthand": false,
+"svelteIndentScriptAndStyle": false
+}
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3759c80
--- /dev/null
+++ b/README.md
@@ -0,0 +1,64 @@
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template-webpack.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template-webpack svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start webpack:
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and the page should reload with your changes.
+
+
+## Deploying to the web
+
+### With [now](https://zeit.co/now)
+
+Install `now` if you haven't already:
+
+```bash
+npm install -g now
+```
+
+Then, from within your project folder:
+
+```bash
+now
+```
+
+As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public
+```
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..97c6488
--- /dev/null
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.1.1",
+    "mdsvex": "^0.8.8",
+    "mini-css-extract-plugin": "^0.6.0",
+    "serve": "^11.0.0",
+    "style-loader": "^0.23.1",
+    "svelte": "^3.0.0",
+    "svelte-loader": "2.13.3",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.1"
+  },
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack",
+    "dev": "webpack-dev-server --content-base public"
+  },
+  "dependencies": {
+    "@vime/svelte": "4.2.0"
+  }
+}
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e6f5eb5a2f1f1c882d265cf479de25caa925645
GIT binary patch
literal 3127
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
RDuVz3002ovPDHLkV1lTymTLe2

literal 0
HcmV?d00001

diff --git a/public/global.css b/public/global.css
new file mode 100644
index 0000000..d3415cc
--- /dev/null
+++ b/public/global.css
@@ -0,0 +1,10 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	background-color: rgb(34, 35, 31);
+	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..fb02f84
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset='utf8'>
+	<meta name='viewport' content='width=device-width'>
+
+	<title>Off Topic live</title>
+
+	<link rel='icon' type='image/png' href='favicon.png'>
+	<link rel='stylesheet' href='global.css'>
+	<link rel='stylesheet' href='bundle.css'>
+</head>
+
+<body>
+	<script src='bundle.js'></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..8374578
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,104 @@
+<style>
+.container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  height: calc(100% - 55px);
+  flex-direction: column;
+  /* max-width:1320px; */
+  margin: auto;
+}
+
+.desc {
+  display: none;
+  padding: 15px;
+  color: white;
+  width: 100%;
+  margin-top: auto;
+}
+
+.videoContainer {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chatContainer {
+  position: relative;
+  width: 100%;
+  flex-grow: 1;
+}
+
+@media (min-width: 576px) {
+}
+
+@media (min-width: 768px) {
+  .container {
+    flex-direction: row;
+  }
+
+  .desc {
+    display: block;
+  }
+
+  .videoContainer {
+    flex: 0 0 70%;
+    max-width: 70%;
+  }
+
+  .chatContainer {
+    flex: 0 0 30%;
+    max-width: 30%;
+  }
+}
+@media (min-width: 992px) {
+}
+@media (min-width: 1200px) {
+}
+
+@media (min-width: 1400px) {
+}
+</style>
+
+<script>
+import VideoPlayer from "./components/VideoPlayer.svelte";
+import Chat from "./components/Chat.svelte";
+import Nav from "./components/Nav.svelte";
+import Description from "./components/Description.svx";
+// import { onMount } from "svelte";
+// import { live, channel } from "./stores.js";
+
+// let liveChannels = [];
+
+// onMount(async () => {
+//   const res = await fetch(
+//     `https://cors-anywhere.herokuapp.com/https://live.autistici.org/stats`
+//   );
+//   const xmlText = await res.text();
+//   liveChannels = await new window.DOMParser().parseFromString(
+//     xmlText,
+//     "text/xml"
+//   );
+//   const streams = liveChannels
+//     .getElementsByTagName("application")[0]
+//     .getElementsByTagName("stream");
+
+//   for (const i = 0; i < streams.length; i++) {
+//     livechannels.push(streams[i].getElementsByTagName("name")[0].textContent);
+//   }
+// });
+</script>
+
+<Nav />
+<div class="container">
+  <div class="videoContainer">
+    <VideoPlayer />
+    <div class="desc">
+      <Description />
+    </div>
+  </div>
+  <div class="chatContainer">
+    <Chat />
+  </div>
+</div>
diff --git a/src/components/Chat.svelte b/src/components/Chat.svelte
new file mode 100644
index 0000000..3deb433
--- /dev/null
+++ b/src/components/Chat.svelte
@@ -0,0 +1,19 @@
+<style>
+.chatIframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+  position: relative;
+}
+</style>
+
+<script>
+import { live, channel } from "../stores.js";
+</script>
+
+<iframe
+  title="live chat"
+  class="chatIframe"
+  src="{`https://kiwiirc.com/nextclient/#irc://irc.autistici.org:+6697/#${$channel}`}"
+></iframe>
diff --git a/src/components/Description.svx b/src/components/Description.svx
new file mode 100644
index 0000000..a0ee08c
--- /dev/null
+++ b/src/components/Description.svx
@@ -0,0 +1,13 @@
+<style>
+p {
+  margin: 0;
+}
+
+a {
+  color: #42b992;
+}
+</style>
+
+Off Topic è un laboratorio politico che ha sede presso lo spazio autogestito [Piano Terra](https://www.pianoterralab.org/) a Milano. Leggi i nostri approfondimenti sul [sito](https://www.offtopiclab.org) o seguici su canale [Telegram](https://t.me/offtopic_lab/) e/o [Twitter](https://twitter.com/OffTopic_lab) per rimanere sempre aggioranta/o.
+
+Questo live stream è possibile grazie al collettivo [Autistici/Inventati](https://www.autistici.org). Fai una [donazione](https://www.autistici.org/donate) per supportare il progetto.
\ No newline at end of file
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
new file mode 100644
index 0000000..848d121
--- /dev/null
+++ b/src/components/Nav.svelte
@@ -0,0 +1,57 @@
+<style>
+nav {
+  width: 100%;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  background-color: white;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
+}
+
+.title h1 {
+  font-size: 1rem;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.badge {
+  background-color: rgb(34, 35, 31);
+  color: white;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-left: 5px;
+}
+
+.live {
+  background-color: red !important;
+}
+</style>
+
+<script>
+import { onMount } from "svelte";
+import { live, channel } from "../stores.js";
+
+onMount(async () => {
+  const res = await fetch(`https://live.autistici.org/hls/${$channel}.m3u8`);
+  if (res.status !== 200) {
+    live.set(false);
+  } else {
+    live.set(true);
+  }
+});
+</script>
+
+<nav>
+  <div class="title">
+    <h1>Off Topic</h1>
+    <div class="badge" class:live="{$live}">live</div>
+  </div>
+</nav>
diff --git a/src/components/Offline.svelte b/src/components/Offline.svelte
new file mode 100644
index 0000000..5a30522
--- /dev/null
+++ b/src/components/Offline.svelte
@@ -0,0 +1,263 @@
+<style>
+.offline {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 21;
+  pointer-events: none;
+  background-color: rgb(34, 35, 31);
+}
+
+@keyframes screen-turn-on {
+  0% {
+    width: 0%;
+    height: 1px;
+    border-radius: 0px;
+    background-color: #b0b0b0;
+  }
+  50% {
+    width: 100%;
+    height: 1px;
+    border-radius: 0px;
+    background-color: #b0b0b0;
+  }
+  51% {
+    width: 100%;
+    height: 1px;
+    border-radius: 0px;
+    background-color: #b0b0b0;
+  }
+  70% {
+    width: 100%;
+    height: 1px;
+    border-radius: 0px;
+    background-color: #b0b0b0;
+  }
+  80% {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    background-color: #b0b0b0;
+  }
+  100% {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    background-color: #454545;
+  }
+}
+@keyframes shiver {
+  0% {
+    transform: translate(1px, 1px);
+    text-shadow: 6px 0 rgba(255, 0, 0, 0.9), -6px 0 rgba(0, 0, 255, 0.9);
+  }
+  5% {
+    transform: translate(1px, 1px);
+    text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
+  }
+  10% {
+    transform: translate(1px, 1px);
+    text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
+  }
+  15% {
+    transform: translate(1px, 1px);
+    text-shadow: 7px 0 rgba(255, 0, 0, 0.9), -7px 0 rgba(0, 0, 255, 0.9);
+  }
+  20% {
+    transform: translate(1px, 2px);
+    text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
+  }
+  25% {
+    transform: translate(1px, 2px);
+    text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
+  }
+  30% {
+    transform: translate(1px, 2px);
+    text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
+  }
+  35% {
+    transform: translate(1px, 2px);
+    text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
+  }
+  40% {
+    transform: translate(2px, 1px);
+    text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
+  }
+  45% {
+    transform: translate(2px, 1px);
+    text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
+  }
+  50% {
+    transform: translate(2px, 1px);
+    text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
+  }
+  55% {
+    transform: translate(2px, 1px);
+    text-shadow: 4px 0 rgba(255, 0, 0, 0.9), -4px 0 rgba(0, 0, 255, 0.9);
+  }
+  60% {
+    transform: translate(1px, 1px);
+    text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
+  }
+  65% {
+    transform: translate(1px, 1px);
+    text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
+  }
+  70% {
+    transform: translate(1px, 1px);
+    text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
+  }
+  75% {
+    transform: translate(1px, 1px);
+    text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
+  }
+  80% {
+    transform: translate(2px, 1px);
+    text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
+  }
+  85% {
+    transform: translate(2px, 1px);
+    text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
+  }
+  90% {
+    transform: translate(2px, 2px);
+    text-shadow: 5px 0 rgba(255, 0, 0, 0.9), -5px 0 rgba(0, 0, 255, 0.9);
+  }
+  95% {
+    transform: translate(2px, 2px);
+    text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
+  }
+  100% {
+    transform: translate(1px, 2px);
+    text-shadow: 3px 0 rgba(255, 0, 0, 0.9), -3px 0 rgba(0, 0, 255, 0.9);
+  }
+}
+
+#screen:after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  background-image: -webkit-linear-gradient(
+      bottom,
+      rgba(255, 255, 255, 0.2) 33.3%,
+      rgba(255, 255, 255, 0.4) 33.3%,
+      rgba(255, 255, 255, 0.4) 66.7%,
+      rgba(255, 255, 255, 0.6) 66.7%
+    ),
+    -webkit-linear-gradient(left, rgba(255, 0, 0, 0.7) 33.3%, rgba(
+            0,
+            255,
+            0,
+            0.7
+          )
+          33.3%, rgba(0, 255, 0, 0.6) 66.7%, rgba(0, 0, 255, 0.6) 66.7%);
+  background-image: -moz-linear-gradient(
+      bottom,
+      rgba(255, 255, 255, 0.2) 33.3%,
+      rgba(255, 255, 255, 0.4) 33.3%,
+      rgba(255, 255, 255, 0.4) 66.7%,
+      rgba(255, 255, 255, 0.6) 66.7%
+    ),
+    -webkit-linear-gradient(left, rgba(255, 0, 0, 0.7) 33.3%, rgba(
+            0,
+            255,
+            0,
+            0.7
+          )
+          33.3%, rgba(0, 255, 0, 0.6) 66.7%, rgba(0, 0, 255, 0.6) 66.7%);
+  background-image: linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.2) 33.3%,
+      rgba(255, 255, 255, 0.4) 33.3%,
+      rgba(255, 255, 255, 0.4) 66.7%,
+      rgba(255, 255, 255, 0.6) 66.7%
+    ),
+    linear-gradient(
+      to right,
+      rgba(255, 0, 0, 0.7) 33.3%,
+      rgba(0, 255, 0, 0.7) 33.3%,
+      rgba(0, 255, 0, 0.6) 66.7%,
+      rgba(0, 0, 255, 0.6) 66.7%
+    );
+  background-size: 3px 3px;
+  mix-blend-mode: multiply;
+  background-color: #00f;
+}
+#screen {
+  height: 100%;
+  width: 100%;
+  background: #0a0a0a;
+  color: #fff;
+  text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
+  border-radius: 5px;
+}
+#screen {
+  background-color: #222;
+}
+#content-holder {
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  text-align: center;
+  overflow: hidden;
+}
+#content {
+  background-color: #b0b0b0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  text-align: center;
+  overflow: hidden;
+  height: 0;
+  position: relative;
+}
+#content {
+  animation: screen-turn-on 0.4s linear 0.5s 1 forwards;
+}
+
+/* #channel {
+  position: absolute;
+  top: 15px;
+  left: 25px;
+  font-size: 2rem;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  vertical-align: middle;
+  color: #fbff68;
+  animation: shiver 1s linear 0.5s infinite;
+} */
+#text {
+  color: #ededed;
+  text-align: left;
+  font-weight: 200;
+  /* text-transform: uppercase; */
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  font-size: 3rem;
+  animation: shiver 1s linear 0.5s infinite;
+}
+</style>
+
+<div class="offline">
+  <div id="screen">
+    <div id="content-holder">
+      <div id="content">
+        <div id="app">
+          <!-- <div id="channel">OT CHANNEL</div> -->
+          <div id="text">Non siamo live!</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/VideoPlayer.svelte b/src/components/VideoPlayer.svelte
new file mode 100644
index 0000000..69d6af7
--- /dev/null
+++ b/src/components/VideoPlayer.svelte
@@ -0,0 +1,42 @@
+<script>
+import {
+  VimePlayer,
+  VimeHls,
+  usePlayerStore,
+  VimeControls,
+  VimeFullscreenControl,
+  VimeScrim,
+  VimeControlSpacer,
+  VimeVolumeControl,
+  VimePlaybackControl,
+  VimeDefaultUi,
+} from "@vime/svelte";
+import "@vime/core/themes/default.css";
+import Offline from "./Offline.svelte";
+import { live, channel } from "../stores.js";
+
+let player;
+//const { paused } = usePlayerStore(() => player);
+</script>
+
+<VimePlayer playsinline bind:this="{player}">
+  <VimeHls preload="auto" version="latest">
+    <source
+      data-src="{`https://live.autistici.org/hls/${$channel}.m3u8`}"
+      type="application/x-mpegURL"
+    />
+  </VimeHls>
+  {#if !$live}
+    <Offline />
+  {/if}
+
+  <VimeDefaultUi noControls>
+    <VimeScrim />
+    <VimeControls fullWidth>
+      <VimePlaybackControl hideTooltip />
+      <VimeVolumeControl hideTooltip />
+      <VimeControlSpacer />
+      <VimeFullscreenControl hideTooltip />
+    </VimeControls>
+  </VimeDefaultUi>
+</VimePlayer>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..4e675ae
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,9 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+window.app = app;
+
+export default app;
\ No newline at end of file
diff --git a/src/stores.js b/src/stores.js
new file mode 100644
index 0000000..d41dc22
--- /dev/null
+++ b/src/stores.js
@@ -0,0 +1,15 @@
+import queryString from "query-string";
+import { writable, derived } from 'svelte/store';
+
+const live = writable(false);
+
+const channel = writable('offtopic');
+if (typeof window !== "undefined") {
+    const parsed = queryString.parse(window.location.search);
+    if(parsed.channel){
+        channel.set(parsed.channel)
+    }
+  }
+
+
+export { live, channel}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..a329af1
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,57 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+const { mdsvex } = require('mdsvex')
+
+const mode = process.env.NODE_ENV || 'development';
+const prod = mode === 'production';
+
+module.exports = {
+	entry: {
+		bundle: ['./src/main.js']
+	},
+	resolve: {
+		alias: {
+			svelte: path.resolve('node_modules', 'svelte')
+		},
+		extensions: ['.mjs', '.js', '.svelte','.svx'],
+		mainFields: ['svelte', 'browser', 'module', 'main']
+	},
+	output: {
+		path: __dirname + '/public',
+		filename: '[name].js',
+		chunkFilename: '[name].[id].js'
+	},
+	module: {
+		rules: [
+			{
+				test: /.(svelte|svx)$/,
+				use: {
+					loader: 'svelte-loader',
+					options: {
+						emitCss: true,
+						hotReload: true,
+						preprocess: mdsvex()
+					}
+				}
+			},
+			{
+				test: /\.css$/,
+				use: [
+					/**
+					 * MiniCssExtractPlugin doesn't support HMR.
+					 * For developing, use 'style-loader' instead.
+					 * */
+					prod ? MiniCssExtractPlugin.loader : 'style-loader',
+					'css-loader'
+				]
+			}
+		]
+	},
+	mode,
+	plugins: [
+		new MiniCssExtractPlugin({
+			filename: '[name].css'
+		})
+	],
+	devtool: prod ? false: 'source-map'
+};