Skip to content
Permalink
Browse files

Replace PostCSS with SCSS, build with hugo pipes with no dependencies.

  • Loading branch information...
laozhu committed Dec 14, 2018
1 parent 6bf0bb5 commit 945bd4eee0e1bbbf7c4a63896253c54ec1e2a006
Showing with 769 additions and 413 deletions.
  1. +5 βˆ’0 .prettierrc
  2. +45 βˆ’33 README.md
  3. +19 βˆ’7 assets/scripts/index.js
  4. +1 βˆ’1 assets/styles/main.scss
  5. +39 βˆ’39 assets/styles/partials/_content.scss
  6. +11 βˆ’11 assets/styles/partials/_header.scss
  7. +5 βˆ’5 assets/styles/partials/_links.scss
  8. +20 βˆ’20 assets/styles/partials/_misc.scss
  9. +6 βˆ’6 assets/styles/partials/_paginator.scss
  10. +9 βˆ’9 assets/styles/partials/{_post.scss β†’ _posts.scss}
  11. +345 βˆ’3 assets/styles/partials/_reset.scss
  12. +8 βˆ’8 assets/styles/partials/_resume.scss
  13. +23 βˆ’19 assets/styles/partials/_skeleton.scss
  14. +7 βˆ’7 assets/styles/partials/_summary.scss
  15. +12 βˆ’12 assets/styles/partials/_table.scss
  16. +7 βˆ’7 assets/styles/partials/_terms.scss
  17. +75 βˆ’80 assets/styles/partials/_variables.scss
  18. BIN {assets/images β†’ exampleSite/content/media}/cover.jpg
  19. +73 βˆ’73 exampleSite/content/post/creating-a-new-theme.md
  20. +26 βˆ’7 exampleSite/content/post/hugo-nuo-post-preview.md
  21. +1 βˆ’1 exampleSite/content/post/hugoisforlovers.md
  22. +23 βˆ’0 exampleSite/data/links.toml
  23. +0 βˆ’23 exampleSite/data/links.yml
  24. +2 βˆ’1 layouts/404.html
  25. +4 βˆ’1 layouts/partials/head.html
  26. +3 βˆ’3 layouts/shortcodes/video.html
  27. +0 βˆ’14 package.json
  28. +0 βˆ’16 postcss.config.js
  29. +0 βˆ’4 resources/_gen/assets/js/scripts/index.js_d3f53f09220d597dac26fe7840c31fc9.content
  30. +0 βˆ’1 resources/_gen/assets/js/scripts/index.js_d3f53f09220d597dac26fe7840c31fc9.json
  31. +0 βˆ’1 resources/_gen/assets/scss/styles/main.scss_952a4e66eaed7fdbc9e3302cc3fdf069.content
  32. +0 βˆ’1 resources/_gen/assets/scss/styles/main.scss_952a4e66eaed7fdbc9e3302cc3fdf069.json
@@ -0,0 +1,5 @@
{
"printWidth": 100,
"singleQuote": true,
"trailingComma": "all"
}
@@ -15,6 +15,9 @@ Inside the folder of your Hugo site run:
```bash
$ cd themes
$ git clone https://github.com/laozhu/hugo-nuo
# Change theme field to 'hugo-nuo' in your config.toml
# Or just copy exampleSite/config.toml
```

