# 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](https://github.com/pardnio/demo-web/tree/main/target/20230710) | ## Live Preview [Open the example in a new tab](/target/20230710/) ## 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>. ```bash 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) ## Related - [Project Structure](/project-structure) - [Styling Workflow](/styling-workflow) - [Frameworks](/frameworks)