website

#astro#js#html#css

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

41486be — pyrossh 2024-05-06T22:02:23+05:30 
remove unocss

Generated files not shown: package-lock.json

Files changed (16) hide show
  1. package.json +7 -10
  2. postcss.config.js +6 -0
  3. src/app.css +3 -0
  4. src/app.html +1 -1
  5. src/hooks.server.js +0 -9
  6. src/lib/components/Footer.svelte +4 -3
  7. src/lib/components/Header.svelte +2 -2
  8. src/lib/components/Slide.svelte +2 -1
  9. src/lib/components/SocialLinks.svelte +8 -4
  10. src/routes/+layout.svelte +1 -0
  11. src/routes/+page.svelte +16 -15
  12. src/routes/cv/+page.svelte +7 -7
  13. src/routes/posts/[slug]/+page.svelte +1 -88
  14. tailwind.config.js +72 -0
  15. uno.config.ts +0 -24
  16. vite.config.js +0 -4
package.json CHANGED
@@ -15,33 +15,30 @@
15
15
  "test:integration": "playwright test",
16
16
  "test:unit": "vitest"
17
17
  },
18
- "dependencies": {
19
- "@unocss/reset": "^0.58.5",
20
- "remark-github": "^12.0.0",
21
- "shiki": "^1.1.7"
22
- },
23
18
  "devDependencies": {
24
- "@iconify/json": "^2.2.185",
19
+ "@iconify/svelte": "^4.0.2",
25
20
  "@playwright/test": "^1.28.1",
26
21
  "@poppanator/sveltekit-svg": "^4.2.1",
27
22
  "@sveltejs/adapter-static": "^3.0.1",
28
23
  "@sveltejs/enhanced-img": "^0.2.0",
29
24
  "@sveltejs/kit": "2.5.1",
25
+ "@tailwindcss/typography": "^0.5.13",
30
26
  "@types/eslint": "8.56.0",
31
- "@unocss/svelte-scoped": "^0.58.5",
27
+ "autoprefixer": "^10.4.19",
32
- "@unocss/transformer-directives": "^0.58.5",
33
- "@unocss/transformer-variant-group": "^0.58.5",
34
28
  "eslint": "^8.56.0",
35
29
  "eslint-config-prettier": "^9.1.0",
36
30
  "eslint-plugin-svelte": "^2.36.0-next.4",
37
31
  "mdsvex": "^0.11.0",
32
+ "postcss": "^8.4.38",
38
33
  "prettier": "^3.1.1",
39
34
  "prettier-plugin-svelte": "^3.1.2",
35
+ "remark-github": "^12.0.0",
36
+ "shiki": "^1.1.7",
40
37
  "super-sitemap": "^0.14.14",
41
38
  "svelte": "4.2.11",
42
39
  "svelte-check": "^3.6.0",
40
+ "tailwindcss": "^3.4.3",
43
41
  "typescript": "^5.0.0",
44
- "unocss": "^0.58.5",
45
42
  "vite": "^5.0.3",
46
43
  "vitest": "^1.2.0"
47
44
  }
postcss.config.js ADDED
@@ -0,0 +1,6 @@
1
+ export default {
2
+ plugins: {
3
+ tailwindcss: {},
4
+ autoprefixer: {},
5
+ },
6
+ }
src/app.css ADDED
@@ -0,0 +1,3 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
src/app.html CHANGED
@@ -13,7 +13,7 @@
13
13
  <meta charset="utf-8" />
14
14
  <link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
15
15
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
16
- %unocss-svelte-scoped.global% %sveltekit.head%
16
+ %sveltekit.head%
17
17
  </head>
18
18
 
19
19
  <body data-sveltekit-preload-data="hover">
src/hooks.server.js DELETED
@@ -1,9 +0,0 @@
1
- import { sequence } from '@sveltejs/kit/hooks';
2
-
3
- export const handle = sequence(async function _handle({ event, resolve }) {
4
- const response = await resolve(event, {
5
- transformPageChunk: ({ html }) =>
6
- html.replace('%unocss-svelte-scoped.global%', 'unocss_svelte_scoped_global_styles')
7
- });
8
- return response;
9
- });
src/lib/components/Footer.svelte CHANGED
@@ -1,16 +1,17 @@
1
1
  <script>
