├── assets
    ├── .gitkeep
    ├── Example.xcf
    └── example.png
├── demo
    └── prty_shortcut_cards_firefox_demo.apkg
├── src
    ├── front.html
    ├── back.html
    └── style.css
├── LICENSE
├── README.md
└── examples
    └── index.html


/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/assets/Example.xcf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ginger51011/prty-shortcut-cards/HEAD/assets/Example.xcf


--------------------------------------------------------------------------------
/assets/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ginger51011/prty-shortcut-cards/HEAD/assets/example.png


--------------------------------------------------------------------------------
/demo/prty_shortcut_cards_firefox_demo.apkg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ginger51011/prty-shortcut-cards/HEAD/demo/prty_shortcut_cards_firefox_demo.apkg


--------------------------------------------------------------------------------
/src/front.html:
--------------------------------------------------------------------------------
 1 | <!-- See ginger51011/prty-shortcut-cards for full source -->
 2 | 
 3 | <div class="note">
 4 |     <div class="title-container">
 5 |         <span class="title-text">
 6 |             {{Software}}
 7 |             {{^Software}}
 8 |                 Unspecified Software
 9 |             {{/Software}}
10 |         </span>
11 |     </div>
12 |     <div class="front-container">
13 |         {{Action}}
14 |     </div>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright © 2022 Emil Jonathan Eriksson
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/src/back.html:
--------------------------------------------------------------------------------
 1 | <!-- See ginger51011/prty-shortcut-cards for full source -->
 2 | 
 3 | <div class="note">
 4 |     <div class="title-container">
 5 |         <span class="title-text">
 6 |             {{Software}}
 7 |             {{^Software}}
 8 |                 Unspecified Software
 9 |             {{/Software}}
