Browse Source

Initial commit

master
ポール ウェッブ 3 months ago
parent
commit
470393b55d

+ 13
- 0
.babelrc View File

@@ -0,0 +1,13 @@
1
+{
2
+  presets: [
3
+    "@babel/env"
4
+  ],
5
+  plugins: [
6
+    ["@babel/transform-destructuring", {
7
+      useBuiltIns: true
8
+    }],
9
+    ["@babel/transform-react-jsx", {
10
+      pragma: "m"
11
+    }]
12
+  ]
13
+}

+ 9
- 0
.editorconfig View File

@@ -0,0 +1,9 @@
1
+root = true
2
+
3
+[*]
4
+charset = utf-8
5
+end_of_line = lf
6
+indent_size = 2
7
+indent_style = space
8
+insert_final_newline = true
9
+trim_trailing_whitespace = true

+ 28
- 0
.eslintrc View File

@@ -0,0 +1,28 @@
1
+{
2
+  env: {
3
+    browser: true,
4
+    commonjs: true
5
+  },
6
+  extends: "@inc/eslint-config/esnext",
7
+  parserOptions: {
8
+    ecmaVersion: 9,
9
+    sourceType: "module"
10
+  },
11
+  plugins: [
12
+    "react"
13
+  ],
14
+  rules: {
15
+    "no-unused-vars": [
16
+      error, {
17
+        varsIgnorePattern: "^m$"
18
+      }
19
+    ],
20
+    "react/jsx-tag-spacing": [
21
+      error, {
22
+        afterOpening: "never",
23
+        beforeClosing: "never",
24
+        beforeSelfClosing: "never"
25
+      }
26
+    ]
27
+  }
28
+}

+ 0
- 1
.gitignore View File

@@ -1,4 +1,3 @@
1
-# ---> Default
2 1
 # Files
3 2
 .DS_Store
4 3
 .env

+ 1
- 0
.npmrc View File

@@ -0,0 +1 @@
1
+package-lock=false

+ 28
- 0
app/components/footer.js View File

@@ -0,0 +1,28 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T
6
+
7
+import m from "mithril";
8
+
9
+//  U T I L
10
+
11
+const currentYear = new Date().getFullYear();
12
+
13
+
14
+
15
+//  E X P O R T
16
+
17
+export default {
18
+  view: () => {
19
+    return ([
20
+      <footer class="footer">
21
+        <div class="flex-center">
22
+          Copyright © 2016-{currentYear} <a href="/" oncreate={m.route.link} title="LBRY, The future of content on the Internet">LBRY</a>.
23
+        </div>
24
+      </footer>
25
+      // <script src="/app.js"/>
26
+    ]);
27
+  }
28
+};

+ 31
- 0
app/components/navigation.js View File

@@ -0,0 +1,31 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T
6
+
7
+import m from "mithril";
8
+
9
+
10
+
11
+//  E X P O R T
12
+
13
+export default () => {
14
+  return {
15
+    view: () => {
16
+      // const currentUrl = window.location.pathname;
17
+
18
+      return ([
19
+        <header-navigation>
20
+          <div class="flex-center">
21
+            <header-navigation-section class="logo">
22
+              <header-navigation-title>
23
+                <a href="/" oncreate={m.route.link} title="LBRY homepage">LBRY</a>
24
+              </header-navigation-title>
25
+            </header-navigation-section>
26
+          </div>
27
+        </header-navigation>
28
+      ]);
29
+    }
30
+  };
31
+};

+ 26
- 0
app/components/wrapper.js View File

@@ -0,0 +1,26 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T
6
+
7
+import m from "mithril";
8
+
9
+//  U T I L S
10
+
11
+import Footer from "./footer";
12
+import Navigation from "./navigation";
13
+
14
+
15
+
16
+//  E X P O R T
17
+
18
+export default {
19
+  view: vnode => {
20
+    return ([
21
+      m(Navigation()),
22
+      m("main", { class: vnode.attrs.mainClass }, vnode.children),
23
+      m(Footer)
24
+    ]);
25
+  }
26
+};

+ 50
- 0
app/index.html View File

@@ -0,0 +1,50 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8"/>
5
+    <title><%= appName %> ∙ <%= appTagline %></title>
6
+    <base href="/"/>
7
+
8
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
9
+    <meta name="author" content="<%= appName %>"/>
10
+    <meta name="description" content="<%= appTagline %>"/>
11
+    <meta name="mobile-web-app-capable" content="yes"/>
12
+    <meta name="title" content="<%= appName %>"/>
13
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
14
+
15
+    <!--/ Social/App Stuff /-->
16
+    <meta name="apple-mobile-web-app-title" content="<%= appName %>"/>
17
+    <meta name="application-name" content="<%= appName %>"/>
18
+    <meta name="socii:site" content="∴ <%= appName %>"/>
19
+    <meta name="theme-color" content="<%= appColor %>"/>
20
+
21
+    <!--/ Open Graph /-->
22
+    <meta property="og:description" content="<%= appTagline %>"/>
23
+    <meta property="og:image" content="/og-image.png"/>
24
+    <meta property="og:image:height" content="<%= ogImageHeight %>"/>
25
+    <meta property="og:image:width" content="<%= ogImageWidth %>"/>
26
+    <meta property="og:locale" content="<%= appLocale %>"/>
27
+    <meta property="og:site_name" content="<%= appName %>"/>
28
+    <meta property="og:title" content="<%= appName %>"/>
29
+    <meta property="og:type" content="website"/>
30
+    <meta property="og:url" content="/"/>
31
+
32
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
33
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
34
+    <link rel="mask-icon" href="/favicon.svg" color="<%= appColor %>"/>
35
+    <link rel="shortcut icon" href="/favicon.ico"/>
36
+    <link rel="stylesheet" href="/css/bundle.css"/>
37
+
38
+    <script src="/plugins/clipboard.js"></script>
39
+  </head>
40
+
41
+  <body>
42
+    <app></app>
43
+
44
+    <noscript>
45
+      <span><%= appName %> is an SPA (Single Page Application) and requires JavaScript to work, please enable it if you can.</span>
46
+    </noscript>
47
+
48
+    <script src="/scripts/bundle.js"></script>
49
+  </body>
50
+</html>

+ 19
- 0
app/index.js View File

@@ -0,0 +1,19 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T
6
+
7
+import m from "mithril";
8
+
9
+//  U T I L S
10
+
11
+import routes from "./views";
12
+const mountNode = document.querySelector("app");
13
+
14
+
15
+
16
+//  P R O G R A M
17
+
18
+m.route.prefix(""); // no fugly hash in our URLs
19
+m.route(mountNode, "/", routes);