2
+ import Icon from '@iconify/svelte';
2
3
  import SocialLinks from './SocialLinks.svelte';
3
4
  </script>
4
5
 
5
- <footer class="flex w-full flex-1 flex-row justify-center text-xl leading-6 bg-black-lighter">
6
+ <footer class="flex w-full flex-1 flex-row justify-center text-xl leading-6 bg-black">
6
7
  <div class="flex flex-row flex-1 py-4 px-3 max-w-5xl">
7
8
  <div class="flex-1">
8
9
  <SocialLinks />
9
10
  </div>
10
11
  <div class="flex">
11
- <span class="text-base text-#8D8D93 hover:no-underline"> powered by </span>
12
+ <span class="text-base text-[#8D8D93] hover:no-underline"> powered by </span>
12
13
  <a class="mx-2 -mt-3" href="https://kit.svelte.dev" target="_blank" rel="noopener noreferrer">
13
- <div class="i-logos:svelte-kit w-24 h-12"></div>
14
+ <Icon icon="logos:svelte-kit" width="120px" height="50px" />
14
15
  </a>
15
16
  </div>
16
17
  </div>
src/lib/components/Header.svelte CHANGED
@@ -1,11 +1,11 @@
1
1
  <header>
2
2
  <nav class="flex w-full flex-1 flex-row justify-center bg-black font-mono text-lg">
3
3
  <div class="flex flex-row flex-1 items-center p-3 max-w-5xl">
4
- <a class="flex text-#f1fa8c pr-4 hover:no-underline ml-0 pl-0" href="/">
4
+ <a class="flex text-[#f1fa8c] pr-4 hover:no-underline ml-0 pl-0" href="/">
5
5
  <span class="mr-1 font-logo font-bold">木</span> pyrossh
6
6
  </a>
7
7
  <div
8
- class="flex flex-row flex-1 items-center text-white sm:[&>a]:mx-1 [&>a]:px-2 [&>a:hover]:bg-gray-600 data-current:child:bg-gray-600"
8
+ class="flex flex-row flex-1 items-center text-white sm:[&>a]:mx-1 [&>a]:px-2 [&>a:hover]:underline [&>a]:decoration-2 [&>a]:underline-offset-8 [&>a:hover]:decoration-[#f1fa8c] data-current:child:bg-gray-600"
9
9
  >
10
10
  <div>|</div>
11
11
  <a href="/cv" rel="prefetch"> cv </a>
src/lib/components/Slide.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script>
2
+ import Icon from '@iconify/svelte';
2
3
  // let { title, link, children } = $props();
3
4
  export let title, link;
4
5
  </script>
@@ -13,7 +14,7 @@
13
14
  rel="noopener noreferrer"
14
15
  >
15
16
  <slot name="icon">
16
- <div class="i-mdi-github mr-2" />
17
+ <Icon icon="mdi-github" class="mr-2" width="36" />
17
18
  </slot>
18
19
  <h2>{title}</h2>
19
20
  </a>
src/lib/components/SocialLinks.svelte CHANGED
@@ -1,11 +1,15 @@
1
+ <script>
2
+ import Icon from '@iconify/svelte';
3
+ </script>
4
+
1
- <div class="flex hover:no-underline text-white child:mx-2 sm:child:ml-5">
5
+ <div class="flex hover:no-underline text-white *:mx-2">
2
6
  <a
3
7
  href="https://linkedin.com/in/pyrossh"
4
8
  title="My LinkedIn profile"
5
9
  target="_blank"
6
10
  rel="noopener noreferrer"
7
11
  >
8
- <div class="i-mdi-linkedin w-8 h-8 mr-2" />
12
+ <Icon class="" icon="mdi:linkedin" width="36" />
9
13
  </a>
10
14
  <a
11
15
  href="https://github.com/pyrossh"
@@ -13,9 +17,9 @@
13
17
  target="_blank"
14
18
  rel="noopener noreferrer"
