-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (78 loc) · 20.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE HTML><html><head><script type="application/ld+json">{
"@context" : "http://schema.org",
"@type" : "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https:\/\/robberthalff.com\/"
},
"articleSection" : "",
"name" : "",
"headline" : "",
"description" : "",
"inLanguage" : "en",
"author" : "",
"creator" : "",
"publisher": "",
"accountablePerson" : "",
"copyrightHolder" : "",
"copyrightYear" : "2019",
"datePublished": "2019-08-22 00:00:00 \x2b0000 UTC",
"dateModified" : "2019-08-22 00:00:00 \x2b0000 UTC",
"url" : "https:\/\/robberthalff.com\/",
"wordCount" : "1",
"keywords" : [ "Blog" ]
}</script><title>RobbertHalff</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Hugo 0.57.2"><meta name="description" content="Freelance Web Developer"><meta name="twitter:card" content="summary"><meta name="twitter:title" content=""><meta name="twitter:description" content="Freelance Web Developer"><meta name="twitter:site" content="@rhalff"><meta property="og:title" content=""><meta property="og:description" content="Freelance Web Developer"><meta property="og:type" content="website"><meta property="og:url" content="https://robberthalff.com/"><meta property="og:updated_time" content="2019-08-22T00:00:00+00:00"><meta property="og:image" content="https://robberthalff.com//images/logo.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="512"><meta property="og:image:height" content="512"><meta itemprop="name" content=""><meta itemprop="description" content="Freelance Web Developer"><link rel="stylesheet" type="text/css" href="https://robberthalff.com//css/code-tabs.css"><link rel="stylesheet" type="text/css" href="https://robberthalff.com//css/iframe.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800,900|Source+Sans+Pro:400,700"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css"><link rel="stylesheet" href="https://robberthalff.com/css/main.css"><link rel="stylesheet" href="https://robberthalff.com/css/add-on.css"><link rel="stylesheet" href="https://robberthalff.com/css/academicons.min.css"><link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/github.min.css" rel="stylesheet" type="text/css"></head><body><div id="wrapper"><header id="header"><h1>R[H] <a href="https://robberthalff.com/">RobbertHalff</a></h1><nav class="links"><ul><li><a href="https://robberthalff.com/"><i class="fa fa-home"> </i>Home</a></li><li><a href="https://robberthalff.com/blog/"><i class="fa fa-newspaper-o"> </i>Blog</a></li><li><a href="https://robberthalff.com/about/"><i class="fa fa-id-card-o"> </i>About</a></li><li><a href="https://robberthalff.com/contact/"><i class="fa fa-envelope-o"> </i>Contact</a></li></ul></nav><nav class="main"><ul><li id="share-nav" class="share-menu" style="display:none;"><a class="fa-share-alt" href="#share-menu">Share</a></li><li class="search"><a class="fa-search" href="#search">Search</a><form id="search" method="get" action="//google.com/search"><input type="text" name="q" placeholder="Search"> <input type="hidden" name="as_sitesearch" value="https://robberthalff.com/"></form></li><li class="menu"><a class="fa-bars" href="#menu">Menu</a></li></ul></nav></header><section id="menu"><section><form class="search" method="get" action="//google.com/search"><input type="text" name="q" placeholder="Search"> <input type="hidden" name="as_sitesearch" value="https://robberthalff.com/"></form></section><section><ul class="links"><li><a href="https://robberthalff.com/"><h3><i class="fa fa-home"> </i>Home</h3></a></li><li><a href="https://robberthalff.com/blog/"><h3><i class="fa fa-newspaper-o"> </i>Blog</h3></a></li><li><a href="https://robberthalff.com/about/"><h3><i class="fa fa-id-card-o"> </i>About</h3></a></li><li><a href="https://robberthalff.com/contact/"><h3><i class="fa fa-envelope-o"> </i>Contact</h3></a></li></ul></section><section class="recent-posts"><div class="mini-posts"><header><h3>Recent Posts</h3></header><article class="mini-post"><header><h3><a href="https://robberthalff.com/blog/adding_flutter_examples_to_hugo/">Flutter Examples in Hugo</a></h3><time class="published" datetime="2019-08-22">August 22, 2019</time></header></article><article class="mini-post"><header><h3><a href="https://robberthalff.com/blog/getting_started_with_validations/">@Validations</a></h3><time class="published" datetime="2019-08-08">August 8, 2019</time></header></article></div></section></section><div id="main"><article class="post"><header><div class="title"><h2><a href="https://robberthalff.com/blog/adding_flutter_examples_to_hugo/">Flutter Examples in Hugo</a></h2><p>Flutter examples in Hugo</p></div><div class="meta"><time class="published" datetime="2019-08-22">August 22, 2019</time> <span class="author">Robbert Halff</span><p>4 minute read</p></div></header><section id="social-share"><ul class="icons"><li><a href="//twitter.com/share?url=https%3a%2f%2frobberthalff.com%2fblog%2fadding_flutter_examples_to_hugo%2f&text=Flutter%20Examples%20in%20Hugo&via=rhalff" target="_blank" class="share-btn twitter"><i class="fa fa-twitter"></i><p>Twitter</p></a></li><li><a href="//www.facebook.com/sharer/sharer.php?u=https%3a%2f%2frobberthalff.com%2fblog%2fadding_flutter_examples_to_hugo%2f" target="_blank" class="share-btn facebook"><i class="fa fa-facebook"></i><p>Facebook</p></a></li><li><a href="//reddit.com/submit?url=https%3a%2f%2frobberthalff.com%2fblog%2fadding_flutter_examples_to_hugo%2f&title=Flutter%20Examples%20in%20Hugo" target="_blank" class="share-btn reddit"><i class="fa fa-reddit-alien"></i><p>Reddit</p></a></li><li><a href="//www.linkedin.com/shareArticle?url=https%3a%2f%2frobberthalff.com%2fblog%2fadding_flutter_examples_to_hugo%2f&title=Flutter%20Examples%20in%20Hugo" target="_blank" class="share-btn linkedin"><i class="fa fa-linkedin"></i><p>LinkedIn</p></a></li></ul></section><div id="content"><p>This article explains how to show <a href="https://flutter.dev">flutter</a> examples on your <a href="https://gohugo.io">hugo</a> powered site using a simple iframe <a href="https://gohugo.io/content-management/shortcodes">shortcode</a>.</p><h3 id="step-1-install-the-flutter-web-build-tools">Step 1: Install the flutter_web build tools</h3><p>First install the <a href="https://pub.dartlang.org/packages/webdev">webdev package</a> which provides the build tools for Flutter for web:</p><pre><code class="language-console">$ flutter pub global activate webdev
</code></pre><p>Ensure that the <code>$HOME/.pub-cache/bin</code> directory <a href="https://www.dartlang.org/tools/pub/cmd/pub-global#running-a-script-from-your-path">is in your path</a>, and then you may use the <code>webdev</code> command directly from your terminal.</p><h3 id="step-2-adding-the-flutter-web-repository-as-submodule">Step 2: Adding the flutter web repository as submodule</h3><p>Add the <a href="https://github.com/flutter/flutter_web">Flutter Web Repository</a> as a submodule to your site’s git repository:</p><pre><code class="language-bash">git submodule add git@github.com:flutter/flutter_web.git
</code></pre><p>The examples for flutter web reside in <code>flutter_web/examples</code>.</p><p>Although we could go hacking up some examples directly within the directory of this submodule it’s better to keep that source tree clean and create a new directory for our examples to live in.</p><p>e.g.</p><pre><code>mkdir -p examples/flutter
</code></pre><p>Now let’s take one of the examples from the flutter web repository and put them into our example dir:</p><pre><code>cp -r flutter_web/examples/spinning_square examples/flutter/
</code></pre><p>The main thing we have to change is the path to flutter web.</p><blockquote><p><strong>NOTE</strong>:</p><p>Ensure the path to the packages match your directory structure:</p></blockquote><p><strong>examples/flutter/spinning_square/pubspec.yaml</strong>:</p><pre><code class="language-diff">dependency_overrides:
flutter_web:
- path: ../../packages/flutter_web
+ path: ../../../flutter_web/packages/flutter_web
flutter_web_ui:
- path: ../../packages/flutter_web_ui
+ path: ../../../flutter_web/packages/flutter_web_ui
</code></pre><p>Run <code>pub get</code> to install the dependencies.</p><p>If all goes well you can run <code>webdev serve</code> within the example directory and see a spinning square if you navigate to <code>https://127.0.0.1:8080</code>.</p><p>Instead of serving this example we will want to build it instead so we can integrate it into our <a href="https://gohugo.io">hugo</a> site.</p><p>In order to do so run <code>webdev build</code>.</p><p>This will create a build directory with an <code>index.html</code> file and a <code>main.dart.js</code>.</p><p>Next just move both of these files to the static directory of your <a href="https://gohugo.io">hugo</a> installation:</p><p>e.g.</p><pre><code class="language-bash">mkdir -p static/examples/flutter/spinning_square
cp examples/flutter/spinning_square/build/index.html static/examples/flutter/spinning_square
cp examples/flutter/spinning_square/build/main.dart.js static/examples/flutter/spinning_square
</code></pre><p>If all went well the example should now be available at the path <code>/examples/flutter/spinning_square</code> of your <a href="https://gohugo.io">hugo</a> site.</p><blockquote><p>Note:</p><p>Although it’s fine to add the examples directory to git it’s probably not a smart idea to also commit the build/ directory.</p><p>So make sure to add the <code>build/</code> directory to your <code>.gitignore</code> file.</p></blockquote><h3 id="step-3-creating-a-shortcode-to-serve-the-examples">Step 3: Creating a shortcode to serve the examples</h3><p>In order to integrate this example into the site we can make a simple iframe <a href="https://gohugo.io/content-management/shortcodes">shortcode</a>.</p><p>To do so paste the following code into a file named <em>iframe.html</em> in the <em>shortcodes</em> directory:</p><p><strong>themes/[your-theme]/layouts/shortcodes/iframe.html</strong>:</p><pre><code class="language-html"><div class="iframe-container">
<iframe src="{{.Get 0}}" allowfullscreen="allowfullscreen"></iframe>
</div>
</code></pre><p>In addition we’ll add some css to make the iframe responsively scale well:</p><p><strong>themes/[your-theme]/static/css/iframe.css</strong>:</p><pre><code class="language-css">.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
</code></pre><p>This css will have to be loaded in the header of your site. For the theme I’m currently using this can be found in <code>header.html</code>.</p><p>Add something like the following to load the css:</p><pre><code class="language-html"><link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/iframe.css" />
</code></pre><p>Then from within any post we can now show our flutter example using the iframe <a href="https://gohugo.io/content-management/shortcodes">shortcode</a>:</p><pre><code class="language-html">{{< iframe "/examples/flutter/spinning_square" >}}
</code></pre><p>Which should result in:</p><div class="iframe-container"><iframe src="https://robberthalff.com/examples/flutter/spinning_square" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe></div><h3 id="step-4-missing-fontmanifest-json">Step 4: Missing FontManifest.json</h3><p>When you serve the example you might notice that <code>main.dart.js</code> will try to load a <code>FontManifest.json</code> even though the example itself is not using any fonts or icons. In order to make this file available you must create it manually. It’s contents will depend on which fonts your flutter example is using.</p><p>A good default would be:</p><pre><code class="language-json">[
{
"family": "MaterialIcons",
"fonts": [
{
"asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
}
]
}
]
</code></pre><p>For the example used within this article you would create this file at the following path:</p><p><code>static/examples/flutter/spinning_square/assets/FontManifest.json</code></p><h3 id="summary">Summary</h3><p>In order to create new flutter examples using the above setup all we have to do is.</p><ul><li>Create a flutter web example in <code>examples/flutter</code></li><li>Run <code>webdev build</code> to build the example.</li><li>Copy the files <code>index.html</code> and <code>main.dart.js</code> somewhere within the static directory of your site.</li><li>Create a FontManifest.json file within the example’s assets directory.</li><li><p>Reference the example anywhere in your posts using:</p><pre><code class="language-html">{{< iframe "/examples/flutter/[your-example-location]" >}}
</code></pre></li></ul></div><footer><ul class="stats"><li class="categories"><ul><i class="fa fa-folder"></i><li><a class="article-category-link" href="https://robberthalff.com/categories/flutter">Flutter</a></li><li><a class="article-category-link" href="https://robberthalff.com/categories/hugo">Hugo</a></li></ul></li><li class="tags"><ul></ul></li></ul></footer></article><article class="post"><div id="disqus_thread"></div><script type="application/javascript">var disqus_config = function () {
};
(function() {
if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
return;
}
var d = document, s = d.createElement('script'); s.async = true;
s.src = '//' + "robberthalff" + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();</script><noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript><a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a></article><ul class="actions pagination"><li><a href="https://robberthalff.com/blog/getting_started_with_validations/" class="button big previous">@Validations</a></li></ul><section id="share-menu"><section id="social-share-nav"><ul class="links"><header><h3>Share this post <i class="fa fa-smile-o"></i></h3></header><li><a href="//twitter.com/share?url=https%3a%2f%2frobberthalff.com%2fblog%2fadding_flutter_examples_to_hugo%2f&text=Flutter%20Examples%20in%20Hugo&via=rhalff" target="_blank" class="share-btn twitter"><i class="fa fa-twitter"></i><p>Twitter</p></a></li><li><a href="//www.facebook.com/sharer/sharer.php?u=https%3a%2f%2frobberthalff.com%2fblog%2fadding_flutter_examples_to_hugo%2f" target="_blank" class="share-btn facebook"><i class="fa fa-facebook"></i><p>Facebook</p></a></li><li><a href="//reddit.com/submit?url=https%3a%2f%2frobberthalff.com%2fblog%2fadding_flutter_examples_to_hugo%2f&title=Flutter%20Examples%20in%20Hugo" target="_blank" class="share-btn reddit"><i class="fa fa-reddit-alien"></i><p>Reddit</p></a></li><li><a href="//www.linkedin.com/shareArticle?url=https%3a%2f%2frobberthalff.com%2fblog%2fadding_flutter_examples_to_hugo%2f&title=Flutter%20Examples%20in%20Hugo" target="_blank" class="share-btn linkedin"><i class="fa fa-linkedin"></i><p>LinkedIn</p></a></li></ul></section></section></div><section id="sidebar"><section id="intro"><a href="https://robberthalff.com/"><img src="https://robberthalff.com/img/main/me.jpeg" width="" alt="RobbertHalff"></a><header><h2>RobbertHalff</h2><p>Freelance Web developer</p></header><ul class="icons"><li><a href="https://robberthalff.com/index.xml" type="application/rss+xml" target="_blank" title="RSS" class="fa fa-rss"></a></li><li><a href="//github.com/rhalff" target="_blank" title="GitHub" class="fa fa-github"></a></li><li><a href="//twitter.com/rhalff" target="_blank" title="Twitter" class="fa fa-twitter"></a></li></ul></section><section class="recent-posts"><div class="mini-posts"><header><h3>Recent Posts</h3></header><div class="posts-container"><article class="mini-post"><header><h3><a href="https://robberthalff.com/blog/adding_flutter_examples_to_hugo/">Flutter Examples in Hugo</a></h3><time class="published" datetime="2019-08-22">August 22, 2019</time></header></article><article class="mini-post"><header><h3><a href="https://robberthalff.com/blog/getting_started_with_validations/">@Validations</a></h3><time class="published" datetime="2019-08-08">August 8, 2019</time></header></article></div></div></section><section id="categories"><header><h3><a href="https://robberthalff.com/categories/">Categories</a></h3></header><p></p><article><header></header></article><p></p><p></p><article><header><a href="https://robberthalff.com/categories/flutter/">flutter</a> <span style="float:right;">2</span></header></article><p></p><p></p><article><header><a href="https://robberthalff.com/categories/dart/">dart</a> <span style="float:right;">1</span></header></article><p></p><p></p><article><header><a href="https://robberthalff.com/categories/hugo/">hugo</a> <span style="float:right;">1</span></header></article><p></p><p></p><article><header><a href="https://robberthalff.com/categories/validations/">validations</a> <span style="float:right;">1</span></header></article><p></p></section><section id="mini-bio"><h3>About</h3><p>I'm a Freelance Web Developer from the Netherlands</p><a href="https://robberthalff.com/about/" class="button">Learn More</a></section><section id="footer"><ul class="icons"><li><a href="https://robberthalff.com/index.xml" type="application/rss+xml" target="_blank" title="RSS" class="fa fa-rss"></a></li><li><a href="//github.com/rhalff" target="_blank" title="GitHub" class="fa fa-github"></a></li><li><a href="//twitter.com/rhalff" target="_blank" title="Twitter" class="fa fa-twitter"></a></li></ul><p class="copyright">© 2019 RobbertHalff . Powered by <a href="//gohugo.io" target="_blank">Hugo</a></p></section></section></div><a id="back-to-top" href="#" class="fa fa-arrow-up fa-border fa-2x"></a><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/languages/yaml.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/languages/css.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/languages/typescript.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/languages/dart.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/languages/javascript.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/languages/bash.min.js"></script><script>hljs.configure({languages: []}); hljs.initHighlightingOnLoad();</script><script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script><script src="https://robberthalff.com/js/util.js"></script><script src="https://robberthalff.com/js/main.js"></script><script src="https://robberthalff.com/js/backToTop.js"></script><script>hljs.initHighlightingOnLoad();</script><script src="//yihui.name/js/math-code.js"></script><script async src="//cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script><script src="https://robberthalff.com/js/code-tabs.js"></script></body></html>