+ 38
- 0
app/models/trending.js View File

@@ -0,0 +1,38 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T
6
+
7
+import m from "mithril";
8
+
9
+
10
+
11
+//  P R O G R A M
12
+
13
+const Trending = {
14
+  list: [],
15
+  loadList: () => {
16
+    return m.request({
17
+      method: "GET",
18
+      url: "https://api.lbry.com/file/list_homepage"
19
+    }).then(result => {
20
+      const data = result.data.Uris;
21
+      const keys = Object.keys(data);
22
+      const updatedList = {};
23
+
24
+      for (const key of keys) {
25
+        if (key.includes("|"))
26
+          updatedList[key] = data[key];
27
+      }
28
+
29
+      Trending.list = updatedList;
30
+    });
31
+  }
32
+};
33
+
34
+
35
+
36
+//  E X P O R T
37
+
38
+export default Trending;

+ 56
- 0
app/views/home.js View File

@@ -0,0 +1,56 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T
6
+
7
+import m from "mithril";
8
+
9
+//  U T I L S
10
+
11
+import Trending from "~model/trending";
12
+import Wrapper from "~component/wrapper";
13
+
14
+
15
+
16
+//  E X P O R T
17
+
18
+export default {
19
+  onmatch: () => {
20
+    Trending.loadList();
21
+    console.log("Hello, welcome"); // eslint-disable-line no-console
22
+  },
23
+  render: () => {
24
+    const { list } = Trending;
25
+    const channelNames = Object.keys(list);
26
+
27
+    return m(Wrapper, { mainClass: "inner-wrap flex-row" }, [
28
+      (
29
+        <channels>
30
+          {
31
+            channelNames.length ?
32
+              channelNames.map(channelName => renderChannelLink(channelName)) :
33
+              m("div", { style: "text-align: center;" }, "Waiting for content query to finish...")
34
+          }
35
+        </channels>
36
+      )
37
+    ]);
38
+  }
39
+};
40
+
41
+
42
+
43
+//  H E L P E R
44
+
45
+function renderChannelLink(data) {
46
+  const channelName = data.split("|")[1].trim();
47
+  const channelNameHash = channelName.split("#")[1];
48
+  const channelNameSolo = channelName.split("#")[0];
49
+  const formattedChannelName = `<span class="name">${channelNameSolo.replace("@", "")}</span><span class="hash">#${channelNameHash}</span>`;
50
+
51
+  return (
52
+    <channel data-channel-name={channelName}>
53
+      {m.trust(formattedChannelName)}
54
+    </channel>
55
+  );
56
+}

+ 17
- 0
app/views/index.js View File

@@ -0,0 +1,17 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  U T I L S
6
+
7
+import Home from "./home";
8
+import Nope from "./nope";
9
+
10
+
11
+
12
+//  E X P O R T S
13
+
14
+export default {
15
+  "/": Home,
16
+  "/:404...": Nope
17
+};

+ 24
- 0
app/views/nope.js View File

@@ -0,0 +1,24 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T
6
+
7
+import m from "mithril";
8
+
9
+//  U T I L
10
+
11
+import Wrapper from "~component/wrapper";
12
+
13
+
14
+
15
+//  E X P O R T
16
+
17
+export default {
18
+  view: () => m(Wrapper,
19
+    <section class="ancillary inner-wrap">
20
+      <img alt="WTF bro" src="/images/what.png"/>
21
+      <p><a href="/">Go home, Roger</a></p>
22
+    </section>
23
+  )
24
+};

+ 1
- 0
dist/css/bundle.css
File diff suppressed because it is too large
View File


+ 1
- 0
dist/css/bundle.css.map View File

@@ -0,0 +1 @@
1
+{"version":3,"sourceRoot":"","sources":["../../sass/utilities/_animation.scss","../../sass/utilities/_base.scss","../../node_modules/@lbry/color/lbry-color.scss","../../sass/app/components/_channel.scss","../../sass/app/components/_navigation.scss","../../sass/app/_layout.scss","../../sass/utilities/_mixins.scss"],"names":[],"mappings":"AAAA,mBACE,KACE,UAGF,GACE,WAIJ,oBACE,KACE,UAGF,GACE,WCdJ,KACE,sBACA,kCAEA,kCACA,mCACA,8BAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,mBAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,oBAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,GACE,qBAIA,WACE,eAIJ,MACE,yBACA,iBAGF,IACE,eACA,YAEA,WACE,uBACA,aAEA,iBC5FU,KD6FV,oDACA,sBACA,uCACA,WACA,cACA,kBAIJ,EACE,cACA,qBAGF,OACE,6BACA,cAEA,sEAEE,eAIJ,MACE,6BACA,cAEA,mBACE,cACA,WAGF,qBACE,cAGF,qJAME,YAGF,2MAME,eAGF,oCACE,wBAIJ,SACE,WAEA,iBAEA,yBACE,gBAGF,mBACE,YAIJ,aAEE,eAEE,iCACA,mCAGF,OAEE,mCAGF,IACE,0BAGF,MACE,uBAGF,QAGE,qBACA,oBAGF,MAEE,kCAGF,MACE,sCAIF,EACE,kCACA,sBACA,uBACA,4BAKE,iBACE,uCAKA,sDACE,sBAMJ,qBACE,wCAIJ,WAEE,qCACA,iCE/ON,SACE,cACA,iBAGF,QACE,eACA,cACA,eACA,gBACA,kBACA,qBACA,kBACA,yBACA,6BAEA,oBACE,kBAEA,qCACE,aAIJ,cACE,MDrBU,KCyBV,kBACE,YACA,oCAGF,kBACE,kBACA,UAEA,yBACE,oCACA,sBAGA,gEACA,WACA,kBACA,WC9CR,kBACE,YACA,aAEA,cACA,kBACA,eACA,UAGF,wBACE,MFPY,KEQZ,cACA,eACA,gBACA,sBCLF,cAGE,uBASF,IACE,iBACA,aACA,sBAGF,KCcE,iJDZA,iCAEA,MH1BY,QG2BZ,aACA,sBACA,eACA,kBACA,kBACA,UAEA,aACE,cACA,gBAGA,iBHvCU,QGwCV,WAEA,eACA,WAIJ,KC9CE,WACA,WACA,cD8CA,OAGA,kBAGF,SC5DE,mBACA,oBACA,uBD4DA,uBACA,aAEA,gBACA,iBACA,eACA,kBACA,WAEA,cACE,aACA,iBHmHS,QGlHT,MHvEU,KGwEV,eAIJ,KC1CE,6DDgDF,YACE,iBACA,kBACA,iBAEA,yBALF,YAMI,mBACA,mBAGF,mBCzFA,WACA,WACA,cD4FF,QACE,kBACA,iBACA,kBAGF,aACE,mBACA,aACA,mBAGF,UACE,WACA,aACA,mBACA,8BAGF,eACE,mBAEA,iBHrHY,QGsHZ,MHxHY,KGyHZ,qBACA,qBACA,iBACA,mBACA,yBAKF,YACE,iBH4Fc,QG3Fd","file":"bundle.css"}

