Hamlet

https://github.com/zkreations/hamlet
Admin
Hamlet is a development environment for creating Blogger templates with Handlebars, offering an...
Tokens:3,647
Snippets:13
Trust Score:7.4
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Run Development Build with Watch

Source: https://context7.com/zkreations/hamlet/llms.txt

Starts the development server with hot reloading. It monitors source files in the `src/` directory and rebuilds the template automatically upon detecting changes. This mode includes source maps and unminified output for easier debugging.

```bash
npm run dev
```

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

### Hamlet Project Dependencies and Build Setup (package.json)

Source: https://context7.com/zkreations/hamlet/llms.txt

This JSON object defines the project's name, version, description, and scripts for development and building. It lists core dependencies like `@zkreations/typography`, `blogger-admin-wp`, and `hamlet-builder`, as well as development dependencies such as ESLint. The `theme` and `browserslist` sections provide theme metadata and browser compatibility targets, respectively.

```json
{
  "name": "hamlet",
  "version": "1.0.0",
  "description": "A simple and lightweight starter theme for Blogger.",
  "type": "module",
  "scripts": {
    "dev": "hamlet --mode development --watch",
    "start": "hamlet --mode production --watch",
    "build": "hamlet --mode production"
  },
  "dependencies": {
    "@zkreations/typography": "^1.0.1",
    "blogger-admin-wp": "^1.0.1",
    "hamlet-builder": "^1.0.44"
  },
  "devDependencies": {
    "eslint": "^8.57.1",
    "eslint-config-standard": "^17.1.0"
  },
  "theme": {
    "name": "Hamlet",
    "version": "1.0.0",
    "license": "MIT"
  },
  "browserslist": [
    ">= 1%",
    "last 2 major versions",
    "not dead",
    "not edge <= 18",
    "not ie <= 11"
  ]
}
```

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

### Run Single Production Build

Source: https://context7.com/zkreations/hamlet/llms.txt

Creates a one-time production build without watch mode. This command compiles all source files into optimized `dist/` output, including minification, tree-shaking, and other production optimizations, intended for final deployment to Blogger.

```bash
npm run build
```

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

### Run Production Build with Watch

Source: https://context7.com/zkreations/hamlet/llms.txt

Executes a production build with watch mode enabled, useful for testing optimized output during development. This command generates minified CSS/JS and optimized template code while maintaining auto-rebuild functionality.

```bash
npm run start
```

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

### Main Template Entry Point (Handlebars)

Source: https://context7.com/zkreations/hamlet/llms.txt

The root Handlebars template file defining the HTML structure and including various partials and conditional logic for Blogger. It handles layout, head elements, and body content, including specific logic for skin loading and responsive image styles.

```handlebars
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:js='true'>
<b:include name='m:root'/>
<head>
  <title>
    <data:view.title.escaped/>
  </title>
  <b:include name='m:head'/>
  {{!-- Conditional skin loading based on layout mode --}}
  <b:if cond="!data:view.isLayoutMode">
    {{> skin}}
  <b:else/>
    {{> template-skin}}
  </b:if>
  {{> defaultmarkups}}
  <b:if cond='not data:view.isPreview'>
    <b:include data='{
      selector: ".header",
      image: data:skin.vars.body_background.image
    }' name='responsiveImageStyle'/>
  </b:if>
</head>

<body>
  <b:include name='@kind'/>
  {{> partial-offcanvas}}
  <header class='header'>
    {{> partial-header}}
  </header>
  <div class='template'>
    <div class='container'>
      <main class='main'>
        {{> partial-main}}
      </main>
      <footer class='footer'>
        {{> partial-footer}}
      </footer>
    </div>
  </div>
</body>
</html>
```

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

### Post Card Component: Render Post Previews

Source: https://context7.com/zkreations/hamlet/llms.txt

A reusable Handlebars component for rendering post previews in a card format. It supports featured images with automatic YouTube detection, lazy loading for images, responsive sizing, and inline ad insertion. It iterates through posts, displaying title and snippet for each.

