diff --git a/README.md b/README.md index 36c5f9f..f6461f3 100644 --- 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 index 0d1b012..fdd30a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "nextjs-template", + "name": "latex-tailwind", "version": "1.0.1", "lockfileVersion": 1, "requires": true, diff --git a/package.json b/package.json index c76c129..0827bd0 100644 --- 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 index 438ca13..0ca3814 100644 --- 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 ; + return ( + <> + + LaTeX Tailwind + + + + ); } export default MyApp; diff --git a/pages/_document.js b/pages/_document.js index f666d4e..f4504d6 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -5,6 +5,7 @@ class MyDocument extends Document { return ( +
diff --git a/pages/index.mdx b/pages/index.mdx index 6ad7b73..c3baf30 100644 --- a/pages/index.mdx +++ b/pages/index.mdx @@ -1,6 +1,6 @@
-# Hello +# LaTeX Tailwind

Sam Robbins

@@ -8,36 +8,77 @@ ## 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.
+## 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: +
The real numbers are uncountable $\mathbb{R}$
+`proof` class: +
If $\mathbb{R}$ is countable, then $[0,1]$ is countable
+`lemma` class: +
An even number plus an even number is an even number
+`definition` class: +
A definition is a statement
+Also, as a nice little extra, you can style the LaTeX logo by typing + +```html +LaTeX +``` + ## 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 index 7deb847..ab64fd0 100644 --- 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 }) {