BIN
dist/images/what.png View File


+ 50
- 0
dist/index.html View File

@@ -0,0 +1,50 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+  <head>
4
+    <meta charset="utf-8"/>
5
+    <title>LBRY ∙ The future of content on the Internet</title>
6
+    <base href="/"/>
7
+
8
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
9
+    <meta name="author" content="LBRY"/>
10
+    <meta name="description" content="The future of content on the Internet"/>
11
+    <meta name="mobile-web-app-capable" content="yes"/>
12
+    <meta name="title" content="LBRY"/>
13
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
14
+
15
+    <!--/ Social/App Stuff /-->
16
+    <meta name="apple-mobile-web-app-title" content="LBRY"/>
17
+    <meta name="application-name" content="LBRY"/>
18
+    <meta name="socii:site" content="∴ LBRY"/>
19
+    <meta name="theme-color" content="#111"/>
20
+
21
+    <!--/ Open Graph /-->
22
+    <meta property="og:description" content="The future of content on the Internet"/>
23
+    <meta property="og:image" content="/og-image.png"/>
24
+    <meta property="og:image:height" content="1024"/>
25
+    <meta property="og:image:width" content="768"/>
26
+    <meta property="og:locale" content="en_US"/>
27
+    <meta property="og:site_name" content="LBRY"/>
28
+    <meta property="og:title" content="LBRY"/>
29
+    <meta property="og:type" content="website"/>
30
+    <meta property="og:url" content="/"/>
31
+
32
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
33
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
34
+    <link rel="mask-icon" href="/favicon.svg" color="#111"/>
35
+    <link rel="shortcut icon" href="/favicon.ico"/>
36
+    <link rel="stylesheet" href="/css/bundle.css"/>
37
+
38
+    <script src="/plugins/clipboard.js"></script>
39
+  </head>
40
+
41
+  <body>
42
+    <app></app>
43
+
44
+    <noscript>
45
+      <span>LBRY is an SPA (Single Page Application) and requires JavaScript to work, please enable it if you can.</span>
46
+    </noscript>
47
+
48
+    <script src="/scripts/bundle.js"></script>
49
+  </body>
50
+</html>

+ 7
- 0
dist/plugins/clipboard.js
File diff suppressed because it is too large
View File


+ 2
- 0
dist/scripts/bundle.js
File diff suppressed because it is too large
View File


+ 1
- 0
dist/scripts/bundle.js.map
File diff suppressed because it is too large
View File


+ 7
- 0
index.js View File

@@ -0,0 +1,7 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  U T I L
6
+
7
+import "./app";

+ 89
- 0
package.json View File

@@ -0,0 +1,89 @@
1
+{
2
+  "_moduleAliases": {
3
+    "~component": "app/components",
4
+    "~model": "app/models",
5
+    "~view": "app/views"
6
+  },
7
+  "author": {
8
+    "email": "paul@lbry.com",
9
+    "name": "Paul Anthony Webb"
10
+  },
11
+  "dependencies": {
12
+    "got": "^9.6.0",
13
+    "mithril": "^1.1.6"
14
+  },
15
+  "description": "",
16
+  "devDependencies": {
17
+    "@babel/cli": "^7.4.3",
18
+    "@babel/core": "^7.4.3",
19
+    "@babel/plugin-external-helpers": "^7.2.0",
20
+    "@babel/plugin-transform-destructuring": "^7.4.3",
21
+    "@babel/plugin-transform-object-assign": "^7.2.0",
22
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
23
+    "@babel/plugin-transform-runtime": "^7.4.3",
24
+    "@babel/preset-env": "^7.4.3",
25
+    "@babel/register": "^7.4.0",
26
+    "@inc/eslint-config": "^1.1.3",
27
+    "@inc/sasslint-config": "^1.2.0",
28
+    "@lbry/color": "^1.1.1",
29
+    "cwd": "^0.10.0",
30
+    "eslint": "^5.16.0",
31
+    "eslint-plugin-react": "^7.12.4",
32
+    "husky": "^1.3.1",
33
+    "link-module-alias": "^1.2.0",
34
+    "npm-run-all": "^4.1.5",
35
+    "rimraf": "^2.6.3",
36
+    "rollup": "^1.9.0",
37
+    "rollup-plugin-babel": "^4.3.2",
38
+    "rollup-plugin-commonjs": "^9.3.4",
39
+    "rollup-plugin-eslint": "^5.1.0",
40
+    "rollup-plugin-livereload": "^1.0.0",
41
+    "rollup-plugin-node-resolve": "^4.2.1",
42
+    "rollup-plugin-pathmodify": "^1.0.1",
43
+    "rollup-plugin-replace": "^2.1.1",
44
+    "rollup-plugin-serve": "^1.0.1",
45
+    "rollup-plugin-uglify": "^6.0.2",
46
+    "rollup-watch": "^4.3.1",
47
+    "sass": "^1.18.0",
48
+    "sass-lint": "^1.12.1",
49
+    "snazzy": "^8.0.0",
50
+    "standardx": "^3.0.1",
51
+    "updates": "^8.0.0"
52
+  },
53
+  "engines": {
54
+    "node": ">=11.0.0"
55
+  },
56
+  "files": [
57
+    "dist",
58
+    "README.md"
59
+  ],
60
+  "keywords": [],
61
+  "license": "ISC",
62
+  "main": "dist/scripts/bundle",
63
+  "module": "dist/scripts/bundle.mjs",
64
+  "name": "lbry-paper",
65
+  "scripts": {
66
+    "build": "npm run clean; npm run init; npm run rollup",
67
+    "clean": "rimraf dist/scripts/*; rimraf dist/css/*",
68
+    "css": "sass --load-path=node_modules --update sass:dist/css --style compressed",
69
+    "format": "eslint '**/*.js' --fix --ignore-pattern '/dist*/'",
70
+    "init": "npm run css",
71
+    "postinstall": "link-module-alias",
72
+    "preinstall": "command -v link-module-alias; link-module-alias clean || true",
73
+    "rollup": "rollup --config ./scripts/rollup.umd.js --environment DEPS:1; rollup --config ./scripts/rollup.es.js --environment DEPS:1",
74
+    "start": "npm run build; NODE_ENV=production npx here dist index.html 7854",
75
+    "test": "run-s test:*",
76
+    "test:dependencies": "updates --update ./",
77
+    "test:lint": "standardx --verbose | snazzy",
78
+    "test:sass": "sass-lint --config ./node_modules/@inc/sasslint-config/config.json --verbose",
79
+    "watch": "npm run init; NODE_ENV=development run-p watch:*",
80
+    "watch:app": "rollup --config ./scripts/rollup.watch.js --environment DEPS:1,PORT:7854,WATCH_DIR:./dist/ --watch",
81
+    "watch:sass": "sass --load-path=node_modules --watch sass:dist/css --style compressed"
82
+  },
83
+  "standardx": {
84
+    "ignore": [
85
+      "dist*"
86
+    ]
87
+  },
88
+  "version": "1.0.0"
89
+}

