Skip to content

Commit 0a7bba1

Browse files
liborjelinekliborjelinek
committed
feat: add cta, social networks
1 parent 6c66da9 commit 0a7bba1

File tree

8 files changed

+145
-55
lines changed

8 files changed

+145
-55
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,8 @@ logs
2222
.env
2323
.env.*
2424
!.env.example
25+
26+
# editors
27+
.idea/
28+
.vscode/*
29+
!.vscode/*.sample

‎.vscode/settings.json.sample‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Format on save
3+
"editor.formatOnSave": true,
4+
5+
"editor.defaultFormatter": "esbenp.prettier-vscode",
6+
7+
"files.associations": {
8+
"**/app/assets/styles/*.css": "tailwindcss"
9+
},
10+
11+
// Recommended by Tailwind CSS extension
12+
"editor.quickSuggestions": {
13+
"strings": "on"
14+
}
15+
}

‎app/app.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
22
<div class="flex flex-col h-screen">
3-
<!-- header -->
4-
<div><Header /></div>
3+
<!-- header, topbar -->
4+
<Header />
5+
<Topbar />
56
<!-- editor, preview, console -->
6-
<div class="border-b border-t border-slate-300 h-full overflow-y-auto">
7+
<div class="h-full overflow-y-auto">
78
<splitpanes vertical class="default-theme">
89
<pane size="50" min-size="20" class="p-2">
910
<EditorPane />
@@ -12,7 +13,7 @@
1213
</splitpanes>
1314
</div>
1415
<!-- Footer -->
15-
<div><Footer /></div>
16+
<Footer />
1617
</div>
1718
</template>
1819

‎app/assets/styles/main.css‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
1+
/* No font import from Google because Nuxt Fonts will download and cache it automatically */
2+
3+
@theme {
4+
--color-text: #2d4044;
5+
--color-background: #faf8fc;
6+
--color-primary: #0c7cba;
7+
--color-secondary: #0072f5;
8+
--color-accent: var(--color-sky-600);
9+
--color-heading: var(--color-primary);
10+
--font-text: Inter, sans-serif;
11+
--font-heading: Rubik, sans-serif;
12+
--font-mono: Roboto Mono, monospace;
13+
}
14+
115
@import "./sphinx-preview.css";
216
@import "tailwindcss";
317
@plugin "@tailwindcss/typography";
418
@plugin "daisyui";
519

620
:root {
7-
/* No font import from Google because Nuxt Fonts will download and cache it automatically */
8-
font-family: Rubik, sans-serif;
9-
}
21+
font-family: Rubik, sans-serif;
22+
}

‎app/components/Footer.vue‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,34 @@
11
<template>
2-
<div class="py-2 px-6 flex gap-4 text-sm">
2+
<footer
3+
class="border-t border-slate-300 py-2 px-6 flex gap-4 text-sm justify-between text-slate-500"
4+
>
35
<span
46
>🚀 Do you want to try Sphinx as service?
57
<a href="https://documatt.com" class="link"
68
>Try Documatt, a free worry-free Sphinx.</a
79
>
810
</span>
9-
</div>
11+
12+
<div class="text-primary hover:text-accent">
13+
<!-- <Icon name="emojione-v1:flag-for-czechia" /> -->
14+
15+
Made with <Icon name="prime:heart" /> by
16+
<a href="https://documatt.com" target="_blank" class="link">Documatt</a>
17+
18+
<div class="inline-flex gap-1.5 ml-4">
19+
<a href="https://www.youtube.com/@Documatt" target="_blank"
20+
><Icon name="fa-brands:youtube"
21+
/></a>
22+
<a href="https://www.linkedin.com/company/documattcom" target="_blank"
23+
><Icon name="fa-brands:linkedin"
24+
/></a>
25+
<a href="https://github.com/documatt" target="_blank"
26+
><Icon name="fa-brands:github"
27+
/></a>
28+
<a href="https://x.com/documattcom" target="_blank"
29+
><Icon name="prime:twitter"
30+
/></a>
31+
</div>
32+
</div>
33+
</footer>
1034
</template>

