diff options
| author | Craig Jennings <craigmartinjennings@gmail.com> | 2024-03-24 14:41:32 -0500 |
|---|---|---|
| committer | Craig Jennings <craigmartinjennings@gmail.com> | 2024-03-24 14:41:32 -0500 |
| commit | 4aed6ea63ae93704b5d4cc07b528a0dd70a5d752 (patch) | |
| tree | d7610e41ff54da3f340cec1c86134c189a44db8a | |
initial commit; forked from https://github.com/Yukuro/hugo-theme-shell
59 files changed, 1295 insertions, 0 deletions
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..dd84ea7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,38 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - OS: [e.g. iOS] + - Browser [e.g. chrome, safari] + - Version [e.g. 22] + +**Smartphone (please complete the following information):** + - Device: [e.g. iPhone6] + - OS: [e.g. iOS8.1] + - Browser [e.g. stock browser, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..bbcbbe7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,20 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: '' +assignees: '' + +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. diff --git a/.github/workflows/only-build.yaml b/.github/workflows/only-build.yaml new file mode 100644 index 0000000..46ee60b --- /dev/null +++ b/.github/workflows/only-build.yaml @@ -0,0 +1,36 @@ +name: only-build +on: + workflow_dispatch: + branches: + - master + schedule: + - cron: '0 3 * * *' + +jobs: + build-hugo: + runs-on: ubuntu-latest + concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + steps: + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: 'latest' + extended: true + + - name: Setup Go + uses: actions/setup-go@v4.0.0 + with: + go-version: '^1.21' + + - name: SetUp Env + run: hugo new site testenv + + - name: Set theme + uses: actions/checkout@v3 + with: + path: ./testenv/themes/hugo-theme-shell + + - name: Build + run: hugo --minify -t hugo-theme-shell + working-directory: ./testenv diff --git a/.github/workflows/preview.yaml b/.github/workflows/preview.yaml new file mode 100644 index 0000000..fd900ae --- /dev/null +++ b/.github/workflows/preview.yaml @@ -0,0 +1,56 @@ +name: preview +env: + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} +on: + push: + branches-ignore: + - master + pull_request: + +jobs: + deploy-preview: + runs-on: ubuntu-latest + concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + steps: + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: 'latest' + extended: true + + - name: Setup Go + uses: actions/setup-go@v4.0.0 + with: + go-version: '^1.21' + + - name: Install Vercel CLI + run: npm install --global vercel@latest + + - name: SetUp Env + run: hugo new site testenv + + - name: Set theme + uses: actions/checkout@v3 + with: + path: ./testenv/themes/hugo-theme-shell + + - name: Build + run: hugo --minify -t hugo-theme-shell + working-directory: ./testenv + + - name: Pull Vercel Environment Information + run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} --cwd ./testenv + + - name: Build Project Artifacts + run: vercel build --token=${{ secrets.VERCEL_TOKEN }} --cwd ./testenv + + - name: Deploy Project Artifacts to Vercel + run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} --cwd ./testenv + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./testenv/public diff --git a/.github/workflows/production.yaml b/.github/workflows/production.yaml new file mode 100644 index 0000000..67efd41 --- /dev/null +++ b/.github/workflows/production.yaml @@ -0,0 +1,57 @@ +name: production +env: + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} +on: + push: + branches: + - master + +jobs: + deploy-production: + runs-on: ubuntu-latest + concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + steps: + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2 + with: + hugo-version: 'latest' + extended: true + + - name: Setup Go + uses: actions/setup-go@v4.0.0 + with: + go-version: '^1.21' + + - name: Install Vercel CLI + run: npm install --global vercel@latest + + - name: SetUp Env + run: hugo new site testenv + + - name: Set theme + uses: actions/checkout@v3 + with: + path: ./testenv/themes/hugo-theme-shell + + - name: Build + run: hugo --minify -t hugo-theme-shell + working-directory: ./testenv + + - name: Pull Vercel Environment Information + run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }} --cwd ./testenv + + - name: Build Project Artifacts + run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }} --cwd ./testenv + + - name: Deploy Project Artifacts to Vercel + if: ${{ github.ref == 'refs/heads/master' }} + run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }} --cwd ./testenv + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + if: ${{ github.ref == 'refs/heads/master' }} + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./testenv/public @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2021 Yuta Kurosawa (@Yukuro) + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..5bad666 --- /dev/null +++ b/README.md @@ -0,0 +1,162 @@ +# Hugo Theme: Shell +Terminal-like theme with selectable color schemes. + + + +## Quick Deploy +[](https://app.netlify.com/start/deploy?repository=https://github.com/Yukuro/hugo-theme-shell-example) + +## Features +- Terminal-like portfolio +- Selectable color schemes + - [Mayccoll/Gogh](https://github.com/Mayccoll/Gogh) theme + - `Molokai` +  + + - `Dracula` +  + + - `Gruvbox` +  + + - `Material` +  + + - `Tender` +  + - hugo-shell-theme ~v0.1.5 theme + - `shell-powershell` +  + + - `shell-ubuntu` +  + + - `shell-retro` +  + +- Minimal design +- Responsive +- [MathJax](https://www.mathjax.org/): Beautiful and accessible math in all browsers + +## Requirements +- Hugo Version 0.85.0 or higher + - **Hugo extended version is required**. + +## Installation +### Create a new website from scratch +1. Create a website and initialize Hugo Module +```bash +hugo new site myportfolio +cd myportfolio +hugo mod init github.com/YOUR_USERNAME/myportfolio +``` +2. Edit `hugo.toml` +```toml +[module] +[[module.imports]] + path = 'github.com/yukuro/hugo-theme-shell' +``` +3. Launch hugo server +```bash +hugo server -w -D +``` + +### How to use theme +hugo-theme-shell supports the [Mayccoll/Gogh](https://github.com/Mayccoll/Gogh) theme +1. Choose a Gogh theme : you can choose a theme [here](https://gogh-co.github.io/Gogh/). +2. Copy the name of the theme you selected +3. Configure your config.toml as follows + ```toml + [Params.Terminal] + scheme = "THEME_NAME" + ``` + +#### Note +Most of the themes used in hugo v0.1.5 and earlier have been deprecated with the introduction of Mayccoll/Gogh theme. +See [here](https://github.com/Yukuro/hugo-theme-shell/blob/master/docs/shell_to_gogh.md) for details. + +## Configuration +in [config.toml](config/_default/config.toml) +```toml +[Params] + # Note: This is for the meta description, which is different from the "description" displayed in the terminal. + description = "Jane Doe's Portfolio!" + [Params.Terminal] + # Note: color scheme + # Note: You can choose between + # Note: hugo-theme-shell original: ["shell-powershell", "shell-ubuntu", "shell-retro"] + # Note: or + # Note: gogh theme: https://mayccoll.github.io/Gogh/ + scheme = "Molokai" + + # Note: in terminal + # [userName]@[pcName]:~/$ cd [workDir] + # [userName]@[pcName]:~/[workDir]$ cat [profile] + # + # [description] + # + # Note: if you set Params.Tree > use = true + # [userName]@[pcName]:~/[workDir]$ tree ./[folderName]/ + # ./[folderName]/ + # ... + # Note: result of the tree command + userName = "jane" + pcName = "laptop" + workDir = "mydir" + profile = "profile.txt" + + # Note: speed at which text is displayed on the terminal + # Note: if set to 0, typing animation will be disabled + # Note: + # Note: if you want to enable Mathjax, you need to set it to 0 + # Note: and set "math: true" at front matter in your Markdown file + ps1Delay = 0 # prompt speed : [userName]@[pcName]:~/$ , [userName]@[pcName]:~/[workDir]$ + stdoutDelay = 0 # stdout speed : [description] , files in Params.Tree + commandDelay = 50 # command speed : cd [workDir] , cat [profile] , tree ./[folderName]/ + + # terminalDelay = 20 : deprecated + + # Note: speed at which text is displayed on the activity pages + # Note: if set to 0, typing animation will be disabled + # Note: + # Note: if you want to enable Mathjax, you need to set it to 0 + # Note: and set "math: true" at front matter in your Markdown file + titleDelay = 0 # title speed : "title" in front matter + contentDelay = 0 # content speed : content in .md file + + # activityDelay = 5 : deprecated + + description = """ + Hi I am Jane Doe! + Nice to meet you! + + """ + + # Note: If you want to use a Markdown file, you can use the following + # description = "/description.md" + # Note: and put the description.md in /content/description.md + + [Params.Tree] + use = true + folderName = "my_activity" + # Note: ["ACTIVITY", "URL or PATH TO YOUR MARKDOWN FILE"] + files = [ + ["C/C++", "https://www.example.com/"], + ["Python", "https://www.example.com/"], + ["Go", "https://golang.org/"], + ["Hugo", "/post/some-activity.md"], + ["Docker", "/post/some-activity.md"], + ] +``` + +## trouble shooting +- Hugo build fails + - What is the version of your Hugo? + - Shell theme requires Hugo version 0.85.0 or higher and **extended version** +- Post does not show up (return 404 not found) + - There are two possible causes for this. + 1. Forgot to add -D (--buildDrafts) as an argument to the hugo command + 2. The front matter of the post's .md file has "draft: true" set. + +## Contributing +Contributions are always welcome! diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..ac36e06 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,2 @@ ++++ ++++ diff --git a/assets/sass/activity.scss b/assets/sass/activity.scss new file mode 100644 index 0000000..c83bfbf --- /dev/null +++ b/assets/sass/activity.scss @@ -0,0 +1,36 @@ +@import "default.scss"; + +:root { + --cursor-visibility: hidden; +} + +body { + // I prefer only the left and right margins for the post. + align-items: unset; + + overflow-y: scroll; +} + +#content { + max-width: 80vmin; +} + +pre { + overflow-x: scroll; + white-space: pre; +} + +#activity-title, #activity-content { + &:after { + @extend .cursor; + } +} + +@keyframes blink { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/assets/sass/default.scss b/assets/sass/default.scss new file mode 100644 index 0000000..eadf98c --- /dev/null +++ b/assets/sass/default.scss @@ -0,0 +1,76 @@ +@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"); + +:root { + --cursor-visibility: hidden; +} + +html, +body { + width: 100%; + height: 100%; + overflow: auto; + + font-family: "Inconsolata", monospace; + font-size: 4vmin; + line-height: 4.1vmin; + font-weight: normal; +} + +body { + margin: 0; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +#content { + min-width: 82vmin; + min-height: 82vmin; +} + +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + border-radius: 10px; + box-shadow: inset 0 0 1px white; +} +::-webkit-scrollbar-thumb { + border-radius: 10px; + box-shadow: 0 0 0 1px white; +} + +.cursor { + visibility: var(--cursor-visibility); + content: "|"; + overflow: hidden; + color: white; + animation: blink 500ms linear infinite alternate; +} + +#cd, #whoami, #cat, #tree { + &:after { + @extend .cursor; + } +} + +@keyframes blink { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@media only screen and (min-width: 768px) { + body { + font-size: 2.5vmin; + line-height: 2.6vmin; + } + + #content { + min-width: 60vmin; + } +} diff --git a/assets/sass/gruvbox_dark.scss b/assets/sass/gruvbox_dark.scss new file mode 100644 index 0000000..b81f006 --- /dev/null +++ b/assets/sass/gruvbox_dark.scss @@ -0,0 +1,24 @@ +$charcolor: #ebdbb2; +body { + background: #282828; + + #terminal { + color: $charcolor; + } + + #user { + color: #98971a; + } + + #dir { + color: #458588; + } + + .Typewriter__cursor { + color: $charcolor; + } +} + +a { + color: $charcolor; +} diff --git a/assets/sass/gruvbox_light.scss b/assets/sass/gruvbox_light.scss new file mode 100644 index 0000000..0abda29 --- /dev/null +++ b/assets/sass/gruvbox_light.scss @@ -0,0 +1,24 @@ +$charcolor: #3c3836; +body { + background: #fbf1c7; + + #terminal { + color: $charcolor; + } + + #user { + color: #98971a; + } + + #dir { + color: #458588; + } + + .Typewriter__cursor { + color: $charcolor; + } +} + +a { + color: $charcolor; +}
\ No newline at end of file diff --git a/assets/sass/monokai.scss b/assets/sass/monokai.scss new file mode 100644 index 0000000..76e2e5b --- /dev/null +++ b/assets/sass/monokai.scss @@ -0,0 +1,24 @@ +$charcolor: #bbbbbb; +body { + background: #1b1d1e; + + #terminal { + color: $charcolor; + } + + #user { + color: #23e298; + } + + #dir { + color: #d08010; + } + + .Typewriter__cursor { + color: $charcolor; + } +} + +a { + color: $charcolor; +} diff --git a/assets/sass/powershell.scss b/assets/sass/powershell.scss new file mode 100644 index 0000000..5ba8f75 --- /dev/null +++ b/assets/sass/powershell.scss @@ -0,0 +1,24 @@ +$charcolor: #ffffff; +body { + background: #002454; + + #terminal { + color: $charcolor; + } + + #user { + color: #ffffff; + } + + #dir { + color: #ffffff; + } + + .Typewriter__cursor { + color: $charcolor; + } +} + +a { + color: $charcolor; +} diff --git a/assets/sass/retro.scss b/assets/sass/retro.scss new file mode 100644 index 0000000..1b2bafa --- /dev/null +++ b/assets/sass/retro.scss @@ -0,0 +1,24 @@ +$charcolor: #00f633; +body { + background: black; + + #terminal { + color: #00f633; + } + + #user { + color: #00f633; + } + + #dir { + color: #00f633; + } + + .Typewriter__cursor { + color: $charcolor; + } +} + +a { + color: $charcolor; +} diff --git a/assets/sass/solarized_dark.scss b/assets/sass/solarized_dark.scss new file mode 100644 index 0000000..9f0b031 --- /dev/null +++ b/assets/sass/solarized_dark.scss @@ -0,0 +1,24 @@ +$charcolor: #839496; +body { + background: #002b36; + + #terminal { + color: #839496; + } + + #user { + color: #859900; + } + + #dir { + color: #268bd2; + } + + .Typewriter__cursor { + color: $charcolor; + } +} + +a { + color: $charcolor; +} diff --git a/assets/sass/solarized_light.scss b/assets/sass/solarized_light.scss new file mode 100644 index 0000000..c01ff8a --- /dev/null +++ b/assets/sass/solarized_light.scss @@ -0,0 +1,24 @@ +$charcolor: #657b83; +body { + background: #fdf6e3; + + #terminal { + color: #657b83; + } + + #user { + color: #859900; + } + + #dir { + color: #268bd2; + } + + .Typewriter__cursor { + color: $charcolor; + } +} + +a { + color: $charcolor; +} diff --git a/assets/sass/ubuntu.scss b/assets/sass/ubuntu.scss new file mode 100644 index 0000000..29ed48b --- /dev/null +++ b/assets/sass/ubuntu.scss @@ -0,0 +1,24 @@ +$charcolor: #ffffff; +body { + background: #300a24; + + #terminal { + color: $charcolor; + } + + #user { + color: #4e9a06; + } + + #dir { + color: #3465a4; + } + + .Typewriter__cursor { + color: $charcolor; + } +} + +a { + color: $charcolor; +} diff --git a/assets/sass/white.scss b/assets/sass/white.scss new file mode 100644 index 0000000..f632759 --- /dev/null +++ b/assets/sass/white.scss @@ -0,0 +1,24 @@ +$charcolor: black; +body { + background: white; + + #terminal { + color: black; + } + + #user { + color: black; + } + + #dir { + color: black; + } + + .Typewriter__cursor { + color: $charcolor; + } +} + +a { + color: $charcolor; +} diff --git a/config/_default/config.toml b/config/_default/config.toml new file mode 100644 index 0000000..333cea2 --- /dev/null +++ b/config/_default/config.toml @@ -0,0 +1,80 @@ +baseURL = "https://www.example.com/" +title = "Shell" +# author = "Yukuro" +# prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API. +# See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456 +ignoreErrors = ["error-remote-getjson"] + +[Params] + # Note: This is for the meta description, which is different from the "description" displayed in the terminal. + description = "Jane Doe's Portfolio!" + [Params.Terminal] + # Note: color scheme + # Note: You can choose between + # Note: hugo-theme-shell original: ["shell-powershell", "shell-ubuntu", "shell-retro"] + # Note: gogh theme: https://mayccoll.github.io/Gogh/ + scheme = "Molokai" + + # Note: in terminal + # [userName]@[pcName]:~/$ cd [workDir] + # [userName]@[pcName]:~/[workDir]$ cat [profile] + # + # [description] + # + # Note: if you set Params.Tree > use = true + # [userName]@[pcName]:~/[workDir]$ tree ./[folderName]/ + # ./[folderName]/ + # ... + # Note: result of the tree command + userName = "jane" + pcName = "laptop" + workDir = "mydir" + profile = "profile.txt" + + # Note: speed at which text is displayed on the terminal + # Note: if set to 0, typing animation will be disabled + # Note: + # Note: if you want to enable Mathjax, you need to set it to 0 + # Note: and set "math: true" at front matter in your Markdown file + ps1Delay = 0 # prompt speed : [userName]@[pcName]:~/$ , [userName]@[pcName]:~/[workDir]$ + stdoutDelay = 0 # stdout speed : [description] , files in Params.Tree + commandDelay = 50 # command speed : cd [workDir] , cat [profile] , tree ./[folderName]/ + + # terminalDelay = 20 : deprecated + + # Note: speed at which text is displayed on the activity pages + # Note: if set to 0, typing animation will be disabled + # Note: + # Note: if you want to enable Mathjax, you need to set it to 0 + # Note: and set "math: true" at front matter in your Markdown file + titleDelay = 0 # title speed : "title" in front matter + contentDelay = 0 # content speed : content in .md file + + # activityDelay = 5 : deprecated + + description = """ + Hi I am Jane Doe! + Nice to meet you! + + """ + + # Note: If you want to use a Markdown file, you can use the following + # description = "/description.md" + # Note: and put the description.md in /content/description.md + + [Params.Tree] + use = true + folderName = "my_activity" + # Note: ["ACTIVITY", "URL or PATH TO YOUR MARKDOWN FILE"] + files = [ + ["C/C++", "https://www.example.com/"], + ["Python", "https://www.example.com/"], + ["Go", "https://golang.org/"], + ["Hugo", "/post/some-activity.md"], + ["Docker", "/post/some-activity.md"], + ] + +[module] + [module.hugoVersion] + extended = true + min = "0.85.0" diff --git a/docs/customize_terminal/customize_terminal.md b/docs/customize_terminal/customize_terminal.md new file mode 100644 index 0000000..6a07dbd --- /dev/null +++ b/docs/customize_terminal/customize_terminal.md @@ -0,0 +1,163 @@ +# Customize the terminal as you like + +## Note +This document explains how to customize the terminal, but it is a temporary solution.\ +It is subject to change in future updates. + +## 0. Directory structure +The Hugo configuration to be customized looks like this.\ +This is the file structure of the hugo-theme-shell [READMD.md](https://github.com/Yukuro/hugo-theme-shell/blob/master/README.md#installation) with all the steps completed. +```bash +$hugo new site mysite +$cd mysite +$tree . +. +├── archetypes +│ └── default.md +├── config.toml +├── content +├── data +├── layouts +├── static +└── themes + └── hugo-theme-shell +``` + +## 1. Copy some files to layouts +Hugo 0.42 or later has a feature that allows you to customize the theme without editing the original theme. + +In order to customize the terminal, you need to edit the following files +- `hugo-theme-shell/layouts/index.html` +- `hugo-theme-shell/layouts/partials/typeIndex.html` + +Copy it to `mysite/layouts` +```bash +$ mkdir -p ./layouts/partials +$ cp themes/hugo-theme-shell/layouts/index.html layouts/partials +$ cp themes/hugo-theme-shell/partials/typeIndex.html layouts/partials +``` + +## 2. Edit file +In `hugo-theme-shell`, the contents of `config.toml` are passed to `typeIndex.html` according to the [Hugo Template](https://gohugo.io/templates/) written in `index.html` + +From here, we will edit the copied file, but the task will vary depending on what you want to do. +- If you want to change only the order of the commands + - go to chapter 2-A +- If you want to change the order of the commands and change the display of the commands + - go to chapter 2-B + +## 2-A Change only the order of the commands +Here we want to add `[userName]@[pcName]:~/[workDir]$ cat [profile]` between the last line of the teminal and the line before it. + +In `typeIndex.html`\ +The collection of `span` tags at the beginning is the root of the order of the commands.\ +Thus, if you want to add it between the last line and the line before it, add `<span id="ps1_05"></span> <span id="cat2"></span> <br>` at that position. +```html + <span id="ps1_01"></span> <span id="cd"></span> <br> + <span id="ps1_02"></span> <span id="cat"></span> <br> + <span id="std_out_01"></span> <br> + <span id="ps1_03"></span> <span id="tree"></span> <br> + <span id="std_out_02"></span> <br> ++++ <span id="ps1_05"></span> <span id="cat2"></span> <br> + <span id="ps1_04"></span> <br> +``` +The id of the `span` tag must be unique. + +The javascript in the second half of `typeIndex.html` uses `async/await` to control the typing effect.\ +In particular, `typeeffect` is associated with the edited `span` tag, so you need to insert the code in the correct order. +```javascript +const typeeffetct = async () => { + await typewriter("{{ .env }}", "ps1_01", ps1Delay); await typewriter("{{ .cd }}", "cd", commandDelay); + await typewriter("{{ .envWithDir }}", "ps1_02", ps1Delay); await typewriter("{{ .cat }}", "cat", commandDelay); + await typewriter("{{ .description }}", "std_out_01", stdoutDelay); + await typewriter("{{ .envWithDir }}", "ps1_03", ps1Delay); await typewriter("{{ .tree }}", "tree", commandDelay); + await typewriter("{{ .leaf }}", "std_out_02", stdoutDelay); ++++ await typewriter("{{ .envWithDir }}", "ps1_05", ps1Delay); await typewriter("{{ .cat }}", "cat2", commandDelay); + await typewriter("{{ .envWithDir }}", "ps1_04", ps1Delay); + return; +} +``` + +## 2-B Change the order of the commands and change the display of the commands +If you want to change the contents of the command, you need to edit `config.toml` and `index.html` additionally in addition to the steps in 2-A. + +In this example, after adding `[userName]@[pcName]:~/[workDir]$ cat [profile2]` to the last line of the terminal, we want to display the contents of `[profile2]` (`[description2]`) + +In `config.toml`\ +In `config.toml`, under `[Params.Terminal]`, set the content you want to display and the name of the property that defines it.\ +In this example, we will set `profile2` and `description2`. +```toml + pcName = "PC" + workDir = "mydi" + profile = "profile.log" ++++ profile2 = "profile_other.log" +``` + +```toml + contentDelay = 0 # content speed : content in .md file + + description = """ + Hi I am Jane Doe! + Nice to meet you! + Wow! + """ + ++++ description2 = """ ++++ Hi I like apple. ++++ """ +``` + +In `index.html`\ +Takes the property name and its contents from `config.toml` and passes it to `typeIndex.html`.\ +Here, we create the variables `cat2` and `description2` and pass them to typeIndex.html through `partial`. +```html + {{ $stdoutDelay := $.Site.Params.Terminal.stdoutDelay }} + {{ $commandDelay := $.Site.Params.Terminal.commandDelay }} + ++++ {{ $cat2 := printf "<span id=terminal>cat %s</span>" .Site.Params.Terminal.profile2 | safeHTML }} ++++ {{ $description2 := printf "<span id='terminal'>%s</span>" .Site.Params.Terminal.description2 | safeHTML}} ++++ {{ partial "partials/typeIndex.html" (dict "context" . "env" $env "cd" $cd "envWithDir" $envWithDir "cat" $cat "description" $description "tree" $tree "leaf" $leaf "ps1delay" $ps1Delay "stdoutdelay" $stdoutDelay "commanddelay" $commandDelay "cat2" $cat2 "description2" $description2) }} +``` + +In `typeIndex.html`\ +Basically, what you need to do is the same as in step 2-A.\ +Edit the HTML part that controls the display order and the javascript that controls the typing animation. +```html + <span id="ps1_01"></span> <span id="cd"></span> <br> + <span id="ps1_02"></span> <span id="cat"></span> <br> + <span id="std_out_01"></span> <br> + <span id="ps1_03"></span> <span id="tree"></span> <br> + <span id="std_out_02"></span> <br> + <span id="ps1_04"></span> <br> ++++ <span id="ps1_05"></span> <span id="cat2"></span> <br> ++++ <span id="std_out_03"></span> <br> +``` + +```javascript +const typeeffetct = async () => { + await typewriter("{{ .env }}", "ps1_01", ps1Delay); await typewriter("{{ .cd }}", "cd", commandDelay); + await typewriter("{{ .envWithDir }}", "ps1_02", ps1Delay); await typewriter("{{ .cat }}", "cat", commandDelay); + await typewriter("{{ .description }}", "std_out_01", stdoutDelay); + await typewriter("{{ .envWithDir }}", "ps1_03", ps1Delay); await typewriter("{{ .tree }}", "tree", commandDelay); + await typewriter("{{ .leaf }}", "std_out_02", stdoutDelay); + await typewriter("{{ .envWithDir }}", "ps1_04", ps1Delay); ++++ await typewriter("{{ .envWithDir }}", "ps1_05", ps1Delay); await typewriter("{{ .cat2 }}", "cat2", commandDelay); ++++ await typewriter("{{ .description2 }}", "std_out_03", stdoutDelay); + return; + } +``` + +## Tips +Many of the variables in `typeIndex.html` (`envWithDir, cat ... `) are defined in `index.html`, and have the following meaning +| Variable name | Relation to config.toml | +| ---- | ---- | +| env | `[userName]@[pcName]:~/` | +| envWithDir | `[userName]@[pcName]:~/[workDir]` | +| cd | `cd [workDir]` | +| cat | `cat [profile]` | +| description | `description` | +| tree | `tree [folderName]` | +| leaf | `[folderName] etc` | +| ps1delay | `display speed of [userName]@[pcName]:~/` | +| stdoutdelay | `display speed of [description], [leaf]` | +| commanddelay | `display speed of command(cd [workdir] / cat [profile])` | diff --git a/docs/shell_to_gogh.md b/docs/shell_to_gogh.md new file mode 100644 index 0000000..7b59e30 --- /dev/null +++ b/docs/shell_to_gogh.md @@ -0,0 +1,21 @@ +# Migration Guide from shell to gogh +Most of the themes used in hugo v0.1.5 and earlier have been deprecated with the introduction of gogh theme. + +### "scheme" in config.coml +| hugo-shell-theme ~v0.1.5 | gogh theme | +| ---------------- | -------------- | +| monokai | Molokai | +| powershell | PowerShell | +| gruvbox_light | Gruvbox | +| gruvbox_dark | GruvboxDark | +| solarized_light | SolarizedLight | +| solarized_dark | SolarizedDark | + +However, the following themes are left as original. +The reason for this is that gogh doesn't have a theme or looks bad. + +| hugo-shell-theme ~v0.1.5 | hugo-shell-theme v0.1.6~ | +| ------------------------ | ------------------------ | +| powershell | shell-powershell | +| ubuntu | shell-ubuntu | +| retro | shell-retro |
\ No newline at end of file @@ -0,0 +1,3 @@ +module github.com/yukuro/hugo-theme-shell + +go 1.21 diff --git a/images/gruvbox_dark.png b/images/gruvbox_dark.png Binary files differnew file mode 100644 index 0000000..cc2bb73 --- /dev/null +++ b/images/gruvbox_dark.png diff --git a/images/gruvbox_light.png b/images/gruvbox_light.png Binary files differnew file mode 100644 index 0000000..4ce9241 --- /dev/null +++ b/images/gruvbox_light.png diff --git a/images/monokai.png b/images/monokai.png Binary files differnew file mode 100644 index 0000000..438c5d4 --- /dev/null +++ b/images/monokai.png diff --git a/images/motion2.gif b/images/motion2.gif Binary files differnew file mode 100644 index 0000000..8b94271 --- /dev/null +++ b/images/motion2.gif diff --git a/images/powershell.png b/images/powershell.png Binary files differnew file mode 100644 index 0000000..626b2b4 --- /dev/null +++ b/images/powershell.png diff --git a/images/retro.png b/images/retro.png Binary files differnew file mode 100644 index 0000000..12b4c6a --- /dev/null +++ b/images/retro.png diff --git a/images/screenshot.png b/images/screenshot.png Binary files differnew file mode 100644 index 0000000..6f3bf1c --- /dev/null +++ b/images/screenshot.png diff --git a/images/solarized_dark.png b/images/solarized_dark.png Binary files differnew file mode 100644 index 0000000..60905b8 --- /dev/null +++ b/images/solarized_dark.png diff --git a/images/solarized_light.png b/images/solarized_light.png Binary files differnew file mode 100644 index 0000000..853ef11 --- /dev/null +++ b/images/solarized_light.png diff --git a/images/tn.png b/images/tn.png Binary files differnew file mode 100644 index 0000000..438c5d4 --- /dev/null +++ b/images/tn.png diff --git a/images/ubuntu.png b/images/ubuntu.png Binary files differnew file mode 100644 index 0000000..167b4d3 --- /dev/null +++ b/images/ubuntu.png diff --git a/images/v0.1.6/Atom.png b/images/v0.1.6/Atom.png Binary files differnew file mode 100644 index 0000000..707d4dc --- /dev/null +++ b/images/v0.1.6/Atom.png diff --git a/images/v0.1.6/Dracula.png b/images/v0.1.6/Dracula.png Binary files differnew file mode 100644 index 0000000..83e28ae --- /dev/null +++ b/images/v0.1.6/Dracula.png diff --git a/images/v0.1.6/Gruvbox.png b/images/v0.1.6/Gruvbox.png Binary files differnew file mode 100644 index 0000000..842049b --- /dev/null +++ b/images/v0.1.6/Gruvbox.png diff --git a/images/v0.1.6/Material.png b/images/v0.1.6/Material.png Binary files differnew file mode 100644 index 0000000..01d698e --- /dev/null +++ b/images/v0.1.6/Material.png diff --git a/images/v0.1.6/Molokai.png b/images/v0.1.6/Molokai.png Binary files differnew file mode 100644 index 0000000..d8cf691 --- /dev/null +++ b/images/v0.1.6/Molokai.png diff --git a/images/v0.1.6/SolarizedDark.png b/images/v0.1.6/SolarizedDark.png Binary files differnew file mode 100644 index 0000000..442d0f4 --- /dev/null +++ b/images/v0.1.6/SolarizedDark.png diff --git a/images/v0.1.6/Tender.png b/images/v0.1.6/Tender.png Binary files differnew file mode 100644 index 0000000..b642245 --- /dev/null +++ b/images/v0.1.6/Tender.png diff --git a/images/v0.1.6/shell-powershell.png b/images/v0.1.6/shell-powershell.png Binary files differnew file mode 100644 index 0000000..5c6aa5f --- /dev/null +++ b/images/v0.1.6/shell-powershell.png diff --git a/images/v0.1.6/shell-retro.png b/images/v0.1.6/shell-retro.png Binary files differnew file mode 100644 index 0000000..c8e5418 --- /dev/null +++ b/images/v0.1.6/shell-retro.png diff --git a/images/v0.1.6/shell-ubuntu.png b/images/v0.1.6/shell-ubuntu.png Binary files differnew file mode 100644 index 0000000..ec8765f --- /dev/null +++ b/images/v0.1.6/shell-ubuntu.png diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/layouts/404.html diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..2a153c4 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}"> + {{- partial "head.html" . -}} + <body> + {{- partial "header.html" . -}} + <div id="content"> + {{- block "main" . }}{{- end }} + </div> + {{- partial "footer.html" . -}} + </body> +</html> diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/layouts/_default/list.html diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..58c1678 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,8 @@ +{{ define "main" }} + {{ $title := printf "<h1 id='title'>%s</h1>" .Title}} + {{ $title := printf "<span id='terminal'>%s</span>" $title}} + {{ $content := printf "<span id='terminal'>%s</span>" .Content }} + + + {{ partial "partials/typeActivity.html" (dict "context" . "title" $title "content" $content "titledelay" $.Site.Params.Terminal.titleDelay "contentdelay" $.Site.Params.Terminal.contentDelay )}} +{{ end }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..0a84145 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,55 @@ +{{ define "main" }} + {{ $env := printf "<strong><span id='user'>%s@%s</span><span id='terminal'>:</span><span id='dir'>~/%s</span></strong><span id='terminal'>$</span>" .Site.Params.Terminal.userName .Site.Params.Terminal.pcName "" | safeHTML }} + {{ $envWithDir := printf "<strong><span id='user'>%s@%s</span><span id='terminal'>:</span><span id='dir'>~/%s</span></strong><span id='terminal'>$</span>" .Site.Params.Terminal.userName .Site.Params.Terminal.pcName .Site.Params.Terminal.workDir | safeHTML }} + + {{ $cd := printf "<span id='terminal'>cd %s</span>" .Site.Params.Terminal.workDir | safeHTML }} + {{ $cat := printf "<span id=terminal>cat %s</span>" .Site.Params.Terminal.profile | safeHTML }} + + {{ $description := "" }} + {{ if eq (substr .Site.Params.Terminal.description -3 3) ".md" }} + {{ $s := "" }} + {{ with .Site.GetPage .Site.Params.Terminal.description }} + <!-- replace the first p tag with a br tag --> + {{ $s = replaceRE "</?p[^>]*>" "" .Content 1 }} + {{ end }} + {{ $description = printf "<span id='terminal'>%s</span>" $s | safeHTML}} + {{ else }} + {{ $limit := sub (len (findRE "\n" .Site.Params.Terminal.description)) 1 }} + {{ $description = printf "<span id='terminal'>%s</span>" .Site.Params.Terminal.description }} + {{ $description = replaceRE "\n" "<br>" $description $limit| safeHTML }} + {{ end }} + + {{ $tree := "" }} + {{ $leaf := "" }} + {{ if .Site.Params.Tree.use }} + {{ $tree = printf "<span id='terminal'>tree ./%s/</span>" .Site.Params.Tree.folderName | safeHTML}} + {{ $leaf = printf "%s<strong><span id='dir'>./%s/</span></strong><br>" $leaf .Site.Params.Tree.folderName | safeHTML}} + {{ range $index, $val := .Site.Params.Tree.files }} + {{ $ac := index $val 0}} + {{ $link := index $val 1}} + + <!-- pass link (i.e. http, https) and mailto --> + {{ $l := $.Site.GetPage $link }} + {{ if $l }} + {{ $link = $l.Permalink}} + {{ end }} + + {{ if eq (add $index 1) (len $.Site.Params.Tree.files) }} + {{ $leaf = printf "<span id='terminal'>%s└── <a href='%s'>%s</a></span>" $leaf $link $ac | safeHTML}} + {{ else }} + {{ $leaf = printf "<span id='terminal'>%s├── <a href='%s'>%s</a></span><br>" $leaf $link $ac | safeHTML}} + {{ end }} + {{ end }} + {{ end }} + + {{ $end := $env }} + + {{ $payload := delimit (slice $cd $cat $description $tree $leaf $end) "" }} + + {{ $ps1Delay := $.Site.Params.Terminal.ps1Delay }} + {{ $stdoutDelay := $.Site.Params.Terminal.stdoutDelay }} + {{ $commandDelay := $.Site.Params.Terminal.commandDelay }} + + {{ partial "partials/typeIndex.html" (dict "context" . "env" $env "cd" $cd "envWithDir" $envWithDir "cat" $cat "description" $description "tree" $tree "leaf" $leaf "ps1delay" $ps1Delay "stdoutdelay" $stdoutDelay "commanddelay" $commandDelay ) }} + +{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/layouts/partials/footer.html diff --git a/layouts/partials/head.html b/layouts/partials/head.html new file mode 100644 index 0000000..0caae6c --- /dev/null +++ b/layouts/partials/head.html @@ -0,0 +1,7 @@ +<head> + <title>{{- if .IsHome }}{{ .Site.Title }}{{- else }}{{ .Title }}{{- end }}</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="description" content="{{if .IsHome}}{{ $.Site.Params.description }}{{else}}{{.Description}}{{end}}" /> + {{ partial "partials/style.html" . }} +</head>
\ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..a1a20c5 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,5 @@ +{{ if or ( eq .Site.Params.Terminal.terminalDelay 0 ) ( eq .Site.Params.Terminal.activityDelay 0 )}} + {{ if .Page.Params.math }} + {{ partial "mathjax.html" . }} + {{ end }} +{{ end }}
\ No newline at end of file diff --git a/layouts/partials/mathjax.html b/layouts/partials/mathjax.html new file mode 100644 index 0000000..eb6315a --- /dev/null +++ b/layouts/partials/mathjax.html @@ -0,0 +1,13 @@ +<script> + window.MathJax = { + CommonHTML: { linebreaks: { automatic: true } }, + tex: { + inlineMath: [ ['$', '$'], ['\\(','\\)'] ], + displayMath: [ ['$$','$$'], ['\\[', '\\]'] ], + processEscapes: false, + noUndefined: { attributes: { mathcolor: 'red', mathbackground: '#FFEEEE', mathsize: '90%' } } }, + messageStyle: 'none' +}; +</script> +<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> +<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-mml-svg.js"></script> diff --git a/layouts/partials/style.html b/layouts/partials/style.html new file mode 100644 index 0000000..d4ceb09 --- /dev/null +++ b/layouts/partials/style.html @@ -0,0 +1,43 @@ +<style> +{{ if .IsHome }} +{{- $default_style := resources.Get "sass/default.scss" | resources.ToCSS -}} +{{- $default_style.Content | safeCSS -}} +{{ else }} +{{- $activity_style := resources.Get "sass/activity.scss" | resources.ToCSS | minify -}} +{{- $activity_style.Content | safeCSS -}} +{{ end }} + +{{ $terminal_style := resources.Get "sass/white.scss" }} +{{/* {{ with (eq .Site.Params.Terminal.scheme "monokai") }} {{- $terminal_style = resources.Get "sass/monokai.scss" | resources.ToCSS | minify -}} {{ end }} */}} +{{ with (eq .Site.Params.Terminal.scheme "shell-powershell") }} + {{- $terminal_style = resources.Get "sass/powershell.scss" | resources.ToCSS | minify -}} + {{- $terminal_style = $terminal_style.Content -}} +{{ end }} +{{/* {{ with (eq .Site.Params.Terminal.scheme "gruvbox_light") }} {{- $terminal_style = resources.Get "sass/gruvbox_light.scss" | resources.ToCSS | minify -}} {{ end }} */}} +{{/* {{ with (eq .Site.Params.Terminal.scheme "gruvbox_dark") }} {{- $terminal_style = resources.Get "sass/gruvbox_dark.scss" | resources.ToCSS | minify -}} {{ end }} */}} +{{/* {{ with (eq .Site.Params.Terminal.scheme "solarized_light") }} {{- $terminal_style = resources.Get "sass/solarized_light.scss" | resources.ToCSS | minify -}} {{ end }} */}} +{{/* {{ with (eq .Site.Params.Terminal.scheme "solarized_dark") }} {{- $terminal_style = resources.Get "sass/solarized_dark.scss" | resources.ToCSS | minify -}} {{ end }} */}} +{{ with (eq .Site.Params.Terminal.scheme "shell-ubuntu") }} + {{- $terminal_style = resources.Get "sass/ubuntu.scss" | resources.ToCSS | minify -}} + {{- $terminal_style = $terminal_style.Content -}} +{{ end }} +{{ with (eq .Site.Params.Terminal.scheme "shell-retro") }} + {{- $terminal_style = resources.Get "sass/retro.scss" | resources.ToCSS | minify -}} + {{- $terminal_style = $terminal_style.Content -}} +{{ end }} +{{/* {{ with (eq .Site.Params.Terminal.scheme "goph") }} {{- $terminal_style = resources.Get "sass/goph.scss" | resources.ToCSS | minify -}} {{ end }} */}} + +{{/* Assume that ubuntu and retro do not exist in gogh. */}} +{{ $themeData := getJSON "https://raw.githubusercontent.com/Gogh-Co/Gogh/master/data/themes.json" }} +{{ range $t := $themeData }} + {{if eq $t.name $.Site.Params.Terminal.scheme }} + {{ $terminal_style = printf "body{background:%s}body #terminal{color:%s}body #user{color:%s}body #dir{color:%s}body .Typewriter__cursor{color:%s}a{color:%s}" $t.background $t.cursor $t.color_03 $t.color_05 $t.cursor $t.cursor | safeCSS }} + {{ end }} +{{ end }} + +{{/* {{- $terminal_style.Content | safeCSS -}} */}} +{{ $terminal_style | safeCSS }} + +</style> + + diff --git a/layouts/partials/typeActivity.html b/layouts/partials/typeActivity.html new file mode 100644 index 0000000..911754f --- /dev/null +++ b/layouts/partials/typeActivity.html @@ -0,0 +1,57 @@ +<span id="activity-title"></span> <br> + <span id="activity-content"></span> <br> + +<script type="text/javascript"> + async function typewriter(text, elementId, waitAfter) { + var n = 0, + isTag = false + addText = ""; + const el = document.getElementById(elementId); + + const wait = () => new Promise(r => setTimeout(r, waitAfter)); + const nowait = () => new Promise(r => r()); + + const render = () => el.innerHTML = (text.slice(0, n + 1) + addText); + + const cursor = document.createElement('span'); + cursor.id = "blink"; + + el.style.setProperty("--cursor-visibility", "visible"); + while (n < text.length) { + if (text.charAt(n + 1) === "<") isTag = true; + if (text.charAt(n + 1) === ">") isTag = false; + + if (isTag) { + n++; + continue; + } + + requestAnimationFrame(render); + + if (waitAfter === 0) { + await nowait(); + } else { + await wait(); + } + + n++; + } + el.style.setProperty("--cursor-visibility", "collapse"); + } + + function parseDelay(d) { + const parsed = parseInt(d, 10); + if (isNaN(parsed)) return 0; + return parsed; + } + + const titleDelay = parseDelay("{{ .titledelay }}"), + contentDelay = parseDelay("{{ .contentdelay }}"); + const typeeffetct = async () => { + await typewriter("{{ .title }}", "activity-title", titleDelay); + await typewriter("{{ .content }}", "activity-content", contentDelay); + return; + } + + typeeffetct() +</script>
\ No newline at end of file diff --git a/layouts/partials/typeIndex.html b/layouts/partials/typeIndex.html new file mode 100644 index 0000000..ab2526f --- /dev/null +++ b/layouts/partials/typeIndex.html @@ -0,0 +1,66 @@ +<span id="ps1_01"></span> <span id="cd"></span> <br> +<span id="ps1_02"></span> <span id="cat"></span> <br> +<span id="std_out_01"></span> <br> +<span id="ps1_03"></span> <span id="tree"></span> <br> +<span id="std_out_02"></span> <br> +<span id="ps1_04"></span> + +<script type="text/javascript"> + async function typewriter(text, elementId, waitAfter) { + var n = 0, + isTag = false + addText = ""; + const el = document.getElementById(elementId); + + const wait = () => new Promise(r => setTimeout(r, waitAfter)); + const nowait = () => new Promise(r => r()); + + const render = () => el.innerHTML = (text.slice(0, n + 1) + addText); + + const cursor = document.createElement('span'); + cursor.id = "blink"; + + el.style.setProperty("--cursor-visibility", "visible"); + while (n < text.length) { + if (text.charAt(n + 1) === "<") isTag = true; + if (text.charAt(n + 1) === ">") isTag = false; + + if (isTag) { + n++; + continue; + } + + requestAnimationFrame(render); + + if (waitAfter === 0) { + await nowait(); + } else { + await wait(); + } + + n++; + } + el.style.setProperty("--cursor-visibility", "collapse"); + } + + function parseDelay(d) { + const parsed = parseInt(d, 10); + if (isNaN(parsed)) return 0; + return parsed; + } + + const ps1Delay = parseDelay("{{ .ps1delay }}"), + stdoutDelay = parseDelay("{{ .stdoutdelay }}"), + commandDelay = parseDelay("{{ .commanddelay }}"); + const typeeffetct = async () => { + await typewriter("{{ .env }}", "ps1_01", ps1Delay); await typewriter("{{ .cd }}", "cd", commandDelay); + await typewriter("{{ .envWithDir }}", "ps1_02", ps1Delay); await typewriter("{{ .cat }}", "cat", commandDelay); + await typewriter("{{ .description }}", "std_out_01", stdoutDelay); + await typewriter("{{ .envWithDir }}", "ps1_03", ps1Delay); await typewriter("{{ .tree }}", "tree", commandDelay); + await typewriter("{{ .leaf }}", "std_out_02", stdoutDelay); + await typewriter("{{ .envWithDir }}", "ps1_04", ps1Delay); + return; + } + + typeeffetct() +</script>
\ No newline at end of file diff --git a/layouts/partials/typewriter.html b/layouts/partials/typewriter.html new file mode 100644 index 0000000..daab6ae --- /dev/null +++ b/layouts/partials/typewriter.html @@ -0,0 +1,14 @@ +<div id=typewriter></div> + +{{- if eq .delay 0 }} + {{ .payload }} +{{ else }} + <script src="https://cdn.jsdelivr.net/gh/tameemsafi/typewriterjs/dist/core.js"></script> + <script type="text/javascript"> + const instance = new Typewriter('#typewriter', { + strings: '{{ .payload }}', + delay: '{{ .delay }}', + autoStart: true, + }); + </script> +{{ end -}} diff --git a/layouts/shortcodes/typewriter.html b/layouts/shortcodes/typewriter.html new file mode 100644 index 0000000..a16cfbb --- /dev/null +++ b/layouts/shortcodes/typewriter.html @@ -0,0 +1,14 @@ +{{ $random := delimit (seq 9 | shuffle) "" }} +{{ $tpid := md5 $random }} + +<div id = a{{ $tpid }}></div> + +<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script> + +<script type="text/javascript"> + const instance = new Typewriter('#a{{ $tpid }}', { + strings: '{{ .Inner | replaceRE "\n" "<br>" | safeHTML }}', + delay: 20, + autoStart: true, + }); +</script>
\ No newline at end of file diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..0de5080 --- /dev/null +++ b/theme.toml @@ -0,0 +1,16 @@ +# theme.toml template for a Hugo theme +# See https://github.com/gohugoio/hugoThemes#themetoml for an example + +name = "Shell" +license = "MIT" +licenselink = "https://github.com/Yukuro/hugo-theme-shell/blob/master/LICENSE" +description = "Hugo Shell theme : Terminal-like theme with selectable color schemes." +homepage = "https://github.com/Yukuro/hugo-theme-shell/" +demosite = "https://hugo-theme-shell.netlify.app/" +tags = ["responsive", "minimal", "light", "personal", "dark", "portfolio"] +features = ["terminal-like"] +min_version = "0.85.0" + +[author] + name = "Yukuro" + homepage = "https://unknownsky.net/" |
