Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

prepare for localization following Hugo standards #29

Merged
merged 2 commits into from
Jul 24, 2020

Conversation

eighthave
Copy link
Contributor

The moves the index contents into the content/ subdir, following the Hugo standard practice. That will make that page localizable. Then this also moves "chrome" strings into the standard Hugo i18n layout, with the strings for each language in a "data" file.

The only differences in the site are:

  • The HTML comments in the index are now retained in the final HTML, since Hugo treats HTML comments as its own comments in the layouts/ subdir.
  • Cosmetic entry ordering in sitemap.xml.
diff -uw /tmp/public/index.html public/index.html
--- /tmp/public/index.html	2020-05-01 17:34:58.323470624 +0200
+++ public/index.html	2020-05-04 10:01:16.070403626 +0200
@@ -81,7 +81,6 @@
 <div class="content-section-b">
   <div class="container page-index">
 
-
 <div class="clearfix"></div>
 <h1 class="title"><strong>REUSE</strong> SOFTWARE</h1>
 
@@ -92,13 +91,13 @@
   <strong>Adopting our recommendations is as easy as one-two-three</strong>!
 </p>
 
-
+<!-- STEPS -->
 <div class="row vertical-align">
   <div class="reuse-logo col-md-4">
     <img src="/img/reuse.png" alt="Logo of REUSE" />
   </div>
   <div class="col-md-8">
-    
+    <!-- Step 1 -->
     <div class="reuse-step row">
       <div class="reuse-step-no col-md-1 col-md-offset-0">
         <span style="color:orangered;">1.</span>
@@ -107,7 +106,7 @@
         <p>Choose and provide licenses</p>
       </div>
     </div>
-    
+    <!-- Step 2 -->
     <div class="reuse-step row">
       <div class="reuse-step-no col-md-1 col-md-offset-1">
         <span style="color:orange;">2.</span>
@@ -116,7 +115,7 @@
         <p>Add copyright and licensing information to each file</p>
       </div>
     </div>
-    
+    <!-- Step 3 -->
     <div class="reuse-step row">
       <div class="reuse-step-no col-md-1 col-md-offset-2">
         <span style="color:green;">3.</span>
@@ -145,6 +144,7 @@
 
 <p>Copyright and licensing is difficult, especially when reusing software from different projects that are released under various different licenses. REUSE was started by the <a href="https://fsfe.org">Free Software Foundation Europe</a> (FSFE) to provide a set of recommendations to make licensing your Free Software projects easier. Not only do these recommendations make it easier for you to declare the licenses under which your works are released, but they also make it easier for a computer to understand how your project is licensed.</p>
 
+<!-- Developers -->
 
 <div class="reuse-tops row vertical-align">
   <div class="icon col-sm-2"><i class="fas fa-code"></i></div>
@@ -153,7 +153,7 @@
     <p>The license of your project sets the terms under which others can reuse your software. That is why you should make sure that it is clear for everyone which parts of your software are under which license. REUSE safeguards your intentions and assists you in this process. Have a look at our <a href="/dev">tools section</a> to learn about the tool, inclusion in CI/CD processes, and more.</p>
   </div>
 </div>
-
+<!-- Reusers -->
 <div class="reuse-tops row vertical-align">
   <div class="icon col-sm-2"><i class="fas fa-redo"></i></div>
   <div class="col-sm-10">
@@ -161,7 +161,7 @@
     <p>Free Software enables you to build on top of the work of others and therefore innovate quickly. But the more external components you use, the harder it is to keep an overview of copyright holders and their licensing choices. With REUSE, each file holds the necessary information, and your repo transparently contains all used licenses.</p>
   </div>
 </div>
-
+<!-- Legal experts -->
 <div class="reuse-tops row vertical-align">
   <div class="icon col-sm-2"><i class="fas fa-balance-scale"></i></div>
   <div class="col-sm-10">
