Skip to content

Commit 8c14e35

Browse files
claymcleodclaymcleod
committed
revise: updates some styling, adds terminal prompt
1 parent a0bee91 commit 8c14e35

File tree

7 files changed

+678
-229
lines changed

7 files changed

+678
-229
lines changed

‎assets/css/main.postcss

+49-2
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,56 @@
1313
@apply dark:prose-code:bg-slate-800;
1414
}
1515

16-
17-
1816
code::before,
1917
code::after {
2018
content: none !important;
2119
}
20+
21+
/**
22+
* Documentation Formatting (Globally Applied)
23+
**/
24+
25+
.docs {
26+
@apply flex;
27+
@apply w-full;
28+
@apply h-full;
29+
30+
.content {
31+
@apply flex;
32+
@apply w-full;
33+
@apply h-full;
34+
35+
@apply pt-16;
36+
37+
@apply dark:bg-slate-950;
38+
39+
main {
40+
@apply flex;
41+
@apply h-full;
42+
43+
@apply overflow-auto;
44+
45+
@apply px-16;
46+
@apply mx-10;
47+
48+
article {
49+
/* Prose */
50+
@apply prose;
51+
@apply prose-slate;
52+
@apply dark:prose-invert;
53+
54+
@apply py-8;
55+
56+
@apply max-w-3xl;
57+
58+
:where(a) {
59+
@apply no-underline;
60+
}
61+
}
62+
63+
aside {
64+
@apply dark:text-white;
65+
}
66+
}
67+
}
68+
}

‎components/molecules/docs/CrateCard.vue

+87-44
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,61 @@
11
<template>
22
<div class="card">
3-
<div class="header">
4-
<div class="title">
5-
In
6-
<Icon :name="category.icon" />
7-
{{ category.name }}
8-
9-
<div class="ml-1 font-normal text-xs font-mono">
10-
<div
11-
class="px-1 py-0.5 rounded-md text-green-900 dark:text-green-300 bg-green-300 dark:bg-green-900 border border-green-500"
12-
v-if="kind === Kind.Library"
13-
>
14-
lib
15-
</div>
16-
<div
17-
class="px-1 py-0.5 rounded-md text-purple-900 dark:text-purple-300 bg-purple-300 dark:bg-purple-900 border border-purple-500"
18-
v-else-if="kind === Kind.Binary"
19-
>
20-
bin
3+
<div>
4+
<div class="header">
5+
<div class="title">
6+
In
7+
<Icon :name="category.icon" />
8+
{{ category.name }}
9+
10+
<div class="ml-1 font-normal text-xs font-mono">
11+
<div
12+
class="px-1 py-0.5 rounded-md text-green-900 dark:text-green-300 bg-green-300 dark:bg-green-900 border border-green-500"
13+
v-if="kind === Kind.Library">
14+
lib
15+
</div>
16+
<div
17+
class="px-1 py-0.5 rounded-md text-purple-900 dark:text-purple-300 bg-purple-300 dark:bg-purple-900 border border-purple-500"
18+
v-else-if="kind === Kind.Binary">
19+
bin
20+
</div>
2121
</div>
2222
</div>
23+
<div class="flex gap-x-1.5">
24+
<a v-if="socials && socials.github"
25+
class="flex items-center justify-center w-7 h-7 bg-gray-100 dark:bg-slate-950 border border-gray-200 rounded-full"
26+
:href="socials.github">
27+
<Icon class="w-4 h-4" name="octicon:mark-github-16"></Icon>
28+
</a>
29+
<a v-if="socials && socials.docs"
30+
class="flex items-center justify-center w-7 h-7 bg-gray-100 dark:bg-slate-950 border border-gray-200 rounded-full"
31+
:href="socials.docs" :title="`Chat about ${name} in the rust-seq Zulip`">
32+
<Icon class="w-4 h-4" name="heroicons-outline:book-open"></Icon>
33+
</a>
34+
<a v-if="socials && socials.zulip"
35+
class="flex items-center justify-center w-7 h-7 bg-gray-100 dark:bg-slate-950 border border-gray-200 rounded-full"
36+
href="https://rustseq.zulipchat.com" :title="`Chat about ${name} in the rust-seq Zulip`">
37+
<Icon class="w-4 h-4" name="tabler:brand-zulip"></Icon>
38+
</a>
39+
</div>
2340
</div>
24-
<div class="flex gap-x-1.5">
25-
<a
26-
v-if="socials && socials.github"
27-
class="flex items-center justify-center w-7 h-7 bg-gray-100 dark:bg-slate-950 border border-gray-200 rounded-full"
28-
:href="socials.github"
29-
>
30-
<Icon class="w-4 h-4" name="octicon:mark-github-16"></Icon>
31-
</a>
32-
<a
33-
v-if="socials && socials.zulip"
34-
class="flex items-center justify-center w-7 h-7 bg-gray-100 dark:bg-slate-950 border border-gray-200 rounded-full"
35-
href="https://rustseq.zulipchat.com"
36-
:title="`Chat about ${name} in the rust-seq Zulip`"
37-
>
38-
<Icon class="w-4 h-4" name="tabler:brand-zulip"></Icon>
39-
</a>
41+
<div class="flex items-center justify-start gap-x-1">
42+
<div class="crate">{{ organization }}/{{ name }}</div>
43+
</div>
44+
<div class="description">
45+
{{ description }}
4046
</div>
4147
</div>
42-
<div class="flex items-center justify-start gap-x-1">
43-
<div class="crate">{{ organization }}/{{ name }}</div>
44-
</div>
45-
<div class="description">
46-
{{ description }}
48+
<div class="terminal">
49+
<div class="command">
50+
<span class="prompt">$</span>
51+
<span v-if="kind === Kind.Library">
52+
cargo add {{ name }}
53+
</span>
54+
<span v-if="kind === Kind.Binary">
55+
cargo install {{ name }}
56+
</span>
57+
</div>
58+
<Icon class="copy" name="heroicons-outline:clipboard-copy"></Icon>
4759
</div>
4860
</div>
4961
</template>
@@ -58,6 +70,7 @@ interface Category {
5870
5971
interface Socials {
6072
github?: string;
73+
docs?: string;
6174
zulip: boolean;
6275
}
6376
@@ -77,20 +90,21 @@ const props = defineProps<Props>();
7790
<style scope lang="postcss">
7891
.card {
7992
@apply transition;
93+
@apply flex flex-col justify-between;
8094
8195
@apply hover:-translate-y-0.5;
8296
8397
@apply px-6;
8498
@apply py-4;
8599
86-
@apply bg-white;
100+
@apply bg-slate-50;
87101
@apply dark:bg-slate-900;
88102
89-
@apply text-slate-900;
103+
@apply text-slate-950;
90104
@apply dark:text-slate-50;
91105
92106
@apply border;
93-
@apply border-gray-100;
107+
@apply border-gray-200;
94108
@apply dark:border-gray-950;
95109
96110
@apply rounded-lg;
@@ -108,12 +122,12 @@ const props = defineProps<Props>();
108122
109123
@apply font-bold;
110124
font-size: 14px;
111-
@apply text-slate-600;
125+
@apply text-slate-700;
112126
@apply dark:text-slate-300;
113127
114128
.iconify {
115129
/* Color of the icon. */
116-
@apply bg-slate-600;
130+
@apply bg-slate-700;
117131
@apply dark:bg-slate-300;
118132
}
119133
}
@@ -133,5 +147,34 @@ const props = defineProps<Props>();
133147
134148
@apply text-start;
135149
}
150+
151+
.terminal {
152+
@apply flex justify-between items-center;
153+
154+
@apply w-full;
155+
@apply mt-3;
156+
@apply py-1 px-3;
157+
158+
@apply font-mono;
159+
160+
@apply rounded-md;
161+
@apply bg-white;
162+
@apply dark:bg-gray-950;
163+
164+
@apply border;
165+
@apply dark:border-gray-800;
166+
167+
.command {
168+
.prompt {
169+
@apply font-bold;
170+
@apply text-purple-700;
171+
}
172+
}
173+
174+
.copy {
175+
@apply cursor-pointer;
176+
@apply dark:hover:text-slate-100;
177+
}
178+
}
136179
}
137180
</style>

