Skip to content

Commit

Permalink
feat: make mobile work (#45)
Browse files Browse the repository at this point in the history
Co-authored-by: Lino Le Van <[email protected]>
  • Loading branch information
lino-levan and Lino Le Van authored Dec 23, 2023
1 parent 0689bfa commit 8b2435b
Show file tree
Hide file tree
Showing 11 changed files with 88 additions and 67 deletions.
2 changes: 1 addition & 1 deletion deno.jsonc
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@
},
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "https://esm.sh/preact@10.17.1"
"jsxImportSource": "https://esm.sh/preact@10.19.3"
}
}
53 changes: 27 additions & 26 deletions deps.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export type { JSX } from "https://esm.sh/preact@10.17.1";
export { renderToString } from "https://esm.sh/preact-render-to-string@6.2.1";
export type { JSX } from "https://esm.sh/preact@10.19.3";
export { renderToString } from "https://esm.sh/preact-render-to-string@6.3.1";

export {
fromFileUrl,
Expand All @@ -8,44 +8,45 @@ export {
resolve,
toFileUrl,
win32,
} from "https://deno.land/std@0.199.0/path/mod.ts";
export { walkSync } from "https://deno.land/std@0.199.0/fs/walk.ts";
export { parse as parseYaml } from "https://deno.land/std@0.199.0/yaml/mod.ts";
export { parse as parseJsonc } from "https://deno.land/std@0.199.0/jsonc/mod.ts";
export { parse as parseToml } from "https://deno.land/std@0.199.0/toml/mod.ts";
export { copySync } from "https://deno.land/std@0.199.0/fs/copy.ts";
export { serveDir } from "https://deno.land/std@0.199.0/http/file_server.ts";
export { extract } from "https://deno.land/std@0.199.0/front_matter/any.ts";
export { existsSync } from "https://deno.land/std@0.199.0/fs/exists.ts";
} from "https://deno.land/std@0.210.0/path/mod.ts";
export { walkSync } from "https://deno.land/std@0.210.0/fs/walk.ts";
export { parse as parseYaml } from "https://deno.land/std@0.210.0/yaml/mod.ts";
export { parse as parseJsonc } from "https://deno.land/std@0.210.0/jsonc/mod.ts";
export { parse as parseToml } from "https://deno.land/std@0.210.0/toml/mod.ts";
export { copySync } from "https://deno.land/std@0.210.0/fs/copy.ts";
export { serveDir } from "https://deno.land/std@0.210.0/http/file_server.ts";
export { extract } from "https://deno.land/std@0.210.0/front_matter/any.ts";
export { existsSync } from "https://deno.land/std@0.210.0/fs/exists.ts";

export { launch } from "https://deno.land/x/astral@0.2.3/mod.ts";
export { launch } from "https://deno.land/x/astral@0.3.2/mod.ts";

export * as esbuild from "https://deno.land/x/esbuild@v0.17.19/mod.js";
export { denoPlugins } from "https://deno.land/x/[email protected].1/mod.ts";
export * as esbuild from "https://deno.land/x/esbuild@v0.19.2/mod.js";
export { denoPlugins } from "https://deno.land/x/[email protected].2/mod.ts";

export { createGenerator } from "https://esm.sh/@unocss/core@0.55.2";
export { presetUno } from "https://esm.sh/@unocss/preset-uno@0.55.2";
export { createGenerator } from "https://esm.sh/@unocss/core@0.58.0";
export { presetUno } from "https://esm.sh/@unocss/preset-uno@0.58.0";

export { decode } from "https://deno.land/x/[email protected]/mod.ts";

