git.iko.soy/urbit.org
on master help sign in
markdown: restore oversized images
commit2f8f250a6adc1ada22190b96c2113eb67bef5a1d authorMatilde Park <matilde.park@urbit.org> dateMon 6 Jun 2022, 17:27 (4 years ago) parent61046b5
3 files changed+21−23
compare with master
unifiedsplit
components/Markdown.js+2−20 components/schema/image.markdoc.js+16 styles/markdown.css+3−3
components/Markdown.js+2−20
@@ -4,6 +4,7 @@ import { heading } from "./schema/Heading.markdoc";
44import { footnoteRef } from "./schema/footnoteRef.markdoc";
55import { footnoteItem } from "./schema/footnoteItem.markdoc";
66import { link } from "./schema/link.markdoc";
7+import { image } from "./schema/image.markdoc";
78import Tabs from "../components/Tabs";
89import Tab from "../components/Tab";
910import Button from "../components/Button";
@@ -13,26 +14,6 @@ import Prism from "prism-react-renderer/prism";
1314(typeof global !== "undefined" ? global : window).Prism = Prism;
1415require("prismjs/components/prism-hoon");
1516
16−// img is wrapped in figure so that images can be extra wide in the blog posts
17−// function img(h, node) {
18−// var props = { src: normalize(node.url), alt: node.alt };
19−// if (node.title !== null && node.title !== undefined) {
20−// props.title = node.title;
21−// }
22−// return {
23−// type: "element",
24−// tagName: "figure",
25−// properties: {},
26−// children: [
27−// {
28−// type: "element",
29−// tagName: "img",
30−// properties: props,
31−// },
32−// ],
33−// };
34−// }
35−
3617export function Fence({ children, language }) {
3718 return (
3819 <Highlight
@@ -128,6 +109,7 @@ export default function Markdown({ post }) {
128109 nodes: {
129110 fence,
130111 heading,
112+ image,
131113 link,
132114 footnoteItem,
133115 footnoteRef,
components/schema/image.markdoc.jsnew file+16
@@ -0,0 +1,16 @@
1+import { Tag } from "@markdoc/markdoc";
2+
3+export const image = {
4+ render: "span",
5+ attributes: {
6+ src: { type: String, required: true },
7+ alt: { type: String },
8+ title: { type: String },
9+ },
10+ transform(node, config) {
11+ const attributes = node.transformAttributes(config);
12+ const children = node.transformChildren(config);
13+ const imageTag = new Tag("img", attributes, children);
14+ return new Tag("span", { id: "figure" }, [imageTag]);
15+ },
16+};
styles/markdown.css+3−3
@@ -102,12 +102,12 @@
102102 @apply rounded-lg w-full h-auto;
103103}
104104
105−.markdown figure {
106− @apply relative my-8 z-0 w-full left-0;
105+.markdown span#figure {
106+ @apply relative my-8 z-0 w-full left-0 block;
107107}
108108
109109@media (min-width: 768px) {
110− .markdown figure {
110+ .markdown span#figure {
111111 width: 125%;
112112 left: -12.5%;
113113 }