10 |         </span>
11 |     </div>
12 |     <div class="front-container">
13 |         {{Action}}
14 |     </div>
15 |     <!-- Front of card ends -->
16 | 
17 |     <hr class="card-divider"/>
18 |     
19 |     <!-- Back of card begins -->
20 |     <span id="shortcut-combo-1" hidden>{{Key Combination}}</span>
21 |     <span id="shortcut-combo-2" hidden>{{Extra Key Combination}}</span>
22 |     <!-- Is unhidden when element is ready -->
23 |     <div id="formatted-shortcut" class="shortcut-container" hidden>
24 |         {{^Key Combination}}
25 |             <i>Fill field shortcut in form `Ctrl Shift P` to format!</i>
26 |         {{/Key Combination}}
27 |     </div>
28 | 
29 |     <script>
30 |         // Block so const will go out of scope when appropriate
31 |         {
32 |             const shortcutText = document.getElementById('shortcut-combo-1').innerText;
33 |             const extracomboText = document.getElementById('shortcut-combo-2').innerText;
34 | 
35 |             const shortcutContainer = document.getElementById('formatted-shortcut');
36 |             
37 |             const shortcutArray = shortcutText.split(' ');
38 |             appendKbd(shortcutArray, shortcutContainer);
39 |             
40 |             if (extracomboText && extracomboText.length !== 0) {
41 |                 // Add space before next combination
42 |                 shortcutContainer.append(' ');
43 | 
44 |                 const extraArray = extracomboText.split(' ');
45 |                 appendKbd(extraArray, shortcutContainer);
46 |             }
47 |             
48 |             // Was hidden until now, so building of element cannot be seen
49 |             shortcutContainer.removeAttribute('hidden');
50 | 
51 |             /**
52 |              * Appends a combo of keys, properly formatted as `<kbd>` elements
53 |              */
54 |             function appendKbd(comboArray, container) {
55 |                 comboArray.forEach((key, index) => {
56 |                     if (index !== 0) {
57 |                         // Prepend a plus, this is not the first in a combo. Add
58 |                         // word boundaries to allow for wrapping
59 |                         container.append(document.createElement('wbr'), '+', document.createElement('wbr'));
60 |                     }
61 | 
62 |                     const newElement = document.createElement('kbd');
63 |                     newElement.innerText = key;
64 |                     container.append(newElement);
65 |                 });
66 |             }
67 |         }
68 |     </script>
69 | </div>
70 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # prty-shortcut cards - Simply pretty Anki cards for keyboard shortcuts
 2 | 
 3 | [![License](https://img.shields.io/github/license/ginger51011/prty-shortcut-cards)](https://github.com/ginger51011/prty-shortcut-cards/blob/main/LICENSE)
 4 | 
 5 | `prty-shortcut` allows for quickly creating nice looking Anki cards for memorizing keyboard
 6 | shortcuts for different software. Shortcuts are formatted automatically, so by entering `Ctrl K` and `I`,
 7 | `prty-shortcut` will insert the format below!
 8 | 
 9 | ![example card](./assets/example.png)
10 | 
11 | ## Installation
12 | 
13 | ### Using demo deck
14 | 
15 | By installing the demo deck containing a few useful Firefox shortcuts, Anki will automatically
16 | import the `prty-shortcut` note type. Simply download [this file](./demo/prty_shortcut_cards_firefox_demo.apkg)
17 | and press <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd> in Anki, import the file and _voilà_! The
18 | new card type will become available!
19 | 
20 | ### Manually add the note type
21 | 
22 | The note type can be also be manually created!
23 | 
24 | 1. Create a new note type (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd> -> `Add`)
25 | 2. Select the new note type and click `Fields`
26 | 3. Make sure the note has the _exact_ following fields: `Software`, `Action`, `Key Combination` and `Extra Key Combination`. If you want to rename these, you have to change the front and back of the card.
27 | 4. Save when done and now press `Cards`
28 | 5. Copy [src/front.html](./src/front.html) into `Front Template`, [src/back.html](./src/back.html) into `Back Template` and [src/style.css](./src/style.css) into `Styles` and save
29 | 6. Done! You should now be able to create new notes of the `prty-shortcut` type!
30 | 
31 | ## Usage
32 | 
33 | I would recommend playing around with the notes to figure it out, but in essence `prty-shortcut` will automatically
34 | assume the formatting of your card. So, by entering _"Ctrl Shift P"_ in `Key Combination`, the card will be generated
35 | as "_<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>"_. The plusses inserted by `prty-shortcut` means that these buttons are to be pressed simultaneously.
36 | 
37 | Some advanced shortcuts require two separate combinations. This is provided by `Extra Key Combination`, and will 
38 | be formatted as `Shotcut Combination`. This field is not required, and will be ignored if empty.
39 | 
40 | ### Using dark cards without night mode
41 | 
42 | It is possible to change the CSS (styling, i.e. [this file](/src/style.css)) of the notes so that the dark cards can be
43 | used without night mode. To do this, simply edit the card in Anki:
44 | 
45 | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd>, select `prty-shortcut` and click `Cards`), go to the `Styling` section and swap place of the following lines:
46 | 
47 | ```css
48 | .card {
49 | ```
50 | 
51 | and
52 | 
53 | ```css
54 | .card.nightMode {
55 | ```
56 | 
57 | Now you will have inversed it all! If you never want the light cards, simple remove everything related to
58 | `.card` , and remove `.nightMode` from the line containing `.card.nightMode`.
59 | 
60 | ## Support
61 | 
62 | If you like this deck and would like to support the creation of more like it, don't buy me a coffee. Donate your money to those who need it most.
63 | Personally I recommend [The GiveWell Maximum Impact Fund](https://www.givewell.org/maximum-impact-fund), where your money will make the biggest
64 | impact on someones life.
65 | 
66 | If you instead want to help the development of Anki, consider supporting the developers of [Anki](https://github.com/ankitects/) and [AnkiDroid](https://opencollective.com/ankidroid).
67 | 
68 | If you decide to support any of these causes, please contact me! It would make my day :)
69 | 
70 | ## Development
71 | 
72 | All card variants can be previewed using `examples/index.html`. Run a local webserver, using the same
73 | directory as this `README` as root, and click your way to `examples/index.html`. To do this using python, run
74 | 
75 | ```
76 | python3 -m http.server 1337
77 | ```
78 | 
79 | to run a server on http://127.0.0.1:1337
80 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
  1 | /* See ginger51011/prty-shortcut-cards for full source */
  2 | 
  3 | /* Colors based on Nord theme */
  4 | 
  5 | .card {
  6 |     /* DISGUSTING light mode, ugh */
  7 |     --color: rgb(46, 52, 64);
  8 |     --text-shadow: var(--outer-border-color);
  9 | 
 10 |     --outer-border-color: rgb(216, 222, 233);
 11 |     --note-background: rgb(229, 233, 240);
 12 |     --divider-color: var(--outer-border-color);
 13 | 
 14 |     --title-background-color: rgb(235, 203, 139);
 15 | 
 16 |     --kbd-color: rgb(163, 190, 140);
 17 |     --kbd-background-color: rgb(59, 66, 82);
 18 |     --kbd-shadow: var(--outer-border-color);
 19 | 
 20 |     --code-color: rgb(135, 191, 207);
 21 |     --code-background-color: rgb(60, 67, 83);
 22 | }
 23 | 
 24 | .card.nightMode {
 25 |     /* Night mode represent */
 26 |     --color: rgb(236, 239, 244);
 27 |     --text-shadow: var(--outer-border-color);
 28 | 
 29 |     --outer-border-color: rgb(76, 86, 106);
 30 |     --note-background: rgb(46, 52, 64);
 31 |     --divider-color: var(--outer-border-color);
 32 | 
 33 |     --title-background-color: rgb(208, 135, 112);
 34 | 
 35 |     --kbd-color: rgb(163, 190, 140);
 36 |     --kbd-background-color: rgb(59, 66, 82);
 37 |     --kbd-shadow: var(--outer-border-color);
 38 | 
 39 |     --code-color: rgb(135, 191, 207);
 40 |     --code-background-color: rgb(60, 67, 83);
 41 | }
 42 | 
 43 | .note {
 44 |     /* Distances */
 45 |     --top-margin: 1.2em;
 46 |     --content-text-padding: 0.3em;
 47 | 
 48 |     /* Borders */
 49 |     --outer-border: 0.05em solid var(--outer-border-color);
 50 | 
 51 |     /* Sizes */
 52 |     --note-max-width: 40em;
 53 |     --line-height: 1.6;
 54 | 
 55 |     /* Fonts */
 56 |     --font-family: "Roboto", "Inter", "Rubik", "Avenir", "system-ui";
 57 |     --mono-font-family: "Roboto Mono", "Source Code Pro", "Ubuntu Mono", monospace;
 58 | 
 59 |     /* Text */
 60 |     color: var(--color);
 61 |     font-family: var(--font-family);
 62 |     font-size: 20px;
 63 |     text-align: center;
 64 | 
 65 |     border: var(--outer-border);
 66 |     border-radius: 4px;
 67 | 
 68 |     background-color: var(--note-background);
 69 | 
 70 |     line-height: var(--line-height);
 71 | 
 72 |     /* Margins and padding */
 73 |     padding: 0.4em;
 74 |     margin: 0 auto;
 75 |     margin-top: var(--top-margin) !important;
 76 |     max-width: var(--note-max-width);
 77 | 
 78 |     /* Flexbox */
 79 |     display: flex;
 80 |     flex-flow: column nowrap;
 81 |     justify-content: center;
 82 |     align-items: stretch;
 83 | }
 84 | 
 85 | code {
 86 |     padding: 2px 4px;
 87 |     color: var(--code-color);
 88 |     background-color: var(--code-background-color);
 89 |     border-radius: 3px;
 90 |     font-family: var(--mono-font-family);
 91 | }
 92 | 
 93 | /* #### FRONT #### */
 94 | .title-container {
 95 |     margin-top: calc(-1 * var(--top-margin));
 96 | }
 97 | 
 98 | .title-text {
 99 |     /* Text */
100 |     font-weight: bolder;
101 |     font-family: var(--mono-font-family);
102 |     text-align: center;
103 |     font-size: 20px;
104 |     text-shadow: 0.05em 0 var(--text-shadow);
105 |     color: var(--color);
106 | 
107 |     /* Box */
108 |     padding: .1em .7em;
109 |     border: var(--outer-border);
110 |     border-radius: 20px;
111 |     background-color: var(--title-background-color);
112 | 
113 |     /* Placement */
114 |     margin: 0 auto;
115 | }
116 | 
117 | div.front-container {
118 |     padding: var(--content-text-padding);
119 |     margin: auto;
120 | }
121 | 
122 | /* #### BACK #### */
123 | hr.card-divider {
124 |     border: none;
125 |     border-top: 2px dotted var(--divider-color);
126 |     background-color: transparent;
127 |     margin: 0.4em 0;
128 | }
129 | 
130 | /* Container for shortcuts */
131 | .shortcut-container {
132 |     /* Text */
133 |     color: var(--kbd-color);
134 |     font-size: 125%;
135 |     text-align: center !important;
136 |     text-shadow: var(--kbd-shadow);
137 |     line-height: 2em;
138 | 
139 |     /* Placement */
140 |     margin: auto;
141 |     padding: var(--content-text-padding);
142 | }
143 | 
144 | /* Keyboard keys */
145 | kbd {
146 |     /* Text */
147 |     font-family: var(--mono-font-family);
148 |     text-shadow: none !important;
149 | 
150 |     /* Box */
151 |     border: 1px solid var(--kbd-color);
152 |     border-radius: 3pt;
153 |     background-color: var(--kbd-background-color);
154 |     box-shadow: 0 2px 3px var(--kbd-shadow);
155 | 
156 |     /* Placement */
157 |     margin: .2em;
158 |     padding: .1em .6em;
159 | }


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!-- Used for development and to generate images -->
  3 | <head>
  4 |     <link rel="stylesheet" type="text/css" href="../src/style.css">
  5 | </head>
  6 | <body>
  7 |     <!-- We use jQuery to load our other HTML files -->
  8 |     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  9 |     <!-- These divs emulates Anki -->
 10 |     <div class="card nightMode dark-container">
 11 |         <div id="front-night-note"></div>
 12 |         <div id="back-night-note"></div>
 13 |     </div>
 14 |     
 15 |     <div class="card light-container">
 16 |         <div id="front-light-note"></div>
 17 |         <div id="back-light-note"></div>
 18 |     </div>
 19 | 
 20 |     <!-- Load in HTML from actual cards -->
 21 |     <script>
 22 |         $(function() {
 23 |             // No scripts in this, so we can ignore scripts
 24 |             $('#front-night-note').load('../src/front.html .note');
 25 |         });
 26 | 
 27 |         $(function() {
 28 |             // By executing `.load()` with selector, we avoid script being ran
 29 |             $('#back-night-note').load('../src/back.html .note', '', () => {
 30 |                 const ev = new CustomEvent('night-card-loaded');
 31 |                 document.dispatchEvent(ev);
 32 |             });
 33 |         });
 34 | 
 35 |         $(function() {
 36 |             // No scripts in this, so we can ignore scripts
 37 |             $('#front-light-note').load('../src/front.html .note');
 38 |         });
 39 | 
 40 |         document.addEventListener('night-card-done', () => {
 41 |             $(function() {
 42 |                 // By executing `.load()` with selector, we avoid script being ran
 43 |                 $('#back-light-note').load('../src/back.html .note', '', () => {
 44 |                     const ev = new CustomEvent('light-card-loaded');
 45 |                     document.dispatchEvent(ev);
 46 |                 });
 47 |             });
 48 |         });
 49 |     </script>
 50 |     
 51 |     <!-- Nasty hack to load script -->
 52 |     <div id="dummy" hidden></div>
 53 |     
 54 |     <script>
 55 |         // We want to replace all annoying placeholders `{{ Bla }}` with
 56 |         // something useful, so we do it in this yank way
 57 |         document.addEventListener('night-card-loaded', () => {
 58 |             setupCard(true);
 59 |         });
 60 | 
 61 |         document.addEventListener('light-card-loaded', () => {
 62 |             setupCard(false);
 63 |         });
 64 | 
 65 |         function setupCard(nightCard) {
 66 |             const tts = document.getElementsByClassName('title-text');
 67 |             
 68 |             for (let i = 0; i < tts.length; i-=-1) {
 69 |                 tts[i].innerText = 'software';
 70 |             }
 71 | 
 72 |             const fcs = document.getElementsByClassName('front-container');
 73 | 
 74 |             for (let i = 0; i < fcs.length; i-=-1) {
 75 |                 fcs[i].innerText = 'Simply win at life, also insert on new line';
 76 |             }
 77 | 
 78 |             const sc1 = document.getElementById('shortcut-combo-1');
 79 |             sc1.innerText = 'Ctrl K';
 80 |             
 81 |             const sc2 = document.getElementById('shortcut-combo-2');
 82 |             sc2.innerText = 'I'; 
 83 | 
 84 |             // Make sure back of card is empty
 85 |             const fmtc = document.getElementById('formatted-shortcut');
 86 |             fmtc.innerText = '';
 87 |            
 88 |             // Now we load the script of that file using a nasty hack
 89 |            $(() => {
 90 |                 $('#dummy').load('../src/back.html', '', () => {
 91 |                     // Workaround for back script not finding more than one
 92 |                     sc1.id = 'Not this anymore';
 93 |                     sc2.id = 'Not this either';
 94 |                     fmtc.id = 'Gone. Reduced to atoms';
 95 |                     if (nightCard) {
 96 |                         const ev = new CustomEvent('night-card-done');
 97 |                         document.dispatchEvent(ev);
 98 |                     }
 99 |                 });
100 |            })
101 |         }
102 |     </script>
103 |     
104 |     <style>
105 |         .dark-container {
106 |             background-color: black;
107 |             padding: 2em;
108 |         }
109 |         .light-container {
110 |             background-color: white;
111 |             padding: 2em;
112 |         }
113 |     </style>
114 | </body>


--------------------------------------------------------------------------------