Skip to content

Commit a23d799

Browse files
samcavusamcavu
committed
• new hidden features page to hold content styling demos and other possible UI features
• updated typographys • other bits of page content • 🌟 utils for fetching articles
1 parent 74c017f commit a23d799

File tree

10 files changed

+196
-126
lines changed

10 files changed

+196
-126
lines changed

‎.data/content/contents.sqlite

0 Bytes
Binary file not shown.

‎assets/css/typography.css

+16
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,28 @@ h2 {
1010
@apply text-xl font-bold;
1111
}
1212

13+
h3 {
14+
@apply text-lg font-bold;
15+
}
16+
1317
p + * {
1418
@apply mt-4;
1519
}
1620

21+
p + p {
22+
@apply mt-2;
23+
}
24+
25+
a.button-link + a.button-link {
26+
@apply ml-2;
27+
}
28+
1729
/** Links */
1830

1931
a {
2032
color: rgb(0 0 0/1);
33+
}
34+
35+
.list-inside {
36+
list-style-position: inside;
2137
}

‎components/molecules/NavBar.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<NuxtLink
66
:to="link.path"
77
active-class="font-bold"
8-
class="mr-6 hover:text-blue-600 hover:transition-all hover:duration-300">
8+
class="mr-6 hover:text-blue-600 hover:transition-all hover:duration-300"
9+
:class="{ 'text-transparent dark:!text-transparent dark:hover:!text-gray-300': link.hidden }">
910
{{ link.name }}
1011
</NuxtLink>
1112
</li>
@@ -46,6 +47,7 @@ const appConfig = useAppConfig()
4647
const links = [
4748
{ name: 'Home', path: '/' },
4849
{ name: 'Articles', path: '/articles' },
50+
{ name: 'Features', path: '/features', hidden: true },
4951
];
5052
</script>
5153

‎components/organisms/ButtonLink.vue

