WIP: improvement(docs): added iframes for the pages #1172 (#1222)

* improvement(docs): added screenshot placeholders #1172
* #1222: Update demo previews

Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: Josef Bredreck <[email protected]>

Author: 3 people

packages/docs/src/_includes/partials/components/demo-list.njk

@@ -7,7 +7,19 @@
         <li class="c-demo-list__item">
 
             <a href="{{ item.data.url }}" target="_blank" class="c-stacked-block">
-              <img src="{{item.data.image}}" alt="{{item.data.title}}" class="c-stacked-block__image">
+              <div class="c-stacked-block__preview-container">
+                <div class="c-stacked-block__bar">
+                  <div class="c-stacked-block__bar-dots"></div>
+                  <div class="c-stacked-block__bar-dots"></div>
+                  <div class="c-stacked-block__bar-uri"></div>
+                  <div class="c-stacked-block__bar-dots"></div>
+                </div>
+                <div class="c-stacked-block__preview-content">
+                  <iframe class="c-stacked-block__frame-item" src="{{item.data.refLink}}" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"></iframe>
+                  <div class="c-stacked-block__frame-overlay"></div>
+                </div>
+              </div>
+              
               <h3 class="c-stacked-block__title">
               {{ item.data.title }} 
               </h3>

packages/docs/src/demos/bolt-design-systems.md

@@ -7,5 +7,5 @@ tags:
   - demo-in-the-wild
   - demo-content
   - code
-image: /images/800x600.png
+refLink: https://boltdesignsystem.com/pattern-lab/?p=pages-d8-homepage
 ---

packages/docs/src/demos/brad-frosts-website-pl.md

@@ -7,5 +7,5 @@ tags:
   - demo-hbs-starter-kits
   - demo-content
   - code
-image: /images/800x600.png
+refLink: https://patternlab-handlebars-preview.netlify.app/?p=all
 ---

packages/docs/src/demos/handlebars-base-starterkit.md

@@ -7,5 +7,5 @@ tags:
   - demo-hbs-starter-kits
   - demo-content
   - code
-image: /images/800x600.png
+refLink: https://patternlab-handlebars-preview.netlify.app/?p=all
 ---

packages/docs/src/demos/handlebars-demo-starterkit.md

@@ -7,5 +7,5 @@ tags:
   - demo-hbs-starter-kits
   - demo-content
   - code
-image: /images/800x600.png
+refLink: https://patternlab-handlebars-preview.netlify.app/?p=all
 ---

packages/docs/src/demos/handlebars-vanilla-starterkit.md

@@ -6,9 +6,81 @@
 }
 
 .c-stacked-block {
-	// background: orange;
-}
+	&__description {
+		font-size: $font-size-med;
+	}
+
+	&__preview-container {
+		position: relative;
+		width: 100%;
+		height: 280px;
+		padding: 8px;
+		border-radius: 6px;
+		margin-bottom: 0.75rem;
+
+		display: flex;
+		flex-direction: column;
+		background-color: $color-gray-07;
+	}
+
+	&__bar {
+		height: 24px;
+		display: flex;
+		padding-top: 4px;
+	}
+
+	&__bar &__bar-dots {
+		width: 12px;
+		flex: 0 0 12px;
+		border-radius: 50%;
+		margin-right: 0.5rem;
+
+		&:last-child {
+			margin-right: 0;
+			margin-left: 0.5rem;
+		}
+	}
+
+	&__bar &__bar-uri,
+	&__bar &__bar-dots {
+		height: 12px;
+		background-color: darken($color-gray-07, 8%);
+	}
+
+	&__bar &__bar-uri,
+	&__bar &__bar-dots {
+		height: 12px;
+		background-color: darken($color-gray-07, 8%);
+	}
+
+	&__bar &__bar-uri {
+		position: relative;
+		flex: 1 1 100%;
+		margin: 0 1rem;
+		border-radius: 999px;
+	}
+
+	&__preview-content {
+		flex-grow: 1;
+		overflow: hidden;
+		position: relative;
+		max-width: 100%;
+		border-radius: 3px;
+	}
+
+	&__frame-item {
+		width: 200%;
+		height: 200%;
+		border: 0;
+		transform: scale(0.5);
+		transform-origin: 0 0;
+	}
 
-.c-stacked-block__description {
-	font-size: $font-size-med;
+	&__frame-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
 }