15
19
  >
16
- <div class="i-mdi-github w-8 h-8 mr-2" />
20
+ <Icon icon="mdi:github" width="36" />
17
21
  </a>
18
22
  <a href="mailto:[email protected]" title="My email" target="_blank" rel="noopener noreferrer">
19
- <div class="i-mdi-email-outline w-8 h-8 mr-2" />
23
+ <Icon icon="mdi:email-outline" width="36" />
20
24
  </a>
21
25
  </div>
src/routes/+layout.svelte CHANGED
@@ -2,6 +2,7 @@
2
2
  import { getStores } from '$app/stores';
3
3
  import Footer from '$lib/components/Footer.svelte';
4
4
  import Header from '$lib/components/Header.svelte';
5
+ import '../app.css';
5
6
  // let { children } = $props();
6
7
 
7
8
  const { page } = getStores();
src/routes/+page.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script>
2
+ import Icon from '@iconify/svelte';
2
3
  import Slide from '$lib/components/Slide.svelte';
3
4
  import PlayStoreIcon from '$lib/assets/icons/playstore.svg?component';
4
5
  import AppStoreIcon from '$lib/assets/icons/appstore.svg?component';
@@ -49,7 +50,7 @@
49
50
  </p>
50
51
  <div>
51
52
  <div class="flex items-center mt-8 mb-4">
52
- <div class="i-ant-design:project-outlined text-pink-800 mr-2" />
53
+ <Icon class="text-pink-800 mr-2" icon="ant-design:project-outlined" width="36" />
53
54
  <h2>Projects</h2>
54
55
  </div>
55
56
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
@@ -65,7 +66,7 @@
65
66
  </div>
66
67
  <p>
67
68
  木 Personal website of pyrossh. Built with
68
- <span class="children:underline">
69
+ <span class="*:underline">
69
70
  <a href="https://kit.svelte.dev/" target="_blank" rel="noopener noreferrer"
70
71
  >sveltekit</a
71
72
  >,
@@ -107,10 +108,10 @@
107
108
  </Slide>
108
109
  <section>
109
110
  <div class="flex items-center">
110
- <div class="i-eos-icons:hardware-circuit text-green-800 mr-2" />
111
+ <Icon class="text-green-800 mr-2" icon="eos-icons:hardware-circuit" width="36" />
111
112
  <h2>Hardware</h2>
112
113
  </div>
113
- <ul class="grid gap-2 grid-cols-1 text-center mt-4 children:(bg-gray-200 p-1)">
114
+ <ul class="grid gap-2 grid-cols-1 text-center mt-4 *:bg-gray-200 *:p-1">
114
115
  <li>Macbook Pro M3 Laptop</li>
115
116
  <li>LG 27 inch Ultrafine Ergo 4K Monitor</li>
116
117
  <li>Logitech Mx Keys Mini Keyboard</li>
@@ -120,10 +121,10 @@
120
121
  </section>
121
122
  <section>
122
123
  <div class="flex items-center">
123
- <div class="i-eos-icons:software-outlined text-blue-800 mr-2" />
124
+ <Icon class="text-blue-800 mr-2" icon="eos-icons:software-outlined" width="36" />
124
125
  <h2>Software</h2>
125
126
  </div>
126
- <ul class="grid gap-2 grid-cols-3 text-center mt-4 children:(bg-gray-200 p-2 pb-4)">
127
+ <ul class="grid gap-2 grid-cols-3 text-center mt-4 *:bg-gray-200 *:p-2 *:pb-4">
127
128
  <li>
128
129
  <a
129
130
  class="soft-link"
@@ -216,10 +217,10 @@
216
217
  </section>
217
218
  <section>
218
219
  <div class="flex items-center">
219
- <div class="i-mdi:file-tree-outline text-amber-900 mr-2" />
220
+ <Icon class="text-amber-900 mr-2" icon="mdi:file-tree-outline" width="36" />
220
221
  <h2>Interests</h2>
221
222
  </div>
