refactor nav, blocks, macros, templates. fix image shortcodes

5 files changed, 164 insertions, 480 deletions

diff --git a/templates/macros/head.html b/templates/macros/head.html
deleted file mode 100644
index 3ed3af0..0000000
--- a/templates/macros/head.html
+++ /dev/null
@@ -1,406 +0,0 @@
-{#- Theme Switcher Button to toggle between dark/light #}
-{%- macro theme(config) %}
-  {%- set integrity = config.extra.integrity | default(value=true) -%}
-  {%- if config.extra.offline %}{% set integrity = false %}{% endif %}
-
-  {%- if config.extra.js_switcher | default(value=true) %}
-  {%- set js_theme="js/theme.min.js" %}
-  {%- if config.extra.js_switcher_default %}
-    {%- if config.extra.js_switcher_default == "light" %}{% set js_theme="js/theme_light.min.js" %}{% endif %}
-  {%- endif %}
-  <script src="{{                     get_url(path=js_theme                        , trailing_slash=false) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path=js_theme, sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-{%- endmacro %}
-
-{%- macro stylesheets(config) %}
-  {%- set stylesheets=config.extra.stylesheets | default(value=[ "abridge.css" ]) -%}
-  {%- if stylesheets %}{%- for i in stylesheets %}
-  <link rel="stylesheet" href="{{     get_url(path=i                               , trailing_slash=false, cachebust=true) | safe }}" />
-  {%- endfor %}{%- endif %}
-{%- endmacro %}
-
-
-
-{%- macro stylesheets_preload(config) %}
-  {%- set integrity = config.extra.integrity | default(value=true) -%}
-  {%- if config.extra.offline %}{% set integrity = false %}{% endif %}
-
-{%- if config.extra.fonts %}{%- for i in config.extra.fonts %}
-  {%- if i.url is matching("^http[s]?://") %}
-  <link rel="preload" as="style" class="preStyle" href="{{ i.url | safe }}" crossorigin="anonymous" />
-  {%- else %}
-  <link rel="preload" as="font" href="{{ get_url(path=i.url, trailing_slash=false) | safe }}" type="font/woff2" />
-  {%- endif %}
-{%- endfor %}{%- endif %}
-
-{%- if config.extra.fontawesome %}
-  <link rel="preload" as="style" class="preStyle" href="{{ config.extra.fontawesome | safe }}" crossorigin="anonymous" />
-{%- endif %}
-
-{%- if config.extra.math or page.extra.math %}
-
-  {%- set katex_css=config.extra.katex_css | default(value="katex.min.css") -%}
-  {%- if katex_css %}{%- if katex_css is matching("^http[s]?://") %}
-  <link rel="preload" as="style" class="preStyle" href="{{ katex_css | safe }}"{%- if integrity and config.extra.katex_css_integrity %} integrity="{{ config.extra.katex_css_integrity | safe }}"{%- endif %} crossorigin="anonymous" />
-  {%- else %}
-  <link rel="preload" as="style" class="preStyle" href="{{ get_url(path=katex_css, trailing_slash=false) }}"{%- if integrity %} integrity="sha384-{{ get_hash(path=katex_css, sha_type=384, base64=true) | safe }}"{%- endif %} />
-  {%- endif %}{%- endif %}
-
-{%- endif %}
-
-{%- endmacro %}
-
-
-
-{%- macro feed(config) %}
-  {%- if config.generate_feed %}
-  <link rel="alternate" type="{% if config.feed_filename is containing('atom') %}application/atom+xml{% else %}application/rss+xml{% endif %}" title="{{ config.title }} Atom/RSS Feed" href="{{ get_url(path=config.feed_filename, trailing_slash=false, lang=lang) | safe }}" />
-  {%- endif %}
-{%- endmacro %}
-
-
-
-{%- macro js(config) %}
-  {%- set integrity = config.extra.integrity | default(value=true) -%}
-  {%- if config.extra.offline %}{% set integrity = false %}{% endif %}
-  {%- set search_library=config.extra.search_library | default(value="elasticlunr") -%}
-
-  {%- set preStyle = false %}
-
-  {%- if config.extra.fonts %}{%- for i in config.extra.fonts %}
-    {%- if i.url is matching("^http[s]?://") %}
-      {%- set preStyle = true %}
-    {%- endif %}
-  {%- endfor %}{%- endif %}
-
-  {%- if config.extra.fontawesome %}
-    {%- set preStyle = true %}
-  {%- endif %}
-
-  {%- if config.extra.math or page.extra.math %}
-    {%- set katex_css=config.extra.katex_css | default(value="katex.min.css") -%}
-    {%- if katex_css %}
-      {%- set preStyle = true %}
-    {%- endif %}
-  {%- endif %}
-
-
-{%- if config.extra.js_bundle %}
-  {%- if config.build_search_index %}
-  {%- if config.extra.pwa | default(value=false) %}
-  <script defer src="{{               get_url(path='js/abridge.min.js'             , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/abridge.min.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- else %}
-  <script defer src="{{               get_url(path='js/abridge_nopwa.min.js'             , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/abridge_nopwa.min.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-
-  {%- else %}
-  {%- if config.extra.pwa | default(value=false) %}
-  <script defer src="{{               get_url(path='js/abridge_nosearch.min.js'    , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/abridge_nosearch.min.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- else %}
-  <script defer src="{{               get_url(path='js/abridge_nosearch_nopwa.min.js'    , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/abridge_nosearch_nopwa.min.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-  {%- endif %}
-
-  {%- if config.build_search_index %}
-  {%- if search_library == "elasticlunr" %}
-  {%- if lang != "en" %}
-  <script defer src="{{               get_url(path='js/lunr.stemmer.support.min.js', trailing_slash=false) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/lunr.stemmer.support.min.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  <script defer src="{{               get_url(path='js/lunr.' ~ lang ~ '.min.js'   , trailing_slash=false) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/lunr.' ~ lang ~ '.min.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-  {%- endif %}
-  {%- endif %}
-
-{%- else %}{#- Not js_bundle #}
-
-  {%- if preStyle == true %}
-  {%- if config.extra.js_prestyle | default(value=true) %}
-  <script defer src="{{               get_url(path='js/prestyle.js'                , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/prestyle.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-  {%- endif %}
-
-  {%- if config.extra.js_switcher | default(value=true) %}
-  <script defer src="{{               get_url(path='js/theme_button.js'            , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/theme_button.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-
-  {%- if config.extra.js_email_encode | default(value=true) %}
-  <script defer src="{{               get_url(path='js/email.js'                   , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/email.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-
-  {%- if config.extra.js_copycode | default(value=true) %}
-  <script defer src="{{               get_url(path='js/codecopy.js'                , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/codecopy.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-
-  {%- if config.extra.pwa | default(value=false) %}
-  <script defer src="{{               get_url(path='js/sw_load.js'             , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/sw_load.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-
-  {%-   if search_library == "tinysearch" %}
-  <script defer type="module" src="{{ get_url(path='js/tinysearch.js'   , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/tinysearch.js'   , sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- elif search_library == "stork"      %}
-  <script defer type="module" src="{{ get_url(path='js/search_stork.min.js'        , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/search_stork.min.js'        , sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- elif config.build_search_index %}
-
-  {%- set search_index_format="elasticlunr_json" -%}
-  {%- if config.search.index_format %}
-    {%- if config.search.index_format == "elasticlunr_javascript" %}
-      {%- set search_index_format="elasticlunr_javascript" -%}
-    {%- endif %}
-  {%- endif %}
-
-  {%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
-  {%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
-  {%- if search_index_format == "elasticlunr_javascript" %}{#- Javascript index format #}
-  <script defer src="{{               get_url(path='js/elasticlunr.min.js'         , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/elasticlunr.min.js'         , sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  <script defer src="{{               get_url(path='search_index.' ~ lang ~ '.js'  , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='search_index.' ~ lang ~ '.js'  , sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-
-  {%- if uglyurls %}
-  <script defer src="{{               get_url(path='js/searchjavaugly.js'          , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/searchjavaugly.js'          , sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- else %}
-  <script defer src="{{               get_url(path='js/searchjava.js'              , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/searchjava.js'              , sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-
-  {%- else %}
-  <script defer src="{{               get_url(path='js/search_elasticlunr.min.js'  , trailing_slash=false, cachebust=true) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/search_elasticlunr.min.js'  , sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-
-  {%- if lang != "en" %}
-  <script defer src="{{               get_url(path='js/lunr.stemmer.support.min.js', trailing_slash=false) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/lunr.stemmer.support.min.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  <script defer src="{{               get_url(path='js/lunr.' ~ lang ~ '.min.js'   , trailing_slash=false) | safe }}"{%- if integrity %} integrity="sha384-{{ get_hash(path='js/lunr.' ~ lang ~ '.min.js'   , sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-
-  {%- endif %}
-
-{%- endif %}
-
-
-{#- https://katex.org/docs/autorender.html #}
-{#- https://github.com/KaTeX/KaTeX/ #}
-{#- https://github.com/KaTeX/KaTeX/tree/main/contrib/mathtex-script-type/ #}
-{%- if config.extra.math or page.extra.math %}
-
-{%- set katex_bundle=config.extra.katex_bundle | default(value="js/katexbundle.min.js") -%}
-{%- if katex_bundle %}
-  <script defer src="{{               get_url(path=katex_bundle                    , trailing_slash=false, cachebust=true) }}"{%- if integrity %} integrity="sha384-{{ get_hash(path=katex_bundle, sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-{%- else %}
-
-  {%- set katex_js=config.extra.katex_js | default(value="js/katex.min.js") -%}
-  {%- if katex_js %}{%- if katex_js is matching("^http[s]?://") %}
-  <script defer src="{{               katex_js | safe }}"{%- if integrity and config.extra.katex_js_integrity %} integrity="{{ config.extra.katex_js_integrity | safe }}"{%- endif %} crossorigin="anonymous"></script>
-  {%- else %}
-  <script defer src="{{               get_url(path=katex_js                        , trailing_slash=false, cachebust=true) }}"{%- if integrity %} integrity="sha384-{{ get_hash(path=katex_js, sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}{%- endif %}
-
-  {%- set mathtex_js=config.extra.mathtex_js | default(value="js/mathtex-script-type.min.js") -%}
-  {%- if mathtex_js %}{%- if mathtex_js is matching("^http[s]?://") %}
-  <script defer src="{{ mathtex_js | safe }}"{%- if integrity and config.extra.mathtex_js_integrity %} integrity="{{ config.extra.mathtex_js_integrity | safe }}"{%- endif %} crossorigin="anonymous"></script>
-  {%- else %}
-  <script defer src="{{               get_url(path=mathtex_js                      , trailing_slash=false, cachebust=true) }}"{%- if integrity %} integrity="sha384-{{ get_hash(path=mathtex_js, sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}{%- endif %}
-
- {%- if config.extra.math_auto_render or page.extra.math_auto_render %}
-  {%- set katex_autorender_js=config.extra.katex_autorender_js | default(value="js/katex-auto-render.min.js") -%}
-  {%- if katex_autorender_js %}
-  {%- if katex_autorender_js is matching("^http[s]?://") %}
-  <script defer src="{{               katex_autorender_js | safe }}"{%- if integrity and config.extra.katex_autorender_js_integrity %} integrity="{{ config.extra.katex_autorender_js_integrity | safe }}"{%- endif %} crossorigin="anonymous"></script>
-  {%- else %}
-  <script defer src="{{               get_url(path=katex_autorender_js             , trailing_slash=false, cachebust=true) }}"{%- if integrity %} integrity="sha384-{{ get_hash(path=katex_autorender_js, sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
-  {%- endif %}
-  {%- set katex_options=config.extra.katex_options | default(value="js/katexoptions.js") -%}
-  {%- if katex_options %}
-  <script defer src="{{               get_url(path=katex_options                   , trailing_slash=false, cachebust=true) }}"{%- if integrity %} integrity="sha384-{{ get_hash(path=katex_options, sha_type=384, base64=true) | safe }}"{%- endif %}></script>
-  {%- endif %}
- {%- endif %}
-{%- endif %}
-
-{%- endif %}
-
-{%- endmacro %}
-
-
-
-{%- macro favicons(config) %}
-  {%- if config.extra.favicon_theme_color %}
-  <meta name="theme-color" content="{{ config.extra.favicon_theme_color }}" />
-  {%- endif %}
-
-  {%- if config.extra.favicon_ms_color %}
-  <meta name="msapplication-TileColor" content="{{ config.extra.favicon_ms_color }}" />
-  {%- endif %}
-
-  {%- if config.extra.webmanifest %}
-  <link rel="manifest" href="{{ get_url(path=config.extra.webmanifest, trailing_slash=false) | safe }}" />
-  {%- endif %}
-
-  {%- if config.extra.favicon_mask and config.extra.favicon_mask_color %}
-  <link rel="mask-icon" href="{{ get_url(path=config.extra.favicon_mask, trailing_slash=false) | safe }}" color="{{ config.extra.favicon_mask_color }}" />
-  {%- endif %}
-
-  {%- if config.extra.favicon_svg %}
-  <link rel="icon" type="image/svg+xml" href="{{ get_url(path=config.extra.favicon_svg, trailing_slash=false) | safe }}" />
-  {%- endif %}
-
-  {%- if config.extra.favicon180 %}
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ get_url(path=config.extra.favicon180, trailing_slash=false) | safe }}" />
-  {%- endif %}
-
-  {%- if config.extra.favicon32 %}
-  <link rel="icon" type="image/png" sizes="32x32" href="{{ get_url(path=config.extra.favicon32, trailing_slash=false) | safe }}" />
-  {%- endif %}
-
-  {%- if config.extra.favicon16 %}
-  <link rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path=config.extra.favicon16, trailing_slash=false) | safe }}" />
-  {%- endif %}
-{%- endmacro %}
-
-
-
-{%- macro security(config) %}
-  {%- if config.extra.security_header_referrer %}
-  <meta name="referrer" content="{{ config.extra.security_header_referrer | safe }}" />
-  {%- endif %}
-  {%- if config.extra.security_header_csp %}
-  <meta http-equiv="Content-Security-Policy" content="{{ config.extra.security_header_csp | safe }}" />
-  {%- endif %}
-{%- endmacro %}
-
-
-
-{#- type:          website or article, generally setting article for blog articles -#}
-{#- page_images:   using for the blog single template page -#}
-{#- page_section:  the blog single template page have to pass the parameter -#}
-{#- is_404:        using for the 404.html template -#}
-{%- macro seo( config, title="", title_addition="", description="", type="website", is_home=false, is_404=false, is_page=false, page_images="", page_section="", created_time="2023-05-15T07:07:00-07:00", updated_time="2023-05-15T07:07:00-07:00" ) %}
-{%- if is_404 -%}
-  <meta name="robots" content="noindex, follow" />
-{%- else -%}
-  <meta name="robots" content="index, follow" />
-  <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
-  <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
-{%- endif -%}
-
-{%- if current_url %}
-  {%- set page_url = current_url %}
-{%- else %}
-  {%- set page_url = get_url(path="404.html", trailing_slash=true) %}
-{%- endif %}
-  <title>{{ title ~ title_addition }}</title>
-
-{%- if config.extra.author %}
-  <meta name="author" content="{{ config.extra.author }}" />
-{%- endif %}
-{%- if config.extra.facebook_publisher %}
-  <meta property="article:publisher" content="https://www.facebook.com/{{ config.extra.facebook_publisher }}" />
-{%- endif %}
-  <meta name="copyright" content="{{ config.title }}" />
-{%- if config.extra.facebook_author %}
-  <meta property="article:author" content="https://www.facebook.com/{{ config.extra.facebook_author }}" />
-{%- endif %}
-{%- if page.description %}
-  <meta name="description" content="{{ page.description }}" />
-{%- else %}
-  <meta name="description" content="{{ config.description }}" />
-{%- endif %}
-  <link rel="canonical" href="{{ page_url | safe }}" />
-{%- if page.extra.keywords and config.extra.keywords %}
-  <meta name="keywords" content="{{ page.extra.keywords }}, {{ config.extra.keywords }}" />
-{%- elif page.extra.keywords %}
-  <meta name="keywords" content="{{ page.extra.keywords }}" />
-{%- elif config.extra.keywords %}
-  <meta name="keywords" content="{{ config.extra.keywords }}" />
-{%- endif %}
-
-{#- Extra SEO START #}
-{%- if config.extra.seo | default(value=true) %}
-{%- if not is_404 %}
-
-{%- if config.extra.google %}
-  <meta name="google-site-verification" content="{{ config.extra.google | safe }}" />
-{%- endif %}
-
-{%- if config.extra.bing %}
-  <meta name="msvalidate.01" content="{{ config.extra.bing | safe}}" />
-{%- endif %}
-  <meta property="og:url" content="{{ page_url | safe }}" />
-  <meta name="twitter:url" content="{{ page_url | safe }}" />
-
-{%- if page.description %}
-  <meta property="og:description" content="{{ page.description }}" />
-  <meta name="twitter:description" content="{{ page.description }}" />
-{%- else %}
-  <meta property="og:description" content="{{ config.description }}" />
-  <meta name="twitter:description" content="{{ config.description}}" />
-{%- endif %}
-
-{%- if page.title %}
-  <meta property="og:title" content="{{ page.title }} | {{ config.title }}" />
-  <meta name="twitter:title" content="{{ page.title }} | {{ config.title }}" />
-{%- else %}
-  <meta property="og:title" content="{{ config.title }}" />
-  <meta name="twitter:title" content="{{ config.title }}" />
-{%- endif %}
-
-
-{#- SEO MEDIA START #}
-{%- if page.extra.thumbnail %}
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:image" content="{{ get_url(path=page.path ~ page.extra.thumbnail, trailing_slash=false) }}" />
-  <meta property="og:image" content="{{ get_url(path=page.path ~ page.extra.thumbnail, trailing_slash=false) }}" />
-
-{%- elif page.extra.static_thumbnail %}
-  <meta name="twitter:card" content="summary_large_image" />
-  {%- if page.extra.static_thumbnail is matching("^http[s]?://") %}
-  <meta name="twitter:image" content="{{ page.extra.static_thumbnail }}" />
-  <meta property="og:image" content="{{ page.extra.static_thumbnail }}" />
-  {%- else %}
-  <meta name="twitter:image" content="{{ get_url(path=page.extra.static_thumbnail, trailing_slash=false) }}" />
-  <meta property="og:image" content="{{ get_url(path=page.extra.static_thumbnail, trailing_slash=false) }}" />
-  {%- endif %}
-
-{%- elif config.extra.banner %}
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:image" content="{{ get_url(path=config.extra.banner, trailing_slash=false) }}" />
-  <meta property="og:image" content="{{ get_url(path=config.extra.banner, trailing_slash=false) }}" />
-
-{%- else %}
-  <meta name="twitter:card" content="summary" />
-
-{%- endif %}
-
-{%- if config.extra.open.audio %}
-  <meta property="og:audio" content="{{ config.extra.open.audio }}" />
-{%- endif %}
-
-{%- if config.extra.open.locale %}
-  <meta property="og:locale" content="{{ config.extra.open.locale }}" />
-{%- endif %}
-
-{%- if config.extra.open.videos %}
-  {%- for video in config.extra.open.videos %}
-  <meta property="og:video" content="{{ get_url(path=video) }}" />
-  {%- endfor %}
-{%- endif %}
-
-{#- SEO MEDIA END #}
-  <meta property="og:site_name" content="{{ config.title }}" />
-  <meta property="og:locale" content="en_US" />
-  <meta property="og:type" content="website" />
-{%- if page.updated %}
-  <meta property="og:updated_time" content="{{ page.updated | date(format='%F') }}" />
-{%- elif page.date %}
-  <meta property="og:updated_time" content="{{ page.date | date(format='%F') }}" />
-{%- else %}
-  <meta property="og:updated_time" content="{{ updated_time }}" />
-{%- endif %}
-
-{%- if config.extra.twitter_meta %}
-  <meta name="twitter:site" content="@{{ config.extra.twitter_meta }}" />
-  <meta name="twitter:creator" content="@{{ config.extra.twitter_meta }}" />
-{%- endif %}
-
-
-
-{%- endif %}
-{%- endif %}
-{#- Extra SEO END #}
-{%- endmacro %}
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index 000130a..66673d1 100644
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@@ -1,9 +1,21 @@
+{%- macro page_listing(page, config) %}
+{%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
+{%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
+        <div class="tpad">
+          <a href="{{ page.permalink | safe}}{%- if uglyurls %}index.html{%- endif %}">{{ page.title }}</a>
+        </div>
+{%- endmacro page_listing %}
+
+
+
 {%- macro title_post(page, config) %}
 {%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
 {%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
       <h1><a href="{{ page.permalink | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ page.title }}</a></h1>
 {%- endmacro title_post %}
 
+
+
 {%- macro meta_post(page, config) %}
 {%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
 {%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
@@ -29,7 +41,7 @@
           {#- divider #}
           {%- if config.extra.meta_post.author %}
           {%- if config.extra.meta_post.readtime or config.extra.meta_post.date or config.extra.meta_post.updated or config.extra.meta_post.categories_tags %}
-          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} &nbsp; {%- endif %}
+          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}
           {%- endif %}
           {%- endif %}
 
@@ -37,7 +49,7 @@
           {%- if config.extra.meta_post.readtime %} {%- if config.extra.icon_read %}<i class="{{ config.extra.icon_read }}"></i> {% endif %} {{ page.reading_time }} {{ config.extra.meta_post.readstring | default(value="min") }}
           {#- divider #}
           {%- if config.extra.meta_post.date or config.extra.meta_post.updated or config.extra.meta_post.categories_tags %}
-          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} &nbsp; {%- endif %}{%- endif %}{%- endif %}
+          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{%- endif %}
 
         {#- Date #}
           {%- if config.extra.meta_post.date %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i> {% endif %}
@@ -51,7 +63,7 @@
           {%- else %} {{ page.date | date(format="%B %d, %Y") }} {%- endif %}
           {#- divider #}
           {%- if config.extra.meta_post.updated or config.extra.meta_post.categories_tags %}
-          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} &nbsp; {%- endif %}{%- endif %}{% endif %}
+          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{% endif %}
 
         {#- Updated #}
           {%- if config.extra.meta_post.updated and page.updated %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i> {% endif -%}
@@ -65,7 +77,7 @@
           {%- else %} {{ page.updated | date(format="%B %d, %Y") }} {%- endif %}
           {#- divider #}
           {%- if config.extra.meta_post.categories_tags %}
-          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} &nbsp; {%- endif %}{%- endif %}{% endif %}
+          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{% endif %}
 
         {#- Categories #}
           {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %}<i class="{{ config.extra.icon_info }}"></i> {% endif %} [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat, lang=lang) | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]{% endif %}
@@ -74,6 +86,8 @@
           {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag, lang=lang) | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}{%- endif %}</span>
 {%- endmacro meta_post %}
 
+
+
 {%- macro title_index(page, config) %}
 {%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
 {%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
@@ -81,6 +95,7 @@
 {%- endmacro title_index %}
 
 
+
 {%- macro meta_index(page, config) %}
 {%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
 {%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
@@ -106,7 +121,7 @@
           {#- divider #}
           {%- if config.extra.meta_index.author %}
           {%- if config.extra.meta_index.readtime or config.extra.meta_index.date or config.extra.meta_index.updated or config.extra.meta_index.categories_tags %}
-          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} &nbsp; {%- endif %}
+          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}
           {%- endif %}
           {%- endif %}
 
@@ -114,7 +129,7 @@
           {%- if config.extra.meta_index.readtime %} {%- if config.extra.icon_read %}<i class="{{ config.extra.icon_read }}"></i> {% endif %} {{ page.reading_time }} {{ config.extra.meta_index.readstring | default(value="min") }}
           {#- divider #}
           {%- if config.extra.meta_index.date or config.extra.meta_index.updated or config.extra.meta_index.categories_tags %}
-          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} &nbsp; {%- endif %}{%- endif %}{%- endif %}
+          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{%- endif %}
 
         {#- Date #}
           {%- if config.extra.meta_index.date %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i> {% endif %}
@@ -128,7 +143,7 @@
           {%- else %} {{ page.date | date(format="%B %d, %Y") }} {%- endif %}
           {#- divider #}
           {%- if config.extra.meta_index.updated or config.extra.meta_index.categories_tags %}
-          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} &nbsp; {%- endif %}{%- endif %}{% endif %}
+          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{% endif %}
 
         {#- Updated #}
           {%- if config.extra.meta_index.updated and page.updated %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i> {% endif -%}
@@ -143,7 +158,7 @@
 
           {#- divider #}
           {%- if config.extra.meta_index.categories_tags %}
-          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} &nbsp; {%- endif %}{%- endif %}{% endif %}
+          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} <span class="rpad"></span> {%- endif %}{%- endif %}{% endif %}
 
         {#- Categories #}
           {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %}<i class="{{ config.extra.icon_info }}"></i> {% endif %} [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat, lang=lang) | safe }}{%- if uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]{% endif %}
@@ -154,7 +169,6 @@
 
 
 
-
 {%- macro footer(page, config) %}
 {%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
 {%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
@@ -178,6 +192,7 @@
 {%- endmacro footer %}
 
 
+
 {%- macro pagination(paginator, config)%}
 {%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
 {%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
diff --git a/templates/macros/page.html b/templates/macros/page.html
deleted file mode 100644
index 23b9e09..0000000
--- a/templates/macros/page.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{%- macro page_listing(page, config) %}
-{%- set uglyurls = config.extra.uglyurls | default(value=false) -%}
-{%- if config.extra.offline %}{% set uglyurls = true %}{% endif %}
-        <div class="toc-item">
-          <a href="{{ page.permalink | safe}}{%- if uglyurls %}index.html{%- endif %}">{{ page.title }}</a>
-        </div>
-{%- endmacro page_listing %}
diff --git a/templates/macros/seo.html b/templates/macros/seo.html
new file mode 100644
index 0000000..8d2ada1
--- /dev/null
+++ b/templates/macros/seo.html
@@ -0,0 +1,140 @@
+{#- type:          website or article, generally setting article for blog articles -#}
+{#- page_images:   using for the blog single template page -#}
+{#- page_section:  the blog single template page have to pass the parameter -#}
+{#- is_404:        using for the 404.html template -#}
+
+{%- macro seo( config, title="", title_addition="", description="", type="website", is_home=false, is_404=false, is_page=false, page_images="", page_section="", created_time="2023-05-15T07:07:00-07:00", updated_time="2023-05-15T07:07:00-07:00" ) %}
+
+{%- if is_404 -%}
+  <meta name="robots" content="noindex, follow" />
+{%- else -%}
+  <meta name="robots" content="index, follow" />
+  <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+  <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+{%- endif -%}
+
+{%- if current_url %}
+  {%- set page_url = current_url %}
+{%- else %}
+  {%- set page_url = get_url(path="404.html", trailing_slash=true) %}
+{%- endif %}
+  <title>{{ title ~ title_addition }}</title>
+
+{%- if config.extra.author %}
+  <meta name="author" content="{{ config.extra.author }}" />
+{%- endif %}
+{%- if config.extra.facebook_publisher %}
+  <meta property="article:publisher" content="https://www.facebook.com/{{ config.extra.facebook_publisher }}" />
+{%- endif %}
+  <meta name="copyright" content="{{ config.title }}" />
+{%- if config.extra.facebook_author %}
+  <meta property="article:author" content="https://www.facebook.com/{{ config.extra.facebook_author }}" />
+{%- endif %}
+{%- if page.description %}
+  <meta name="description" content="{{ page.description }}" />
+{%- else %}
+  <meta name="description" content="{{ config.description }}" />
+{%- endif %}
+  <link rel="canonical" href="{{ page_url | safe }}" />
+{%- if page.extra.keywords and config.extra.keywords %}
+  <meta name="keywords" content="{{ page.extra.keywords }}, {{ config.extra.keywords }}" />
+{%- elif page.extra.keywords %}
+  <meta name="keywords" content="{{ page.extra.keywords }}" />
+{%- elif config.extra.keywords %}
+  <meta name="keywords" content="{{ config.extra.keywords }}" />
+{%- endif %}
+
+{#- Extra SEO START #}
+{%- if config.extra.seo | default(value=true) %}
+{%- if not is_404 %}
+
+{%- if config.extra.google %}
+  <meta name="google-site-verification" content="{{ config.extra.google | safe }}" />
+{%- endif %}
+
+{%- if config.extra.bing %}
+  <meta name="msvalidate.01" content="{{ config.extra.bing | safe}}" />
+{%- endif %}
+  <meta property="og:url" content="{{ page_url | safe }}" />
+  <meta name="twitter:url" content="{{ page_url | safe }}" />
+
+{%- if page.description %}
+  <meta property="og:description" content="{{ page.description }}" />
+  <meta name="twitter:description" content="{{ page.description }}" />
+{%- else %}
+  <meta property="og:description" content="{{ config.description }}" />
+  <meta name="twitter:description" content="{{ config.description}}" />
+{%- endif %}
+
+{%- if page.title %}
+  <meta property="og:title" content="{{ page.title }} | {{ config.title }}" />
+  <meta name="twitter:title" content="{{ page.title }} | {{ config.title }}" />
+{%- else %}
+  <meta property="og:title" content="{{ config.title }}" />
+  <meta name="twitter:title" content="{{ config.title }}" />
+{%- endif %}
+
+
+{#- SEO MEDIA START #}
+{%- if page.extra.thumbnail %}
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content="{{ get_url(path=page.path ~ page.extra.thumbnail, trailing_slash=false) }}" />
+  <meta property="og:image" content="{{ get_url(path=page.path ~ page.extra.thumbnail, trailing_slash=false) }}" />
+
+{%- elif page.extra.static_thumbnail %}
+  <meta name="twitter:card" content="summary_large_image" />
+  {%- if page.extra.static_thumbnail is matching("^http[s]?://") %}
+  <meta name="twitter:image" content="{{ page.extra.static_thumbnail }}" />
+  <meta property="og:image" content="{{ page.extra.static_thumbnail }}" />
+  {%- else %}
+  <meta name="twitter:image" content="{{ get_url(path=page.extra.static_thumbnail, trailing_slash=false) }}" />
+  <meta property="og:image" content="{{ get_url(path=page.extra.static_thumbnail, trailing_slash=false) }}" />
+  {%- endif %}
+
+{%- elif config.extra.banner %}
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content="{{ get_url(path=config.extra.banner, trailing_slash=false) }}" />
+  <meta property="og:image" content="{{ get_url(path=config.extra.banner, trailing_slash=false) }}" />
+
+{%- else %}
+  <meta name="twitter:card" content="summary" />
+
+{%- endif %}
+
+{%- if config.extra.open.audio %}
+  <meta property="og:audio" content="{{ config.extra.open.audio }}" />
+{%- endif %}
+
+{%- if config.extra.open.locale %}
+  <meta property="og:locale" content="{{ config.extra.open.locale }}" />
+{%- endif %}
+
+{%- if config.extra.open.videos %}
+  {%- for video in config.extra.open.videos %}
+  <meta property="og:video" content="{{ get_url(path=video) }}" />
+  {%- endfor %}
+{%- endif %}
+
+{#- SEO MEDIA END #}
+  <meta property="og:site_name" content="{{ config.title }}" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:type" content="website" />
+{%- if page.updated %}
+  <meta property="og:updated_time" content="{{ page.updated | date(format='%F') }}" />
+{%- elif page.date %}
+  <meta property="og:updated_time" content="{{ page.date | date(format='%F') }}" />
+{%- else %}
+  <meta property="og:updated_time" content="{{ updated_time }}" />
+{%- endif %}
+
+{%- if config.extra.twitter_meta %}
+  <meta name="twitter:site" content="@{{ config.extra.twitter_meta }}" />
+  <meta name="twitter:creator" content="@{{ config.extra.twitter_meta }}" />
+{%- endif %}
+
+
+
+{%- endif %}
+{%- endif %}
+{#- Extra SEO END #}
+{%- endmacro %}
diff --git a/templates/macros/social.html b/templates/macros/social.html
deleted file mode 100644
index 8661976..0000000
--- a/templates/macros/social.html
+++ /dev/null
@@ -1,58 +0,0 @@
-{%- macro social_links(config) %}
-      <nav><div>
-          {%- if config.generate_feed and config.extra.feed -%}
-          <a type="{% if config.feed_filename is containing('atom') %}application/atom+xml{% else %}application/rss+xml{% endif %}" href="{{ get_url(path=config.feed_filename, trailing_slash=false, lang=lang) | safe }}" target="_blank" title="{{ config.title }} Atom/RSS Feed"><i type="Button" class="svg rss" title="{{ config.title }} Atom/RSS Feed"></i></a>{% endif -%}
-          {%- if config.extra.mail -%}
-          {%- if config.extra.mail_encode | default(value=true) -%}
-          {%- set base64_email = config.extra.mail -%}
-          <a class="js m-protected" href="#{{ base64_email | base64_encode }}" target="_blank" title="Mail"><i type="Button" class="svg mail" title="Mail"></i></a>
-          {%- else -%}
-          <a href="mailto:{{ config.extra.mail }}" target="_blank" title="Mail"><i type="Button" class="svg mail" title="Mail"></i></a>
-          {%- endif -%}
-          {% endif -%}
-          {%- if config.extra.mastodon -%}
-          <a href="{{ config.extra.mastodon | safe }}" target="_blank" title="Mastodon" rel="me"><i type="Button" class="svg mastodon" title="Mastodon"></i></a>{% endif -%}
-          {%- if config.extra.element -%}
-          <a href="https://{{ config.extra.element }}/" target="_blank" title="Element"><i type="Button" class="svg element" title="Element"></i></a>{% endif -%}
-          {%- if config.extra.matrix -%}
-          <a href="https://{{ config.extra.matrix }}/" target="_blank" title="Matrix"><i type="Button" class="svg matrix" title="Matrix"></i></a>{% endif -%}
-          {%- if config.extra.twitter -%}
-          <a href="https://twitter.com/{{ config.extra.twitter }}/" target="_blank" title="Twitter"><i type="Button" class="svg twitter" title="Twitter"></i></a>{% endif -%}
-          {%- if config.extra.facebook -%}
-          <a href="https://www.facebook.com/{{ config.extra.facebook }}/" target="_blank" title="Facebook"><i type="Button" class="svg facebook" title="Facebook"></i></a>{% endif -%}
-          {%- if config.extra.linkedin -%}
-          <a href="https://www.linkedin.com/in/{{ config.extra.linkedin }}/" target="_blank" title="LinkedIn"><i type="Button" class="svg linkedin" title="LinkedIn"></i></a>{% endif -%}
-          {%- if config.extra.researchgate -%}
-          <a href="https://www.researchgate.net/profile/{{ config.extra.researchgate }}/" target="_blank" title="ResearchGate"><i type="Button" class="svg researchgate" title="ResearchGate"></i></a>{% endif -%}
-          {%- if config.extra.codeberg -%}
-          <a href="https://codeberg.org/{{ config.extra.codeberg }}/" target="_blank" title="Codeberg"><i type="Button" class="svg codeberg" title="Codeberg"></i></a>{% endif -%}
-          {%- if config.extra.gitlab -%}
-          <a href="https://gitlab.com/{{ config.extra.gitlab }}/" target="_blank" title="Gitlab"><i type="Button" class="svg gitlab" title="Gitlab"></i></a>{% endif -%}
-          {%- if config.extra.github -%}
-          <a href="https://github.com/{{ config.extra.github }}/" target="_blank" title="Github"><i type="Button" class="svg github" title="Github"></i></a>{% endif -%}
-          {%- if config.extra.bitbucket -%}
-          <a href="https://bitbucket.org/{{ config.extra.bitbucket }}/" target="_blank" title="Bitbucket"><i type="Button" class="svg bitbucket" title="Bitbucket"></i></a>{% endif -%}
-          {%- if config.extra.python -%}
-          <a href="https://pypi.org/user/{{ config.extra.python }}/" target="_blank" title="Python"><i type="Button" class="svg python" title="Python"></i></a>{% endif -%}
-          {%- if config.extra.docker -%}
-          <a href="https://hub.docker.com/u/{{ config.extra.docker }}/" target="_blank" title="Docker"><i type="Button" class="svg docker" title="Docker"></i></a>{% endif -%}
-          {%- if config.extra.stack -%}
-          <a href="https://stackoverflow.com/users/{{ config.extra.stack }}/" target="_blank" title="Stack"><i type="Button" class="svg stack" title="Stack"></i></a>{% endif -%}
-          {%- if config.extra.instagram -%}
-          <a href="https://www.instagram.com/{{ config.extra.instagram }}/" target="_blank" title="Instagram"><i type="Button" class="svg instagram" title="Instagram"></i></a>{% endif -%}
-          {%- if config.extra.pinterest -%}
-          <a href="https://www.pinterest.com/{{ config.extra.pinterest }}/" target="_blank" title="Pinterest"><i type="Button" class="svg pinterest" title="Pinterest"></i></a>{% endif -%}
-          {%- if config.extra.twitch -%}
-          <a href="https://www.twitch.tv/{{ config.extra.twitch }}/" target="_blank" title="Twitch"><i type="Button" class="svg twitch" title="Twitch"></i></a>{% endif -%}
-          {%- if config.extra.discord -%}
-          <a href="https://discord.com/{{ config.extra.discord }}/" target="_blank" title="Discord"><i type="Button" class="svg discord" title="Discord"></i></a>{% endif -%}
-          {%- if config.extra.youtube -%}
-          <a href="https://www.youtube.com/{{ config.extra.youtube }}" target="_blank" title="YouTube"><i type="Button" class="svg youtube" title="YouTube"></i></a>{% endif -%}
-          {%- if config.extra.kofi -%}
-          <a href="https://www.ko-fi.com/{{ config.extra.kofi }}/" target="_blank" title="Support me on Ko-fi"><i type="Button" class="svg kofi" title="Support me on Ko-fi"></i></a>{% endif -%}
-          {%- if config.extra.buymeacoffee -%}
-          <a href="https://www.buymeacoffee.com/{{ config.extra.buymeacoffee }}/" target="_blank" title="Buy Me A Coffee"><i type="Button" class="svg buymeacoffee" title="Buy Me A Coffee"></i></a>{% endif -%}
-          {%- if config.extra.github_sponsor -%}
-          <a href="https://github.com/sponsors/{{ config.extra.github_sponsor }}/" target="_blank" title="GitHub Sponsor"><i type="Button" class="svg github-sponsor" title="GitHub Sponsor"></i></a>{% endif -%}
-      </div></nav>
-{%- endmacro %}