```handlebars
<b:includable id='post:card'>
  <b:loop index='i' values='data:items ?: data:posts' var='post'>
    <article class='card'>
      <a class='card-content' expr:href='data:post.url.canonical'>
        <b:if cond='data:post.featuredImage'>
          <b:with value='data:post.featuredImage.isYoutube' var='isYoutube'>
            <b:class name='has-image'/>
            <b:include name='@image' data='{
                class: "card-image",
                src: data:post.featuredImage,
                resize: (data:isYoutube ? 600 : 420),
                ratio: (data:isYoutube ? "16:9" : "4:3"),
                params: data:skin.vars.c_imageParams,
                loading: (data:i gt 2 ? "lazy" : "")
              }'/>
          </b:with>
        </b:if>
        <div class="card-meta">
          <h2 class='card-title'>
            <b:eval expr='data:post.title.escaped != "" ? data:post.title.escaped : data:messages.noTitle'/>
          </h2>
          <b:include name='@snippet' data='{
              class: "card-snippet",
              string: data:post.snippets.long
            }'/>
        </div>
      </a>
    </article>
    <b:include name='post:inlineAd'/>
  </b:loop>
</b:includable>
```

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

### DefaultMarkups System Registration (Handlebars)

Source: https://context7.com/zkreations/hamlet/llms.txt

Establishes a central registry for widget templates and shared components using Blogger's defaultmarkups system. It ensures all component and widget templates are loaded and defines a universal structure for widgets.

```handlebars
<b:defaultmarkups>
  {{!-- Clean all default inclusions --}}
  {{> super.defaultmarkups}}

  <b:defaultmarkup type='Common'>
    {{!-- Hamlet helper functions --}}
    {{> super.functions}}
    {{!-- Load components and widgets --}}
    {{> folder.components}}
    {{> folder.widgets}}
  </b:defaultmarkup>

  {{!-- Universal widget structure --}}
  <b:defaultmarkup type='All'>
    <b:includable id='main' var='this'>
      <b:include name='widget-title'/>
      <b:include name='content'/>
    </b:includable>
    <b:includable id='content'>
      <div class='widget-content'>
        <b:include expr:name='"widget:" + data:widget.type'/>
      </div>
    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>
```

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

### SCSS Architecture with ITCSS

Source: https://context7.com/zkreations/hamlet/llms.txt

Organizes SCSS files using the ITCSS methodology, promoting modularity and maintainability. It defines specific sections for settings, generic styles, elements, objects, components, and utilities, ensuring a clear structure for stylesheet management.

```scss
// 1. Settings: Global variables and configurations
@use 'settings/root';

// 2. Generic: Resets and base styles
@use 'generic/reset';
@use 'generic/overrides';

// 3. Elements: Styles for native HTML elements
@use 'elements/base';

// 4. Objects: Layout patterns and structure
@use 'objects/container';
@use 'objects/template';

// 5. Components: UI components
@use 'components/buttons';
@use 'components/cards';
@use 'components/comments';
@use 'components/footer';
@use 'components/form';
@use 'components/header';
@use 'components/icons';
@use 'components/message';
@use 'components/pagination';
@use 'components/posts';
@use 'components/searchbox';
@use 'components/sidebar';
@use 'components/switch';
@use 'components/widgets';

// 6. Utilities: Utility classes and helpers
@use 'utilities/text';
```

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

### Skin Variables and CSS Custom Properties (Handlebars)

Source: https://context7.com/zkreations/hamlet/llms.txt

Bridges Blogger's skin variables with CSS custom properties for dynamic theming. This template allows for runtime customization of the Blogger theme by mapping Blogger variables to CSS variables within the `:root` scope.

