Giter Club home page Giter Club logo

next-js-template's Introduction

Contributors Forks Stargazers Issues MIT License


Logo

unfoldwingWord Next.js Application Template

An experiment to create an unfoldingWord template for Next.js based applications.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. License
  7. Contact
  8. Acknowledgments

About The Project

Product Name Screen Shot

Purpose

  • The purpose of this project is to create an unfoldingWord template for Next.js based applications to allow developers to easily get started with an app without a lot of boilerplate code.

Problem

  • The process to get started with a new POC or MVP application should be quick and easy so that developers can validate the feasibility of their ideas, features, and solution to problems.

Background

  • Increase velocity of starting a new application
  • Increase consistency and adherence to unfoldingWord branding

(back to top)

Built With

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Q. Why would you want to run the template?

A. You will run the template in order to improve it, test it, extend it, etc.

Prerequisites

Things you need to use the software and how to install them.

  • npm

    npm install npm@latest -g

Installation/First Steps

  1. Clone the repo

    git clone https://github.com/unfoldingWord-box3/next-js-template.git

NOTE: alternativiely, the repo may be forked.

  1. Install NPM packages

    npm install

    or

    yarn install

  2. Run the app

    npm run dev

    or

    yarn dev

  3. Point browser to localhost:3000

  4. Create a branch to contain your changes.

  5. Make changes, commit, and push to your branch.

  6. When changes are complete, create Pull Request (PR) and request they be reviewed and merged.

(back to top)

Usage/Integration

Q. Why would you want to use the template?

A. You will use the template to create a new unfoldingWord application.

Steps

  • Update package.json as needed
  • There are these places where the app name must be updated:
    • package.json
    • src/common/constants.js
    • src/common/sendFeedback.js

Please refer to the Nextjs Readme for more Nextjs specific documentation.

Using the Tutorials

TBD... here point to one or more tutorials showing how to use the template to actually develop something useful...

Potential Ideas:

  • Using the Bible Reference RCL with Proskomma
  • Using the Translation Helps RCL to display content

(back to top)

Roadmap

  • POC
  • Prototype
  • MVP

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. Guidelines for external contributions.

You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

If you would like to fork the repo and create a pull request.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature-github_username-AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

unfoldingWord - @unfoldingWord - [email protected]

Project Link: https://github.com/unfoldingWord-box3/next-js-template

(back to top)

Acknowledgments

(back to top)

next-js-template's People

Contributors

abelpz avatar mandolyte avatar mannycolon avatar superdav42 avatar

Watchers

avatar avatar avatar

Forkers

abelpz

next-js-template's Issues

Add Markdown support

The "card" as used in gateway-edit support Markdown and adds a preview button to render Markdown as HTML in the card.

Layout should be an array not an object

Here is console message:

