Get Gentoo!
gentoo.org sites
gentoo.org Wiki Bugs Forums Packages
Planet Archives Sources
Infra Status
aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--pkg/api/graphql/graphiql/graphiql.go17
-rw-r--r--pkg/app/serve.go4
-rw-r--r--pkg/config/config.go4
-rw-r--r--web/packs/graphiql.js2
-rw-r--r--web/packs/src/javascript/graphiql.js71
-rw-r--r--web/packs/src/stylesheets/graphiql.scss51
-rw-r--r--web/templates/api/explore/graphiql.tmpl25
-rw-r--r--webpack.config.js1
8 files changed, 175 insertions, 0 deletions
diff --git a/pkg/api/graphql/graphiql/graphiql.go b/pkg/api/graphql/graphiql/graphiql.go
new file mode 100644
index 0000000..16e930a
--- /dev/null
+++ b/pkg/api/graphql/graphiql/graphiql.go
@@ -0,0 +1,17 @@
+package graphiql
+
+import (
+ "html/template"
+ "net/http"
+ "soko/pkg/config"
+)
+
+func Show(w http.ResponseWriter, r *http.Request) {
+ w.Header().Add("Content-Type", "text/html")
+
+ templates := template.Must(
+ template.New("graphiql").
+ ParseGlob("web/templates/api/explore/*.tmpl"))
+
+ templates.ExecuteTemplate(w, "graphiql.tmpl", template.URL(config.GraphiqlEndpoint()))
+}
diff --git a/pkg/app/serve.go b/pkg/app/serve.go
index d1bee5d..b4659d5 100644
--- a/pkg/app/serve.go
+++ b/pkg/app/serve.go
@@ -8,6 +8,7 @@ import (
"log"
"net/http"
"soko/pkg/api/graphql/generated"
+ "soko/pkg/api/graphql/graphiql"
"soko/pkg/api/graphql/resolvers"
"soko/pkg/app/handler/about"
"soko/pkg/app/handler/arches"
@@ -72,6 +73,9 @@ func Serve() {
srv.Use(extension.FixedComplexityLimit(300))
http.Handle("/api/graphql/", cors(srv))
+ // graphiql: api explorer
+ setRoute("/api/explore/", graphiql.Show)
+
log.Fatal(http.ListenAndServe(":"+config.Port(), nil))
}
diff --git a/pkg/config/config.go b/pkg/config/config.go
index e4c1edf..db1e297 100644
--- a/pkg/config/config.go
+++ b/pkg/config/config.go
@@ -46,6 +46,10 @@ func Port() string {
return getEnv("SOKO_PORT", "5000")
}
+func GraphiqlEndpoint() string {
+ return getEnv("GRAPHIQL_ENDPOINT", "https://packages.gentoo.org/api/graphql/")
+}
+
func CacheControl() string {
return getEnv("SOKO_CACHE_CONTROL", "max-age=300")
}
diff --git a/web/packs/graphiql.js b/web/packs/graphiql.js
new file mode 100644
index 0000000..7b0e10b
--- /dev/null
+++ b/web/packs/graphiql.js
@@ -0,0 +1,2 @@
+import './src/javascript/graphiql';
+import './src/stylesheets/graphiql.scss';
diff --git a/web/packs/src/javascript/graphiql.js b/web/packs/src/javascript/graphiql.js
new file mode 100644
index 0000000..7d92312
--- /dev/null
+++ b/web/packs/src/javascript/graphiql.js
@@ -0,0 +1,71 @@
+function graphQLFetcher(graphQLParams) {
+ return fetch(
+ window.graphqlEndpoint,
+ {
+ method: 'post',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(graphQLParams),
+ credentials: 'omit',
+ },
+ ).then(function (response) {
+ return response.json().catch(function () {
+ return response.text();
+ });
+ });
+}
+
+
+ReactDOM.render(
+ React.createElement(GraphiQL, {
+ fetcher: graphQLFetcher,
+ defaultVariableEditorOpen: false,
+ defaultQuery: '#\n' +
+ '# Welcome to the packages.gentoo.org GraphQL API Explorer\n' +
+ '#\n' +
+ '# Powered by GraphiQL, an in-browser tool for exploring GraphQL APIs, as well as \n' +
+ '# writing, validating, and testing GraphQL queries.\n' +
+ '#\n' +
+ '#\n' +
+ '# Please click on "Examples & History" above to view some exemplary queries,\n' +
+ '# or run the below query to get started.\n' +
+ '#\n' +
+ '{\n' +
+ ' packages(Name: "gentoo-sources"){\n' +
+ ' Atom,\n' +
+ ' Maintainers {\n' +
+ ' Name\n' +
+ ' }\n' +
+ ' }\n' +
+ '}',
+ }),
+ document.getElementById('graphiql'),
+);
+
+/*
+ * Add gentoo Logo
+ */
+var gentooLogo= "<img src=\"https://www.gentoo.org/assets/img/logo/gentoo-signet.svg\" style=\"height: 30px;vertical-align:middle;\">";
+document.getElementsByClassName("title")[0].innerHTML = gentooLogo;
+
+/*
+ * Add examples
+ */
+
+document.getElementsByClassName("history-title")[0].innerHTML = "Examples & History";
+document.getElementsByClassName("toolbar-button")[3].innerHTML = "Examples & History";
+
+var favorites = window.localStorage.getItem("graphiql:favorites");
+
+if(favorites == null){
+ window.localStorage.setItem("graphiql:favorites", '{"favorites":[{"query":"\\n{\\n packages(Name: \\"gentoo-sources\\"){\\n Atom,\\n Maintainers {\\n Name\\n }\\n }\\n}","variables":null,"label":"Search Packages By Name","favorite":true}]}');
+ window.localStorage.setItem("graphiql:queries", '{"queries":[]}');
+ window.localStorage.setItem("graphiql:query", '## Welcome to the packages.gentoo.org GraphQL API Explorer## Powered by GraphiQL, an in-browser tool for exploring GraphQL APIs, as well as # writing, validating, and testing GraphQL queries.### Please click on "Examples & History" above to view some exemplary queries,# or run the below query to get started.#{ packages(Name: "gentoo-sources"){ Atom, Maintainers { Name } }}');
+ window.localStorage.setItem("graphiql:editorFlex", '1');
+ window.localStorage.setItem("graphiql:docExplorerWidth", '350');
+ window.localStorage.setItem("graphiql:variableEditorHeight", '200');
+ window.localStorage.setItem("graphiql:historyPaneOpen", 'true');
+ location.reload();
+}
diff --git a/web/packs/src/stylesheets/graphiql.scss b/web/packs/src/stylesheets/graphiql.scss
new file mode 100644
index 0000000..bbdf937
--- /dev/null
+++ b/web/packs/src/stylesheets/graphiql.scss
@@ -0,0 +1,51 @@
+body {
+ height: 100%;
+ margin: 0;
+ width: 100%;
+ overflow: hidden;
+}
+
+#graphiql {
+ height: 100vh;
+}
+
+.graphiql-container .history-contents li:hover {
+ background: #54487A !important;
+}
+
+.topBar, .docExplorerShow, .toolbar-button, .execute-button {
+ background: #FAFAFA !important;
+}
+
+.execute-button-wrap {
+ margin-left: 15px !important;
+}
+
+/*
+ * Fix the search icon by hiding the (broken)
+ * text and use a pure css solution instead.
+ */
+.search-box-icon {
+ text-indent: -1000em;
+ color: #000;
+ position: absolute;
+ margin-top: 2px;
+ margin-left: 0px;
+ width: 12px;
+ top: 3px !important;
+ height: 12px;
+ border: solid 1px currentColor;
+ border-radius: 100%;
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+
+.search-box-icon:before {
+ content: '';
+ position: absolute;
+ top: 12px;
+ left: 5px;
+ height: 6px;
+ width: 1px;
+ background-color: currentColor;
+}
diff --git a/web/templates/api/explore/graphiql.tmpl b/web/templates/api/explore/graphiql.tmpl
new file mode 100644
index 0000000..584b5fc
--- /dev/null
+++ b/web/templates/api/explore/graphiql.tmpl
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>GraphiQL - Gentoo Packages</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="theme-color" content="#54487a">
+ <meta name="description" content="Gentoo Packages GraphiQL GraphQL API Explorer">
+ <link rel="icon" href="https://packages.gentoo.org/favicon.ico" type="image/x-icon">
+ <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+ </head>
+
+ <body>
+ <div id="graphiql">
+ Loading...
+ </div>
+ <script src="https://unpkg.com/graphiql@0.17.5/graphiql.min.js" type="application/javascript"></script>
+ <script>
+ window.graphqlEndpoint = '{{ . }}';
+ </script>
+ <script src="/assets/graphiql.js" type="application/javascript"></script>
+ </body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
index a3be9c4..5587e45 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,6 +5,7 @@ module.exports = {
entry: {
stylesheets: './web/packs/stylesheets.js',
application: './web/packs/application.js',
+ graphiql: './web/packs/graphiql.js',
index: './web/packs/index.js',
packages: './web/packs/packages.js',
useflags: './web/packs/useflags.js',