Update description and screenshot

Playground.doap

@@ -4,12 +4,10 @@
   xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
   xmlns:foaf="http://xmlns.com/foaf/0.1/"
   xmlns:gnome="http://api.gnome.org/doap-extensions#"
-  xmlns="http://usefulinc.com/ns/doap#"
->
+  xmlns="http://usefulinc.com/ns/doap#">
   <name>Playhouse</name>
   <shortdesc>A playground for HTML/CSS/JavaScript</shortdesc>
-  <description
-  >Something clever.</description>
+  <description>Playhouse make it easy to prototype, teach, design, learn and build Web things.</description>
 
   <homepage rdf:resource="https://playhouse.sonny.re" />
   <bug-database rdf:resource="https://playhouse.sonny.re/feedback" />
@@ -18,7 +16,7 @@
   <maintainer>
     <foaf:Person>
       <foaf:name>Sonny Piers</foaf:name>
-      <foaf:mbox rdf:resource="mailto:[email protected]" />
+      <foaf:mbox rdf:resource="mailto:[email protected]" />
       <foaf:account>
         <foaf:OnlineAccount>
             <foaf:accountServiceHomepage rdf:resource="https://github.com/" />
@@ -27,9 +25,7 @@
       </foaf:account>
       <foaf:account>
         <foaf:OnlineAccount>
-          <foaf:accountServiceHomepage
-            rdf:resource="https://gitlab.gnome.org"
-          />
+          <foaf:accountServiceHomepage rdf:resource="https://gitlab.gnome.org"/>
           <foaf:accountName>sonny</foaf:accountName>
         </foaf:OnlineAccount>
       </foaf:account>

README.md

@@ -1,10 +1,46 @@
+<img style="vertical-align: middle;" src="data/icons/hicolor/scalable/apps/re.sonny.Playhouse.svg" width="120" height="120" align="left">
+
 # Playhouse
 
 A playground for HTML/CSS/JavaScript
 
 ![screenshot](data/screenshot.png)
 
-This is a work in progress.
+<!-- <a href='https://beta.flathub.org/apps/details/re.sonny.Playhouse'><img width='180' height='60' alt='Download on Flathub' src='https://flathub.org/assets/badges/flathub-badge-en.svg'/></a> -->
+
+## About
+
+Playhouse make it easy to prototype, teach, design, learn and build Web things.
+
+Features:
+
+- HTML/CSS/JavaScript editors
+- live Web preview
+- standard keyboard shortcuts
+- Developer Tools
+- Dark/light mode support
+
+## Tips an tricks
+
+### How can I use a library?
+
+Use https://unpkg.com/ and dynamic imports in the `JavaScript` panel.
+
+```js
+// Example of loading a library that supports ES modules
+import("https://unpkg.com/[email protected]/esm/index.js?module")
+  .then((datefns) => {
+    console.log(datefns.add(new Date(), { days: 2 }));
+  })
+  .catch(console.error);
+
+// Example of loading a library that registers on the global object
+import("https://unpkg.com/[email protected]/dist/jquery.js")
+  .then(() => {
+    $("p").hide();
+  })
+  .catch(console.error);
+```
 
 ## Development
 

data/meson.build

@@ -14,14 +14,6 @@ if desktop_utils.found()
   )
 endif
 
