updated intro text

frontend/web-editor/src/stores/text-elements.js

@@ -13,25 +13,27 @@ module.exports = {
             },
             info: {
                 title: 'hydra',
-                subtitle: 'live coding networked visuals',
-                description: 'Hydra is a platform for live coding visuals, in which each connected browser window can be used as a node of a modular and distributed video synthesizer.',
+                subtitle: 'live coding video synth',
+                description: 'Hydra is live code-able video synth and coding environment that runs directly in the browser. It is free and open-source and made for beginners and experts alike.',
                 'get-started-title': 'To get started:',
                 'get-started-list': [
                     'Close this window',
                     'Change some numbers',
                     'Type Ctrl + Shift + Enter'
                 ],
-                'description-detailed': 'Built using WebRTC (peer-to-peer web streaming) and WebGL, hydra allows each connected browser/device/person to output a video signal or stream, and receive and modify streams from other browsers/devices/people. The API is inspired by analog modular synthesis, in which multiple visual sources (oscillators, cameras, application windows, other connected windows) can be transformed, modulated, and composited via combining sequences of functions.',
-                'features': 'Features:',
-                'features-list': [
-                    'Written in javascript and compatible with other javascript libraries',
-                    'Available as a platform as well as a set of standalone modules',
-                    'Cross-platform and requires no installation (runs in the browser)',
-                    'Also available as a package for live coding from within atom text editor',
-                    'Experimental and forever evolving !!'
+                'description-detailed': 'Hydra is written in JavaScript and compiles to WebGL under the hood. The syntax is inspired by analog modular synthesis, in which chaining or patching a set of transformations together generates a visual result.',
+                'uses': 'Hydra can be used:',
+                'uses-list': [
+                    'to mix and add effects to camera feeds, screenshares, live streams, and videos',
+                    'to create generative and audio-reactive visuals, and share them online with others',
+                    'in combination with other javascript libraries such as P5.js, Tone.js, THREE.js, or gibber',
+                    'to add interactive video effects to a website',
+                    'to experiment with and learn about video feedback, fractals, and pixel operations',
+                    'to stream video between browsers and to live-jam with others online'
                 ],
                 'author': 'Created by <a {{author}}>olivia.</a>',
-                'more-info': 'For more information and instructions, see: <a {{docs}}>the online documentation</a>, <a {{functions}}>a list of hydra functions</a>, <a {{repo}}>the source code on github</a>, <a {{gallery}}>a gallery of user-generated sketches</a>, <a {{pixeljam}}>PIXELJAM collaborative editor</a>, <a {{hydra-book}}>Hydra Book</a>, and more <a {{tutorials}}>tutorials and examples.</a>',
+                'more-info': 'For more information and instructions, see: <a {{docs}}>the interactive documentation</a>, <a {{functions}}>a list of hydra functions</a>, <a {{garden}}>the community database of projects and tutorials</a>, <a {{gallery}}>a gallery of user-generated sketches</a>, and <a {{repo}}>the source code on github</a>,',
+
                 'more-info-forums': 'There is also an active <a {{discord}}>Discord server</a> and <a {{facebook}}>facebook group</a> for hydra users+contributors.',
                 'support': 'If you enjoy using Hydra, please consider  <a {{open-collective}} >supporting continued development <3 </a>.'
             }

frontend/web-editor/src/views/info.js

@@ -31,9 +31,10 @@ module.exports = function mainView(state, emit) {
         <p> ///////////////////////////////////////////////////////////<br><br><br>
           ${t('info.description-detailed')}
         </p>
-        <p>${t('info.features')}<ul>
-        ${t('info.features-list', { returnObjects: true }).map((text) => html`<li>${text}</li>`)}
-        </ul>
+        <p>${t('info.uses')}<ul>
+        ${t('info.uses-list', { returnObjects: true }).map((text) => html`<li>${text}</li>`)}
+        </ul></p>
+       
            <p class="align-right">${raw(t('info.author', { author: `href=https://ojack.xyz class=olivia target=_blank`}))}</p>
            <p>${raw(t('info.more-info', {
              docs: link("https://hydra.ojack.xyz/docs"),
@@ -41,6 +42,7 @@ module.exports = function mainView(state, emit) {
              gallery: link("https://twitter.com/hydra_patterns"),
              repo: link("https://github.com/hydra-synth/hydra"),
              pixeljam: link("http://pixeljam.glitch.me/"),
+             garden: link("https://hydra.ojack.xyz/garden"),
              'hydra-book': link("https://hydra-book.glitch.me/"),
              "tutorials": link("https://github.com/ojack/hydra/blob/master/examples/README.md")
            }))}</p>
@@ -60,6 +62,9 @@ module.exports = function mainView(state, emit) {
 }
 
 
+// <!---<p>${t('info.features')}<ul>
+// ${t('info.features-list', { returnObjects: true }).map((text) => html`<li>${text}</li>`)}
+// </ul></p>--->
 // module.exports = function mainView(state, emit) {
 //     return html`
 //   <div id="info-container" class="${state.showInfo ? "" : "hidden"}">