```handlebars
<b:skin version='{{version}}'><![CDATA[
  /*!
    * Name      : {{name}}
    * Version   : {{version}}
    * License   : {{license}}
    */

  /* Admin Settings */
  {{> setting-admin}}

  /* General Settings */
  {{> setting-general}}

  /* Translatable strings */
  {{> setting-text}}

  /* Customization Options */
  {{> folder.customization}}

  /* CSS Custom Properties */
  :root {
    /* Backgrounds */
    --body-background: $(body.background);
    --body-background-color: $(body.background.color);
    --bg-body: $(bg.body);
    --bg-post: $(bg.post);
    --bg-sidebar: $(bg.sidebar);

    /* Color Scheme */
    --primary: $(primary);
    --color-title: $(color.title);
    --color-text: $(color.text);
    --color-border: $(color.border);
    --color-header-title: $(color.header.title);
    --color-header-subtitle: $(color.header.subtitle);

    /* Typography */
    --font-title: $(font.title);
    --font-title-family: $(font.title.family);
  }

  /* Compiled Styles */
  {{asset '/dist/css/main.min.css'}}
  {{asset '~/@zkreations/typography/main.min.css'}}

  /* User Custom Styles */
]]></b:skin>
```

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

### Blog Widget Configuration (Handlebars)

Source: https://context7.com/zkreations/hamlet/llms.txt

A Handlebars includable for the main Blog widget in Blogger templates. It manages post display logic, switching between a single post view and a card grid layout for listings. Includes error handling for empty posts or errors.

```handlebars
<b:includable id='widget:Blog'>
  <b:with value='data:widgets.Blog1.allBylineItems' var='show'>
    {{!-- Single post/page view --}}
    <b:if cond='data:view.isSingleItem'>
      <article class="post">
        <b:with value='data:posts.first' var='post'>
          <b:include name='post:view'/>
        </b:with>
      </article>
    {{!-- Homepage/archive view --}}
    <b:else/>
      <b:if cond='data:posts.empty or data:view.isError'>
        <b:include name='noContentPlaceholder'/>
      <b:else/>
        <div class='cards'>
          <b:include name='post:card'/>
        </div>
        <b:include name='post:pagination'/>
      </b:if>
    </b:if>
  </b:with>
</b:includable>
```

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

### Typography Variables in SCSS

Source: https://context7.com/zkreations/hamlet/llms.txt

Defines a flexible font size system using SCSS maps, along with variables for text alignment and transformation. These variables are intended for generating utility classes and ensuring typographic consistency.

```scss
// Font sizes
$font-sizes: (
  1: 2.5rem,
  2: 2rem,
  3: 1.5rem,
  4: 1.25rem,
  5: 1.125rem,
  6: 1rem,
  7: .875rem,
  8: .75rem
) !default;

// Text alignment
$text-align: left right center justify !default;

// Text transformation
$text-transform: capitalize uppercase lowercase !default;
```

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

### Single Post View Component: Display Full Post Content

Source: https://context7.com/zkreations/hamlet/llms.txt

A Handlebars component designed for rendering a complete single post or page view. It includes a header with title and date, a main body section with typography optimization and ad slots, and a footer for the comment system. Supports nested comments with configurable depth.

```handlebars
<b:includable id='post:view'>
  <header class='post-header'>
    <h1 class='post-title'><data:post.title.escaped/></h1>
    <b:if cond='data:view.isPost'>
      <span class='post-date'><data:post.date/></span>
    </b:if>
  </header>
  <section class='post-body typography'>
    <b:include name='post:ads1'/>
    <data:post.body/>
    <b:include name='post:ads2'/>
  </section>
  <footer class='post-comment'>
    <b:include name='comment:main' data='{
        depth: 2,
        texts: {
          delete: data:skin.vars.t_delete,
          reply: data:skin.vars.t_reply
        }
      }'/>
  </footer>
  <b:include name="postMetadataJSON"/>
</b:includable>
```

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

### JavaScript Threaded Reply Functionality

Source: https://context7.com/zkreations/hamlet/llms.txt

