Browse Source

some nice updates

Joe Richardson 4 months ago
parent
commit
cb0d37a961

+ 0
- 7
.babelrc View File

@@ -1,7 +0,0 @@
1
-{
2
-  "presets": ["es2015", "react"],
3
-  "plugins": [
4
-    "syntax-object-rest-spread",
5
-    "transform-object-rest-spread"
6
-  ]
7
-}

+ 0
- 104
gulpfile.babel.js View File

@@ -1,104 +0,0 @@
1
-import gulp from "gulp";
2
-import cp from "child_process";
3
-import gutil from "gulp-util";
4
-import postcss from "gulp-postcss";
5
-import cssImport from "postcss-import";
6
-import cssnext from "postcss-cssnext";
7
-import BrowserSync from "browser-sync";
8
-import webpack from "webpack";
9
-import webpackConfig from "./webpack.conf";
10
-import svgstore from "gulp-svgstore";
11
-import svgmin from "gulp-svgmin";
12
-import inject from "gulp-inject";
13
-import cssnano from "cssnano";
14
-
15
-const browserSync = BrowserSync.create();
16
-const hugoBin = `./bin/hugo.${process.platform === "win32" ? "exe" : process.platform}`;
17
-const defaultArgs = ["-d", "../dist", "-s", "site"];
18
-
19
-if (process.env.DEBUG) {
20
-  defaultArgs.unshift("--debug")
21
-}
22
-
23
-gulp.task("hugo", (cb) => buildSite(cb));
24
-gulp.task("hugo-preview", (cb) => buildSite(cb, ["--buildDrafts", "--buildFuture"]));
25
-gulp.task("build", ["css", "fonts", "js", "favicon", "hugo"]);
26
-gulp.task("build-preview", ["css", "fonts", "js", "hugo-preview"]);
27
-
28
-gulp.task("css", () => (
29
-  gulp.src("./src/css/*.css")
30
-    .pipe(postcss([
31
-      cssImport({from: "./src/css/main.css"}),
32
-      cssnext(),
33
-      cssnano(),
34
-    ]))
35
-    .pipe(gulp.dest("./dist/css"))
36
-    .pipe(browserSync.stream())
37
-));
38
-
39
-gulp.task("fonts", () => (
40
-  gulp.src("./src/fonts/*")
41
-    .pipe(gulp.dest("./dist/fonts"))
42
-    .pipe(browserSync.stream())
43
-));
44
-
45
-gulp.task("favicon", () => (
46
-  gulp.src("site/static/favicon.ico")
47
-    .pipe(gulp.dest("./dist"))
48
-))
49
-
50
-gulp.task("js", (cb) => {
51
-  const myConfig = Object.assign({}, webpackConfig);
52
-
53
-  webpack(myConfig, (err, stats) => {
54
-    if (err) throw new gutil.PluginError("webpack", err);
55
-    gutil.log("[webpack]", stats.toString({
56
-      colors: true,
57
-      progress: true
58
-    }));
59
-    browserSync.reload();
60
-    cb();
61
-  });
62
-});
63
-
64
-gulp.task("svg", () => {
65
-  const svgs = gulp
66
-    .src("site/static/img/icons-*.svg")
67
-    .pipe(svgmin())
68
-    .pipe(svgstore({inlineSvg: true}));
69
-
70
-  function fileContents(filePath, file) {
71
-    return file.contents.toString();
72
-  }
73
-
74
-  return gulp
75
-    .src("site/layouts/partials/svg.html")
76
-    .pipe(inject(svgs, {transform: fileContents}))
77
-    .pipe(gulp.dest("site/layouts/partials/"));
78
-});
79
-
80
-gulp.task("server", ["hugo", "css", "fonts", "js", "svg"], () => {
81
-  browserSync.init({
82
-    server: {
83
-      baseDir: "./dist"
84
-    }
85
-  });
86
-  gulp.watch("./src/js/**/*.js", ["js"]);
87
-  gulp.watch("./src/css/**/*.css", ["css"]);
88
-  gulp.watch("./site/static/img/icons-*.svg", ["svg"]);
89
-  gulp.watch("./site/**/*", ["hugo"]);
90
-});
91
-
92
-function buildSite(cb, options) {
93
-  const args = options ? defaultArgs.concat(options) : defaultArgs;
94
-
95
-  return cp.spawn(hugoBin, args, {stdio: "inherit"}).on("close", (code) => {
96
-    if (code === 0) {
97
-      browserSync.reload("notify:false");
98
-      cb();
99
-    } else {
100
-      browserSync.notify("Hugo build failed :(");
101
-      cb("Hugo build failed");
102
-    }
103
-  });
104
-}

