├── shortcodes
    ├── code_diagram
    │   ├── gist.html
    │   └── mermaid.html
    ├── video_service
    │   ├── youtube.html
    │   ├── asciinema.html
    │   └── vimeo.html
    ├── map_service
    │   ├── google_map.html
    │   ├── kakao_map.html
    │   └── naver_map.html
    └── social_media
    │   ├── x_share.html
    │   └── facebook_share.html
├── LICENSE
└── README.md


/shortcodes/code_diagram/gist.html:
--------------------------------------------------------------------------------
1 | <div {% if class %}class="{{class}}"{% endif %}>
2 |     <script src="https://gist.github.com/{{username}}/{{id}}.js"></script>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/shortcodes/video_service/youtube.html:
--------------------------------------------------------------------------------
1 | <div {% if class %}class="{{class}}"{% endif %}>
2 |     <iframe
3 |         src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}"
4 |         webkitallowfullscreen
5 |         mozallowfullscreen
6 |         allowfullscreen>
7 |     </iframe>
8 | </div>
9 | 


--------------------------------------------------------------------------------
/shortcodes/code_diagram/mermaid.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | The script below needs to be loaded in Zola Layout.
 3 | 
 4 | <script type="module">
 5 |    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
 6 |    mermaid.initialize({ startOnLoad: true });
 7 | </script>
 8 | -->
 9 | 
10 | <pre class="mermaid">
11 |  {{ body }}
12 | </pre>
13 | 


--------------------------------------------------------------------------------
/shortcodes/video_service/asciinema.html:
--------------------------------------------------------------------------------
1 | <div {% if class %}class="{{class}}"{% endif %}>
2 |     <script id="asciicast-{{id}}" src="https://asciinema.org/a/{{id}}.js" async {% if autoplay %}data-autoplay="true"{% endif %} {% if loop %}data-loop="true"{% endif %} {% if speed %}data-speed="{{speed}}"{% endif %} {% if theme %}data-theme="{{theme}}"{% endif %} {% if cols %}data-cols="{{cols}}"{% endif %} {% if rows %}data-rows="{{rows}}"{% endif %}></script>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/shortcodes/video_service/vimeo.html:
--------------------------------------------------------------------------------
 1 | <div {% if class %}class="{{class}}"{% endif %}>
 2 |     <iframe
 3 |         src="https://player.vimeo.com/video/{{id}}{% if autoplay %}?autoplay=1{% endif %}"
 4 |         width="{% if width %}{{width}}{% else %}640{% endif %}"
 5 |         height="{% if height %}{{height}}{% else %}360{% endif %}"
 6 |         frameborder="0"
 7 |         allow="autoplay; fullscreen; picture-in-picture"
 8 |         allowfullscreen>
 9 |     </iframe>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/shortcodes/map_service/google_map.html:
--------------------------------------------------------------------------------
 1 | <div {% if class %}class="{{class}}"{% endif %}>
 2 |     <iframe
 3 |         width="{% if width %}{{width}}{% else %}600{% endif %}"
 4 |         height="{% if height %}{{height}}{% else %}450{% endif %}"
 5 |         style="border:0"
 6 |         loading="lazy"
 7 |         allowfullscreen
 8 |         referrerpolicy="no-referrer-when-downgrade"
 9 |         src="https://www.google.com/maps/embed/v1/place?key={{api_key}}
10 |           &q={{query | urlencode}}{% if zoom %}&zoom={{zoom}}{% endif %}">
11 |     </iframe>
12 | </div>
13 | 


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


--------------------------------------------------------------------------------
/shortcodes/social_media/x_share.html:
--------------------------------------------------------------------------------
 1 | <div class="x-card {% if class %}{{class}}{% endif %}">
 2 |     <a href="https://x.com/intent/tweet?url={{url | urlencode}}&text={{text | urlencode}}{% if via %}&via={{via}}{% endif %}"
 3 |        target="_blank"
 4 |        rel="noopener noreferrer"
 5 |        class="x-share-button">
 6 |         <div class="x-card-content">
 7 |             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
 8 |                 <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
 9 |             </svg>
10 |             <span>Share on X</span>
11 |         </div>
12 |     </a>
13 |     <style>
14 |         .x-card {
15 |             display: inline-block;
16 |             margin: 10px 0;
17 |         }
18 |         .x-share-button {
19 |             text-decoration: none;
20 |             color: inherit;
21 |             display: block;
22 |             border: 1px solid #ccc;
23 |             border-radius: 8px;
24 |             padding: 10px 15px;
25 |             transition: background-color 0.3s ease;
26 |         }
27 |         .x-share-button:hover {
28 |             background-color: #f5f5f5;
29 |         }
30 |         .x-card-content {
31 |             display: flex;
32 |             align-items: center;
33 |             gap: 10px;
34 |         }
35 |         .x-card-content svg {
36 |             flex-shrink: 0;
37 |         }
38 |     </style>
39 | </div>
40 | 