This JavaScript module enables threaded comment replies on a blog. It uses Intersection Observer to lazily load the Blogger comment script, dynamically creates iframes with modified sources to link replies to parent comments, and manages the UI state of the comment form using CSS classes. It also includes functionality to restore the main comment form.

```javascript
const COMMENT_FORM = document.getElementById('comment-form')
const FORM_SCRIPT = document.getElementById('form-script')
const FORM_RESTORE = document.getElementById('form-restore')
const REPLY_BUTTONS = document.querySelectorAll('[data-parent-id]')

const ACTIVE_CLASS = 'is-active'
const REPLYING_CLASS = 'is-replying'
const HAS_REPLY_FORM_CLASS = 'has-reply-form'

// Lazy load Blogger comment script on scroll
function isObserver (element, fn, options) {
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        fn()
        observer.unobserve(entry.target)
      }
    })
  }, { ...options })
  observer.observe(element)
}

// Load Blogger relay script dynamically
const loadScript = (src) => new Promise((resolve, reject) => {
  const script = document.createElement('script')
  script.src = src
  script.onload = resolve
  script.onerror = reject
  document.head.appendChild(script)
})

// Extract and load relay script from textarea
function loadRelayScript (textarea) {
  if (!textarea) return
  const src = (textarea.value).replace(/<script.*?src='(.*?)'.*?><\/script>/, '$1')
  textarea.remove()
  loadScript(src)
    .then(() => BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html'))
    .catch((err) => console.error(err))
}

// Create iframe with modified parent ID for replies
function createIframe (template, newSrc) {
  if (!template) return
  const regex = /<iframe[^>]*\s+src="([^"]*)"/i
  const match = template.match(regex)
  const originalSrc = match[1]
  const form = newSrc ? template.replace(originalSrc, newSrc) : template
  return { originalSrc, form }
}

// Initialize reply system
const replyComments = (buttons) => {
  isObserver(FORM_SCRIPT, () => {
    loadRelayScript(FORM_SCRIPT)
  }, { rootMargin: '200px' })

  if (!buttons) return

  const template = COMMENT_FORM.innerHTML
  const { originalSrc, form: originalForm } = createIframe(template)
  const replyContainer = document.createElement('div')
  replyContainer.id = 'reply-form'
  let currentActiveButton

  buttons.forEach(button => {
    button.onclick = () => {
      const parent = button.dataset.parentId
      const container = document.querySelector(`#c${parent} .comments-replies`)
      const currentReply = document.getElementById('reply-form')

      if (currentActiveButton === button) return

      if (currentReply) {
        currentReply.parentElement.classList.remove(HAS_REPLY_FORM_CLASS)
        currentReply.remove()
      } else {
        COMMENT_FORM.innerHTML = ''
        FORM_RESTORE.classList.add(REPLYING_CLASS)
      }

      if (currentActiveButton) {
        currentActiveButton.classList.remove(ACTIVE_CLASS)
      }

      const newSrc = `${originalSrc}&parentID=${parent}`
      const { form: newForm } = createIframe(template, newSrc)

      button.classList.add(ACTIVE_CLASS)
      currentActiveButton = button

      replyContainer.innerHTML = newForm
      container.classList.add(HAS_REPLY_FORM_CLASS)
      container.insertAdjacentElement('afterbegin', replyContainer)
    }
  })

  // Restore main comment form
  if (FORM_RESTORE) {
    FORM_RESTORE.onclick = () => {
      if (currentActiveButton) {
        const currentReply = document.getElementById('reply-form')
        FORM_RESTORE.classList.remove(REPLYING_CLASS)
        COMMENT_FORM.innerHTML = originalForm
        currentActiveButton.classList.remove(ACTIVE_CLASS)
        currentActiveButton = null
        currentReply.parentElement.classList.remove(HAS_REPLY_FORM_CLASS)
        currentReply.remove()
      }
    }
  }
}

replyComments(REPLY_BUTTONS)
```
Tokens:
Raw