Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(blog): Set up the basic blog post space
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <script lang="ts"> | ||
| export let visibleElements$: any; | ||
| export let elements$: any; | ||
| function getElementProperties(visibleElements$: any, element: HTMLElement, isVisible: boolean) { | ||
| const header = element.querySelector('h1,h2,h3') as HTMLElement; | ||
| if (header) { | ||
| const classnames = [`toc-link d-inline-block toc-${header.tagName.toLowerCase()}`]; | ||
| const firstSubSection = element.querySelector('section'); | ||
| if ((firstSubSection && visibleElements$().has(firstSubSection)) || (!firstSubSection && isVisible)) { | ||
| classnames.push('active'); | ||
| } | ||
| return { | ||
| label: header.innerText, | ||
| href: header.querySelector('a')?.getAttribute('href') ?? '', | ||
| classname: classnames.join(' '), | ||
| }; | ||
| } else { | ||
| return { | ||
| label: '', | ||
| href: '', | ||
| classname: '', | ||
| }; | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <div class="demo-toc col-auto d-none d-lg-flex"> | ||
| {#if $elements$.length} | ||
| <div class="toc-content ms-2 border-start-1"> | ||
| <div class="toc-title fw-bold pb-2 mb-1">On this page</div> | ||
| <ul class="list-unstyled mb-0 pb-0 pb-md-2 pe-lg-2 main-nav-list small"> | ||
| {#each $elements$ as element} | ||
| {@const isVisible = $visibleElements$.has(element)} | ||
| {@const {label, classname, href} = getElementProperties(visibleElements$, element, isVisible)} | ||
| <li> | ||
| <a class={classname} aria-current={isVisible ? 'page' : undefined} {href}> | ||
| {label} | ||
| </a> | ||
| </li> | ||
| {/each} | ||
| </ul> | ||
| </div> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <style lang="scss"> | ||
| @import '../../../../common/variables'; | ||
| .main-nav-list { | ||
| @include media-breakpoint-down(md) { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-evenly; | ||
| } | ||
| } | ||
| @include media-breakpoint-up(md) { | ||
| .demo-toc { | ||
| position: sticky; | ||
| top: 0; | ||
| display: block !important; | ||
| height: calc(100vh - 6rem); | ||
| overflow-y: auto; | ||
| } | ||
| } | ||
| .toc { | ||
| &-link:hover, | ||
| &-link:focus { | ||
| color: var(--bs-emphasis-color); | ||
| background-color: var(--demo-sidebar-link-bg); | ||
| } | ||
| &-link { | ||
| padding: 0.1875rem 0.5rem; | ||
| color: var(--bs-body-color); | ||
| text-decoration: none; | ||
| border-left: 3px solid transparent; | ||
| transition: border-color 0.25s; | ||
| &.active { | ||
| color: var(--bs-emphasis-color); | ||
| border-left-color: var(--bs-primary); | ||
| transition: none; | ||
| } | ||
| } | ||
| &-h2 { | ||
| padding-left: 0.5rem; | ||
| } | ||
| &-h3 { | ||
| padding-left: 1rem; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <script lang="ts"> | ||
| import BlogPreview from './blog-preview.svelte'; | ||
| import type {BlogPost} from './blog.model'; | ||
| import Latest from './latest.svelte'; | ||
| let blogs: BlogPost[] = [ | ||
| { | ||
| header: 'Blog post header 1', | ||
| shortDescription: 'Short blog post description with catchy phrases 1', | ||
| author: 'Author', | ||
| publishDate: '09-11-2023', | ||
| href: '/blog/blog-pages/yyyy-mm-dd-template', | ||
| }, | ||
| ]; | ||
| </script> | ||
|
|
||
| <Latest blogPost={blogs[blogs.length - 1]} /> | ||
| <h1 class="mb-3">Recent articles</h1> | ||
| <div class="row"> | ||
| {#each blogs as blog} | ||
| <div class="col-4 mb-5"> | ||
| <BlogPreview blogPost={blog} /> | ||
| </div> | ||
| {/each} | ||
| </div> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <script lang="ts"> | ||
| import Code from '$lib/layout/Code.svelte'; | ||
| import Section from '$lib/layout/Section.svelte'; | ||
| import TableOfContents from '$lib/layout/TableOfContents.svelte'; | ||
| import {intersectionApi} from '$lib/stores'; | ||
| import {onMount} from 'svelte'; | ||
| let code = `import { Component } from '@angular/core'; | ||
| import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'; | ||
| @Component({ | ||
| selector: 'df-demo-accordion-basic', | ||
| templateUrl: './accordion-basic.html', | ||
| standalone: true, | ||
| imports: [NgbAccordionModule] | ||
| }) | ||
| export class NgbdAccordionBasic {}`; | ||
| const {elements$, visibleElements$} = intersectionApi; | ||
| let container: HTMLElement; | ||
| // needed to update the table of contents with scrollspy behavior | ||
| onMount(() => { | ||
| intersectionApi.patch({ | ||
| elements: [...container.querySelectorAll('section')] as HTMLElement[], | ||
| }); | ||
| }); | ||
| </script> | ||
|
|
||
| <svelte:head> | ||
| <title>Blog post example</title> | ||
| <meta name="description" content="Blog post example" /> | ||
| </svelte:head> | ||
|
|
||
| <div class="d-flex demo-layout flex-row mt-3 align-items-baseline" bind:this={container}> | ||
| <div class="col-10 mx-auto"> | ||
| <Section label="Loram Ipsum" id="lorem-ipsum" level={2}> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis dolor quis dui condimentum, ut pharetra velit lobortis. Mauris a | ||
| elementum metus. Sed lacinia nisi eu diam venenatis porttitor. Morbi arcu nunc, efficitur vitae sem sed, commodo pulvinar tellus. Donec eu ipsum | ||
| consequat, mollis nibh at, pharetra tortor. Fusce sit amet lacus ac mi bibendum molestie a sed ante. In quis justo lorem. Phasellus placerat, | ||
| dolor at eleifend iaculis, lorem augue vestibulum risus, a fermentum libero augue vitae sem. Quisque porta turpis nec fermentum consequat. | ||
| Suspendisse vel molestie est. Aliquam mollis, nibh a iaculis sollicitudin, massa eros pulvinar massa, in rhoncus lectus nisl at nisi. | ||
| Suspendisse euismod vulputate turpis vitae tristique. Aenean tincidunt enim quis ante pellentesque imperdiet. | ||
|
|
||
| <Code {code} className="py-3 px-2 px-sm-4 code-sample" /> | ||
| </Section> | ||
|
|
||
| <Section label="Nullam Enim" id="nullam-enim" level={2}> | ||
| Quisque molestie lacinia justo eget pharetra. Phasellus et metus mattis libero consequat vestibulum. Nam vitae dignissim sem, eu egestas libero. | ||
| Quisque fringilla quis ex vitae auctor. Nullam enim mi, posuere nec tempus a, tristique vel nisi. Nulla volutpat turpis eget turpis tempor | ||
| scelerisque. Nunc nec vehicula elit, at molestie nisi. | ||
| </Section> | ||
|
|
||
| <Section label="Vehicula Felis" id="vehicula-felis" level={2}> | ||
| In a ante vehicula felis ullamcorper sagittis. Sed dignissim mi sit amet magna vulputate rutrum. Donec pretium rhoncus posuere. Sed sit amet | ||
| erat quam. Mauris eu nulla pharetra, malesuada quam non, vestibulum erat. Sed malesuada elit eu tellus elementum, quis congue dui lacinia. Donec | ||
| facilisis erat purus, nec ornare sapien aliquet eget. Aliquam erat volutpat. Duis a eros magna. Donec varius neque non dignissim feugiat. Nullam | ||
| pellentesque egestas tempor. Maecenas accumsan turpis est, eu efficitur ex tempor posuere. Nam interdum aliquam nibh, eu ultrices velit pharetra | ||
| in. Etiam vitae urna hendrerit nisi ornare imperdiet eget in nisl. | ||
| </Section> | ||
| </div> | ||
|
|
||
| <TableOfContents {visibleElements$} {elements$} /> | ||
| </div> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <script lang="ts"> | ||
| import './blog-styling.scss'; | ||
| import type {BlogPost} from './blog.model'; | ||
| export let blogPost: BlogPost; | ||
| </script> | ||
|
|
||
| <div class="d-flex flex-column"> | ||
| <div> | ||
| <a class="blog-link" href={blogPost.href} aria-label="link to blog post" title="BlogPost"> | ||
| <img class="blog-preview" src="blog_placeholder.png" alt="Blog placeholder" /> | ||
| <div> | ||
| <h1>{blogPost.header}</h1> | ||
| {blogPost.shortDescription} | ||
| </div> | ||
| </a> | ||
| </div> | ||
| <div> | ||
| <h6 class="written-by"><em>Written by {blogPost.author}, {blogPost.publishDate}</em></h6> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| .blog-preview { | ||
| width: 100%; | ||
| object-fit: contain; | ||
| } | ||
|
|
||
| a.blog-link { | ||
| color: inherit !important; | ||
| text-decoration: none !important; | ||
| } | ||
|
|
||
| img { | ||
| border: 1px solid gray; | ||
| } | ||
|
|
||
| .written-by { | ||
| color: gray; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export interface BlogPost { | ||
| header: string; | ||
| shortDescription: string; | ||
| author: string; | ||
| publishDate: string; | ||
| href: string; | ||
| } |
Oops, something went wrong.