‎app/components/Header.vue‎

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,35 @@
11
<template>
2-
<div
3-
class="bg-[#f8fafc] dark:bg-slate-800 py-2 px-6 flex gap-20 justify-between items-center"
2+
<header
3+
class="bg-[#f8fafc] dark:bg-slate-800 py-1 px-6 flex gap-20 justify-between items-center border-b border-t border-slate-300 text-slate-500"
44
>
5+
<!-- Left-side logo and motto -->
56
<div class="flex gap-2 items-center">
67
<a href="https://documatt.com">
78
<NuxtImg
89
src="/images/documatt-logo.svg"
910
alt="Documatt logo"
10-
class="h-[1lh]"
11+
class="h-[0.7lh]"
1112
/>
1213
</a>
13-
<span class="text-xl text-slate-700 mr-1">Snippets</span>
14-
<span class="text-sm text-slate-500"
15-
>reStructuredText and MyST Markdown preview</span
16-
>
14+
<h1 class="font-bold text-sm">
15+
reStructuredText and Markdown live preview
16+
</h1>
1717
</div>
1818

19-
<div class="flex gap-2 items-center">
20-
<HeaderSyntaxSwitcher />
19+
<!-- Righ-side buttons -->
2120

22-
<div
23-
class="tooltip tooltip-left flex items-center gap-2"
24-
:data-tip="`Running on Sphinx ${sphinxVer}`"
25-
>
26-
<!-- <Icon
27-
name="simple-icons:sphinx"
28-
class="dark:text-slate-200 text-xl inline h-[0.75lh]"
29-
/> -->
30-
<NuxtImg
31-
src="/images/sphinx-logo.svg"
32-
alt="Sphinx logo"
33-
class="h-[0.75lh] inline dark:hidden"
34-
/>
35-
<NuxtImg
36-
src="/images/sphinx-logo-dark.svg"
37-
alt="Sphinx logo"
38-
class="h-[0.75lh] inline not-dark:hidden"
39-
/>
40-
<span class="text-sm">{{ sphinxVer }}</span>
41-
</div>
21+
<div class="text-sm flex gap-2 items-center">
22+
<!-- More functions? Try Documatt -->
23+
24+
More functions?
25+
<a href="https://documatt.com" target="_blank">
26+
<button
27+
class="btn btn-outline border-accent text-gray-100 hover:bg-primary hover:text-slate-200 bg-accent"
28+
>
29+
Try Documatt
30+
<Icon name="prime:arrow-right" />
31+
</button>
32+
</a>
4233
</div>
43-
</div>
34+
</header>
4435
</template>
45-
46-
<script setup lang="ts">
47-
const sphinxVer = "8.2.1";
48-
</script>

‎app/components/Header/SyntaxSwitcher.vue‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎app/components/Topbar.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div
3+
class="border-b border-slate-300 py-1 px-6 flex gap-2 items-center text-slate-700"
4+
>
5+
I want to preview
6+
7+
<div class="tooltip tooltip-left" data-tip="Switch syntax">
8+
<select
9+
v-model="previewStore.syntax"
10+
class="select select-ghost text-base"
11+
>
12+
<option :value="Syntax.RST" selected>reStructuredText</option>
13+
<option :value="Syntax.MD">Markdown</option>
14+
</select>
15+
</div>
16+
17+
using
18+
19+
<NuxtImg
20+
src="/images/sphinx-logo.svg"
21+
alt="Sphinx logo"
22+
class="h-[0.75lh] inline dark:hidden"
23+
/>
24+
<NuxtImg
25+
src="/images/sphinx-logo-dark.svg"
26+
alt="Sphinx logo"
27+
class="h-[0.75lh] inline not-dark:hidden"
28+
/>
29+
30+
Sphinx 8.2.1
31+
32+
<!-- More info -->
33+
<!--
34+
<div class="dropdown dropdown-end">
35+
<div
36+
tabindex="0"
37+
role="button"
38+
class="btn btn-circle btn-ghost btn-xs text-base text-primary"
39+
>
40+
<Icon name="prime:info-circle" />
41+
</div>
42+
<div
43+
tabindex="0"
44+
class="card card-sm dropdown-content bg-base-100 rounded-box z-1 w-64 shadow-sm"
45+
>
46+
<div tabindex="0" class="card-body">
47+
<h2 class="card-title">You needed more info?</h2>
48+
<p>Here is a description!</p>
49+
</div>
50+
</div>
51+
</div> -->
52+
</div>
53+
</template>
54+
55+
<script setup lang="ts">
56+
const previewStore = usePreviewStore();
57+
</script>

0 commit comments

Comments
 (0)