mirror of
https://github.com/bketelsen/bktw.git
synced 2024-12-24 10:27:02 +02:00
first post
This commit is contained in:
commit
aadc66adec
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
bktw
|
||||
node_modules
|
17
Makefile
Normal file
17
Makefile
Normal file
@ -0,0 +1,17 @@
|
||||
|
||||
all: assets/css/main.css app
|
||||
|
||||
app:
|
||||
go build
|
||||
|
||||
assets/css/main.css: src/css/main.css
|
||||
NODE_ENV=production npx tailwindcss-cli@latest build ./src/css/main.css -o ./assets/css/tailwind.css
|
||||
|
||||
.PHONY:
|
||||
linux:
|
||||
GOOS=linux GOARCH=amd64 go build
|
||||
|
||||
.PHONY:
|
||||
deploy: linux
|
||||
scp ./bktw content.brian.dev:~/bktwnew
|
||||
|
1389
assets/css/tailwind.css
Normal file
1389
assets/css/tailwind.css
Normal file
File diff suppressed because it is too large
Load Diff
BIN
assets/images/cover.jpeg
Normal file
BIN
assets/images/cover.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 121 KiB |
BIN
assets/images/example.png
Normal file
BIN
assets/images/example.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 240 KiB |
BIN
assets/images/unsplash.jpeg
Normal file
BIN
assets/images/unsplash.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 240 KiB |
124
assets/js/fastsearch.js
Normal file
124
assets/js/fastsearch.js
Normal file
@ -0,0 +1,124 @@
|
||||
var fuse; // holds our search engine
|
||||
var resList = document.getElementById('searchResults');
|
||||
var sInput = document.getElementById('searchInput');
|
||||
var first, last = null
|
||||
var resultsAvailable = false;
|
||||
|
||||
// load our search index, only executed onload
|
||||
function loadSearch() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
var data = JSON.parse(xhr.responseText);
|
||||
if (data) {
|
||||
// fuse.js options; check fuse.js website for details
|
||||
var options = {
|
||||
isCaseSensitive: false,
|
||||
shouldSort: true,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
threshold: 0.4,
|
||||
minMatchCharLength: 0,
|
||||
keys: [
|
||||
'title',
|
||||
'permalink',
|
||||
'summary',
|
||||
'content'
|
||||
]
|
||||
};
|
||||
{{ if . }}options = {{ jsonify . }}{{ end }} // load custom options from .Site.Params.fuseOpts
|
||||
fuse = new Fuse(data, options); // build the index from the json file
|
||||
}
|
||||
} else {
|
||||
console.log(xhr.responseText);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.open('GET', "../index.json");
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
|
||||
function itemGen(name, link) {
|
||||
return `<li class="post-entry"><header class="entry-header">${name} »</header><a href="${link}" aria-label="${name}"></a></li>`
|
||||
}
|
||||
|
||||
function activeToggle() {
|
||||
document.activeElement.parentElement.classList.toggle("active")
|
||||
}
|
||||
|
||||
// execute search as each character is typed
|
||||
sInput.onkeyup = function (e) {
|
||||
// run a search query (for "term") every time a letter is typed
|
||||
// in the search box
|
||||
const results = fuse.search(this.value); // the actual query being run using fuse.js
|
||||
|
||||
if (results.length !== 0) {
|
||||
// build our html if result exists
|
||||
let resultSet = ''; // our results bucket
|
||||
|
||||
for (let item in results) {
|
||||
resultSet = resultSet + itemGen(results[item].item.title, results[item].item.permalink)
|
||||
}
|
||||
|
||||
document.getElementById("searchResults").innerHTML = resultSet;
|
||||
resultsAvailable = true;
|
||||
first = resList.firstChild;
|
||||
last = resList.lastChild;
|
||||
} else {
|
||||
resultsAvailable = false;
|
||||
document.getElementById("searchResults").innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
// kb bindings
|
||||
document.onkeydown = function (e) {
|
||||
let key = e.key;
|
||||
let ae = document.activeElement;
|
||||
let inbox = document.getElementById("searchbox").contains(ae)
|
||||
|
||||
if (ae === sInput) {
|
||||
var elements = document.getElementsByClassName('active');
|
||||
while (elements.length > 0) {
|
||||
elements[0].classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
if (key === "ArrowDown" && resultsAvailable && inbox) {
|
||||
e.preventDefault();
|
||||
if (ae == sInput) {
|
||||
// if the currently focused element is the search input, focus the <a> of first <li>
|
||||
activeToggle(); // rm active class
|
||||
resList.firstChild.lastChild.focus();
|
||||
activeToggle(); // add active class
|
||||
} else if (ae.parentElement == last) {
|
||||
// if the currently focused element's parent is last, do nothing
|
||||
} else {
|
||||
// otherwise select the next search result
|
||||
activeToggle(); // rm active class
|
||||
ae.parentElement.nextSibling.lastChild.focus();
|
||||
activeToggle(); // add active class
|
||||
}
|
||||
} else if (key === "ArrowUp" && resultsAvailable && inbox) {
|
||||
e.preventDefault();
|
||||
if (ae == sInput) {
|
||||
// if the currently focused element is input box, do nothing
|
||||
} else if (ae.parentElement == first) {
|
||||
// if the currently focused element is first item, go to input box
|
||||
activeToggle(); // rm active class
|
||||
sInput.focus();
|
||||
} else {
|
||||
// otherwise select the previous search result
|
||||
activeToggle(); // rm active class
|
||||
ae.parentElement.previousSibling.lastChild.focus();
|
||||
activeToggle(); // add active class
|
||||
}
|
||||
} else if (key === "ArrowRight" && resultsAvailable && inbox) {
|
||||
ae.click(); // click on active link
|
||||
} else if (key === "Escape") {
|
||||
resultsAvailable = false;
|
||||
resList.innerHTML = sInput.value = ''; // clear inputbox and searchResults
|
||||
sInput.focus(); // shift focus to input box
|
||||
}
|
||||
}
|
BIN
assets/js/favicon.ico
Normal file
BIN
assets/js/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 66 KiB |
2255
assets/js/fuse.js
Normal file
2255
assets/js/fuse.js
Normal file
File diff suppressed because it is too large
Load Diff
44
assets/js/highlight.min.js
vendored
Normal file
44
assets/js/highlight.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
355
data.go
Normal file
355
data.go
Normal file
@ -0,0 +1,355 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"html/template"
|
||||
"time"
|
||||
|
||||
"github.com/gomarkdown/markdown"
|
||||
)
|
||||
|
||||
type Homepage struct {
|
||||
ID int `json:"id"`
|
||||
PublishedAt time.Time `json:"published_at"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
Seo struct {
|
||||
ID int `json:"id"`
|
||||
MetaTitle string `json:"metaTitle"`
|
||||
MetaDescription string `json:"metaDescription"`
|
||||
ShareImage struct {
|
||||
ID int `json:"id"`
|
||||
Name string `json:"name"`
|
||||
AlternativeText string `json:"alternativeText"`
|
||||
Caption string `json:"caption"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Formats struct {
|
||||
Thumbnail struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"thumbnail"`
|
||||
Large struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"large"`
|
||||
Medium struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"medium"`
|
||||
Small struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"small"`
|
||||
} `json:"formats"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Size float64 `json:"size"`
|
||||
URL string `json:"url"`
|
||||
PreviewURL interface{} `json:"previewUrl"`
|
||||
Provider string `json:"provider"`
|
||||
ProviderMetadata interface{} `json:"provider_metadata"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
} `json:"shareImage"`
|
||||
} `json:"seo"`
|
||||
Hero struct {
|
||||
ID int `json:"id"`
|
||||
Title string `json:"title"`
|
||||
} `json:"hero"`
|
||||
}
|
||||
|
||||
type Global struct {
|
||||
ID int `json:"id"`
|
||||
SiteName string `json:"siteName"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
Title string `json:"title"`
|
||||
Language string `json:"language"`
|
||||
SiteURL string `json:"siteURL"`
|
||||
SiteRepo string `json:"siteRepo"`
|
||||
Email string `json:"email"`
|
||||
Github string `json:"github"`
|
||||
Twitter string `json:"twitter"`
|
||||
Facebook string `json:"facebook"`
|
||||
Youtube string `json:"youtube"`
|
||||
Linkedin string `json:"linkedin"`
|
||||
Twitch string `json:"twitch"`
|
||||
DefaultSeo struct {
|
||||
ID int `json:"id"`
|
||||
MetaTitle string `json:"metaTitle"`
|
||||
MetaDescription string `json:"metaDescription"`
|
||||
ShareImage struct {
|
||||
ID int `json:"id"`
|
||||
Name string `json:"name"`
|
||||
AlternativeText string `json:"alternativeText"`
|
||||
Caption string `json:"caption"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Formats struct {
|
||||
Thumbnail struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"thumbnail"`
|
||||
Large struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"large"`
|
||||
Medium struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"medium"`
|
||||
Small struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"small"`
|
||||
} `json:"formats"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Size float64 `json:"size"`
|
||||
URL string `json:"url"`
|
||||
PreviewURL interface{} `json:"previewUrl"`
|
||||
Provider string `json:"provider"`
|
||||
ProviderMetadata interface{} `json:"provider_metadata"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
} `json:"shareImage"`
|
||||
} `json:"defaultSeo"`
|
||||
Favicon struct {
|
||||
ID int `json:"id"`
|
||||
Name string `json:"name"`
|
||||
AlternativeText string `json:"alternativeText"`
|
||||
Caption string `json:"caption"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Formats struct {
|
||||
Thumbnail struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"thumbnail"`
|
||||
Large struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"large"`
|
||||
Medium struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"medium"`
|
||||
Small struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"small"`
|
||||
} `json:"formats"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Size float64 `json:"size"`
|
||||
URL string `json:"url"`
|
||||
PreviewURL interface{} `json:"previewUrl"`
|
||||
Provider string `json:"provider"`
|
||||
ProviderMetadata interface{} `json:"provider_metadata"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
} `json:"favicon"`
|
||||
}
|
||||
|
||||
type Article struct {
|
||||
ID int `json:"id"`
|
||||
Title string `json:"title"`
|
||||
Description string `json:"description"`
|
||||
Content string `json:"content"`
|
||||
Slug string `json:"slug"`
|
||||
PublishedAt time.Time `json:"published_at"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
Category struct {
|
||||
ID int `json:"id"`
|
||||
Name string `json:"name"`
|
||||
Slug string `json:"slug"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
Description string `json:"description"`
|
||||
Image interface{} `json:"image"`
|
||||
} `json:"category"`
|
||||
Section string `json:"section"`
|
||||
Image Image `json:"image"`
|
||||
}
|
||||
|
||||
type ShortArticle struct {
|
||||
ID int `json:"id"`
|
||||
Title string `json:"title"`
|
||||
Description string `json:"description"`
|
||||
Content string `json:"content"`
|
||||
Slug string `json:"slug"`
|
||||
PublishedAt time.Time `json:"published_at"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
Category int `json:"category"`
|
||||
Section string `json:"section"`
|
||||
Image Image `json:"image"`
|
||||
}
|
||||
type Image struct {
|
||||
ID int `json:"id"`
|
||||
Name string `json:"name"`
|
||||
AlternativeText string `json:"alternativeText"`
|
||||
Caption string `json:"caption"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Formats struct {
|
||||
Thumbnail struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"thumbnail"`
|
||||
Large struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"large"`
|
||||
Medium struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"medium"`
|
||||
Small struct {
|
||||
Name string `json:"name"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Width int `json:"width"`
|
||||
Height int `json:"height"`
|
||||
Size float64 `json:"size"`
|
||||
Path interface{} `json:"path"`
|
||||
URL string `json:"url"`
|
||||
} `json:"small"`
|
||||
} `json:"formats"`
|
||||
Hash string `json:"hash"`
|
||||
Ext string `json:"ext"`
|
||||
Mime string `json:"mime"`
|
||||
Size float64 `json:"size"`
|
||||
URL string `json:"url"`
|
||||
PreviewURL interface{} `json:"previewUrl"`
|
||||
Provider string `json:"provider"`
|
||||
ProviderMetadata interface{} `json:"provider_metadata"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
}
|
||||
|
||||
func (a Article) Markdown() template.HTML {
|
||||
|
||||
return template.HTML(markdown.ToHTML([]byte(a.Content), nil, nil))
|
||||
}
|
||||
|
||||
type Category struct {
|
||||
ID int `json:"id"`
|
||||
Name string `json:"name"`
|
||||
Slug string `json:"slug"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
Description string `json:"description"`
|
||||
Image Image `json:"image"`
|
||||
Articles []ShortArticle `json:"articles"`
|
||||
}
|
8
go.mod
Normal file
8
go.mod
Normal file
@ -0,0 +1,8 @@
|
||||
module github.com/bketelsen/bktw
|
||||
|
||||
go 1.16
|
||||
|
||||
require (
|
||||
github.com/gin-gonic/gin v1.6.3
|
||||
github.com/gomarkdown/markdown v0.0.0-20210208175418-bda154fe17d8
|
||||
)
|
50
go.sum
Normal file
50
go.sum
Normal file
@ -0,0 +1,50 @@
|
||||
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
|
||||
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||
github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
|
||||
github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
|
||||
github.com/gin-gonic/gin v1.6.3 h1:ahKqKTFpO5KTPHxWZjEdPScmYaGtLo8Y4DMHoEsnp14=
|
||||
github.com/gin-gonic/gin v1.6.3/go.mod h1:75u5sXoLsGZoRN5Sgbi1eraJ4GU3++wFwWzhwvtwp4M=
|
||||
github.com/go-playground/assert/v2 v2.0.1 h1:MsBgLAaY856+nPRTKrp3/OZK38U/wa0CcBYNjji3q3A=
|
||||
github.com/go-playground/assert/v2 v2.0.1/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
|
||||
github.com/go-playground/locales v0.13.0 h1:HyWk6mgj5qFqCT5fjGBuRArbVDfE4hi8+e8ceBS/t7Q=
|
||||
github.com/go-playground/locales v0.13.0/go.mod h1:taPMhCMXrRLJO55olJkUXHZBHCxTMfnGwq/HNwmWNS8=
|
||||
github.com/go-playground/universal-translator v0.17.0 h1:icxd5fm+REJzpZx7ZfpaD876Lmtgy7VtROAbHHXk8no=
|
||||
github.com/go-playground/universal-translator v0.17.0/go.mod h1:UkSxE5sNxxRwHyU+Scu5vgOQjsIJAF8j9muTVoKLVtA=
|
||||
github.com/go-playground/validator/v10 v10.2.0 h1:KgJ0snyC2R9VXYN2rneOtQcw5aHQB1Vv0sFl1UcHBOY=
|
||||
github.com/go-playground/validator/v10 v10.2.0/go.mod h1:uOYAAleCW8F/7oMFd6aG0GOhaH6EGOAJShg8Id5JGkI=
|
||||
github.com/golang/protobuf v1.3.3 h1:gyjaxf+svBWX08ZjK86iN9geUJF0H6gp2IRKX6Nf6/I=
|
||||
github.com/golang/protobuf v1.3.3/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
|
||||
github.com/gomarkdown/markdown v0.0.0-20210208175418-bda154fe17d8 h1:nWU6p08f1VgIalT6iZyqXi4o5cZsz4X6qa87nusfcsc=
|
||||
github.com/gomarkdown/markdown v0.0.0-20210208175418-bda154fe17d8/go.mod h1:aii0r/K0ZnHv7G0KF7xy1v0A7s2Ljrb5byB7MO5p6TU=
|
||||
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
|
||||
github.com/json-iterator/go v1.1.9 h1:9yzud/Ht36ygwatGx56VwCZtlI/2AD15T1X2sjSuGns=
|
||||
github.com/json-iterator/go v1.1.9/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
|
||||
github.com/leodido/go-urn v1.2.0 h1:hpXL4XnriNwQ/ABnpepYM/1vCLWNDfUNts8dX3xTG6Y=
|
||||
github.com/leodido/go-urn v1.2.0/go.mod h1:+8+nEpDfqqsY+g338gtMEUOtuK+4dEMhiQEgxpxOKII=
|
||||
github.com/mattn/go-isatty v0.0.12 h1:wuysRhFDzyxgEmMf5xjvJ2M9dZoWAXNNr5LSBS7uHXY=
|
||||
github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
|
||||
github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421 h1:ZqeYNhU3OHLH3mGKHDcjJRFFRrJa6eAM5H+CtDdOsPc=
|
||||
github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
|
||||
github.com/modern-go/reflect2 v0.0.0-20180701023420-4b7aa43c6742 h1:Esafd1046DLDQ0W1YjYsBW+p8U2u7vzgW2SQVmlNazg=
|
||||
github.com/modern-go/reflect2 v0.0.0-20180701023420-4b7aa43c6742/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
|
||||
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
|
||||
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
|
||||
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
|
||||
github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
|
||||
github.com/stretchr/testify v1.4.0 h1:2E4SXV/wtOkTonXsotYi4li6zVWxYlZuYNCXe9XRJyk=
|
||||
github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
|
||||
github.com/ugorji/go v1.1.7 h1:/68gy2h+1mWMrwZFeD1kQialdSzAb432dtpeJ42ovdo=
|
||||
github.com/ugorji/go v1.1.7/go.mod h1:kZn38zHttfInRq0xu/PH0az30d+z6vm202qpg1oXVMw=
|
||||
github.com/ugorji/go/codec v1.1.7 h1:2SvQaVZ1ouYrrKKwoSk2pzd4A9evlKJb9oTL+OaLUSs=
|
||||
github.com/ugorji/go/codec v1.1.7/go.mod h1:Ax+UKWsSmolVDwsd+7N3ZtXu+yMGCf907BLYF3GoBXY=
|
||||
golang.org/dl v0.0.0-20190829154251-82a15e2f2ead/go.mod h1:IUMfjQLJQd4UTqG1Z90tenwKoCX93Gn3MAQJMOSBsDQ=
|
||||
golang.org/x/sys v0.0.0-20200116001909-b77594299b42 h1:vEOn+mP2zCOVzKckCZy6YsCtDblrpj/w7B9nxGNELpg=
|
||||
golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
||||
golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
|
||||
golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
|
||||
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
|
||||
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
|
||||
gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
|
||||
gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10=
|
||||
gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
|
193
main.go
Normal file
193
main.go
Normal file
@ -0,0 +1,193 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"encoding/json"
|
||||
"errors"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"io/ioutil"
|
||||
"net/http"
|
||||
"sync"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
//go:embed assets/* templates/*
|
||||
var f embed.FS
|
||||
var articles []Article
|
||||
var homepage Homepage
|
||||
var global Global
|
||||
var categories []Category
|
||||
var updateMutex sync.Mutex
|
||||
|
||||
type HomeContext struct {
|
||||
Articles []Article
|
||||
Homepage Homepage
|
||||
Global Global
|
||||
Categories []Category
|
||||
}
|
||||
|
||||
type PostContext struct {
|
||||
Article Article
|
||||
Homepage Homepage
|
||||
Global Global
|
||||
Categories []Category
|
||||
}
|
||||
type CategoryContext struct {
|
||||
Homepage Homepage
|
||||
Global Global
|
||||
Category Category
|
||||
}
|
||||
|
||||
func BySlug(slug string) (Article, error) {
|
||||
for _, article := range articles {
|
||||
fmt.Println(slug, article.Slug)
|
||||
if article.Slug == slug {
|
||||
return article, nil
|
||||
}
|
||||
}
|
||||
return Article{}, errors.New("Article not found")
|
||||
}
|
||||
|
||||
func CategoryBySlug(slug string) (Category, error) {
|
||||
for _, cat := range categories {
|
||||
fmt.Println(slug, cat.Slug)
|
||||
if cat.Slug == slug {
|
||||
return cat, nil
|
||||
}
|
||||
}
|
||||
return Category{}, errors.New("Category not found")
|
||||
}
|
||||
func getArticles() {
|
||||
updateMutex.Lock()
|
||||
defer updateMutex.Unlock()
|
||||
resp, err := http.Get("https://content.brian.dev/articles")
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
body, err := ioutil.ReadAll(resp.Body)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
defer resp.Body.Close()
|
||||
if err := json.Unmarshal(body, &articles); err != nil {
|
||||
panic(err)
|
||||
}
|
||||
}
|
||||
func getCategories() {
|
||||
updateMutex.Lock()
|
||||
defer updateMutex.Unlock()
|
||||
resp, err := http.Get("https://content.brian.dev/categories")
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
body, err := ioutil.ReadAll(resp.Body)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
defer resp.Body.Close()
|
||||
if err := json.Unmarshal(body, &categories); err != nil {
|
||||
panic(err)
|
||||
}
|
||||
}
|
||||
|
||||
func getGlobal() {
|
||||
updateMutex.Lock()
|
||||
defer updateMutex.Unlock()
|
||||
resp, err := http.Get("https://content.brian.dev/global")
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
body, err := ioutil.ReadAll(resp.Body)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
defer resp.Body.Close()
|
||||
if err := json.Unmarshal(body, &global); err != nil {
|
||||
panic(err)
|
||||
}
|
||||
}
|
||||
func getHomepage() {
|
||||
updateMutex.Lock()
|
||||
defer updateMutex.Unlock()
|
||||
resp, err := http.Get("https://content.brian.dev/homepage")
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
body, err := ioutil.ReadAll(resp.Body)
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
defer resp.Body.Close()
|
||||
if err := json.Unmarshal(body, &homepage); err != nil {
|
||||
panic(err)
|
||||
}
|
||||
}
|
||||
func main() {
|
||||
|
||||
router := gin.Default()
|
||||
|
||||
templ := template.Must(template.New("").ParseFS(f, "templates/*.tmpl"))
|
||||
router.SetHTMLTemplate(templ)
|
||||
|
||||
getArticles()
|
||||
getGlobal()
|
||||
getHomepage()
|
||||
getCategories()
|
||||
// example: /public/assets/images/example.png
|
||||
router.StaticFS("/public", http.FS(f))
|
||||
|
||||
router.GET("/", func(c *gin.Context) {
|
||||
c.HTML(http.StatusOK, "index.tmpl", HomeContext{
|
||||
Articles: articles,
|
||||
Global: global,
|
||||
Homepage: homepage,
|
||||
Categories: categories,
|
||||
})
|
||||
})
|
||||
|
||||
router.GET("/posts/:slug", func(c *gin.Context) {
|
||||
slug := c.Params.ByName("slug")
|
||||
article, err := BySlug(slug)
|
||||
if err != nil {
|
||||
c.Error(err)
|
||||
}
|
||||
c.HTML(http.StatusOK, "article.tmpl", PostContext{
|
||||
Article: article,
|
||||
Global: global,
|
||||
Homepage: homepage,
|
||||
Categories: categories,
|
||||
})
|
||||
})
|
||||
router.GET("/category/:slug", func(c *gin.Context) {
|
||||
slug := c.Params.ByName("slug")
|
||||
cat, err := CategoryBySlug(slug)
|
||||
if err != nil {
|
||||
c.Error(err)
|
||||
}
|
||||
c.HTML(http.StatusOK, "category.tmpl", CategoryContext{
|
||||
Global: global,
|
||||
Homepage: homepage,
|
||||
Category: cat,
|
||||
})
|
||||
})
|
||||
router.POST("/content", func(c *gin.Context) {
|
||||
getArticles()
|
||||
getGlobal()
|
||||
getHomepage()
|
||||
getCategories()
|
||||
|
||||
c.JSON(200, gin.H{"content": "Updated"})
|
||||
})
|
||||
router.GET("favicon.ico", func(c *gin.Context) {
|
||||
file, _ := f.ReadFile("assets/favicon.ico")
|
||||
c.Data(
|
||||
http.StatusOK,
|
||||
"image/x-icon",
|
||||
file,
|
||||
)
|
||||
})
|
||||
|
||||
router.Run(":8181")
|
||||
}
|
3203
package-lock.json
generated
Normal file
3203
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
11
package.json
Normal file
11
package.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.2.4",
|
||||
"postcss": "^8.2.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"tailwindcss": "^2.0.3"
|
||||
},
|
||||
"scripts": {
|
||||
"css" : "postcss src/css/main.css -o assets/css/main.css"
|
||||
}
|
||||
}
|
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
}
|
||||
}
|
3
src/css/main.css
Normal file
3
src/css/main.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
13
tailwind.config.js
Normal file
13
tailwind.config.js
Normal file
@ -0,0 +1,13 @@
|
||||
module.exports = {
|
||||
purge: [
|
||||
'./templates/**/*.tmpl',
|
||||
],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
BIN
templates/.DS_Store
vendored
Normal file
BIN
templates/.DS_Store
vendored
Normal file
Binary file not shown.
3
templates/404.html
Normal file
3
templates/404.html
Normal file
@ -0,0 +1,3 @@
|
||||
{{ define "main" }}
|
||||
<div class="not-found">404</div>
|
||||
{{ end }}{{/* end main */}}
|
171
templates/article.guts
Normal file
171
templates/article.guts
Normal file
@ -0,0 +1,171 @@
|
||||
<div class="flex flex-wrap justify-between pt-12 -mx-6">
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/225/800x600"
|
||||
class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc
|
||||
commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/3106804/800x600"
|
||||
class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Aliquam at ip Aliquam at ipsum eu nunc commodo posuere
|
||||
et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/539527/800x600"
|
||||
class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--1/2 col -->
|
||||
<div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/3657445/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/2 col -->
|
||||
<div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 flex-row bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/764827/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--2/3 col -->
|
||||
<div class="w-full md:w-2/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/325867/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/1118905/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
253
templates/article.tmpl
Normal file
253
templates/article.tmpl
Normal file
@ -0,0 +1,253 @@
|
||||
{{define "content"}}Hi, this is article template{{end}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{{ .Global.Title }}</title>
|
||||
<meta name="author" content="name">
|
||||
<meta name="description" content="description here">
|
||||
<meta name="keywords" content="keywords,here">
|
||||
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/@tailwindcss/typography@0.2.x/dist/typography.min.css"
|
||||
/>
|
||||
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">
|
||||
<style>
|
||||
.smooth {transition: box-shadow 0.3s ease-in-out;}
|
||||
::selection{background-color: aliceblue}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white font-sans leading-normal tracking-normal">
|
||||
|
||||
<!--Nav-->
|
||||
<nav class="bg-gray-900 p-4 mt-0 w-full">
|
||||
<div class="container mx-auto flex items-center">
|
||||
<div class="flex text-white font-extrabold">
|
||||
<a class="flex text-white text-base no-underline hover:text-white hover:no-underline" href="/">
|
||||
👻 <span class="hidden w-0 md:w-auto md:block pl-1">{{ .Global.Title }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex pl-4 text-sm">
|
||||
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
|
||||
<li class="mr-2">
|
||||
<a class="inline-block py-2 px-2 text-white no-underline" href="index.html">HOME</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-2" href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-2" href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-2" href="#">LINK</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!--slide in nav-->
|
||||
<div id="header" class="bg-white fixed w-full z-10 top-0 hidden animated" style="opacity: .95;">
|
||||
<div class="bg-white">
|
||||
<div class="flex flex-wrap items-center content-center">
|
||||
<div class="flex w-1/2 justify-start text-white font-extrabold">
|
||||
<a class="flex text-gray-900 no-underline hover:text-gray-900 hover:no-underline pl-2" href="/">
|
||||
👻 <span class="hidden w-0 md:w-auto md:block pl-1">{{ .Global.Title }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex w-1/2 justify-end content-center">
|
||||
<p class="hidden sm:block mr-3 text-center h-14 p-4 text-xs"><span class="pr-2">Share this</span> 👉</p>
|
||||
<a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://twitter.com/intent/tweet?url=#" style="background-color:#33b1ff;">
|
||||
<svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg>
|
||||
</a>
|
||||
<a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://www.facebook.com/sharer/sharer.php?u=#" style="background-color:#005e99">
|
||||
<svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--Progress bar-->
|
||||
<div id="progress" class="h-1 bg-white shadow" style="background:linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0);"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Title-->
|
||||
<div class="text-center pt-16 md:pt-32">
|
||||
<p class="text-sm md:text-base text-green-500 font-bold">08 APRIL 2019 <span class="text-gray-900">/</span> GETTING STARTED</p>
|
||||
<h1 class="font-bold break-normal text-3xl md:text-5xl">{{ .Article.Title }} </h1>
|
||||
</div>
|
||||
|
||||
<!--image-->
|
||||
<div class="container w-full max-w-6xl mx-auto bg-white bg-cover mt-8 rounded" style="background-image:url('https://source.unsplash.com/collection/1118905/'); height: 75vh;"></div>
|
||||
|
||||
<!--Container-->
|
||||
<div class="container max-w-5xl mx-auto -mt-32">
|
||||
|
||||
<div class="mx-0 sm:mx-6">
|
||||
|
||||
<div class="bg-white w-full p-8 md:p-24 text-xl md:text-2xl text-gray-800 leading-normal" style="font-family:Georgia,serif;">
|
||||
|
||||
<!--Post Content-->
|
||||
|
||||
|
||||
<!--Lead Para-->
|
||||
<p class="text-2xl md:text-3xl mb-5">
|
||||
{{ .Article.Description }}
|
||||
</p>
|
||||
|
||||
<div class="text-gray-800 prose lg:prose-xl">
|
||||
{{ .Article.Markdown }}
|
||||
</div>
|
||||
<!--/ Post Content-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--Subscribe-->
|
||||
<div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
|
||||
<h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
|
||||
<h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts delivered right to your inbox</h3>
|
||||
<div class="w-full text-center pt-4">
|
||||
<form action="#">
|
||||
<div class="max-w-sm mx-auto p-1 pr-0 flex flex-wrap items-center">
|
||||
<input type="email" placeholder="youremail@example.com" class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
|
||||
<button type="submit" class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Subscribe-->
|
||||
|
||||
|
||||
<!--Author-->
|
||||
<div class="flex w-full items-center font-sans p-8 md:p-24">
|
||||
<img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
|
||||
<p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
|
||||
</div>
|
||||
<div class="justify-end">
|
||||
<button class="bg-transparent border border-gray-500 hover:border-green-500 text-xs text-gray-500 hover:text-green-500 font-bold py-2 px-4 rounded-full">Read More</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Author-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bg-gray-200">
|
||||
|
||||
<div class="container w-full max-w-6xl mx-auto px-2 py-8">
|
||||
<div class="flex flex-wrap -mx-2">
|
||||
<div class="w-full md:w-1/3 px-2 pb-12">
|
||||
<div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
|
||||
<a href="#" class="no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/_AjqGGafofE/400x200" class="h-48 w-full rounded-t shadow-lg">
|
||||
<div class="p-6 h-auto md:h-48">
|
||||
<p class="text-gray-600 text-xs md:text-sm">GETTING STARTED</p>
|
||||
<div class="font-bold text-xl text-gray-900">Lorem ipsum dolor sit amet.</div>
|
||||
<p class="text-gray-800 font-serif text-base mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
|
||||
<img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">2 MIN READ</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-2 pb-12">
|
||||
<div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
|
||||
<a href="#" class="no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/_AjqGGafofE/400x200" class="h-48 w-full rounded-t shadow">
|
||||
<div class="p-6 h-auto md:h-48">
|
||||
<p class="text-gray-600 text-xs md:text-sm">UNDERWATER</p>
|
||||
<div class="font-bold text-xl text-gray-900">Biolumini algae diatomeae ecology.</div>
|
||||
<p class="text-gray-800 font-serif text-base mb-5">
|
||||
Lorem ipsum dolor sit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
|
||||
<img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">4 MIN READ</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-2 pb-12">
|
||||
<div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
|
||||
<a href="#" class="no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/DEa8_vxKlEo/400x200" class="h-48 w-full rounded-t shadow">
|
||||
<div class="p-6 h-auto md:h-48">
|
||||
<p class="text-gray-600 text-xs md:text-sm">FOREST</p>
|
||||
<div class="font-bold text-xl text-gray-900">What is life but a teardrop in the eye of infinity?</div>
|
||||
<p class="text-gray-800 font-serif text-base mb-5">
|
||||
Mollis pretium integer eros et dui orci, lectus nec elit sagittis neque. Dignissim ac nullam semper aliquet volutpat, ut scelerisque.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
|
||||
<img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">7 MIN READ</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{{ template "footer.tmpl" . }}
|
||||
|
||||
|
||||
<script>
|
||||
/* Progress bar */
|
||||
//Source: https://alligator.io/js/progress-bar-javascript-css-variables/
|
||||
var h = document.documentElement,
|
||||
b = document.body,
|
||||
st = 'scrollTop',
|
||||
sh = 'scrollHeight',
|
||||
progress = document.querySelector('#progress'),
|
||||
scroll;
|
||||
var scrollpos = window.scrollY;
|
||||
var header = document.getElementById("header");
|
||||
|
||||
document.addEventListener('scroll', function() {
|
||||
|
||||
/*Refresh scroll % width*/
|
||||
scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
|
||||
progress.style.setProperty('--scroll', scroll + '%');
|
||||
|
||||
/*Apply classes for slide in bar*/
|
||||
scrollpos = window.scrollY;
|
||||
|
||||
if(scrollpos > 100){
|
||||
header.classList.remove("hidden");
|
||||
header.classList.remove("fadeOutUp");
|
||||
header.classList.add("slideInDown");
|
||||
}
|
||||
else {
|
||||
header.classList.remove("slideInDown");
|
||||
header.classList.add("fadeOutUp");
|
||||
header.classList.add("hidden");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
179
templates/article.tmpl.save
Normal file
179
templates/article.tmpl.save
Normal file
@ -0,0 +1,179 @@
|
||||
{{define "content"}}Hi, this is article template{{end}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{{ .Global.Title }}</title>
|
||||
<meta name="author" content="name">
|
||||
<meta name="description" content="description here">
|
||||
<meta name="keywords" content="keywords,here">
|
||||
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||
<!--Replace with your tailwind.css once created-->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-200 font-sans leading-normal tracking-normal">
|
||||
|
||||
<!--Header-->
|
||||
<div class="w-full m-0 p-0 bg-cover bg-bottom"
|
||||
style="background-image:url('/public/assets/images/cover.jpeg'); height: 60vh; max-height:460px;">
|
||||
<div class="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
|
||||
<!--Title-->
|
||||
<p class="text-white font-extrabold text-3xl md:text-5xl">
|
||||
{{ .Homepage.Hero.Title }}
|
||||
</p>
|
||||
<p class="text-xl md:text-2xl text-gray-500">Welcome to my Blog</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Container-->
|
||||
<div class="container px-4 md:px-0 max-w-6xl mx-auto -mt-32">
|
||||
|
||||
<div class="mx-0 sm:mx-6">
|
||||
|
||||
<!--Nav-->
|
||||
<nav class="mt-0 w-full">
|
||||
<div class="container mx-auto flex items-center">
|
||||
|
||||
<div class="flex w-1/2 pl-4 text-sm">
|
||||
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
|
||||
<li class="mr-2">
|
||||
<a class="inline-block py-2 px-2 text-white no-underline hover:underline"
|
||||
href="post.html">POST</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="post_vue.html">POST_VUE</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex w-1/2 justify-end content-center">
|
||||
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar"
|
||||
data-tippy-content="@bketelsen" href="https://twitter.com/intent/tweet?url=#">
|
||||
<svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path
|
||||
d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar"
|
||||
data-tippy-content="#facebook_id" href="https://www.facebook.com/sharer/sharer.php?u=#">
|
||||
<svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t">
|
||||
|
||||
<!--Lead Card-->
|
||||
<div class="flex h-full bg-white rounded overflow-hidden shadow-lg">
|
||||
<a href="post.html" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<div class="w-full md:w-2/3 rounded-t">
|
||||
<img src="https://source.unsplash.com/collection/494263/800x600"
|
||||
class="h-full w-full shadow">
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/3 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">👋 Welcome fellow Tailwind CSS
|
||||
and Ghost fan</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
This starter template is an attempt to replicate the default Ghost theme "Casper"
|
||||
using Tailwind CSS and vanilla Javascript.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<!--/Lead Card-->
|
||||
|
||||
|
||||
<!--Posts Container-->
|
||||
{{ template "content" . }}
|
||||
<!--/ Post Content-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--Subscribe-->
|
||||
<div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
|
||||
<h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
|
||||
<h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts
|
||||
delivered right to your inbox</h3>
|
||||
<div class="w-full text-center pt-4">
|
||||
<form action="#">
|
||||
<div class="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center">
|
||||
<input type="email" placeholder="youremail@example.com"
|
||||
class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
|
||||
<button type="submit"
|
||||
class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Subscribe-->
|
||||
|
||||
|
||||
<!--Author-->
|
||||
<div class="flex w-full items-center font-sans p-8 md:p-24">
|
||||
<img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
|
||||
<p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a
|
||||
class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
|
||||
href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
|
||||
</div>
|
||||
<div class="justify-end">
|
||||
<button
|
||||
class="bg-transparent border border-gray-500 hover:border-green-500 text-xs text-gray-500 hover:text-green-500 font-bold py-2 px-4 rounded-full">Read
|
||||
More</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Author-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{{ template "footer.tmpl" . }}
|
||||
|
||||
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
|
||||
<script src="https://unpkg.com/tippy.js@4"></script>
|
||||
<script>
|
||||
//Init tooltips
|
||||
tippy('.avatar')
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
348
templates/category.tmpl
Normal file
348
templates/category.tmpl
Normal file
@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{{ .Global.Title }}</title>
|
||||
<meta name="author" content="name">
|
||||
<meta name="description" content="description here">
|
||||
<meta name="keywords" content="keywords,here">
|
||||
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||
<!--Replace with your tailwind.css once created-->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-200 font-sans leading-normal tracking-normal">
|
||||
|
||||
<!--Header-->
|
||||
<div class="w-full m-0 p-0 bg-cover bg-bottom"
|
||||
style="background-image:url('/public/assets/images/cover.jpeg'); height: 60vh; max-height:460px;">
|
||||
<div class="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
|
||||
<!--Title-->
|
||||
<p class="text-white font-extrabold text-3xl md:text-5xl">
|
||||
{{ .Category.Name }}
|
||||
</p>
|
||||
<p class="text-xl md:text-2xl text-gray-500">{{ .Category.Description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Container-->
|
||||
<div class="container px-4 md:px-0 max-w-6xl mx-auto -mt-32">
|
||||
|
||||
<div class="mx-0 sm:mx-6">
|
||||
|
||||
<!--Nav-->
|
||||
<nav class="mt-0 w-full">
|
||||
<div class="container mx-auto flex items-center">
|
||||
|
||||
<div class="flex w-1/2 pl-4 text-sm">
|
||||
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
|
||||
<li class="mr-2">
|
||||
<a class="inline-block py-2 px-2 text-white no-underline hover:underline"
|
||||
href="post.html">POST</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="post_vue.html">POST_VUE</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex w-1/2 justify-end content-center">
|
||||
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar"
|
||||
data-tippy-content="@bketelsen" href="https://twitter.com/intent/tweet?url=#">
|
||||
<svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path
|
||||
d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar"
|
||||
data-tippy-content="#facebook_id" href="https://www.facebook.com/sharer/sharer.php?u=#">
|
||||
<svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t">
|
||||
|
||||
<!--Lead Card-->
|
||||
<div class="flex h-full bg-white rounded overflow-hidden shadow-lg">
|
||||
<a href="post.html" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<div class="w-full md:w-2/3 rounded-t">
|
||||
<img src="https://source.unsplash.com/collection/494263/800x600"
|
||||
class="h-full w-full shadow">
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/3 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">👋 Welcome fellow Tailwind CSS
|
||||
and Ghost fan</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
This starter template is an attempt to replicate the default Ghost theme "Casper"
|
||||
using Tailwind CSS and vanilla Javascript.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<!--/Lead Card-->
|
||||
|
||||
|
||||
<!--Posts Container-->
|
||||
<div class="flex flex-wrap justify-between pt-12 -mx-6">
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/225/800x600"
|
||||
class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc
|
||||
commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/3106804/800x600"
|
||||
class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Aliquam at ip Aliquam at ipsum eu nunc commodo posuere
|
||||
et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/539527/800x600"
|
||||
class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--1/2 col -->
|
||||
<div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/3657445/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/2 col -->
|
||||
<div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 flex-row bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/764827/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--2/3 col -->
|
||||
<div class="w-full md:w-2/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/325867/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/1118905/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/ Post Content-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--Subscribe-->
|
||||
<div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
|
||||
<h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
|
||||
<h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts
|
||||
delivered right to your inbox</h3>
|
||||
<div class="w-full text-center pt-4">
|
||||
<form action="#">
|
||||
<div class="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center">
|
||||
<input type="email" placeholder="youremail@example.com"
|
||||
class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
|
||||
<button type="submit"
|
||||
class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Subscribe-->
|
||||
|
||||
|
||||
<!--Author-->
|
||||
<div class="flex w-full items-center font-sans p-8 md:p-24">
|
||||
<img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
|
||||
<p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a
|
||||
class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
|
||||
href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
|
||||
</div>
|
||||
<div class="justify-end">
|
||||
<button
|
||||
class="bg-transparent border border-gray-500 hover:border-green-500 text-xs text-gray-500 hover:text-green-500 font-bold py-2 px-4 rounded-full">Read
|
||||
More</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Author-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{{ template "footer.tmpl" . }}
|
||||
|
||||
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
|
||||
<script src="https://unpkg.com/tippy.js@4"></script>
|
||||
<script>
|
||||
//Init tooltips
|
||||
tippy('.avatar')
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
34
templates/footer.tmpl
Normal file
34
templates/footer.tmpl
Normal file
@ -0,0 +1,34 @@
|
||||
<footer class="bg-gray-900">
|
||||
<div class="container max-w-6xl mx-auto flex items-center px-2 py-8">
|
||||
|
||||
<div class="w-full mx-auto flex flex-wrap items-center">
|
||||
<div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
|
||||
<a class="text-gray-900 no-underline hover:text-gray-900 hover:no-underline" href="#">
|
||||
👻 <span class="text-base text-gray-200">{{ .Global.Title }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
|
||||
<ul class="list-reset flex justify-center flex-1 md:flex-none items-center">
|
||||
<li>
|
||||
<a class="inline-block py-2 px-3 text-white no-underline" href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
|
||||
href="#">link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
|
||||
href="#">link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
|
||||
href="#">link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</footer>
|
344
templates/index.tmpl
Normal file
344
templates/index.tmpl
Normal file
@ -0,0 +1,344 @@
|
||||
{{define "content"}}
|
||||
<div class="flex flex-wrap justify-between pt-12 -mx-6">
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/225/800x600" class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc
|
||||
commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/3106804/800x600" class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Aliquam at ip Aliquam at ipsum eu nunc commodo posuere
|
||||
et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/539527/800x600" class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--1/2 col -->
|
||||
<div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/3657445/800x600" class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/2 col -->
|
||||
<div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 flex-row bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/764827/800x600" class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--2/3 col -->
|
||||
<div class="w-full md:w-2/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/325867/800x600" class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/1118905/800x600" class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>{{end}}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{{ .Global.Title }}</title>
|
||||
<meta name="author" content="name">
|
||||
<meta name="description" content="description here">
|
||||
<meta name="keywords" content="keywords,here">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="/public/assets/css/tailwind.css" rel="stylesheet">
|
||||
<!--Replace with your tailwind.css once created-->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-200 font-sans leading-normal tracking-normal">
|
||||
|
||||
<!--Header-->
|
||||
<div class="w-full m-0 p-0 bg-cover bg-bottom"
|
||||
style="background-image:url('/public/assets/images/cover.jpeg'); height: 60vh; max-height:460px;">
|
||||
<div class="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
|
||||
<!--Title-->
|
||||
<p class="text-white font-extrabold text-3xl md:text-5xl">
|
||||
{{ .Homepage.Hero.Title }}
|
||||
</p>
|
||||
<p class="text-xl md:text-2xl text-gray-500">This is NOT a real Blog, it's a demo</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Container-->
|
||||
<div class="container px-4 md:px-0 max-w-6xl mx-auto -mt-32">
|
||||
|
||||
<div class="mx-0 sm:mx-6">
|
||||
|
||||
<!--Nav-->
|
||||
<nav class="mt-0 w-full">
|
||||
<div class="container mx-auto flex items-center">
|
||||
|
||||
<div class="flex w-1/2 pl-4 text-sm">
|
||||
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
|
||||
<li class="mr-2">
|
||||
<a class="inline-block py-2 px-2 text-white no-underline hover:underline"
|
||||
href="post.html">POST</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="post_vue.html">POST_VUE</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex w-1/2 justify-end content-center">
|
||||
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar"
|
||||
data-tippy-content="@bketelsen" href="https://twitter.com/intent/tweet?url=#">
|
||||
<svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path
|
||||
d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar"
|
||||
data-tippy-content="#facebook_id" href="https://www.facebook.com/sharer/sharer.php?u=#">
|
||||
<svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t">
|
||||
|
||||
<!--Lead Card-->
|
||||
<div class="flex h-full bg-white rounded overflow-hidden shadow-lg">
|
||||
<a href="/posts/test6" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<div class="w-full md:w-2/3 rounded-t">
|
||||
<img src="https://source.unsplash.com/collection/494263/800x600"
|
||||
class="h-full w-full shadow">
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/3 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">👋 Welcome fellow Tailwind CSS
|
||||
and Ghost fan</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
This starter template is an attempt to replicate the default Ghost theme "Casper"
|
||||
using Tailwind CSS and vanilla Javascript.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<!--/Lead Card-->
|
||||
|
||||
|
||||
<!--Posts Container-->
|
||||
{{ template "content" . }}
|
||||
<!--/ Post Content-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--Subscribe-->
|
||||
<div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
|
||||
<h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
|
||||
<h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts
|
||||
delivered right to your inbox</h3>
|
||||
<div class="w-full text-center pt-4">
|
||||
<form action="#">
|
||||
<div class="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center">
|
||||
<input type="email" placeholder="youremail@example.com"
|
||||
class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
|
||||
<button type="submit"
|
||||
class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Subscribe-->
|
||||
|
||||
|
||||
<!--Author-->
|
||||
<div class="flex w-full items-center font-sans p-8 md:p-24">
|
||||
<img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
|
||||
<p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a
|
||||
class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
|
||||
href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
|
||||
</div>
|
||||
<div class="justify-end">
|
||||
<button
|
||||
class="bg-transparent border border-gray-500 hover:border-green-500 text-xs text-gray-500 hover:text-green-500 font-bold py-2 px-4 rounded-full">Read
|
||||
More</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Author-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{{ template "footer.tmpl" . }}
|
||||
|
||||
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
|
||||
<script src="https://unpkg.com/tippy.js@4"></script>
|
||||
<script>
|
||||
//Init tooltips
|
||||
tippy('.avatar')
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
325
templates/index.tmpl.original
Normal file
325
templates/index.tmpl.original
Normal file
@ -0,0 +1,325 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{{ .Global.Title }}</title>
|
||||
<meta name="author" content="name">
|
||||
<meta name="description" content="description here">
|
||||
<meta name="keywords" content="keywords,here">
|
||||
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> <!--Replace with your tailwind.css once created-->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="bg-gray-200 font-sans leading-normal tracking-normal">
|
||||
|
||||
<!--Header-->
|
||||
<div class="w-full m-0 p-0 bg-cover bg-bottom" style="background-image:url('public/assets/images/cover.jpeg'); height: 60vh; max-height:460px;">
|
||||
<div class="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
|
||||
<!--Title-->
|
||||
<p class="text-white font-extrabold text-3xl md:text-5xl">
|
||||
{{ .Homepage.Hero.Title }}
|
||||
</p>
|
||||
<p class="text-xl md:text-2xl text-gray-500">Welcome to my Blog</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Container-->
|
||||
<div class="container px-4 md:px-0 max-w-6xl mx-auto -mt-32">
|
||||
|
||||
<div class="mx-0 sm:mx-6">
|
||||
|
||||
<!--Nav-->
|
||||
<nav class="mt-0 w-full">
|
||||
<div class="container mx-auto flex items-center">
|
||||
|
||||
<div class="flex w-1/2 pl-4 text-sm">
|
||||
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
|
||||
<li class="mr-2">
|
||||
<a class="inline-block py-2 px-2 text-white no-underline hover:underline" href="post.html">POST</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" href="post_vue.html">POST_VUE</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex w-1/2 justify-end content-center">
|
||||
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" data-tippy-content="@bketelsen" href="https://twitter.com/intent/tweet?url=#">
|
||||
<svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg>
|
||||
</a>
|
||||
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" data-tippy-content="#facebook_id" href="https://www.facebook.com/sharer/sharer.php?u=#">
|
||||
<svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t">
|
||||
|
||||
<!--Lead Card-->
|
||||
<div class="flex h-full bg-white rounded overflow-hidden shadow-lg">
|
||||
<a href="post.html" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<div class="w-full md:w-2/3 rounded-t">
|
||||
<img src="https://source.unsplash.com/collection/494263/800x600" class="h-full w-full shadow">
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/3 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">👋 Welcome fellow Tailwind CSS and Ghost fan</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
This starter template is an attempt to replicate the default Ghost theme "Casper" using Tailwind CSS and vanilla Javascript.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<!--/Lead Card-->
|
||||
|
||||
|
||||
<!--Posts Container-->
|
||||
<div class="flex flex-wrap justify-between pt-12 -mx-6">
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/225/800x600" class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/3106804/800x600" class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ip Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/539527/800x600" class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--1/2 col -->
|
||||
<div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/3657445/800x600" class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/2 col -->
|
||||
<div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 flex-row bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/764827/800x600" class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--2/3 col -->
|
||||
<div class="w-full md:w-2/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/325867/800x600" class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/1118905/800x600" class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/ Post Content-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--Subscribe-->
|
||||
<div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
|
||||
<h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
|
||||
<h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts delivered right to your inbox</h3>
|
||||
<div class="w-full text-center pt-4">
|
||||
<form action="#">
|
||||
<div class="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center">
|
||||
<input type="email" placeholder="youremail@example.com" class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
|
||||
<button type="submit" class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Subscribe-->
|
||||
|
||||
|
||||
<!--Author-->
|
||||
<div class="flex w-full items-center font-sans p-8 md:p-24">
|
||||
<img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
|
||||
<p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
|
||||
</div>
|
||||
<div class="justify-end">
|
||||
<button class="bg-transparent border border-gray-500 hover:border-green-500 text-xs text-gray-500 hover:text-green-500 font-bold py-2 px-4 rounded-full">Read More</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Author-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bg-gray-900">
|
||||
<div class="container max-w-6xl mx-auto flex items-center px-2 py-8">
|
||||
|
||||
<div class="w-full mx-auto flex flex-wrap items-center">
|
||||
<div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
|
||||
<a class="text-gray-900 no-underline hover:text-gray-900 hover:no-underline" href="#">
|
||||
👻 <span class="text-base text-gray-200">Ghostwind CSS</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
|
||||
<ul class="list-reset flex justify-center flex-1 md:flex-none items-center">
|
||||
<li>
|
||||
<a class="inline-block py-2 px-3 text-white no-underline" href="#">Active</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
|
||||
<script src="https://unpkg.com/tippy.js@4"></script>
|
||||
<script>
|
||||
//Init tooltips
|
||||
tippy('.avatar')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
348
templates/index.tmpl.save
Normal file
348
templates/index.tmpl.save
Normal file
@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{{ .Global.Title }}</title>
|
||||
<meta name="author" content="name">
|
||||
<meta name="description" content="description here">
|
||||
<meta name="keywords" content="keywords,here">
|
||||
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||
<!--Replace with your tailwind.css once created-->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-200 font-sans leading-normal tracking-normal">
|
||||
|
||||
<!--Header-->
|
||||
<div class="w-full m-0 p-0 bg-cover bg-bottom"
|
||||
style="background-image:url('/public/assets/images/cover.jpeg'); height: 60vh; max-height:460px;">
|
||||
<div class="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
|
||||
<!--Title-->
|
||||
<p class="text-white font-extrabold text-3xl md:text-5xl">
|
||||
{{ .Homepage.Hero.Title }}
|
||||
</p>
|
||||
<p class="text-xl md:text-2xl text-gray-500">Welcome to my Blog</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Container-->
|
||||
<div class="container px-4 md:px-0 max-w-6xl mx-auto -mt-32">
|
||||
|
||||
<div class="mx-0 sm:mx-6">
|
||||
|
||||
<!--Nav-->
|
||||
<nav class="mt-0 w-full">
|
||||
<div class="container mx-auto flex items-center">
|
||||
|
||||
<div class="flex w-1/2 pl-4 text-sm">
|
||||
<ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
|
||||
<li class="mr-2">
|
||||
<a class="inline-block py-2 px-2 text-white no-underline hover:underline"
|
||||
href="post.html">POST</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="#">LINK</a>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2"
|
||||
href="post_vue.html">POST_VUE</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex w-1/2 justify-end content-center">
|
||||
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar"
|
||||
data-tippy-content="@bketelsen" href="https://twitter.com/intent/tweet?url=#">
|
||||
<svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path
|
||||
d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar"
|
||||
data-tippy-content="#facebook_id" href="https://www.facebook.com/sharer/sharer.php?u=#">
|
||||
<svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t">
|
||||
|
||||
<!--Lead Card-->
|
||||
<div class="flex h-full bg-white rounded overflow-hidden shadow-lg">
|
||||
<a href="post.html" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<div class="w-full md:w-2/3 rounded-t">
|
||||
<img src="https://source.unsplash.com/collection/494263/800x600"
|
||||
class="h-full w-full shadow">
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/3 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">👋 Welcome fellow Tailwind CSS
|
||||
and Ghost fan</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
This starter template is an attempt to replicate the default Ghost theme "Casper"
|
||||
using Tailwind CSS and vanilla Javascript.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<!--/Lead Card-->
|
||||
|
||||
|
||||
<!--Posts Container-->
|
||||
<div class="flex flex-wrap justify-between pt-12 -mx-6">
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/225/800x600"
|
||||
class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc
|
||||
commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/3106804/800x600"
|
||||
class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Aliquam at ip Aliquam at ipsum eu nunc commodo posuere
|
||||
et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/539527/800x600"
|
||||
class="h-64 w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--1/2 col -->
|
||||
<div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/3657445/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/2 col -->
|
||||
<div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 flex-row bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/764827/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--2/3 col -->
|
||||
<div class="w-full md:w-2/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/325867/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--1/3 col -->
|
||||
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
|
||||
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
|
||||
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
|
||||
<img src="https://source.unsplash.com/collection/1118905/800x600"
|
||||
class="h-full w-full rounded-t pb-6">
|
||||
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
|
||||
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.
|
||||
</div>
|
||||
<p class="text-gray-800 font-serif text-base px-6 mb-5">
|
||||
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name"
|
||||
src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--/ Post Content-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--Subscribe-->
|
||||
<div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
|
||||
<h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
|
||||
<h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts
|
||||
delivered right to your inbox</h3>
|
||||
<div class="w-full text-center pt-4">
|
||||
<form action="#">
|
||||
<div class="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center">
|
||||
<input type="email" placeholder="youremail@example.com"
|
||||
class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
|
||||
<button type="submit"
|
||||
class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Subscribe-->
|
||||
|
||||
|
||||
<!--Author-->
|
||||
<div class="flex w-full items-center font-sans p-8 md:p-24">
|
||||
<img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
|
||||
<div class="flex-1">
|
||||
<p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
|
||||
<p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a
|
||||
class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
|
||||
href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
|
||||
</div>
|
||||
<div class="justify-end">
|
||||
<button
|
||||
class="bg-transparent border border-gray-500 hover:border-green-500 text-xs text-gray-500 hover:text-green-500 font-bold py-2 px-4 rounded-full">Read
|
||||
More</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--/Author-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{{ template "footer.tmpl" . }}
|
||||
|
||||
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
|
||||
<script src="https://unpkg.com/tippy.js@4"></script>
|
||||
<script>
|
||||
//Init tooltips
|
||||
tippy('.avatar')
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
7
templates/robots.txt
Normal file
7
templates/robots.txt
Normal file
@ -0,0 +1,7 @@
|
||||
User-agent: *
|
||||
{{- if hugo.IsProduction | or (eq .Site.Params.env "production") }}
|
||||
Disallow:
|
||||
{{- else }}
|
||||
Disallow: /
|
||||
{{- end }}
|
||||
Sitemap: {{ "sitemap.xml" | absURL }}
|
Loading…
Reference in New Issue
Block a user