+ 116
- 0
gulpfile.js View File

@@ -0,0 +1,116 @@
1
+"use strict";
2
+
3
+var _gulp = _interopRequireDefault(require("gulp"));
4
+
5
+var _child_process = _interopRequireDefault(require("child_process"));
6
+
7
+var _gulpPostcss = _interopRequireDefault(require("gulp-postcss"));
8
+
9
+var _postcssImport = _interopRequireDefault(require("postcss-import"));
10
+
11
+var _postcssCssnext = _interopRequireDefault(require("postcss-cssnext"));
12
+
13
+var _browserSync = _interopRequireDefault(require("browser-sync"));
14
+
15
+var _gulpSvgstore = _interopRequireDefault(require("gulp-svgstore"));
16
+
17
+var _gulpSvgmin = _interopRequireDefault(require("gulp-svgmin"));
18
+
19
+var _gulpInject = _interopRequireDefault(require("gulp-inject"));
20
+
21
+var _cssnano = _interopRequireDefault(require("cssnano"));
22
+
23
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24
+
25
+// import gutil from "gulp-util";
26
+// import webpack from "webpack";
27
+// import webpackConfig from "./webpack.conf";
28
+var browserSync = _browserSync.default.create();
29
+
30
+var hugoBin = "./bin/hugo.".concat(process.platform === "win32" ? "exe" : process.platform);
31
+var defaultArgs = ["-d", "../dist", "-s", "site"];
32
+
33
+if (process.env.DEBUG) {
34
+  defaultArgs.unshift("--debug");
35
+}
36
+
37
+_gulp.default.task("hugo", function (cb) {
38
+  return buildSite(cb);
39
+});
40
+
41
+_gulp.default.task("hugo-preview", function (cb) {
42
+  return buildSite(cb, ["--buildDrafts", "--buildFuture"]);
43
+});
44
+
45
+_gulp.default.task("build", ["css", "fonts", "favicon", "hugo"]);
46
+
47
+_gulp.default.task("build-preview", ["css", "fonts", "hugo-preview"]);
48
+
49
+_gulp.default.task("css", function () {
50
+  return _gulp.default.src("./src/css/*.css").pipe((0, _gulpPostcss.default)([(0, _postcssImport.default)({
51
+    from: "./src/css/main.css"
52
+  }), (0, _postcssCssnext.default)(), (0, _cssnano.default)()])).pipe(_gulp.default.dest("./dist/css")).pipe(browserSync.stream());
53
+});
54
+
55
+_gulp.default.task("fonts", function () {
56
+  return _gulp.default.src("./src/fonts/*").pipe(_gulp.default.dest("./dist/fonts")).pipe(browserSync.stream());
57
+});
58
+
59
+_gulp.default.task("favicon", function () {
60
+  return _gulp.default.src("site/static/favicon.ico").pipe(_gulp.default.dest("./dist"));
61
+}); // gulp.task("js", (cb) => {
62
+//   const myConfig = Object.assign({}, webpackConfig);
63
+//   webpack(myConfig, (err, stats) => {
64
+//     if (err) throw new gutil.PluginError("webpack", err);
65
+//     gutil.log("[webpack]", stats.toString({
66
+//       colors: true,
67
+//       progress: true
68
+//     }));
69
+//     browserSync.reload();
70
+//     cb();
71
+//   });
72
+// });
73
+
74
+
75
+_gulp.default.task("svg", function () {
76
+  var svgs = _gulp.default.src("site/static/img/icons-*.svg").pipe((0, _gulpSvgmin.default)()).pipe((0, _gulpSvgstore.default)({
77
+    inlineSvg: true
78
+  }));
79
+
80
+  function fileContents(filePath, file) {
81
+    return file.contents.toString();
82
+  }
83
+
84
+  return _gulp.default.src("site/layouts/partials/svg.html").pipe((0, _gulpInject.default)(svgs, {
85
+    transform: fileContents
86
+  })).pipe(_gulp.default.dest("site/layouts/partials/"));
87
+});
88
+
89
+_gulp.default.task("server", ["hugo", "css", "fonts", "svg"], function () {
90
+  browserSync.init({
91
+    server: {
92
+      baseDir: "./dist"
93
+    }
94
+  }); // gulp.watch("./src/js/**/*.js", ["js"]);
95
+
96
+  _gulp.default.watch("./src/css/**/*.css", ["css"]);
97
+
98
+  _gulp.default.watch("./site/static/img/icons-*.svg", ["svg"]);
99
+
100
+  _gulp.default.watch("./site/**/*", ["hugo"]);
101
+});
102
+
103
+function buildSite(cb, options) {
104
+  var args = options ? defaultArgs.concat(options) : defaultArgs;
105
+  return _child_process.default.spawn(hugoBin, args, {
106
+    stdio: "inherit"
107
+  }).on("close", function (code) {
108
+    if (code === 0) {
109
+      browserSync.reload("notify:false");
110
+      cb();
111
+    } else {
112
+      browserSync.notify("Hugo build failed :(");
113
+      cb("Hugo build failed");
114
+    }
115
+  });
116
+}

