Repository: ThePrimeagen/vim-fundamentals
Branch: master
Commit: aed0a14eeeb6
Files: 106
Total size: 167.3 KB
Directory structure:
gitextract_scmncpft/
├── .editorconfig
├── .eslintrc.json
├── .github/
│ └── workflows/
│ └── gatsby.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── course-website/
│ ├── .editorconfig
│ ├── .eslintrc.json
│ ├── .github/
│ │ └── workflows/
│ │ └── gatsby.yml
│ ├── .gitignore
│ ├── .prettierrc
│ ├── LICENSE
│ ├── README.md
│ ├── csv.js
│ ├── exercise
│ ├── gatsby-config.js
│ ├── gatsby-node.js
│ ├── lessons/
│ │ ├── adv-pitstop.md
│ │ ├── advanced-movements-1.md
│ │ ├── advanced-text-manipulation-1.md
│ │ ├── advanced-text-manipulation-2.md
│ │ ├── advanced-text-manipulation-3.md
│ │ ├── are-you-ready.md
│ │ ├── basic-usage.md
│ │ ├── color-my-pencils.md
│ │ ├── exercise-0-hjkl-x.md
│ │ ├── exercise-1-dyp.md
│ │ ├── exercise-2-insert.md
│ │ ├── exercise-3-search-and-replace.md
│ │ ├── exercise-4-macros.md
│ │ ├── exercise-5-registers.md
│ │ ├── exercise-6-motions.md
│ │ ├── files-e.md
│ │ ├── files-intro.md
│ │ ├── files-marks.md
│ │ ├── files-netrw.md
│ │ ├── files-recap.md
│ │ ├── files-remaps-1.md
│ │ ├── files-remaps-2.md
│ │ ├── first-plugin.md
│ │ ├── intro.md
│ │ ├── mid-level-recap.md
│ │ ├── my-ideal.md
│ │ ├── opening-vim.md
│ │ ├── plugins.md
│ │ ├── quickfix.md
│ │ ├── some-javascript.md
│ │ ├── terminology.md
│ │ └── vim-my-way.md
│ ├── package.json
│ └── src/
│ ├── components/
│ │ ├── TOCCard.css
│ │ └── TOCCard.js
│ ├── layouts/
│ │ ├── index.css
│ │ └── index.js
│ ├── pages/
│ │ ├── 404.js
│ │ ├── index.css
│ │ └── index.js
│ ├── templates/
│ │ └── lessonTemplate.js
│ └── util/
│ └── helpers.js
├── csv.js
├── gatsby-config.js
├── gatsby-node.js
├── lessons/
│ ├── adv-pitstop.md
│ ├── advanced-movements-1.md
│ ├── advanced-text-manipulation-1.md
│ ├── advanced-text-manipulation-2.md
│ ├── advanced-text-manipulation-3.md
│ ├── are-you-ready.md
│ ├── basic-usage.md
│ ├── color-my-pencils.md
│ ├── exercise-0-hjkl-x.md
│ ├── exercise-1-dyp.md
│ ├── exercise-2-insert.md
│ ├── exercise-3-search-and-replace.md
│ ├── exercise-4-macros.md
│ ├── exercise-5-registers.md
│ ├── exercise-6-motions.md
│ ├── files-e.md
│ ├── files-intro.md
│ ├── files-marks.md
│ ├── files-netrw.md
│ ├── files-recap.md
│ ├── files-remaps-1.md
│ ├── files-remaps-2.md
│ ├── first-plugin.md
│ ├── intro.md
│ ├── mid-level-recap.md
│ ├── opening-vim.md
│ ├── plugins.md
│ ├── quickfix.md
│ ├── some-javascript.md
│ ├── terminology.md
│ └── vim-my-way.md
├── package.json
├── save.sh
├── src/
│ ├── components/
│ │ ├── TOCCard.css
│ │ └── TOCCard.js
│ ├── layouts/
│ │ ├── index.css
│ │ └── index.js
│ ├── pages/
│ │ ├── 404.js
│ │ ├── index.css
│ │ └── index.js
│ ├── templates/
│ │ └── lessonTemplate.js
│ └── util/
│ └── helpers.js
└── todo.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 2
================================================
FILE: .eslintrc.json
================================================
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier",
"prettier/react"
],
"rules": {
"react/prop-types": 0,
"jsx-a11y/label-has-for": 0,
"no-console": 1
},
"plugins": ["react", "import", "jsx-a11y"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "16.5.2"
}
}
}
================================================
FILE: .github/workflows/gatsby.yml
================================================
name: Deploy Gatsby Site to GitHub Pages
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: npm install and build
run: |
npm install
npm run build
- name: Deploy site to gh-pages branch
uses: alex-page/blazing-fast-gh-pages-deploy@v1.1.0
with:
repo-token: ${{ secrets.ACCESS_TOKEN }}
site-directory: public
================================================
FILE: .gitignore
================================================
# Project dependencies
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.cache/
# Build directory
public/
.DS_Store
yarn-error.log
================================================
FILE: .prettierrc
================================================
{}
================================================
FILE: LICENSE
================================================
## creative commons
#
# Attribution-NonCommercial 4.0 International
Creative Commons Corporation (“Creative Commons”) is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship. Creative Commons makes its licenses and related information available on an “as-is” basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and conditions, or any related information. Creative Commons disclaims all liability for damages resulting from their use to the fullest extent possible.
### Using Creative Commons Public Licenses
Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works of authorship and other material subject to copyright and certain other rights specified in the public license below. The following considerations are for informational purposes only, are not exhaustive, and do not form part of our licenses.
* __Considerations for licensors:__ Our public licenses are intended for use by those authorized to give the public permission to use material in ways otherwise restricted by copyright and certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and conditions of the license they choose before applying it. Licensors should also secure all rights necessary before applying our licenses so that the public can reuse the material as expected. Licensors should clearly mark any material not subject to the license. This includes other CC-licensed material, or material used under an exception or limitation to copyright. [More considerations for licensors](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors).
* __Considerations for the public:__ By using one of our public licenses, a licensor grants the public permission to use the licensed material under specified terms and conditions. If the licensor’s permission is not necessary for any reason–for example, because of any applicable exception or limitation to copyright–then that use is not regulated by the license. Our licenses grant only permissions under copyright and certain other rights that a licensor has authority to grant. Use of the licensed material may still be restricted for other reasons, including because others have copyright or other rights in the material. A licensor may make special requests, such as asking that all changes be marked or described. Although not required by our licenses, you are encouraged to respect those requests where reasonable. [More considerations for the public](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees).
## Creative Commons Attribution-NonCommercial 4.0 International Public License
By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
### Section 1 – Definitions.
a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image.
b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License.
c. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
d. __Effective Technological Measures__ means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements.
e. __Exceptions and Limitations__ means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
f. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
g. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
h. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License.
i. __NonCommercial__ means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange.
j. __Share__ means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them.
k. __Sui Generis Database Rights__ means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
l. __You__ means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning.
### Section 2 – Scope.
a. ___License grant.___
1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to:
A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and
B. produce, reproduce, and Share Adapted Material for NonCommercial purposes only.
2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions.
3. __Term.__ The term of this Public License is specified in Section 6(a).
4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material.
5. __Downstream recipients.__
A. __Offer from the Licensor – Licensed Material.__ Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License.
B. __No downstream restrictions.__ You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
6. __No endorsement.__ Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i).
b. ___Other rights.___
1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise.
2. Patent and trademark rights are not licensed under this Public License.
3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes.
### Section 3 – License Conditions.
Your exercise of the Licensed Rights is expressly made subject to the following conditions.
a. ___Attribution.___
1. If You Share the Licensed Material (including in modified form), You must:
A. retain the following if it is supplied by the Licensor with the Licensed Material:
i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
ii. a copyright notice;
iii. a notice that refers to this Public License;
iv. a notice that refers to the disclaimer of warranties;
v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License.
2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information.
3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable.
4. If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of the Adapted Material from complying with this Public License.
### Section 4 – Sui Generis Database Rights.
Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only;
b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and
c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database.
For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights.
### Section 5 – Disclaimer of Warranties and Limitation of Liability.
a. __Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.__
b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__
c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
### Section 6 – Term and Termination.
a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically.
b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:
1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or
2. upon express reinstatement by the Licensor.
For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License.
c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License.
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
### Section 7 – Other Terms and Conditions.
a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed.
b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License.
### Section 8 – Interpretation.
a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License.
b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions.
c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor.
d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority.
> Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the “Licensor.” Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at [creativecommons.org/policies](http://creativecommons.org/policies), Creative Commons does not authorize the use of the trademark “Creative Commons” or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses.
>
> Creative Commons may be contacted at creativecommons.org
================================================
FILE: README.md
================================================
<h1 align="center"><a href="https://frontendmasters.com/courses/vim-fundamentals/">VIM Fundamentals Course by ThePrimeagen</a></h1> <br>
<p align="center">
As taught by ThePrimeagen for Frontend Masters
</p>
<p align="center">
📝 <a href="https://theprimeagen.github.io/vim-fundamentals/">Course Website: VIM Fundamentals</a>
</p>
Fly through code faster than you thought possible using VIM! You’ll learn the basics of editing and even know how to exit VIM. Go deeper with navigation, macros, registers, find, and replaces. Then edit your vimrc plugins along with quickfix lists. Lastly, see ThePrimeagen demonstrate his ideal VIM workflow.
## License
The **code** is this repo is licensed under the Apache 2.0 license.
The **content** is this repo is licensed under the CC-BY-NC-4.0 license.
================================================
FILE: course-website/.editorconfig
================================================
root = true
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 2
================================================
FILE: course-website/.eslintrc.json
================================================
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier",
"prettier/react"
],
"rules": {
"react/prop-types": 0,
"jsx-a11y/label-has-for": 0,
"no-console": 1
},
"plugins": ["react", "import", "jsx-a11y"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "16.5.2"
}
}
}
================================================
FILE: course-website/.github/workflows/gatsby.yml
================================================
name: Deploy Gatsby Site to GitHub Pages
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: npm install, build, and csv
run: |
npm install
npm run build
npm run csv
- name: Deploy site to gh-pages branch
uses: alex-page/blazing-fast-gh-pages-deploy@v1.1.0
with:
repo-token: ${{ secrets.ACCESS_TOKEN }}
site-directory: public
================================================
FILE: course-website/.gitignore
================================================
# Project dependencies
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.cache/
# Build directory
public/
.DS_Store
yarn-error.log
================================================
FILE: course-website/.prettierrc
================================================
{}
================================================
FILE: course-website/LICENSE
================================================
## creative commons
# Attribution-NonCommercial 4.0 International
Creative Commons Corporation (“Creative Commons”) is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship. Creative Commons makes its licenses and related information available on an “as-is” basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and conditions, or any related information. Creative Commons disclaims all liability for damages resulting from their use to the fullest extent possible.
### Using Creative Commons Public Licenses
Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works of authorship and other material subject to copyright and certain other rights specified in the public license below. The following considerations are for informational purposes only, are not exhaustive, and do not form part of our licenses.
* __Considerations for licensors:__ Our public licenses are intended for use by those authorized to give the public permission to use material in ways otherwise restricted by copyright and certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and conditions of the license they choose before applying it. Licensors should also secure all rights necessary before applying our licenses so that the public can reuse the material as expected. Licensors should clearly mark any material not subject to the license. This includes other CC-licensed material, or material used under an exception or limitation to copyright. [More considerations for licensors](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors).
* __Considerations for the public:__ By using one of our public licenses, a licensor grants the public permission to use the licensed material under specified terms and conditions. If the licensor’s permission is not necessary for any reason–for example, because of any applicable exception or limitation to copyright–then that use is not regulated by the license. Our licenses grant only permissions under copyright and certain other rights that a licensor has authority to grant. Use of the licensed material may still be restricted for other reasons, including because others have copyright or other rights in the material. A licensor may make special requests, such as asking that all changes be marked or described. Although not required by our licenses, you are encouraged to respect those requests where reasonable. [More considerations for the public](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees).
## Creative Commons Attribution-NonCommercial 4.0 International Public License
By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
### Section 1 – Definitions.
a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image.
b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License.
c. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
d. __Effective Technological Measures__ means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements.
e. __Exceptions and Limitations__ means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
f. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
g. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
h. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License.
i. __NonCommercial__ means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange.
j. __Share__ means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them.
k. __Sui Generis Database Rights__ means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
l. __You__ means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning.
### Section 2 – Scope.
a. ___License grant.___
1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to:
A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and
B. produce, reproduce, and Share Adapted Material for NonCommercial purposes only.
2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions.
3. __Term.__ The term of this Public License is specified in Section 6(a).
4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material.
5. __Downstream recipients.__
A. __Offer from the Licensor – Licensed Material.__ Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License.
B. __No downstream restrictions.__ You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
6. __No endorsement.__ Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i).
b. ___Other rights.___
1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise.
2. Patent and trademark rights are not licensed under this Public License.
3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes.
### Section 3 – License Conditions.
Your exercise of the Licensed Rights is expressly made subject to the following conditions.
a. ___Attribution.___
1. If You Share the Licensed Material (including in modified form), You must:
A. retain the following if it is supplied by the Licensor with the Licensed Material:
i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
ii. a copyright notice;
iii. a notice that refers to this Public License;
iv. a notice that refers to the disclaimer of warranties;
v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License.
2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information.
3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable.
4. If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of the Adapted Material from complying with this Public License.
### Section 4 – Sui Generis Database Rights.
Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only;
b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and
c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database.
For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights.
### Section 5 – Disclaimer of Warranties and Limitation of Liability.
a. __Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.__
b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__
c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
### Section 6 – Term and Termination.
a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically.
b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:
1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or
2. upon express reinstatement by the Licensor.
For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License.
c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License.
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
### Section 7 – Other Terms and Conditions.
a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed.
b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License.
### Section 8 – Interpretation.
a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License.
b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions.
c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor.
d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority.
> Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the “Licensor.” Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at [creativecommons.org/policies](http://creativecommons.org/policies), Creative Commons does not authorize the use of the trademark “Creative Commons” or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses.
>
> Creative Commons may be contacted at creativecommons.org
================================================
FILE: course-website/README.md
================================================
<h1 align="center">gatsby-course-starter</h1> <br>
<p align="center">
A Gatsby starter to get you started creating educational materials using Markdown
</p>
## Get Started
1. `npm install --global gatsby-cli` - make sure you're on Gatsby v2+
- See [docs here](https://next.gatsbyjs.org/docs/) if you need help
1. `gatsby new course-website https://github.com/btholt/gatsby-course-starter`
1. `cd course-website`
1. `npm run dev`
1. Open http://localhost:8000 in your browser
## Lessons
The crux of this site is are the lessons. Provided are two examples. Each lesson needs a [frontmattter](https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/adding-markdown-pages.md#note-on-creating-markdown-files) `path`, `order`, and `title`. Generally you should make the `path` and the file name match for ease of finding it.
- `path` - needs a leading slash. This will be slug of the lesson
- `title` - will be the title displayed on the Table of Contents and on the page itself
- `order` - the order of which the item should appear in the table of contents. should in `<number><capital letter>` format where the number corresponds to the section it's and the letter corresponds to the order of the lesson inside the section, e.g. `3B`
- `section` - the title of the section that the article is in. Only the first lesson for each section will be used.
- `description` – a one-to-three sentence summary of the lesson. used for the meta tag for social shares and SEO. if no description is given, the `siteMetadata.description` for the site is used
## Config
Inside of `gatsby-config.js` be sure to fill out the `siteMetadata` fields, including `title`, `subtitle`, `description`, and `keywords`.
## GitHub Pages
If you do want to deploy to GitHub pages, make sure you add the name of the repo to the `pathPrefix` property in `gatsby-config.js` so that it will correctly make all the links.
## GitHub Actions
This site is ready to deployed to GitHub Pages out of the box with GitHub Actions. If you do not want to deploy this to GitHub Pages, delete the `.github` directory.
If you do want to deploy this to GitHub Pages with GitHub Actions, you need to do a few things.
1. Create a [personal access token](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line) with rights to read and write to repos.
1. Put that token in your repos secrets. Click the Settings tab and paste your access token in the Secrets tab with the key `ACCESS_TOKEN`.
1. Now once you commit your code, it should automatically deploy your GitHub Pages site should deploy automatically!
## Example Sites
- [This repo itself](https://btholt.github.io/gatsby-course-starter/)
- [Complete Intro to Containers](https://btholt.github.io/complete-intro-to-containers/)
- [Complete Intro to React v5](https://btholt.github.io/complete-intro-to-react-v5/)
- [Complete Intro to Web Dev v2](https://btholt.github.io/intro-to-web-dev-v2/)
- [Four Semesters of Computer Science in Five Hours Part II](https://btholt.github.io/four-semesters-of-cs-part-two/)
## CSV
If you run `npm run csv`, a CSV will be generated with all the various lessons' frontmatter outputted to `public/lessons.csv`. You can change the path by changing the `OUTPUT_CSV_PATH` environment variable.
Another CSV will be output to `public/links.csv` where it pull all the links out of each lesson and put them into a CSV. This path can be modified by setting the `LINKS_CSV_PATH` environment variable.
## License
The **code** is this repo is licensed under the Apache 2.0 license.
I include the CC-BY-NC-4.0 license for the content; this is what I recommend you license your **content** under: anyone can use and share the content but they cannot sell it; only you can.
================================================
FILE: course-website/csv.js
================================================
const fs = require("fs").promises;
const path = require("path");
const fm = require("front-matter");
const isUrl = require("is-url-superb");
const parseLinks = require("parse-markdown-links");
const { sorter } = require("./src/util/helpers");
const mdDir = process.env.MARKDOWN_DIR || path.join(__dirname, "lessons/");
const outputPath =
process.env.OUTPUT_CSV_PATH || path.join(__dirname, "public/lessons.csv");
const linksOutputPath =
process.env.LINKS_CSV_PATH || path.join(__dirname, "public/links.csv");
async function createCsv() {
console.log(`making the markdown files into a CSV from ${mdDir}`);
// get paths
const allFiles = await fs.readdir(mdDir);
const files = allFiles.filter(filePath => filePath.endsWith(".md"));
// read paths, get buffers
const buffers = await Promise.all(
files.map(filePath => fs.readFile(path.join(mdDir, filePath)))
);
// make buffers strings
const contents = buffers.map(content => content.toString());
// make strings objects
let frontmatters = contents.map(fm);
// find all attribute keys
const seenAttributes = new Set();
frontmatters.forEach(item => {
Object.keys(item.attributes).forEach(attr => seenAttributes.add(attr));
});
const attributes = Array.from(seenAttributes.values());
if (attributes.includes("order")) {
frontmatters = frontmatters.sort(sorter);
}
// get all data into an array
let rows = frontmatters.map(item => {
const row = attributes.map(attr =>
item.attributes[attr] ? JSON.stringify(item.attributes[attr]) : ""
);
return row;
});
// header row must be first row
rows.unshift(attributes);
// join into CSV string
const csv = rows.map(row => row.join(",")).join("\n");
// write file out
await fs.writeFile(outputPath, csv);
console.log(`Wrote ${rows.length} rows to ${outputPath}`);
// make links csv
let longestLength = 0;
let linksArray = frontmatters.map(row => {
const links = parseLinks(row.body).filter(isUrl);
longestLength = longestLength > links.length ? longestLength : links.length;
const newRow = [row.attributes.order, row.attributes.title, ...links];
return newRow;
});
if (longestLength) {
// add title row
linksArray = linksArray.map(array => {
const lengthToFill = longestLength + 2 - array.length;
return array.concat(Array.from({ length: lengthToFill }).fill(""));
});
linksArray.unshift(
["order", "title"].concat(
Array.from({ length: longestLength }).map((_, index) => `link${index}`)
)
);
// join into CSV string
const linksCsv = linksArray.map(row => row.join(",")).join("\n");
// write file out
await fs.writeFile(linksOutputPath, linksCsv);
console.log(`Wrote ${linksArray.length} rows to ${linksOutputPath}`);
}
}
createCsv();
================================================
FILE: course-website/exercise
================================================
---
path: "/exercise-3"
title: "Search and Replace"
order: "72A"
section: "Search and Replace"
description: "Search and Replace!"
---
## Warning
DO NOT SAVE WHILE DOING THIS EXERCISE
if you do, recurl down this file!
### Basic Search
search for `error` by typing `/error<CR>`
error
Lets type a command in. :set hls ic
What just happened?
Re-search `error`
error
But you can do more! try searching `/err.*or<CR>`
errooentuhoneuhnoteuhnotehuor
* Notice that it matched a huge portion on top. That is because regexs will
match the most it can.
### Search and Replace
replace "foo" with "baz" by typing `:s/foo/baz<CR>`
foo bar baz
Try again but notice that it only replaces one foo at a time.
foo foo foo foo
replace "foo" with "baz" by typing `:s/foo/baz/g<CR>`
foo foo foo foo
replace "foo" with "baz" by typing `:s/foo/baz/gc<CR>`
foo foo foo foo
#### Ranged search & replace
```typescript
function foo() {
const a = "foo";
const b = [
"foo",
"foo",
"foo",
"foo",
];
if ("foo") {
return "foo";
}
return "baz";
}
```
#### Full File
Lets execute `:%s/foo/bar/gc`, but first exit without saving `:q!` and reopen
this file
#### But what about full project find and replace
I am going to leave this out of this course.
================================================
FILE: course-website/gatsby-config.js
================================================
module.exports = {
siteMetadata: {
title: "Vim Fundamentals",
subtitle: "Making vim approachable!",
description:
"This is a survey of vim, how it works, and how to become a sensai of vimfu.",
keywords: [
"Vim",
"Awesome",
"Coconut Oil",
"ThePrimeagen"
]
},
pathPrefix: "/vim-fundamentals",
plugins: [
`gatsby-plugin-sharp`,
`gatsby-plugin-layout`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/lessons`,
name: "markdown-pages"
}
},
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-autolink-headers`,
`gatsby-remark-copy-linked-files`,
`gatsby-remark-prismjs`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
linkImagesToOriginal: true,
sizeByPixelDensity: false
}
}
]
}
}
]
};
================================================
FILE: course-website/gatsby-node.js
================================================
const path = require("path");
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions;
const lessonTemplate = path.resolve(`src/templates/lessonTemplate.js`);
return graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___order] }
limit: 1000
) {
edges {
node {
excerpt(pruneLength: 250)
html
id
frontmatter {
order
path
title
}
}
}
}
}
`).then(result => {
if (result.errors) {
return Promise.reject(result.errors);
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: lessonTemplate
});
});
});
};
================================================
FILE: course-website/lessons/adv-pitstop.md
================================================
---
path: "/adv-pit-stop"
title: "Pit Stop"
order: "53A"
section: "Advanced Text Manipulation"
description: "There has been a lot of info. Lets recap!"
---
### The Recap Recap
#### Basic Movements
#### File Navigation
#### Vim RC
### Moving forward
We are going to step it up a notch and improve our knowledge of vim Motions.
Here is the deal. You don't need to remember them all. You need to know they
exist. As you get more familiar the motions and concepts that seem hard today
are trivial tomorrow.
================================================
FILE: course-website/lessons/advanced-movements-1.md
================================================
---
path: "/adv-motions"
title: "Advanced Motions"
order: "54A"
section: "Advanced Text Manipulation"
description: "And you thawght you knew Motions..."
---
We have already covered some of the horizontal and vertical motions, `I`/`A`
and `<count>j`/`k` are great examples of fast motions. But if that is all we
had, VIM would just be lacking in luster.
### Quick Recap
Motion: A command that moves the cursor.
* modified with a count
* 5j instead of jjjjj
* modify an "action" with a movement
* 5dd and d4j are "equivalent"
### There are more motions!
* G and gg bottom or top respectively
* do you think you can dG?
lets do an exercise and go over some advanced motions!
#### Example time
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-6-motions.md > exercise.md && vim exercise.md
```
================================================
FILE: course-website/lessons/advanced-text-manipulation-1.md
================================================
---
path: "/search-and-replace"
title: "Search And Replace"
order: "50A"
section: "Advanced Text Manipulation"
description: "Search and replace. Regex licences may be required."
---
Were are getting to the end game of vim. There is still so much out there, but
for the sake of surveying, this is where we will end. We will cover Search and
Replace, Macros, and finally registers.
### Search and Replace
Lets go through a search and replace exercise. This should help us get the
foundation of basic search and replace
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-3-search-and-replace.md > exercise.md && vim exercise.md
```
================================================
FILE: course-website/lessons/advanced-text-manipulation-2.md
================================================
---
path: "/macros"
title: "Macros"
order: "51A"
section: "Advanced Text Manipulation"
description: "Macros. Yes, they seem more confusing than they are."
---
This is where things can get fun. Also, they are a bit psychologically
weird... Meaning, you will find yourself feeling like you don't know how to do
the most basic of moves. If this happens, its ok. Its called Macro Pressure.
### What is a Macro
A macro simply plays text as motions, inputs, and commands.
#### Let me show you!
I remember my first macro like it was yesterday.....
#### Example time
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-4-macros.md > exercise.md && vim exercise.md
```
================================================
FILE: course-website/lessons/advanced-text-manipulation-3.md
================================================
---
path: "/registers"
title: "Registers"
order: "52A"
section: "Advanced Text Manipulation"
description: "Registers. Definitely hard to imagine them not being hard."
---
### My slogan for registers
> Definitely hard to imagine them not being hard.
### What is a register?
It is a key -> value
The `key` is a character
The `value` is a string
#### Example time
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-5-registers.md > exercise.md && vim exercise.md
```
================================================
FILE: course-website/lessons/are-you-ready.md
================================================
---
path: "/are-you-ready"
title: "Are You Ready?"
order: "3A"
description: "The final hurrah! before diving into vim!"
section: "Introduction"
---
At this point I hope you are ready. But I wanted to take a moment to let you
know three things.
* This is a journey, its not a day trip
* The journey is uphill
* The top of the mountain is incredible
### For the live class
I stream on twitch, so feel free to ask questions at any point and I can pivot
if its beneficial for all or I'll answer the question at the end of the
section.
### Proper Github projects
1. Clone this presentation project down and open up the files, or go to the
website and use the curl commands to open up vim. I recommend just going to
the website.
[Vim Fundamentals](theprimeagen.github.io/vim-fundamentals)
2. git clone https://github.com/ThePrimeagen/vim-nav-playground.git
### Clean your environment
If you use vim, remove your vimrc and any plugins. We are going bare bones and
working our way up.
There is a basic script to stash and restore your vim env in vim-nav-playground
in the tools folder.
================================================
FILE: course-website/lessons/basic-usage.md
================================================
---
path: "/basic-usage"
title: "Using Vim"
order: "5A"
description: "Let's use vim for the first time!"
section: "Basics"
---
Before we start editing files, lets get familiar with some basic movements.
Navigate back to the empty directory and type in the following.
```bash
> vim test.js
```
You are now in `NORMAL` mode. This probably doesn't feel all that normal.
And you are right, its really not that normal.
## Lets talk Modes
There are a few modes that you should be aware of.
* Normal
* Insert
* Visual
* Visual Line
## My First If Statement
Lets write our first if statement.
Currently, you are in `NORMAL` mode. This is where you can execute commands
to navigate, edit, and execute vim/sys commands. To get out of this mode,
press `i`
After pressing `i` you should see something like `-- INSERT --` in the bottom
left hand side of vim.
Now that you are in insert mode, type the following
```js
if (true) {
}
```
Press `<esc>` or `<Ctrl-c>` (abbreviated `<C-c>`) to leave `INSERT` mode and back
to `NORMAL`.
Goodness, isn't default vim ugly?
type `:q` to quit vim. Also, don't tell anyone.
## My First Moves
### Basic navigation
time to curl down our first little exercise
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-0-hjkl-x.md > exercise.md && vim exercise.md
```
### Deleting, Yanking, and Pasting
These are going to be some of your fundamental movements within vim. This is
where you will see some significant speed ups compared to a conventional editor.
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-1-dyp.md > exercise.md && vim exercise.md
```
### Insert!
We are going to go over entering into insert mode
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-2-insert.md > exercise.md && vim exercise.md
```
## Recap
Lets talk about what happened. I would love to get some feedback from you.
What do you think about all of this nonsense? Does it seem like to much? Or
does it seem exciting? I hope you are excited.
### We learned
* h,j,k,l for basic movement.
* w,b for word hopping. Effectively the same as Option/Ctrl + arrow keys
* yy to "copy" a line, called Yank
* dd to delete, and yank, a line
* p and P to paste the contents of the implicit register below / above
* Most of the ways to go into insert mode!
* i and a for which side of the cursor
* I and A for which side of the line
* o and O for belowe / above line
* zz - I snuck that one in...
That is a grand total of 16 different motions
================================================
FILE: course-website/lessons/color-my-pencils.md
================================================
---
path: "/color-my-pencils"
title: "Color My Pencils"
order: "10A"
description: "Lets set some colorschemes"
section: "The VimRC"
---
So to change your `colorscheme` what should you do?
If you answered "Help Menu!" you are a fantastic! Please execute `h:
colorsc<tab><Cr>`
try executing the following
```
:colorscheme <C-d>
```
Pick anything that autocompletes! Much like set options, it will only persist
for this vim session. Writing it to your vimrc and open up file you commonly
edit and behold the beauty!
These are not the only colorschemes that you can have. Plenty of plugins
provide many more.
## Recap
Ok. This is probably getting a bit overwhelming. A lot of this comes with
practice and as you use this it becomes second nature.
I'll say it again.
* This is a journey, its not a day trip
* The journey is uphill
* The top of the mountain is incredible
### What we learned
* Using the help menu.
* navigating the all the set options.
* Using tab and <C-d>
* Arrows vs <C-p> and <C-n>
* Set options
* The power to control how our editor operates through sets.
* Colorschemes
* How to set them and peruse them.
* We learned things about motions.
* dd can become <count>dd
* Moving with 10j / 10k. Wowow
### Extend it
Do you think you could do anything with `y` and `p`? Could `yj` work? What
does it do? Why? What about `5p`? What do you think happens? Why?
### Foundation
We have built the foundation. You know about customizing your vim experience
and you know how to basically move around. The only thing left is really
optimizing! And there is practically an infinite amount of optimizing!
================================================
FILE: course-website/lessons/exercise-0-hjkl-x.md
================================================
---
path: "/exercise-0"
title: "hjkl-x"
order: "69A"
section: "Misc Content"
description: "This is the first exercise to try out."
---
## NOTE
To use the exercises, please curl the file to your machine and edit it with vim.
## Exercise 0: Basic movement, h, j, k, l, w, b
### press j to go down
### press l to follow the line
---------------------------o " press x to delete the o
" press j to go to the next action
### press l and j to follow the line and x to delete the o
-+
|
|
+------+
|
|
+------+
|
|
+------o
### press l and j and h to follow the line and x to delete the o
-+
|
|
+------+
|
|
+------+
|
+------+
|
|
o------+
### press l, j, h, and k to follow the line and x to delete the o
-+ +------+ +------+ +-----o
| | | | | |
| | | | | |
+------+ | | +------+
| |
+------+ |
| |
| |
| |
+-------------+
### press w to get to o and press x to delete
+-+ +------+ +------+ +-----o
### b = inverse w: press w, j, and b to get to o and press x to delete
+-+ +------+ +------+ +-----+
|
o-+ +------+ +------+ +-----+
### Go in circles until you feel good
+------+
| |
| |
| |
+------+------+
| |
| |
| |
+------+
================================================
FILE: course-website/lessons/exercise-1-dyp.md
================================================
---
path: "/exercise-1"
title: "dyp"
order: "70A"
section: "Misc Content"
description: "This is the basic movement and editing of text"
---
## NOTE
To use the exercises, please curl the file to your machine and edit it with vim.
## Exercise 1: Basic Editing
### Delete a line with dd
delete me 1
delete me 2
delete me 3
delete me 4
### Yank and paste. yy to yank line, p to paste line below, P above
yank me and paste below (yyp)
yank me and paste above (yyP)
### Visual Mode
#### Visual Mode
Highlight part of this line by pressing v, then navigate around
escape to leave visual mode
#### Visual Line Mode
Highlight this line by pressing V, then navigate around
escape to leave visual mode
#### Visual Mode + y / p
Highlight this line by pressing V, then press y (What happened?)
press p (What happened?)
Highlight this point by pressing v, press wy (What happened?)
press p (What happened?)
Lets repeat but with d instead of y, (What happened?)
## Part 3: The relationship of y / d
:h reg
:reg
What did we see there?
yank this line
What happened to the registers?
================================================
FILE: course-website/lessons/exercise-2-insert.md
================================================
---
path: "/exercise-2"
title: "insert"
order: "71A"
section: "Misc Content"
description: "Insertion! There are many ways to go into INSERT mode."
---
## Exercise 2: Insert mode
There are a few ways to go into insert mode (I also am not including about
another 10...)
i: left side of cursor
a: right side of cursor
----I:
A: -----
o: insert new line below line and go into insert mode
O: insert new line above line and go into insert mode
lets play around
================================================
FILE: course-website/lessons/exercise-3-search-and-replace.md
================================================
---
path: "/exercise-3"
title: "Search and Replace"
order: "72A"
section: "Misc Content"
description: "Search and Replace!"
---
### Basic Search
search for `error` by typing `/error<CR>`
error
Lets type a command in. :set hls ic
What just happened?
Re-search `error`
error
But you can do more! try searching `/err.*or<CR>`
errooentuhoneuhnoteuhnotehuor
* Notice that it matched a huge portion on top. That is because regexs will
match the most it can.
### Search and Replace
replace "foo" with "baz" by typing `:s/foo/baz<CR>`
foo bar baz
Try again but notice that it only replaces one foo at a time.
foo foo foo foo
replace "foo" with "baz" by typing `:s/foo/baz/g<CR>`
foo foo foo foo
replace "foo" with "baz" by typing `:s/foo/baz/gc<CR>`
foo foo foo foo
#### Ranged search & replace
```typescript
function foo() {
const a = "foo";
const b = [
"foo",
"foo",
"foo",
"foo",
];
if ("foo") {
return "foo";
}
return "baz";
}
```
#### Full File
Lets execute `:%s/foo/bar/gc`, but first exit without saving `:q!` and reopen
this file
#### But what about full project find and replace
I am going to leave this out of this course.
================================================
FILE: course-website/lessons/exercise-4-macros.md
================================================
---
path: "/exercise-4"
title: "Macros"
order: "73A"
section: "Misc Content"
description: "Macros"
---
// Yes I wrote this code with a macro
if (someValue == "someOtherValue1") {
return 1
} else if (someValue == "someOtherValue2") {
return 2
} else if (someValue == "someOtherValue3") {
return 3
} else if (someValue == "someOtherValue4") {
return 4
} else if (someValue == "someOtherValue5") {
return 5
} else if (someValue == "someOtherValue6") {
return 6
} else if (someValue == "someOtherValue7") {
return 7
} else if (someValue == "someOtherValue8") {
return 8
} else if (someValue == "someOtherValue9") {
return 9
} else if (someValue == "someOtherValue10") {
return 10
} else if (someValue == "someOtherValue11") {
return 11
} else if (someValue == "someOtherValue12") {
return 12
} else if (someValue == "someOtherValue13") {
return 13
} else if (someValue == "someOtherValue14") {
return 14
} else if (someValue == "someOtherValue15") {
return 15
} else if (someValue == "someOtherValue16") {
return 16
} else if (someValue == "someOtherValue17") {
return 17
} else if (someValue == "someOtherValue18") {
return 18
}
================================================
FILE: course-website/lessons/exercise-5-registers.md
================================================
---
path: "/exercise-5"
title: "Registers"
order: "74A"
section: "Misc Content"
description: "Registers. Definitely hard to imagine them not being hard."
---
### Register Basics
So lets copy the following line
foo
Now type in :reg
Notice that `foo` appears two times. We are seeing foo twice because `foo` is
in our first register and our implicit register. Our first register is denoted
with 0 (0th may be better term) and implicit is ".
Paste with `p` 3 times
foo
foo
foo
highlight and yank all three `foo`s. Lets resee what is in our `:reg`. Notice
that we replaced our implicit register and our 0th register.
Why didnt 0 become 1?
Go back up to a line with foo and delete 1. What just happened? Inspect your
`:reg`
Delete a few more lines and re-inspect your register. What you should observe,
and can be found in `:h reg` is that your implicit register `"` is _always_ the
latest yank or delete. It is also what is used when pasting. We _knew_ this
from our previous lesson, but now we observe why.
### How do we interact with registers?
We see how our actions are side effects to the state of the registers. But
what if you wanted to paste or yank explicitly? Good thing we have a clue.
Notice that every register starts with `"`. Lets `:h "`
So lets yank into our `a` register. Move to the line below and type `V"ay`
foofoofoo
Now lets inspect our registers.
How do we paste from a register?
### Lets do something crazy
Copy, paste, and increment the number below 3 times using a macro
1.
Now lets check registers. What do you see? Is your mind blown? What does
this mean we can do?
================================================
FILE: course-website/lessons/exercise-6-motions.md
================================================
---
path: "/exercise-6"
title: "Advanced Motions"
order: "75A"
section: "Misc Content"
description: "Motions 201"
---
### Change
`c` is a powerful motion. You use it just like `d` but at the end of the
motion you are ejected from `NORMAL` and into `INSERT`.
So if you wished to delete a word and then type in a new word, `c` is a great
habit to form.
Lets see the difference
// dd this line
// cc this line
### Horizontal Movement
Lets learn about!: `_`, `0`, `$`, `D`, `C`, `S`, `f`, `,`, `;`, `t`, `F`, and `T`
// How would we move around on the line with "contents"
if (true) {
contents conTenTs contenTS
}
### Vertical Movement
#### Core movement
Rely on relative jumps. Get good at them.
If you get NeoVim, try VimBeGood
#### { and }
We know about search. That is a vertical movement, but its really specific.
First lets talk `{` and `}`
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
##### Benefits? Class chat
This next one is a bit odd
#### Ctrl+u/d
So lets do another type of navigation.
Try pressing `<C-d>`
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
##### Benefits? Class chat
#### [m / ]m and [M / ]M
This will move by "function". It works pretty well in c languages.
Move your cusor to this line and press `]m`. Try moving back and forth and try
the uppercase version as well.
if (foo) {
some content
some content
some content
some content
function bar() {
some other content
some other content
some other content
some other content
}
function baz() {
other content
other content
other content
other content
}
}
##### Benefits?
#### %
Ok,.... soo this isn't a pure vertical motion. It actually is a pair jumper
if (true) {
content
const a = [
content,
content,
content,
]
"content"
content
content
}
Lets combine it with a motion. Delete the `const a =...` statement.
### Get zany...
Lets look at the following statement, what are some ways you can delete the
contents of the if statement?
if (true) {
line1
line2
line3
line4
line5
}
I was hoping to hear `f{V%D`. That is just so sexy. `d4j` is ok. Relative
jump, well done.. `5dd` meh. I would glad hand like a politician with `dd dd
dd dd dd`. Just say mean things behind your back.
So lets try again.. but I spiced it up.
if (true) {
line1
// Some distance
line2
line3
line4
line5
}
First, place your cursor _in_ the if statement. Where ever you want. Type `di{`
i = inside
#### Class Discussion
What _other_ letter do you think you could try other than `i`?
.
.
.
.
.
.
.
use `<C-d>` to go down...
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
// TODO: make a meme -- aliens..
Yes, `a` is the other. I have never heard a great reason why, but just deal
with it.
so lets try again. try `da{`
if (true) {
line1
// Some distance
line2
line3
line4
line5
}
well shoot...
#### Class Discussion
Lets solve this together
if (true) {
line1
// Some distance
line2
line3
line4
line5
}
.
.
.
.
.
.
.
.
.
.
For those that couldn't wait or got the answer. `va{Vd`
#### Use YOUR SUPER POWERS
lets redo the previous exercise except copy from one if statement and override
the next if statement. How would we go about this?
if (true) {
line1
// Some distance
line2
line3
line4
line5
}
if (true) {
replace_me_1
// Some distance
replace_me_2
replace_me_3
replace_me_4
replace_me_5
}
================================================
FILE: course-website/lessons/files-e.md
================================================
---
path: "/files-e"
title: "Files and Navigations - Edit"
order: "15A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with e."
---
There are other ways to open files in vim. You are not restricted to just
using the file tree. There is also `:e`. `e` is short for `edit`.
Lets explore! You can always read the help menu, `:h e` but we don't need to
do that!
Lets reopen back up our `vim-nav-playground` project.
lets type `:e <ctrl-d>`. You should see the following
There is also tab completion! Try it out. `:e <tab>`. But how do we navigate
the popup list? Well there are two options. There is the vim way, and the
default way that most people would do. I bet you can guess which one you
already know... :)
Anywho, arrow keys work, but eww. `<C-p>` (Ctrl+p, remember this is vim
syntax). and `<C-n>` mean previous and next respectively.
### Fuzzy find anyone?
Yes, please! Of course there is a fuzzy finder, but those are installed as
plugins. We are not quite there, so let me just show you one of them. It is
called `telescope.nvim` and is available on neovim only. It has an absurd
amount of features. I'll only show the fuzzy file finder.
================================================
FILE: course-website/lessons/files-intro.md
================================================
---
path: "/files"
title: "Files and Navigations"
order: "11A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files."
---
As you imagined there is the "Vim" way to do everything. But the good news is
that there are many a plugin to make this process easier. Lets start off by
learning some built in vim ways and then expand from there.
First, lets clone a small test repo
ssh
```bash
git clone git@github.com:ThePrimeagen/vim-nav-playground.git
```
https
```bash
git clone https://github.com/ThePrimeagen/vim-nav-playground.git
```
navigate to `vim-nav-playground` and open up vim by opening up the directory in
vim.
```bash
cd vim-nav-playground
vim .
```
This should be what you are seeing (bar the colorscheme)
================================================
FILE: course-website/lessons/files-marks.md
================================================
---
path: "/files-marks"
title: "Files and Navigations - Marks"
order: "16A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with marks."
---
## Marks
Now marks are both incredible and also confusing at the same. Effectively vim
gives you the ability to mark files both globally and locally. This means with
just a swift couple taps of the finger you could be in a file marked. I find
marks definitely the end game of file navigation, but they are hard to do well.
So lets open up 3 files in `vim-nav-playground` and mark each one.
First lets open one file, `src/sockets.c`. Use your favorite way to open up
this file.
```
:e src/sockets.c
```
Then mark it by typing `m` then an **uppercase** character of your choice.
Repeat with `src/twitch.c` and `src/another.c` with different uppercase
characters. Remember the 3 characters you chose.
To navigate to the files you marked simply press `'<MarkLetter>`. So for me, I
chose `G` for `sockets.c`, and to navigate there I simply press `'G`.
### Some mark theory
* What marks did you choose?
* Why?
* Do you see some strategies?
* Strategies I have heard of
* My strategies
================================================
FILE: course-website/lessons/files-netrw.md
================================================
---
path: "/files-netrw"
title: "Files and Navigations - NetRW"
order: "12A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with NetRW."
---
NetRW is the default browsing of the filesystem plugin, and it comes with vim
for years now. It is available in both Vim and NeoVim.
Please navigate to `vim-nav-playground`. If you did not clone it, it can be
found [here](https://github.com/ThePrimeagen/vim-nav-playground)
Lets go over some basic movements. You can use all the same navigation as you
would while editing, but for file navigation.
```viml
vim .
```
Lets go down, `j`, to `src` and press `<CR>` (enter). Notice that it opens the
folder. We see a couple of files. Lets scroll to `twitch.c` and press `<CR>`.
What just happened?
How do we open back up our file navigation?
```viml
:Vex
```
`:Vex` stands for (V)ertical (ex)plore. Meaning, split the current view
experience vertically (direction of line) and insert a netrw at current
buffer location.
This is pretty - ok -. Hopefully, if you are of the vim mentality, you are
thinking it cannot take this many keystrokes just to do these things. I must
be able to customize the netrw experience. The answer, of course, is yes to
both.
Lets step up our vim knowledge.
================================================
FILE: course-website/lessons/files-recap.md
================================================
---
path: "/files-recap"
title: "Files and Navigations - Recap"
order: "17A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with e."
---
### Recap
Wow we have learned a lot! Lets chat about what we have learned.
* NetRW
* `:e`
* `<tab>` and `<C-d>`
* `<C-p>` and `<C-n>` for navigating pop-up lists
* remaps
* marks
* :Vex
* so %
* more on %. try typing `:echo expand("%")` Or `"%p` What happened here?
How are we feeling? Do you feel like you have no more room to learn? I get
that we are sort of on information overload. Lets take a break and just talk
about what we have learned overall.
### One more thing. Alternate File
I don't think I accidentally talk about this elsewhere.
### One more thing. Jumplist
I don't think I accidentally talk about this elsewhere.
================================================
FILE: course-website/lessons/files-remaps-1.md
================================================
---
path: "/files-remaps-1"
title: "Files and Navigations - Remaps part 1"
order: "13A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with NetRW."
---
First, lets quit our current vim experience and re-open up our vimrc.
```bash
# for vim
vim ~/.vimrc
```
```bash
# for neovim - this may be different depending on your flavor
vim ~/.config/nvim/init.vim
```
If your path is different for neovim but you don't know what it is, execute the
following in neovim to expose the path!!!
```viml
" Neovim only
:echo stdpath("config")
```
If you didn't save everything from the vim rc section, here is the complete
vimrc thus far from [Vim My Way](/vim-my-way) and [Color My
Pencils](/color-my-pencils).
```viml
set scrolloff=8
set number
set relativenumber
set tabstop=4 softtabstop=4
set shiftwidth=4
set expandtab
set smartindent
" This was from the colorscheme section
colorscheme desert
```
================================================
FILE: course-website/lessons/files-remaps-2.md
================================================
---
path: "/files-remaps-2"
title: "Files and Navigations - Remaps part 2"
order: "14A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with NetRW."
---
### Remaps
Remaps are a powerful way to redefine your vim exerience the way you would like
it.
In your vim rc, add the following line
```viml
let mapleader = " "
nnoremap <leader>pv :Vex<CR>
```
First, what is `let mapleader = " "`. Leader is a way to set a custom key in
vim that can be referenced in remaps as `<leader>`.
Second, what is `nnoremap`? Well its the syntax for a remap. Lets break it down
```viml
mode lhs rhs
```
#### mode
lets go over the meaning of the mode. The mode is what mode (INSERT, NORMAL,
VISUAL) that this remap should work in. Here is the exact breakdown of the
remap.
```viml
" normal mode no recursive execution map A -> B
n nore map
```
#### lhs
lhs is the set of keys to execute the remap. In this case `<leader>pv` or
`<space>pv`.
#### rhs
rhs is the command to execute after the `lhs` has been typed in. In this case
we will type the command `:Vex<CR>`. Remember, `<CR>` means enter.
#### Lets execute it!
Ok, press `<leader>pv`, did anything happen? No, why not? Of course! Vim
never executed these new changes. Lets source the file.
```viml
" so = source
" % = current file
:so %
```
Now lets try again! did anything happen?
#### Dangers of remaps
It can make your system feel slow..
#### Exercise time
Sourcing the vimrc kind of stinks huh? Could we remap this?
Take a shot at remapping it.
```viml
" I use neovim, btw
nnoremap <Leader><CR> :so ~/.config/nvim/init.vim<CR>
```
Now I can simply press `<space><enter>` to resource my vim rc anytime I make
changes.
================================================
FILE: course-website/lessons/first-plugin.md
================================================
---
path: "/your-first-plugin"
title: "First Plugin"
order: "60A"
section: "Your First Plugin"
description: "Time to learn viml."
---
So... before we get started. I hate VimL. I think its gross. Its Ugly. Its
all around unpleasant to write. This is the primary reason why I use NeoVim,
not Vim. I can write my plugins in Lua.
Lua is not bad. Its a simple language that is extremely boring, which makes it
a great candidate for a scripting language of simple ui elements.
---
This is meant to show you the power of Vim and its scriptability. As said, its
better in Lua.
We are going to walk through [Writing Vim Plugin By Łukasz Jan
Niemier](https://vimways.org/2019/writing-vim-plugin/).
### Remember your VimRC?
Start by executing `:h runtimepath`
We need to add to the runtime path a directory to be loaded and it should
contain a folder called `plugin` where we have our plugin located.
```
mkdir -p /path/to/your/plugin/folder
cd /path/to/your/plugin/folder
vim --cmd "set rtp+=$(pwd)" .
```
We have opened up vim and added to the runtime path at opening our current
folder. This is _a_ way to do this.
You can also install your plugin like any other!
```
... In your vim rc, next to fzf ...
Plug '/absolute/path/to/plugin/folder'
```
But while we are developing, we don't have to have it in either, we can just
execute `:so %` (much like we did in our vim rc).
#### Follow along!
I'll create it now and you can follow along, PLEASE ASK QUESTIONS.
================================================
FILE: course-website/lessons/intro.md
================================================
---
path: "/intro"
title: "Introduction"
order: "1A"
section: "Introduction"
description: "The gentle introduction into vim that will blow your mind and cover you in coconut oil."
---
### Motivation
Often its the little choices in our lives.
### Welcome to Vim
#### But first, lets meet ED
```bash
> ed my-file.ts
```
You probably feel lost, press q to get the heck out of there. (on FEM I do
some actual editing)
Lets do it once more, but with ex
```bash
ex my-file.ts
```
ex is the improved version of ed. It also comes with Bill Joy's vi mode. Go
ahead, type `vi<enter>`. Welcome to vi! The predecessor of vim. :q to get
out.
Some fun facts about vi mode in ex.
* Was originally written by a single person, Bill Joy, in 1976.
* Ram was < 1k
* Emacs cost $100s. Yikes
* hjkl are movement keys because of Bill Joy's keyboard, which apparently was
the only ever made...
* Bill Joy's words of wisdom
* "People don't know that vi was written for a world that doesn't exist anymore"
* vi was written to edit text with a 300 buad modem.
## Why do I use vim?
I think I am a lot like you. I used netbeans. I was just a regular student
doing regular java binary searches in Netbeans.
One time I opened up vim at the encouragement of my friend...
I saw someone at some point
use vim/emacs and it blew my mind. I wanted to be good the command line. I
wanted to be fast. I wanted to be covered in that sweet organic, grass fed,
free range coconut oil!
So I took the journey. I started in IntelliJ with ideaVim! It was painful. I
am not going to lie, I almost gave up after one hour and I accomplished nothing
but being frustrated.
But then I decided that I was going to master the simple
movements and start mastering each movement one at a time until I was the best
there was.
Lets get started on this journey together. Lets get vimmed out of our mind.
By the end of this course, hopefully you will understand what in the world
coconut oil has to do with vim.
Personal note. The love of the thing and Dante.
## Set Expectations
You may feel confused, so ask questions.
## Who Am I?
* I make youtube videos about Vim
* I stream on twitch
* NeoVim Plugins
* Vim Deathmatch. A battle royale like vim plugin to battle for fastest
vim editing skallz (lua + docker)
* Sonic Pi. Creating live beats with the help of chat. (python + ncurses + docker)
* Coding for Netflix (typescript)
* I work at Netflix
## Who should take this course
* A (want to be) developer
* Desire to be excellent and to learn
* You wish to defeat complacency
## Prereqs
* Unix System as I cannot help you if you are on windows and you experience and
problems. I suggest Plebuntu
* typing skills will directly affect your experience.
* `git clone https://github.com/ThePrimeagen/vim-nav-playground.git`
## Flavors of vim
* VIM - Vi IMproved
* 8.1+
* NeoVim (I personally use this, wont go over anything neovim specific)
* spacevim
* https://spacevim.org/
* onivim2
* https://onivim.io/
## Learning Vim
* vimtutor
* vim-adventures
* [ThePrimeagen](https://youtube.com/ThePrimeagen)'s Youtube
* 6 part series
* Learning lua plugin dev
* VimRC
* `:h usr<tab>`
================================================
FILE: course-website/lessons/mid-level-recap.md
================================================
---
path: "/pit-stop"
title: "Pit Stop"
order: "20A"
section: "Recap"
description: "There has been a lot of info. Lets recap!"
---
### The Recap Recap
#### Navigation
* What are some questions and thoughts?
* What do you think is the hardest part?
* What part surprised you the most?
* How do you feel about modes?
* Do you feel that deep down excitement?
* You may not know this yet, but there is some really amazing keys coming up.
#### Vim RC
* You only know a little bit, how will you go about improving it?
* Do they feel confusing?
* Does VimL look ugly (its ok, it does)?
#### File Navgiation
* There are tons of options
* Marks are pretty OP
* File tree is a bit lacking.
* That telescope fuzzy finder though, huh?
================================================
FILE: course-website/lessons/my-ideal.md
================================================
---
path: "/my-ideal-setup"
title: "My Ideal Setup"
order: "61A"
section: "My Pontifications About Vim"
description: "Lets just talk shop"
---
### Saddle up partner
#### How I Ideally Like to Use Vim
#### Breaking up VimRC Moar?
#### My Ideal File Navigation
#### NeoVim Init With Lua?
#### How I determine my remaps?
================================================
FILE: course-website/lessons/opening-vim.md
================================================
---
path: "/opening-vim"
title: "Opening Vim"
order: "4A"
description: "Lets open vim for the first time!"
section: "Basics"
---
## Before you do
* Navigate to an empty directory (create your own). We will be doing a bit of
editing.
* Ensure you have no vim rc active.
* If you are using vim, rename ~/.vimrc -> ~/.vimrc2
* If you are using nvim, rename ~/.config/nvim/init.vim -> ~/.config/nvim/init.vim2
### Exercises
We will be using curl to grab a few exercises throughout this class. Here is
an example.
#### Note
Notice that i name the downloaded file then `&& vim name`
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-0-hjkl-x.md > exercise.md && vim exercise.md
```
## One more thing before we start
We are going to start from when Adam met Eve. So if you have some experience
you can probably skip the next couple sections. There is always valuable
information that may not know, but it may not be worth the time.
When I started, vim motions were chief most important, not vim itself. This
course will reverse that. Vim will be the spot light, motions will actually
take a backseat. I will show you what is available though.
## Lets open vim!
So you are in an empty directory, lets do this! Simply type `vim` and press
enter. (Ensure you have no vim rc)
```bash
> vim
```
* What are you thoughts?
* What are things you expected to see?
================================================
FILE: course-website/lessons/plugins.md
================================================
---
path: "/plugins"
title: "Plugins"
order: "30A"
section: "Plugins"
description: "Lets beef up the RC!"
---
Plugins!
Yes vim does get better.
Yes, that not so pretty language VimL is a primary vehicle in making things
nice. In NeoVim you can use Lua, which is quite nice. Especially when you
consider that there is a Typescript -> lua converter. Which means you can use
a typed language and get type completion and create vim plugins. 42069IQ
### Get a Plugin Manager
Plug!
Lets follow the instructions together getting
[Plug](https://github.com/junegunn/vim-plug) vim plugin manager installed
```
... plays waiting music ...
```
### File Navigation 2.0
Let's add a fuzzy finder, remap some things, and make it work for us. We are
going to use FZF even though I Use telescope personally. The reason for this
is because Telescope is neovim specific (lua) and wont work with Vim. Where as
FZF has been working for some time with vim.
Lets add the following lines to your vimrc
```viml
call plug#begin('~/.vim/plugged')
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
Plug 'junegunn/fzf.vim'
call plug#end()
```
Our vimrc should look something like the following.
```viml
set scrolloff=8
set number
set relativenumber
set tabstop=4 softtabstop=4
set shiftwidth=4
set expandtab
set smartindent
call plug#begin('~/.vim/plugged')
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
Plug 'junegunn/fzf.vim'
call plug#end()
" This was from the colorscheme section
colorscheme desert
" Our remaps
let mapleader = " "
nnoremap <leader>pv :Vex<CR>
nnoremap <Leader><CR> :so ~/.config/nvim/init.vim<CR>
```
Lets source our vimrc
```viml
" or use your sweet remap
:so %
```
Now we need to execute our plugin manager.
```viml
:PlugInstall
```
### WARNING
### My Vim Colorscheme is just a default one, its ugly
Once you do this you should see the following menu
Now we can execute `:GFiles`, lets give it a try in `vim-nav-playground`.
### WHAT HAVE I TAUGHT YOU?
What should we do now?
* M A K E _ A _ R E M A P
```viml
nnoremap <C-p> :GFiles<CR>
```
### Lets get a better colorscheme.
ayu or gruvbox??
### Recap
* We got a plugin manager that makes installing plugins easy! You just need
the path on github to install new ones.
* We installed FZF, made a remap! then showed how awesome it is.
================================================
FILE: course-website/lessons/quickfix.md
================================================
---
path: "/quickfix"
title: "Quickfix Intro"
order: "40A"
section: "Quickfix Lists"
description: "One of the last components of the vim experience."
---
Quickfix lists were very mysterious to me when I started with vim. I knew that
there was a list of items and that it would pop up and if I left them I didn't
know how to go back. Little did I know how useful they are, especially when
navigating histories, such as git.
Lets create a quick quickfix
open up vim in the root of `vim-nav-playground`
```bash
vim .
```
now execute
```viml
:grep SOCKET_OPEN **/*.(c\|h)
```
You should see something like this:
Once you press `<CR>` you will see that the results disappear and you are
navigated to the first result. What should you do? The proper answer is
consult the `:h quickfix` page, but since I am here, let me walk you through
some actions.
When dealing with a quickfix you need 3 commands primarily, `:copen`, `:cnext`,
and `:cprev`. Lets try `:copen` first. Once you have executed it you should
see the following.
Lets select the other option. This will cause the above buffer to navigate and
the quickfix list will remain open. Oh no, how do we get back to the quickfix
list?
you could navigate back by executing a copen
```viml
:copen
```
you could force navigate back by closing the current window. There is nothing
left but going back to the remaining buffer that is open.
```viml
:q
```
You can window navigate. You can start a window navigation by pressing
`<C-w>`. What do you think you should press next to navigate towards the
quickfix menu?
If you said `j` you are awesome. YES! Use your vim movements you already
know! Don't you love when things come full circle!
Anywho, so you can guess you can move betwixt splits by press `<C-w>` and `h`,
`j`, `k`, or `l`. This is great, but it kind of sucks.
### WHAT DO WE DO NOW???
If I have to say make a remap one more time.
```viml
" I don't know if I love these remaps yet. I am considering doing
" <leader>c(k|j|o)
nnoremap <C-k> :cnext<CR>
nnoremap <C-j> :cprev<CR>
nnoremap <C-E> :copen<CR>
```
### No Internet ordering problem
When practicing this presentation I kept finding myself having a problem. I didn't want to have to keep compiling and using `npm run dev`. But I wanted to practice through my presentation in order. For the most part I just dealt with it and booted everything up. But on the flight here I was unable to load the pages due to internet requirements. But!!! I could solve the ordering issue via qflist.
#### getqflist and setqflist
================================================
FILE: course-website/lessons/some-javascript.md
================================================
---
path: "/some-javascript"
title: "some javascript"
order: "72A"
section: "Misc Content"
description: "This is the first exercise to try out."
---
// Delete the description.
// That seems slow right?
// <count>Delete
// try typing, with your cursor on the first line the following.
// 7dd
// What does that mean about j and k?
// But we have a problem down we?
function foo(a, b, c) {
switch (a) {
case 1:
return b + c;
break;
default:
return a * b + c;
}
throw new Error("This should never happen");
}
if (true) {
console.log(foo(1, 5, 7));
}
if (false) {
console.log(foo(1, 5, 7));
}
if (false || true) {
console.log(foo(1, 5, 7));
}
foo(
foo(1),
foo(2),
foo(3))
foo(
foo(4),
foo(5),
foo(6))
foo(
foo(7),
foo(8),
foo(9))
================================================
FILE: course-website/lessons/terminology.md
================================================
---
path: "/terms"
title: "The Terminology"
order: "2A"
description: "This goes over some basic vocabulary that will be used"
section: "Introduction"
---
## Files, Buffers, Windows, Splits, and Tabs
We all know what files are (or so you think [LiveOverflow's Video on
Files](https://www.youtube.com/watch?v=VVdmmN0su6E)) but there is a bit more
when it comes to how vim handles them.
### Buffer
A buffer contains the text of the file and is what you edit.
`:h buffer`
### Window
Contains a buffer to display. Windows can be closed but the underlying buffer
can remain in memory.
`:h window`
### Tabs
A tab is like another viewport. You can have many windows|splits open per tab.
`:h tab`
### Splits
A split simply refers to splitting the viewport in N sections (various sizing
and orientations available) to display windows.
`:h split`
## Other Terminology
## Help Menu
Help menu can be accessed by typing `:h<enter>`. There is _so much
documentation_, that is pretty good, available. If you find yourself lost,
RTFM (at least that is what they tell me).
## Motion
A command that moves the cursor (taken straight from the help docs, `:h motion`).
## Abbreviations
Ctrl+a will be abbreviated `<C-a>`. This is also how its referenced in VimL,
Vim's editor language.
Enter will often be abbr as `<CR>`
Tab, Escape, and space will be `<tab>`, `<esc>`, `<space>`
When you see something that starts with a `:` that means it will execute a command.
================================================
FILE: course-website/lessons/vim-my-way.md
================================================
---
path: "/vim-my-way"
title: "Vim My Way"
order: "9A"
description: "Ok, so vim looked pretty ugly. Lets make it feel the way we want it!"
section: "The VimRC"
---
Ok, how much did you hate having to do the `zz`? It is annoying. Instead,
lets tell vim to do it for us.
```viml
:set scrolloff=8
```
Now lets scroll around. How does it feel. SO GOOD.
----
Lets quit out of our previous vim experience and curl down this file.
```
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/some-javascript.md > exercise.js && vim exercise.js
```
After following the delete instructions you should notice that its really hard
to count how many lines of code huh? Type the following
```viml
:set number
```
You will notice a new column has been added and now you have line numbers!
Yeah its pretty easy to a jump, but also not all that easy. Math can be hard
sometimes.
```viml
" sets relative numbers
:set relativenumber
" turns off relative numbers
:set norelativenumber
```
Wow. Much better huh? You can jump easily now. You may not be good at
jumping yet, but you can see its a lot easier. Lets play around.
Put your cursor on `foo` and press `v10j`. What happened? Press `V` to
highlight the whole line.
Ok lets leave vim, `:q` and reopen back up the file either by reexecuting the
curl command or simply executing `vim exercise.js`
What happened?
Commands you execute only live for the session you have vim open. This is
painful right? Well, actually not. There is a `.vimrc`! All is not horrible.
So lets create one!
Create a vimrc in the correct location with the following content.
```viml
set scrolloff=8
set number
set relativenumber
```
Open up vim again. Ohh yeah! This is great, but those tabs have to go (tabs
vs spaces anyone?)! Add these lines to your vimrc and restart vim.
```viml
set tabstop=4 softtabstop=4
set shiftwidth=4
set expandtab
set smartindent
```
Now restart vim... what just happened? Pretty cool huh?
### How do you know what is available?
* You can google. Sometimes that is a good thing.
* `h options`
* `h <tabcomplete or ctrl-d>`
* `h <specific option name>`
================================================
FILE: course-website/package.json
================================================
{
"name": "gatsby-course-starter",
"description": "a gatsby seed project to get your education site started",
"version": "1.0.0",
"author": "Brian Holt <btholt+course-starter@gmail.com>",
"dependencies": {
"bootstrap": "^4.5.3",
"code-mirror-themes": "^1.0.0",
"front-matter": "^4.0.2",
"gatsby": "^2.30.1",
"gatsby-cli": "^2.17.0",
"gatsby-link": "^2.9.0",
"gatsby-plugin-layout": "^1.8.0",
"gatsby-plugin-react-helmet": "^3.8.0",
"gatsby-plugin-sharp": "^2.12.0",
"gatsby-remark-autolink-headers": "^2.9.0",
"gatsby-remark-copy-linked-files": "^2.8.0",
"gatsby-remark-images": "^3.9.0",
"gatsby-remark-prismjs": "^3.11.0",
"gatsby-source-filesystem": "^2.9.0",
"gatsby-transformer-remark": "^2.14.0",
"is-url-superb": "^5.0.0",
"parse-markdown-links": "^1.0.4",
"prismjs": "^1.23.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0"
},
"keywords": [
"gatsby",
"gatsby-starter",
"course",
"education"
],
"license": "(CC-BY-NC-4.0 OR Apache-2.0)",
"main": "n/a",
"scripts": {
"build": "gatsby build --prefix-paths",
"csv": "node csv.js",
"dev": "gatsby develop",
"format": "prettier --write \"src/**/*.{js,jsx,md,css}\"",
"lint": "eslint \"src/**/*.{js,jsx}\""
},
"devDependencies": {
"@babel/polyfill": "^7.12.1",
"babel-eslint": "^10.1.0",
"core-js": "^3.8.2",
"eslint": "^7.17.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"prettier": "^2.2.1"
}
}
================================================
FILE: course-website/src/components/TOCCard.css
================================================
.main-card {
border: 1px solid #ccc;
border-radius: 8px;
width: 100%;
margin: 0;
overflow: hidden;
background-color: white;
}
.lesson-title {
font-size: 20px;
padding: 15px 30px;
}
.lesson-content {
padding: 0 15px 15px 15px;
line-height: 1.5;
}
.sections-name {
list-style: none;
}
.lesson-section-title {
margin-top: 25px;
}
================================================
FILE: course-website/src/components/TOCCard.js
================================================
import React from "react";
import Link from "gatsby-link";
import * as helpers from "../util/helpers";
import "./TOCCard.css";
const sortFn = helpers.sorter;
const LessonCard = ({ content, title }) => {
console.log(sortFn);
const sections = content
.map(lesson => lesson.node.frontmatter)
.sort(sortFn)
.reduce((acc, lesson) => {
if (!acc.length) {
acc.push([lesson]);
return acc;
}
const lastSection = acc[acc.length - 1][0].section.split(",")[0];
if (lastSection === lesson.section.split(",")[0]) {
acc[acc.length - 1].push(lesson);
} else {
acc.push([lesson]);
}
return acc;
}, []);
return (
<div className="main-card">
<h1 className="lesson-title gradient">{title}</h1>
<div className="lesson-content">
<ol className="sections-name">
{sections.map(section => (
<li key={section[0].section}>
<h3 className="lesson-section-title">{section[0].section}</h3>
<ol>
{section.map(lesson => (
<li key={lesson.path}>
<Link to={lesson.path}>{lesson.title}</Link>
</li>
))}
</ol>
</li>
))}
</ol>
</div>
</div>
);
};
export default LessonCard;
================================================
FILE: course-website/src/layouts/index.css
================================================
.gradient {
background: rgb(96, 108, 136);
background: linear-gradient(
to bottom,
rgb(96, 108, 136) 0%,
rgb(63, 76, 107) 100%
);
}
.navbar {
border-bottom: 1px solid #ccc;
position: sticky;
width: 100%;
top: 0;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar h1 {
font-size: 20px;
margin: inherit;
padding: inherit;
font-weight: bold;
}
.navbar h2 {
font-size: 14px;
margin: inherit;
padding: inherit;
text-transform: uppercase;
color: white;
}
.jumbotron.gradient {
color: white;
text-transform: uppercase;
font-weight: bold;
}
.navbar-brand.navbar-brand {
text-transform: uppercase;
color: white;
font-weight: bold;
}
.navbar-brand.navbar-brand:hover {
color: #777;
}
.navbar-brand.navbar-brand:focus {
color: white;
}
.lesson {
margin: 15px;
padding: 15px;
background-color: #fff;
border-radius: 8px;
overflow: scroll;
}
.lesson p {
clear: both;
}
.lesson-links {
font-size: 18px;
padding: 15px 0;
}
.next {
float: right;
}
.prev {
float: left;
}
.lesson-title {
color: white;
text-transform: uppercase;
font-weight: bold;
}
.klipse-result {
border: 1px solid #90b4fe;
padding-top: 8px;
position: relative;
width: 100%;
}
.klipse-result .CodeMirror-wrap {
width: 100%;
border-color: transparent;
}
.klipse-result::before {
content: "result";
background-color: white;
position: absolute;
top: -13px;
height: 13px;
}
.language-htm,
.language-css,
.language-js,
.language-json {
width: 100%;
}
.gatsby-highlight {
/* border: 1px solid black; */
padding: 4px;
border-radius: 4px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: stretch;
}
.CodeMirror-wrap {
width: 100%;
font-size: 12px;
height: inherit;
margin-bottom: 12px;
}
.CodeMirror-gutters {
height: inherit !important;
}
.klipse-snippet > .CodeMirror {
border: none;
width: 100%;
}
.gatsby-highlight > .klipse-snippet {
border: 1px solid #90b4fe;
width: 100%;
border-right: none;
position: relative;
margin-bottom: 15px;
}
.doggos {
width: 100%;
border: 1px solid #666;
border-radius: 5px;
}
================================================
FILE: course-website/src/layouts/index.js
================================================
import React from "react";
import Link from "gatsby-link";
import Helmet from "react-helmet";
import { graphql, StaticQuery } from "gatsby";
import "bootstrap/dist/css/bootstrap.css";
import "prismjs/themes/prism-solarizedlight.css";
import "code-mirror-themes/themes/monokai.css";
import "./index.css";
// import jpg from "../../static/posterframe.jpg";
const TemplateWrapper = props => {
return (
<StaticQuery
render={data => {
const frontmatter =
props.data && props.data.markdownRemark
? props.data.markdownRemark.frontmatter
: null;
return (
<div>
<Helmet
title={
frontmatter
? `${frontmatter.title} – ${frontmatter.section} – ${data.site.siteMetadata.title}`
: data.site.siteMetadata.title
}
meta={[
{
name: "og:title",
content: frontmatter
? `${frontmatter.title} – ${frontmatter.section} – ${data.site.siteMetadata.title}`
: data.site.siteMetadata.title
},
{
name: "description",
content: frontmatter
? frontmatter.description
: data.site.siteMetadata.description
},
{
name: "og:description",
content: frontmatter
? frontmatter.description
: data.site.siteMetadata.description
},
{
name: "twitter:card",
content: "summary_large_image"
},
// {
// name: "og:image",
// content: "https://btholt.github.io" + jpg
// },
// {
// name: "og:url",
// content:
// "https://btholt.github.io/complete-intro-to-containers" +
// (frontmatter && frontmatter.path ? frontmatter.path : "")
// },
{
name: "keywords",
content: data.site.siteMetadata.keywords.join(", ")
},
{}
]}
/>
<div className="navbar navbar-light gradient">
<Link to="/" className="navbar-brand">
<h1>{data.site.siteMetadata.title}</h1>
</Link>
{!frontmatter ? null : (
<h2>{`${frontmatter.section} – ${frontmatter.title}`}</h2>
)}
</div>
<div className="main">{props.children}</div>
</div>
);
}}
query={graphql`
query HomePage($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
path
title
order
section
description
}
}
site {
pathPrefix
siteMetadata {
title
subtitle
description
keywords
}
}
}
`}
/>
);
};
export default TemplateWrapper;
================================================
FILE: course-website/src/pages/404.js
================================================
import React from "react";
const NotFoundPage = () => (
<div>
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn't exist... the sadness.</p>
</div>
);
export default NotFoundPage;
================================================
FILE: course-website/src/pages/index.css
================================================
body {
background-color: #eee;
}
.index {
width: 97%;
max-width: 750px;
margin: 0 auto;
margin-top: 20px;
}
.index .jumbotron {
}
.example-table {
border-collapse: separate;
}
.example-table td {
border: 1px solid black;
width: 20px;
height: 20px;
}
.example-table .current {
background-color: #fcc;
}
.example-table .n {
border-top-color: transparent;
}
.example-table .s {
border-bottom-color: transparent;
}
.example-table .e {
border-right-color: transparent;
}
.example-table .w {
border-left-color: transparent;
}
.lesson-content table {
}
.lesson-content td {
border: 1px solid black;
padding: 8px;
}
.lesson-content td input {
min-width: 300px;
}
.lesson-flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.random-tweet {
width: 100%;
margin-top: 100px;
}
.fem-link {
text-align: center;
}
================================================
FILE: course-website/src/pages/index.js
================================================
import React from "react";
import { StaticQuery, graphql } from "gatsby";
import Card from "../components/TOCCard";
import "./index.css";
const IndexPage = () => (
<StaticQuery
query={graphql`
query HomepageTOC {
site {
siteMetadata {
title
subtitle
description
keywords
}
}
allMarkdownRemark(sort: { order: ASC, fields: [frontmatter___order] }) {
edges {
node {
id
frontmatter {
order
path
title
section
description
}
}
}
}
}
`}
render={props => (
<div className="index">
<div className="jumbotron gradient">
<h1>{props.site.siteMetadata.title}</h1>
<h2>{props.site.siteMetadata.subtitle}</h2>
</div>
<Card
title="Table of Contents"
content={props.allMarkdownRemark.edges}
/>
</div>
)}
/>
);
export default IndexPage;
================================================
FILE: course-website/src/templates/lessonTemplate.js
================================================
import React from "react";
import Link from "gatsby-link";
import { graphql } from "gatsby";
import * as helpers from "../util/helpers";
const sortFn = helpers.sorter;
export default function Template(props) {
let { markdownRemark, allMarkdownRemark } = props.data; // data.markdownRemark holds our post data
const sections = allMarkdownRemark.edges
.map(lesson => lesson.node.frontmatter)
.sort(sortFn);
const { frontmatter, html } = markdownRemark;
const index = sections.findIndex(el => el.path === frontmatter.path);
const prevLink =
index > 0 ? (
<Link className="prev" to={sections[index - 1].path}>
{"← " + sections[index - 1].title}
</Link>
) : null;
const nextLink =
index < sections.length - 1 ? (
<Link className="next" to={sections[index + 1].path}>
{sections[index + 1].title + " →"}
</Link>
) : null;
return (
<div className="lesson-container">
<div className="lesson">
<h1>{frontmatter.title}</h1>
<h2>{frontmatter.date}</h2>
<div
className="lesson-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
<div className="lesson-links">
{prevLink}
{nextLink}
</div>
</div>
</div>
);
}
export const pageQuery = graphql`
query LessonByPath($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
path
title
order
section
description
}
}
allMarkdownRemark(limit: 1000) {
edges {
node {
frontmatter {
order
path
title
}
}
}
}
}
`;
================================================
FILE: course-website/src/util/helpers.js
================================================
function splitSections(str) {
const validSectionTest = /^\d+[A-Z]+$/;
const numbersRegex = /^\d+/;
const lettersRegex = /[A-Z]+$/;
if (!validSectionTest.test(str)) {
throw new Error(
`${str} does not match the section format. It must be <numbers><capital letters>, like 16A or 5F (case sensitive)`
);
}
return [numbersRegex.exec(str)[0], lettersRegex.exec(str)[0]];
}
const getCharScore = str =>
str
.split("")
.map((char, index) => char.charCodeAt(0) * 10 ** index)
.reduce((acc, score) => acc + score);
function sorter(a, b) {
let aOrder, bOrder;
if (a.attributes && a.attributes.order) {
aOrder = a.attributes.order;
bOrder = b.attributes.order;
} else {
aOrder = a.order;
bOrder = b.order;
}
const [aSec, aSub] = splitSections(aOrder);
const [bSec, bSub] = splitSections(bOrder);
// sections first
if (aSec !== bSec) {
return aSec - bSec;
}
// subsections next
return getCharScore(aSub) - getCharScore(bSub);
}
module.exports.splitSections = splitSections;
module.exports.sorter = sorter;
================================================
FILE: csv.js
================================================
const fs = require("fs").promises;
const path = require("path");
const fm = require("front-matter");
const isUrl = require("is-url-superb");
const parseLinks = require("parse-markdown-links");
const { sorter } = require("./src/util/helpers");
const mdDir = process.env.MARKDOWN_DIR || path.join(__dirname, "lessons/");
const outputPath =
process.env.OUTPUT_CSV_PATH || path.join(__dirname, "public/lessons.csv");
const linksOutputPath =
process.env.LINKS_CSV_PATH || path.join(__dirname, "public/links.csv");
async function createCsv() {
console.log(`making the markdown files into a CSV from ${mdDir}`);
// get paths
const allFiles = await fs.readdir(mdDir);
const files = allFiles.filter(filePath => filePath.endsWith(".md"));
// read paths, get buffers
const buffers = await Promise.all(
files.map(filePath => fs.readFile(path.join(mdDir, filePath)))
);
// make buffers strings
const contents = buffers.map(content => content.toString());
// make strings objects
let frontmatters = contents.map(fm);
// find all attribute keys
const seenAttributes = new Set();
frontmatters.forEach(item => {
Object.keys(item.attributes).forEach(attr => seenAttributes.add(attr));
});
const attributes = Array.from(seenAttributes.values());
if (attributes.includes("order")) {
frontmatters = frontmatters.sort(sorter);
}
// get all data into an array
let rows = frontmatters.map(item => {
const row = attributes.map(attr =>
item.attributes[attr] ? JSON.stringify(item.attributes[attr]) : ""
);
return row;
});
// header row must be first row
rows.unshift(attributes);
// join into CSV string
const csv = rows.map(row => row.join(",")).join("\n");
// write file out
await fs.writeFile(outputPath, csv);
console.log(`Wrote ${rows.length} rows to ${outputPath}`);
// make links csv
let longestLength = 0;
let linksArray = frontmatters.map(row => {
const links = parseLinks(row.body).filter(isUrl);
longestLength = longestLength > links.length ? longestLength : links.length;
const newRow = [row.attributes.order, row.attributes.title, ...links];
return newRow;
});
if (longestLength) {
// add title row
linksArray = linksArray.map(array => {
const lengthToFill = longestLength + 2 - array.length;
return array.concat(Array.from({ length: lengthToFill }).fill(""));
});
linksArray.unshift(
["order", "title"].concat(
Array.from({ length: longestLength }).map((_, index) => `link${index}`)
)
);
// join into CSV string
const linksCsv = linksArray.map(row => row.join(",")).join("\n");
// write file out
await fs.writeFile(linksOutputPath, linksCsv);
console.log(`Wrote ${linksArray.length} rows to ${linksOutputPath}`);
}
}
createCsv();
================================================
FILE: gatsby-config.js
================================================
module.exports = {
siteMetadata: {
title: "Vim Fundamentals",
subtitle: "Making vim approachable!",
description:
"This is a survey of vim, how it works, and how to become a sensai of vimfu.",
keywords: ["Vim", "Awesome", "Coconut Oil", "ThePrimeagen"],
},
pathPrefix: "vim-fundamentals",
plugins: [
`gatsby-plugin-layout`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/lessons`,
name: "markdown-pages",
},
},
`gatsby-plugin-sharp`,
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-autolink-headers`,
`gatsby-remark-copy-linked-files`,
`gatsby-remark-prismjs`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
linkImagesToOriginal: true,
sizeByPixelDensity: false,
},
},
],
},
},
],
};
================================================
FILE: gatsby-node.js
================================================
const path = require("path");
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions;
const lessonTemplate = path.resolve(`src/templates/lessonTemplate.js`);
return graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___order] }
limit: 1000
) {
edges {
node {
excerpt(pruneLength: 250)
html
id
frontmatter {
order
path
title
}
}
}
}
}
`).then(result => {
if (result.errors) {
return Promise.reject(result.errors);
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: lessonTemplate
});
});
});
};
================================================
FILE: lessons/adv-pitstop.md
================================================
---
path: "/pit-stop"
title: "Pit Stop"
order: "53A"
section: "Advanced Text Manipulation"
description: "There has been a lot of info. Lets recap!"
---
### The Recap Recap
#### Basic Movements
#### File Navigation
#### Vim RC
#### Advanced Text Manipulation
### Moving forward
We are going to step it up a notch and improve our knowledge of vim Motions.
Here is the deal. You don't need to remember them all. You need to know they
exist. As you get more familiar the motions and concepts that seem hard today
are trivial tomorrow.
================================================
FILE: lessons/advanced-movements-1.md
================================================
---
path: "/adv-motions"
title: "Advanced Motions"
order: "54A"
section: "Advanced Text Manipulation"
description: "And you thawght you knew Motions..."
---
We have already covered some of the horizontal and vertical motions, `I`/`A`
and `<count>j`/`k` are great examples of fast motions. But if that is all we
had, VIM would just be lacking in luster.
### Quick Recap
Motion: A command that moves the cursor.
* modified with a count
* 5j instead of jjjjj
* modify an "action" with a movement
* 5dd and d4j are "equivalent"
### There are more motions!
* G and gg bottom or top respectively
* do you think you can dG?
lets do an exercise and go over some advanced motions!
#### Example time
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-6-motions.md > exercise.md && vim exercise.md
```
================================================
FILE: lessons/advanced-text-manipulation-1.md
================================================
---
path: "/search-and-replace"
title: "Search And Replace"
order: "50A"
section: "Advanced Text Manipulation"
description: "Search and replace. Regex licences may be required."
---
Were are getting to the end game of vim. There is still so much out there, but
for the sake of surveying, this is where we will end. We will cover Search and
Replace, Macros, and finally registers.
### Search and Replace
Lets go through a search and replace exercise. This should help us get the
foundation of basic search and replace
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-3-search-and-replace.md > exercise.md && vim exercise.md
```
================================================
FILE: lessons/advanced-text-manipulation-2.md
================================================
---
path: "/macros"
title: "Macros"
order: "51A"
section: "Advanced Text Manipulation"
description: "Macros. Yes, they seem more confusing than they are."
---
This is where things can get fun. Also, they are a bit psychologically
weird... Meaning, you will find yourself feeling like you don't know how to do
the most basic of moves. If this happens, its ok. Its called Macro Pressure.
### What is a Macro
A macro simply plays text as motions, inputs, and commands.
#### Let me show you!
I remember my first macro like it was yesterday.....
#### Example time
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-4-macros.md > exercise.md && vim exercise.md
```
================================================
FILE: lessons/advanced-text-manipulation-3.md
================================================
---
path: "/registers"
title: "Registers"
order: "52A"
section: "Advanced Text Manipulation"
description: "Registers. Definitely hard to imagine them not being hard."
---
### My slogan for registers
> Definitely hard to imagine them not being hard.
### What is a register?
It is a key -> value
The `key` is a character
The `value` is a string
#### Example time
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-5-registers.md > exercise.md && vim exercise.md
```
================================================
FILE: lessons/are-you-ready.md
================================================
---
path: "/are-you-ready"
title: "Are You Ready?"
order: "3A"
description: "The final hurrah! before diving into vim!"
section: "Introduction"
---
At this point I hope you are ready. But I wanted to take a moment to let you
know three things.
* This is a journey, its not a day trip
* The journey is uphill
* The top of the mountain is incredible
### For the live class
I stream on twitch, so feel free to ask questions at any point and I can pivot
if its beneficial for all or I'll answer the question at the end of the
section.
### Proper Github projects
1. Clone this presentation project down and open up the files, or go to the
website and use the curl commands to open up vim. I recommend just going to
the website.
2. git clone https://github.com/ThePrimeagen/vim-nav-playground.git
### Clean your environment
If you use vim, remove your vimrc and any plugins. We are going bare bones and
working our way up.
There is a basic script to stash and restore your vim env in vim-nav-playground
in the tools folder.
================================================
FILE: lessons/basic-usage.md
================================================
---
path: "/basic-usage"
title: "Using Vim"
order: "5A"
description: "Let's use vim for the first time!"
section: "Basics"
---
Before we start editing files, lets get familiar with some basic movements.
Navigate back to the empty directory and type in the following.
```bash
> vim test.js
```
You are now in `NORMAL` mode. This probably doesn't feel all that normal.
And you are right, its really not that normal.
## Lets talk Modes
There are a few modes that you should be aware of.
* Normal
* Insert
* Visual
* Visual Line
## My First If Statement
Lets write our first if statement.
Currently, you are in `NORMAL` mode. This is where you can execute commands
to navigate, edit, and execute vim/sys commands. To get out of this mode,
press `i`
After pressing `i` you should see something like `-- INSERT --` in the bottom
left hand side of vim.
Now that you are in insert mode, type the following
```js
if (true) {
}
```
Press `<esc>` or `<Ctrl-c>` (abbreviated `<C-c>`) to leave `INSERT` mode and back
to `NORMAL`.
Goodness, isn't default vim ugly?
type `:q` to quit vim. Also, don't tell anyone.
## My First Moves
### Basic navigation
time to curl down our first little exercise
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-0-hjkl-x.md > exercise.md && vim exercise.md
```
### Deleting, Yanking, and Pasting
These are going to be some of your fundamental movements within vim. This is
where you will see some significant speed ups compared to a conventional editor.
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-1-dyp.md > exercise.md && vim exercise.md
```
### Insert!
We are going to go over entering into insert mode
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-2-insert.md > exercise.md && vim exercise.md
```
## Recap
Lets talk about what happened. I would love to get some feedback from you.
What do you think about all of this nonsense? Does it seem like to much? Or
does it seem exciting? I hope you are excited.
### We learned
* h,j,k,l for basic movement.
* w,b for word hopping. Effectively the same as Option/Ctrl + arrow keys
* yy to "copy" a line, called Yank
* dd to delete, and yank, a line
* p and P to paste the contents of the implicit register below / above
* Most of the ways to go into insert mode!
* i and a for which side of the cursor
* I and A for which side of the line
* o and O for belowe / above line
* zz - I snuck that one in...
That is a grand total of 16 different motions
================================================
FILE: lessons/color-my-pencils.md
================================================
---
path: "/color-my-pencils"
title: "Color My Pencils"
order: "10A"
description: "Lets set some colorschemes"
section: "The VimRC"
---
So to change your `colorscheme` what should you do?
If you answered "Help Menu!" you are a fantastic! Please execute `h:
colorsc<tab><Cr>`
try executing the following
```
:colorscheme <C-d>
```
Pick anything that autocompletes! Much like set options, it will only persist
for this vim session. Writing it to your vimrc and open up file you commonly
edit and behold the beauty!
These are not the only colorschemes that you can have. Plenty of plugins
provide many more.
## Recap
Ok. This is probably getting a bit overwhelming. A lot of this comes with
practice and as you use this it becomes second nature.
I'll say it again.
* This is a journey, its not a day trip
* The journey is uphill
* The top of the mountain is incredible
### What we learned
* Using the help menu.
* navigating the all the set options.
* Using tab and <C-d>
* Arrows vs <C-p> and <C-n>
* Set options
* The power to control how our editor operates through sets.
* Colorschemes
* How to set them and peruse them.
* We learned things about motions.
* dd can become <count>dd
* Moving with 10j / 10k. Wowow
### Extend it
Do you think you could do anything with `y` and `p`? Could `yj` work? What
does it do? Why? What about `5p`? What do you think happens? Why?
### Foundation
We have built the foundation. You know about customizing your vim experience
and you know how to basically move around. The only thing left is really
optimizing! And there is practically an infinite amount of optimizing!
================================================
FILE: lessons/exercise-0-hjkl-x.md
================================================
---
path: "/exercise-0"
title: "hjkl-x"
order: "69A"
section: "Misc Content"
description: "This is the first exercise to try out."
---
## NOTE
To use the exercises, please curl the file to your machine and edit it with vim.
## Exercise 0: Basic movement, h, j, k, l, w, b
### press j to go down
### press l to follow the line
---------------------------o " press x to delete the o
" press j to go to the next action
### press l and j to follow the line and x to delete the o
-+
|
|
+------+
|
|
+------+
|
|
+------o
### press l and j and h to follow the line and x to delete the o
-+
|
|
+------+
|
|
+------+
|
+------+
|
|
o------+
### press l, j, h, and k to follow the line and x to delete the o
-+ +------+ +------+ +-----o
| | | | | |
| | | | | |
+------+ | | +------+
| |
+------+ |
| |
| |
| |
+-------------+
### press w to get to o and press x to delete
+-+ +------+ +------+ +-----o
### b = inverse w: press w, j, and b to get to o and press x to delete
+-+ +------+ +------+ +-----+
|
o-+ +------+ +------+ +-----+
### Go in circles until you feel good
+------+
| |
| |
| |
+------+------+
| |
| |
| |
+------+
================================================
FILE: lessons/exercise-1-dyp.md
================================================
---
path: "/exercise-1"
title: "dyp"
order: "70A"
section: "Misc Content"
description: "This is the basic movement and editing of text"
---
## NOTE
To use the exercises, please curl the file to your machine and edit it with vim.
## Exercise 1: Basic Editing
### Delete a line with dd
delete me 1
delete me 2
delete me 3
delete me 4
### Yank and paste. yy to yank line, p to paste line below, P above
yank me and paste below (yyp)
yank me and paste above (yyP)
### Visual Mode
#### Visual Mode
Highlight part of this line by pressing v, then navigate around
escape to leave visual mode
#### Visual Line Mode
Highlight this line by pressing V, then navigate around
escape to leave visual mode
#### Visual Mode + y / p
Highlight this line by pressing V, then press y (What happened?)
press p (What happened?)
Highlight this point by pressing v, press wy (What happened?)
press p (What happened?)
Lets repeat but with d instead of y, (What happened?)
## Part 3: The relationship of y / d
:h reg
:reg
What did we see there?
yank this line
What happened to the registers?
================================================
FILE: lessons/exercise-2-insert.md
================================================
---
path: "/exercise-2"
title: "insert"
order: "71A"
section: "Misc Content"
description: "Insertion! There are many ways to go into INSERT mode."
---
## Exercise 2: Insert mode
There are a few ways to go into insert mode (I also am not including about
another 10...)
i: left side of cursor
a: right side of cursor
----I:
A: -----
o: insert new line below line and go into insert mode
O: insert new line above line and go into insert mode
lets play around
================================================
FILE: lessons/exercise-3-search-and-replace.md
================================================
---
path: "/exercise-3"
title: "Search and Replace"
order: "72A"
section: "Misc Content"
description: "Search and Replace!"
---
### Basic Search
search for `error` by typing `/error<CR>`
error
Lets type a command in. :set hls ic
What just happened?
Re-search `error`
error
But you can do more! try searching `/err.*or<CR>`
errooentuhoneuhnoteuhnotehuor
* Notice that it matched a huge portion on top. That is because regexs will
match the most it can.
### Search and Replace
replace "foo" with "baz" by typing `:s/foo/baz<CR>`
foo bar baz
Try again but notice that it only replaces one foo at a time.
foo foo foo foo
replace "foo" with "baz" by typing `:s/foo/baz/g<CR>`
foo foo foo foo
replace "foo" with "baz" by typing `:s/foo/baz/gc<CR>`
foo foo foo foo
#### Ranged search & replace
```typescript
function foo() {
const a = "foo";
const b = [
"foo",
"foo",
"foo",
"foo",
];
if ("foo") {
return "foo";
}
return "baz";
}
```
#### Full File
Lets execute `:%s/foo/bar/gc`, but first exit without saving `:q!` and reopen
this file
#### But what about full project find and replace
I am going to leave this out of this course.
================================================
FILE: lessons/exercise-4-macros.md
================================================
---
path: "/exercise-4"
title: "Macros"
order: "73A"
section: "Misc Content"
description: "Macros"
---
// Yes I wrote this code with a macro
if (someValue == "someOtherValue1") {
return 1
} else if (someValue == "someOtherValue2") {
return 2
} else if (someValue == "someOtherValue3") {
return 3
} else if (someValue == "someOtherValue4") {
return 4
} else if (someValue == "someOtherValue5") {
return 5
} else if (someValue == "someOtherValue6") {
return 6
} else if (someValue == "someOtherValue7") {
return 7
} else if (someValue == "someOtherValue8") {
return 8
} else if (someValue == "someOtherValue9") {
return 9
} else if (someValue == "someOtherValue10") {
return 10
} else if (someValue == "someOtherValue11") {
return 11
} else if (someValue == "someOtherValue12") {
return 12
} else if (someValue == "someOtherValue13") {
return 13
} else if (someValue == "someOtherValue14") {
return 14
} else if (someValue == "someOtherValue15") {
return 15
} else if (someValue == "someOtherValue16") {
return 16
} else if (someValue == "someOtherValue17") {
return 17
} else if (someValue == "someOtherValue18") {
return 18
}
================================================
FILE: lessons/exercise-5-registers.md
================================================
---
path: "/exercise-5"
title: "Registers"
order: "74A"
section: "Misc Content"
description: "Registers. Definitely hard to imagine them not being hard."
---
### Register Basics
So lets copy the following line
foo
Now type in :reg
Notice that `foo` appears two times. We are seeing foo twice because `foo` is
in our first register and our implicit register. Our first register is denoted
with 0 (0th may be better term) and implicit is ".
Paste with `p` 3 times
foo
foo
foo
highlight and yank all three `foo`s. Lets resee what is in our `:reg`. Notice
that we replaced our implicit register and our 0th register.
Why didnt 0 become 1?
Go back up to a line with foo and delete 1. What just happened? Inspect your
`:reg`
Delete a few more lines and re-inspect your register. What you should observe,
and can be found in `:h reg` is that your implicit register `"` is _always_ the
latest yank or delete. It is also what is used when pasting. We _knew_ this
from our previous lesson, but now we observe why.
### How do we interact with registers?
We see how our actions are side effects to the state of the registers. But
what if you wanted to paste or yank explicitly? Good thing we have a clue.
Notice that every register starts with `"`. Lets `:h "`
So lets yank into our `a` register. Move to the line below and type `V"ay`
foofoofoo
Now lets inspect our registers.
How do we paste from a register?
### Lets do something crazy
Copy, paste, and increment the number below 3 times using a macro
1.
Now lets check registers. What do you see? Is your mind blown? What does
this mean we can do?
================================================
FILE: lessons/exercise-6-motions.md
================================================
---
path: "/exercise-6"
title: "Advanced Motions"
order: "75A"
section: "Misc Content"
description: "Motions 201"
---
### Change
`c` is a powerful motion. You use it just like `d` but at the end of the
motion you are ejected from `NORMAL` and into `INSERT`.
So if you wished to delete a word and then type in a new word, `c` is a great
habit to form.
Lets see the difference
// dd this line
// cc this line
### Horizontal Movement
Lets learn about!: `_`, `0`, `$`, `D`, `C`, `S`, `f`, `,`, `;`, `t`, `F`, and `T`
// How would we move around on the line with "contents"
if (true) {
contents conTenTs contenTS
}
### Vertical Movement
#### Core movement
Rely on relative jumps. Get good at them.
If you get NeoVim, try VimBeGood
#### { and }
We know about search. That is a vertical movement, but its really specific.
First lets talk `{` and `}`
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
ContiguousCode
##### Benefits? Class chat
This next one is a bit odd
#### Ctrl+u/d
So lets do another type of navigation.
Try pressing `<C-d>`
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
##### Benefits? Class chat
#### [m / ]m and [M / ]M
This will move by "function". It works pretty well in c languages.
Move your cusor to this line and press `]m`. Try moving back and forth and try
the uppercase version as well.
if (foo) {
some content
some content
some content
some content
function bar() {
some other content
some other content
some other content
some other content
}
function baz() {
other content
other content
other content
other content
}
}
##### Benefits?
#### %
Ok,.... soo this isn't a pure vertical motion. It actually is a pair jumper
if (true) {
content
const a = [
content,
content,
content,
]
"content"
content
content
}
Lets combine it with a motion. Delete the `const a =...` statement.
### Get zany...
Lets look at the following statement, what are some ways you can delete the
contents of the if statement?
if (true) {
line1
line2
line3
line4
line5
}
I was hoping to hear `f{V%D`. That is just so sexy. `d4j` is ok. Relative
jump, well done.. `5dd` meh. I would glad hand like a politician with `dd dd
dd dd dd`. Just say mean things behind your back.
So lets try again.. but I spiced it up.
if (true) {
line1
// Some distance
line2
line3
line4
line5
}
First, place your cursor _in_ the if statement. Where ever you want. Type `di{`
i = inside
#### Class Discussion
What _other_ letter do you think you could try other than `i`?
.
.
.
.
.
.
.
use `<C-d>` to go down...
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
// TODO: make a meme -- aliens..
Yes, `a` is the other. I have never heard a great reason why, but just deal
with it.
so lets try again. try `da{`
if (true) {
line1
// Some distance
line2
line3
line4
line5
}
well shoot...
#### Class Discussion
Lets solve this together
if (true) {
line1
// Some distance
line2
line3
line4
line5
}
.
.
.
.
.
.
.
.
.
.
For those that couldn't wait or got the answer. `va{Vd`
#### Use YOUR SUPER POWERS
lets redo the previous exercise except copy from one if statement and override
the next if statement. How would we go about this?
if (true) {
line1
// Some distance
line2
line3
line4
line5
}
if (true) {
replace_me_1
// Some distance
replace_me_2
replace_me_3
replace_me_4
replace_me_5
}
================================================
FILE: lessons/files-e.md
================================================
---
path: "/files-e"
title: "Files and Navigations - Edit"
order: "15A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with e."
---
There are other ways to open files in vim. You are not restricted to just
using the file tree. There is also `:e`. `e` is short for `edit`.
Lets explore! You can always read the help menu, `:h e` but we don't need to
do that!
Lets reopen back up our `vim-nav-playground` project.
lets type `:e <ctrl-d>`. You should see the following
There is also tab completion! Try it out. `:e <tab>`. But how do we navigate
the popup list? Well there are two options. There is the vim way, and the
default way that most people would do. I bet you can guess which one you
already know... :)
Anywho, arrow keys work, but eww. `<C-p>` (Ctrl+p, remember this is vim
syntax). and `<C-n>` mean previous and next respectively.
### Fuzzy find anyone?
Yes, please! Of course there is a fuzzy finder, but those are installed as
plugins. We are not quite there, so let me just show you one of them. It is
called `telescope.nvim` and is available on neovim only. It has an absurd
amount of features. I'll only show the fuzzy file finder.
================================================
FILE: lessons/files-intro.md
================================================
---
path: "/files"
title: "Files and Navigations"
order: "11A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files."
---
As you imagined there is the "Vim" way to do everything. But the good news is
that there are many a plugin to make this process easier. Lets start off by
learning some built in vim ways and then expand from there.
First, lets clone a small test repo
ssh
```bash
git clone git@github.com:ThePrimeagen/vim-nav-playground.git
```
https
```bash
git clone https://github.com/ThePrimeagen/vim-nav-playground.git
```
navigate to `vim-nav-playground` and open up vim by opening up the directory in
vim.
```bash
cd vim-nav-playground
vim .
```
This should be what you are seeing (bar the colorscheme)
================================================
FILE: lessons/files-marks.md
================================================
---
path: "/files-marks"
title: "Files and Navigations - Marks"
order: "16A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with marks."
---
## Marks
Now marks are both incredible and also confusing at the same. Effectively vim
gives you the ability to mark files both globally and locally. This means with
just a swift couple taps of the finger you could be in a file marked. I find
marks definitely the end game of file navigation, but they are hard to do well.
So lets open up 3 files in `vim-nav-playground` and mark each one.
First lets open one file, `src/sockets.c`. Use your favorite way to open up
this file.
```
:e src/sockets.c
```
Then mark it by typing `m` then an **uppercase** character of your choice.
Repeat with `src/twitch.c` and `src/another.c` with different uppercase
characters. Remember the 3 characters you chose.
To navigate to the files you marked simply press `'<MarkLetter>`. So for me, I
chose `G` for `sockets.c`, and to navigate there I simply press `'G`.
### Some mark theory
* What marks did you choose?
* Why?
* Do you see some strategies?
* Strategies I have heard of
* My strategies
================================================
FILE: lessons/files-netrw.md
================================================
---
path: "/files-netrw"
title: "Files and Navigations - NetRW"
order: "12A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with NetRW."
---
NetRW is the default browsing of the filesystem plugin, and it comes with vim
for years now. It is available in both Vim and NeoVim.
Please navigate to `vim-nav-playground`. If you did not clone it, it can be
found [here](https://github.com/ThePrimeagen/vim-nav-playground)
Lets go over some basic movements. You can use all the same navigation as you
would while editing, but for file navigation.
```viml
vim .
```
Lets go down, `j`, to `src` and press `<CR>` (enter). Notice that it opens the
folder. We see a couple of files. Lets scroll to `twitch.c` and press `<CR>`.
What just happened?
How do we open back up our file navigation?
```viml
:Vex
```
`:Vex` stands for (V)ertical (ex)plore. Meaning, split the current view
experience vertically (direction of line) and insert a netrw at current
buffer location.
This is pretty - ok -. Hopefully, if you are of the vim mentality, you are
thinking it cannot take this many keystrokes just to do these things. I must
be able to customize the netrw experience. The answer, of course, is yes to
both.
Lets step up our vim knowledge.
First, lets quit and re-open up our vimrc.
If you don't remember, or starting here, here is our vimrc so far.
[Vim My Way](/vim-my-way)
[Color My Pencils](/color-my-pencils)
```viml
set scrolloff=8
set number
set relativenumber
set tabstop=4 softtabstop=4
set shiftwidth=4
set expandtab
set smartindent
" This was from the colorscheme section
colorscheme desert
```
================================================
FILE: lessons/files-recap.md
================================================
---
path: "/files-recap"
title: "Files and Navigations - Recap"
order: "17A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with e."
---
### Recap
Wow we have learned a lot! Lets chat about what we have learned.
* NetRW
* `:e`
* `<tab>` and `<C-d>`
* `<C-p>` and `<C-n>` for navigating pop-up lists
* remaps
* marks
* :Vex
* so %
* more on %. try typing `:echo expand("%")` Or `"%p` What happened here?
How are we feeling? Do you feel like you have no more room to learn? I get
that we are sort of on information overload. Lets take a break and just talk
about what we have learned overall.
### Some Bonus
Alternate File
================================================
FILE: lessons/files-remaps-1.md
================================================
---
path: "/files-remaps-1"
title: "Files and Navigations - Remaps part 1"
order: "13A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with NetRW."
---
First, lets quit our current vim experience and re-open up our vimrc.
```bash
# for vim
vim ~/.vimrc
```
```bash
# for neovim - this may be different depending on your flavor
vim ~/.config/nvim/init.vim
```
If your path is different for neovim but you don't know what it is, execute the
following in neovim to expose the path!!!
```viml
" Neovim only
:echo stdpath("config")
```
If you didn't save everything from the vim rc section, here is the complete
vimrc thus far from [Vim My Way](/vim-my-way) and [Color My
Pencils](/color-my-pencils).
```viml
set scrolloff=8
set number
set relativenumber
set tabstop=4 softtabstop=4
set shiftwidth=4
set expandtab
set smartindent
" This was from the colorscheme section
colorscheme desert
```
================================================
FILE: lessons/files-remaps-2.md
================================================
---
path: "/files-remaps-2"
title: "Files and Navigations - Remaps part 2"
order: "14A"
section: "Navigation"
description: "Coconut oil in hand, you are ready to navigate some files with NetRW."
---
### Remaps
Remaps are a powerful way to redefine your vim exerience the way you would like
it.
In your vim rc, add the following line
```viml
let mapleader = " "
nnoremap <leader>pv :Vex<CR>
```
First, what is `let mapleader = " "`. Leader is a way to set a custom key in
vim that can be referenced in remaps as `<leader>`.
Second, what is `nnoremap`? Well its the syntax for a remap. Lets break it down
```viml
mode lhs rhs
```
#### mode
lets go over the meaning of the mode. The mode is what mode (INSERT, NORMAL,
VISUAL) that this remap should work in. Here is the exact breakdown of the
remap.
```viml
" normal mode no recursive execution map A -> B
n nore map
```
#### lhs
lhs is the set of keys to execute the remap. In this case `<leader>pv` or
`<space>pv`.
#### rhs
rhs is the command to execute after the `lhs` has been typed in. In this case
we will type the command `:Vex<CR>`. Remember, `<CR>` means enter.
#### Lets execute it!
Ok, press `<leader>pv`, did anything happen? No, why not? Of course! Vim
never executed these new changes. Lets source the file.
```viml
" so = source
" % = current file
:so %
```
Now lets try again! did anything happen?
#### Dangers of remaps
It can make your system feel slow..
#### Exercise time
Sourcing the vimrc kind of stinks huh? Could we remap this?
Take a shot at remapping it.
```viml
" I use neovim, btw
nnoremap <Leader><CR> :so ~/.config/nvim/init.vim<CR>
```
Now I can simply press `<space><enter>` to resource my vim rc anytime I make
changes.
================================================
FILE: lessons/first-plugin.md
================================================
---
path: "/your-first-plugin"
title: "First Plugin"
order: "60A"
section: "Your First Plugin"
description: "Time to learn viml."
---
So... before we get started. I hate VimL. I think its gross. Its Ugly. Its
all around unpleasant to write. This is the primary reason why I use NeoVim,
not Vim. I can write my plugins in Lua.
Lua is not bad. Its a simple language that is extremely boring, which makes it
a great candidate for a scripting language of simple ui elements.
---
This is meant to show you the power of Vim and its scriptability. As said, its
better in Lua.
We are going to walk through [Writing Vim Plugin By Łukasz Jan
Niemier](https://vimways.org/2019/writing-vim-plugin/).
### Remember your VimRC?
Start by executing `:h runtimepath`
We need to add to the runtime path a directory to be loaded and it should
contain a folder called `plugin` where we have our plugin located.
```
mkdir -p /path/to/your/plugin/folder
cd /path/to/your/plugin/folder
vim --cmd "set rtp+=$(pwd)" .
```
We have opened up vim and added to the runtime path at opening our current
folder. This is _a_ way to do this.
You can also install your plugin like any other!
```
... In your vim rc, next to fzf ...
Plug '/absolute/path/to/plugin/folder'
```
But while we are developing, we don't have to have it in either, we can just
execute `:so %` (much like we did in our vim rc).
#### Follow along!
I'll create it now and you can follow along, PLEASE ASK QUESTIONS.
================================================
FILE: lessons/intro.md
================================================
---
path: "/intro"
title: "Introduction"
order: "1A"
section: "Introduction"
description: "The gentle introduction into vim that will blow your mind and cover you in coconut oil."
---
### Motivation
Often its the little choices in our lives.
### Welcome to Vim
#### But first, lets meet ED
```bash
> ed my-file.ts
```
You probably feel lost, press q to get the heck out of there. (on FEM I do
some actual editing)
Lets do it once more, but with ex
```bash
ex my-file.ts
```
ex is the improved version of ed. It also comes with Bill Joy's vi mode. Go
ahead, type `vi<enter>`. Welcome to vi! The predecessor of vim. :q to get
out.
Some fun facts about vi mode in ex.
* Was originally written by a single person, Bill Joy, in 1976.
* Ram was < 1k
* Emacs cost $100s. Yikes
* hjkl are movement keys because of Bill Joy's keyboard, which apparently was
the only ever made...
* Bill Joy's words of wisdom
* "People don't know that vi was written for a world that doesn't exist anymore"
* vi was written to edit text with a 300 buad modem.
## Why do I use vim?
I think I am a lot like you. I used netbeans. I was just a regular student
doing regular java binary searches in Netbeans.
One time I opened up vim at the encouragement of my friend...
I saw someone at some point
use vim/emacs and it blew my mind. I wanted to be good the command line. I
wanted to be fast. I wanted to be covered in that sweet organic, grass fed,
free range coconut oil!
So I took the journey. I started in IntelliJ with ideaVim! It was painful. I
am not going to lie, I almost gave up after one hour and I accomplished nothing
but being frustrated.
But then I decided that I was going to master the simple
movements and start mastering each movement one at a time until I was the best
there was.
Lets get started on this journey together. Lets get vimmed out of our mind.
By the end of this course, hopefully you will understand what in the world
coconut oil has to do with vim.
Personal note. The love of the thing and Dante.
## Set Expectations
You may feel confused, so ask questions.
## Who Am I?
* I make youtube videos about Vim
* I stream on twitch
* NeoVim Plugins
* Vim Deathmatch. A battle royale like vim plugin to battle for fastest
vim editing skallz (lua + docker)
* Sonic Pi. Creating live beats with the help of chat. (python + ncurses + docker)
* Coding for Netflix (typescript)
* I work at Netflix
## Who should take this course
* A (want to be) developer
* Desire to be excellent and to learn
* You wish to defeat complacency
## Prereqs
* Unix System as I cannot help you if you are on windows and you experience and
problems. I suggest Plebuntu
* typing skills will directly affect your experience.
* `git clone https://github.com/ThePrimeagen/vim-nav-playground.git`
## Flavors of vim
* VIM - Vi IMproved
* 8.1+
* NeoVim (I personally use this, wont go over anything neovim specific)
* spacevim
* https://spacevim.org/
* onivim2
* https://onivim.io/
## Learning Vim
* vimtutor
* vim-adventures
* [ThePrimeagen](https://youtube.com/ThePrimeagen)'s Youtube
* 6 part series
* Learning lua plugin dev
* VimRC
* `:h usr<tab>`
================================================
FILE: lessons/mid-level-recap.md
================================================
---
path: "/pit-stop"
title: "Pit Stop"
order: "20A"
section: "Recap"
description: "There has been a lot of info. Lets recap!"
---
### The Recap Recap
#### Navigation
* What are some questions and thoughts?
* What do you think is the hardest part?
* What part surprised you the most?
* How do you feel about modes?
* Do you feel that deep down excitement?
* You may not know this yet, but there is some really amazing keys coming up.
#### Vim RC
* You only know a little bit, how will you go about improving it?
* Do they feel confusing?
* Does VimL look ugly (its ok, it does)?
#### File Navgiation
* There are tons of options
* Marks are pretty OP
* File tree is a bit lacking.
* That telescope fuzzy finder though, huh?
================================================
FILE: lessons/opening-vim.md
================================================
---
path: "/opening-vim"
title: "Opening Vim"
order: "4A"
description: "Lets open vim for the first time!"
section: "Basics"
---
## Before you do
* Navigate to an empty directory (create your own). We will be doing a bit of
editing.
* Ensure you have no vim rc active.
* If you are using vim, rename ~/.vimrc -> ~/.vimrc2
* If you are using nvim, rename ~/.config/nvim/init.vim -> ~/.config/nvim/init.vim2
### Exercises
We will be using curl to grab a few exercises throughout this class. Here is
an example.
#### Note
Notice that i name the downloaded file then `&& vim name`
```bash
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/exercise-0-hjkl-x.md > exercise.md && vim exercise.md
```
## One more thing before we start
We are going to start from when Adam met Eve. So if you have some experience
you can probably skip the next couple sections. There is always valuable
information that may not know, but it may not be worth the time.
When I started, vim motions were chief most important, not vim itself. This
course will reverse that. Vim will be the spot light, motions will actually
take a backseat. I will show you what is available though.
## Lets open vim!
So you are in an empty directory, lets do this! Simply type `vim` and press
enter. (Ensure you have no vim rc)
```bash
> vim
```
* What are you thoughts?
* What are things you expected to see?
================================================
FILE: lessons/plugins.md
================================================
---
path: "/plugins"
title: "Plugins"
order: "30A"
section: "Plugins"
description: "Lets beef up the RC!"
---
Plugins!
Yes vim does get better.
Yes, that not so pretty language VimL is a primary vehicle in making things
nice. In NeoVim you can use Lua, which is quite nice. Especially when you
consider that there is a Typescript -> lua converter. Which means you can use
a typed language and get type completion and create vim plugins. 42069IQ
### Get a Plugin Manager
Plug!
Lets follow the instructions together getting
[Plug](https://github.com/junegunn/vim-plug) vim plugin manager installed
```
... plays waiting music ...
```
### File Navigation 2.0
Let's add a fuzzy finder, remap some things, and make it work for us. We are
going to use FZF even though I Use telescope personally. The reason for this
is because Telescope is neovim specific (lua) and wont work with Vim. Where as
FZF has been working for some time with vim.
Lets add the following lines to your vimrc
```viml
call plug#begin('~/.vim/plugged')
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
Plug 'junegunn/fzf.vim'
call plug#end()
```
Our vimrc should look something like the following.
```viml
set scrolloff=8
set number
set relativenumber
set tabstop=4 softtabstop=4
set shiftwidth=4
set expandtab
set smartindent
call plug#begin('~/.vim/plugged')
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
Plug 'junegunn/fzf.vim'
call plug#end()
" This was from the colorscheme section
colorscheme desert
" Our remaps
let mapleader = " "
nnoremap <leader>pv :Vex<CR>
nnoremap <Leader><CR> :so ~/.config/nvim/init.vim<CR>
```
Lets source our vimrc
```viml
" or use your sweet remap
:so %
```
Now we need to execute our plugin manager.
```viml
:PlugInstall
```
### WARNING
### My Vim Colorscheme is just a default one, its ugly
Once you do this you should see the following menu
Now we can execute `:GFiles`, lets give it a try in `vim-nav-playground`.
### WHAT HAVE I TAUGHT YOU?
What should we do now?
* M A K E _ A _ R E M A P
```viml
nnoremap <C-p> :GFiles<CR>
```
### Recap
* We got a plugin manager that makes installing plugins easy! You just need
the path on github to install new ones.
* We installed FZF, made a remap! then showed how awesome it is.
================================================
FILE: lessons/quickfix.md
================================================
---
path: "/quickfix"
title: "Quickfix Intro"
order: "40A"
section: "Quickfix Lists"
description: "One of the last components of the vim experience."
---
Quickfix lists were very mysterious to me when I started with vim. I knew that
there was a list of items and that it would pop up and if I left them I didn't
know how to go back. Little did I know how useful they are, especially when
navigating histories, such as git.
Lets create a quick quickfix
open up vim in the root of `vim-nav-playground`
```bash
vim .
```
now execute
```viml
:grep SOCKET_OPEN **/*.(c\|h)
```
You should see something like this:
Once you press `<CR>` you will see that the results disappear and you are
navigated to the first result. What should you do? The proper answer is
consult the `:h quickfix` page, but since I am here, let me walk you through
some actions.
When dealing with a quickfix you need 3 commands primarily, `:copen`, `:cnext`,
and `:cprev`. Lets try `:copen` first. Once you have executed it you should
see the following.
Lets select the other option. This will cause the above buffer to navigate and
the quickfix list will remain open. Oh no, how do we get back to the quickfix
list?
you could navigate back by executing a copen
```viml
:copen
```
you could force navigate back by closing the current window. There is nothing
left but going back to the remaining buffer that is open.
```viml
:q
```
You can window navigate. You can start a window navigation by pressing
`<C-w>`. What do you think you should press next to navigate towards the
quickfix menu?
If you said `j` you are awesome. YES! Use your vim movements you already
know! Don't you love when things come full circle!
Anywho, so you can guess you can move betwixt splits by press `<C-w>` and `h`,
`j`, `k`, or `l`. This is great, but it kind of sucks.
### WHAT DO WE DO NOW???
If I have to say make a remap one more time.
```viml
" I don't know if I love these remaps yet. I am considering doing
" <leader>c(k|j|o)
nnoremap <C-k> :cnext<CR>
nnoremap <C-j> :cprev<CR>
nnoremap <C-E> :copen<CR>
```
================================================
FILE: lessons/some-javascript.md
================================================
---
path: "/some-javascript"
title: "some javascript"
order: "72A"
section: "Misc Content"
description: "This is the first exercise to try out."
---
// Delete the description.
// That seems slow right?
// <count>Delete
// try typing, with your cursor on the first line the following.
// 7dd
// What does that mean about j and k?
// But we have a problem down we?
function foo(a, b, c) {
switch (a) {
case 1:
return b + c;
break;
default:
return a * b + c;
}
throw new Error("This should never happen");
}
if (true) {
console.log(foo(1, 5, 7));
}
================================================
FILE: lessons/terminology.md
================================================
---
path: "/terms"
title: "The Terminology"
order: "2A"
description: "This goes over some basic vocabulary that will be used"
section: "Introduction"
---
## Files, Buffers, Windows, Splits, and Tabs
We all know what files are (or so you think [LiveOverflow's Video on
Files](https://www.youtube.com/watch?v=VVdmmN0su6E)) but there is a bit more
when it comes to how vim handles them.
### Buffer
A buffer contains the text of the file and is what you edit.
`:h buffer`
### Window
Contains a buffer to display. Windows can be closed but the underlying buffer
can remain in memory.
`:h window`
### Tabs
A tab is like another viewport. You can have many windows|splits open per tab.
`:h tab`
### Splits
A split simply refers to splitting the viewport in N sections (various sizing
and orientations available) to display windows.
`:h split`
## Other Terminology
## Help Menu
Help menu can be accessed by typing `:h<enter>`. There is _so much
documentation_, that is pretty good, available. If you find yourself lost,
RTFM (at least that is what they tell me).
## Motion
A command that moves the cursor (taken straight from the help docs, `:h motion`).
## Abbreviations
Ctrl+a will be abbreviated `<C-a>`. This is also how its referenced in VimL,
Vim's editor language.
Enter will often be abbr as `<CR>`
Tab, Escape, and space will be `<tab>`, `<esc>`, `<space>`
When you see something that starts with a `:` that means it will execute a command.
================================================
FILE: lessons/vim-my-way.md
================================================
---
path: "/vim-my-way"
title: "Vim My Way"
order: "9A"
description: "Ok, so vim looked pretty ugly. Lets make it feel the way we want it!"
section: "The VimRC"
---
Ok, how much did you hate having to do the `zz`? It is annoying. Instead,
lets tell vim to do it for us.
```viml
:set scrolloff=8
```
Now lets scroll around. How does it feel. SO GOOD.
----
Lets quit out of our previous vim experience and curl down this file.
```
curl https://raw.githubusercontent.com/ThePrimeagen/vim-fundamentals/master/course-website/lessons/some-javascript.md > exercise.js && vim exercise.js
```
After following the delete instructions you should notice that its really hard
to count how many lines of code huh? Type the following
```viml
:set number
```
You will notice a new column has been added and now you have line numbers!
Yeah its pretty easy to a jump, but also not all that easy. Math can be hard
sometimes.
```viml
" sets relative numbers
:set relativenumber
" turns off relative numbers
:set norelativenumber
```
Wow. Much better huh? You can jump easily now. You may not be good at
jumping yet, but you can see its a lot easier. Lets play around.
Put your cursor on `foo` and press `v10j`. What happened? Press `V` to
highlight the whole line.
Ok lets leave vim, `:q` and reopen back up the file either by reexecuting the
curl command or simply executing `vim exercise.js`
What happened?
Commands you execute only live for the session you have vim open. This is
painful right? Well, actually not. There is a `.vimrc`! All is not horrible.
So lets create one!
Create a vimrc in the correct location with the following content.
```viml
set scrolloff=8
set number
set relativenumber
```
Open up vim again. Ohh yeah! This is great, but those tabs have to go (tabs
vs spaces anyone?)! Add these lines to your vimrc and restart vim.
```viml
set tabstop=4 softtabstop=4
set shiftwidth=4
set expandtab
set smartindent
```
Now restart vim... what just happened? Pretty cool huh?
### How do you know what is available?
* You can google. Sometimes that is a good thing.
* `h options`
* `h <tabcomplete or ctrl-d>`
* `h <specific option name>`
================================================
FILE: package.json
================================================
{
"name": "vim-fundamentals",
"description": "education site for VIM fundamentals",
"version": "1.0.0",
"author": "Brian Holt <btholt+course-starter@gmail.com>",
"dependencies": {
"bootstrap": "^5.1.3",
"code-mirror-themes": "^1.0.0",
"front-matter": "^4.0.2",
"gatsby": "^4.6.2",
"gatsby-cli": "^4.6.1",
"gatsby-link": "^4.6.0",
"gatsby-plugin-layout": "^3.6.0",
"gatsby-plugin-react-helmet": "^5.6.0",
"gatsby-plugin-sharp": "4.6.0",
"gatsby-remark-autolink-headers": "^5.6.0",
"gatsby-remark-copy-linked-files": "^5.6.0",
"gatsby-remark-images": "^6.6.0",
"gatsby-remark-prismjs": "^6.6.0",
"gatsby-source-filesystem": "^4.6.0",
"gatsby-transformer-remark": "^5.6.0",
"is-url-superb": "^6.1.0",
"parse-markdown-links": "^1.0.4",
"prismjs": "^1.26.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0"
},
"keywords": [
"gatsby",
"gatsby-starter",
"course",
"education"
],
"license": "(CC-BY-NC-4.0 OR Apache-2.0)",
"main": "n/a",
"scripts": {
"build": "gatsby build --prefix-paths",
"csv": "node csv.js",
"dev": "gatsby develop",
"format": "prettier --write \"src/**/*.{js,jsx,md,css}\"",
"lint": "eslint \"src/**/*.{js,jsx}\""
},
"devDependencies": {
"@babel/polyfill": "^7.12.1",
"babel-eslint": "^10.1.0",
"core-js": "^3.21.0",
"eslint": "^8.8.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"prettier": "^2.5.1"
}
}
================================================
FILE: save.sh
================================================
#!/usr/bin/env bash
cp -r course-website/lessons/* lessons
================================================
FILE: src/components/TOCCard.css
================================================
.main-card {
border: 1px solid #ccc;
border-radius: 8px;
width: 100%;
margin: 0;
overflow: hidden;
background-color: white;
}
.lesson-title {
font-size: 20px;
padding: 15px 30px;
}
.lesson-content {
padding: 0 15px 15px 15px;
line-height: 1.5;
}
.sections-name {
list-style: none;
}
.lesson-section-title {
margin-top: 25px;
}
================================================
FILE: src/components/TOCCard.js
================================================
import React from "react";
import Link from "gatsby-link";
import * as helpers from "../util/helpers";
import "./TOCCard.css";
const sortFn = helpers.sorter;
const LessonCard = ({ content, title }) => {
console.log(sortFn);
const sections = content
.map(lesson => lesson.node.frontmatter)
.sort(sortFn)
.reduce((acc, lesson) => {
if (!acc.length) {
acc.push([lesson]);
return acc;
}
const lastSection = acc[acc.length - 1][0].section.split(",")[0];
if (lastSection === lesson.section.split(",")[0]) {
acc[acc.length - 1].push(lesson);
} else {
acc.push([lesson]);
}
return acc;
}, []);
return (
<div className="main-card">
<h1 className="lesson-title gradient">{title}</h1>
<div className="lesson-content">
<ol className="sections-name">
{sections.map(section => (
<li key={section[0].section}>
<h3 className="lesson-section-title">{section[0].section}</h3>
<ol>
{section.map(lesson => (
<li key={lesson.path}>
<Link to={lesson.path}>{lesson.title}</Link>
</li>
))}
</ol>
</li>
))}
</ol>
</div>
</div>
);
};
export default LessonCard;
================================================
FILE: src/layouts/index.css
================================================
.gradient {
background: rgb(96, 108, 136);
background: linear-gradient(
to bottom,
rgb(96, 108, 136) 0%,
rgb(63, 76, 107) 100%
);
}
.navbar {
border-bottom: 1px solid #ccc;
position: fixed;
width: 100%;
top: 0;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
}
.navbar h1 {
font-size: 20px;
margin: inherit;
padding: inherit;
font-weight: bold;
}
.navbar h2,
.navbar h3 {
font-size: 14px;
margin: inherit;
padding: inherit;
text-transform: uppercase;
color: white;
}
.button {
border-radius: 10px;
background: black;
color: white;
padding: 15px 20px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.button a {
color: white;
text-decoration: none;
}
.button a:hover {
text-decoration: underline;
}
.jumbotron.gradient {
color: white;
text-transform: uppercase;
font-weight: bold;
}
.jumbotron {
padding: 2rem 1rem;
margin-bottom: 2rem;
background-color: #e9ecef;
border-radius: .3rem;
}
@media (min-width: 576px) {
.jumbotron {
padding: 4rem 2rem;
}
}
.navbar-brand.navbar-brand {
text-transform: uppercase;
color: white;
font-weight: bold;
}
.navbar-brand.navbar-brand:hover {
color: #777;
}
.navbar-brand.navbar-brand:focus {
color: white;
}
.lesson {
margin: 15px;
padding: 15px;
background-color: #fff;
border-radius: 8px;
overflow: scroll;
}
.lesson p {
clear: both;
}
.lesson-links {
font-size: 18px;
padding: 15px 0;
margin: 20px;
}
.next {
float: right;
}
.prev {
float: left;
}
.lesson-title {
color: white;
text-transform: uppercase;
font-weight: bold;
}
.klipse-result {
border: 1px solid #90b4fe;
padding-top: 8px;
position: relative;
width: 100%;
}
.klipse-result .CodeMirror-wrap {
width: 100%;
border-color: transparent;
}
.klipse-result::before {
content: "result";
background-color: white;
position: absolute;
top: -13px;
height: 13px;
}
.language-htm,
.language-css,
.language-js,
.language-json {
width: 100%;
}
.gatsby-highlight {
/* border: 1px solid black; */
padding: 4px;
border-radius: 4px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: stretch;
}
.CodeMirror-wrap {
width: 100%;
font-size: 12px;
height: inherit;
margin-bottom: 12px;
}
.CodeMirror-gutters {
height: inherit !important;
}
.klipse-snippet > .CodeMirror {
border: none;
width: 100%;
}
.gatsby-highlight > .klipse-snippet {
border: 1px solid #90b4fe;
width: 100%;
border-right: none;
position: relative;
margin-bottom: 15px;
}
.doggos {
width: 100%;
border: 1px solid #666;
border-radius: 5px;
}
================================================
FILE: src/layouts/index.js
================================================
import React from "react";
import Link from "gatsby-link";
import Helmet from "react-helmet";
import { graphql, StaticQuery } from "gatsby";
import "bootstrap/dist/css/bootstrap.css";
import "prismjs/themes/prism-solarizedlight.css";
import "code-mirror-themes/themes/monokai.css";
import "./index.css";
// import jpg from "../../static/posterframe.jpg";
const TemplateWrapper = props => {
return (
<StaticQuery
render={data => {
const frontmatter =
props.data && props.data.markdownRemark
? props.data.markdownRemark.frontmatter
: null;
return (
<div>
<Helmet
title={
frontmatter
? `${frontmatter.title} – ${frontmatter.section} – ${data.site.siteMetadata.title}`
: data.site.siteMetadata.title
}
meta={[
{
name: "og:title",
content: frontmatter
? `${frontmatter.title} – ${frontmatter.section} – ${data.site.siteMetadata.title}`
: data.site.siteMetadata.title
},
{
name: "description",
content: frontmatter
? frontmatter.description
: data.site.siteMetadata.description
},
{
name: "og:description",
content: frontmatter
? frontmatter.description
: data.site.siteMetadata.description
},
{
name: "twitter:card",
content: "summary_large_image"
},
// {
// name: "og:image",
// content: "https://btholt.github.io" + jpg
// },
// {
// name: "og:url",
// content:
// "https://btholt.github.io/complete-intro-to-containers" +
// (frontmatter && frontmatter.path ? frontmatter.path : "")
// },
{
name: "keywords",
content: data.site.siteMetadata.keywords.join(", ")
},
{}
]}
/>
<div className="navbar navbar-light gradient">
<Link to="/" className="navbar-brand">
<h1>{data.site.siteMetadata.title}</h1>
</Link>
{!frontmatter ? null : (
<h2>{`${frontmatter.section} – ${frontmatter.title}`}</h2>
)}
<h3 class="button"><a href="https://frontendmasters.com/courses/vim-fundamentals/">VIM Course Videos ▶️ </a></h3>
</div>
<div className="main">{props.children}</div>
</div>
);
}}
query={graphql`
query HomePage($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
path
title
order
section
description
}
}
site {
pathPrefix
siteMetadata {
title
subtitle
description
keywords
}
}
}
`}
/>
);
};
export default TemplateWrapper;
================================================
FILE: src/pages/404.js
================================================
import React from "react";
const NotFoundPage = () => (
<div>
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn't exist... the sadness.</p>
</div>
);
export default NotFoundPage;
================================================
FILE: src/pages/index.css
================================================
body {
background-color: #eee;
}
.index {
width: 97%;
max-width: 750px;
margin: 0 auto;
margin-top: 40px;
}
.main {
margin-top: 80px;
}
.example-table {
border-collapse: separate;
}
.example-table td {
border: 1px solid black;
width: 20px;
height: 20px;
}
.example-table .current {
background-color: #fcc;
}
.example-table .n {
border-top-color: transparent;
}
.example-table .s {
border-bottom-color: transparent;
}
.example-table .e {
border-right-color: transparent;
}
.example-table .w {
border-left-color: transparent;
}
.lesson-container {
max-width: 850px;
margin: 0 auto;
}
.lesson {
margin: 20px;
}
.lesson-content {
padding: 20px;
}
.lesson h1 {
margin: 0;
padding: 20px;
}
.lesson-content table {
}
.lesson-content td {
border: 1px solid black;
padding: 8px;
}
.lesson-content td input {
min-width: 300px;
}
.lesson-flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.random-tweet {
width: 100%;
margin-top: 100px;
}
.fem-link {
text-align: center;
}
================================================
FILE: src/pages/index.js
================================================
import React from "react";
import { StaticQuery, graphql } from "gatsby";
import Card from "../components/TOCCard";
import "./index.css";
const IndexPage = () => (
<StaticQuery
query={graphql`
query HomepageTOC {
site {
siteMetadata {
title
subtitle
description
keywords
}
}
allMarkdownRemark(sort: { order: ASC, fields: [frontmatter___order] }) {
edges {
node {
id
frontmatter {
order
path
title
section
description
}
}
}
}
}
`}
render={props => (
<div className="index">
<div className="jumbotron gradient">
<h1>{props.site.siteMetadata.title}</h1>
<h2>{props.site.siteMetadata.subtitle}</h2>
</div>
<Card
title="Table of Contents"
content={props.allMarkdownRemark.edges}
/>
</div>
)}
/>
);
export default IndexPage;
================================================
FILE: src/templates/lessonTemplate.js
================================================
import React from "react";
import Link from "gatsby-link";
import { graphql } from "gatsby";
import * as helpers from "../util/helpers";
const sortFn = helpers.sorter;
export default function Template(props) {
let { markdownRemark, allMarkdownRemark } = props.data; // data.markdownRemark holds our post data
const sections = allMarkdownRemark.edges
.map(lesson => lesson.node.frontmatter)
.sort(sortFn);
const { frontmatter, html } = markdownRemark;
const index = sections.findIndex(el => el.path === frontmatter.path);
const prevLink =
index > 0 ? (
<Link className="prev" to={sections[index - 1].path}>
{"← " + sections[index - 1].title}
</Link>
) : null;
const nextLink =
index < sections.length - 1 ? (
<Link className="next" to={sections[index + 1].path}>
{sections[index + 1].title + " →"}
</Link>
) : null;
return (
<div className="lesson-container">
<div className="lesson">
<h1>{frontmatter.title}</h1>
<h2>{frontmatter.date}</h2>
<div
className="lesson-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
<div className="lesson-links">
{prevLink}
{nextLink}
</div>
</div>
</div>
);
}
export const pageQuery = graphql`
query LessonByPath($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
path
title
order
section
description
}
}
allMarkdownRemark(limit: 1000) {
edges {
node {
frontmatter {
order
path
title
}
}
}
}
}
`;
================================================
FILE: src/util/helpers.js
================================================
function splitSections(str) {
const validSectionTest = /^\d+[A-Z]+$/;
const numbersRegex = /^\d+/;
const lettersRegex = /[A-Z]+$/;
if (!validSectionTest.test(str)) {
throw new Error(
`${str} does not match the section format. It must be <numbers><capital letters>, like 16A or 5F (case sensitive)`
);
}
return [numbersRegex.exec(str)[0], lettersRegex.exec(str)[0]];
}
const getCharScore = str =>
str
.split("")
.map((char, index) => char.charCodeAt(0) * 10 ** index)
.reduce((acc, score) => acc + score);
function sorter(a, b) {
let aOrder, bOrder;
if (a.attributes && a.attributes.order) {
aOrder = a.attributes.order;
bOrder = b.attributes.order;
} else {
aOrder = a.order;
bOrder = b.order;
}
const [aSec, aSub] = splitSections(aOrder);
const [bSec, bSub] = splitSections(bOrder);
// sections first
if (aSec !== bSec) {
return aSec - bSec;
}
// subsections next
return getCharScore(aSub) - getCharScore(bSub);
}
module.exports.splitSections = splitSections;
module.exports.sorter = sorter;
================================================
FILE: todo.md
================================================
* Recap Basics
* Recap Help / Options
* Execution Flow
gitextract_scmncpft/ ├── .editorconfig ├── .eslintrc.json ├── .github/ │ └── workflows/ │ └── gatsby.yml ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── course-website/ │ ├── .editorconfig │ ├── .eslintrc.json │ ├── .github/ │ │ └── workflows/ │ │ └── gatsby.yml │ ├── .gitignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── csv.js │ ├── exercise │ ├── gatsby-config.js │ ├── gatsby-node.js │ ├── lessons/ │ │ ├── adv-pitstop.md │ │ ├── advanced-movements-1.md │ │ ├── advanced-text-manipulation-1.md │ │ ├── advanced-text-manipulation-2.md │ │ ├── advanced-text-manipulation-3.md │ │ ├── are-you-ready.md │ │ ├── basic-usage.md │ │ ├── color-my-pencils.md │ │ ├── exercise-0-hjkl-x.md │ │ ├── exercise-1-dyp.md │ │ ├── exercise-2-insert.md │ │ ├── exercise-3-search-and-replace.md │ │ ├── exercise-4-macros.md │ │ ├── exercise-5-registers.md │ │ ├── exercise-6-motions.md │ │ ├── files-e.md │ │ ├── files-intro.md │ │ ├── files-marks.md │ │ ├── files-netrw.md │ │ ├── files-recap.md │ │ ├── files-remaps-1.md │ │ ├── files-remaps-2.md │ │ ├── first-plugin.md │ │ ├── intro.md │ │ ├── mid-level-recap.md │ │ ├── my-ideal.md │ │ ├── opening-vim.md │ │ ├── plugins.md │ │ ├── quickfix.md │ │ ├── some-javascript.md │ │ ├── terminology.md │ │ └── vim-my-way.md │ ├── package.json │ └── src/ │ ├── components/ │ │ ├── TOCCard.css │ │ └── TOCCard.js │ ├── layouts/ │ │ ├── index.css │ │ └── index.js │ ├── pages/ │ │ ├── 404.js │ │ ├── index.css │ │ └── index.js │ ├── templates/ │ │ └── lessonTemplate.js │ └── util/ │ └── helpers.js ├── csv.js ├── gatsby-config.js ├── gatsby-node.js ├── lessons/ │ ├── adv-pitstop.md │ ├── advanced-movements-1.md │ ├── advanced-text-manipulation-1.md │ ├── advanced-text-manipulation-2.md │ ├── advanced-text-manipulation-3.md │ ├── are-you-ready.md │ ├── basic-usage.md │ ├── color-my-pencils.md │ ├── exercise-0-hjkl-x.md │ ├── exercise-1-dyp.md │ ├── exercise-2-insert.md │ ├── exercise-3-search-and-replace.md │ ├── exercise-4-macros.md │ ├── exercise-5-registers.md │ ├── exercise-6-motions.md │ ├── files-e.md │ ├── files-intro.md │ ├── files-marks.md │ ├── files-netrw.md │ ├── files-recap.md │ ├── files-remaps-1.md │ ├── files-remaps-2.md │ ├── first-plugin.md │ ├── intro.md │ ├── mid-level-recap.md │ ├── opening-vim.md │ ├── plugins.md │ ├── quickfix.md │ ├── some-javascript.md │ ├── terminology.md │ └── vim-my-way.md ├── package.json ├── save.sh ├── src/ │ ├── components/ │ │ ├── TOCCard.css │ │ └── TOCCard.js │ ├── layouts/ │ │ ├── index.css │ │ └── index.js │ ├── pages/ │ │ ├── 404.js │ │ ├── index.css │ │ └── index.js │ ├── templates/ │ │ └── lessonTemplate.js │ └── util/ │ └── helpers.js └── todo.md
SYMBOL INDEX (8 symbols across 6 files)
FILE: course-website/csv.js
function createCsv (line 13) | async function createCsv() {
FILE: course-website/src/templates/lessonTemplate.js
function Template (line 8) | function Template(props) {
FILE: course-website/src/util/helpers.js
function splitSections (line 1) | function splitSections(str) {
function sorter (line 20) | function sorter(a, b) {
FILE: csv.js
function createCsv (line 14) | async function createCsv() {
FILE: src/templates/lessonTemplate.js
function Template (line 8) | function Template(props) {
FILE: src/util/helpers.js
function splitSections (line 1) | function splitSections(str) {
function sorter (line 20) | function sorter(a, b) {
Condensed preview — 106 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (185K chars).
[
{
"path": ".editorconfig",
"chars": 114,
"preview": "root = true\n\n[*]\nend_of_line = lf\ninsert_final_newline = true\ncharset = utf-8\nindent_style = space\nindent_size = 2"
},
{
"path": ".eslintrc.json",
"chars": 617,
"preview": "{\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:import/errors\",\n \"plugin:react/recommended\",\n \"plugin:jsx-a"
},
{
"path": ".github/workflows/gatsby.yml",
"chars": 475,
"preview": "name: Deploy Gatsby Site to GitHub Pages\n\non:\n push:\n branches:\n - master\n\njobs:\n deploy:\n runs-on: ubuntu-"
},
{
"path": ".gitignore",
"chars": 188,
"preview": "# Project dependencies\n# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git\nnode"
},
{
"path": ".prettierrc",
"chars": 3,
"preview": "{}\n"
},
{
"path": "LICENSE",
"chars": 17658,
"preview": "## creative commons\n#\n\n# Attribution-NonCommercial 4.0 International\n\nCreative Commons Corporation (“Creative Commons”) "
},
{
"path": "README.md",
"chars": 801,
"preview": "<h1 align=\"center\"><a href=\"https://frontendmasters.com/courses/vim-fundamentals/\">VIM Fundamentals Course by ThePrimeag"
},
{
"path": "course-website/.editorconfig",
"chars": 114,
"preview": "root = true\n\n[*]\nend_of_line = lf\ninsert_final_newline = true\ncharset = utf-8\nindent_style = space\nindent_size = 2"
},
{
"path": "course-website/.eslintrc.json",
"chars": 617,
"preview": "{\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:import/errors\",\n \"plugin:react/recommended\",\n \"plugin:jsx-a"
},
{
"path": "course-website/.github/workflows/gatsby.yml",
"chars": 503,
"preview": "name: Deploy Gatsby Site to GitHub Pages\n\non:\n push:\n branches:\n - master\n\njobs:\n deploy:\n runs-on: ubuntu-"
},
{
"path": "course-website/.gitignore",
"chars": 188,
"preview": "# Project dependencies\n# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git\nnode"
},
{
"path": "course-website/.prettierrc",
"chars": 3,
"preview": "{}\n"
},
{
"path": "course-website/LICENSE",
"chars": 17655,
"preview": "## creative commons\n\n# Attribution-NonCommercial 4.0 International\n\nCreative Commons Corporation (“Creative Commons”) is"
},
{
"path": "course-website/README.md",
"chars": 3756,
"preview": "<h1 align=\"center\">gatsby-course-starter</h1> <br>\n\n<p align=\"center\">\n A Gatsby starter to get you started creating ed"
},
{
"path": "course-website/csv.js",
"chars": 2827,
"preview": "const fs = require(\"fs\").promises;\nconst path = require(\"path\");\nconst fm = require(\"front-matter\");\nconst isUrl = requi"
},
{
"path": "course-website/exercise",
"chars": 1304,
"preview": "---\npath: \"/exercise-3\"\ntitle: \"Search and Replace\"\norder: \"72A\"\nsection: \"Search and Replace\"\ndescription: \"Search and "
},
{
"path": "course-website/gatsby-config.js",
"chars": 1056,
"preview": "module.exports = {\n siteMetadata: {\n title: \"Vim Fundamentals\",\n subtitle: \"Making vim approachable!\",\n descri"
},
{
"path": "course-website/gatsby-node.js",
"chars": 849,
"preview": "const path = require(\"path\");\n\nexports.createPages = ({ actions, graphql }) => {\n const { createPage } = actions;\n\n co"
},
{
"path": "course-website/lessons/adv-pitstop.md",
"chars": 511,
"preview": "---\npath: \"/adv-pit-stop\"\ntitle: \"Pit Stop\"\norder: \"53A\"\nsection: \"Advanced Text Manipulation\"\ndescription: \"There has b"
},
{
"path": "course-website/lessons/advanced-movements-1.md",
"chars": 872,
"preview": "---\npath: \"/adv-motions\"\ntitle: \"Advanced Motions\"\norder: \"54A\"\nsection: \"Advanced Text Manipulation\"\ndescription: \"And "
},
{
"path": "course-website/lessons/advanced-text-manipulation-1.md",
"chars": 702,
"preview": "---\npath: \"/search-and-replace\"\ntitle: \"Search And Replace\"\norder: \"50A\"\nsection: \"Advanced Text Manipulation\"\ndescripti"
},
{
"path": "course-website/lessons/advanced-text-manipulation-2.md",
"chars": 733,
"preview": "---\npath: \"/macros\"\ntitle: \"Macros\"\norder: \"51A\"\nsection: \"Advanced Text Manipulation\"\ndescription: \"Macros. Yes, they "
},
{
"path": "course-website/lessons/advanced-text-manipulation-3.md",
"chars": 535,
"preview": "---\npath: \"/registers\"\ntitle: \"Registers\"\norder: \"52A\"\nsection: \"Advanced Text Manipulation\"\ndescription: \"Registers. D"
},
{
"path": "course-website/lessons/are-you-ready.md",
"chars": 1102,
"preview": "---\npath: \"/are-you-ready\"\ntitle: \"Are You Ready?\"\norder: \"3A\"\ndescription: \"The final hurrah! before diving into vim!\"\n"
},
{
"path": "course-website/lessons/basic-usage.md",
"chars": 2665,
"preview": "---\npath: \"/basic-usage\"\ntitle: \"Using Vim\"\norder: \"5A\"\ndescription: \"Let's use vim for the first time!\"\nsection: \"Basic"
},
{
"path": "course-website/lessons/color-my-pencils.md",
"chars": 1666,
"preview": "---\npath: \"/color-my-pencils\"\ntitle: \"Color My Pencils\"\norder: \"10A\"\ndescription: \"Lets set some colorschemes\"\nsection: "
},
{
"path": "course-website/lessons/exercise-0-hjkl-x.md",
"chars": 1669,
"preview": "---\npath: \"/exercise-0\"\ntitle: \"hjkl-x\"\norder: \"69A\"\nsection: \"Misc Content\"\ndescription: \"This is the first exercise to"
},
{
"path": "course-website/lessons/exercise-1-dyp.md",
"chars": 1082,
"preview": "---\npath: \"/exercise-1\"\ntitle: \"dyp\"\norder: \"70A\"\nsection: \"Misc Content\"\ndescription: \"This is the basic movement and e"
},
{
"path": "course-website/lessons/exercise-2-insert.md",
"chars": 478,
"preview": "---\npath: \"/exercise-2\"\ntitle: \"insert\"\norder: \"71A\"\nsection: \"Misc Content\"\ndescription: \"Insertion! There are many wa"
},
{
"path": "course-website/lessons/exercise-3-search-and-replace.md",
"chars": 1213,
"preview": "---\npath: \"/exercise-3\"\ntitle: \"Search and Replace\"\norder: \"72A\"\nsection: \"Misc Content\"\ndescription: \"Search and Replac"
},
{
"path": "course-website/lessons/exercise-4-macros.md",
"chars": 1199,
"preview": "---\npath: \"/exercise-4\"\ntitle: \"Macros\"\norder: \"73A\"\nsection: \"Misc Content\"\ndescription: \"Macros\"\n---\n\n// Yes I wrote t"
},
{
"path": "course-website/lessons/exercise-5-registers.md",
"chars": 1631,
"preview": "---\npath: \"/exercise-5\"\ntitle: \"Registers\"\norder: \"74A\"\nsection: \"Misc Content\"\ndescription: \"Registers. Definitely har"
},
{
"path": "course-website/lessons/exercise-6-motions.md",
"chars": 3810,
"preview": "---\npath: \"/exercise-6\"\ntitle: \"Advanced Motions\"\norder: \"75A\"\nsection: \"Misc Content\"\ndescription: \"Motions 201\"\n---\n\n#"
},
{
"path": "course-website/lessons/files-e.md",
"chars": 1266,
"preview": "---\npath: \"/files-e\"\ntitle: \"Files and Navigations - Edit\"\norder: \"15A\"\nsection: \"Navigation\"\ndescription: \"Coconut oil "
},
{
"path": "course-website/lessons/files-intro.md",
"chars": 794,
"preview": "---\npath: \"/files\"\ntitle: \"Files and Navigations\"\norder: \"11A\"\nsection: \"Navigation\"\ndescription: \"Coconut oil in hand, "
},
{
"path": "course-website/lessons/files-marks.md",
"chars": 1186,
"preview": "---\npath: \"/files-marks\"\ntitle: \"Files and Navigations - Marks\"\norder: \"16A\"\nsection: \"Navigation\"\ndescription: \"Coconut"
},
{
"path": "course-website/lessons/files-netrw.md",
"chars": 1290,
"preview": "---\npath: \"/files-netrw\"\ntitle: \"Files and Navigations - NetRW\"\norder: \"12A\"\nsection: \"Navigation\"\ndescription: \"Coconut"
},
{
"path": "course-website/lessons/files-recap.md",
"chars": 831,
"preview": "---\npath: \"/files-recap\"\ntitle: \"Files and Navigations - Recap\"\norder: \"17A\"\nsection: \"Navigation\"\ndescription: \"Coconut"
},
{
"path": "course-website/lessons/files-remaps-1.md",
"chars": 942,
"preview": "---\npath: \"/files-remaps-1\"\ntitle: \"Files and Navigations - Remaps part 1\"\norder: \"13A\"\nsection: \"Navigation\"\ndescriptio"
},
{
"path": "course-website/lessons/files-remaps-2.md",
"chars": 1794,
"preview": "---\npath: \"/files-remaps-2\"\ntitle: \"Files and Navigations - Remaps part 2\"\norder: \"14A\"\nsection: \"Navigation\"\ndescriptio"
},
{
"path": "course-website/lessons/first-plugin.md",
"chars": 1477,
"preview": "---\npath: \"/your-first-plugin\"\ntitle: \"First Plugin\"\norder: \"60A\"\nsection: \"Your First Plugin\"\ndescription: \"Time to lea"
},
{
"path": "course-website/lessons/intro.md",
"chars": 3417,
"preview": "---\npath: \"/intro\"\ntitle: \"Introduction\"\norder: \"1A\"\nsection: \"Introduction\"\ndescription: \"The gentle introduction into "
},
{
"path": "course-website/lessons/mid-level-recap.md",
"chars": 733,
"preview": "---\npath: \"/pit-stop\"\ntitle: \"Pit Stop\"\norder: \"20A\"\nsection: \"Recap\"\ndescription: \"There has been a lot of info. Lets "
},
{
"path": "course-website/lessons/my-ideal.md",
"chars": 322,
"preview": "---\npath: \"/my-ideal-setup\"\ntitle: \"My Ideal Setup\"\norder: \"61A\"\nsection: \"My Pontifications About Vim\"\ndescription: \"Le"
},
{
"path": "course-website/lessons/opening-vim.md",
"chars": 1438,
"preview": "---\npath: \"/opening-vim\"\ntitle: \"Opening Vim\"\norder: \"4A\"\ndescription: \"Lets open vim for the first time!\"\nsection: \"Bas"
},
{
"path": "course-website/lessons/plugins.md",
"chars": 2413,
"preview": "---\npath: \"/plugins\"\ntitle: \"Plugins\"\norder: \"30A\"\nsection: \"Plugins\"\ndescription: \"Lets beef up the RC!\"\n---\n\nPlugins!\n"
},
{
"path": "course-website/lessons/quickfix.md",
"chars": 2661,
"preview": "---\npath: \"/quickfix\"\ntitle: \"Quickfix Intro\"\norder: \"40A\"\nsection: \"Quickfix Lists\"\ndescription: \"One of the last compo"
},
{
"path": "course-website/lessons/some-javascript.md",
"chars": 789,
"preview": "---\npath: \"/some-javascript\"\ntitle: \"some javascript\"\norder: \"72A\"\nsection: \"Misc Content\"\ndescription: \"This is the fir"
},
{
"path": "course-website/lessons/terminology.md",
"chars": 1501,
"preview": "---\npath: \"/terms\"\ntitle: \"The Terminology\"\norder: \"2A\"\ndescription: \"This goes over some basic vocabulary that will be "
},
{
"path": "course-website/lessons/vim-my-way.md",
"chars": 2179,
"preview": "---\npath: \"/vim-my-way\"\ntitle: \"Vim My Way\"\norder: \"9A\"\ndescription: \"Ok, so vim looked pretty ugly. Lets make it feel "
},
{
"path": "course-website/package.json",
"chars": 1654,
"preview": "{\n \"name\": \"gatsby-course-starter\",\n \"description\": \"a gatsby seed project to get your education site started\",\n \"ver"
},
{
"path": "course-website/src/components/TOCCard.css",
"chars": 355,
"preview": ".main-card {\n border: 1px solid #ccc;\n border-radius: 8px;\n width: 100%;\n margin: 0;\n overflow: hidden;\n backgroun"
},
{
"path": "course-website/src/components/TOCCard.js",
"chars": 1356,
"preview": "import React from \"react\";\nimport Link from \"gatsby-link\";\nimport * as helpers from \"../util/helpers\";\nimport \"./TOCCard"
},
{
"path": "course-website/src/layouts/index.css",
"chars": 2215,
"preview": ".gradient {\n background: rgb(96, 108, 136);\n background: linear-gradient(\n to bottom,\n rgb(96, 108, 136) 0%,\n "
},
{
"path": "course-website/src/layouts/index.js",
"chars": 3321,
"preview": "import React from \"react\";\nimport Link from \"gatsby-link\";\nimport Helmet from \"react-helmet\";\nimport { graphql, StaticQu"
},
{
"path": "course-website/src/pages/404.js",
"chars": 201,
"preview": "import React from \"react\";\n\nconst NotFoundPage = () => (\n <div>\n <h1>NOT FOUND</h1>\n <p>You just hit a route that"
},
{
"path": "course-website/src/pages/index.css",
"chars": 904,
"preview": "body {\n background-color: #eee;\n}\n\n.index {\n width: 97%;\n max-width: 750px;\n margin: 0 auto;\n margin-top: 20px;\n}\n\n"
},
{
"path": "course-website/src/pages/index.js",
"chars": 1105,
"preview": "import React from \"react\";\nimport { StaticQuery, graphql } from \"gatsby\";\nimport Card from \"../components/TOCCard\";\n\nimp"
},
{
"path": "course-website/src/templates/lessonTemplate.js",
"chars": 1733,
"preview": "import React from \"react\";\nimport Link from \"gatsby-link\";\nimport { graphql } from \"gatsby\";\nimport * as helpers from \"."
},
{
"path": "course-website/src/util/helpers.js",
"chars": 1083,
"preview": "function splitSections(str) {\n const validSectionTest = /^\\d+[A-Z]+$/;\n const numbersRegex = /^\\d+/;\n const lettersRe"
},
{
"path": "csv.js",
"chars": 2828,
"preview": "const fs = require(\"fs\").promises;\nconst path = require(\"path\");\n\nconst fm = require(\"front-matter\");\nconst isUrl = requ"
},
{
"path": "gatsby-config.js",
"chars": 1035,
"preview": "module.exports = {\n siteMetadata: {\n title: \"Vim Fundamentals\",\n subtitle: \"Making vim approachable!\",\n descri"
},
{
"path": "gatsby-node.js",
"chars": 849,
"preview": "const path = require(\"path\");\n\nexports.createPages = ({ actions, graphql }) => {\n const { createPage } = actions;\n\n co"
},
{
"path": "lessons/adv-pitstop.md",
"chars": 539,
"preview": "---\npath: \"/pit-stop\"\ntitle: \"Pit Stop\"\norder: \"53A\"\nsection: \"Advanced Text Manipulation\"\ndescription: \"There has been "
},
{
"path": "lessons/advanced-movements-1.md",
"chars": 872,
"preview": "---\npath: \"/adv-motions\"\ntitle: \"Advanced Motions\"\norder: \"54A\"\nsection: \"Advanced Text Manipulation\"\ndescription: \"And "
},
{
"path": "lessons/advanced-text-manipulation-1.md",
"chars": 702,
"preview": "---\npath: \"/search-and-replace\"\ntitle: \"Search And Replace\"\norder: \"50A\"\nsection: \"Advanced Text Manipulation\"\ndescripti"
},
{
"path": "lessons/advanced-text-manipulation-2.md",
"chars": 733,
"preview": "---\npath: \"/macros\"\ntitle: \"Macros\"\norder: \"51A\"\nsection: \"Advanced Text Manipulation\"\ndescription: \"Macros. Yes, they "
},
{
"path": "lessons/advanced-text-manipulation-3.md",
"chars": 535,
"preview": "---\npath: \"/registers\"\ntitle: \"Registers\"\norder: \"52A\"\nsection: \"Advanced Text Manipulation\"\ndescription: \"Registers. D"
},
{
"path": "lessons/are-you-ready.md",
"chars": 1038,
"preview": "---\npath: \"/are-you-ready\"\ntitle: \"Are You Ready?\"\norder: \"3A\"\ndescription: \"The final hurrah! before diving into vim!\"\n"
},
{
"path": "lessons/basic-usage.md",
"chars": 2665,
"preview": "---\npath: \"/basic-usage\"\ntitle: \"Using Vim\"\norder: \"5A\"\ndescription: \"Let's use vim for the first time!\"\nsection: \"Basic"
},
{
"path": "lessons/color-my-pencils.md",
"chars": 1666,
"preview": "---\npath: \"/color-my-pencils\"\ntitle: \"Color My Pencils\"\norder: \"10A\"\ndescription: \"Lets set some colorschemes\"\nsection: "
},
{
"path": "lessons/exercise-0-hjkl-x.md",
"chars": 1827,
"preview": "---\npath: \"/exercise-0\"\ntitle: \"hjkl-x\"\norder: \"69A\"\nsection: \"Misc Content\"\ndescription: \"This is the first exercise to"
},
{
"path": "lessons/exercise-1-dyp.md",
"chars": 1082,
"preview": "---\npath: \"/exercise-1\"\ntitle: \"dyp\"\norder: \"70A\"\nsection: \"Misc Content\"\ndescription: \"This is the basic movement and e"
},
{
"path": "lessons/exercise-2-insert.md",
"chars": 478,
"preview": "---\npath: \"/exercise-2\"\ntitle: \"insert\"\norder: \"71A\"\nsection: \"Misc Content\"\ndescription: \"Insertion! There are many wa"
},
{
"path": "lessons/exercise-3-search-and-replace.md",
"chars": 1213,
"preview": "---\npath: \"/exercise-3\"\ntitle: \"Search and Replace\"\norder: \"72A\"\nsection: \"Misc Content\"\ndescription: \"Search and Replac"
},
{
"path": "lessons/exercise-4-macros.md",
"chars": 1199,
"preview": "---\npath: \"/exercise-4\"\ntitle: \"Macros\"\norder: \"73A\"\nsection: \"Misc Content\"\ndescription: \"Macros\"\n---\n\n// Yes I wrote t"
},
{
"path": "lessons/exercise-5-registers.md",
"chars": 1631,
"preview": "---\npath: \"/exercise-5\"\ntitle: \"Registers\"\norder: \"74A\"\nsection: \"Misc Content\"\ndescription: \"Registers. Definitely har"
},
{
"path": "lessons/exercise-6-motions.md",
"chars": 3810,
"preview": "---\npath: \"/exercise-6\"\ntitle: \"Advanced Motions\"\norder: \"75A\"\nsection: \"Misc Content\"\ndescription: \"Motions 201\"\n---\n\n#"
},
{
"path": "lessons/files-e.md",
"chars": 1266,
"preview": "---\npath: \"/files-e\"\ntitle: \"Files and Navigations - Edit\"\norder: \"15A\"\nsection: \"Navigation\"\ndescription: \"Coconut oil "
},
{
"path": "lessons/files-intro.md",
"chars": 794,
"preview": "---\npath: \"/files\"\ntitle: \"Files and Navigations\"\norder: \"11A\"\nsection: \"Navigation\"\ndescription: \"Coconut oil in hand, "
},
{
"path": "lessons/files-marks.md",
"chars": 1186,
"preview": "---\npath: \"/files-marks\"\ntitle: \"Files and Navigations - Marks\"\norder: \"16A\"\nsection: \"Navigation\"\ndescription: \"Coconut"
},
{
"path": "lessons/files-netrw.md",
"chars": 1661,
"preview": "---\npath: \"/files-netrw\"\ntitle: \"Files and Navigations - NetRW\"\norder: \"12A\"\nsection: \"Navigation\"\ndescription: \"Coconut"
},
{
"path": "lessons/files-recap.md",
"chars": 681,
"preview": "---\npath: \"/files-recap\"\ntitle: \"Files and Navigations - Recap\"\norder: \"17A\"\nsection: \"Navigation\"\ndescription: \"Coconut"
},
{
"path": "lessons/files-remaps-1.md",
"chars": 942,
"preview": "---\npath: \"/files-remaps-1\"\ntitle: \"Files and Navigations - Remaps part 1\"\norder: \"13A\"\nsection: \"Navigation\"\ndescriptio"
},
{
"path": "lessons/files-remaps-2.md",
"chars": 1794,
"preview": "---\npath: \"/files-remaps-2\"\ntitle: \"Files and Navigations - Remaps part 2\"\norder: \"14A\"\nsection: \"Navigation\"\ndescriptio"
},
{
"path": "lessons/first-plugin.md",
"chars": 1477,
"preview": "---\npath: \"/your-first-plugin\"\ntitle: \"First Plugin\"\norder: \"60A\"\nsection: \"Your First Plugin\"\ndescription: \"Time to lea"
},
{
"path": "lessons/intro.md",
"chars": 3417,
"preview": "---\npath: \"/intro\"\ntitle: \"Introduction\"\norder: \"1A\"\nsection: \"Introduction\"\ndescription: \"The gentle introduction into "
},
{
"path": "lessons/mid-level-recap.md",
"chars": 733,
"preview": "---\npath: \"/pit-stop\"\ntitle: \"Pit Stop\"\norder: \"20A\"\nsection: \"Recap\"\ndescription: \"There has been a lot of info. Lets "
},
{
"path": "lessons/opening-vim.md",
"chars": 1438,
"preview": "---\npath: \"/opening-vim\"\ntitle: \"Opening Vim\"\norder: \"4A\"\ndescription: \"Lets open vim for the first time!\"\nsection: \"Bas"
},
{
"path": "lessons/plugins.md",
"chars": 2360,
"preview": "---\npath: \"/plugins\"\ntitle: \"Plugins\"\norder: \"30A\"\nsection: \"Plugins\"\ndescription: \"Lets beef up the RC!\"\n---\n\nPlugins!\n"
},
{
"path": "lessons/quickfix.md",
"chars": 2192,
"preview": "---\npath: \"/quickfix\"\ntitle: \"Quickfix Intro\"\norder: \"40A\"\nsection: \"Quickfix Lists\"\ndescription: \"One of the last compo"
},
{
"path": "lessons/some-javascript.md",
"chars": 568,
"preview": "---\npath: \"/some-javascript\"\ntitle: \"some javascript\"\norder: \"72A\"\nsection: \"Misc Content\"\ndescription: \"This is the fir"
},
{
"path": "lessons/terminology.md",
"chars": 1501,
"preview": "---\npath: \"/terms\"\ntitle: \"The Terminology\"\norder: \"2A\"\ndescription: \"This goes over some basic vocabulary that will be "
},
{
"path": "lessons/vim-my-way.md",
"chars": 2179,
"preview": "---\npath: \"/vim-my-way\"\ntitle: \"Vim My Way\"\norder: \"9A\"\ndescription: \"Ok, so vim looked pretty ugly. Lets make it feel "
},
{
"path": "package.json",
"chars": 1622,
"preview": "{\n \"name\": \"vim-fundamentals\",\n \"description\": \"education site for VIM fundamentals\",\n \"version\": \"1.0.0\",\n \"author\""
},
{
"path": "save.sh",
"chars": 60,
"preview": "#!/usr/bin/env bash\ncp -r course-website/lessons/* lessons\n\n"
},
{
"path": "src/components/TOCCard.css",
"chars": 355,
"preview": ".main-card {\n border: 1px solid #ccc;\n border-radius: 8px;\n width: 100%;\n margin: 0;\n overflow: hidden;\n backgroun"
},
{
"path": "src/components/TOCCard.js",
"chars": 1356,
"preview": "import React from \"react\";\nimport Link from \"gatsby-link\";\nimport * as helpers from \"../util/helpers\";\nimport \"./TOCCard"
},
{
"path": "src/layouts/index.css",
"chars": 2748,
"preview": ".gradient {\n background: rgb(96, 108, 136);\n background: linear-gradient(\n to bottom,\n rgb(96, 108, 136) 0%,\n "
},
{
"path": "src/layouts/index.js",
"chars": 3459,
"preview": "import React from \"react\";\nimport Link from \"gatsby-link\";\nimport Helmet from \"react-helmet\";\nimport { graphql, StaticQu"
},
{
"path": "src/pages/404.js",
"chars": 201,
"preview": "import React from \"react\";\n\nconst NotFoundPage = () => (\n <div>\n <h1>NOT FOUND</h1>\n <p>You just hit a route that"
},
{
"path": "src/pages/index.css",
"chars": 1086,
"preview": "body {\n background-color: #eee;\n}\n\n.index {\n width: 97%;\n max-width: 750px;\n margin: 0 auto;\n margin-top: 40px;\n}\n\n"
},
{
"path": "src/pages/index.js",
"chars": 1105,
"preview": "import React from \"react\";\nimport { StaticQuery, graphql } from \"gatsby\";\nimport Card from \"../components/TOCCard\";\n\nimp"
},
{
"path": "src/templates/lessonTemplate.js",
"chars": 1733,
"preview": "import React from \"react\";\nimport Link from \"gatsby-link\";\nimport { graphql } from \"gatsby\";\nimport * as helpers from \"."
},
{
"path": "src/util/helpers.js",
"chars": 1083,
"preview": "function splitSections(str) {\n const validSectionTest = /^\\d+[A-Z]+$/;\n const numbersRegex = /^\\d+/;\n const lettersRe"
},
{
"path": "todo.md",
"chars": 57,
"preview": "* Recap Basics\n* Recap Help / Options\n* Execution Flow\n\n\n"
}
]
About this extraction
This page contains the full source code of the ThePrimeagen/vim-fundamentals GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 106 files (167.3 KB), approximately 45.9k tokens, and a symbol index with 8 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.