feat: add footer and social links

config.sample.toml

@@ -12,3 +12,10 @@ static_files = "static/custom"
 [auth]
 username="username"
 password="password"
+
+[social]
+facebook = ""
+instagram = ""
+linkedin = ""
+twitter = ""
+youtube = ""

home.html

@@ -40,8 +40,27 @@ <h5>{{.Intro}}</h5>
                 </a>
             </div>
             {{ end }}
+
+            <hr>
+
+            <div class="row">
+                <div class="social">
+                {{ range $k, $v := .Social }}
+                {{ if ne $v "" }}
+                <a href="{{$v}}" style="text-decoration:none;">
+                    <i data-feather="{{$k}}"></i>
+                </a>
+                {{ end }}
+                {{ end }}
+                </div>
+            </div>
+
+            <div class="row footer">
+                powered by <a href="https://github.com/rhnvrm/linkpage">LinkPage</a>
+            </div>
         </div>
         <script type="text/javascript">
+
          async function fetchAsync (url) {
              let response = await fetch(url);
              let data = await response.json();
@@ -52,5 +71,12 @@ <h5>{{.Intro}}</h5>
              return true
          }
         </script>
+        <script src="static/app/js/feather.min.js"></script>
+        <script>
+
+         document.addEventListener("DOMContentLoaded", function(event) { 
+             feather.replace()
+         });
+        </script>
     </body>
 </html>

main.go

@@ -49,6 +49,8 @@ type Config struct {
 	StaticFileDir string `koanf:"static_files"`
 
 	Auth CfgAuth `koanf:"auth"`
+
+	Social map[string]string `koanf:"social"`
 }
 
 type CfgAuth struct {
@@ -99,6 +101,8 @@ type Page struct {
 	OGPURL   string
 	OGPImage string
 	OGPDesc  string
+
+	Social map[string]string
 }
 
 type cachedTemplate struct {
@@ -292,6 +296,7 @@ func runApp(configFilePath string) {
 			LogoURL: cfg.PageLogoURL,
 			Title:   cfg.PageTitle,
 			Intro:   cfg.PageIntro,
+			Social:  cfg.Social,
 		},
 		DB: &LinkDB{db},
 		Templates: Templates{

static/app/css/app.css

@@ -5,10 +5,12 @@ body {
 .container {
   max-width: 800px;
 }
+
 .header {
   margin-top: 6rem;
   text-align: center;
 }
+
 .link {
   margin-top: 10px;
   background: #4361d8;
@@ -18,19 +20,23 @@ body {
   height: 100px;
   text-align: center;
 }
+
 .link:hover {
   background: #1d2d2c;
   border-color: #273d3b;
 }
+
 .link a {
   color: #fff;
 }
+
 .text {
   font-size: 16px;
   padding: 20px;
   text-align: center;
   width: 100%;
 }
+
 .thumbnail {
   width: 100px;
   height: 100px;
@@ -40,9 +46,11 @@ body {
   margin-top: 10px;
   display: flex;
 }
+
 .push {
   margin-left: auto;
 }
+
 .stats a {
   text-decoration: none;
   margin-right: 5px;
@@ -77,3 +85,14 @@ body {
   display: flex;
   text-decoration: none;
 }
+
+.social {
+  margin: auto;
+  width: fit-content;
+}
+
+.footer {
+  color: dimgray;
+  width: fit-content;
+  margin: auto;
+}