Responsive Layout and Theme Mixins

public/content/glossary/real-programmer/index.en.md

@@ -1,6 +1,6 @@
 ---
 glossary_key: "REAL_PROGRAMMER"
-# source_url: TBD
+source_url: http://www.catb.org/jargon/html/R/Real-Programmer.html
 source_name: The Jargon File
 ---
 

snippets/debug-content-component-style.st.css

@@ -0,0 +1,27 @@
+/*
+---------------------------------
+DEBUG
+---------------------------------
+*/
+/* Debug Media Queries */
+/* @st-import Responsive from "./responsive-mixin.st.css"; */
+/* .root {
+	-st-mixin: Responsive;
+} */
+
+/*
+	Debug Line Index
+*/
+/* @st-scope .root {	
+	ContentComponent:type(paragraph):hover::before {
+		color: red;
+	}
+	ContentComponent:type(paragraph)::before {
+		content: attr(data-line-index);
+		color: #c0c0c0;
+		width: 20px;
+		padding-right: 20px;
+		text-align: right;
+		display: inline-block;
+	}
+} */

src/components/bibliography/bibliography-mixin.st.css

@@ -0,0 +1,7 @@
+@namespace "BibliographyMixin";
+
+@st-import Bibliography from "./bibliography.st.css";
+
+.root {
+  -st-extends: Bibliography;
+}

src/components/content/content-blocks/figure/figure.st.css

@@ -4,9 +4,8 @@
 
 .root {
   -st-mixin: boxSizing;
+  text-align: center;
   margin: 0;
 }
 
-.img {
-  width: 100%;
-}
+.img {}

src/components/content/content-blocks/link-selector/link-selector.tsx

@@ -9,15 +9,10 @@ import { ContentIterator } from "../../content-iterator";
 import { Link } from "../link/link";
 import AnnotationLink from "../annotation-link";
 import Popover from "../../../popover";
-import { ReactThemeContext } from "../../../../contexts/theme-context";
 import { ReactLocaleContext } from "../../../../contexts/locale-context";
 import { ReactQueryContext } from "../../../../contexts/query-context";
 import DynamicContentBrowser from "../../../dynamic-content-browser";
 import { ReactDynamicContentContext } from "../../../../contexts/dynamic-content-context";