+ 118
- 0
sass/app/_layout.scss View File

@@ -0,0 +1,118 @@
1
+html,
2
+app,
3
+body, {
4
+  width: 100%; height: 100%;
5
+}
6
+
7
+app {
8
+  min-height: 100vh;
9
+  display: flex;
10
+  flex-direction: column;
11
+}
12
+
13
+body {
14
+  @include font-sans;
15
+  min-width: 320px; min-height: 100vh;
16
+
17
+  color: $lbry-black;
18
+  display: flex;
19
+  flex-direction: column;
20
+  font-size: 12px;
21
+  overflow-x: hidden;
22
+  position: relative;
23
+  z-index: 0;
24
+
25
+  &::before {
26
+    top: 0; right: 0;
27
+    bottom: 0; left: 0;
28
+
29
+    background-color: $lbry-black;
30
+    content: "";
31
+    position: fixed;
32
+    z-index: -1;
33
+  }
34
+}
35
+
36
+main {
37
+  @include clearfix;
38
+  flex: 1;
39
+  position: relative;
40
+}
41
+
42
+noscript {
43
+  @include center;
44
+  width: 100%; height: 100%;
45
+  top: 0; left: 0;
46
+
47
+  font-weight: 600;
48
+  line-height: 1.33;
49
+  position: fixed;
50
+  text-align: center;
51
+  z-index: 50;
52
+
53
+  span {
54
+    padding: 1rem;
55
+    background-color: $lbry-red-3;
56
+    color: $lbry-white;
57
+    font-size: 1rem;
58
+  }
59
+}
60
+
61
+code {
62
+  @include font-mono;
63
+}
64
+
65
+
66
+
67
+.inner-wrap {
68
+  max-width: 1000px;
69
+  margin-right: auto;
70
+  margin-left: auto;
71
+
72
+  @media (max-width: 900px) {
73
+    padding-right: 2rem;
74
+    padding-left: 2rem;
75
+  }
76
+
77
+  &::after {
78
+    @include clearfix;
79
+  }
80
+}
81
+
82
+.center {
83
+  margin-right: auto;
84
+  margin-left: auto;
85
+  text-align: center;
86
+}
87
+
88
+.flex-center {
89
+  align-items: center;
90
+  display: flex;
91
+  flex-direction: row;
92
+}
93
+
94
+.flex-row {
95
+  width: 100%;
96
+  display: flex;
97
+  flex-direction: row;
98
+  justify-content: space-between;
99
+}
100
+
101
+.heading-title {
102
+  padding: 0.2rem 1rem;
103
+
104
+  background-color: $lbry-black;
105
+  color: $lbry-white;
106
+  display: inline-block;
107
+  letter-spacing: 0.1rem;
108
+  line-height: 1.33;
109
+  margin-bottom: 1rem;
110
+  text-transform: lowercase;
111
+}
112
+
113
+
114
+
115
+::selection {
116
+  background-color: $lbry-yellow-3;
117
+  color: rgba($lbry-black, 0.95);
118
+}

+ 52
- 0
sass/app/components/_channel.scss View File

@@ -0,0 +1,52 @@
1
+channels {
2
+  display: block;
3
+  padding-top: 2rem;
4
+}
5
+
6
+channel {
7
+  cursor: pointer; //
8
+  display: block;
9
+  font-size: 6rem;
10
+  font-weight: 700;
11
+  padding-top: 0.5rem;
12
+  padding-bottom: 0.5rem;
13
+  position: relative;
14
+  text-transform: uppercase;
15
+  -webkit-text-stroke: 1px $lbry-white;
16
+
17
+  &:not(:hover) {
18
+    color: transparent;
19
+
20
+    span {
21
+      .name::after {
22
+        display: none;
23
+      }
24
+    }
25
+  }
26
+
27
+  &:hover {
28
+    color: $lbry-white;
29
+  }
30
+
31
+  span {
32
+    &.hash {
33
+      opacity: 0.15;
34
+      -webkit-text-stroke: 1px transparent;
35
+    }
36
+
37
+    &.name {
38
+      position: relative;
39
+      z-index: 1;
40
+
41
+      &::after {
42
+        width: calc(200% + 2rem); height: 2rem;
43
+        top: 2.7rem; left: -100%;
44
+
45
+        background-image: linear-gradient(135deg, $lbry-teal-2, $lbry-blue-3 100%);
46
+        content: "";
47
+        position: absolute;
48
+        z-index: -1;
49
+      }
50
+    }
51
+  }
52
+}

+ 17
- 0
sass/app/components/_navigation.scss View File

@@ -0,0 +1,17 @@
1
+header-navigation {
2
+  width: 20rem;
3
+  padding: 2rem 3rem;
4
+  top: 0; left: 0;
5
+
6
+  display: block;
7
+  position: fixed;
8
+  z-index: 3;
9
+}
10
+
11
+header-navigation-title {
12
+  color: $lbry-white;
13
+  display: block;
14
+  font-size: 2rem;
15
+  font-weight: 800;
16
+  letter-spacing: 0.05rem;
17
+}

+ 23
- 0
sass/bundle.scss View File

@@ -0,0 +1,23 @@
1
+@charset "utf-8";
2
+
3
+@import "@lbry/color/lbry-color";
4
+
5
+// Utilities
6
+@import "utilities/animation";
7
+@import "utilities/base";
8
+@import "utilities/mixins";
9
+
10
+// Components
11
+@import "app/components/channel";
12
+@import "app/components/navigation";
13
+
14
+// Partials
15
+
16
+// Pages
17
+
18
+// Plugins
19
+
20
+// User
21
+
22
+//
23
+@import "app/layout";