--------------------------------------------------------------------------------
/shortcodes/map_service/kakao_map.html:
--------------------------------------------------------------------------------
 1 | <div {% if class %}class="{{class}}"{% endif %} id="kakao-map-{{id | default(value='map')}}" style="width:{% if width %}{{width}}{% else %}500{% endif %}px;height:{% if height %}{{height}}{% else %}400{% endif %}px;"></div>
 2 | <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={{api_key}}{% if libraries %}&libraries={{libraries}}{% endif %}"></script>
 3 | <script>
 4 |   document.addEventListener('DOMContentLoaded', function() {
 5 |     var container = document.getElementById('kakao-map-{{id | default(value='map')}}');
 6 |     var options = {
 7 |       center: new kakao.maps.LatLng({{lat | default(value='33.450701')}}, {{lng | default(value='126.570667')}}),
 8 |       level: {{level | default(value='3')}}
 9 |     };
10 | 
11 |     var map = new kakao.maps.Map(container, options);
12 | 
13 |     {% if marker %}
14 |     // Add a marker
15 |     var markerPosition = new kakao.maps.LatLng({{lat | default(value='33.450701')}}, {{lng | default(value='126.570667')}});
16 |     var marker = new kakao.maps.Marker({
17 |       position: markerPosition
18 |     });
19 |     marker.setMap(map);
20 |     {% endif %}
21 | 
22 |     {% if draggable %}
23 |     map.setDraggable(true);
24 |     {% endif %}
25 | 
26 |     {% if zoomable %}
27 |     map.setZoomable(true);
28 |     {% endif %}
29 | 
30 |     {% if controls %}
31 |     // Add map type control
32 |     var mapTypeControl = new kakao.maps.MapTypeControl();
33 |     map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
34 | 
35 |     // Add zoom control
36 |     var zoomControl = new kakao.maps.ZoomControl();
37 |     map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
38 |     {% endif %}
39 |   });
40 | </script>
41 | 


--------------------------------------------------------------------------------
/shortcodes/social_media/facebook_share.html:
--------------------------------------------------------------------------------
 1 | <div class="facebook-card {% if class %}{{class}}{% endif %}">
 2 |     <a href="https://www.facebook.com/sharer/sharer.php?u={{url | urlencode}}{% if quote %}&quote={{quote | urlencode}}{% endif %}"
 3 |        target="_blank"
 4 |        rel="noopener noreferrer"
 5 |        class="facebook-share-button">
 6 |         <div class="facebook-card-content">
 7 |             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#1877F2">
 8 |                 <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
 9 |             </svg>
10 |             <span>Share on Facebook</span>
11 |         </div>
12 |     </a>
13 |     <style>
14 |         .facebook-card {
15 |             display: inline-block;
16 |             margin: 10px 0;
17 |         }
18 |         .facebook-share-button {
19 |             text-decoration: none;
20 |             color: inherit;
21 |             display: block;
22 |             border: 1px solid #ccc;
23 |             border-radius: 8px;
24 |             padding: 10px 15px;
25 |             transition: background-color 0.3s ease;
26 |         }
27 |         .facebook-share-button:hover {
28 |             background-color: #f5f5f5;
29 |         }
30 |         .facebook-card-content {
31 |             display: flex;
32 |             align-items: center;
33 |             gap: 10px;
34 |         }
35 |         .facebook-card-content svg {
36 |             flex-shrink: 0;
37 |         }
38 |     </style>
39 | </div>
40 | 


--------------------------------------------------------------------------------
/shortcodes/map_service/naver_map.html:
--------------------------------------------------------------------------------
 1 | <div {% if class %}class="{{class}}"{% endif %} id="naver-map-{{id | default(value='map')}}" style="width:{% if width %}{{width}}{% else %}100%{% endif %};height:{% if height %}{{height}}{% else %}400{% endif %}px;"></div>
 2 | <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId={{client_id}}{% if submodules %}&submodules={{submodules}}{% endif %}"></script>
 3 | <script>
 4 |   document.addEventListener('DOMContentLoaded', function() {
 5 |     var mapOptions = {
 6 |       center: new naver.maps.LatLng({{lat | default(value='37.3595704')}}, {{lng | default(value='127.105399')}}),
 7 |       zoom: {{zoom | default(value='10')}}
 8 |       {% if mapType %},
 9 |       mapTypeId: naver.maps.MapTypeId.{{mapType | upper}}
10 |       {% endif %}
11 |       {% if minZoom %},
12 |       minZoom: {{minZoom}}
13 |       {% endif %}
14 |       {% if maxZoom %},
15 |       maxZoom: {{maxZoom}}
16 |       {% endif %}
17 |     };
18 | 
19 |     var map = new naver.maps.Map('naver-map-{{id | default(value='map')}}', mapOptions);
20 | 
21 |     {% if marker %}
22 |     // Add a marker
23 |     var marker = new naver.maps.Marker({
24 |       position: new naver.maps.LatLng({{marker_lat | default(lat) | default(value='37.3595704')}}, {{marker_lng | default(lng) | default(value='127.105399')}}),
25 |       map: map
26 |     });
27 | 
28 |     {% if info_window %}
29 |     // Add info window
30 |     var infoWindow = new naver.maps.InfoWindow({
31 |       content: '{{info_window | safe}}'
32 |     });
33 | 
34 |     naver.maps.Event.addListener(marker, "click", function(e) {
35 |       if (infoWindow.getMap()) {
36 |         infoWindow.close();
37 |       } else {
38 |         infoWindow.open(map, marker);
39 |       }
40 |     });
41 |     {% endif %}
42 |     {% endif %}
43 | 
44 |     {% if controls == "true" %}
45 |     // Add zoom control
46 |     map.setOptions({
47 |       zoomControl: true,
48 |       zoomControlOptions: {
49 |         style: naver.maps.ZoomControlStyle.SMALL,
50 |         position: naver.maps.Position.TOP_RIGHT
51 |       }
52 |     });
53 | 
54 |     // Add map type control
55 |     map.setOptions({
56 |       mapTypeControl: true
57 |     });
58 |     {% endif %}
59 |   });
60 | </script>
61 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <h1>AWESOME ZOLA</h1>
 3 |   <p>A collection of awesome Zola resources</p>
 4 | </div>
 5 | 
 6 | <p align="center">
 7 | <a href="https://github.com/owasp-noir/noir/blob/main/CONTRIBUTING.md">
 8 | <img src="https://img.shields.io/badge/CONTRIBUTIONS-WELCOME-000000?style=for-the-badge&labelColor=black"></a>
 9 | <a href="https://www.getzola.org/">
