Merge pull request #11 from myang5/my/miraheze-update

miraheze update

.gitignore

@@ -1,4 +1,3 @@
 dist/
 node_modules/
-*.psd
-package-lock.json
+*.psd

README.md

@@ -5,3 +5,9 @@ A simple formatter that takes in translators' dialogue and converts it into sour
 Link: https://myang5.github.io/twst-wiki-parser/
 
 This project uses a modified version of the Chrome Picker from [React Color](https://github.com/casesandberg/react-color).
+
+## Deployment
+
+- Create a branch called `gh-pages` and push to the remote repo
+- Go to the repo's Settings > Pages and insure that GitHub Pages recognizes the branch
+- Whenever commits are pushed to the remote's `main` branch, `.github/workflows/deploy.yml` will take care of deploying the `dist` folder to GitHub Pages

package.json

@@ -6,7 +6,8 @@
     "test": "jest",
     "dev": "webpack-dev-server --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js",
-    "ncu": "ncu \"/ckeditor/\" -u"
+    "ncu": "ncu \"/ckeditor/\" -u",
+    "lint": "eslint -c .eslintrc.prod.js"
   },
   "lint-staged": {
     "*.{js,jsx,css}": [

src/components/Header/Header.jsx

@@ -2,26 +2,14 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import './Header.less';
 
-const lastUpdated = '5/8/21';
-
 export default function Header() {
   const desc = (
     <>
-      A website to more easily upload event/gacha stories from the mobile idol
-      game Twisted Wonderland to the fandom wiki.
+      A website to more easily upload stories from the mobile game Twisted
+      Wonderland to the wiki.
       <br />
       It formats your story chapter into text that can be pasted directly into
       the &quot;source&quot; section of the page.
-      <br />
-      {'Developed by '}
-      <a
-        target="_blank"
-        rel="noreferrer"
-        href="https://twitter.com/gayandasleep"
-      >
-        midori
-      </a>
-      {` (last updated ${lastUpdated}).`}
     </>
   );
 

src/components/HowTo/HowTo.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import list from 'Assets/list.png';
 import headingExample from 'Assets/headingExample.png';
 import partExample from 'Assets/partExample.png';
 import './HowTo.less';
@@ -17,7 +16,7 @@ export default function HowTo() {
             images by inserting the EXACT file name (ex. Bg 10101.png)
             into the dialogue on its own line. A list of all background images
             can be found here:{' '}
-            <a href="https://twisted-wonderland.fandom.com/wiki/Category:Story_Background_Images">
+            <a href="https://twistedwonderland.miraheze.org/wiki/Category:Story_Background_Images">
               Story Background Images
             </a>
           </li>
@@ -124,40 +123,44 @@ export default function HowTo() {
 
         <h3 id="tlNotesSection">TL Notes Tab</h3>
         <p>
-          In the Text tab, you can mark the place the translation note refers to
-          with a marker like this:
+          In the Text tab, you can mark the place where translation note should
+          be inserted like this:
         </p>
         <blockquote>
-          Izumi: I don’t know if they’re Eden or oden[1] or what, but we can’t
-          let them have their way in our territory[2].
+          Idia: Generally I hate talking face-to-face, but if I’m playing a
+          BG…[1] What, you don’t know what BG means? It stands for ‘board
+          game’…”[2]
         </blockquote>
         <p>
-          You can have markers in the middle or end of the line, or even
-          multiple markers in one line if needed.
+          You can have multiple markers in the middle or end of the dialogue
+          line
         </p>
         <p>
-          In the TL Notes tab, here&apos;s an example of how the notes should be
-          formatted:
+          In the TL Notes tab, paste in the actual text of the translation
+          notes:
         </p>
         <blockquote>
-          <ol>
-            <li>Place translator notes in a numbered list like this.</li>
-            <li>Make sure the numbers correspond to each marker!</li>
-          </ol>
+          <p>
+            1. Translation notes should start with a number followed by a
+            period.
+          </p>
+          <p>
+            If a paragraph doesn&apos;t start with a number, the formatter will
+            assume that the paragraph is part of the previous note.
+          </p>
+          <p>2. Second translation note</p>
         </blockquote>
         <ul>
           <li>
-            The formatter identifies TL notes by looking for numbers at the
-            beginning of a paragraph.
+            Technically, you don&apos;t need to worry about matching the exact
+            numbers in the TL note markers to the TL note text. The formatter
+            will insert the TL notes in the order that they appear in the TL
+            Notes tab.
           </li>
           <li>
-            <strong>
-              The TL notes can also be in an actual ordered list, which is
-              preferable.
-            </strong>{' '}
-            You can use the editor to format the list:
+            Just make sure that you have an equal number of markers and TL notes
+            :0
           </li>
-          <img alt="how to create the list with the editor" src={list} />
         </ul>
       </div>
       <footer />

src/components/Main/Main.jsx

@@ -4,9 +4,9 @@ import {
   TabMenu,
   TabContent,
   InputEditor,
+  TLNotesEditor,
   DetailContent,
   RenderContent,
-  TLNotesContent,
 } from '../TabComponents';
 import convertText from 'Utils/convertText';
 import './Main.less';
@@ -49,7 +49,7 @@ const Input = () => {
         <RenderContent />
       </TabContent>
       <TabContent {...{ value: TABS.TL_NOTES, clicked }}>
-        <TLNotesContent />
+        <TLNotesEditor />
       </TabContent>
     </div>
   );
@@ -64,7 +64,6 @@ const Buttons = ({ outputRef }) => {
   const { nav, details, setDetails, renders, inputRef, tlNotesRef } =
     useContext(StateContext);
   const [copyButton, setCopyButton] = useState(COPY_BUTTON_TEXT.COPY);
-  const [error, setError] = useState('');
 
   // copies text to clipboard
   const copyToClip = () => {
@@ -75,7 +74,6 @@ const Buttons = ({ outputRef }) => {
 
   const convertOnClick = () => {
     setCopyButton(COPY_BUTTON_TEXT.COPY);
-    setError('');
     const output = convertText({
       inputData: inputRef.current.editor.getData(),
       tlNotesData: tlNotesRef.current.editor.getData(),
@@ -95,7 +93,6 @@ const Buttons = ({ outputRef }) => {
       <button type="button" onClick={copyToClip} id="copy-button">
         {copyButton}
       </button>
-      <p className="error">{error}</p>
     </div>
   );
 };

src/components/Main/Main.less

@@ -43,8 +43,7 @@
   flex-direction: column;
   margin: @tab-menu-height 0 0 0;
 
-  button,
-  .error {
+  button {
     width: @actions-width;
     margin: 0 0 1rem 0;
   }
@@ -65,11 +64,6 @@
   #copy-button {
     &:extend(.secondary-button);
   }
-
-  .error {
-    color: red;
-    text-align: center;
-  }
 }
 
 @media (max-width: @breakpoint) {
@@ -97,12 +91,5 @@
     button {
       margin: 0 0.5rem;
     }
-
-    .error {
-      width: 80%;
-      flex: 1 0 auto;
-      margin-top: 0.5rem;
-      margin-bottom: 0;
-    }
   }
 }

src/components/TabComponents/CKEditor.jsx

@@ -18,6 +18,7 @@ export function InputEditor() {
   // get refs from EditorContext to provide to CKEditor components
   // refer to Main.js code
   const { renderRef, setRenders, inputRef } = useContext(StateContext);
+  const howToLink = window.location.href + 'howto';
 
   // updates the dialogue render inputs when content of InputArea changes
   const updateNames = (editor) => {
@@ -46,7 +47,7 @@ export function InputEditor() {
     },
   };
 
-  const inputEditorData = `<p>If this is your first time using the formatter, please check the <a href='/#/howto'>Text Guidelines</a> to make
+  const inputEditorData = `<p>If this is your first time using the formatter, please check the <a href='${howToLink}'>Text Guidelines</a> to make
         sure your text is ready.</p>
       <p>---EXAMPLE DIALOGUE---</p>
       <p>Bg 64207.png</p>
@@ -89,9 +90,6 @@ export function TLNotesEditor() {
     toolbar: ['bold', 'italic', 'link', 'numberedList', '|', 'undo', 'redo'],
   };
 
-  const tlNotesEditorData = `<p>If this is your first time using the formatter, please check the <a href='./howto.html#tlNotesSection'>Text
-     Guidelines</a> for how to add translation notes.</p>`;
-
   useEffect(() => {
     // Grab the HTML element using ref.current.editor
     // https://github.com/ckeditor/ckeditor5/issues/1185
@@ -108,7 +106,6 @@ export function TLNotesEditor() {
     <CKEditor
       editor={BalloonEditor}
       config={tlNotesEditorConfig}
-      data={tlNotesEditorData}
       ref={tlNotesRef}
     />
   );

src/components/TabComponents/RenderContent.jsx

@@ -18,7 +18,7 @@ export default function RenderContent() {
         <a
           target="_blank"
           rel="noreferrer"
-          href="https://twisted-wonderland.fandom.com/wiki/Template:Story_Character"
+          href="https://twistedwonderland.miraheze.org/wiki/Template:Story_Character"
         >
           template documentation
         </a>{' '}

src/components/TabComponents/TabContent.less

@@ -13,7 +13,7 @@
     display: flex;
   }
 
-  &:not(.tab-content--text) {
+  &:not(.tab-content--text, .tab-content--tl-notes) {
     padding: 20px;
     flex-direction: column;
     overflow-y: auto;
@@ -68,7 +68,8 @@
   }
 }
 
-.tab-content--text {
+.tab-content--text,
+.tab-content--tl-notes {
   .ck.ck-editor__editable_inline {
     border: none;
     height: inherit;
@@ -87,33 +88,3 @@
     margin-bottom: 0;
   }
 }
-
-.tab-content--tl-notes {
-  .tab-content__grid {
-    height: 100%;
-    grid-template-rows: auto auto 1fr;
-
-    .tab-content__tl-editor-label {
-      align-self: start;
-    }
-
-    .tab-content__tl-editor {
-      display: flex;
-      height: 100%;
-      align-items: flex-start;
-    }
-  }
-
-  .ck.ck-editor__editable_inline {
-    border: 1px solid var(--ck-color-base-border);
-    height: 100%;
-    width: 100%;
-    max-height: initial;
-    overflow-y: auto;
-    -webkit-appearance: textfield;
-  }
-
-  .ck.ck.ck-editor__editable_inline:not(.ck-editor__nested-editable).ck-focused {
-    border: 1px solid var(--ck-color-base-border);
-  }
-}

src/components/TabComponents/index.js

@@ -1,6 +1,5 @@
 export { default as TabMenu } from './TabMenu';
 export { default as TabContent } from './TabContent';
-export { InputEditor } from './CKEditor';
+export { InputEditor, TLNotesEditor } from './CKEditor';
 export { default as DetailContent } from './DetailContent';
 export { default as RenderContent } from './RenderContent';
-export { default as TLNotesContent } from './TLNotesContent';