‎components/molecules/docs/RightSidebar.vue

+24-2
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,33 @@ const props = defineProps<{
2020
<style scoped lang="postcss">
2121
h4 {
2222
@apply font-bold;
23+
2324
font-size: 14px;
25+
2426
@apply pb-1;
2527
}
2628
27-
ul > li:not(:last-child) {
28-
@apply pb-0.5;
29+
ul {
30+
@apply w-full;
31+
32+
li {
33+
@apply w-full;
34+
@apply rounded-sm;
35+
36+
@apply hover:bg-slate-100;
37+
@apply dark:hover:bg-slate-900;
38+
@apply dark:hover:text-slate-50;
39+
40+
a {
41+
@apply block;
42+
font-size: 14px;
43+
@apply pl-2;
44+
@apply text-inherit;
45+
}
46+
}
47+
48+
li:not(:last-child) {
49+
padding-bottom: 2px;
50+
}
2951
}
3052
</style>

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@
2626
},
2727
"packageManager": "[email protected]+sha512.4abf725084d7bcbafbd728bfc7bee61f2f791f977fd87542b3579dcb23504d170d46337945e4c66485cd12d588a0c0e570ed9c477e7ccdd8507cf05f3f92eaca",
2828
"devDependencies": {
29+
"@iconify-json/heroicons": "^1.2.1",
30+
"@iconify-json/heroicons-outline": "^1.2.0",
31+
"@iconify-json/octicon": "^1.2.1",
32+
"@iconify-json/tabler": "^1.2.5",
2933
"@tailwindcss/typography": "^0.5.15"
3034
}
3135
}

‎pages/docs/[...slug].vue

+1-48
Original file line numberDiff line numberDiff line change
@@ -83,51 +83,4 @@ breadcrumbs.push({
8383
</aside>
8484
</div>
8585
</div>
86-
</template>
87-
88-
<style scoped lang="postcss">
89-
.docs {
90-
@apply flex;
91-
@apply w-full;
92-
@apply h-full;
93-
94-
.content {
95-
@apply flex;
96-
@apply w-full;
97-
@apply h-full;
98-
99-
@apply pt-16;
100-
101-
@apply dark:bg-slate-950;
102-
103-
main {
104-
@apply flex;
105-
@apply h-full;
106-
107-
@apply overflow-auto;
108-
109-
@apply px-16;
110-
@apply mx-10;
111-
112-
article {
113-
/* Prose */
114-
@apply prose;
115-
@apply prose-slate;
116-
@apply dark:prose-invert;
117-
118-
@apply py-8;
119-
120-
@apply max-w-3xl;
121-
122-
:where(a) {
123-
@apply no-underline;
124-
}
125-
}
126-
127-
aside {
128-
@apply dark:text-white;
129-
}
130-
}
131-
}
132-
}
133-
</style>
86+
</template>

0 commit comments

Comments
 (0)