+ 19
- 0
sass/utilities/_animation.scss View File

@@ -0,0 +1,19 @@
1
+@keyframes fade-in {
2
+  from {
3
+    opacity: 0;
4
+  }
5
+
6
+  to {
7
+    opacity: 1;
8
+  }
9
+}
10
+
11
+@keyframes fade-out {
12
+  from {
13
+    opacity: 1;
14
+  }
15
+
16
+  to {
17
+    opacity: 0;
18
+  }
19
+}

+ 243
- 0
sass/utilities/_base.scss View File

@@ -0,0 +1,243 @@
1
+// sass-lint:disable no-important
2
+
3
+html {
4
+  box-sizing: border-box;
5
+  text-rendering: optimizeLegibility;
6
+
7
+  -moz-osx-font-smoothing: grayscale;
8
+  -webkit-font-smoothing: antialiased;
9
+  -webkit-text-size-adjust: 100%;
10
+}
11
+
12
+*,
13
+*::before,
14
+*::after {
15
+  margin: 0; padding: 0;
16
+
17
+  border: none;
18
+  box-sizing: inherit;
19
+  outline: 0;
20
+}
21
+
22
+[readonly] {
23
+  cursor: not-allowed;
24
+}
25
+
26
+a,
27
+area,
28
+button,
29
+[role="button"],
30
+input,
31
+label,
32
+select,
33
+summary,
34
+textarea {
35
+  // Remove touch delay on supported devices
36
+  touch-action: manipulation;
37
+}
38
+
39
+button,
40
+input,
41
+select,
42
+textarea {
43
+  background-color: transparent;
44
+  font-family: inherit;
45
+  font-size: inherit;
46
+  font-weight: inherit;
47
+
48
+  -moz-appearance: none;
49
+  -webkit-appearance: none;
50
+
51
+  &:disabled {
52
+    pointer-events: none;
53
+  }
54
+}
55
+
56
+h1,
57
+h2,
58
+h3,
59
+h4,
60
+h5,
61
+h6 {
62
+  font-weight: normal;
63
+}
64
+
65
+ol,
66
+ul {
67
+  list-style-position: inside;
68
+
69
+  > li {
70
+    list-style-position: inside;
71
+  }
72
+}
73
+
74
+ul {
75
+  list-style-type: none;
76
+}
77
+
78
+label {
79
+  &[for] {
80
+    cursor: pointer;
81
+  }
82
+}
83
+
84
+table {
85
+  border-collapse: collapse;
86
+  border-spacing: 0;
87
+}
88
+
89
+img {
90
+  max-width: 100%;
91
+  font-size: 0;
92
+
93
+  &::after {
94
+    width: 100%; height: 100%;
95
+    top: 0; left: 0;
96
+
97
+    background-color: $lbry-white;
98
+    background-image: url("../media/images/missing.png");
99
+    background-size: cover;
100
+    box-shadow: 0 0 1px 0 rgba($lbry-black, 0.3);
101
+    content: "";
102
+    display: block;
103
+    position: absolute;
104
+  }
105
+}
106
+
107
+a {
108
+  color: inherit;
109
+  text-decoration: none;
110
+}
111
+
112
+button {
113
+  background-color: transparent;
114
+  color: inherit;
115
+
116
+  &[type="button"]:not(:disabled),
117
+  &[type="submit"]:not(:disabled) {
118
+    cursor: pointer;
119
+  }
120
+}
121
+
122
+input {
123
+  background-color: transparent;
124
+  color: inherit;
125
+
126
+  &::placeholder {
127
+    color: inherit;
128
+    opacity: 0.3;
129
+  }
130
+
131
+  &:not(:disabled) {
132
+    color: inherit;
133
+  }
134
+
135
+  &:not([type="button"]),
136
+  &:not([type="checkbox"]),
137
+  &:not([type="file"]),
138
+  &:not([type="radio"]),
139
+  &:not([type="select"]),
140
+  &:not([type="submit"]) {
141
+    cursor: text;
142
+  }
143
+
144
+  &[type="button"]:not(:disabled),
145
+  &[type="checkbox"]:not(:disabled),
146
+  &[type="file"]:not(:disabled),
147
+  &[type="radio"]:not(:disabled),
148
+  &[type="select"]:not(:disabled),
149
+  &[type="submit"]:not(:disabled) {
150
+    cursor: pointer;
151
+  }
152
+
153
+  &::-webkit-search-cancel-button {
154
+    -webkit-appearance: none;
155
+  }
156
+}
157
+
158
+textarea {
159
+  width: 100%;
160
+  // border-color should be added in apps for blur/focus
161
+  border: 1px solid;
162
+
163
+  &:not([disabled]) {
164
+    resize: vertical;
165
+  }
166
+
167
+  &[disabled] {
168
+    resize: none;
169
+  }
170
+}
171
+
172
+@media print {
173
+  // Intelligent print styles
174
+  pre,
175
+  blockquote {
176
+    border: 1px solid #999 !important;
177
+    page-break-inside: avoid !important;
178
+  }
179
+
180
+  tr,
181
+  img {
182
+    page-break-inside: avoid !important;
183
+  }
184
+
185
+  img {
186
+    max-width: 100% !important;
187
+  }
188
+
189
+  @page {
190
+    margin: 0.5cm !important;
191
+  }
192
+
193
+  p,
194
+  h2,
195
+  h3 {
196
+    orphans: 3 !important;
197
+    widows: 3 !important;
198
+  }
199
+
200
+  h2,
201
+  h3 {
202
+    page-break-after: avoid !important;
203
+  }
204
+
205
+  thead {
206
+    display: table-header-group !important;
207
+  }
208
+
209
+  // Faster, more stable printing
210
+  * {
211
+    background: transparent !important;
212
+    color: #000 !important;
213
+    filter: none !important;
214
+    text-shadow: none !important;
215
+  }
216
+
217
+  p {
218
+    a {
219
+      &[href]::after { // Show hypertext data for links and abbreviations
220
+        content: " (" attr(href) ")" !important;
221
+      }
222
+
223
+      &[href^="javascript:"],
224
+      &[href^="#"] {
225
+        &::after {
226
+          content: "" !important;
227
+        }
228
+      }
229
+    }
230
+
231
+    abbr {
232
+      &[title]::after {
233
+        content: " (" attr(title) ")" !important;
234
+      }
235
+    }
236
+
237
+    a,
238
+    abbr {
239
+      text-decoration: underline !important;
240
+      word-wrap: break-word !important;
241
+    }
242
+  }
243
+}

+ 321
- 0
sass/utilities/_mixins.scss View File