export { default as Github } from "https://deno.land/x/[email protected]/tsx/brand-github.tsx";
export { default as ExternalLink } from "https://deno.land/x/[email protected]/tsx/external-link.tsx";
export { default as ChevronDown } from "https://deno.land/x/[email protected]/tsx/chevron-down.tsx";
export { default as Github } from "https://deno.land/x/[email protected]/tsx/brand-github.tsx";
export { default as ExternalLink } from "https://deno.land/x/[email protected]/tsx/external-link.tsx";
export { default as ChevronDown } from "https://deno.land/x/[email protected]/tsx/chevron-down.tsx";
export { default as IconMenu2 } from "https://deno.land/x/[email protected]/tsx/menu-2.tsx";

export { Command } from "https://deno.land/x/[email protected]/command/mod.ts";

export { type Plugin, unified } from "https://esm.sh/[email protected].0";
export { default as remarkParse } from "https://esm.sh/remark-parse@10.0.2";
export { default as remarkGfm } from "https://esm.sh/remark-gfm@3.0.1";
export { default as remarkRehype } from "https://esm.sh/remark-rehype@10.1.0";
export { default as rehypeStringify } from "https://esm.sh/rehype-stringify@9.0.3";
export { type Plugin, unified } from "https://esm.sh/[email protected].4";
export { default as remarkParse } from "https://esm.sh/remark-parse@11.0.0";
export { default as remarkGfm } from "https://esm.sh/remark-gfm@4.0.0";
export { default as remarkRehype } from "https://esm.sh/remark-rehype@11.0.0";
export { default as rehypeStringify } from "https://esm.sh/rehype-stringify@10.0.0";

