app.pug

doctype html

html#hELLO(
  x-data='app'
  lang='ko'
  class='scroll-smooth')
  head
    meta(charset='utf-8')
    meta(name='viewport' content='width=device-width')

    title [##_page_title_##] — [##_title_##]

    link(rel='alternate' type='application/rss+xml' title='[##_title_##]' href='[##_rss_url_##]')

    link(rel='preconnect' href='//fonts.googleapis.com')
    link(rel='preconnect' href='//fonts.gstatic.com' crossorigin)

    link(rel='stylesheet' :href='"//cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css"')
    link(rel='stylesheet' :href='"//fonts.googleapis.com/css2?family=Source+Code+Pro:ital@0;1&display=swap"')
    link(rel='stylesheet' :href='"//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"')
    link(rel='stylesheet' :href='`//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/${dark ? skinOptions.hljsDark : skinOptions.hljs}.min.css`')

    script(src='./images/bootstrap.js')

    style(fixed).
      :root {
        --h-idx: 1100px; /* index */
        --h-pem: [##_var_width_##]px; /* permalink */
        --h-s: 256px; /* sidebar */
        --h-c: calc(100% - var(--h-s)); /* content */
        --h-h: 256px; /* header */
      }

    style
      include:postcss @/css/app.css
      include:postcss @/css/shortcutLayer.css

    script(fixed).
      /**
       * Set skin options
       *
       * @see https://tistory.github.io/document-tistory-skin/common/variable.html
       * @see docs/index.xml
       */
      window.skinOptions = {
        sidebar: '[##_var_sidebar_##]',
        foldableCategory: '[##_var_foldable-category_##]',
        width: '[##_var_width_##]',
        toc: '[##_var_toc_##]',
        scrollspy: '[##_var_scrollspy_##]',
        hljs: '[##_var_hljs_##]',
        hljsDark: '[##_var_hljs-dark_##]',
        headerStyle: '[##_var_header-style_##]'
      }

  body(
    id='[##_body_id_##]'
    class='overflow-x-hidden bg-h-100 dark:bg-h-800')
    block TIDORY

    script.
      document.addEventListener('alpine:init', () => Alpine.data('app', () => ({
        /**
         * @type {boolean}
         */
        dark: darkMode.on,

        /**
         * @type {boolean}
         */
        loading: true,

        /**
         * Init
         */
        init () {
          this.loaded()
        },

        /**
         * Loaded
         */
        loaded () {
          setTimeout(() => this.loading = false, 100)
        }
      })))

    script.
      window.addEventListener('DOMContentLoaded', () => Alpine.start())