-import {
-	st as layoutStyle,
-	classes as layoutClasses,
-} from "../../../layout/layout.st.css";
 
 const getTriggerComp = (
 	type: DynamicContentTypes,
@@ -40,8 +35,7 @@ export const LinkSelector = ({
 	const { displayType, key } = node;
 	const dcContext = useContext(ReactDynamicContentContext);
 	const queryContext = useContext(ReactQueryContext);
-	const { locale, textDirection } = useContext(ReactLocaleContext);
-	const { themeRef } = useContext(ReactThemeContext);
+	const { textDirection } = useContext(ReactLocaleContext);
 	const { query } = queryContext;
 	const { getQueryUrl, registerNode, onExit } = query;
 	const nodeWithQuery = registerNode(node);
@@ -79,8 +73,6 @@ export const LinkSelector = ({
 			side={textDirection === "ltr" ? "right" : "left"}
 			trigger={getTriggerComp(linkType, componentData, className)}
 			portalled={true}
-			portalStyles={layoutStyle(layoutClasses.root, { locale })}
-			contentClassName={themeRef}
 		>
 			<DynamicContentBrowser node={node} />
 		</Popover>

src/components/content/content-blocks/paragraph/paragraph.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ContentComponentProps } from "../../../../interfaces/models";
 import { ContentComponent } from "../../index";
-import { classes } from "./paragraph.st.css";
+import { st, classes } from "./paragraph.st.css";
 
 export const Paragraph = ({
 	componentData,
@@ -19,15 +19,23 @@ export const Paragraph = ({
 
 	if (children.length === 1 && children[0].type === "text") {
 		return (
-			<p key={node.key} className={className} data-line-index={line + 1}>
+			<p
+				key={node.key}
+				className={st(classes.root, className)}
+				data-line-index={line + 1}
+			>
 				{anchor}
 				{node.children[0].text}
 			</p>
 		);
 	}
 
 	return (
-		<p key={node.key} className={className} data-line-index={line + 1}>
+		<p
+			key={node.key}
+			className={st(classes.root, className)}
+			data-line-index={line + 1}
+		>
 			{anchor}
 			{children.map((node) => (
 				<ContentComponent

src/components/content/content-blocks/section/section.st.css

@@ -0,0 +1,3 @@
+@namespace "Section";
+
+.root {}

src/components/content/content-blocks/section/section.tsx

@@ -4,6 +4,7 @@ import {
 	IMLParsedNode,
 	ContentComponentProps,
 } from "../../../../interfaces/models";
+import { st, classes } from "./section.st.css";
 
 export const Section = ({
 	componentData,
@@ -14,7 +15,7 @@ export const Section = ({
 		? node.children
 		: [];
 	return (
-		<div className={className} key={node.key}>
+		<div className={st(classes.root, className)} key={node.key}>
 			{elements.map((node) => {
 				return (
 					<ContentComponent

src/components/content/content-component-mixin.st.css

@@ -0,0 +1,37 @@
+@namespace "ContentComponentMixin";
+
+@st-import ContentComponent from "./content-component.st.css";
+
+:vars {
+	LinkColor: blue;
+	LinkColorHover: red;
+  ErrorBgColor: red;
+  ErrorTextColor: white;
+  MarginBottom: 1.8rem;
+}
+
+.root {
+  -st-extends: ContentComponent;
+}
+
+.root:type(section) {
+  margin-bottom: value(MarginBottom);
+}
+
+.root:type(blockquote) {
+  /* line-height: value(MarginBottom); */
+  padding: 0 value(MarginBottom);
+  margin: value(MarginBottom);
+}
+
+.root:type(link) {
+	color: value(LinkColor);
+}
+.root:type(link):hover {
+	color: value(LinkColorHover);
+}
+
+.root::error {
+	background: value(ErrorBgColor);
+	color: value(ErrorTextColor);
+}

src/components/content/content-component.st.css

@@ -22,21 +22,4 @@
 	));
 }
 
-.root:type(section),
-.root:type(blockquote) {
-  margin-bottom: 1.8rem;
-}
-
-.root:type(paragraph),
-.root:type(blockquote) {
-  line-height: 1.8rem;
-}
-
-.root:type(blockquote) {
-  padding: 0 1.8rem;
-}
-
-.error {
-	background: red;
-	color: #fff;
-}
+.error {}

src/components/content/content-component.tsx

@@ -18,10 +18,11 @@ import { st, classes } from "./content-component.st.css";
 
 export const ContentComponent = ({
 	componentData,
+	className,
 }: ContentComponentProps): JSX.Element => {
 	const { node } = componentData;
 	const { key, type } = node;
-	const stylableClassName = st(classes.root, { type });
+	const stylableClassName = st(classes.root, { type }, className);
 
 	if (!key) {
 		console.warn("missing key on", node);

src/components/content/dynamic-content-viewer/dynamic-content-viewer-mixin.st.css

@@ -0,0 +1,17 @@
+@namespace "DynamicContentViewerMixin";
+
+@st-import DynamicContentViewer from "./dynamic-content-viewer.st.css";
+
+:vars {
+	ParagraphTextSize: 1rem;
+	ParagraphLineHeight: 1.8rem;
+}
+
+.root {
+	-st-extends: DynamicContentViewer;
+}
+
+.root::contentComponent:type(paragraph){
+	line-height: value(ParagraphLineHeight);
+	font-size: value(ParagraphTextSize);
+}

src/components/content/dynamic-content-viewer/dynamic-content-viewer.st.css

@@ -0,0 +1,16 @@
+@namespace "DynamicContentViewer";
+
+@st-import Note from "../../note/note.st.css";
+@st-import ContentComponent from "../content-component.st.css";
+
+.root {}
+
+.note {
+	-st-extends: Note;
+}
+
+.contentComponent {
+	-st-extends: ContentComponent;
+}
+
+.error {}

src/components/content/dynamic-content-viewer/dynamic-content-viewer.tsx

@@ -8,6 +8,7 @@ import { contentUtils } from "../../../lib/content-utils";
 import Note from "../../note";
 import { ReactDynamicContentContext } from "../../../contexts/dynamic-content-context";
 import { mlUtils } from "../../../lib/ml-utils";
+import { st, classes } from "./dynamic-content-viewer.st.css";
 
 export interface DynamicContentViewerProps extends ComponentProps {
 	url: string;
@@ -16,6 +17,7 @@ export interface DynamicContentViewerProps extends ComponentProps {
 
 export const DynamicContentViewer = ({
 	url,
+	className,
 }: DynamicContentViewerProps): JSX.Element => {
 	const [item, setItem] = useState<IParsedPageData>(null);
 	const pageContext = useContext(ReactPageContext);
@@ -59,7 +61,7 @@ export const DynamicContentViewer = ({
 	}, [url, dynamicContentContext, pageContext, locale]);
 
 	if (error) {
-		return <div>{error}</div>;
+		return <div className={classes.error}>{error}</div>;
 	}
 
 	if (elements) {
@@ -73,23 +75,30 @@ export const DynamicContentViewer = ({
 		const itemType =
 			itemData.type === DynamicContentTypes.Glossary ? "ref" : "note";
 		const contents = elements.map((node) => (
-			<ContentComponent key={mlUtils.uniqueId()} componentData={{ node }} />
+			<ContentComponent
+				key={mlUtils.uniqueId()}
+				componentData={{ node }}
+				className={classes.contentComponent}
+			/>
 		));
 
 		return (
-			<Note
-				type={itemType}
-				contents={contents}
-				label={label}
-				title={translate(glossary_key)}
-				term={locale === "en" ? "" : translate(glossary_key, "en")}
-				sources={[
-					{
-						name: source_name,
-						url: source_url,
-					},
-				]}
-			/>
+			<div className={st(classes.root, className)}>
+				<Note
+					className={classes.root}
+					type={itemType}
+					contents={contents}
+					label={label}
+					title={translate(glossary_key)}
+					term={locale === "en" ? "" : translate(glossary_key, "en")}
+					sources={[
+						{
+							name: source_name,
+							url: source_url,
+						},
+					]}
+				/>
+			</div>
 		);
 	}
 

src/components/copy-button/copy-url-button-content-mixin.st.css

@@ -0,0 +1,28 @@
+@namespace "CopyUrlButtonContentMixin";
+
+@st-import CopyButtonContent from "./copy-url-button-content.st.css";
+@st-import [TooltipArrow] from "../../theme/mixins.st.css";
+
+:vars {
+  ContentBgColor: #808080;
+  ContentPadding: 0.25rem 0.5rem;
+  TooltipRadius: 6px;
+  TextColor: #fff;
+  TextSize: 0.85rem;
+  TooltipArrowColor: black;
+}
+
+.root {
+  -st-extends: CopyButtonContent;
+  background-color: value(ContentBgColor);
+  padding: value(ContentPadding);
+  border-radius: value(TooltipRadius);
+  color: value(TextColor);
+  font-size: value(TextSize);
+}
+
+.root::tooltipArrow {
+		-st-mixin: TooltipArrow(
+			 TooltipArrowColor value(TooltipArrowColor)
+		);
+}

src/components/copy-button/copy-url-button-content.st.css

@@ -0,0 +1,5 @@
+@namespace "CopyUrlButtonContent";
+
+.root {}
+
+.tooltipArrow {}

src/components/copy-button/copy-url-button-trigger-mixin.st.css

@@ -0,0 +1,16 @@
+@namespace "CopyUrlButtonTriggerMixin";
+
+@st-import CopyUrlButtonTrigger from "./copy-url-button-trigger.st.css";
+@st-import [IconFill] from "../../theme/mixins.st.css";
+
+:vars {
+  IconFillColor: black;
+}
+
+.root {
+  -st-extends: CopyUrlButtonTrigger;
+}
+
+.root:checked {
+  -st-mixin: IconFill(FillColor value(IconFillColor));
+}

src/components/copy-button/copy-url-button-trigger.st.css

@@ -0,0 +1,9 @@
+@namespace "CopyUrlButton";
+
+.root {
+  -st-states: checked(boolean);
+}
+
+.root:checked {
+  cursor: default;
+}