git.iko.soy/urbit.org
on master help sign in
markdown: restore oversized images
2f8f250Matilde Park
components/Markdown.js+2−20
compare with master
unifiedsplit
@@ -4,6 +4,7 @@ import { heading } from "./schema/Heading.markdoc";
4import { footnoteRef } from "./schema/footnoteRef.markdoc";
4import { footnoteRef } from "./schema/footnoteRef.markdoc";
5import { footnoteItem } from "./schema/footnoteItem.markdoc";
5import { footnoteItem } from "./schema/footnoteItem.markdoc";
6import { link } from "./schema/link.markdoc";
6import { link } from "./schema/link.markdoc";
7+import { image } from "./schema/image.markdoc";
7import Tabs from "../components/Tabs";
8import Tabs from "../components/Tabs";
8import Tab from "../components/Tab";
9import Tab from "../components/Tab";
9import Button from "../components/Button";
10import Button from "../components/Button";
@@ -13,26 +14,6 @@ import Prism from "prism-react-renderer/prism";
13(typeof global !== "undefined" ? global : window).Prism = Prism;
14(typeof global !== "undefined" ? global : window).Prism = Prism;
14require("prismjs/components/prism-hoon");
15require("prismjs/components/prism-hoon");
15
16
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−
36export function Fence({ children, language }) {
17export function Fence({ children, language }) {
37 return (
18 return (
38 <Highlight
19 <Highlight
@@ -128,6 +109,7 @@ export default function Markdown({ post }) {
128 nodes: {
109 nodes: {
129 fence,
110 fence,
130 heading,
111 heading,
112+ image,
131 link,
113 link,
132 footnoteItem,
114 footnoteItem,
133 footnoteRef,
115 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 @@
102 @apply rounded-lg w-full h-auto;
102 @apply rounded-lg w-full h-auto;
103}
103}
104
104
105−.markdown figure {
105+.markdown span#figure {
106− @apply relative my-8 z-0 w-full left-0;
106+ @apply relative my-8 z-0 w-full left-0 block;
107}
107}
108
108
109@media (min-width: 768px) {
109@media (min-width: 768px) {
110− .markdown figure {
110+ .markdown span#figure {
111 width: 125%;
111 width: 125%;
112 left: -12.5%;
112 left: -12.5%;
113 }
113 }