Common subdirectories: /tmp/public/js and public/js
Common subdirectories: /tmp/public/materials and public/materials
diff -uw /tmp/public/sitemap.xml public/sitemap.xml
--- /tmp/public/sitemap.xml	2020-05-01 17:34:58.327470600 +0200
+++ public/sitemap.xml	2020-05-04 10:01:16.070403626 +0200
@@ -3,6 +3,10 @@
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
   
   <url>
+    <loc>https://reuse.software/</loc>
+  </url>
+  
+  <url>
     <loc>https://reuse.software/categories/</loc>
     <priority>0</priority>
   </url>
@@ -20,11 +24,6 @@
   </url>
   
   <url>
-    <loc>https://reuse.software/</loc>
-    <priority>0</priority>
-  </url>
-  
-  <url>
     <loc>https://reuse.software/tags/</loc>
     <priority>0</priority>
   </url>
Common subdirectories: /tmp/public/tags and public/tags

@eighthave eighthave force-pushed the prepare-for-localization branch 2 times, most recently from fa1b0b5 to f0e73d1 Compare May 8, 2020 10:39
@mxmehl
Copy link
Member

mxmehl commented Jul 23, 2020

Thanks a bunch! With the commented config I was able to build it. All subsites looks as expected, but one problem on the index:

--- /tmp/index_old.html	2020-07-23 17:15:26.573371833 +0200
+++ /tmp/index_new.html	2020-07-23 17:13:34.623440806 +0200
@@ -81,24 +81,21 @@
 <div class="content-section-b">
   <div class="container page-index">
 
-
 <div class="clearfix"></div>
 <h1 class="title"><strong>REUSE</strong> SOFTWARE</h1>
-
 <p class="lead intro">
   We make licensing easy for humans and machines alike. We solve a
   fundamental issue that Free Software licensing has at the very source:
   what license is a file licensed under, and who owns the copyright?
   <strong>Adopting our recommendations is as easy as one-two-three</strong>!
 </p>
-
-
+<!-- STEPS -->
 <div class="row vertical-align">
   <div class="reuse-logo col-md-4">
     <img src="/img/reuse.png" alt="Logo of REUSE" />
   </div>
   <div class="col-md-8">
-    
+    <!-- Step 1 -->
     <div class="reuse-step row">
       <div class="reuse-step-no col-md-1 col-md-offset-0">
         <span style="color:orangered;">1.</span>
@@ -107,7 +104,7 @@
         <p>Choose and provide licenses</p>
       </div>
     </div>
-    
+    <!-- Step 2 -->
     <div class="reuse-step row">
       <div class="reuse-step-no col-md-1 col-md-offset-1">
         <span style="color:orange;">2.</span>
@@ -116,7 +113,7 @@
         <p>Add copyright and licensing information to each file</p>
       </div>
     </div>
-    
+    <!-- Step 3 -->
     <div class="reuse-step row">
       <div class="reuse-step-no col-md-1 col-md-offset-2">
         <span style="color:green;">3.</span>
@@ -127,9 +124,7 @@
     </div>
   </div>
 </div>
-
 <hr class="intro-divider">
-
 <div class="intro-message">
   <center>
     <video controls="controls" poster="/img/poster.jpg" crossorigin="crossorigin">
@@ -137,15 +132,13 @@
       <source src="https://download.fsfe.org/videos/reuse/reuse_software_en_desktop.webm" type='video/webm; codecs="vp9, opus"' media="screen and (min-device-width:1000px)" />
       <source src="https://download.fsfe.org/videos/reuse/reuse_software_en_mobile.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="screen and (max-device-width:999px)" />
       <source src="https://download.fsfe.org/videos/reuse/reuse_software_en_mobile.webm" type='video/webm; codecs="vp9, opus"' media="screen and (max-device-width:999px)" />
