Giter Club home page Giter Club logo

web-story-creation-tool's Introduction

Web Story creation Tool

This is a fork of web-stories-wp project for creating a pwa story creation tool.

Latest Release) Commit activity Code Coverage License

Build Integration Tests E2E Tests JS Tests PHP Tests Total alerts

  • Exporting Story

    • Stories can be exported as a zip which will have the following content
      • index.html - amp-story markup.
      • README.txt - contains instruction for how to use this output and insert into a webpage.
      • config.json - for internal use ( currently being used to import web stories made for this tool )
      • files for 1p media (if used).
    • These exported assets can be used on any webpage ( with the instructions provided in README.txt in the exported zip )
  • Importing Story

    • Stories exported from this tool can also be imported by anyone using the zip file
  • Local Media Support

    • Support for local media without any backend which gets saved in web storage ( IndexDB ).
  • Support for HUGO

    If you have a hugo site already setup, you may follow these instructions to embed a story.

    • Follow instructions here to add a shortcode to your hugo site.
    • Use web story creation tool to create a story and export/download it.
    • After unzipping the exported/downloaded zip file, drop it into the static folder of your Hugo site.
    • Lets say this unzipped folder name is web-story , you may then use {{< web-story dir="web-story" >}} in your .md files to embed the story.

Development

Default branch for development is try/playground any PR to add features to the creation-tool needs to be targeted to try/playground. The tool hosted on Github-pages has been built from the try/playground branch. For development use npm run playground:dev.

For running locally with pwa features

  • npm run playground:build
  • npm run playground:serve

web-story-creation-tool's People

Contributors

amovar18 avatar ayushnirwal avatar barklund avatar brittanyirl avatar brookegraham avatar carloskelly13 avatar cvolzke4 avatar dependabot-preview[bot] avatar dependabot[bot] avatar diegovar avatar dmmulroy avatar dvoytenko avatar github-actions[bot] avatar googleforcreators-bot avatar joannag6 avatar kienstra avatar littlemilkstudio avatar mariano-formidable avatar merapi avatar miina avatar mjangda avatar ndev1991 avatar obetomuniz avatar pbakaus avatar renovate-bot avatar samwhale avatar spacedmonkey avatar swissspidy avatar wassgha avatar westonruter avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

web-story-creation-tool's Issues

Mobile friendly Web Stories suite

Many changes and addition have been already made to make this instance of Web Stories suite mobile friendly. This Epic will keep track of further efforts towards this goal.

  • In the editor move the sidebar to the bottom of the screen and add a button to open and close it.
  • General styling changes.
  • Move options in header ( save, preview etc ) to a drop-down.
  • Fix inserting text from insert menu.
  • Restyle footer menu.
  • Open the bottom menu when a quick action is clicked.
  • Close bottom menu after an element has been inserted.
  • Fix Richtext elements not being editable

Images are not persistent after story import if not added in the story

Bug Description

If I upload an image/video and then create a story and download a story. If there is an image left which is not being used in the story. This image/video will be deleted when a new story is imported.

Expected Behaviour

Steps to Reproduce

  1. Upload some images/videos.
  2. Use the images/videos and make sure to leave one media as unused (i.e dont use them in the story).
  3. Download the story.
  4. Reset the tool.
  5. Refresh and then import the story.
  6. Now verify that the previously unused media has now been deleted.

Screenshots

Additional Context

  • Plugin Version:
  • WordPress Version:
  • Operating System:
  • Browser:

Instruction link is broken.

The link is broken in this sentence of readme file.. The section of Hugo.

Follow instructions here to add a shortcode to your hugo site.

Can you please fix this?

Thank you.

Improvements / bug fixes needed prior to showcase

Must(s)

  • Increase autosave frequency or save after every update on canvas.
  • Preview should work when offline ( or add some notice that on preview page about preview not working offline )
    • amp packages should also be bundled with preview.html.
  • Fix video poster image issue.
    • when importing a story video poster images are not imported.
  • remove hardcoded APIs that are now optional. ( see new playground implementation )
  • Add isImporting state var in useStoryImport.
  • storyExporprovider spell correction.
  • external media Provider utils may be found in the media package itself. Review and import from there.
  • move isValid checker function to external media utils.
  • remove showLocalMedia flag.
  • on story reset story, title field disappears.
  • on importing a story title field is not hydrated.

Should(s)

  • Add delete media callback
    • Media in the library panel can't be permanently deleted currently.
  • Add update media callback.
  • When importing a strory skip loading 1p media which is already in the library.

Could(s)

  • Preview could be more like an example web-page that show story in that context.
  • Rather than building a PWA, build as an electron renderer bundle. ( works but require a refactoring for making creating packages for distribution )
    • This will, in theory, eliminate the need for hosting and cross-browser compatibility would be a non-issue since electron renders into chromium.

Maybe(s)

  • Store data ( media, story state, etc ) in file systems using the main thread of electron.

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.