From 34feb1d13d56ad835f8131de9de40f4567b99cec Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Sat, 17 Apr 2021 12:54:50 +0200
Subject: [PATCH] feat(examples): Moar examples

---
 packages/examples/config/index.js             |   8 +-
 packages/examples/example/src/layout.css      | 303 ++++++++++++++++++
 packages/examples/src/index.js                |   4 +
 packages/examples/src/plugin_buttons.js       |   8 +-
 .../examples/src/snippets_buttonhole-end.js   |  10 +
 .../examples/src/snippets_buttonhole-start.js |  10 +
 6 files changed, 335 insertions(+), 8 deletions(-)
 create mode 100644 packages/examples/example/src/layout.css
 create mode 100644 packages/examples/src/snippets_buttonhole-end.js
 create mode 100644 packages/examples/src/snippets_buttonhole-start.js

diff --git a/packages/examples/config/index.js b/packages/examples/config/index.js
index ee3e98828a7..c29908951cd 100644
--- a/packages/examples/config/index.js
+++ b/packages/examples/config/index.js
@@ -17,7 +17,6 @@ export default {
     //point_attr: 'path_attr'
   },
   parts: [
-    /*
     'point_attr',
     'path_move',
     'path_line',
@@ -44,11 +43,9 @@ export default {
     'path_start',
     'path_translate',
     'path_trim',
-    */
     'plugin_bartack',
     'plugin_bartackalong',
-    'plugin_bartackfractionalong'
-    /*
+    'plugin_bartackfractionalong',
     'plugin_buttons',
     'plugin_cutonfold',
     'plugin_dimension',
@@ -84,6 +81,8 @@ export default {
     'snippets_notch',
     'snippets_button',
     'snippets_buttonhole',
+    'snippets_buttonhole_start',
+    'snippets_buttonhole_end',
     'snippets_snapsocket',
     'snippets_snapstud',
     'snippets_logo',
@@ -104,7 +103,6 @@ export default {
     'utils_splitcurve',
     'docs_overview',
     'docs_coords'
-    */
   ],
   options: {
     focus: '',
diff --git a/packages/examples/example/src/layout.css b/packages/examples/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/examples/example/src/layout.css
@@ -0,0 +1,303 @@
+div.layout-wrapper {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: red;
+  background: #f8f9fa;
+  background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%);
+}
+div.layout-wrapper div.layout {
+  display: flex;
+  max-width: 1600px;
+  margin: auto;
+  padding: 0;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  background-color: #f8f9fa;
+  min-height: calc(100vh - 64px);
+}
+div.layout-wrapper div.layout > aside {
+  width: 33%;
+  background: #f1f3f5;
+  border-right: 2px solid #dee2e6;
+}
+div.layout-wrapper div.layout > section {
+  margin: 0;
+  padding: 1rem;
+}
+div.layout-wrapper div.layout > section > div.content {
+  max-width: 66ch;
+  min-width: 340px;
+}
+div.layout-wrapper div.layout > section > div.content.wide {
+  max-width: 100%;
+  margin: auto;
+}
+
+.theme-wrapper.dark header {
+  background-color: #1a1d21;
+}
+
+.theme-wrapper.dark div.layout-wrapper {
+  background: #f8f9fa;
+  background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%);
+}
+.theme-wrapper.dark div.layout-wrapper div.layout {
+  background-color: #212529;
+}
+.theme-wrapper.dark div.layout-wrapper div.layout > aside {
+  background-color: #1a1d21;
+  border-right: 2px solid #343a40;
+}
+
+header a svg {
+  color: #ced4da;
+}
+
+header a:first-of-type svg {
+  color: #f8f9fa;
+}
+
+header a:hover svg {
+  color: #b197fc;
+}
+
+header a span,
+header button span {
+  color: #ced4da;
+}
+header a span svg,
+header button span svg {
+  color: #dee2e6;
+}
+
+header a:hover span,
+header button:hover span {
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
+
+header a,
+header button {
+  padding: 0 1vw !important;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    width: 218px;
+  }
+  div.layout > section {
+    width: calc(100% - 220px - 4rem);
+    max-width: none;
+    margin: 0;
+    padding: 0 2rem;
+  }
+  div.layout > section div.content {
+    min-width: inherit;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+div.gatsby-highlight {
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 599px) {
+  #mobile-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    padding: 0 0 1rem;
+    max-width: 600px;
+    z-index: -10;
+    transition: opacity 0.25s ease 0s;
+    opacity: 0;
+    overflow: scroll;
+  }
+  #mobile-menu > ul,
+  #mobile-menu > div {
+    transform: translate(0px, 10px);
+    transition: transform 0.25s ease 0s;
+  }
+  .theme-wrapper.show-menu #mobile-menu {
+    opacity: 1;
+    z-index: 10;
+  }
+  .theme-wrapper.show-menu #mobile-menu > div {
+    transform: translate(0px, 0px);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  z-index: 10;
+}
+.theme-wrapper.show-menu div.menu > div {
+  transform: translate(0px, 0px);
+}
+
+div.spaced-buttons > button {
+  margin: 0 0.5rem 0.5rem 0;
+}
+
+div.spaced > * {
+  margin: 0 0.5rem 0.5rem 0;
+}
+
+ul#pre-main-menu {
+  margin: 0;
+  padding: 0;
+}
+
+.boldish {
+  font-weight: 500;
+}
+
+.freesewing.draft {
+  padding: 1rem;
+}
+
+li.action {
+  clear: both;
+}
+
+li.action span.MuiSwitch-root {
+  float: right;
+}
+
+.theme-wrapper.light ul#draft-config li.action.toggle.off,
+.theme-wrapper.dark ul#draft-config li.action.toggle.off {
+  color: #868e96;
+}
+.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg,
+.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg {
+  color: #868e96;
+}
+
+footer {
+  background-color: #1a1d21;
+  color: #adb5bd;
+  padding: 3rem 0 6rem;
+}
+footer a {
+  color: #dee2e6 !important;
+  font-weight: 400;
+}
+footer a:hover {
+  color: #d0bfff !important;
+}
+footer div.cols {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  max-width: 1600px;
+  margin: auto;
+  padding: 0 1.5rem;
+}
+footer div.cols > div {
+  min-width: 150px;
+  max-width: calc(20% - 4rem);
+  padding: 0 2rem 0 0;
+  width: 100%;
+}
+footer ul {
+  text-align: left;
+  font-size: 1.1rem;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+footer ul li:first-of-type {
+  padding: 0.35rem 0.75rem;
+}
+footer ul li {
+  display: block;
+}
+footer ul li a:hover {
+  text-decoration: none !important;
+}
+footer ul li.heading {
+  font-weight: bold;
+  border-bottom: 3px solid #adb5bd;
+  margin-bottom: 0.5rem;
+}
+
+/* XL screens */
+@media (min-width: 1200px) {
+  footer div.cols > div:last-of-type {
+    min-width: 350px;
+  }
+}
+
+/* SM screens */
+@media (min-width: 600px) and (max-width: 959px) {
+  footer div.cols {
+    flex-wrap: wrap;
+  }
+  footer div.cols > div {
+    width: calc(30% - 4rem);
+    padding: 0 1rem;
+  }
+}
+
+/* XS screens */
+@media (max-width: 599px) {
+  footer div.cols {
+    display: block;
+  }
+  footer div.cols > div {
+    margin: 2rem auto 0;
+    max-width: calc(100% - 4rem);
+  }
+  footer div.cols > div:first-of-type {
+    margin-top: 0;
+  }
+}
diff --git a/packages/examples/src/index.js b/packages/examples/src/index.js
index 333eca4f267..03817030057 100644
--- a/packages/examples/src/index.js
+++ b/packages/examples/src/index.js
@@ -87,6 +87,8 @@ import draftSnippets_bnotch from './snippets_bnotch'
 import draftSnippets_notch from './snippets_notch'
 import draftSnippets_button from './snippets_button'
 import draftSnippets_buttonhole from './snippets_buttonhole'
+import draftSnippets_buttonhole_start from './snippets_buttonhole-start'
+import draftSnippets_buttonhole_end from './snippets_buttonhole-end'
 import draftSnippets_snapsocket from './snippets_snapsocket'
 import draftSnippets_snapstud from './snippets_snapstud'
 import draftSnippets_logo from './snippets_logo'
@@ -167,6 +169,8 @@ let methods = {
   draftSnippets_notch,
   draftSnippets_button,
   draftSnippets_buttonhole,
+  draftSnippets_buttonhole_start,
+  draftSnippets_buttonhole_end,
   draftSnippets_snapsocket,
   draftSnippets_snapstud,
   draftSnippets_logo,
diff --git a/packages/examples/src/plugin_buttons.js b/packages/examples/src/plugin_buttons.js
index 89994f031da..3345f261a5c 100644
--- a/packages/examples/src/plugin_buttons.js
+++ b/packages/examples/src/plugin_buttons.js
@@ -5,8 +5,10 @@ export default (part) => {
 
   snippets.button = new Snippet('button', new Point(20, 10))
   snippets.buttonhole = new Snippet('buttonhole', new Point(40, 10))
-  snippets.snapMale = new Snippet('snap-stud', new Point(60, 10))
-  snippets.snapFemale = new Snippet('snap-socket', new Point(80, 10))
+  snippets.buttonholeStart = new Snippet('buttonhole-start', new Point(60, 10))
+  snippets.buttonholeEnd = new Snippet('buttonhole-end', new Point(80, 10))
+  snippets.snapMale = new Snippet('snap-stud', new Point(100, 10))
+  snippets.snapFemale = new Snippet('snap-socket', new Point(120, 10))
 
-  return box(part, 100, 20)
+  return box(part, 140, 20)
 }
diff --git a/packages/examples/src/snippets_buttonhole-end.js b/packages/examples/src/snippets_buttonhole-end.js
new file mode 100644
index 00000000000..0ca7c409b5e
--- /dev/null
+++ b/packages/examples/src/snippets_buttonhole-end.js
@@ -0,0 +1,10 @@
+import { box } from './shared'
+
+export default (part) => {
+  let { Point, points, Snippet, snippets } = part.shorthand()
+
+  points.anchor = new Point(50, 0)
+  snippets.demo = new Snippet('buttonhole-end', points.anchor)
+
+  return box(part, 100, 10)
+}
diff --git a/packages/examples/src/snippets_buttonhole-start.js b/packages/examples/src/snippets_buttonhole-start.js
new file mode 100644
index 00000000000..b8189cd76aa
--- /dev/null
+++ b/packages/examples/src/snippets_buttonhole-start.js
@@ -0,0 +1,10 @@
+import { box } from './shared'
+
+export default (part) => {
+  let { Point, points, Snippet, snippets } = part.shorthand()
+
+  points.anchor = new Point(50, 10)
+  snippets.demo = new Snippet('buttonhole-start', points.anchor)
+
+  return box(part, 100, 10)
+}