Update documentation

samrobbins85 · Dec 23, 2020 · 6f743cb · 6f743cb
1 parent 72f2ef9
commit 6f743cb
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -1,34 +1,5 @@
-# nextjs-template
+This is designed with a similar idea to [Tailwind CSS Typography](https://github.com/tailwindlabs/tailwindcss-typography), but following the design proposed by [Latex.css](https://latex.now.sh/).
 
-This is a template repository for when I want to produce a something using Next.js
+To use it, add `latex-style` to a HTML element, in the same way as you would use `prose` with Tailwind CSS Typography.
 
-## License
-
-This is licensed under MIT, one of the best licenses for open source software. Change the `LICENSE` file if a different license is more suitable.
-
-## Tailwind CSS
-
-This does not need any additional configuration, but this site uses [Tailwind CSS](https://tailwindcss.com/), this makes styling elements simpler.
-
-Additional styles can be configured in `/styles/index.css` and Tailwind Plugins can be installed in `tailwind.config.js`
-
-## Code formatting
-
-Again this doesn't need any additional configuration, but can be configured if you wish, for code formatting and linting I have
-
--   `.eslintrc.js`
--   `.prettierrc.json`
-
-These configure ESLint and Prettier respectively, ensure that whatever configuration you choose doesn't cause conflicts, such as using tabs in ESLint and spaces in prettier.
-
-## Dependabot
-
-Dependabot is enabled on this repository, so you will receive pull requests whenever there is an update to a package, this ensures you have the latest features and reduces the chance of a security vulnerability.
-
-## DeepSource
-
-Deepsource checks your code for bugs, anti patterns, performance issues and security flaws and is automatically set up on this repository
-
-## Vercel Hosting
-
-This site will use hosting from Vercel. This can be configured in `vercel.json` a notable key to change is `alias`, this will allow for setting a custom domain
+You can see an example of how this works [here](https://latex-tailwind.vercel.app/)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "latex-tailwind",
 	"description": "A Tailwind CSS plugin for automatically styling plain HTML content with defaults to look like a LaTeX document",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"scripts": {
 		"dev": "next",
 		"build": "next build",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,7 +1,14 @@
 import "../styles/index.css";
-
+import Head from "next/head";
 function MyApp({ Component, pageProps }) {
-	return <Component {...pageProps} />;
+	return (
+		<>
+			<Head>
+				<title>LaTeX Tailwind</title>
+			</Head>
+			<Component {...pageProps} />
+		</>
+	);
 }
 
 export default MyApp;
diff --git a/pages/_document.js b/pages/_document.js
@@ -5,6 +5,7 @@ class MyDocument extends Document {
 		return (
 			<Html lang="en">
 				<Head />
+
 				<body>
 					<Main />
 					<NextScript />

diff --git a/pages/index.mdx b/pages/index.mdx
@@ -1,43 +1,84 @@
 <div className="latex-style">
 
-# Hello
+# <span className="latex">L<span>a</span>T<span>e</span>X</span> Tailwind
 
 <p className="author">Sam Robbins</p>
 
 <div className="abstract">
 
 ## Abstract
 
-This almost class-less CSS library turns your HTML document into a website that looks like a LaTeX document. Write semantic HTML, use the `tailwind` plugin provided
+This almost class-less CSS library turns your HTML document into a website that looks like a LaTeX document.
 
 </div>
 
+## Usage
+
+To install this, run
+
+```sh
+npm install latex-tailwind
+```
+
+Then in your `tailwind.config.js`, add it as a plugin like this
+
+```js
+module.exports = {
+	//...
+	plugins: [require("latex-tailwind")],
+};
+```
+
+Then add `latex-style` to the outermost div you want to have LaTeX style
+
+## Inspiration
+
+This has been inspired by [Tailwind CSS Typography](https://github.com/tailwindlabs/tailwindcss-typography) and [LaTeX.css](https://latex.now.sh/), with many of the styles being taken directly from the latter, and a few of the list styles being taken from the former.
+
+## Source
+
+The source code of this project can be found at [samrobbins85/latex-tailwind](https://github.com/samrobbins85/latex-tailwind)
+
 ## Specific classes
 
+`theorem` class:
+
 <div className="theorem">
 
 The real numbers are uncountable $\mathbb{R}$
 
 </div>
 
+`proof` class:
+
 <div className="proof">
 
 If $\mathbb{R}$ is countable, then $[0,1]$ is countable
 
 </div>
 
+`lemma` class:
+
 <div className="lemma">
 
 An even number plus an even number is an even number
 
 </div>
 
+`definition` class:
+
 <div className="definition">
 
 A definition is a statement
 
 </div>
 
+Also, as a nice little extra, you can style the <span className="latex">L<span>a</span>T<span>e</span>X</span> logo by typing
+
+```html
+<span class="latex">L<span>a</span>T<span>e</span>X</span>
+```
+
 ## General Markdown
 
 By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you _really are_ just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.

diff --git a/plugin/index.js b/plugin/index.js
@@ -360,6 +360,21 @@ components = {
 		fontSize: "1rem",
 		marginBottom: "-0.2rem",
 	},
+	".latex span": {
+		textTransform: "uppercase",
+		lineHeight: "1ex",
+		"&:nth-child(1)": {
+			fontSize: "0.75em",
+			verticalAlign: "0.28em",
+			marginLeft: "-0.48em",
+			marginRight: "-0.15em",
+		},
+		"&:nth-child(2)": {
+			verticalAlign: "-0.5ex",
+			marginLeft: "-0.1667em",
+			marginRight: "-0.125em",
+		},
+	},
 };
 
 module.exports = plugin(function ({ addBase, addUtilities, addComponents }) {