-
-      <track src="https://download.fsfe.org/videos/reuse/subtitles/webvtt/reuse_en.vtt" kind="subtitles" srclang="en" label="English">
-    </video>
+<pre><code>  &lt;track src=&quot;https://download.fsfe.org/videos/reuse/subtitles/webvtt/reuse_en.vtt&quot; kind=&quot;subtitles&quot; srclang=&quot;en&quot; label=&quot;English&quot;&gt;
+&lt;/video&gt;
+</code></pre>
   </center>
 </div>
-
 <p>Copyright and licensing is difficult, especially when reusing software from different projects that are released under various different licenses. REUSE was started by the <a href="https://fsfe.org">Free Software Foundation Europe</a> (FSFE) to provide a set of recommendations to make licensing your Free Software projects easier. Not only do these recommendations make it easier for you to declare the licenses under which your works are released, but they also make it easier for a computer to understand how your project is licensed.</p>
-
-
+<!-- Developers -->
 <div class="reuse-tops row vertical-align">
   <div class="icon col-sm-2"><i class="fas fa-code"></i></div>
   <div class="col-sm-10">
@@ -153,7 +146,7 @@
     <p>The license of your project sets the terms under which others can reuse your software. That is why you should make sure that it is clear for everyone which parts of your software are under which license. REUSE safeguards your intentions and assists you in this process. Have a look at our <a href="/dev">tools section</a> to learn about the tool, inclusion in CI/CD processes, and more.</p>
   </div>
 </div>
-
+<!-- Reusers -->
 <div class="reuse-tops row vertical-align">
   <div class="icon col-sm-2"><i class="fas fa-redo"></i></div>
   <div class="col-sm-10">
@@ -161,7 +154,7 @@
     <p>Free Software enables you to build on top of the work of others and therefore innovate quickly. But the more external components you use, the harder it is to keep an overview of copyright holders and their licensing choices. With REUSE, each file holds the necessary information, and your repo transparently contains all used licenses.</p>
   </div>
 </div>
-
+<!-- Legal experts -->
 <div class="reuse-tops row vertical-align">
   <div class="icon col-sm-2"><i class="fas fa-balance-scale"></i></div>
   <div class="col-sm-10">

The comments are as you said and no problem, but look at the <track element. Why is it enclosing it inside a pre/code block? I played around a little bit and didn't make it work normally. Do you know why?

@eighthave
Copy link
Contributor Author

It looks like hugo is getting confused by the HTML, since the file is actually .md. In Markdown, a big indentation means a code block. I removed all leading spaces, then it rendered the <track... fine:

diff --git a/site/content/_index.md b/site/content/_index.md
index 05fb29c..f7f2f4b 100644
--- a/site/content/_index.md
+++ b/site/content/_index.md
@@ -59,7 +59,7 @@
       <source src="https://download.fsfe.org/videos/reuse/reuse_software_en_mobile.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="screen and (max-device-width:999px)" />
       <source src="https://download.fsfe.org/videos/reuse/reuse_software_en_mobile.webm" type='video/webm; codecs="vp9, opus"' media="screen and (max-device-width:999px)" />
 
-      <track src="https://download.fsfe.org/videos/reuse/subtitles/webvtt/reuse_en.vtt" kind="subtitles" srclang="en" label="English">
+<track src="https://download.fsfe.org/videos/reuse/subtitles/webvtt/reuse_en.vtt" kind="subtitles" srclang="en" label="English">
     </video>
   </center>
 </div>

@eighthave
Copy link
Contributor Author

Changing the file from .md to .html seems to have fixed the code block issue. I updated the merge request

@mxmehl
Copy link
Member

mxmehl commented Jul 24, 2020

Excellent, thanks! LGTM and will merge

@mxmehl mxmehl merged commit 7acbead into fsfe:master Jul 24, 2020
@eighthave eighthave deleted the prepare-for-localization branch August 19, 2020 12:27
eighthave added a commit to eighthave/reuse-website that referenced this pull request Aug 19, 2020
mxmehl pushed a commit that referenced this pull request Oct 23, 2020
mxmehl pushed a commit that referenced this pull request Oct 23, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants