Skip to content

Commit 05ded58

Browse files
nemanjamnemanjam
committed
refactor config and env vars completely, with env experimental, it works, next fix browser dark mode
1 parent 3351395 commit 05ded58

File tree

34 files changed

+155
-279
lines changed

34 files changed

+155
-279
lines changed

‎.astro/types.d.ts

Lines changed: 3 additions & 208 deletions
Original file line numberDiff line numberDiff line change
@@ -1,208 +1,3 @@
1-
declare module 'astro:content' {
2-
interface Render {
3-
'.mdx': Promise<{
4-
Content: import('astro').MarkdownInstance<{}>['Content'];
5-
headings: import('astro').MarkdownHeading[];
6-
remarkPluginFrontmatter: Record<string, any>;
7-
}>;
8-
}
9-
}
10-
11-
declare module 'astro:content' {
12-
interface Render {
13-
'.md': Promise<{
14-
Content: import('astro').MarkdownInstance<{}>['Content'];
15-
headings: import('astro').MarkdownHeading[];
16-
remarkPluginFrontmatter: Record<string, any>;
17-
}>;
18-
}
19-
}
20-
21-
declare module 'astro:content' {
22-
type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
23-
24-
export type CollectionKey = keyof AnyEntryMap;
25-
export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
26-
27-
export type ContentCollectionKey = keyof ContentEntryMap;
28-
export type DataCollectionKey = keyof DataEntryMap;
29-
30-
type AllValuesOf<T> = T extends any ? T[keyof T] : never;
31-
type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
32-
ContentEntryMap[C]
33-
>['slug'];
34-
35-
export function getEntryBySlug<
36-
C extends keyof ContentEntryMap,
37-
E extends ValidContentEntrySlug<C> | (string & {}),
38-
>(
39-
collection: C,
40-
// Note that this has to accept a regular string too, for SSR
41-
entrySlug: E
42-
): E extends ValidContentEntrySlug<C>
43-
? Promise<CollectionEntry<C>>
44-
: Promise<CollectionEntry<C> | undefined>;
45-
46-
export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
47-
collection: C,
48-
entryId: E
49-
): Promise<CollectionEntry<C>>;
50-
51-
export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
52-
collection: C,
53-
filter?: (entry: CollectionEntry<C>) => entry is E
54-
): Promise<E[]>;
55-
export function getCollection<C extends keyof AnyEntryMap>(
56-
collection: C,
57-
filter?: (entry: CollectionEntry<C>) => unknown
58-
): Promise<CollectionEntry<C>[]>;
59-
60-
export function getEntry<
61-
C extends keyof ContentEntryMap,
62-
E extends ValidContentEntrySlug<C> | (string & {}),
63-
>(entry: {
64-
collection: C;
65-
slug: E;
66-
}): E extends ValidContentEntrySlug<C>
67-
? Promise<CollectionEntry<C>>
68-
: Promise<CollectionEntry<C> | undefined>;
69-
export function getEntry<
70-
C extends keyof DataEntryMap,
71-
E extends keyof DataEntryMap[C] | (string & {}),
72-
>(entry: {
73-
collection: C;
74-
id: E;
75-
}): E extends keyof DataEntryMap[C]
76-
? Promise<DataEntryMap[C][E]>
77-
: Promise<CollectionEntry<C> | undefined>;
78-
export function getEntry<
79-
C extends keyof ContentEntryMap,
80-
E extends ValidContentEntrySlug<C> | (string & {}),
81-
>(
82-
collection: C,
83-
slug: E
84-
): E extends ValidContentEntrySlug<C>
85-
? Promise<CollectionEntry<C>>
86-
: Promise<CollectionEntry<C> | undefined>;
87-
export function getEntry<
88-
C extends keyof DataEntryMap,
89-
E extends keyof DataEntryMap[C] | (string & {}),
90-
>(
91-
collection: C,
92-
id: E
93-
): E extends keyof DataEntryMap[C]
94-
? Promise<DataEntryMap[C][E]>
95-
: Promise<CollectionEntry<C> | undefined>;
96-
97-
/** Resolve an array of entry references from the same collection */
98-
export function getEntries<C extends keyof ContentEntryMap>(
99-
entries: {
100-
collection: C;
101-
slug: ValidContentEntrySlug<C>;
102-
}[]
103-
): Promise<CollectionEntry<C>[]>;
104-
export function getEntries<C extends keyof DataEntryMap>(
105-
entries: {
106-
collection: C;
107-
id: keyof DataEntryMap[C];
108-
}[]
109-
): Promise<CollectionEntry<C>[]>;
110-
111-
export function reference<C extends keyof AnyEntryMap>(
112-
collection: C
113-
): import('astro/zod').ZodEffects<
114-
import('astro/zod').ZodString,
115-
C extends keyof ContentEntryMap
116-
? {
117-
collection: C;
118-
slug: ValidContentEntrySlug<C>;
119-
}
120-
: {
121-
collection: C;
122-
id: keyof DataEntryMap[C];
123-
}
124-
>;
125-
// Allow generic `string` to avoid excessive type errors in the config
126-
// if `dev` is not running to update as you edit.
127-
// Invalid collection names will be caught at build time.
128-
export function reference<C extends string>(
129-
collection: C
130-
): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
131-
132-
type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
133-
type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
134-
ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
135-
>;
136-
137-
type ContentEntryMap = {
138-
"post": {
139-
"2022-02-16-example-article-1.mdx": {
140-
id: "2022-02-16-example-article-1.mdx";
141-
slug: "2022-02-16-example-article-1";
142-
body: string;
143-
collection: "post";
144-
data: InferEntrySchema<"post">
145-
} & { render(): Render[".mdx"] };
146-
"2022-03-17-example-article-2.mdx": {
147-
id: "2022-03-17-example-article-2.mdx";
148-
slug: "2022-03-17-example-article-2";
149-
body: string;
150-
collection: "post";
151-
data: InferEntrySchema<"post">
152-
} & { render(): Render[".mdx"] };
153-
"2023-01-19-example-article-3.mdx": {
154-
id: "2023-01-19-example-article-3.mdx";
155-
slug: "2023-01-19-example-article-3";
156-
body: string;
157-
collection: "post";
158-
data: InferEntrySchema<"post">
159-
} & { render(): Render[".mdx"] };
160-
"2024-01-20-example-article-4.mdx": {
161-
id: "2024-01-20-example-article-4.mdx";
162-
slug: "2024-01-20-example-article-4";
163-
body: string;
164-
collection: "post";
165-
data: InferEntrySchema<"post">
166-
} & { render(): Render[".mdx"] };
167-
"2024-01-21-example-article-5.mdx": {
168-
id: "2024-01-21-example-article-5.mdx";
169-
slug: "2024-01-21-example-article-5";
170-
body: string;
171-
collection: "post";
172-
data: InferEntrySchema<"post">
173-
} & { render(): Render[".mdx"] };
174-
};
175-
"project": {
176-
"2024-02-13-example-project-1.mdx": {
177-
id: "2024-02-13-example-project-1.mdx";
178-
slug: "2024-02-13-example-project-1";
179-
body: string;
180-
collection: "project";
181-
data: InferEntrySchema<"project">
182-
} & { render(): Render[".mdx"] };
183-
"2024-03-15-example-project-2.mdx": {
184-
id: "2024-03-15-example-project-2.mdx";
185-
slug: "2024-03-15-example-project-2";
186-
body: string;
187-
collection: "project";
188-
data: InferEntrySchema<"project">
189-
} & { render(): Render[".mdx"] };
190-
"2024-05-16-example-project-3.mdx": {
191-
id: "2024-05-16-example-project-3.mdx";
192-
slug: "2024-05-16-example-project-3";
193-
body: string;
194-
collection: "project";
195-
data: InferEntrySchema<"project">
196-
} & { render(): Render[".mdx"] };
197-
};
198-
199-
};
200-
201-
type DataEntryMap = {
202-
203-
};
204-
205-
type AnyEntryMap = ContentEntryMap & DataEntryMap;
206-
207-
export type ContentConfig = typeof import("../src/content/config.js");
208-
}
1+
/// <reference types="astro/client" />
2+
/// <reference path="astro/content.d.ts" />
3+
/// <reference path="astro/env.d.ts" />

‎astro.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { defineConfig } from 'astro/config';
88
import { remarkReadingTime } from './plugins/remark-reading-time.mjs';
99
//
1010
// all relative imports in subtree
11-
import { envSchema, PROCESS_ENV } from './src/env';
11+
// any of these files must not import CONFIG with env vars
12+
import { envSchema, PROCESS_ENV } from './src/config/process-env';
1213
import { expressiveCodeIntegration } from './src/libs/integrations/expressive-code';
1314
import { sitemapIntegration } from './src/libs/integrations/sitemap';
1415

‎src/config.ts renamed to ‎docs/working-notes/my-old-code/config.ts

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
import { SITE_URL } from 'astro:env/client';
22
import { NODE_ENV, PREVIEW_MODE } from 'astro:env/server';
33

4-
import { configSchema } from '@/schemas/config';
5-
import { prettyPrintObject } from '@/utils/log';
6-
import { validateData } from '@/utils/validation';
4+
import { configSchema } from './schemas/config';
5+
import { prettyPrintObject } from './utils/log';
6+
import { validateData } from './utils/validation';
77

8-
import type { ConfigType } from '@/types/config';
8+
import type { ConfigType } from './types/config';
99

1010
/*-------------------- configData -------------------*/
1111

12+
// const { SITE_URL, NODE_ENV, PREVIEW_MODE } = import.meta.env;
13+
// const { SITE_URL, NODE_ENV, PREVIEW_MODE } = {
14+
// SITE_URL: 'http://localhost:3000',
15+
// NODE_ENV: 'development',
16+
// PREVIEW_MODE: false,
17+
// } as const;
18+
19+
console.log('SITE_URL', SITE_URL, 'NODE_ENV', NODE_ENV, 'PREVIEW_MODE', PREVIEW_MODE);
20+
1221
/** SSG - all env vars are build time only. */
1322
const configData: ConfigType = {
1423
NODE_ENV,
@@ -34,4 +43,4 @@ const configData: ConfigType = {
3443
// todo: Config should go into import.meta.env in astro.config.ts
3544
export const CONFIG = validateData(configData, configSchema);
3645

37-
prettyPrintObject(CONFIG, 'parsed CONFIG');
46+
// prettyPrintObject(CONFIG, 'parsed CONFIG');

‎docs/working-notes/todo3.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -508,5 +508,6 @@ refactor theme script, osDefaultMode, appDefaultMode, storedMode
508508
change meta theme bg color with js, astro-paper
509509

510510
replace import config with import.meta.env.VAR
511+
ask about app start handler for log env vars
511512
------------
512513
```

‎src/components/BaseHead.astro

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import { ViewTransitions } from 'astro:transitions';
77
import ThemeScript from '@/components/ThemeScript.astro';
88
import { DEFAULT_METADATA } from '@/constants/metadata';
99
import { ROUTES } from '@/constants/routes';
10-
import { CONFIG } from '@/config';
10+
import { CONFIG_CLIENT } from '@/config/client';
1111
import { handleTitle } from '@/utils/metadata';
1212
import { filterUndefined } from '@/utils/objects';
1313
1414
import type { Metadata } from '@/types/common';
1515
16-
const { AUTHOR_NAME } = CONFIG;
16+
const { AUTHOR_NAME } = CONFIG_CLIENT;
1717
1818
export interface BaseHeadProps {
1919
metadata: Metadata;
@@ -110,6 +110,7 @@ const ogImageUrl = new URL(image, url);
110110
<script src="set-url-here" crossorigin="anonymous"></script>
111111
-->
112112

113+
{/* MUST be inside <head /> to avoid white flash, IMPORTANT */}
113114
<ThemeScript />
114115

115116
<ViewTransitions fallback="none" />

‎src/components/Footer.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { Icon } from 'astro-icon/components';
33
44
import Link from '@/components/Link.astro';
55
import { ROUTES } from '@/constants/routes';
6-
import { CONFIG } from '@/config';
6+
import { CONFIG_CLIENT } from '@/config/client';
77
import { getLatestCommitInfo } from '@/libs/git';
88
import { shortDate } from '@/utils/datetime';
99
import { limitString, trimHttpProtocol } from '@/utils/strings';
1010
11-
const { SITE_URL, AUTHOR_LINKEDIN, AUTHOR_GITHUB, REPO_URL } = CONFIG;
11+
const { SITE_URL, AUTHOR_LINKEDIN, AUTHOR_GITHUB, REPO_URL } = CONFIG_CLIENT;
1212
const domain = trimHttpProtocol(SITE_URL);
1313
const messageLength = 20 as const;
1414

‎src/components/Header.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { SELECTORS } from '@/constants/dom';
1010
import { IMAGE_SIZES } from '@/constants/image';
1111
import { NAVIGATION_ITEMS } from '@/constants/navigation';
1212
import { ROUTES } from '@/constants/routes';
13-
import { CONFIG } from '@/config';
13+
import { CONFIG_CLIENT } from '@/config/client';
1414
import { getActiveNavItemPath } from '@/utils/navigation';
1515
1616
import Avatar from '@/assets/images/avatar.jpg';
@@ -43,7 +43,7 @@ const activeNavItemPath = getActiveNavItemPath(routePathname);
4343
alt="Profile picture"
4444
/>
4545
<span>
46-
{CONFIG.AUTHOR_NAME}
46+
{CONFIG_CLIENT.AUTHOR_NAME}
4747
</span>
4848
</HeaderLink>
4949
<mobile-button class="md:hidden">

‎src/components/Share.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from 'astro-social-share';
1010
1111
import { DEFAULT_METADATA } from '@/constants/metadata';
12-
import { CONFIG } from '@/config';
12+
import { CONFIG_CLIENT } from '@/config/client';
1313
import { cn } from '@/utils/styles';
1414
1515
import type { ComponentProps } from 'astro/types';
@@ -21,7 +21,7 @@ export interface Props extends SocialShareProps {
2121
const { class: className, ...shareProps } = Astro.props;
2222
2323
const { title, description } = DEFAULT_METADATA;
24-
const { AUTHOR_TWITTER } = CONFIG;
24+
const { AUTHOR_TWITTER } = CONFIG_CLIENT;
2525
2626
// via is only for twitter
2727
const defaultProps = { description, title, via: AUTHOR_TWITTER };

‎src/components/ThemeScript.astro

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11
---
22
import * as themeConstants from '@/constants/theme';
3-
import { CONFIG } from '@/config';
3+
import { CONFIG_CLIENT } from '@/config/client';
44
import { getDefaultThemes } from '@/utils/theme';
55
6+
// can not import server vars, is:inline
7+
8+
const { DEFAULT_MODE } = CONFIG_CLIENT;
69
const defaultThemes = getDefaultThemes();
710
---
811

912
{/* Inlined to avoid flash of white content. */}
10-
<script is:inline define:vars={{ themeConstants, defaultThemes, CONFIG }}>
13+
<script is:inline define:vars={{ themeConstants, defaultThemes, DEFAULT_MODE }}>
1114
// this is JavaScript, not TypeScript
12-
const { DEFAULT_MODE } = CONFIG;
1315
const { MODES, THEMES, THEME_CONFIG } = themeConstants;
1416
const { DATA_ATTRIBUTE, CHANGE_EVENT, LOCAL_STORAGE_KEY } = THEME_CONFIG;
1517

1618
// used for event
1719
const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)');
1820

1921
// light is default
20-
const getMode = (themeMode) => (themeMode === MODES.dark ? MODES.dark : MODES.light);
22+
// const getMode = (themeMode) => (themeMode === MODES.dark ? MODES.dark : MODES.light);
2123

22-
const getDefaultTheme = (themeMode) => defaultThemes[getMode(themeMode)];
24+
const getDefaultTheme = (themeMode) => defaultThemes[themeMode];
2325

2426
const setMode = (themeMode) => {
2527
const storedTheme = getStoredTheme();
2628

2729
if (!storedTheme) return getDefaultTheme(themeMode);
2830

29-
const newTheme = { ...storedTheme, mode: getMode(themeMode) };
31+
const newTheme = { ...storedTheme, mode: themeMode };
3032
return newTheme;
3133
};
3234

@@ -150,6 +152,9 @@ const defaultThemes = getDefaultThemes();
150152
darkModePreference.addEventListener('change', (event) => {
151153
const newMode = event.matches ? MODES.dark : MODES.light;
152154
const newTheme = setMode(newMode);
155+
156+
console.log('newMode', newMode, 'newTheme', newTheme);
157+
// has bug: { mode: "dark", name: "default-light" }
153158
setTheme(newTheme);
154159
});
155160
</script>

0 commit comments

Comments
 (0)