_For more information read the official [setup guide](https://gohugo.io/overview/installing/) of Hugo._
@@ -55,10 +58,10 @@ Or you can add some other page to menu in page's front matter:

```markdown
---
title: "Links"
title: 'Links'
date: 2017-08-02
layout: "links"
menu: "main"
layout: 'links'
menu: 'main'
weight: 40
---
```
@@ -90,6 +93,10 @@ The following social network icons are available:
zhihu = "zhihu_username"
douban = "douban_username"
bilibili = "bilibili_id_number"
codesandbox = "codesandbox_username"
stackoverflow = "stackoverflow_username"
npm = "npm_username"
reddit = "reddit_username"
```

You can choose someone to display, the recommend number is 7 icons.
@@ -194,28 +201,28 @@ Change the content of `links.md`, set page layout to `links`, If you want to add

```markdown
---
title: "Links"
title: 'Links'
date: 2017-08-02
layout: "links"
menu: "main"
layout: 'links'
menu: 'main'
weight: 40
---
```

The links page read data from `data/link.yml` file, now you can add friend's links there. The format looks like:

```yaml
01_link:
title: chekun's blog
link: https://chekun.me
avatar: /media/links/chekun.jpg
description: A full-stack PHP developer
02_link:
title: Boof Wang
link: http://boof.wang
avatar: /media/links/wangbo.jpg
description: Another full-stack PHP developer
```toml
[chekun]
title = "chekun's blog"
link = "https://chekun.me"
avatar = "/media/links/chekun.jpg"
description = "A full-stack developer"
[wangbo]
title = "Boof Wang"
link = "http://boof.wang"
avatar = "/media/links/wangbo.jpg"
description = "Another full-stack developer"
```

The links page need friend's avatar, finally you should add friend's avatar to `content/media/links` directory and link to avatar in the `links.yml` file.
@@ -233,10 +240,10 @@ Change the content of `about.md`, set page layout to `about`, If you want to add

```markdown
---
title: "About"
title: 'About'
date: 2017-08-02
layout: "about"
menu: "main"
layout: 'about'
menu: 'main'
weight: 50
comments: false
---
@@ -270,21 +277,25 @@ The resume page will be located at `/resume` off your website root. Different
from the about page, the resume page is intended as a one pager that you
can print out for job hunting.

## Build
## Medium Zoom (New)

> **⚠️ Big Change**
>
> This theme has been using hugo pipes instead of webpack now.
If you want medium-like photo zoom in your post, you can add `zoomable` class to your `img` or `figure` tag, just something like below:

I use Hugo pipes and [PostCSS](https://gohugo.io/hugo-pipes/postcss/) to tranpile CSS, you should install global postcss-cli package and local devDependencies in `package.json` first if you want to cutomize the `./assets/styles` css files.
```html
<img src="/media/posts/hugo-nuo-post-preview/01.jpg" class="zoomable">
```

```bash
$ npm install -g postcss-cli # yarn global add postcss-cli
$ cd themes/hugo-nuo
$ npm install # yarn
```markdown
{{% figure src="/media/posts/hugo-nuo-post-preview/01.jpg" alt="θΏ™ζ˜―δΈ€εͺζ’…θŠ±ιΉΏ" title="ζ˜Ύη„ΆοΌŒθΏ™ζ˜―δΈ€εͺζ’…θŠ±ιΉΏ" class="zoomable" %}}
```

I use [ImageOptim](https://imageoptim.com/) to make images load faster, you should install this app before you run `yarn imagemin` script.
## Build

> **⚠️ Big Change**
>
> This theme has been using hugo pipes instead of webpack now, no build package needed now.
I use [ImageOptim](https://imageoptim.com/) to make images load faster, I recommend this tool to you.

_From Hugo 0.28, the default syntax hightlighter in Hugo is [Chroma](https://github.com/alecthomas/chroma); it is built in Go and is really, really fast – and for the most important parts compatible with [Pygments](http://pygments.org/)._

@@ -299,16 +310,17 @@ Run hugo gen `chromastyles -h` for more options. See <https://help.farbox.com/py
In order to see your site in action, run Hugo's built-in local server.

```bash
$ hugo server -w
$ hugo server
```

Now enter [localhost:1313](http://localhost:1313) in the address bar of your browser.

## Credits

- []()
- [Video.js](http://videojs.com/)
- [MathJax](https://www.mathjax.org/)
- [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
- [BootCDN](http://www.bootcdn.cn/)
- [jsDelivr](https://www.jsdelivr.com/)

Also thanks to [Steve Francia](https://github.com/spf13) for creating [Hugo](https://gohugo.io/) and the awesome community around the project.
@@ -8,21 +8,32 @@ const socialMenu = document.querySelector('.social-menu');
const toTopBtn = document.querySelector('.to-top');

// Site and social menu toggle
if (menuToggle) {
menuToggle &&
menuToggle.addEventListener('click', () => {
siteMenu.classList.toggle('collapsed');
socialMenu.classList.toggle('collapsed');
menuIcon.classList.toggle('icon-menu');
menuIcon.classList.toggle('icon-close');
});
}

// Medium zoom init
mediumZoom(document.querySelectorAll('.zoomable > img, img.zoomable'));

// Random emoji for 404 error message.
const randomErrorEmoji = () => {
const error = document.getElementsByClassName('error-emoji')[0];
const emojiArray = [
'\\(o_o)/', '(o^^)o', '(ΛšΞ”Λš)b', '(^-^*)', '(β‰₯o≀)', '(^_^)b', '(Ξ‡_Ξ‡)',
'(=\'X\'=)', '(>_<)', '(;-;)', '\\(^Π”^)/',
'\\(o_o)/',
'(o^^)o',
'(ΛšΞ”Λš)b',
'(^-^*)',
'(β‰₯o≀)',
'(^_^)b',
'(Ξ‡_Ξ‡)',
"(='X'=)",
'(>_<)',
'(;-;)',
'\\(^Π”^)/',
];
if (error) {
const errorEmoji = emojiArray[Math.floor(Math.random() * emojiArray.length)];
@@ -52,6 +63,7 @@ window.addEventListener('scroll', () => {

// Smooth Scroll to top when click toTopBtn
const scroll = new SmoothScroll('a[href*="#"]');
toTopBtn.addEventListener('click', () => {
scroll.animateScroll(0);
});
toTopBtn &&
toTopBtn.addEventListener('click', () => {
scroll.animateScroll(0);
});
@@ -5,7 +5,7 @@
@import 'partials/header';
@import 'partials/summary';
@import 'partials/paginator';
@import 'partials/post';
@import 'partials/posts';
@import 'partials/content';
@import 'partials/shortcodes';
@import 'partials/table';

0 comments on commit 945bd4e

Please sign in to comment.
You can’t perform that action at this time.