+
-FreeSewing v2 +FreeSewing
-
+
-FreeSewing v2
+FreeSewing
An open source platform for made-to-measure sewing patterns
MSF Médecins Sans Frontières / Doctors Without Borders — An international, independent, medical humanitarian organisation. See msf.org" +} + +export default jargon +``` + +### Using jargon in markdown + +This plugin will only add markup to your jargon if you emphasize it. In the following example, +only the first mention of MSF will be changed: + +```md +_MSF_ was founded in 1971 by 13 doctors and journalists. Today, MSF is a worldwide movement of more than 67,000 people. +``` + +This will be rendered as: + +```html +
+ + + MSF + + MSF Médecins Sans Frontières / Doctors Without Borders — An international, independent, medical humanitarian organisation. See msf.org + + + + was founded in 1971 by 13 doctors and journalists. Today, MSF is a worldwide movement of more than 67,000 people. +
+``` + +Which you can then style so that the definition is only show on hover/touch. + +### Styling your jargon + +You will need to add CSS to style your jargon properly, and hide the definition by default. +Below is an example to get you started: + +```css +// Add a dashed line under jargon terms +.jargon-term { + text-decoration: underline dotted #228be6 +} +// Add a question mark behind/above jargon terms +.jargon-term::after { + content: "?"; + font-weight: bold; + display: inline-block; + transform: translate(0, -0.5em); + font-size: 75%; + color: #228be6; + margin-left: 3px; +} +// Hover behavior for the therm itself +.jargon-term:hover { + position: relative; + text-decoration: none; + cursor: help; +} +// Hide info by default +.jargon-term .jargon-info { + display: none +} +// Show info on hover +.jargon-term:hover .jargon-info { + display: block; + position: absolute; + top: 1.5em; + left: 0; + background: #F8F8F8; + border: 1px solid #DCDCDC; + padding: 1rem; + border-radius: 4px; + font-size: 90%; + min-width: 250px; + max-width: 450px; + z-index: 1; +} +``` + +## Tips for using jargon + +### Lowercase your terms in the jargon file + +When looking for terms to match, we lowercase the term your emphazised. +So in the jargon file, you should use `msf`, but in your text, you can use `MSF`, `Msf`, or `msf`. + +### If you use HTML, only use inline elements + +Your jargon term definition can contain HTML, but only inline elements. +Typically, you will want to stick to: + + - Making things **bold** + - Inserting [links](#) + + ## About FreeSewing 🤔 Where the world of makers and developers collide, that's where you'll find FreeSewing. -Our [core library](https://freesewing.dev/en/freesewing) is a *batteries-included* toolbox +Our [core library](https://freesewing.dev/) is a *batteries-included* toolbox for parametric design of sewing patterns. It's a modular system (check our list -of [plugins](https://freesewing.dev/en/plugins) and getting started is as simple as: +of [plugins](https://freesewing.dev/plugins) and getting started is as simple as: ```bash npm init freesewing-pattern ``` -The [getting started] section on [freesewing.dev](https://freesewing.dev/) is a good +The [getting started](https://freesewing.dev/start) section on [freesewing.dev](https://freesewing.dev/) is a good entrypoint to our documentation, but you'll find a lot more there, including -our [API documentation](https://freesewing.dev/en/freesewing/api), -as well as [examples](https://freesewing.dev/en/freesewing/examples), -and [best practices](https://freesewing.dev/en/do). +our [API reference](https://freesewing.dev/api), +as well as [our turorial](https://freesewing.dev/tutorial), +and [best practices](https://freesewing.dev/do). If you're a maker, checkout [freesewing.org](https://freesewing/) where you can generate our sewing patterns adapted to your measurements. diff --git a/packages/gatsby-remark-jargon/example.png b/packages/gatsby-remark-jargon/example.png new file mode 100644 index 00000000000..f4c8c76162a Binary files /dev/null and b/packages/gatsby-remark-jargon/example.png differ diff --git a/packages/gatsby-remark-jargon/info.md b/packages/gatsby-remark-jargon/info.md new file mode 100644 index 00000000000..1134a9f1aa9 --- /dev/null +++ b/packages/gatsby-remark-jargon/info.md @@ -0,0 +1,130 @@ +## About + +This wraps the [remark-jargon](https://github.com/freesewing/freesewing/tree/develop/packages/remark-jargon) plugin +for Gatsby so you can use _jargon_ in the markdown/mdx of your Gatsby site: + + + +## Install + +```bash +npm install --save gatsby-remark-jargon +``` + +## Configuration + + +In `gatsby-config.js` include your jargon file, and add the remark plugin: + + +```js + { + resolve: 'gatsby-remark-jargon', + options: { jargon: require('./jargon.js') } + } +``` + +## Usage + +### The jargon file + +The jagon file is a simple key-value file: + +```js +const jargon = { + msf: "MSF Médecins Sans Frontières / Doctors Without Borders — An international, independent, medical humanitarian organisation. See msf.org" +} + +export default jargon +``` + +### Using jargon in markdown + +This plugin will only add markup to your jargon if you emphasize it. In the following example, +only the first mention of MSF will be changed: + +```md +_MSF_ was founded in 1971 by 13 doctors and journalists. Today, MSF is a worldwide movement of more than 67,000 people. +``` + +This will be rendered as: + +```html ++ + + MSF + + MSF Médecins Sans Frontières / Doctors Without Borders — An international, independent, medical humanitarian organisation. See msf.org + + + + was founded in 1971 by 13 doctors and journalists. Today, MSF is a worldwide movement of more than 67,000 people. +
+``` + +Which you can then style so that the definition is only show on hover/touch. + +### Styling your jargon + +You will need to add CSS to style your jargon properly, and hide the definition by default. +Below is an example to get you started: + +```css +// Add a dashed line under jargon terms +.jargon-term { + text-decoration: underline dotted #228be6 +} +// Add a question mark behind/above jargon terms +.jargon-term::after { + content: "?"; + font-weight: bold; + display: inline-block; + transform: translate(0, -0.5em); + font-size: 75%; + color: #228be6; + margin-left: 3px; +} +// Hover behavior for the therm itself +.jargon-term:hover { + position: relative; + text-decoration: none; + cursor: help; +} +// Hide info by default +.jargon-term .jargon-info { + display: none +} +// Show info on hover +.jargon-term:hover .jargon-info { + display: block; + position: absolute; + top: 1.5em; + left: 0; + background: #F8F8F8; + border: 1px solid #DCDCDC; + padding: 1rem; + border-radius: 4px; + font-size: 90%; + min-width: 250px; + max-width: 450px; + z-index: 1; +} +``` + +## Tips for using jargon + +### Lowercase your terms in the jargon file + +When looking for terms to match, we lowercase the term your emphazised. +So in the jargon file, you should use `msf`, but in your text, you can use `MSF`, `Msf`, or `msf`. + +### If you use HTML, only use inline elements + +Your jargon term definition can contain HTML, but only inline elements. +Typically, you will want to stick to: + + - Making things **bold** + - Inserting [links](#) + + diff --git a/packages/gatsby-remark-jargon/package.json b/packages/gatsby-remark-jargon/package.json index 31a59abed35..1a59339f113 100644 --- a/packages/gatsby-remark-jargon/package.json +++ b/packages/gatsby-remark-jargon/package.json @@ -1,6 +1,6 @@ { "name": "gatsby-remark-jargon", - "version": "2.1.0", + "version": "2.1.1-beta.0", "description": "A gatsby-transformer-remark sub-plugin for jargon terms", "author": "Joost De Cock
-
+
-FreeSewing v2
+FreeSewing
An open source platform for made-to-measure sewing patterns