-appstream_file = i18n.merge_file(
-  input: 're.sonny.Playhouse.metainfo.xml',
-  output: 're.sonny.Playhouse.metainfo.xml',
-  po_dir: '../po',
-  install: true,
-  install_dir: join_paths(get_option('datadir'), 'metainfo')
-)
-
 service_conf = configuration_data()
 service_conf.set('bindir', bindir)
 configure_file(
@@ -31,6 +23,21 @@ configure_file(
   install_dir: join_paths(get_option('datadir'), 'dbus-1/services')
 )
 
+appstream_file = i18n.merge_file(
+  input: 're.sonny.Playhouse.metainfo.xml',
+  output: 're.sonny.Playhouse.metainfo.xml',
+  po_dir: '../po',
+  install: true,
+  install_dir: join_paths(get_option('datadir'), 'metainfo')
+)
+
+appstream_cli = find_program('appstreamcli', required: false)
+if appstream_cli.found()
+  test('Validate metainfo file', appstream_cli,
+    args: ['validate', '--override=release-time-missing=info', '--no-net', appstream_file]
+  )
+endif
+
 appstream_util = find_program('appstream-util', required: false)
 if appstream_util.found()
   test('Validate appstream file', appstream_util,

data/re.sonny.Playhouse.metainfo.xml

@@ -4,20 +4,33 @@
   <launchable type="desktop-id">re.sonny.Playhouse.desktop</launchable>
   <name translatable="no">Playhouse</name>
   <developer_name translatable="no">Sonny Piers</developer_name>
-  <update_contact>[email protected]</update_contact>
+  <update_contact>[email protected]</update_contact>
   <metadata_license>CC0-1.0</metadata_license>
   <project_license>GPL-3.0</project_license>
   <summary>A playground for HTML/CSS/JavaScript</summary>
   <translation type="gettext">re.sonny.Playhouse</translation>
   <description>
-    <p>Something clever</p>
+    <p>Playhouse make it easy to prototype, teach, design, learn and build Web things.</p>
+    <ul>
+      <li>HTML/CSS/JavaScript editors</li>
+      <li>live Web preview</li>
+      <li>standard keyboard shortcuts</li>
+      <li>Developer Tools</li>
+      <li>Dark/light mode support</li>
+    </ul>
   </description>
   <url type="homepage">https://playhouse.sonny.re</url>
   <url type="bugtracker">https://playhouse.sonny.re/feedback</url>
   <url type="donation">https://playhouse.sonny.re/donate</url>
   <url type="translate">https://playhouse.sonny.re/translate</url>
+  <screenshots>
+    <screenshot type="default">
+      <image>https://raw.githubusercontent.com/sonnyp/Playhouse/main/data/screenshot.png</image>
+    </screenshot>
+  </screenshots>
   <content_rating type="oars-1.1" />
   <releases>
+    <release version="1.0" date="2022-10-xx"/>
   </releases>
   <kudos>
     <kudo>HiDpiIcon</kudo>

meson.build

@@ -1,5 +1,5 @@
 project('Playhouse',
-  version: '0.1.0',
+  version: '1.0',
   meson_version: '>= 0.59.0',
   license: 'GPL-3.0-only'
 )

src/Devtools.js

@@ -44,13 +44,13 @@ export default function Devtools({ web_view, window, builder }) {
     return true;
   }
 
-  ["attach", "bring-to-front", "detach", "open-window", "closed"].forEach(
-    (event) => {
-      inspector.connect(event, () => {
-        console.log(event);
-      });
-    },
-  );
+  // ["attach", "bring-to-front", "detach", "open-window", "closed"].forEach(
+  //   (event) => {
+  //     inspector.connect(event, () => {
+  //       console.log(event);
+  //     });
+  //   },
+  // );
 
   inspector.connect("attach", enableInspector);
   inspector.connect("open-window", enableInspector);

src/ShortcutsWindow.blp

@@ -5,6 +5,20 @@ ShortcutsWindow shortcuts_window {
 
   ShortcutsSection {
     ShortcutsGroup {
+      ShortcutsShortcut {
+        accelerator: "<Control><Shift>I";
+        title: _("Toggle Developer Tools");
+      }
+
+      ShortcutsShortcut {
+        accelerator: "<Control>Z";
+        title: _("Undo");
+      }
+      ShortcutsShortcut {
+        accelerator: "<Control><Shift>Z";
+        title: _("Redo");
+      }
+
       ShortcutsShortcut {
         accelerator: "<Primary>question";
         title: _("Keyboard Shortcuts");

src/window.blp

@@ -150,7 +150,7 @@ Adw.ApplicationWindow window {
           }
         }
 
-        ScrolledWindow panel_javascript {
+        ScrolledWindow {
           name: "panel_javascript";
           .GtkSourceView source_view_javascript {
             buffer: .GtkSourceBuffer {};