codebytere/codebytere.github.io

personal website

codebytere's Personal Website

An interactive cli that allows you to learn about me by navigating around a terminal emulator.

Built with JavaScript & less.

codebytere.github.io's Issues

`..` has weird semantics

.., which should be "1 directory above cwd" seems to actually have different semantics. Moreover, few other issues.

To repro:

1. cd projects
2. clear
3. Run the commands in the screenshot

Issues:

1. After clear, it says I'm in root/, even though I'm actually still in projects/. The ls verifies I'm in projects/ and then lists the files there
2. ls .. should list files in the parent directory, but actually lists files in the current directory (like ls .) which leads me to believe .. has the same semantics of .
3. cd .. says "not a valid directory" even though, it should either (according to issue 2), not change directories and just stay in the current one without an error, or it should actually go to root/ according to standard semantics for this

Known workaround:
Refresh 😂

History "undefined" bug

History has little bug, even on startup, when pressing up arrow twice it shows line "undefined".

Very nice site by the way : )

Installation and Question

@codebytere,
I will not lie this is a really cool project!!! which leads me to my question would it be cool with you applying this project to my portfolio nicotravassos.co.za which is currently a dead link because I cannot come up with something cool like this 😢.

Second could you kindly add to the README how would I go by publishing this as a production version on a naked Ubuntu server? Requirements and commands would be nice 😋

Thanks again 🤗

Text is invisible while minimizing and maximizing the shell

ls does not understand argument

Hi ! The ls command don't work as expected

Problem

ls command don't show content of directory when directory is specified as an argument

Expected

root$ ls skills/
proficient.txt familiar.txt

Terminal overflowing the footer

The terminal in the website https://codebyte.re/ is overflowing the footer at 100% zoom and above. Up to 90% zoom it's working fine.I have tried to correct it in my GitHub Page https://debjit-mandal.github.io , it's now fine up to 110% zoom.

In the styles folder in main.less :
.terminal-window{
      top: 15vh;
}
.footer{
  bottom: 0;
}

[Bug] Prompt path incorrect after clearing console

Despite the current directory we're in, after the "clear" command the prompt will always show that we're in "root".

Steps to reproduce:
In the terminal, type

1. "cd projects" or "cd skills"
2. "clear"

Nevertheless, great project! I've learned a lot by browsing your code structure and implementing more advanced options for "ls" and "cd". If you're interested, you can check out my fork.

Add support for tab auto complete :)

command history traversal is buggy

• Sometimes "undefined" comes up when up arrow key is pressed (Happens because localstorage is storing historyIndex as a String. So instead of getting added 1 is being appended to historyIndex)
• Undefined index sometimes as historyIndex becomes equal to -1 or n due to the logic used
• Repitation of command at 0 index or n-1 index due to the logic used.
• Down arrow traversal even after typing

n is the size of history array

I will make a pull request to fix this 😃

Update Ideas

I know you haven't put any updates out for your personal website in a long time. I just thought I would suggest some changes when you have time, and if you want to make them.

Fullscreen shouldn't completely remove the frame.

Remove position fixed from terminal window

.terminal-window.fullscreen {
  ...
  /* position: fixed; */
  ...
}

Remove top 0 from terminal window

.terminal-window.fullscreen #terminal {
  /* top: 0; */
}

Animate the window resizing

.terminal-window {
  ...
  transition: all 0.5s ease;
}

Adding functionality to the minimize button

Add css minimized state

.terminal-window.minimized {
    height: 30px;
    top: calc(100vh - 38px);
    width: 250px;
}

Add the pointer while hovering the minimized button

.terminal-window header .button.yellow {
    ...
    cursor: pointer;
}

Add functionality to the button

  ...
  const registerMinimizedToggle = () => {
      $('.button.yellow').click(() => {
        $('.terminal-window').toggleClass('minimized')
      })
    }
  ...
  $(() => {
    ...
    registerMinimizedToggle()
    ...
  }

Footer looks nice when it matches the sitewide font.

Change Lato for Menlo, add enough room from the bottom for the minimized state, and also make your position absolute so that the footer is actually centered and not off by a wee bit.

.footer {
      position: absolute;
      bottom: 40px;
      left: 0;
      right: 0;
      text-align: center;
      line-height: 0.1px;
      color: white;
      font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
}

Make case insensitive

It's sucks to type Clear, and it throws an error. "Clear" and "clear" should be same.

why can we cat other Directory's files

we are able to cat resume.txt while in struct

Mobile terminal too small

The terminal is too small on mobile. Make it longer than wide for small screens.

Portfolio page example

Hi @codebytere,

Check out my version of an interactive command-line interface portfolio page.
Maybe it make good use to you as a snippet for your current portfolio page?

Site code can be found here

Reflect actual file structure

I'm not a js Dev, so I don't know if this is possible, but is it possible to reflect actual file locations in the repo? If it is not possible to do so dynamically, what about statically? Build a file map at "compile" time which holds a XML tree. Client side js queries the XML and parses for files. Rest remains same.

cd and ls need to be changed drastically, but it should solve the cd .. problems

The "cd .." command doesn't work on the terminal

Hi,
the command in object doesn't work. Besides add a README.md more clear in order to install and use this repository.
You can read for example a my README.md project : https://github.com/amanganiello90/java-angular-web-app

Thanks

Footer can overlap primary cli ui

The footer can overlap the primary cli UI, and it should perhaps not do so. I'm less partial to how this is handled, but it should be handled more gracefully than it is now.

Update cli shell inputs to not use spellchecking

Enforce HTTPS?

The site can currently be browsed using plain http.

Since it's hosted on GH pages, forcing HTTPS should be trivial to enable.

Cheers!

https://docs.github.com/en/pages/getting-started-with-github-pages/securing-your-github-pages-site-with-https#enforcing-https-for-your-github-pages-site

cat does not understand path argument

Observed:

root $ cat skills/proficient.txt
Error: file not found in current directory

Expected:

The file content is displayed from a directory different from pwd

Terminal 2.0

https://terminal.jcubic.pl

Check this link out version 2.0 with lots features but not sure if it’s the same library you use.

See example
https://codepen.io/jcubic/pen/WZvYGj

This will fix browser responsive currently when I open your page on Firefox the cursor is in middle of terminal until I start typing.

localStorage usage is buggy

Cool site. Seems the usage of localStorage is buggy though. In particular, in this line:

codebytere.github.io/js/shell.js

Line 42 in 3d5854b

if (localStorage.inHistory && localStorage.historyIndex < history.length) {

localStorage.inHistory will always evaluate to be true. That's because everything put into localStorage is coerced to a string:

The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).

So this line:

codebytere.github.io/js/shell.js

Line 12 in 3d5854b

localStorage.inHistory = false // To prevent down arrow traversal when not required

is actually setting inHistory to the string "false", and Boolean("false") === true.

Doesn't look like your usage of localStorage persists between page loads (everything resets) so there's no real need to use it.