Source block default to no wrapping text & updated copy button (#43)

* new styles and js code for code blocks

* hijack the title element

* fix the existing feature code for vector home page

* fix font weight issue in safari

* add extra margin to list items

* remove commented out section

Author: colegoldsmith

preview-src/index.adoc

@@ -415,9 +415,42 @@ Output literal monospace text, such as `my-python-function` or `initial-scale=1.
 .Console code block
 [source,console]
 ----
-.Optional title
-[example]
-This is an example paragraph.
+$ pip install astra-vector
+$ python3
+----
+
+[.wrap]
+.Text does not wrap by default
+[source]
+----
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+----
+
+[.nolang]
+.Hide language name
+[source,java]
+----
+// A title with hidden language name
+public class CurrentDateTime {
+    public static void main(String[] args) {
+        LocalDateTime current = LocalDateTime.now();
+
+        System.out.println("Current Date and Time is: " + current);
+    }
+}
+----
+
+[.nolang]
+[source,java]
+----
+// No title with hidden language name
+public class CurrentDateTime {
+    public static void main(String[] args) {
+        LocalDateTime current = LocalDateTime.now();
+
+        System.out.println("Current Date and Time is: " + current);
+    }
+}
 ----
 
 === Callouts

src/css/doc.css

@@ -709,7 +709,7 @@
 
 .doc .olist li + li,
 .doc .ulist li + li {
-  margin-top: 0;
+  margin-top: 1.5rem;
 }
 
 .doc .ulist .listingblock,
@@ -854,115 +854,17 @@
   white-space: pre-wrap;
 }
 
-.doc code.hljs {
-  color: var(--ds-text-secondary);
-}
-
 .doc pre.highlight code,
 .doc .listingblock pre:not(.highlight),
 .doc .literalblock pre {
-  background: var(--ds-background-body);
-  box-shadow: inset 0 0 1.75px var(--ds-divider);
+  background: var(--ds-background-level1);
+  /* box-shadow: inset 0 0 1.75px var(--ds-divider); */
   display: block;
   overflow-x: auto;
+  border-radius: 6px;
   padding: var(--ds-space-2);
 }
 
-.doc .listingblock > .content {
-  position: relative;
-}
-
-.doc .source-toolbox {
-  display: flex;
-  visibility: hidden;
-  position: absolute;
-  top: var(--ds-space-h);
-  right: var(--ds-space-1);
-  color: var(--pre-annotation-font-color);
-  font-family: var(--body-font-family);
-  font-size: calc(13 / var(--rem-base) * 1rem);
-  line-height: 1;
-  user-select: none;
-  white-space: nowrap;
-  z-index: 1;
-}
-
-.doc .listingblock:hover .source-toolbox {
-  visibility: visible;
-}
-
-.doc .source-toolbox .source-lang {
-  text-transform: uppercase;
-  letter-spacing: 0.075em;
-}
-
-.doc .source-toolbox > :not(:last-child)::after {
-  content: "|";
-  letter-spacing: 0;
-  padding: 0 1ch;
-}
-
-.doc .source-toolbox .copy-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: none;
-  border: none;
-  color: inherit;
-  outline: none;
-  padding: 0;
-  font-size: inherit;
-  line-height: inherit;
-  width: 1em;
-  height: 1em;
-}
-
-.doc .source-toolbox .copy-icon {
-  flex: none;
-  width: inherit;
-  height: inherit;
-}
-
-.doc .source-toolbox img.copy-icon {
-  filter: invert(50.2%);
-}
-
-.doc .source-toolbox svg.copy-icon {
-  fill: currentColor;
-}
-
-.doc .source-toolbox .copy-toast {
-  flex: none;
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  margin-top: 1em;
-  background-color: var(--doc-font-color);
-  border-radius: 0.25em;
-  padding: 0.5em;
-  color: var(--color-white);
-  cursor: auto;
-  opacity: 0;
-  transition: opacity 0.5s ease 0.5s;
-}
-
-.doc .source-toolbox .copy-toast::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  width: 1em;
-  height: 1em;
-  border: 0.55em solid transparent;
-  border-left-color: var(--doc-font-color);
-  transform: rotate(-90deg) translateX(50%) translateY(50%);
-  transform-origin: left;
-}
-
-.doc .source-toolbox .copy-button.clicked .copy-toast {
-  opacity: 1;
-  transition: none;
-}
-
 .doc .language-console .hljs-meta {
   user-select: none;
 }

src/css/ds-blocks.css

@@ -3,77 +3,127 @@
 /*
  *  Usage: [source,python]
  *
- *  Default style: [source.default,python]
+ *  Text wrap style: [source.wrap,python]
+ *  Hide language title style: [source.hidelang,python]
  */
-
-.listingblock:not(.default) .content {
-  display: grid;
+.doc code.hljs {
+  color: var(--ds-text-secondary);
 }
 
-.listingblock:not(.default) .content .source-toolbox {
+.doc .highlightjs {
   position: relative;
-  padding: var(--ds-space-1) var(--ds-space-2);
-  visibility: visible;
-  justify-content: flex-end;
-  background: var(--ds-neutral-100);
-  grid-row-start: 1;
+}
+
+.doc .listingblock:not(.wrap) .highlightjs {
+  text-wrap: nowrap;
+}
+
+.doc .listingblock .title {
+  @include text-label;
+
+  display: flex;
+  font-style: normal;
+  color: var(--ds-text-primary);
+  margin-bottom: 0;
+  padding: var(--ds-space-h) var(--ds-space-2);
+  background: var(--ds-background-level2);
   border-top-left-radius: calc(6 / var(--rem-base) * 1rem);
   border-top-right-radius: calc(6 / var(--rem-base) * 1rem);
-  top: 0;
-  left: 0;
+  border: 1px solid transparent;
 }
 
-.listingblock:not(.default) .content .source-toolbox .source-lang::after {
-  display: none;
+.doc .listingblock .title .source-lang {
+  margin-left: auto;
+  text-transform: uppercase;
 }
 
-.listingblock:not(.default) .content .source-toolbox .copy-button {
-  justify-content: flex-end;
-  flex-direction: column-reverse;
+.doc .source-toolbox {
+  position: absolute;
+  right: 0;
+  padding: 1.25rem;
+  height: calc(100% - 6px);
+  margin: 1px;
+  border-radius: 6px;
 }
 
-.source-toolbox .copy-button > .material-icons {
-  font-size: calc(16 / var(--rem-base) * 1rem);
+html[data-theme="light"] .doc .source-toolbox {
+  background: linear-gradient(to right, rgba(247, 247, 247, 0), rgb(247, 247, 247), rgb(247, 247, 247) 20%);
 }
 
-.listingblock:not(.default) .content .source-toolbox .source-lang {
-  color: var(--ds-text-primary);
-  text-transform: capitalize;
-  font-family: var(--body-font-family);
-  line-height: 1.5;
-  letter-spacing: 0.65px;
-  font-weight: var(--body-font-weight-bold);
-  flex: 1;
+html[data-theme="dark"] .doc .source-toolbox {
+  background: linear-gradient(to right, rgba(35, 35, 36, 0), rgb(35, 35, 36), rgb(35, 35, 36) 20%);
 }
 
-.listingblock:not(.default) .source-toolbox .copy-toast:not(:only-child)::after {
-  transform: rotate(90deg) translateX(135%) translateY(-45%);
+.doc .source-toolbox .copy-toast {
+  font-size: calc(12 / var(--rem-base) * 1rem);
+  font-family: "Roboto Flex", sans-serif;
+  font-weight: 400;
+  display: inline-flex;
+  justify-content: center;
+  position: absolute;
+  background-color: var(--ds-background-tooltip);
+  border-radius: 0.25em;
+  padding: 0.5em;
+  color: var(--ds-text-inverse);
+  cursor: auto;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.5s ease 0.5s, visibility 0s linear 1s;
+  text-wrap: nowrap;
+  white-space: nowrap;
+  transform: translateX(-2.35rem) translateY(-5rem);
+  z-index: 20;
+}
+
+.doc .source-toolbox .copy-toast::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 1em;
+  height: 1em;
+  border: 0.55em solid transparent;
+  border-left-color: var(--ds-background-tooltip);
+  transform: rotate(90deg) translateX(100%);
 }
 
-.listingblock:not(.default) .source-toolbox .copy-button:not(:only-child) .copy-toast {
-  margin: 0 0 var(--ds-space-2h) 0;
+.doc .source-toolbox .copy-button.clicked .copy-toast {
+  opacity: 1;
+  visibility: visible;
+  transition: none;
 }
 
-.listingblock:not(.default) .source-toolbox .copy-button:only-child .copy-toast {
-  margin: 0 0 calc(14 / var(--rem-base) * 1rem) 0;
+.doc .source-toolbox .copy-button {
+  padding: var(--ds-space-1);
+  background: var(--ds-background-level1);
+  border-radius: 6px;
+  line-height: 1;
+  display: flex;
+
+  @apply transition-colors;
+
+  &:hover {
+    background: var(--ds-background-level2);
+  }
 }
 
-.listingblock:not(.default) .hljs {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-top-color: var(--ds-neutral-100);
+.doc .source-toolbox .copy-button .material-icons {
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  user-select: none;
 }
 
-.listingblock .source-toolbox {
-  right: var(--ds-space-2);
+.doc .source-toolbox + .hljs {
+  padding-right: var(--ds-space-7);
 }
 
-html[data-theme="dark"] .listingblock:not(.default) .content .source-toolbox {
-  background: var(--ds-neutral-700);
+.doc .listingblock.nolang .title .source-lang {
+  display: none;
 }
 
-html[data-theme="dark"] .listingblock:not(.default) .hljs {
-  border-top-color: var(--ds-neutral-700);
+.doc .listingblock .title + .content .highlightjs .hljs,
+.doc .listingblock .title + .content pre:not(.highlightjs) {
+  border-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 /*

src/css/ds-card.css

@@ -117,7 +117,6 @@
 /* Feature Card - Code */
 .doc .ds-feature-code code,
 .doc .ds-feature-code pre.highlight code {
-  background: var(--ds-text-primary);
   font-size: calc(15.5 / var(--rem-base) * 1rem);
 }
 
@@ -126,6 +125,18 @@
   padding: var(--ds-space-2) var(--ds-space-3);
 }
 
+.doc .ds-feature-code {
+  @apply inverse-theme;
+}
+
+.doc .ds-feature-code .source-toolbox {
+  display: none;
+}
+
+.doc .ds-feature-code code {
+  border-radius: calc(6 / var(--rem-base) * 1rem) !important;
+}
+
 @media screen and (min-width: 1200px) {
   .ds-feature .sectionbody {
     flex-direction: row;

src/css/highlight.css

@@ -116,5 +116,5 @@
 
 .hljs {
   border-radius: 6px;
-  border: 1px solid var(--ds-neutral-outlined-border);
+  border: 1px solid var(--ds-background-level2);
 }

src/css/typeface-roboto-flex.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: "Roboto Flex";
   font-style: normal;
-  font-weight: 400;
+  font-weight: 1 1000;
   src:
     url(~@fontsource/roboto-flex/files/roboto-flex-latin-400-normal.woff2) format("woff2"),
     url(~@fontsource/roboto-flex/files/roboto-flex-latin-400-normal.woff) format("woff");