Home Explore Help
Register Sign In
offtopic
/
livestream
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

bootstrap

uf0 3 years ago
commit
2ecb98a842
16 changed files with 706 additions and 0 deletions
Split View Show Diff Stats
  1. 6 0
      .gitignore
  2. 6 0
      .prettierrc
  3. 64 0
      README.md
  4. 24 0
      package.json
  5. BIN
      public/favicon.png
  6. 10 0
      public/global.css
  7. 17 0
      public/index.html
  8. 104 0
      src/App.svelte
  9. 19 0
      src/components/Chat.svelte
  10. 13 0
      src/components/Description.svx
  11. 57 0
      src/components/Nav.svelte
  12. 263 0
      src/components/Offline.svelte
  13. 42 0
      src/components/VideoPlayer.svelte
  14. 9 0
      src/main.js
  15. 15 0
      src/stores.js
  16. 57 0
      webpack.config.js

+ 6 - 0
.gitignore
View File 

@@ -0,0 +1,6 @@
 
+.DS_Store
 
+node_modules
 
+public/bundle.*
 
+package-lock.json
 
+yarn.lock
 
+.vscode

+ 6 - 0
.prettierrc
View File 

@@ -0,0 +1,6 @@
 
+{"svelteSortOrder" : "styles-scripts-markup",
 
+"svelteStrictMode": true,
 
+"svelteBracketNewLine": true,
 
+"svelteAllowShorthand": false,
 
+"svelteIndentScriptAndStyle": false
 
+}

+ 64 - 0
README.md
View File 

@@ -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
 
+```

+ 24 - 0
package.json
View File 

@@ -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"
 
+  }
 
+}

BIN
public/favicon.png
View File


+ 10 - 0
public/global.css
View File 

@@ -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"
 
+}

+ 17 - 0
public/index.html
View File 

@@ -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>

+ 104 - 0
src/App.svelte
View File 

@@ -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>

+ 19 - 0
src/components/Chat.svelte
View File 

@@ -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>

+ 13 - 0
src/components/Description.svx
View File 

@@ -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.

+ 57 - 0
src/components/Nav.svelte
View File 

@@ -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>

+ 263 - 0
src/components/Offline.svelte
View File 

@@ -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>

+ 42 - 0
src/components/VideoPlayer.svelte
View File 

@@ -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>

+ 9 - 0
src/main.js
View File 

@@ -0,0 +1,9 @@
 
+import App from './App.svelte';
 
+
 
+const app = new App({
 
+	target: document.body
 
+});
 
+
 
+window.app = app;
 
+
 
+export default app;

+ 15 - 0
src/stores.js
View File 

@@ -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}

+ 57 - 0
webpack.config.js
View File 

@@ -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'
 
+};