swadhin / opencodehub public

Switch to Tailwind Typography for properly styled Markdown

swadhinbiswas committed 10 months ago
7ff8907
1 parent 96f3b32
commit 7ff8907
4 files changed
+80 -7
Showing 4 changed files+80-7
package-lock.jsonpackage.jsonsrc/pages/[owner]/[repo]/blob/[branch]/[...path].astrotailwind.config.mjs
▼package-lock.json
+28-1
@@ -84,6 +84,7 @@
84
84
},
85
85
"devDependencies": {
86
86
"@playwright/test": "^1.57.0",
87
+ "@tailwindcss/typography": "^0.5.19",
87
88
"@types/bcryptjs": "^2.4.6",
88
89
"@types/better-sqlite3": "^7.6.11",
89
90
"@types/dockerode": "^3.3.29",
@@ -7141,6 +7142,33 @@
7141
7142
"dev": true,
7142
7143
"license": "MIT"
7143
7144
},
7145
+ "node_modules/@tailwindcss/typography": {
7146
+ "version": "0.5.19",
7147
+ "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
7148
+ "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
7149
+ "dev": true,
7150
+ "license": "MIT",
7151
+ "dependencies": {
7152
+ "postcss-selector-parser": "6.0.10"
7153
+ },
7154
+ "peerDependencies": {
7155
+ "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
7156
+ }
7157
+ },
7158
+ "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
7159
+ "version": "6.0.10",
7160
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
7161
+ "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
7162
+ "dev": true,
7163
+ "license": "MIT",
7164
+ "dependencies": {
7165
+ "cssesc": "^3.0.0",
7166
+ "util-deprecate": "^1.0.2"
7167
+ },
7168
+ "engines": {
7169
+ "node": ">=4"
7170
+ }
7171
+ },
7144
7172
"node_modules/@types/aws-lambda": {
7145
7173
"version": "8.10.159",
7146
7174
"license": "MIT"
@@ -12782,7 +12810,6 @@
12782
12810
"node_modules/picomatch": {
12783
12811
"version": "4.0.3",
12784
12812
"license": "MIT",
12785
- "peer": true,
12786
12813
"engines": {
12787
12814
"node": ">=12"
12788
12815
},
12789
12816
▼package.json
+1-0
@@ -93,6 +93,7 @@
93
93
},
94
94
"devDependencies": {
95
95
"@playwright/test": "^1.57.0",
96
+ "@tailwindcss/typography": "^0.5.19",
96
97
"@types/bcryptjs": "^2.4.6",
97
98
"@types/better-sqlite3": "^7.6.11",
98
99
"@types/dockerode": "^3.3.29",
99
100
▼src/pages/[owner]/[repo]/blob/[branch]/[...path].astro
+50-5
@@ -22,15 +22,60 @@ import {
22
22
import { Button } from "@/components/ui/button";
23
23
import { createHighlighter } from 'shiki';
24
24
import { marked } from 'marked';
25
-import "github-markdown-css/github-markdown-dark.css";
25
+
26
+// Configure marked
27
+marked.use({
28
+ gfm: true,
29
+ breaks: true
30
+});
26
31
27
32
const { owner: ownerName, repo: repoName, branch, path } = Astro.params;
28
33
const db = getDatabase();
29
34
30
-// 1. Fetch Repo & Owner
31
-const user = await db.query.users.findFirst({
32
- where: eq(schema.users.username, ownerName!),
33
-});
35
+// ... (code omitted)
36
+
37
+if (!fileData.isBinary) {
38
+ // Determine language
39
+ const extension = currentPath.split(".").pop()?.toLowerCase() || "";
40
+ let lang = "text";
41
+ const commonLangs: Record<string, string> = {
42
+ ts: "typescript",
43
+ tsx: "tsx",
44
+ js: "javascript",
45
+ jsx: "jsx",
46
+ json: "json",
47
+ css: "css",
48
+ html: "html",
49
+ md: "markdown",
50
+ markdown: "markdown",
51
+ py: "python",
52
+ go: "go",
53
+ rs: "rust",
54
+ java: "java",
55
+ c: "c",
56
+ cpp: "cpp",
57
+ h: "c",
58
+ hpp: "cpp",
59
+ astro: "astro",
60
+ yml: "yaml",
61
+ yaml: "yaml",
62
+ toml: "toml",
63
+ sh: "shell",
64
+ bash: "shell",
65
+ zsh: "shell",
66
+ sql: "sql",
67
+ php: "php"
68
+ };
69
+
70
+ if (commonLangs[extension]) {
71
+ lang = commonLangs[extension];
72
+ }
73
+
74
+ if (lang === "markdown") {
75
+ isMarkdown = true;
76
+ markdownHtml = await marked.parse(fileData.content);
77
+ } else {
78
+ // ...
34
79
35
80
if (!user) return Astro.redirect("/404");
36
81
37
82
▼tailwind.config.mjs
+1-1
@@ -127,5 +127,5 @@ export default {
127
127
},
128
128
},
129
129
},
130
- plugins: [require("tailwindcss-animate")],
130
+ plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
131
131
};
132
132