10 | <img src="https://img.shields.io/badge/Zola%20Documents-000000?style=for-the-badge&logo=&logoColor=white"></a>
11 | <a href="https://github.com/getzola/zola">
12 | <img src="https://img.shields.io/badge/Github-000000?style=for-the-badge&logo=github&logoColor=white"></a>
13 | <a href="https://zola.discourse.group/">
14 | <img src="https://img.shields.io/badge/Forum-000000?style=for-the-badge&logo=discourse&logoColor=white"></a>
15 | </p>
16 | 
17 | The official Zola documentation is excellent, and most questions can be resolved by reading it carefully. However, this collection was created for my own reference to remember various pieces of information not found in the official guides.
18 | 
19 | ## Zola
20 | 
21 | Zola is a fast and flexible static site generator written in Rust. It comes as a single executable with no dependencies, making it incredibly easy to install and use. It includes many built-in features out-of-the-box, such as Sass/SCSS compilation, syntax highlighting, table of contents generation, and multilingual support, which simplifies the development setup.
22 | 
23 | Content is written in Markdown, and the Tera template engine is used to freely customize the structure and design of the website. It is well-suited for quickly building and deploying various types of websites, including blogs, portfolios, and documentation sites.
24 | 
25 | ## Themes
26 | 
27 | Zola offers a wide range of themes for different kinds of websites. You can explore more themes on the official themes page.
28 | 
29 | * Official Themes List: https://www.getzola.org/themes/
30 | 
31 | ## Shortcodes
32 | 
33 | [Shortcodes](https://www.getzola.org/documentation/content/shortcodes/) are a feature used within Markdown content to insert complex HTML or handle repetitive tasks easily. You can define custom shortcodes by creating template files in the `./templates/shortcodes/` directory.
34 | 
35 | ### Video Service
36 | 
37 | * [youtube](./shortcodes/video_service/youtube.html): `{{ youtube(id='dCKeXuV...') }}`
38 | * [vimeo](./shortcodes/video_service/vimeo.html): `{{ vimeo(id='123456789') }}`
39 | * [asciinema](./shortcodes/video_service/asciinema.html): `{{ asciinema(id='123456') }}`
40 | 
41 | ### Code & Diagram
42 | 
43 | * [mermaid](./shortcodes/code_diagram/mermaid.html): `{{ mermaid() }}`
44 | * [gist](./shortcodes/code_diagram/gist.html): `{{ gist(username='username', id='gistid') }}`
45 | 
46 | ### Map Service
47 | 
48 | * [google_map](./shortcodes/map_service/google_map.html): `{{ google_map(api_key='YOUR_API_KEY', query='Tokyo Tower') }}`
49 | * [kakao_map](./shortcodes/map_service/kakao_map.html): `{{ kakao_map(api_key='YOUR_KAKAO_API_KEY', lat='37.566826', lng='126.978656') }}`
50 | * [naver_map](./shortcodes/map_service/naver_map.html): `{{ naver_map(client_id='YOUR_CLIENT_ID', lat='37.3595704', lng='127.105399') }}`
51 | 
52 | ### Social Media
53 | 
54 | * [x_share](./shortcodes/social_media/x_share.html): `{{ x_card(url='https://example.com', text='Check out this awesome post!') }}`
55 | * [facebook_share](./shortcodes/social_media/facebook_share.html): `{{ facebook_card(url='https://example.com', quote='Check out this awesome post!') }}`
56 | 
57 | ## Sub Commands
58 | 
59 | This is a list of unofficial subcommands.
60 | 
61 | * `zola new`: https://gitlab.com/bemyak/zola-new
62 | 
63 | ## Tools
64 | 
65 | * [obsidian-zola](https://github.com/ppeetteerrs/obsidian-zola): A no-brainer solution to turning your Obsidian PKM into a Zola site.
66 | 


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