### 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
<data:view.title.escaped/>
{{!-- Conditional skin loading based on layout mode --}}
{{> skin}}
{{> template-skin}}
{{> defaultmarkups}}
{{> partial-offcanvas}}
```
--------------------------------
### 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
```
--------------------------------
### 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
{{!-- Clean all default inclusions --}}
{{> super.defaultmarkups}}
{{!-- Hamlet helper functions --}}
{{> super.functions}}
{{!-- Load components and widgets --}}
{{> folder.components}}
{{> folder.widgets}}
{{!-- Universal widget structure --}}
```
--------------------------------
### 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
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 */
]]>
```
--------------------------------
### 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
{{!-- Single post/page view --}}
{{!-- Homepage/archive view --}}
```
--------------------------------
### 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
```
--------------------------------
### 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>/, '$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 = /]*\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)
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.