0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-27 00:42:40 +00:00

Merge pull request #1664 from naturalcrit/v3.0.0

V3.0.0
This commit is contained in:
Trevor Buckner
2021-09-11 00:40:17 -04:00
committed by GitHub
6 changed files with 262 additions and 44 deletions

View File

@@ -28,10 +28,195 @@ pre {
.page {
padding-bottom:.5cm;
}
.page p + pre {
margin-top : 0.1cm;
}
```
# changelog
### Saturday, 28/08/2021 - v3.0.0
We have been working on v3 for a *very* long time. We want to thank everyone for being paitent.
Some features planned for V3 have actually been released over the recent months as part of V2, and some are still on the way. But at its core, V3 provides brand new Markdown-to-Brew rendering system, which was no simple task. This has opened up access to all sorts of bugfixes, tweaks, and potential for new features that just wouldn't be possible on the old system.
***BE WARNED:*** As we continue to develop V3, expect small tweaks in the styling, fonts, and snippets; your brews may look slightly different from day-to-day; some things might break completely while we tackle any bugs in this early stage. All of your old documents will continue to work as normal. We are not touching them. If you don't want to deal With the possibility of slight formatting changes, you may choose to stick with the Legacy renderer on any of your brews for as long as you like. However, most new features added from now on will only be available for brews using the V3 renderer.
Massive changelog incoming:
#### Markdown+
With the latest major update to *The Homebrewery*, we've implemented an extended Markdown-like syntax for block and span elements, plus a few other changes, eliminating the need for HTML tags like `div`, and `span` in most cases. This should hopefully aid non-coders with readability, and also allows us a few tricks in the background to fix some old issues. No raw HTML tags should be needed in a brew, and going forward, raw HTML will no longer receive debugging support (*but can still be used if you insist*).
All brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "Legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew. Much of the syntax and styling has changed in V3, so code in one version may be broken in the other.
Visit [this page](/v3_preview) for brief examples of the new syntax!
#### Extended Markdown Syntax:
{{taskList
* [x] Add Divs and Spans for all your custom styling needs, via a simplified Markdown-like syntax:
```
{{myDivClass,#myId,color:red
My Div content
}}
Hello {{mySpan,color:blue World}} !
```
Fixes issues: [#348](https://github.com/naturalcrit/homebrewery/issues/348)
* [x] Add inline CSS to Markdown objects via "curly injection" syntax:
```
Hello *world*{myClass,#id,color:red}
```
Fixes issues: [#403](https://github.com/naturalcrit/homebrewery/issues/403)
}}
\column
{{taskList
* [x] Rowspan, Colspan, and multiple header rows with extended table syntax:
```
| Header 1a | Header 1b | Header 1c |
| Header 2a | Header 2b | Header 2c |
|:---------:|:----------|:---------:|
| Span 2 columns || Span 2 |
| one col | one col | rows ^|
```
Fixes issues: [#773](https://github.com/naturalcrit/homebrewery/issues/773), [#191](https://github.com/naturalcrit/homebrewery/issues/191)
* [x] Hanging indents via `<dl>` tags, as seen in the **PHB → Spell** snippet. Add via "double-colon" syntax:
```
Term :: big long definition that bleeds onto multiple lines
```
Fixes issues: [#182](https://github.com/naturalcrit/homebrewery/issues/182), [#149](https://github.com/naturalcrit/homebrewery/issues/149)
* [x] Easier vertical spacing via colons alone on a line:
```
:::
```
Fixes issues: [#374](https://github.com/naturalcrit/homebrewery/issues/374)
* [x] Avoid paragraph indendation by ending the previous paragraph with a backslash `\` or two spaces ` `
```
Paragraph one\
Paragraph two
```
Fixes issues: [#636](https://github.com/naturalcrit/homebrewery/issues/636)
* [x] Code blocks can be inserted by surrounding it with rows of three backticks ` ``` `, for demonstration purposes or to share custom styles. Inline-code can be inserted with single backticks <code>&#96;code&#96;</code>
<pre><code>&#96;&#96;&#96;
Here is some code!
&#96;&#96;&#96;
</code></pre>
Fixes issues: [#465](https://github.com/naturalcrit/homebrewery/issues/465)
#### New and Fixed Snippets
* [x] Column breaks now use `\column` instead of ` ``` ` backticks.
Fixes issues: [#607](https://github.com/naturalcrit/homebrewery/issues/607)
* [x] Page breaks using `\page` now only trigger when placed alone at the start of a line.
Fixes issues: [#1147](https://github.com/naturalcrit/homebrewery/issues/1147)
* [x] New **EDITOR → QR Code** snippet.
Fixes issues: [#538](https://github.com/naturalcrit/homebrewery/issues/538)
* [x] New **IMAGES → Watercolor Splatter** snippet, which adds one of a range of stylish stains to your brew.
* [x] New **IMAGES → Watermark** snippet, which adds transparent text diagonally across the page.
* [x] New **PHB → Magic Item** snippet.
Fixes issues: [#671](https://github.com/naturalcrit/homebrewery/issues/671)
* [x] New **TABLES → 1/3 Class Table** snippet for 1/3 casters.
Fixes issues: [#191](https://github.com/naturalcrit/homebrewery/issues/191)
}}
\page
{{taskList
* [x] Improved **EDITOR → Table of Contents** snippet to actually look like the PHB style. Will auto-generate based on the headers in your brew.
Fixes issues: [#304](https://github.com/naturalcrit/homebrewery/issues/304)
* [x] Improved **PHB → Monster Stat Block** snippet with textures, and an option to remove the frame entirely.
* [x] Improved **PHB → Spell List** snippet can now be made single-column.
Fixes issues: [#509](https://github.com/naturalcrit/homebrewery/issues/509), [#914](https://github.com/naturalcrit/homebrewery/issues/914)
* [x] Improved **TABLES → Class Table** snippet is now cleaned up, has an option to remove the frame entirely, and includes additional boundary decorations.
Fixes issues: [#773](https://github.com/naturalcrit/homebrewery/issues/773), [#302](https://github.com/naturalcrit/homebrewery/issues/302)
#### Miscellaneous Formatting Fixes
* [x] Paragraphs are now able to split across columns.
Fixes issues: [#239](https://github.com/naturalcrit/homebrewery/issues/239)
* [x] Multiple fixes for bold/italicize using asterisks `* *`
Fixes issues: [#1321](https://github.com/naturalcrit/homebrewery/issues/1321), [#852](https://github.com/naturalcrit/homebrewery/issues/852)
* [x] Multiple for list items not displaying correctly.
Fixes issues: [#1085](https://github.com/naturalcrit/homebrewery/issues/1085), [#588](https://github.com/naturalcrit/homebrewery/issues/588)
* [x] "Smart quotes", so left and right quotes are different.
Fixes issues: [#849](https://github.com/naturalcrit/homebrewery/issues/849)
* [x] Long URLs in links now wrap properly.
Fixes issues: [#1136](https://github.com/naturalcrit/homebrewery/issues/1136)
* [x] Better support for `wide` blocks that span across the whole page! No more problems with contents getting shunted off the edge, and each new wide element in a page will restart the next item back at column one. Manual `\column` breaks will help organize subsequent content between the columns as needed.
Fixes issues: [#144](https://github.com/naturalcrit/homebrewery/issues/144), [#1024](https://github.com/naturalcrit/homebrewery/issues/1024)
* [x] Fonts now support a wider range of latin characters for non-English brews, including áéíóúñ¡¿, etc...
Fixes issues: [#116](https://github.com/naturalcrit/homebrewery/issues/116)
* [x] Drop-caps (fancy first letters) have been re-styled and re-aligned to correct the ugly overlapping and cut-off on some characters like K and Y.
Fixes issues: [#848](https://github.com/naturalcrit/homebrewery/issues/848)
}}
\column
### Under-the-Hood Stuff
We had to make a whole lot of background upgrades and changes to get all of this working, and now that the framework is in place, there's a lot more planned and upcoming *"sometime"* :
{{taskList
* [ ] New Themes to style your brews. DMG, MM, a custom Homebrewery theme, and others.
* [ ] The ability to build your own custom themes using CSS, apply it to other brews, and share it with others!
* [ ] Easy control of item colors. Change your monster blocks, tables, and notes from yellow to green to red!
* [ ] New image-based snippets, including handwritten notes, title illustrations, and alternative decorations.
* [ ] New fun fonts like Elvish, Draconic, Orcish, etc.
* [ ] Better organization of personal brews using tags.
* [ ] ....a log-out button...?
* [ ] AND MORE.
}}
### Interface
::
#### Style Editor Panel
{{fa,fa-paint-brush}} Technically released prior to v3 but still new to many users, check out the new **Style Editor** located on the right side of the Snippet bar. This editor accepts CSS for styling without requiring `<style>` tags-- anything that would have gone inside style tags before can now be placed here, and snippets that insert CSS styles are now located on that tab.
\page
### Thursday, 09/09/2021 - v2.13.5
- Slightly better error logging and messages for users.

View File

@@ -4,7 +4,7 @@ const createClass = require('create-react-class');
const _ = require('lodash');
const cx = require('classnames'); //Unused variable
const DISMISS_KEY = 'dismiss_notification7-10-20';
const DISMISS_KEY = 'dismiss_notification09-9-21';
const NotificationPopup = createClass({
getInitialState : function() {
@@ -22,22 +22,39 @@ const NotificationPopup = createClass({
notifications : {
psa : function(){
return <li key='psa'>
<em>Google Drive Integration!</em> <br />
We have added Google Drive integration to the Homebrewery! <a target='_blank' href='https://www.naturalcrit.com/login'>Sign in</a> with
your Google account to link it with your Homebrewery profile. A new button in the Edit page will let you transfer your file to your personal
Google Drive storage, and Google will keep a backup of each version! No more lost work surprises!
<em>V3.0.0 Released!</em> <br />
After a long and bumpy road, we decided it was high time we finally release version 3 of the homebrewery into the wild. You can check out a
brief overview and see how to opt-in to the new features here:&nbsp;
<a target='_blank' href='https://homebrewery.naturalcrit.com/v3_preview'>V3 Welcome Page</a> and&nbsp;
<a target='_blank' href='https://homebrewery.naturalcrit.com/changelog'>the Changelog</a>.
<br /><br />
However, we are aware that there may be uncaught bugs. We encourage you to copy your brew into a text document before transferring to Google
Drive just in case any issues arise as this update is rolled out.
<em>BE WARNED:</em> As we continue to develop V3, expect small tweaks in the styling, fonts, and snippets; your brews may look slightly
different from day-to-day. All of your old documents will continue to work as normal; we are not touching them. If you don't want to deal
with the possibility of slight formatting changes, you may choose to stick with the Legacy renderer on any of your brews for as long as you like.
<br /><br />
<b>Note:</b> Transferring an existing brew to Google Drive will change the edit and share links of your document. If you have shared your
document online, remember to update the links there as well.
With this in mind, if you still wish to try out V3, you can opt-in any of your brews to the the V3 renderer.
This will likely break much of your formatting as a lot of the Markdown code has been updated, and starting from scratch may be cleaner.
(Don't worry, you can always change the renderer back to Legacy for any brew at any time).
</li>;
},
refreshGoogle : function (){
return <li key='refreshGoogle'>
<em>Refresh your Google Drive Credentials!</em> <br />
Currently a lot of people are striking issues with their Google credentials expiring, which happens one year after the last sign in via
Google. This can cause errors when trying to save your brews. If this happens, simply visit the&nbsp;
<a target='_blank' href='https://www.naturalcrit.com/login'>
logout page
</a>
, sign out, and then sign back in "with Google" to refresh your credentials. See&nbsp;
<a target='_blank' href='https://github.com/naturalcrit/homebrewery/discussions/1580'>
this discussion on Github
</a> for more details.
</li>;
},
faq : function(){
return <li key='faq'>
<em>Protect your work! </em> <br />
If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews! &nbsp;
If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
See the FAQ
</a> to learn how to avoid losing your work!
@@ -62,8 +79,10 @@ const NotificationPopup = createClass({
return <div className='notificationPopup'>
<i className='fas fa-times dismiss' onClick={this.dismiss}/>
<i className='fas fa-info-circle info' />
<h3>Notice</h3>
<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
<div className='header'>
<h3>Notice</h3>
<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
</div>
<ul>{_.values(this.state.notifications)}</ul>
</div>;
}

View File

@@ -1,23 +1,22 @@
.popups{
position : fixed;
top : @navbarHeight;
top : @navbarHeight;
right : 15px;
z-index : 10001;
width : 350px;
width : 450px;
}
.notificationPopup{
position : relative;
float : right;
position : relative;
display : inline-block;
width : 350px;
width : 100%;
padding : 15px;
padding-bottom : 10px;
padding-left : 55px;
padding-left : 25px;
background-color : @blue;
color : white;
a{
color : @steel;
color : #e0e5c1;
font-weight : 800;
}
i.info{
@@ -37,6 +36,9 @@
opacity : 1;
}
}
.header {
padding-left : 50px;
}
small{
opacity : 0.7;
font-size : 0.6em;

View File

@@ -4,7 +4,7 @@ Welcome traveler from an antique land. Please sit and tell us of what you have s
### Homebrew D&D made easy
The Homebrewery makes the creation and sharing of authentic looking Fifth-Edition homebrews easy. It uses [Markdown](https://help.github.com/articles/markdown-basics/) with a little CSS magic to make your brews come to life.
**Try it! **Simply edit the text on the left and watch it *update live* on the right.
**Try it!** Simply edit the text on the left and watch it *update live* on the right.
@@ -36,8 +36,10 @@ This tool will **always** be free, never have ads, and I will never offer any "p
```
```
## Big things coming in v3.0.0
With the next major release of Homebrewery, v3.0.0, this tool *will no longer support raw HTML input for brew code*. All brews made previous to the release of v3.0.0 will still render normally.
## V3.0.0 Released!
With the latest major update to *The Homebrewery* we've implemented an extended Markdown-like syntax for block and span elements, plus a few other changes, eliminating the need for HTML tags like **div** and **span** in most cases. No raw HTML tags should be needed in a brew, and going forward, raw HTML will no longer receive debugging support (*but can still be used if you insist*).
**You can enable V3 via the <span class="fa fa-info-circle" style="text-indent:0"></span> Properties button!**
## New Things All The Time!
What's new in the latest update? Check out the full changelog [here](/changelog)
@@ -46,9 +48,9 @@ What's new in the latest update? Check out the full changelog [here](/changelog)
Have an idea of how to make The Homebrewery better? Or did you find something that wasn't quite right? Head [here](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) and let me know!.
### Legal Junk
The Homebrewery is licensed using the [MIT License](https://github.com/naturalcrit/homebrewery/blob/master/license). Which means you are free to use The Homebrewery is any way that you want, except for claiming that you made it yourself.
The Homebrewery is licensed using the [MIT License](https://github.com/naturalcrit/homebrewery/blob/master/license). This means you are free to use The Homebrewery codebase any way that you want, except for claiming that you made it yourself.
If you wish to sell or in some way gain profit for what's created on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
If you wish to sell or in some way gain profit for what you make on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
### More Resources
If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/comments/3uwxx9/resources_open_to_the_community/).

View File

@@ -6,8 +6,6 @@
.page {
padding-bottom : 1.3cm;
}
```
# The Homebrewery *V3*
@@ -25,17 +23,19 @@ Any changes you make while on the *edit url* will be automatically saved to the
Anyone with the *share url* will be able to access a read-only version of your homebrew.
### PDF Creation
{{note
##### PDF Creation
PDF Printing works best in Google Chrome. If you are having quality/consistency issues, try using Chrome to print instead.
After clicking the "Print" item in the navbar a new page will open and a print dialog will pop-up.
* Set the **Destination** to "Save as PDF"
* Set **Paper Size** to "Letter"
* If you are printing on A4 paper, make sure to have the {{far,fa-file}} **A4 Pagesize** snippet in your brew
* If you are printing on A4 paper, make sure to have the **PRINT → {{far,fa-file}} A4 Pagesize** snippet in your brew
* In **Options** make sure "Background Images" is selected.
* Hit print and enjoy! You're done!
If you want to save ink or have a monochrome printer, add the {{fas,fa-tint}} **Ink Friendly** snippet to your brew before you print
If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,fa-tint}} Ink Friendly** snippet to your brew before you print
}}
<img src='https://i.imgur.com/hMna6G0.png' style='position:absolute;bottom:50px;left:120px;width:180px' />
@@ -64,15 +64,13 @@ Need help getting started or just the right look for your brew? Head to [r/Homeb
Have an idea to make The Homebrewery better? Or did you find something that wasn't quite right? Check out the [GitHub Repo](https://github.com/naturalcrit/homebrewery/) to report technical issues.
### Legal Junk
The Homebrewery is licensed using the [MIT License](https://github.com/naturalcrit/homebrewery/blob/master/license). Which means you are free to use The Homebrewery codebase any way that you want, except for claiming that you made it yourself.
If you wish to sell or in some way gain profit for what's created on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
#### Crediting Me
If you'd like to credit The Homebrewery in your brew, I'd be flattered! Just reference that you made it with The Homebrewery.
If you'd like to credit me in your brew, I'd be flattered! Just reference that you made it with The Homebrewery.
### More Resources
If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/comments/3uwxx9/resources_open_to_the_community/).
@@ -139,9 +137,9 @@ Row spanning is achieved by adding a `^` at the end of a cell just before the `|
These can be combined to span a cell across both columns and rows. Cells must have the same colspan if they are to be rowspan'd.
##### Example
| | Spanned Header ||
| Head A | Head B | Head C |
|:-------|:-------|:-------|
| Head A | Spanned Header ||
| Head B | Head C | Head D |
|:-------|:------:|:------:|
| 1A | 1B | 1C |
| 2A ^| 2B | 2C |
| 3A ^| 3B 3C ||
@@ -149,7 +147,6 @@ These can be combined to span a cell across both columns and rows. Cells must ha
| 5A ^| 5B | 5C |
| 6A | 6B ^| 6C |
## Images
Images must be hosted online somewhere, like [Imgur](https://www.imgur.com). You use the address to that image to reference it in your brew\*. Images can be included using Markdown-style images.

View File

@@ -34,6 +34,9 @@ body {
font-weight : 800;
letter-spacing : -0.02em;
}
h5 + * {
margin-top : 0.1cm;
}
}
.useColumns(@multiplier : 1, @fillMode: balance){
column-count : 2;
@@ -78,7 +81,7 @@ body {
display : block;
line-height : 1.3em;
&+* {
margin-top : 0.27cm;
margin-top : 0.325cm;
}
&+p{
margin-top : 0;
@@ -177,6 +180,9 @@ body {
font-family : ScalySansSmallCapsRemake;
font-size : 0.423cm;
font-weight : 900;
& + * {
margin-top : 0.2cm;
}
}
//*****************************
// * TABLE
@@ -185,7 +191,7 @@ body {
.useSansSerif();
width : 100%;
& + * {
margin-top : 0.27cm;
margin-top : 0.325cm;
}
thead{
display: table-row-group;
@@ -217,9 +223,11 @@ body {
border-image : @noteBorderImage 12 stretch;
border-image-outset : 9px 0px;
border-image-width : 11px;
margin-top : 9px; //Prevent top border getting cut off on colbreak
padding : 0.13cm 0.16cm;
filter : drop-shadow(1px 4px 6px #888);
.page :where(&) {
margin-top : 9px; //Prevent top border getting cut off on colbreak
}
& + * {
margin-top : 0.45cm;
}
@@ -247,9 +255,11 @@ body {
border-width : 7px;
border-image : @descriptiveBoxImage 12 stretch;
border-image-outset : 4px;
margin-top : 4px; //Prevent top border getting cut off on colbreak
padding : 0.1em;
filter : drop-shadow(0 0 3px #faf7ea);
.page :where(&) {
margin-top : 4px; //Prevent top border getting cut off on colbreak
}
& + * {
margin-top : 0.45cm;
}
@@ -365,12 +375,13 @@ body {
background-attachment : fixed;
filter : drop-shadow(1px 4px 6px #888);
padding : 4px 2px;
margin : 0px -6px 1em;
margin-left : -6px;
margin-right : -6px;
}
position : relative;
padding : 0px;
margin-bottom : 1em;
margin-bottom : 0.325cm;
p{
margin-bottom : 0.3cm;
@@ -514,10 +525,12 @@ body {
border-image-width : 10px;
border-image-outset : 2px;
border-radius : 12px;
margin-top : 2px; //Prevent top border getting cut off on colbreak
margin-bottom : 2px;
.page :where(&) {
margin-top : 2px; //Prevent top border getting cut off on colbreak
}
& + * {
margin-top : 0.27cm;
margin-top : 0.325cm;
}
}
//*****************************