export {
all,
createStarryNight,
type Grammar,
} from "https://esm.sh/@wooorm/starry-night@2.1.1";
export { toString } from "https://esm.sh/hast-util-to-string@2.0.0";
} from "https://esm.sh/@wooorm/starry-night@3.2.0";
export { toString } from "https://esm.sh/hast-util-to-string@3.0.0";
export { visit } from "https://esm.sh/[email protected]";
export {
type Element,
Expand Down
2 changes: 1 addition & 1 deletion src/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export async function build() {
Deno.mkdirSync(resolve("build", folder), { recursive: true });
Deno.writeTextFileSync(
resolve("build", folder, "index.html"),
await render(config, magic, folder, plugins),
await render(magic, folder, plugins),
);
}

Expand Down
1 change: 0 additions & 1 deletion src/dev.ts
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ export async function dev(hostname = "0.0.0.0", port = 8000) {

return new Response(
await render(
config,
getMagic(),
resolve("pages", pathname.slice(1)),
plugins,
Expand Down
31 changes: 20 additions & 11 deletions src/lib/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Config, FileTypes, JSX, Magic, RouteMap } from "./types.ts";
import { ExternalLink, Github, posix } from "../../deps.ts";
import { ExternalLink, Github, IconMenu2, posix } from "../../deps.ts";
import { renderMD } from "../utils.tsx";
import { Sidebar } from "./sidebar.tsx";

Expand All @@ -13,9 +13,20 @@ export function Header(props: {
}) {
return (
<header class="w-full h-16 shadow-sm flex gap-4 items-center px-4 bg-white dark:bg-black text-gray-800 dark:text-gray-200 z-10">
<details class="sm:hidden">
<summary class="text-black dark:text-white hover:text-gray-800 dark:hover:text-gray-300">
<IconMenu2 />
</summary>
<div class="bg-white dark:bg-black absolute top-0 left-0 h-screen">
<Sidebar
class="w-64 p-2 border-r border-gray-200 dark:border-gray-700 pt-4 flex flex-col gap-2"
route="TOP"
/>
</div>
</details>
<a href="/">
<h1 class="font-semibold text-lg text-gray-800 flex items-center gap-2 dark:text-gray-200 mr-4">
<image src="/icon.png" class="w-8 h-8" />
<img src="/icon.png" class="w-8 h-8" />
{props.title}
</h1>
</a>
Expand All @@ -25,7 +36,7 @@ export function Header(props: {
{props.github && (
<a
target="_blank"
class="text-black dark:text-white"
class="text-black dark:text-white hover:text-gray-800 dark:hover:text-gray-300"
href={props.github}
>
<Github />
Expand All @@ -45,12 +56,12 @@ export function Footer(
) {
return (
<footer class="px-4 py-12 w-full flex justify-center text-gray-800 dark:text-gray-200 border-t dark:border-gray-700 bg-white dark:bg-black">
<div class="max-w-screen-lg w-full flex flex-wrap justify-around">
<div class="max-w-screen-lg w-full flex flex-col sm:flex-row flex-wrap justify-around">
<image src="/icon.png" class="w-8 h-8" />
{Object.entries(props.footer).map((
[name, value],
) => (
<div>
<div class="py-4 sm:py-0">
<p class="font-bold pb-4">{name}</p>
<ul class="flex flex-col gap-2">
{value.map((value) => (
Expand All @@ -69,7 +80,7 @@ export function Footer(
</ul>
</div>
))}
<div class="h-full flex flex-col justify-around">
<div class="py-4 sm:h-full flex flex-row-reverse sm:flex-col justify-around">
{props.copyright && (
<p class="whitespace-pre text-gray-500 dark:text-gray-400 text-sm">
{props.copyright}
Expand All @@ -82,7 +93,7 @@ export function Footer(
class="w-min"
href={props.github}
>
<Github class="text-gray-500 hover:text-gray-900" />
<Github class="text-gray-500 hover:text-gray-900 dark:hover:text-gray-300" />
</a>
)}
</div>
Expand All @@ -100,7 +111,6 @@ export async function page(props: {
};
options: {
markdown: string;
route_map: RouteMap[];
route: string;
config: Config;
magic: Magic;
Expand Down Expand Up @@ -171,12 +181,11 @@ export async function page(props: {
>
{!hide_navbar && (
<Sidebar
class="w-64 p-2 border-r border-gray-200 dark:border-gray-700 pt-4 flex flex-col gap-2"
route_map={props.options.route_map}
class="w-64 p-2 border-r border-gray-200 dark:border-gray-700 pt-4 hidden sm:flex flex-col gap-2"
route={props.options.route}
/>
)}
<div class="flex-grow max-w-screen-lg flex flex-col gap-8 py-4 overflow-hidden">
<div class="flex-grow max-w-screen-lg flex flex-col gap-8 py-4 px-4 overflow-hidden">
<h1 class="text-5xl font-bold text-gray-800 dark:text-gray-100">
{props.page.title}
</h1>
Expand Down
9 changes: 4 additions & 5 deletions src/lib/render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {

import { Footer, Header, page } from "./page.tsx";
import { get_route_map, resolve_file } from "./route_map.ts";
import type { Config, Magic, PluginResult } from "./types.ts";
import { getHeaderElements, importBuild } from "../utils.tsx";
import type { Magic, PluginResult } from "./types.ts";
import { getHeaderElements, importBuild, readConfig } from "../utils.tsx";

const unoConfig = existsSync("./uno.config.ts")
? (await importBuild("./uno.config.ts")).default
Expand All @@ -36,12 +36,12 @@ async function applyUno(html: string) {
}

export async function render(
config: Config,
magic: Magic,
path: string,
plugins: PluginResult[],
dev = false,
) {
const config = readConfig();
const base_path = resolve("pages", path);
const [file_type, markdown] = resolve_file(base_path);

Expand Down Expand Up @@ -85,7 +85,7 @@ export async function render(
}

const frontmatter = extract(markdown);
const route_map = get_route_map(resolve("pages"), true);
get_route_map(resolve("pages"), true);

const title = frontmatter.attrs.title as string ?? "No Title";
const description = frontmatter.attrs.description as string ??
Expand All @@ -99,7 +99,6 @@ export async function render(
page: { title, description, hide_navbar },
options: {
markdown,
route_map,
route: "/" + path,
config,
magic,
Expand Down
8 changes: 7 additions & 1 deletion src/lib/route_map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@ export function resolve_file(path: string) {
);
}

export let global_route_map: RouteMap[] = [];

export function get_route_map(directory: string, top_level = false) {
const route_map: RouteMap[] = [];
const route_map = [];

for (const entry of Deno.readDirSync(directory)) {
if (entry.name.startsWith("_")) continue;
Expand Down Expand Up @@ -51,5 +53,9 @@ export function get_route_map(directory: string, top_level = false) {

route_map.sort((a, b) => a.index - b.index);

if (top_level) {
global_route_map = route_map;
}

return route_map;
}
16 changes: 14 additions & 2 deletions src/lib/sidebar.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,28 @@
import { ChevronDown } from "../../deps.ts";
import type { RouteMap } from "./types.ts";
import { global_route_map } from "./route_map.ts";
import { readConfig } from "../utils.tsx";

function simplify(url: string) {
return url.replaceAll("/", "").replaceAll("-", "");
}

export function Sidebar(
props: { route_map: RouteMap[]; class: string; route: string },
props: { route_map?: RouteMap[]; class: string; route: string },
) {
const config = readConfig();
const route_map = props.route_map ?? global_route_map;
return (
<div class={props.class}>
{props.route_map.map((route) => (
{!props.route_map && (
<a href="/">
<h1 class="font-semibold text-lg text-gray-800 dark:text-gray-200 flex items-center gap-2 mr-4">
<img src="/icon.png" class="w-8 h-8" />
{config.title}
</h1>
</a>
)}
{route_map.map((route) => (
<>
{route.sub_route_map
? (
Expand Down
2 changes: 1 addition & 1 deletion src/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export async function importBuild(entrypoint: string) {
bundle: true,
write: false,
format: "esm",
jsxImportSource: "https://esm.sh/preact@10.17.0",
jsxImportSource: "https://esm.sh/preact@10.19.3",
jsx: "automatic",
});
const file = new TextDecoder().decode(result.outputFiles[0].contents);
Expand Down
11 changes: 4 additions & 7 deletions tests/end_to_end/unocss/uno.config.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import {
defineConfig,
presetTypography,
presetUno,
} from "https://esm.sh/[email protected]";
import { presetUno } from "https://esm.sh/@unocss/[email protected]";
import { presetTypography } from "https://esm.sh/@unocss/[email protected]";

export default defineConfig({
export default {
presets: [
presetUno({
dark: "media",
}),
presetTypography(),
],
});
};
20 changes: 9 additions & 11 deletions www/pages/core-concepts/unocss.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,34 @@ Pyro uses UnoCSS for styling, both internally and for user code. By default, the
configuration that Pyro uses for UnoCSS looks something like:

```ts
import { defineConfig, presetUno } from "https://esm.sh/unocss@0.55.2";
import { presetUno } from "https://esm.sh/@unocss/preset-uno@0.58.0";

export default defineConfig({
export default {
presets: [
presetUno({
dark: "media",
}),
],
});
};
```

Some users would prefer to have more UnoCSS features. This is supported with
zero extra configuration outside of just making the file! At the top level of
your site, just add a `uno.config.ts` file. Below is an example of configuring
UnoCSS to add the `presetTypography` plugin.
UnoCSS to add the `presetTypography` plugin. Make sure not to import from the
main `uno` package, as that is unsupported.

```ts
// uno.config.ts
import {
defineConfig,
presetTypography,
presetUno,
} from "https://esm.sh/[email protected]";
import { presetUno } from "https://esm.sh/@unocss/[email protected]";
import { presetTypography } from "https://esm.sh/@unocss/[email protected]";

export default defineConfig({
export default {
presets: [
presetUno({
dark: "media",
}),
presetTypography(),
],
});
};
```

0 comments on commit 8b2435b

Please sign in to comment.