222
- <ul class="grid gap-2 grid-cols-3 text-center mt-4 children:(bg-slate-100 p-1)">
223
+ <ul class="grid gap-2 grid-cols-3 text-center mt-4 *:bg-slate-100 *:p-1">
223
224
  <li>HTML</li>
224
225
  <li>CSS</li>
225
226
  <li>Tailwind</li>
@@ -236,11 +237,11 @@
236
237
  </section>
237
238
  <section>
238
239
  <div class="flex items-center">
239
- <div class="i-mdi-contact-outline text-cyan-950 mr-2" />
240
+ <Icon class="text-cyan-950 mr-2" icon="mdi-contact-outline" width="36" />
240
241
  <h2>Contact</h2>
241
242
  </div>
242
243
  <ul
243
- class=" grid gap-2 grid-cols-1 text-left mt-4 children:(bg-slate-100 p-2 flex flex-col items-baseline sm:flex-row)"
244
+ class="grid gap-2 grid-cols-1 text-left mt-4 *:bg-slate-100 *:p-2 *:flex *:flex-col *:items-baseline *:sm:flex-row"
244
245
  >
245
246
  <li>
246
247
  <strong class="mr-2">Email:</strong>
@@ -265,20 +266,20 @@
265
266
  </div>
266
267
  </div>
267
268
 
268
- <style>
269
+ <style lang="postcss">
269
270
  h2 {
270
- --at-apply: text-xl font-semibold;
271
+ @apply text-xl font-semibold;
271
272
  }
272
273
 
273
274
  section {
274
- --at-apply: flex flex-col mt-4 mx-1;
275
+ @apply flex flex-col mt-4 mx-1;
275
276
  }
276
277
 
277
278
  .soft-link {
278
- --at-apply: text-base text-blue-900 flex flex-col items-center;
279
+ @apply text-base text-blue-900 flex flex-col items-center;
279
280
  }
280
281
 
281
282
  .soft-icon {
282
- --at-apply: w-12 h-12;
283
+ @apply w-12 h-12;
283
284
  }
284
285
  </style>
src/routes/cv/+page.svelte CHANGED
@@ -16,7 +16,7 @@
16
16
  <ul>
17
17
  <li>
18
18
  <b>John Lewis</b>
19
- <ul class="children:list-disc">
19
+ <ul class="*:list-disc">
20
20
  <li>Built a social quiz game to improve engagement across the website</li>
21
21
  <li>
22
22
  Implemented new functionality in customer self serve functions like returns,
@@ -38,7 +38,7 @@
38
38
  </li>
39
39
  <li>
40
40
  <b>iOWNA</b>
41
- <ul class="children:list-disc">
41
+ <ul class="*:list-disc">
42
42
  <li>Built a content editor for curators to create content on our platform</li>
43
43
  <li>
44
44
  Built the iOWNA crossplatform app in react-native that works in android, ios, and web
@@ -55,7 +55,7 @@
55
55
  </li>
56
56
  <li>
57
57
  <b>Zeta</b>
58
- <ul class="children:list-disc">
58
+ <ul class="*:list-disc">
59
59
  <li>
60
60
  Added multiple download formats (pdf,html,xlsx) for reports in the Reporting Center
61
61
  </li>
@@ -72,7 +72,7 @@
72
72
  </li>
73
73
  <li>
74
74
  <b>Lifebox</b>
75
- <ul class="children:list-disc">
75
+ <ul class="*:list-disc">
76
76
  <li>Added search functionality to the hospital procedure codes</li>
77
77
  <li>
78
78
  Converted the Health Questionnaire from json to native go code making it easier to
@@ -96,7 +96,7 @@
96
96
  Numberz integrates banking with your day-2-day business work-flows freeing up a lot of effort,
97
97
  time and heart-burn, to help your business grow.
98
98
  </h5>
99
- <ul class="children:list-disc">
99
+ <ul class="*:list-disc">
100
100
  <li>Implemented new features and fixed bugs on the numberz android app</li>
101
101
  <li>Integrated numberz with Tally ERP</li>
102
102
  <li>
@@ -130,7 +130,7 @@
130
130
  Playlyfe is an online Gamification Platform which empowers anyone to design and implement a
