Skip to content

Commit e5fe10e

Browse files
codercatdevcodercatdev
committed
post working
1 parent 8081733 commit e5fe10e

File tree

10 files changed

+244
-81
lines changed

10 files changed

+244
-81
lines changed

‎apps/codingcatdev/src/content/post/install-tailwindcss-in-svelte-with-1-command.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ slug: install-tailwindcss-in-svelte-with-1-command
1212
start: November 28, 2022
1313
title: Install Tailwindcss in Svelte with 1 command
1414
---
15+
16+
<script lang="ts">
17+
import Button from '$lib/components/content/Button.svelte'
18+
</script>
19+
20+
<Button />
21+
1522
Here is how to install Tailwindcss in Svelte
1623

1724
```bash
@@ -59,7 +66,7 @@ module.exports = config;
5966

6067
## Update ./svelte.config.js
6168

62-
Updates to add the preprocess requirement.
69+
Updates to add the preprocess requirement.
6370

6471
```jsx
6572
import preprocess from 'svelte-preprocess';
@@ -110,4 +117,4 @@ Includes the global files
110117
</script>
111118

112119
<slot />
113-
```
120+
```

‎apps/codingcatdev/src/lib/components/content/Button.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script lang="ts">
2+
let count = 0;
3+
</script>
4+
5+
<button class="bcu-button variant-filled-primary" on:click={() => count++}>{count}</button>

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/+layout.server.ts

