Skip to content

Commit 22e9ac1

Browse files
colegoldsmithcolegoldsmith
authored
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
1 parent 63f9341 commit 22e9ac1

File tree

7 files changed

+170
-160
lines changed

7 files changed

+170
-160
lines changed

‎preview-src/index.adoc‎

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -415,9 +415,42 @@ Output literal monospace text, such as `my-python-function` or `initial-scale=1.
415415
.Console code block
416416
[source,console]
417417
----
418-
.Optional title
419-
[example]
420-
This is an example paragraph.
418+
$ pip install astra-vector
419+
$ python3
420+
----
421+
422+
[.wrap]
423+
.Text does not wrap by default
424+
[source]
425+
----
426+
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.
427+
----
428+
429+
[.nolang]
430+
.Hide language name
431+
[source,java]
432+
----
433+
// A title with hidden language name
434+
public class CurrentDateTime {
435+
public static void main(String[] args) {
436+
LocalDateTime current = LocalDateTime.now();
437+
438+
System.out.println("Current Date and Time is: " + current);
439+
}
440+
}
441+
----
442+
443+
[.nolang]
444+
[source,java]
445+
----
446+
// No title with hidden language name
447+
public class CurrentDateTime {
448+
public static void main(String[] args) {
449+
LocalDateTime current = LocalDateTime.now();
450+
451+
System.out.println("Current Date and Time is: " + current);
452+
}
453+
}
421454
----
422455

423456
=== Callouts

‎src/css/doc.css‎

Lines changed: 4 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -709,7 +709,7 @@
709709

710710
.doc .olist li + li,
711711
.doc .ulist li + li {
712-
margin-top: 0;
712+
margin-top: 1.5rem;
713713
}
714714

715715
.doc .ulist .listingblock,
@@ -854,115 +854,17 @@
854854
white-space: pre-wrap;
855855
}
856856

857-
.doc code.hljs {
858-
color: var(--ds-text-secondary);
859-
}
860-
861857
.doc pre.highlight code,
862858
.doc .listingblock pre:not(.highlight),
863859
.doc .literalblock pre {
864-
background: var(--ds-background-body);
865-
box-shadow: inset 0 0 1.75px var(--ds-divider);
860+
background: var(--ds-background-level1);
861+
/* box-shadow: inset 0 0 1.75px var(--ds-divider); */
866862
display: block;
867863
overflow-x: auto;
864+
border-radius: 6px;
868865
padding: var(--ds-space-2);
869866
}
870867

871-
.doc .listingblock > .content {
872-
position: relative;
873-
}
874-
875-
.doc .source-toolbox {
876-
display: flex;
877-
visibility: hidden;
878-
position: absolute;
879-
top: var(--ds-space-h);
880-
right: var(--ds-space-1);
881-
color: var(--pre-annotation-font-color);
882-
font-family: var(--body-font-family);
883-
font-size: calc(13 / var(--rem-base) * 1rem);
884-
line-height: 1;
885-
user-select: none;
886-
white-space: nowrap;
887-
z-index: 1;
888-
}
889-
890-
.doc .listingblock:hover .source-toolbox {
891-
visibility: visible;
892-
}
893-
894-
.doc .source-toolbox .source-lang {
895-
text-transform: uppercase;
896-
letter-spacing: 0.075em;
897-
}
898-
899-
.doc .source-toolbox > :not(:last-child)::after {
900-
content: "|";
901-
letter-spacing: 0;
902-
padding: 0 1ch;
903-
}
904-
905-
.doc .source-toolbox .copy-button {
906-
display: flex;
907-
flex-direction: column;
908-
align-items: center;
909-
background: none;
910-
border: none;
911-
color: inherit;
912-
outline: none;
913-
padding: 0;
914-
font-size: inherit;
915-
line-height: inherit;
916-
width: 1em;
917-
height: 1em;
918-
}
919-
920-
.doc .source-toolbox .copy-icon {
921-
flex: none;
922-
width: inherit;
923-
height: inherit;
924-
}
925-
926-
.doc .source-toolbox img.copy-icon {
927-
filter: invert(50.2%);
928-
}
929-
930-
.doc .source-toolbox svg.copy-icon {
931-
fill: currentColor;
932-
}
933-
934-
.doc .source-toolbox .copy-toast {
935-
flex: none;
936-
position: relative;
937-
display: inline-flex;
938-
justify-content: center;
939-
margin-top: 1em;
940-
background-color: var(--doc-font-color);
941-
border-radius: 0.25em;
942-
padding: 0.5em;
943-
color: var(--color-white);
944-
cursor: auto;
945-
opacity: 0;
946-
transition: opacity 0.5s ease 0.5s;
947-
}
948-
949-
.doc .source-toolbox .copy-toast::after {
950-
content: "";
951-
position: absolute;
952-
top: 0;
953-
width: 1em;
954-
height: 1em;
955-
border: 0.55em solid transparent;
956-
border-left-color: var(--doc-font-color);
957-
transform: rotate(-90deg) translateX(50%) translateY(50%);
958-
transform-origin: left;
959-
}
960-
961-
.doc .source-toolbox .copy-button.clicked .copy-toast {
962-
opacity: 1;
963-
transition: none;
964-
}
965-
966868
.doc .language-console .hljs-meta {
967869
user-select: none;
968870
}

‎src/css/ds-blocks.css‎

Lines changed: 93 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,77 +3,127 @@
33
/*
44
* Usage: [source,python]
55
*
6-
* Default style: [source.default,python]
6+
* Text wrap style: [source.wrap,python]
7+
* Hide language title style: [source.hidelang,python]
78
*/
8-
9-
.listingblock:not(.default) .content {
10-
display: grid;
9+
.doc code.hljs {
10+
color: var(--ds-text-secondary);
1111
}
1212

13-
.listingblock:not(.default) .content .source-toolbox {
13+
.doc .highlightjs {
1414
position: relative;
15-
padding: var(--ds-space-1) var(--ds-space-2);
16-
visibility: visible;
17-
justify-content: flex-end;
18-
background: var(--ds-neutral-100);
19-
grid-row-start: 1;
15+
}
16+
17+
.doc .listingblock:not(.wrap) .highlightjs {
18+
text-wrap: nowrap;
19+
}
20+
21+
.doc .listingblock .title {
22+
@include text-label;
23+
24+
display: flex;
25+
font-style: normal;
26+
color: var(--ds-text-primary);
27+
margin-bottom: 0;
28+
padding: var(--ds-space-h) var(--ds-space-2);
29+
background: var(--ds-background-level2);
2030
border-top-left-radius: calc(6 / var(--rem-base) * 1rem);
2131
border-top-right-radius: calc(6 / var(--rem-base) * 1rem);
22-
top: 0;
23-
left: 0;
32+
border: 1px solid transparent;
2433
}
2534

26-
.listingblock:not(.default) .content .source-toolbox .source-lang::after {
27-
display: none;
35+
.doc .listingblock .title .source-lang {
36+
margin-left: auto;
37+
text-transform: uppercase;
2838
}
2939

30-
.listingblock:not(.default) .content .source-toolbox .copy-button {
31-
justify-content: flex-end;
32-
flex-direction: column-reverse;
40+
.doc .source-toolbox {
41+
position: absolute;
42+
right: 0;
43+
padding: 1.25rem;
44+
height: calc(100% - 6px);
45+
margin: 1px;
46+
border-radius: 6px;
3347
}
3448

35-
.source-toolbox .copy-button > .material-icons {
36-
font-size: calc(16 / var(--rem-base) * 1rem);
49+
html[data-theme="light"] .doc .source-toolbox {
50+
background: linear-gradient(to right, rgba(247, 247, 247, 0), rgb(247, 247, 247), rgb(247, 247, 247) 20%);
3751
}
3852

39-
.listingblock:not(.default) .content .source-toolbox .source-lang {
40-
color: var(--ds-text-primary);
41-
text-transform: capitalize;
42-
font-family: var(--body-font-family);
43-
line-height: 1.5;
44-
letter-spacing: 0.65px;
45-
font-weight: var(--body-font-weight-bold);
46-
flex: 1;
53+
html[data-theme="dark"] .doc .source-toolbox {
54+
background: linear-gradient(to right, rgba(35, 35, 36, 0), rgb(35, 35, 36), rgb(35, 35, 36) 20%);
4755
}
4856

49-
.listingblock:not(.default) .source-toolbox .copy-toast:not(:only-child)::after {
50-
transform: rotate(90deg) translateX(135%) translateY(-45%);
57+
.doc .source-toolbox .copy-toast {
58+
font-size: calc(12 / var(--rem-base) * 1rem);
59+
font-family: "Roboto Flex", sans-serif;
60+
font-weight: 400;
61+
display: inline-flex;
62+
justify-content: center;
63+
position: absolute;
64+
background-color: var(--ds-background-tooltip);
65+
border-radius: 0.25em;
66+
padding: 0.5em;
67+
color: var(--ds-text-inverse);
68+
cursor: auto;
69+
opacity: 0;
70+
visibility: hidden;
71+
transition: opacity 0.5s ease 0.5s, visibility 0s linear 1s;
72+
text-wrap: nowrap;
73+
white-space: nowrap;
74+
transform: translateX(-2.35rem) translateY(-5rem);
75+
z-index: 20;
76+
}
77+
78+
.doc .source-toolbox .copy-toast::after {
79+
content: "";
80+
position: absolute;
81+
bottom: 0;
82+
width: 1em;
83+
height: 1em;
84+
border: 0.55em solid transparent;
85+
border-left-color: var(--ds-background-tooltip);
86+
transform: rotate(90deg) translateX(100%);
5187
}
5288

53-
.listingblock:not(.default) .source-toolbox .copy-button:not(:only-child) .copy-toast {
54-
margin: 0 0 var(--ds-space-2h) 0;
89+
.doc .source-toolbox .copy-button.clicked .copy-toast {
90+
opacity: 1;
91+
visibility: visible;
92+
transition: none;
5593
}
5694

57-
.listingblock:not(.default) .source-toolbox .copy-button:only-child .copy-toast {
58-
margin: 0 0 calc(14 / var(--rem-base) * 1rem) 0;
95+
.doc .source-toolbox .copy-button {
96+
padding: var(--ds-space-1);
97+
background: var(--ds-background-level1);
98+
border-radius: 6px;
99+
line-height: 1;
100+
display: flex;
101+
102+
@apply transition-colors;
103+
104+
&:hover {
105+
background: var(--ds-background-level2);
106+
}
59107
}
60108

61-
.listingblock:not(.default) .hljs {
62-
border-top-left-radius: 0;
63-
border-top-right-radius: 0;
64-
border-top-color: var(--ds-neutral-100);
109+
.doc .source-toolbox .copy-button .material-icons {
110+
font-size: calc(16 / var(--rem-base) * 1rem);
111+
user-select: none;
65112
}
66113

67-
.listingblock .source-toolbox {
68-
right: var(--ds-space-2);
114+
.doc .source-toolbox + .hljs {
115+
padding-right: var(--ds-space-7);
69116
}
70117

71-
html[data-theme="dark"] .listingblock:not(.default) .content .source-toolbox {
72-
background: var(--ds-neutral-700);
118+
.doc .listingblock.nolang .title .source-lang {
119+
display: none;
73120
}
74121

75-
html[data-theme="dark"] .listingblock:not(.default) .hljs {
76-
border-top-color: var(--ds-neutral-700);
122+
.doc .listingblock .title + .content .highlightjs .hljs,
123+
.doc .listingblock .title + .content pre:not(.highlightjs) {
124+
border-top: 0;
125+
border-top-left-radius: 0;
126+
border-top-right-radius: 0;
77127
}
78128

79129
/*

‎src/css/ds-card.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,6 @@
117117
/* Feature Card - Code */
118118
.doc .ds-feature-code code,
119119
.doc .ds-feature-code pre.highlight code {
120-
background: var(--ds-text-primary);
121120
font-size: calc(15.5 / var(--rem-base) * 1rem);
122121
}
123122

@@ -126,6 +125,18 @@
126125
padding: var(--ds-space-2) var(--ds-space-3);
127126
}
128127

128+
.doc .ds-feature-code {
129+
@apply inverse-theme;
130+
}
131+
132+
.doc .ds-feature-code .source-toolbox {
133+
display: none;
134+
}
135+
136+
.doc .ds-feature-code code {
137+
border-radius: calc(6 / var(--rem-base) * 1rem) !important;
138+
}
139+
129140
@media screen and (min-width: 1200px) {
130141
.ds-feature .sectionbody {
131142
flex-direction: row;

‎src/css/highlight.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,5 +116,5 @@
116116

117117
.hljs {
118118
border-radius: 6px;
119-
border: 1px solid var(--ds-neutral-outlined-border);
119+
border: 1px solid var(--ds-background-level2);
120120
}

‎src/css/typeface-roboto-flex.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@font-face {
22
font-family: "Roboto Flex";
33
font-style: normal;
4-
font-weight: 400;
4+
font-weight: 1 1000;
55
src:
66
url(~@fontsource/roboto-flex/files/roboto-flex-latin-400-normal.woff2) format("woff2"),
77
url(~@fontsource/roboto-flex/files/roboto-flex-latin-400-normal.woff) format("woff");

0 commit comments

Comments
 (0)