+41-8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
<template>
2+
<NuxtLink :to="href" :external="external"
3+
class="inline-flex items-center text-white no-underline rounded border cursor-pointer button-link active:transform active:translate-y-0.5 active:translate-x-0.5"
4+
:class="buttonType"
5+
>
6+
<span class="flex items-center px-2 py-1">
7+
<Icon v-if="icon" :name="icon" class="w-4 h-4" />
8+
</span>
9+
<span class="px-2 py-1 h-full text-sm border-l border-l-gray-400 dark:border-l-gray-700">
10+
<slot />
11+
</span>
12+
</NuxtLink>
13+
</template>
14+
115
<script setup>
216
defineProps({
317
href: {
@@ -12,14 +26,33 @@ defineProps({
1226
type: String,
1327
default: '',
1428
},
29+
buttonType: {
30+
type: String,
31+
default: 'primary',
32+
},
33+
supportDarkMode: {
34+
type: Boolean,
35+
default: true,
36+
},
1537
})
1638
</script>
1739

18-
<template>
19-
<span class="not-prose">
20-
<NuxtLink :to="href" :external="external" class="inline-flex items-center gap-1 text-white bg-gray-800 dark:bg-gray-200 dark:text-gray-950 px-3 py-1 rounded no-underline">
21-
<Icon v-if="icon" :name="icon" class="w-4 h-4" />
22-
<ContentSlot :use="$slots.default" unwrap="p" />
23-
</NuxtLink>
24-
</span>
25-
</template>
40+
<style scoped>
41+
a.primary {
42+
@apply bg-gray-800 border-gray-400;
43+
@apply dark:border-gray-700 dark:bg-gray-200 dark:text-gray-950;
44+
@apply active:bg-gray-700 dark:active:bg-gray-300;
45+
}
46+
47+
a.blue {
48+
@apply bg-[#2E51ED] border-blue-400;
49+
@apply dark:border-blue-700 dark:bg-blue-200 dark:text-blue-950;
50+
@apply active:bg-[#3A62EE] dark:active:bg-blue-300;
51+
}
52+
53+
a.purple {
54+
@apply bg-purple-800 border-purple-400;
55+
@apply dark:border-purple-700 dark:bg-purple-200 dark:text-purple-950;
56+
@apply active:bg-purple-700 dark:active:bg-purple-300;
57+
}
58+
</style>

‎components/organisms/MarkdownBlock.vue

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
<!-- This component is used to show Markdown code block examples -->
22
<template>
3-
<pre class="max-w-full overflow-x-auto text-gray-700 dark:text-gray-300"><ContentSlot :use="$slots.default" unwrap="p" /></pre>
3+
<pre class="overflow-x-auto max-w-full text-gray-700 dark:text-gray-300">
4+
<slot :use="$slots.default" unwrap="p" />
5+
</pre>
46
</template>
7+
8+
<script setup>
9+
import { useSlots } from 'vue'
10+
11+
const slots = useSlots()
12+
13+
console.log(slots)
14+
</script>

‎pages/articles/[slug].vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
<p v-html="article.content" class="max-w-none prose dark:prose-invert dark:text-white"></p>
77
<div v-if="article.citations?.length" class="mt-8">
88
<h3>Citations</h3>
9-
<ul>
9+
<ul class="list-disc list-inside">
1010
<li v-for="citation in article.citations" :key="citation">
11-
<a :href="citation" target="_blank" rel="noopener noreferrer">
12-
{{ citation }}
11+
<a :href="citation" target="_blank" rel="noopener noreferrer" class="pb-1 text-blue-500 border border-t-0 border-r-0 border-l-0 border-blue-500 border-b-1 hover:border-0">
12+
[ {{ citation }} ]
1313
</a>
1414
</li>
1515
</ul>

‎pages/articles/index.vue

+9-13
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,20 @@
55
<p>This is all the articles we've got for now.</p>
66

77
<OrganismsArticlesList v-if="articles" :articles="articles" />
8+
9+
<footer class="mt-12 text-center">
10+
<p>
11+
Thanks for reading
12+
</p>
13+
</footer>
814
</div>
915
</main>
1016
</template>
1117

1218
<script setup lang="ts">
13-
interface Article {
14-
id: number
15-
slug: string
16-
title: string
17-
description: string
18-
content: string
19-
citations: string[]
20-
}
19+
import { fetchArticles } from '~/utils/fetchArticles';
20+
21+
const articles = await fetchArticles();
2122
2223
definePageMeta({
2324
layout: 'default'
@@ -28,9 +29,4 @@ useSeoMeta({
2829
description: 'This is a custom description for Content Wind about page.',
2930
ogImage: 'https://fastly.picsum.photos/id/866/536/354.jpg?hmac=tGofDTV7tl2rprappPzKFiZ9vDh5MKj39oa2D--gqhA'
3031
})
31-
32-
// fetch articles from public/articles.json with proper typing
33-
const { data: articles } = await useFetch<Article[]>('/articles.json', {
34-
transform: (data) => data as Article[]
35-
})
3632
</script>

‎pages/features.vue

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<main class="layout layout-main">
3+
<div>
4+
<h1>Selfie dot</h1>
5+
6+
<p class="text-lg">You found a special features page. This contains UI elements that are used in the project.</p>
7+
8+
<section>
9+
<h2>Features</h2>
10+
<p>This project is built with Nuxt 3, Nuxt Content, Nuxt UI and TailwindCSS.<br/>Some of the features are:</p>
11+
<ul class="list-disc list-inside">
12+
<li>Write pages in Markdown</li>
13+
<li>Use layouts in Markdown pages</li>
14+
<li>Enjoy meta tag generation</li>
15+
<li>Generated navigation from pages</li>
16+
<li>Leverage TailwindCSS Typography</li>
17+
<li>Switch between light &amp; dark mode</li>
18+
<li>Access 100,000 icons from 100+ icon sets</li>
19+
<li>Highlight code blocks with Shiki</li>
20+
<li>Create Vue components and use them in Markdown</li>
21+
<li>Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc.</li>
22+
<li>Live edit on Nuxt Studio</li>
23+
</ul>
24+
</section>
25+
26+
<section>
27+
<h2>Cool Buttons</h2>
28+
<p>
29+
You can use the button link component to create a button with an icon.
30+
</p>
31+
<p>
32+
<OrganismsButtonLink
33+
external
34+
href=""
35+
icon="carbon:flash"
36+
>
37+
Thunder !
38+
</OrganismsButtonLink>
39+
40+
<OrganismsButtonLink
41+
external
42+
href=""
43+
icon="carbon:rocket"
44+
button-type="purple"
45+
>
46+
Rockets baby
47+
</OrganismsButtonLink>
48+
49+
<OrganismsButtonLink
50+
external
51+
href=""
52+
icon="carbon:palm-tree"
53+
button-type="blue"
54+
>
55+
Palms up
56+
</OrganismsButtonLink>
57+
58+
<OrganismsButtonLink
59+
external
60+
href=""
61+
icon="carbon:bat"
62+
>
63+
Batman
64+
</OrganismsButtonLink>
65+
</p>
66+
</section>
67+
68+
<section>
69+
<h2>Content</h2>
70+
<p>Interesting styling for content.</p>
71+
72+
<h3>Markdown</h3>
73+
<div> <!-- TODO: content within a div like this should adhere to tighter spacing between child elements -->
74+
<p>Open a terminal and run the following command:</p>
75+
<OrganismsMarkdownBlock>bash npx nuxi init -t themes/content-wind my-website</OrganismsMarkdownBlock>
76+
<p>Follow the instructions in the terminal and you are ready to go 🚀</p>
77+
</div>
78+
</section>
79+
80+
<footer class="mt-12 text-center">
81+
<p>
82+
Thanks for visiting
83+
</p>
84+
</footer>
85+
</div>
86+
</main>
87+
</template>
88+
89+
<script setup lang="ts">
90+
definePageMeta({
91+
layout: 'default'
92+
})
93+
94+
useSeoMeta({
95+
title: 'Selfie dot',
96+
description: 'Content you can read in less than 3-minutes.'
97+
})
98+
</script>

0 commit comments

Comments
 (0)