Setting Hyper with WSL 2

LocTran016 — Sun, 19 Sep 2021 12:11:06 +0000

Please note that I've only tested this on Ubuntu 20.04 and WSL 2

Steps

Install WSL 2 and install Linux dist following Microsoft's guide
Install ZSH on Linux dist following oh-my-zsh's guide:

sudo apt update && sudo apt upgrade -y
# Upgrade all available updates
sudo apt install zsh -y
# Install ZSH

Install oh-my-zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Install nvm following nvm official guide:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
# The v0.38.0 is going to be changed in the future, give a comment if it's outdated

Add the following to /.zshrc:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Install Node LTS using nvm:

echo "lts/*" > ~/.nvmrc # to default to the latest LTS version
nvm install 'lts/*' # Install latest Node LTS version
nvm alias default lts/* # Default to use Node LTS

Install Yarn, see more on Issue #3189 on yarn repo:

sudo apt remove cmdtest
sudo apt remove yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update
sudo apt-get install yarn

Install neofetch (Optional):

sudo apt install neofetch
# See more on https://github.com/dylanaraps/neofetch

Download and install follow the guide on hyper.is
Configure Hyper to make it work with WSL2:

PLEASE NOTE: I've figured the shellArgs using Window Terminal

//.hyper.js
shell: 'wsl.exe',
shellArgs: ['-d', 'Ubuntu-20.04'],

Install Powerlevel10 follow the [official guide]https://github.com/romkatv/powerlevel10k#get-started) (Optional):

Install the recommend fonts

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Set ZSH_THEME="powerlevel10k/powerlevel10k" in ~/.zshrc.
Set the fontFamily: '"MesloLGS NF"', in .hyper

Install some oh-my-zsh plugins (Optional):

# zsh-completions
git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions
# zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
# fasd
sudo apt install fasd -y

Add like this to ~/.zshrc:

plugins=(fasd git vscode yarn zsh-autosuggestions zsh-completions)

Install some plugins to Hyper (Optional):

Run the following in Hyper:

hyper i hyper-snazzy
hyper i hyper-opacity
hyper i hyperborder
hyper i hyper-tab-icons-plus
hyper i hyper-fading-scrollbar

// .hyper.js
config: {
// other configs
hyperBorder: {
            animate: true,
            borderRadiusOuter: '100px',
            borderRadiusOuter: '5px',
            borderWidth: '5px',
          },
          opacity: {
            focus: 1,
            blur: 0.92
          }
}

Add utteranc.es to Gatsby (React)

LocTran016 — Mon, 21 Dec 2020 15:26:36 +0000

Excuse me, I'm using Gatsby (React) and I'm trying my hard to add dark/light mode toggleable utturanc.es. My idea is that dark/light mode change, the state of utturancesComments will be updated and make it re-render but I haven't been succeed yet. Anyone could help me. Thanks

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export class Comments extends Component {
  constructor(props) {
    super(props);
    this.commentBox = React.createRef();
  }
  componentDidMount() {
    const scriptEl = document.createElement('script');
    scriptEl.async = true;
    scriptEl.src = 'https://utteranc.es/client.js';
    scriptEl.setAttribute('crossorigin', 'anonymous');
    scriptEl.setAttribute('repo', 'loctran016/comments');
    scriptEl.setAttribute('issue-term', 'title');
    scriptEl.setAttribute('id', 'utterance');
    scriptEl.setAttribute('theme', this.props.theme);
    scriptEl.setAttribute('label', 'Comments :tada: :tada: :tada:');
    this.commentBox.current.appendChild(scriptEl);
  }
  render() {
    return (
      <div id="comments">
        <h2 className="my-0">
          Comments
        </h2>
        <div ref={this.commentBox} className="comment-box" />
      </div>
    );
  }
}

Comments.propTypes = {
  theme: PropTypes.string.isRequired
}

export class utturancesComments extends Component {
  constructor(props) {
    super(props);
    if (typeof(document.getElementById("dark")) != 'undefined' && document.getElementById("dark") != null) {
      return this.state = {
        isDarkTheme: true
      }
    }
    else {
      return this.state = {theme:'icy-dark'}
    }
  }
  render () {
    const isDarkMode = typeof(document.getElementById("dark")) != 'undefined' && document.getElementById("dark") != null
    let uTheme;
    if (isDarkMode) {
      uTheme = 'icy-dark'
    }
    else {
      uTheme = 'github-light'
    }
    return (<Comments theme={uTheme} />)
  }
}

DEV Community: LocTran016

Setting Hyper with WSL 2

Steps

Add utteranc.es to Gatsby (React)