Lines changed: 83 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,83 @@
1-
import { listContent, parseModules } from '$lib/server/content';
2-
3-
export const load = (async () => {
4-
5-
const courseModules = import.meta.glob(['../../../content/course/*/*.md']);
6-
const tutorialModules = import.meta.glob(['../../../content/tutorial/*.md']);
7-
const podcastModules = import.meta.glob(['../../../content/podcast/*.md']);
8-
const postModules = import.meta.glob(['../../../content/post/*.md']);
9-
10-
const courseItems = await parseModules(courseModules);
11-
const tutorialItems = await parseModules(tutorialModules);
12-
const podcastItems = await parseModules(podcastModules);
13-
const postItems = await parseModules(postModules);
14-
15-
return {
16-
course: await (await listContent({ contentItems: courseItems, limit: 3 })).content,
17-
tutorial: await (await listContent({ contentItems: tutorialItems, limit: 3 })).content,
18-
podcast: await (await listContent({ contentItems: podcastItems, limit: 3 })).content,
19-
post: await (await listContent({ contentItems: postItems, limit: 3 })).content
20-
};
21-
});
1+
import { compile } from 'mdsvex';
2+
import { readFileSync } from 'fs';
3+
import { fileURLToPath } from 'url';
4+
import { error } from '@sveltejs/kit';
5+
import { ContentType, type Author, type Content, type Podcast, type Sponsor } from '$lib/types';
6+
import { getContentBySlug, listContent, parseModules } from '$lib/server/content';
7+
8+
9+
export const prerender = true;
10+
11+
export const load = (async (params) => {
12+
try {
13+
const file = fileURLToPath(new URL(`./${params.url.pathname}/+page.md`, import.meta.url));
14+
const md = readFileSync(file, 'utf8');
15+
const transformed = await compile(md);
16+
const content = transformed?.data?.fm as Content & Podcast | undefined;
17+
const start = content?.start && new Date(content.start);
18+
console.log(start)
19+
if (start && start < new Date()) {
20+
21+
const courseModules = import.meta.glob(['../../../content/course/*/*.md']);
22+
const tutorialModules = import.meta.glob(['../../../content/tutorial/*.md']);
23+
const podcastModules = import.meta.glob(['../../../content/podcast/*.md']);
24+
const postModules = import.meta.glob(['../../../content/post/*.md']);
25+
26+
const courseItems = await parseModules(courseModules);
27+
const tutorialItems = await parseModules(tutorialModules);
28+
const podcastItems = await parseModules(podcastModules);
29+
const postItems = await parseModules(postModules);
30+
31+
const guestModules = import.meta.glob(['../../../../../content/guest/*.md']);
32+
const guestItems = await parseModules(guestModules);
33+
34+
const guests: Author[] = [];
35+
if (content?.guests?.length) {
36+
for (const guestSlug of content.guests) {
37+
const guest = await getContentBySlug({ contentItems: guestItems, slug: guestSlug }) as unknown as Author;
38+
if (guest)
39+
guests.push(guest);
40+
}
41+
}
42+
43+
const authorModules = import.meta.glob(['../../../../../content/author/*.md']);
44+
const authorItems = await parseModules(authorModules);
45+
46+
const authors: Author[] = [];
47+
48+
for (const authorSlug of ['alex-patterson', 'brittney-postma']) {
49+
const author = await getContentBySlug({ contentItems: authorItems, slug: authorSlug }) as unknown as Author;
50+
if (author)
51+
authors.push(author);
52+
}
53+
54+
const sponsorModules = import.meta.glob(['../../../../../content/sponsor/*.md']);
55+
const sponsorItems = await parseModules(sponsorModules);
56+
57+
const sponsors: Sponsor[] = [];
58+
if (content?.sponsors?.length) {
59+
for (const sponsorSlug of content.sponsors) {
60+
const sponsor = await getContentBySlug({ contentItems: sponsorItems, slug: sponsorSlug }) as unknown as Sponsor;
61+
if (sponsor)
62+
sponsors.push(sponsor);
63+
}
64+
}
65+
66+
return {
67+
content,
68+
contentType: ContentType.post,
69+
course: await (await listContent({ contentItems: courseItems, limit: 3 })).content,
70+
tutorial: await (await listContent({ contentItems: tutorialItems, limit: 3 })).content,
71+
podcast: await (await listContent({ contentItems: podcastItems, limit: 3 })).content,
72+
post: await (await listContent({ contentItems: postItems, limit: 3 })).content
73+
};
74+
75+
} else {
76+
throw error(404)
77+
}
78+
}
79+
catch (e) {
80+
console.error(e)
81+
throw error(404)
82+
}
83+
})

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/+layout.svelte

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import RecentPostsList from './RecentPostsList.svelte';
44
import { ContentType } from '$lib/types';
55
import { storeCurrentUrl } from '$lib/stores/stores';
6+
import Content from './Content.svelte';
67
78
export let data;
89
</script>
@@ -14,7 +15,9 @@
1415
slotSidebarRight="hidden xl:block"
1516
>
1617
<!-- Page Content -->
17-
<slot />
18+
<Content {data}>
19+
<slot />
20+
</Content>
1821
<svelte:fragment slot="bcu-app-shell-sidebar-right">
1922
<!-- Div takes up same room as fixed -->
2023
<div class="w-[19.5rem] xl:w-96" />

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/Content.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@
123123
<!-- Main Content -->
124124
<section class="flex flex-col flex-grow w-full gap-2 markdown md:gap-8">
125125
<CopyCodeInjector>
126-
{@html data.content.html}
126+
<slot />
127127
</CopyCodeInjector>
128128
</section>
129129

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/old+layout.server.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { listContent, parseModules } from '$lib/server/content';
2+
3+
export const load = (async () => {
4+
5+
const courseModules = import.meta.glob(['../../../content/course/*/*.md']);
6+
const tutorialModules = import.meta.glob(['../../../content/tutorial/*.md']);
7+
const podcastModules = import.meta.glob(['../../../content/podcast/*.md']);
8+
const postModules = import.meta.glob(['../../../content/post/*.md']);
9+
10+
const courseItems = await parseModules(courseModules);
11+
const tutorialItems = await parseModules(tutorialModules);
12+
const podcastItems = await parseModules(podcastModules);
13+
const postItems = await parseModules(postModules);
14+
15+
return {
16+
course: await (await listContent({ contentItems: courseItems, limit: 3 })).content,
17+
tutorial: await (await listContent({ contentItems: tutorialItems, limit: 3 })).content,
18+
podcast: await (await listContent({ contentItems: podcastItems, limit: 3 })).content,
19+
post: await (await listContent({ contentItems: postItems, limit: 3 })).content
20+
};
21+
});

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/post/[slug]/+page.server.ts

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

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/post/[slug]/+page.svelte

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

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/post/install-tailwindcss-in-svelte-with-1-command/+page.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
---
2+
authors:
3+
- alex-patterson
4+
cloudinary_convert: false
5+
cover: https://media.codingcat.dev/image/upload/v1669730327/main-codingcatdev-photo/Install_Tailwind_in_Svelte.png
6+
devto: https://dev.to/codingcatdev/install-tailwindcss-in-svelte-with-1-command-2gnm
7+
excerpt: Stop using the 5 step method and remember the npx command to install tailwind.
8+
hashnode: https://hashnode.codingcat.dev/post-install-tailwindcss-in-svelte-with-1-command
9+
preview: https://codingcat.dev/api/preview?secret=7tjQhb1qQlS3FtyV3b0I&selectionType=post&selectionSlug=install-tailwindcss-in-svelte-with-1-command&_id=775d2645f9f84ad69e01da40be7c96b0
10+
published: published
11+
slug: install-tailwindcss-in-svelte-with-1-command
12+
start: November 28, 2022
13+
title: Install Tailwindcss in Svelte with 1 command
14+
---
15+
16+
<script lang="ts">
17+
import Button from '$lib/components/content/Button.svelte'
18+
</script>
19+
20+
<Button />
21+
22+
Here is how to install Tailwindcss in Svelte
23+
24+
```bash
25+
npx svelte-add tailwindcss
26+
```
27+
28+
Yep thats it you don’t need anything else :D
29+
30+
Okay so what does this actually do?
31+
32+
![Untitled](https://media.codingcat.dev/image/upload/v1670411648/main-codingcatdev-photo/1b1852c1-dbaf-450e-b3bc-95c72e1cbc25.png)
33+
34+
## Update ./package.json
35+
36+
Includes the required development packages.
37+
38+
```jsx
39+
"devDependencies": {
40+
...
41+
"postcss": "^8.4.14",
42+
"postcss-load-config": "^4.0.1",
43+
"svelte-preprocess": "^4.10.7",
44+
"autoprefixer": "^10.4.7",
45+
"tailwindcss": "^3.1.5"
46+
}
47+
```
48+
49+
## Add ./tailwind.config.json
50+
51+
Adds the correct configuration for Tailwind, which adds all of the necessary content file types.
52+
53+
```jsx
54+
const config = {
55+
content: ['./src/**/*.{html,js,svelte,ts}'],
56+
57+
theme: {
58+
extend: {}
59+
},
60+
61+
plugins: []
62+
};
63+
64+
module.exports = config;
65+
```
66+
67+
## Update ./svelte.config.js
68+
69+
Updates to add the preprocess requirement.
70+
71+
```jsx
72+
import preprocess from 'svelte-preprocess';
73+
74+
...
75+
preprocess: [
76+
preprocess({
77+
postcss: true
78+
})
79+
]
80+
...
81+
```
82+
83+
## Add ./postcss.config.cjs
84+
85+
```jsx
86+
const tailwindcss = require('tailwindcss');
87+
const autoprefixer = require('autoprefixer');
88+
89+
const config = {
90+
plugins: [
91+
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
92+
tailwindcss(),
93+
//But others, like autoprefixer, need to run after,
94+
autoprefixer
95+
]
96+
};
97+
98+
module.exports = config;
99+
```
100+
101+
## Add ./src/app.postcss
102+
103+
Includes the global files
104+
105+
```css
106+
/* Write your global styles here, in PostCSS syntax */
107+
@tailwind base;
108+
@tailwind components;
109+
@tailwind utilities;
110+
```
111+
112+
## Add ./src/routes/+layout.svelte
113+
114+
```jsx
115+
<script>
116+
import '../app.postcss';
117+
</script>
118+
119+
<slot />
120+
```

‎apps/codingcatdev/src/routes/+layout.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
meta.article.modifiedTime = content?.updated
107107
? new Date(content?.updated).toISOString()
108108
: content?.start
109-
? content?.start.toISOString()
109+
? new Date(content?.start).toISOString()
110110
: new Date().toISOString();
111111
meta.article.author = `${authors?.[0]?.name || 'Alex Patterson'}`;
112112
// Twitter

0 commit comments

Comments
 (0)