App Introduction (2023-07-10)
Red-accent business template routing 7 pages by ?page= query via PDRenderKit 1.2.0 :if/:path views, incl. blog and Markdown article.
Overview
| Item | Value |
|---|---|
| Created | 2023-07-10 |
| Category | Business Examples |
| HTML files | index.html, views/nav.html, views/header.html, views/section-3.html, views/section-4.html, views/section-5.html, views/section-6.html, views/section-7.html, views/section-8.html, views/section-9.html, views/section-blog.html, views/section-article.html, views/section-contact.html, views/footer.html |
| Source | target/20230710 |
Live Preview
Page Sections
| Section | Description |
|---|---|
| Nav (views/nav.html) | Sticky nav with links ?page=home/feature/service/pricing, a Pages dropdown (Blog, Article) and Contact; active item via :index="nav_index"; @click=tabShow toggles mobile menu. |
| Header (views/header.html) | Eyebrow, headline, paragraph, GitHub / Email buttons (label from attr(txt)) and image/header.png. Home only. |
| Section 3 | image/section-3.png beside 4 icon feature rows from :for over section_3 icon names. |
| Section 4 | 3 service cards with icon and inline SVG decoration (image/svg-1.svg). |
| Section 5 | Text plus 4 app screenshots image/app0..3.png laid out by the [index] attribute (static index=0). |
| Section 6 (pricing) | 3 plan cards (49 / 99 / 149 per year) with feature list and GET STARTED, :bg-image background and svg-2 decoration. |
| Section 7 (carousel) | 6 cards slider with 4 indicator dots; clicking a dot sets [index] to slide via margin-left. |
| Section 8 | CTA text with GitHub / Email buttons, image/section-8.png with a looping section-8 keyframe animation, svg-2 decoration. |
| Section 9 | Final CTA heading with buttons over a placeholder image. |
| Blog (?page=blog) | 5 post cards with date badge, tags and comment count, static pagination; sidebar with search, category, recent posts, tags, newsletter. |
| Article (?page=article) | Cover, title, meta, section.md filled by PDMarkdownKit viewer, like/share bar, prev/next, author box, comments from :for with a nested reply via :if, same sidebar. |
| Contact (?page=contact) | Google Maps iframe, message form (no handler) and address / email / GitHub / LinkedIn cards. |
| Footer (views/footer.html) | Brand blurb, Quick Link and Support lists, newsletter input, copyright and social icons. |
Interactions
- js/index.js (module): reads ?page via location.href.$query("page") (default home), maps it to nav_index, and creates new PD({id: "app"}); index.html uses :if / :else-if="page == ..." blocks to choose which :path views load.
- event.tabShow toggles .show on the previous sibling of the menu button; event.section7Click sets index on the carousel container from the dot's data-index.
- On ?page=article: fetches https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/README.md and after 500ms mounts a PDMarkdownKit viewer into section.md.
Dependencies
| Name | Version | Source |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit | 1.2.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.2.0/dist/PDRenderKit.js |
| PDMarkdownKit (ES module) | 1.6.0 | https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/dist/PDMarkdownKit.module.js |
| Google Maps embed iframe | - | https://www.google.com/maps/embed?pb=... |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/index.js | - | ./js/index.js (type=module) |
Styling
| Item | Value |
|---|---|
| SCSS entry | sass/index.scss |
| Output CSS | css/index.css |
| Partials | _nav.scss, _footer.scss, _header.scss, _section-3.scss, _section-4.scss, _section-5.scss, _section-6.scss, _section-7.scss, _section-8.scss, _section-9.scss, animation/_rotate.scss |
index.scss (873 lines): :root safe-area env() vars, reset, body scroll container, and inline styles for #section-contact and #section-blog (shared by blog and article: cards, .md, .bottom, .page, .about, .comment, sidebar). Partials cover nav (@for [index] highlight, dropdown, mobile .show), header (attr(txt) buttons), sections 3-9 (_section-5 and _section-7 use @for [index] layouts, _section-8 has a section-8 keyframe), footer. animation/_rotate.scss is empty and not imported. Red rgba color vars are in an inline <style>.
cd target/20230710
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- Client-side routing by query string with PD :if / :else-if conditional blocks and :path partial includes; one HTML file serves 7 pages.
- Attribute interpolation in bindings (:class="fa-solid fa-{{ e }}", :src="./image/app{{ e }}.png"), :for with index, :data-index, :bg-image, nested :if.
- Carousel and layout state through [index] attributes with SCSS @for-generated margin-left offsets per breakpoint.
- Inline SVG injection via span.svg[src]; content: attr(txt) button labels; sticky nav; breakpoints 480px, 512px, 640px, 800px, 960px, 1024px, 1120px.
External Assets
- https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/README.md (fetched as article content)
- https://www.google.com/maps/embed?pb=... (contact map iframe)
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images and section-6 :bg-image)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230710.jpg (og/twitter image)