131
131
  gamified system.
132
132
  </h5>
133
- <ul class="children:list-disc">
133
+ <ul class="*:list-disc">
134
134
  <li>Built the Playlyfe Hybrid Mobile app using Phonegap for Android and iOS</li>
135
135
  <li>Built the leaderboard system using Mongodb, Redis and Couchbase as the datastore</li>
136
136
  <li>Migration of data from v1 to v2 of the API</li>
@@ -159,7 +159,7 @@
159
159
  </section>
160
160
  </div>
161
161
 
162
- <style>
162
+ <style lang="postcss">
163
163
  b {
164
164
  font-weight: 600;
165
165
  }
src/routes/posts/[slug]/+page.svelte CHANGED
@@ -11,7 +11,7 @@
11
11
  <meta property="og:title" content={data.meta.title} />
12
12
  </svelte:head>
13
13
 
14
- <article class="post-page">
14
+ <article class="flex flex-col w-full">
15
15
  <hgroup class="flex flex-1 flex-col mb-6">
16
16
  <h1 class="font-bold text-2xl">
17
17
  {data.meta.title}
@@ -35,90 +35,3 @@
35
35
  <svelte:component this={data.content} />
36
36
  </div>
37
37
  </article>
38
-
39
- <style>
40
- .post-page {
41
- display: flex;
42
- flex-direction: column;
43
- width: 100%;
44
-
45
- & code {
46
- font-family:
47
- Menlo,
48
- Monaco,
49
- Courier New,
50
- monospace;
51
- font-size: 0.9em;
52
- }
53
-
54
- & a {
55
- text-decoration: underline;
56
- --at-apply: text-blue-900;
57
- }
58
-
59
- & p {
60
- margin-top: 1rem;
61
- margin-bottom: 1rem;
62
- }
63
-
64
- & pre {
65
- max-width: 64rem;
66
- font-family: monospace;
67
- font-size: 14px;
68
- border-radius: 16px;
69
- padding: 16px;
70
- margin: 8px;
71
- line-height: 20px;
72
- overflow-x: auto;
73
- }
74
-
75
- & img {
76
- width: auto;
77
- @media (--mobile) {
78
- width: 100%;
79
- }
80
- }
81
-
82
- & .title-container {
83
- display: flex;
84
- flex: 1;
85
- font-family: serif;
86
- flex-direction: column;
87
-
88
- & h1 {
89
- color: var(--black-light);
90
- margin: 0;
91
- line-height: 3rem;
92
- }
93
-
94
- & h2 {
95
- color: var(--yellow-dark);
96
- font-size: 1.5rem;
97
- font-weight: 500;
98
- margin-top: 20px;
99
- margin-bottom: 20px;
100
- }
101
-
102
- & h3 {
103
- color: var(--black-light);
104
- font-size: 1.5rem;
105
- font-weight: 500;
106
- margin: 0;
107
- }
108
-
109
- & .date {
110
- display: flex;
111
- flex: 1;
112
- flex-direction: row;
113
- justify-content: flex-end;
114
- margin-right: var(--space-10);
115
-
116
- @media (--mobile) {
117
- justify-content: flex-start;
118
- margin-top: 0.5rem;
119
- margin-bottom: 0.5rem;
120
- }
121
- }
122
- }
123
- }
124
- </style>
tailwind.config.js ADDED
@@ -0,0 +1,72 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+ export default {
3
+ content: [
4
+ './src/**/*.{html,js,svelte,ts}',
5
+ ],
6
+ theme: {
7
+ fontFamily: {
8
+ sans: 'system-ui',
9
+ serif: 'system-ui',
10
+ mono: 'monospace',
11
+ logo: 'Kaiti SC'
12
+ },
13
+ extend: {
14
+ typography: ({ theme }) => ({
15
+ DEFAULT: {
16
+ css: {
17
+ maxWidth: "70rem",
18
+ h1: {
19
+ fontWeight: "500",
20
+ marginTop: "1rem",
21
+ },
22
+ h2: {
23
+ color: theme('colors.black'),
24
+ },
25
+ pre: {
26
+ padding: "16px",
27
+ borderRadius: "16px",
28
+ fontSize: "0.8rem",
29
+ fontFamily: "monospace",
30
+ },
31
+ '--tw-prose-body': theme('colors.black'),
32
+ '--tw-prose-headings': theme('colors.gray[100]'),
33
+ '--tw-prose-lead': theme('colors.black'),
34
+ '--tw-prose-links': theme('colors.blue[900]'),
35
+ '--tw-prose-bold': theme('colors.black'),
36
+ '--tw-prose-counters': theme('colors.black'),
37
+ '--tw-prose-bullets': theme('colors.black'),
38
+ '--tw-prose-hr': theme('colors.black'),
39
+ '--tw-prose-quotes': theme('colors.black'),
40
+ '--tw-prose-quote-borders': theme('colors.black'),
41
+ '--tw-prose-captions': theme('colors.black'),
42
+ '--tw-prose-code': theme('colors.black'),
43
+ '--tw-prose-pre-code': theme('colors.black'),
44
+ '--tw-prose-pre-bg': theme('colors.black'),
45
+ '--tw-prose-th-borders': theme('colors.black'),
46
+ '--tw-prose-td-borders': theme('colors.black'),
47
+ '--tw-prose-invert-body': theme('colors.black'),
48
+ '--tw-prose-invert-headings': theme('colors.white'),
49
+ '--tw-prose-invert-lead': theme('colors.black'),
50
+ '--tw-prose-invert-links': theme('colors.blue[900]'),
51
+ '--tw-prose-invert-bold': theme('colors.white'),
52
+ '--tw-prose-invert-counters': theme('colors.black'),
53
+ '--tw-prose-invert-bullets': theme('colors.black'),
54
+ '--tw-prose-invert-hr': theme('colors.black'),
55
+ '--tw-prose-invert-quotes': theme('colors.black'),
56
+ '--tw-prose-invert-quote-borders': theme('colors.black'),
57
+ '--tw-prose-invert-captions': theme('colors.black'),
58
+ '--tw-prose-invert-code': theme('colors.white'),
59
+ '--tw-prose-invert-pre-code': theme('colors.black'),
60
+ '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
61
+ '--tw-prose-invert-th-borders': theme('colors.black'),
62
+ '--tw-prose-invert-td-borders': theme('colors.black'),
63
+ },
64
+ },
65
+ }),
66
+ },
67
+ },
68
+ plugins: [
69
+ require('@tailwindcss/typography'),
70
+ ],
71
+ }
72
+
uno.config.ts DELETED
@@ -1,24 +0,0 @@
1
- import { defineConfig, presetIcons, presetUno } from 'unocss';
2
- import transformerVariantGroup from '@unocss/transformer-variant-group';
3
- import transformerDirectives from '@unocss/transformer-directives';
4
-
5
- export default defineConfig({
6
- presets: [
7
- presetUno(),
8
- presetIcons({
9
- extraProperties: {
10
- width: '2.25rem',
11
- height: '2.25rem'
12
- }
13
- })
14
- ],
15
- transformers: [transformerVariantGroup(), transformerDirectives()],
16
- theme: {
17
- fontFamily: {
18
- sans: 'system-ui',
19
- serif: 'system-ui',
20
- mono: 'monospace',
21
- logo: 'Kaiti SC'
22
- }
23
- }
24
- });
vite.config.js CHANGED
@@ -1,16 +1,12 @@
1
1
  import { enhancedImages } from '@sveltejs/enhanced-img';
2
2
  import { sveltekit } from '@sveltejs/kit/vite';
3
3
  import svg from '@poppanator/sveltekit-svg'
4
- import UnoCSS from '@unocss/svelte-scoped/vite';
5
4
  import { defineConfig } from 'vitest/config';
6
5
 
7
6
  export default defineConfig({
8
7
  plugins: [
9
8
  enhancedImages(),
10
9
  sveltekit(),
11
- UnoCSS({
12
- injectReset: '@unocss/reset/tailwind.css'
13
- }),
14
10
  svg(),
15
11
  ],
16
12
  test: {