@@ -0,0 +1,321 @@
1
+@mixin center {
2
+  align-items: center;
3
+  display: inline-flex;
4
+  justify-content: center;
5
+}
6
+
7
+@mixin clearfix {
8
+  clear: both;
9
+  content: "";
10
+  display: block;
11
+}
12
+
13
+@mixin ellipsis {
14
+  overflow: hidden;
15
+  text-overflow: ellipsis;
16
+  white-space: nowrap;
17
+}
18
+
19
+// Smart font include
20
+// Simply pass in the font-weight you want to use and the normal/italicized versions will be added
21
+// No more weighing down the front-end with references to unused weights
22
+@mixin font-face($font-weight, $relative-font-path, $font-name) {
23
+  @font-face {
24
+    font-family: $font-name;
25
+    font-style: normal;
26
+    font-weight: $font-weight;
27
+    src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2");
28
+  }
29
+
30
+  @font-face {
31
+    font-family: $font-name;
32
+    font-style: italic;
33
+    font-weight: $font-weight;
34
+    src: url("#{$relative-font-path}/#{$font-weight}i.woff2") format("woff2");
35
+  }
36
+}
37
+
38
+@mixin font-mono {
39
+  font-family: "Fira Code", "Input Mono", "Courier New", monospace;
40
+}
41
+
42
+@mixin font-sans {
43
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
44
+}
45
+
46
+@mixin font-serif {
47
+  font-family: Alegreya, Georgia, serif;
48
+}
49
+
50
+@mixin hide-text {
51
+  border: none;
52
+  color: transparent;
53
+  font: 0 / 0 a;
54
+  text-shadow: none;
55
+}
56
+
57
+// Cross-browser line-clamp support
58
+@mixin line-clamp(
59
+  $element-height: 2rem,
60
+  $row-count: 2,
61
+  $fade-color: $lbry-white,
62
+  $computed-position: relative
63
+) {
64
+  height: $element-height;
65
+  overflow: hidden;
66
+  position: $computed-position;
67
+
68
+  &::after {
69
+    width: 50%; height: calc(#{$element-height} / #{$row-count});
70
+    right: 0; bottom: 0;
71
+
72
+    background-image: linear-gradient(to right, rgba($lbry-white, 0), #{$fade-color} 80%);
73
+    content: "";
74
+    position: absolute;
75
+  }
76
+}
77
+
78
+@mixin no-user-select {
79
+  user-select: none;
80
+
81
+  -moz-user-select: none;
82
+  -webkit-user-select: none;
83
+}
84
+
85
+@mixin rendered-markdown {
86
+  h1 {
87
+    font-size: 3rem;
88
+  }
89
+
90
+  h2 {
91
+    font-size: 2.5rem;
92
+  }
93
+
94
+  h3 {
95
+    font-size: 2rem;
96
+  }
97
+
98
+  h4 {
99
+    font-size: 1.75rem;
100
+  }
101
+
102
+  h5 {
103
+    font-size: 1.5rem;
104
+  }
105
+
106
+  h6 {
107
+    font-size: 1.25rem;
108
+    letter-spacing: 0.1rem;
109
+    text-transform: uppercase;
110
+  }
111
+
112
+  p,
113
+  ol,
114
+  ul {
115
+    margin-bottom: 1rem;
116
+    overflow: hidden;
117
+    text-overflow: ellipsis;
118
+  }
119
+
120
+  p {
121
+    &:empty {
122
+      display: none;
123
+    }
124
+
125
+    code {
126
+      padding: 0.2rem 0.5rem 0.15rem;
127
+      top: -1px;
128
+
129
+      background-color: $lbry-gray-9;
130
+      color: $lbry-white;
131
+      font-size: 0.8rem;
132
+      position: relative;
133
+    }
134
+  }
135
+
136
+  ol {
137
+    counter-reset: counter;
138
+    list-style-type: none;
139
+    padding-left: 1.5rem;
140
+
141
+    li {
142
+      position: relative;
143
+
144
+      &::before {
145
+        @include font-mono;
146
+        width: 1.5rem;
147
+        top: 0; left: -1.5rem;
148
+
149
+        content: counter(counter);
150
+        counter-increment: counter;
151
+        font-size: 0.8rem;
152
+        font-weight: 700;
153
+        line-height: 1.55rem;
154
+        position: absolute;
155
+      }
156
+    }
157
+  }
158
+
159
+  ul {
160
+    list-style-type: circle;
161
+  }
162
+
163
+  blockquote {
164
+    font-style: italic;
165
+    padding-left: 0.75rem;
166
+    position: relative;
167
+
168
+    &::before {
169
+      width: 3px; height: 100%;
170
+      top: 0; left: 0;
171
+
172
+      background-color: $lbry-gray-4; // TODO: Theme // Make linear-gradient instead
173
+      content: "";
174
+      position: absolute;
175
+    }
176
+  }
177
+
178
+  pre {
179
+    background-color: $lbry-gray-9;
180
+    color: $lbry-white;
181
+    letter-spacing: 0.025rem;
182
+    line-height: 1.33;
183
+    overflow-x: scroll;
184
+    position: relative;
185
+
186
+    code {
187
+      @include font-mono;
188
+      white-space: pre;
189
+
190
+      &[class]::after {
191
+        padding: 0.2rem 0.5rem;
192
+        right: 0; bottom: 0;
193
+
194
+        background-color: $lbry-white;
195
+        border-bottom: 1px solid $lbry-gray-9;
196
+        color: $lbry-gray-9;
197
+        content: attr(class);
198
+        font-size: smaller;
199
+        position: absolute;
200
+      }
201
+    }
202
+  }
203
+
204
+  figure {
205
+    margin-bottom: 1rem;
206
+    position: relative;
207
+
208
+    @media (min-width: 501px) {
209
+      width: calc((100% + 4.5rem) - 1px);
210
+      left: calc(-2.6rem + 1px);
211
+    }
212
+
213
+    @media (max-width: 500px) {
214
+      width: calc((100% + 4.5rem) + 1px);
215
+      left: calc(-2.6rem - 1px);
216
+    }
217
+
218
+    img {
219
+      width: 100%; height: 100%; max-height: 500px;
220
+
221
+      background-color: $lbry-gray-9;
222
+      object-fit: contain;
223
+    }
224
+  }
225
+
226
+  figcaption {
227
+    @include font-serif;
228
+    font-size: 0.8rem;
229
+    font-style: italic;
230
+    letter-spacing: 0.025rem;
231
+    padding-right: 1rem;
232
+    padding-left: 1rem;
233
+    text-align: center;
234
+  }
235
+
236
+  a:not(.no-style) {
237
+    color: $lbry-blue-5;
238
+    white-space: nowrap;
239
+
240
+    &:active,
241
+    &:focus,
242
+    &:hover {
243
+      text-decoration: underline;
244
+      text-decoration-skip: ink;
245
+
246
+      -webkit-text-decoration-skip: skip;
247
+    }
248
+  }
249
+}
250
+
251
+// Use CSS variables without upsetting Sass-Lint
252
+// https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190
253
+@mixin root-prop($prop: null, $value: null) {
254
+  @if ($prop and $value) {
255
+    #{$prop}: $value;
256
+  }
257
+}
258
+
259
+@mixin selection($background-color: $lbry-white, $text-color: $lbry-gray-9) {
260
+  &::selection {
261
+    background-color: $background-color;
262
+    color: $text-color;
263
+    text-shadow: none;
264
+  }
265
+
266
+  &::-moz-selection {
267
+    background-color: $background-color;
268
+    color: $text-color;
269
+    text-shadow: none;
270
+  }
271
+}
272
+
273
+@mixin shape {
274
+  &[shape="circle"],
275
+  &.circle {
276
+    clip-path: circle(50% at 50% 50%);
277
+    -webkit-clip-path: circle(50% at 50% 50%);
278
+  }
279
+
280
+  &[shape="diamond"],
281
+  &.diamond {
282
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
283
+    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
284
+  }
285
+
286
+  // square {} // do nothing
287
+
288
+  &[shape="triangle"],
289
+  &.triangle {
290
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
291
+    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
292
+  }
293
+
294
+  &[shape="triangle-alt"],
295
+  &.triangle-alt {
296
+    clip-path: polygon(50% 100%, 0 0, 100% 0);
297
+    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
298
+  }
299
+
300
+  img {
301
+    width: 100%; height: 100%;
302
+    object-fit: cover;
303
+  }
304
+}
305
+
306
+@mixin underline($text-color: $lbry-gray-9, $lbry-whitespace-color: $lbry-white) {
307
+  @include selection($text-color, $lbry-whitespace-color);
308
+
309
+  background-image: linear-gradient($lbry-whitespace-color, $lbry-whitespace-color), linear-gradient($lbry-whitespace-color, $lbry-whitespace-color), linear-gradient($text-color, $text-color);
310
+  background-position: 0 88%, 100% 88%, 0 88%;
311
+  background-repeat: no-repeat, no-repeat, repeat-x;
312
+  background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
313
+  box-decoration-break: clone;
314
+  display: inline;
315
+  text-decoration: none;
316
+  text-shadow: 0.03rem 0 $lbry-whitespace-color, -0.03rem 0 $lbry-whitespace-color, 0 0.03rem $lbry-whitespace-color, 0 -0.03rem $lbry-whitespace-color, 0.06rem 0 $lbry-whitespace-color, -0.06rem 0 $lbry-whitespace-color, 0.09rem 0 $lbry-whitespace-color, -0.09rem 0 $lbry-whitespace-color, 0.12rem 0 $lbry-whitespace-color, -0.12rem 0 $lbry-whitespace-color, 0.15rem 0 $lbry-whitespace-color, -0.15rem 0 $lbry-whitespace-color;
317
+
318
+  @-moz-document url-prefix() { // sass-lint:disable-line empty-args
319
+    background-position: 0 90%, 100% 90%, 0 90%;
320
+  }
321
+}

+ 46
- 0
scripts/generate-index.js View File

@@ -0,0 +1,46 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  N A T I V E
6
+
7
+import { readFile, writeFileSync } from "fs";
8
+import path from "path";
9
+
10
+//  I M P O R T
11
+
12
+import cwd from "cwd";
13
+
14
+
15
+
16
+//  E X P O R T
17
+
18
+export default options => {
19
+  let { input, output, template } = options;
20
+
21
+  input = path.join(cwd(), input);
22
+  output = path.join(cwd(), output);
23
+
24
+  return new Promise((resolve, reject) =>
25
+    readFile(input, (error, buffer) => {
26
+      if (error)
27
+        return reject(error);
28
+
29
+      let html = buffer.toString("utf8");
30
+
31
+      if (template) {
32
+        Object.keys(template).forEach(key => {
33
+          const regex = new RegExp(`<%= +${key} +%>`, "g");
34
+
35
+          html = html.replace(regex, template[key]);
36
+        });
37
+      }
38
+
39
+      try {
40
+        resolve(writeFileSync(output, html, "utf8"));
41
+      } catch(writeError) {
42
+        throw(writeError); // App cannot run without this so exit forcefully
43
+      }
44
+    })
45
+  );
46
+};

+ 115
- 0
scripts/rollup.base.js View File

@@ -0,0 +1,115 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  N A T I V E
6
+
7
+import fs from "fs";
8
+
9
+//  I M P O R T S
10
+
11
+import babel from "rollup-plugin-babel";
12
+import commonjs from "rollup-plugin-commonjs";
13
+// import cwd from "cwd";
14
+import { eslint } from "rollup-plugin-eslint";
15
+import pathmodify from "rollup-plugin-pathmodify";
16
+import replace from "rollup-plugin-replace";
17
+import resolve from "rollup-plugin-node-resolve";
18
+
19
+//  U T I L S
20
+
21
+import indexGenerator from "./generate-index";
22
+export const pkg = JSON.parse(fs.readFileSync("./package.json"));
23
+
24
+if (!pkg)
25
+  throw("Could not read package.json");
26
+
27
+const isProduction = process.env.NODE_ENV !== "development";
28
+
29
+// const apiUrl = isProduction ?
30
+//   "https://api.socii.network" :
31
+//   "http://localhost:2413";
32
+const { env } = process;
33
+const environment = process.env.NODE_ENV || "development";
34
+const external = Object.keys(pkg.dependencies || {});
35
+const globals = {};
36
+// const hubUrl = isProduction ?
37
+//   "https://hub.socii.network" :
38
+//   "http://localhost:1881";
39
+// const icons = fs.readFileSync(cwd() + "/dist/media/svg/icons.svg", "utf8")
40
+//   .replace("position:absolute", "position: absolute;");
41
+const input = env.INPUT || "index.js";
42
+const name = env.NAME || pkg.name;
43
+
44
+external.forEach(ext => {
45
+  switch(ext) {
46
+    case "mithril":
47
+      globals["mithril"] = "m";
48
+      break;
49
+
50
+    default:
51
+      globals[ext] = ext;
52
+      break;
53
+  }
54
+});
55
+
56
+indexGenerator({
57
+  input: "app/index.html",
58
+  output: "dist/index.html",
59
+  template: {
60
+    appColor: "#111",
61
+    // appIcons: icons,
62
+    appLocale: "en_US",
63
+    appName: "LBRY",
64
+    appTagline: "The future of content on the Internet",
65
+    ogImageHeight: "1024",
66
+    ogImageWidth: "768"
67
+  }
68
+});
69
+
70
+export const createConfig = ({ includeDepencies }) => ({
71
+  external: includeDepencies ? [] : external,
72
+  input,
73
+  output: {
74
+    name,
75
+    globals
76
+  },
77
+  plugins: [
78
+    // Resolve libs in node_modules
79
+    resolve({
80
+      browser: true,
81
+      main: true
82
+    }),
83
+
84
+    pathmodify({
85
+      aliases: [
86
+        {
87
+          id: "mithril/stream",
88
+          resolveTo: "node_modules/mithril/stream.js"
89
+        }
90
+      ]
91
+    }),
92
+
93
+    // Convert CommonJS modules to ES6, so they can be included in a Rollup bundle
94
+    commonjs({
95
+      include: "node_modules/**"
96
+    }),
97
+
98
+    eslint({
99
+      cache: true
100
+    }),
101
+
102
+    babel({
103
+      exclude: "node_modules/**"
104
+    }),
105
+
106
+    replace({
107
+      exclude: "node_modules/**",
108
+      // API: JSON.stringify(apiUrl),
109
+      ENV: JSON.stringify(environment),
110
+      // HUB: JSON.stringify(hubUrl),
111
+      PRODUCTION: JSON.stringify(isProduction)
112
+    })
113
+  ]
114
+});
115
+

+ 34
- 0
scripts/rollup.es.js View File

@@ -0,0 +1,34 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  U T I L S
6
+
7
+import { pkg, createConfig } from "./rollup.base.js";
8
+
9
+const { env } = process;
10
+
11
+// Use `false` if you are creating a library, or if you are including external script in html
12
+const includeDepencies = !!parseInt(env.DEPS, 10) || false;
13
+const baseConfig = createConfig({ includeDepencies });
14
+
15
+const targetConfig = Object.assign({}, baseConfig, {
16
+  output: Object.assign(
17
+    {},
18
+    baseConfig.output, {
19
+      file: `${env.DEST || pkg.main}.mjs`,
20
+      format: "es"
21
+    }
22
+  )
23
+});
24
+
25
+
26
+
27
+//  E X P O R T
28
+
29
+export default targetConfig;
30
+
31
+
32
+
33
+// Build to a module that has ES2015 module syntax but otherwise only syntax features that node supports
34
+// https://github.com/rollup/rollup/wiki/jsnext:main

+ 44
- 0
scripts/rollup.serve.js View File

@@ -0,0 +1,44 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T
6
+
7
+import serve from "rollup-plugin-serve";
8
+
9
+//  U T I L S
10
+
11
+import umdConfig from "./rollup.umd.js";
12
+
13
+const { env } = process;
14
+const serverPort = parseInt(env.PORT, 10);
15
+const targetConfig = Object.assign({}, umdConfig);
16
+const watchDir = env.WATCH_DIR;
17
+
18
+
19
+
20
+//  P R O G R A M
21
+
22
+if (!watchDir)
23
+  throw("Missing WATCH_DIR: no watch directory");
24
+
25
+if (!serverPort)
26
+  throw("Missing PORT: no http server port");
27
+
28
+targetConfig.plugins.push(
29
+  serve({
30
+    contentBase: watchDir,
31
+    historyApiFallback: true, // allows Mithril 404 to work!
32
+    port: serverPort
33
+  })
34
+);
35
+
36
+
37
+
38
+//  E X P O R T
39
+
40
+export default targetConfig;
41
+
42
+
43
+
44
+// Builds a UMD bundle that is updated with each file change

+ 43
- 0
scripts/rollup.umd.js View File

@@ -0,0 +1,43 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T
6
+
7
+import { uglify } from "rollup-plugin-uglify";
8
+
9
+//  U T I L S
10
+
11
+import { createConfig, pkg } from "./rollup.base.js";
12
+
13
+const { env } = process;
14
+const createSourceMap = env.SOURCEMAP !== undefined ?
15
+  !!parseInt(env.SOURCEMAP, 10) :
16
+  true;
17
+
18
+// Use `false` if you are creating a library, or if you are including external script in html
19
+const includeDepencies = !!parseInt(env.DEPS, 10) || false;
20
+const baseConfig = createConfig({ includeDepencies });
21
+
22
+const targetConfig = Object.assign({}, baseConfig, {
23
+  output: Object.assign(
24
+    {},
25
+    baseConfig.output, {
26
+      file: `${env.DEST || pkg.main}.js`,
27
+      format: "umd",
28
+      sourcemap: createSourceMap
29
+    }
30
+  )
31
+});
32
+
33
+targetConfig.plugins.push(uglify());
34
+
35
+
36
+
37
+//  E X P O R T
38
+
39
+export default targetConfig;
40
+
41
+
42
+
43
+// Build to an Universal Module Definition

+ 49
- 0
scripts/rollup.watch.js View File

@@ -0,0 +1,49 @@
1
+"use strict";
2
+
3
+
4
+
5
+//  I M P O R T S
6
+
7
+import livereload from "rollup-plugin-livereload";
8
+import serve from "rollup-plugin-serve";
9
+
10
+//  U T I L S
11
+
12
+import umdConfig from "./rollup.umd.js";
13
+
14
+const { env } = process;
15
+const serverPort = parseInt(env.PORT, 10);
16
+const targetConfig = Object.assign({}, umdConfig);
17
+const watchDir = env.WATCH_DIR;
18
+
19
+
20
+
21
+//  P R O G R A M
22
+
23
+if (!watchDir)
24
+  throw("Missing WATCH_DIR: no watch directory");
25
+
26
+if (!serverPort)
27
+  throw("Missing PORT: no http server port");
28
+
29
+targetConfig.plugins.push(
30
+  livereload({
31
+    port: 35729 + serverPort, // default LiveReload port + app port, so multiple instances of LR can run simultaneously
32
+    watch: watchDir
33
+  }),
34
+  serve({
35
+    contentBase: watchDir,
36
+    historyApiFallback: true, // allows Mithril 404 to work!
37
+    port: serverPort
38
+  })
39
+);
40
+
41
+
42
+
43
+//  E X P O R T
44
+
45
+export default targetConfig;
46
+
47
+
48
+
49
+// Builds a UMD bundle that is updated with each file change

Loading…
Cancel
Save