diff options
Diffstat (limited to 'developer/index.html')
| -rw-r--r-- | developer/index.html | 819 |
1 files changed, 819 insertions, 0 deletions
diff --git a/developer/index.html b/developer/index.html new file mode 100644 index 000000000..f37b55631 --- /dev/null +++ b/developer/index.html @@ -0,0 +1,819 @@ + +<!doctype html> +<html lang="en" class="no-js"> + <head> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + + <meta name="description" content="Documentation for the Nextcloud News App"> + + + <meta name="author" content="Nextcloud News Team"> + + + <link rel="canonical" href="https://nextcloud.github.io/news/developer/"> + + + <link rel="prev" href="../admin/"> + + + <link rel="next" href="../troubleshooting/"> + + <link rel="icon" href="../assets/favicon.png"> + <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.6"> + + + + <title>Developer - Nextcloud News App</title> + + + + <link rel="stylesheet" href="../assets/stylesheets/main.558e4712.min.css"> + + + <link rel="stylesheet" href="../assets/stylesheets/palette.2505c338.min.css"> + + + + + + + + + + <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script> + + + + + + + </head> + + + + + + + + + + <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo"> + + + + <script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script> + + <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> + <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> + <label class="md-overlay" for="__drawer"></label> + <div data-md-component="skip"> + + + <a href="#developer" class="md-skip"> + Skip to content + </a> + + </div> + <div data-md-component="announce"> + + </div> + + + + +<header class="md-header" data-md-component="header"> + <nav class="md-header__inner md-grid" aria-label="Header"> + <a href=".." title="Nextcloud News App" class="md-header__button md-logo" aria-label="Nextcloud News App" data-md-component="logo"> + + <img src="../assets/logo.svg" alt="logo"> + + </a> + <label class="md-header__button md-icon" for="__drawer"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg> + </label> + <div class="md-header__title" data-md-component="header-title"> + <div class="md-header__ellipsis"> + <div class="md-header__topic"> + <span class="md-ellipsis"> + Nextcloud News App + </span> + </div> + <div class="md-header__topic" data-md-component="header-topic"> + <span class="md-ellipsis"> + + Developer + + </span> + </div> + </div> + </div> + + <form class="md-header__option" data-md-component="palette"> + + + <input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1"> + + <label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_2" hidden> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg> + </label> + + + + <input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_2"> + + <label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3Z"/></svg> + </label> + + + </form> + + + + <label class="md-header__button md-icon" for="__search"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> + </label> + <div class="md-search" data-md-component="search" role="dialog"> + <label class="md-search__overlay" for="__search"></label> + <div class="md-search__inner" role="search"> + <form class="md-search__form" name="search"> + <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required> + <label class="md-search__icon md-icon" for="__search"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg> + </label> + <nav class="md-search__options" aria-label="Search"> + + <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg> + </button> + </nav> + + </form> + <div class="md-search__output"> + <div class="md-search__scrollwrap" data-md-scrollfix> + <div class="md-search-result" data-md-component="search-result"> + <div class="md-search-result__meta"> + Initializing search + </div> + <ol class="md-search-result__list" role="presentation"></ol> + </div> + </div> + </div> + </div> +</div> + + + <div class="md-header__source"> + <a href="https://github.com/nextcloud/news" title="Go to repository" class="md-source" data-md-component="source"> + <div class="md-source__icon md-icon"> + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg> + </div> + <div class="md-source__repository"> + GitHub + </div> +</a> + </div> + + </nav> + +</header> + + <div class="md-container" data-md-component="container"> + + + + + + + <main class="md-main" data-md-component="main"> + <div class="md-main__inner md-grid"> + + + + <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" > + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + + + +<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0"> + <label class="md-nav__title" for="__drawer"> + <a href=".." title="Nextcloud News App" class="md-nav__button md-logo" aria-label="Nextcloud News App" data-md-component="logo"> + + <img src="../assets/logo.svg" alt="logo"> + + </a> + Nextcloud News App + </label> + + <div class="md-nav__source"> + <a href="https://github.com/nextcloud/news" title="Go to repository" class="md-source" data-md-component="source"> + <div class="md-source__icon md-icon"> + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg> + </div> + <div class="md-source__repository"> + GitHub + </div> +</a> + </div> + + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + + <li class="md-nav__item"> + <a href=".." class="md-nav__link"> + Introduction + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../install/" class="md-nav__link"> + Installation/Update & Uninstall + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../clients/" class="md-nav__link"> + Clients + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../admin/" class="md-nav__link"> + Admin + </a> + </li> + + + + + + + + + + + + + <li class="md-nav__item md-nav__item--active"> + + <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc"> + + + + + + <label class="md-nav__link md-nav__link--active" for="__toc"> + Developer + <span class="md-nav__icon md-icon"></span> + </label> + + <a href="./" class="md-nav__link md-nav__link--active"> + Developer + </a> + + + +<nav class="md-nav md-nav--secondary" aria-label="Table of contents"> + + + + + + + <label class="md-nav__title" for="__toc"> + <span class="md-nav__icon md-icon"></span> + Table of contents + </label> + <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#apis" class="md-nav__link"> + APIs + </a> + +</li> + + <li class="md-nav__item"> + <a href="#coding-style-guidelines" class="md-nav__link"> + Coding Style Guidelines + </a> + +</li> + + <li class="md-nav__item"> + <a href="#general-developer-setup" class="md-nav__link"> + General Developer setup + </a> + + <nav class="md-nav" aria-label="General Developer setup"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#frontend-tipsorganization" class="md-nav__link"> + Frontend Tips/Organization + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#testing" class="md-nav__link"> + Testing + </a> + + <nav class="md-nav" aria-label="Testing"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#frontend-unit-tests" class="md-nav__link"> + Frontend Unit Tests + </a> + +</li> + + <li class="md-nav__item"> + <a href="#api-and-cli-integration-tests" class="md-nav__link"> + API and CLI Integration Tests + </a> + +</li> + + </ul> + </nav> + +</li> + + </ul> + +</nav> + + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../troubleshooting/" class="md-nav__link"> + Troubleshooting + </a> + </li> + + + + + + + + + + + + + + <li class="md-nav__item md-nav__item--section md-nav__item--nested"> + + + + + + + <input class="md-nav__toggle md-toggle md-toggle--indeterminate" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" > + + + + + + + + + + + + + + <label class="md-nav__link" for="__nav_7" tabindex="0" aria-expanded="false"> + Features + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="Features" data-md-level="1"> + <label class="md-nav__title" for="__nav_7"> + <span class="md-nav__icon md-icon"></span> + Features + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../features/integration/" class="md-nav__link"> + Integration + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../features/customCSS/" class="md-nav__link"> + Custom CSS + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../features/plugins/" class="md-nav__link"> + Plugins + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../features/themes/" class="md-nav__link"> + Themes + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + + + + <li class="md-nav__item md-nav__item--section md-nav__item--nested"> + + + + + + + <input class="md-nav__toggle md-toggle md-toggle--indeterminate" data-md-toggle="__nav_8" type="checkbox" id="__nav_8" > + + + + + + + + + + + + <label class="md-nav__link" for="__nav_8" tabindex="0" aria-expanded="false"> + REST API + <span class="md-nav__icon md-icon"></span> + </label> + + <nav class="md-nav" aria-label="REST API" data-md-level="1"> + <label class="md-nav__title" for="__nav_8"> + <span class="md-nav__icon md-icon"></span> + REST API + </label> + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + <li class="md-nav__item"> + <a href="../api/api-v1-2/" class="md-nav__link"> + API v1.2 + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../api/api-v1-3/" class="md-nav__link"> + API v1.3 + </a> + </li> + + + + + + + + + + <li class="md-nav__item"> + <a href="../api/api-v2/" class="md-nav__link"> + API v2 + </a> + </li> + + + + + </ul> + </nav> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../maintenance/" class="md-nav__link"> + Maintenance + </a> + </li> + + + + </ul> +</nav> + </div> + </div> + </div> + + + + <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" > + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + + +<nav class="md-nav md-nav--secondary" aria-label="Table of contents"> + + + + + + + <label class="md-nav__title" for="__toc"> + <span class="md-nav__icon md-icon"></span> + Table of contents + </label> + <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#apis" class="md-nav__link"> + APIs + </a> + +</li> + + <li class="md-nav__item"> + <a href="#coding-style-guidelines" class="md-nav__link"> + Coding Style Guidelines + </a> + +</li> + + <li class="md-nav__item"> + <a href="#general-developer-setup" class="md-nav__link"> + General Developer setup + </a> + + <nav class="md-nav" aria-label="General Developer setup"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#frontend-tipsorganization" class="md-nav__link"> + Frontend Tips/Organization + </a> + +</li> + + </ul> + </nav> + +</li> + + <li class="md-nav__item"> + <a href="#testing" class="md-nav__link"> + Testing + </a> + + <nav class="md-nav" aria-label="Testing"> + <ul class="md-nav__list"> + + <li class="md-nav__item"> + <a href="#frontend-unit-tests" class="md-nav__link"> + Frontend Unit Tests + </a> + +</li> + + <li class="md-nav__item"> + <a href="#api-and-cli-integration-tests" class="md-nav__link"> + API and CLI Integration Tests + </a> + +</li> + + </ul> + </nav> + +</li> + + </ul> + +</nav> + </div> + </div> + </div> + + + + <div class="md-content" data-md-component="content"> + <article class="md-content__inner md-typeset"> + + + + + + + + +<h1 id="developer">Developer</h1> +<p>Welcome to the Nextcloud News App developer documentation.</p> +<p>News is open for contributions, if you plan to implement a new feature make sure to open a <a href="https://github.com/nextcloud/news/discussions/new?category=Features">discussion</a>. Describe the feature that you are planing and your first idea how to implement it. +This ensures that you don't start working on something which collides with the targets of the maintainers.</p> +<p>For small fixes and improvements feel free to directly create a PR, the maintainers are happy to review your code.</p> +<h2 id="apis">APIs</h2> +<p>News offers an API that can be used by clients to synchronize with the server. +There are two API declarations, so far only V1 has been fully implemented. +Work on V2 has started with low priority.</p> +<ul> +<li><a href="../api/api-v1-2/">API-V1.2</a></li> +<li><a href="../api/api-v1-3/">API-V1.3</a></li> +<li><a href="../api/api-v2/">API-V2</a></li> +</ul> +<h2 id="coding-style-guidelines">Coding Style Guidelines</h2> +<p>The PHP code should all adhere to <a href="https://www.php-fig.org/psr/psr-2/">PSR-2</a>. +<em>Note that this is a different codestyle than Nextcloud itself uses.</em> +To test the codestyle you can run <code>make phpcs</code>.</p> +<p>The application Front End uses Vue 2.7 and the Nextcloud Libraries <a href="https://github.com/nextcloud-libraries/nextcloud-vue">Vue Components</a> for building the Application running inside your Nextcloud instance. For linting these files, we are using eslint, see the <a href="https://github.com/nextcloud/news/blob/master/.eslintrc.js">config file</a>. We also have Unit Tests for the components that run with Jest, please ensure these pass when adding new features/fixing bugs.</p> +<h2 id="general-developer-setup">General Developer setup</h2> +<p>Check the Nextcloud <a href="https://docs.nextcloud.com/server/latest/developer_manual/getting_started/devenv.html">documentation</a> to learn how to setup a developer environment, alternatively to a proper web server you can also use the <a href="https://www.php.net/manual/en/features.commandline.webserver.php">builtin php server</a> on demand, it is enough for development purposes.</p> +<p>When your setup is running, clone the news repository in the <code>apps/</code> directory inside the server.</p> +<p>Change into the news directory and run <code>make</code> to build the app, you will need php, composer, node, npm and maybe more.</p> +<p>Now you can basically use the news app and test any changes you make on your local development environment. Check out the <code>appinfo/routes.php</code> file and <code>lib/controller/</code> directory for details on API controllers. Or check out <code>package.json</code> for npm scripts and the <code>src/</code> directory for the front end Vue Application.</p> +<h3 id="frontend-tipsorganization">Frontend Tips/Organization</h3> +<ul> +<li>We use the Nextcloud Vue component library for most of the form controls and navigation</li> +<li>Vuex is used for state management, this is similar to Redux and has Actions/Mutations and Getters</li> +<li>We are using the Nextcloud Webpack Vue configuration and have enabled Typescript support and importing in the Vue components</li> +<li>We use ESLint and StyleLint for ensuring correct formatting of the Scripts and HTML</li> +</ul> +<h2 id="testing">Testing</h2> +<p>Please make sure to run all tests before submitting any pull requests.</p> +<h3 id="frontend-unit-tests">Frontend Unit Tests</h3> +<p>Frontend unit tests are written with Jest and can be run with <code>npm run test</code>.</p> +<h3 id="api-and-cli-integration-tests">API and CLI Integration Tests</h3> +<p>We use <a href="https://bats-core.readthedocs.io/en/stable/">bats</a> to run integration tests against the API and the cli.</p> +<p>Check how to install bats on your system in the <a href="https://bats-core.readthedocs.io/en/stable/installation.html">official documentation</a>.</p> +<p>You also need to pull the submodules of the news repo.</p> +<div class="language-bash highlight"><pre><span></span><code><span id="code-line-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>git<span class="w"> </span>submodules<span class="w"> </span>update<span class="w"> </span>--init +</span></code></pre></div> +<p>The cli tests expect that the feeds are reachable at <code>http://localhost:8090</code>, to achieve that you can use <code>make feed-server &</code> the <code>&</code> means it'll run in the background.</p> +<p>Now the test feeds will be reachable for bats. +Run the tests by executing <code>bats tests/command</code> you can also only run specific tests for example <code>bats tests/command/feeds.bats</code>.</p> +<p>For the API tests you need to run a second php server or have another web server that provides Nextcloud and the News App. +The tests expect to find Nextcloud at <code>http://localhost:8080</code> +You can do this by running <code>make nextcloud-server</code>.</p> +<p>The bats tests can be executed like this <code>bats tests/api</code>.</p> + + + + + + + </article> + </div> + + + </div> + + </main> + + <footer class="md-footer"> + + <div class="md-footer-meta md-typeset"> + <div class="md-footer-meta__inner md-grid"> + <div class="md-copyright"> + + + Made with + <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener"> + Material for |