Warning: Failed prop type: Invalid prop `layout` of type `object` supplied to `Workspace`, expected `array`.
    at Workspace (http://localhost:3000/_next/static/chunks/2.js:6234:24)
    at WorkspaceContainer (http://localhost:3000/_next/static/chunks/2.js:6528:77)
    at LoadableComponent (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1635941328353:277058:37)
    at main
    at div
    at Layout (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1635941328353:500345:23)

Here is a debug log message inserted into the code to show type:

layout, typeof= {lg: Array(5), md: Array(6), sm: Array(6), xs: Array(6)} object

Clean up package.json

There are a number of dependencies that are not actually used. This issue to remove all such.

Implement Tutorial 2

Suggest: building on the first tutorial, implement a translation help in each tab. For example, if there are three tabs, then for a given book (see below), then have the following:

  • a tab containing translation notes
  • a tab containing translation word list
  • a tab containing translation questions
    (note: all of these are TSV formats... maybe some variety should be considered)

Note on Book Input:
In the figma mockups here, an "add" button is shown. Perhaps such a button could be used to select a book?

Remove remaining gatewayEdit specific components

With the Bible Reference RCL removed, trying to use the app should now reveal all the gatewayEdit (GWE) components that depend on it.

These should all be removed.

Add a (new?) component that simply shows the uW logo in a resizable, draggable card component.

NOTE: the code for the Card component might be in the translation-helps-rcl... consider which is better:

  • updating translation helps to make the Card component usable apart for the rest of the helps
  • making a new RCL with the Card functionality (resize and drag); and perhaps update the helps to use it as well
  • coping the code from helps to this template

Warning on startup

Open console as app starts:

react-dom.development.js:67 Warning: Prop `id` did not match. Server: "remember-0.0983207371004855" Client: "remember-0.5848491617373031"
    at input
    at span
    at span
    at ButtonBase (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:4457:22)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:182120:31)
    at IconButton (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:14796:27)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:182120:31)
    at SwitchBase (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:35809:25)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:182120:31)
    at Checkbox (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:6572:34)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:182120:31)
    at label
    at FormControlLabel (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:12032:23)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:182120:31)
    at form
    at div
    at LoginForm (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:196375:21)
    at div
    at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:286058:19954)
    at div
    at Onboarding (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1635938399312:500748:29)
    at main
    at div
    at Layout (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1635938399312:500345:23)
    at Home
    at StoreContextProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:292382:77)
    at AuthenticationContextProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:196244:22)
    at AuthContextProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:292070:73)
    at ThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:180823:24)
    at Application (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:291096:24)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1635938399312:146:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1635938399312:250:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1635938399312:8692:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1635938399312:9180:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1635938399312:9316:25)
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
warnForPropDifference @ react-dom.development.js:8824
diffHydratedProperties @ react-dom.development.js:9645
hydrateInstance @ react-dom.development.js:10400
prepareToHydrateHostInstance @ react-dom.development.js:14616
completeWork @ react-dom.development.js:19458
completeUnitOfWork @ react-dom.development.js:22815
performUnitOfWork @ react-dom.development.js:22787
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
renderReactElement @ index.tsx:524
doRender @ index.tsx:793
_callee2$ @ index.tsx:425
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_render @ main.js?ts=1635938399312:9057
render @ main.js?ts=1635938399312:8994
(anonymous) @ next-dev.js:85
(anonymous) @ fouc.js:14
requestAnimationFrame (async)
displayContent @ fouc.js:5
(anonymous) @ next-dev.js:84
Promise.then (async)
(anonymous) @ next-dev.js:31
./node_modules/next/dist/client/next-dev.js @ next-dev.js:31
__webpack_require__ @ bootstrap:872
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js?ts=1635938399312:2
Show 2 more frames

Bug/Feedback report is not working

Here is the error shown:
image

In console:

POST http://localhost:3000/api/feedback 404 (Not Found)

FeedbackCard.js:271 onSubmitFeedback() - error response = {"code":"not_found","message":"Error: Provide at least one of to, cc or bcc"}

Card Menu isn't working

The card menu today only provides a single action, namely to adjust the font size. When the menu is clicked, there is the console output:

react.development.js:220 Warning: Failed prop type: The prop `setFilters` is marked as required in `SettingsCard`, but its value is `undefined`.
    at SettingsCard (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:287462:19)
    at Card (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:286269:18)

The font size dialog actually opens:
image

The dialog is draggable, but if you attempt to use the slider, Next.js shows:
image

Account Settings: Text Change

In the snippet below, the word "Primary" is used twice.

  • In the first case, the single word should be removed leaving just "Choose your Organization and Language"
  • In the second case, remove the two words "Primary Translating", leaving the single word "Language"

image

Modifications to Home Page

Discussed in https://github.com/unfoldingWord-box3/next-js-template/discussions/3

Originally posted by mandolyte October 18, 2021
Since this template is derived from gatewayEdit, there are some things that we need to change right at the start. Here is what shows on startup:
image

I propose the following:

  • change the name in upper left to, say, "uW Template"
  • update README with instructions on how to change the name
  • completely remove the Bible Reference RCL in the app bar

Dynamic Language List

Two Parts:

  • Obtain list of languages from the Translation Database (instead of using hardcoded list)
  • Filter the list in UI based on languages available in the selected org

Recover vertical space for users

This is an enhancement idea...
Problem The header and footer consume a lot vertical space that could be used by the application and users.

Propose

  1. Remove footer entirely and put the build in the header (same as tc-create)
  2. Decrease height of header

Here is the current full screen appearance (at least height-wise):
image

Warning when cards are rendered

Need to add a key property?

react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `WorkspaceContainer`. See https://reactjs.org/link/warning-keys for more information.
    at Card (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1635938399312:286269:18)
    at WorkspaceContainer (http://localhost:3000/_next/static/chunks/1.js:6528:77)
    at LoadableComponent (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1635938399312:277058:37)
    at main
    at div
    at Layout (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1635938399312:500345:23)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.