+ 9322
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 0
- 10
package.json View File

@@ -14,15 +14,6 @@
14 14
   "author": "",
15 15
   "license": "MIT",
16 16
   "dependencies": {
17
-    "babel-eslint": "^6.1.2",
18
-    "babel-loader": "^6.2.4",
19
-    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
20
-    "babel-plugin-transform-class-properties": "^6.10.2",
21
-    "babel-plugin-transform-object-assign": "^6.8.0",
22
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
23
-    "babel-preset-es2015": "^6.9.0",
24
-    "babel-preset-react": "^6.11.1",
25
-    "babel-register": "^6.26.0",
26 17
     "browser-sync": "^2.13.0",
27 18
     "css-loader": "^0.23.1",
28 19
     "cssnano": "^3.9.1",
@@ -33,7 +24,6 @@
33 24
     "file-loader": "^0.9.0",
34 25
     "gotrue-js": "^0.9.1",
35 26
     "gulp": "^3.9.0",
36
-    "gulp-babel": "^6.1.2",
37 27
     "gulp-postcss": "^6.1.1",
38 28
     "gulp-util": "^3.0.7",
39 29
     "imports-loader": "^0.6.5",

+ 2
- 2
site/content/post/a-light-and-dark-theme-with-localstorage.md View File

@@ -17,7 +17,7 @@ The HTML, pretty straight forward:
17 17
 
18 18
 Nothing crazy going on here just your standard input with a label to trigger it (we hide the input in order to customise it).
19 19
 
20
-The CSS for the `checkbox`, again nothing bonkers but could potentially be cleaned up in the future.
20
+The CSS for the checkbox, again nothing bonkers but could potentially be cleaned up in the future.
21 21
 ```css
22 22
 .checkbox {
23 23
   position: absolute;
@@ -64,7 +64,7 @@ theme.addEventListener('click', function () {
64 64
 theme.checked = themeValue
65 65
 ```
66 66
 
67
-The way I have set my codebase up is that it only uses two colours for literally everything (with a few random RGBA's), this way I'm able to basically control this in the `html` tag i.e by just setting `background: black` and `color: white`.
67
+The way I have set my codebase up is that it only uses two colours for literally everything (with a few random RGBA's), this way I'm able to basically control this in the html tag i.e by just setting `background: black` and `color: white`.
68 68
 
69 69
 If the `.dark` class is applied then I can pretty much just add this bit of CSS and everything goes dark:
70 70
 

+ 0
- 26
site/layouts/_default/rss.xml View File

@@ -1,26 +0,0 @@
1
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
2
-  <channel>
3
-    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
4
-    <link>{{ .Permalink }}</link>
5
-    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
6
-    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
7
-    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
8
-    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
9
-    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
10
-    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
11
-    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
12
-    {{ with .OutputFormats.Get "RSS" }}
13
-        {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
14
-    {{ end }}
15
-    {{ range .Pages }}
16
-    <item>
17
-      <title>{{ .Title }}</title>
18
-      <link>{{ .Permalink }}</link>
19
-      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
20
-      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
21
-      <guid>{{ .Permalink }}</guid>
22
-      <description>{{ .Content | html }}</description>
23
-    </item>
24
-    {{ end }}
25
-  </channel>
26
-</rss>

+ 2
- 2
site/layouts/index.html View File

@@ -11,7 +11,7 @@
11 11
   {{ range first 7 (where .Pages "Type" "!=" "page") }}
12 12
     {{ if isset .Params "external_url" }}
13 13
     <article class="article">
14
-      <header class="db mb- df jcb aic">
14
+      <header class="db mb--small df jcb aic">
15 15
         <h3 class="ellipsis"><a class="fs14 fw-bold link" target="_blank" href="{{.Params.external_url}}">{{.Title}}<i class="external"></i></a>
16 16
         </h3>
17 17
         <time class="fs12 fw-medium c-secondary dt o5 nowrap ml">{{ .Date.Format "Monday, 2 Jan 2006" }}</time>
@@ -21,7 +21,7 @@
21 21
     {{ else }}
22 22
 
23 23
     <article class="article">
24
-      <header class="db mb- df jcb aic">
24
+      <header class="db mb--small df jcb aic">
25 25
         <h3 class="elippis"><a class="fs14 fw-bold link" href="{{.Permalink}}">{{.Title}}</a></h3>
26 26
         <time class="fs12 fw-medium c-secondary dt o5 nowrap ml">{{ .Date.Format "Monday, 2 Jan 2006" }}</time>
27 27
       </header>

+ 4
- 1
site/layouts/partials/footer.html View File

@@ -7,13 +7,16 @@
7 7
     <a target="_blank" class="link mr-" href="//twitter.com/joerichn">TW</a>
8 8
   </li>
9 9
   <li>
10
-    <a href="/index.xml" class="link" type="application/rss">RSS</a>
10
+    <a href="/post/index.xml" class="link" type="application/rss">RSS</a>
11 11
   </li>
12 12
 </ul>
13 13
 </main>
14 14
 
15 15
 <span class="js-top top df aic jcc fs12 ttu">Top</span>
16 16
 
17
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
18
+<script>hljs.initHighlightingOnLoad();</script>
19
+
17 20
 <script>
18 21
   function setActive() {
19 22
       links = document.getElementById('nav').getElementsByTagName('a');

+ 3
- 1
site/layouts/partials/meta.html View File

@@ -20,9 +20,11 @@
20 20
   <link rel="stylesheet" href="/css/main.css" />
21 21
   <link rel="icon" href="/img/favicon.png" type="image/x-icon">
22 22
 
23
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/github-gist.min.css">
24
+
23 25
 
24 26
   {{ if .RSSLink -}}
25
-  <link href="{{ .RSSLink }}" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}">
27
+  <link href="/post/index.xml" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}">
26 28
   {{- end }}
27 29
   {{ .Hugo.Generator }}
28 30
 </head>

+ 42
- 17
src/css/main.css View File

@@ -14,7 +14,7 @@
14 14
   --base-font-size: 18px;
15 15
   --base-width: 48rem;
16 16
   --base-font-family:  'Moderat', sans-serif;
17
-  --base-font-family-mono: monospace;
17
+  --base-font-family-mono: "Andale Mono", AndaleMono, monospace;
18 18
   --base-gutter: 42px;
19 19
   --color-white: #ffffff;
20 20
   --color-dark: #232323;
@@ -69,15 +69,18 @@ hr {
69 69
   background-size: contain;
70 70
 }
71 71
 
72
+ol li,
72 73
 ul li {
73 74
   position: relative;
74 75
   padding-left: calc(var(--base-gutter) / 3);
75 76
 }
76 77
 
77 78
 ul li:before,
78
-ul li:after {
79
+ul li:after,
80
+ol li:before,
81
+ol li:after {
79 82
   position: absolute;
80
-  top: 10px;
83
+  top: 40%;
81 84
   left: 0;
82 85
   background: var(--color-accent);
83 86
   content: "";
@@ -85,19 +88,16 @@ ul li:after {
85 88
   height: 10px;
86 89
 }
87 90
 
88
-ul li:before {
91
+ul li:before,
92
+ol li:before {
89 93
   transform: rotate(45deg);
90 94
 }
91 95
 
92
-ul li:after {
96
+ul li:after,
97
+ol li:after {
93 98
   transform: rotate(-45deg);
94 99
 }
95 100
 
96
-ol {
97
-  margin-bottom: var(--base-gutter);
98
-  padding-left: calc(var(--base-gutter) / 2.5);
99
-}
100
-
101 101
 ul,
102 102
 ol {
103 103
   list-style: none;
@@ -117,22 +117,45 @@ blockquote p {
117 117
 }
118 118
 
119 119
 pre {
120
+  max-width: 650px;
120 121
   margin-bottom: var(--base-gutter);
121
-  background: var(--color-secondary);
122 122
   padding: 10px;
123
+  border: 4px solid var(--color-accent) !important;
124
+  box-shadow: 10px 10px 0 var(--color-accent) !important;
123 125
 }
124 126
 
125 127
 pre code {
126
-  background: var(--color-secondary);
128
+  padding: 15px !important;
129
+  font-size: 15px !important;
130
+  color: var(--color-white);
127 131
   font-family: var(--base-font-family-mono);
132
+  border-radius: 0 !important;
128 133
 }
129 134
 
130 135
 code {
131
-  background: var(--color-secondary);
132
-  padding: 4px;
133
-  color: var(--color-light);
134 136
   white-space: pre-wrap;
135
-  font-family: var(--base-font-family-mono);
137
+  font-family: var(--base-font-family);
138
+  font-size: 16px;
139
+  font-weight: var(--font-weight-bold);
140
+  letter-spacing: 0;
141
+  position: relative;
142
+  color: var(--color-white);
143
+}
144
+
145
+p > code::before {
146
+  position: absolute;
147
+  top: 0;
148
+  left: 0;
149
+  bottom: 0;
150
+  right: 0;
151
+  margin: auto;
152
+  width: 100%;
153
+  height: 100%;
154
+  background: var(--color-accent);
155
+  content: "";
156
+  z-index: -9999;
157
+  transform: skew(-2deg, -2deg);
158
+  padding: 2px;
136 159
 }
137 160
 
138 161
 .ellipsis {
@@ -158,6 +181,8 @@ code {
158 181
 .mla { margin-left: auto; }
159 182
 .mt0 { margin-top: 0; }
160 183
 
184
+.mb--small { margin-bottom: 10px; }
185
+
161 186
 .pt { padding-top: var(--base-gutter); }
162 187
 .pt2 { padding-top: calc(var(--base-gutter) * 2); }
163 188
 .pb { padding-bottom: var(--base-gutter); }
@@ -220,7 +245,7 @@ code {
220 245
 }
221 246
 
222 247
 *:focus {
223
-  outline: 3px solid var(--color-accent);
248
+  outline: 0;
224 249
 }
225 250
 
226 251
 a,