Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

feat: Add home yap page. #48

Merged
merged 1 commit into from
Jan 18, 2024
Merged

feat: Add home yap page. #48

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 201 additions & 13 deletions cmd/gopcomm/yap/home_yap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,203 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<p>Go+ Community <a href="/p/123">written in Go+</a></p>
<p><a href="/edit">New Article</a></p>
<p>Article List:</p>
<ul>
{{range .Items}}
<li>Title: <a href="/p/{{.ID}}">{{.Title}}</a> (<a href="/edit?id={{.ID}}">edit</a>)</li>
{{end}}
</ul>
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
</head>

<body class="bg-gray-100">
<header
class="bg-cover bg-center"
style="
height: 300px;
background-image: url('https://github.com/goplus/community/assets/47499836/46d97d22-a97b-4580-b2c8-abb9db98563a');
"
>
<nav class="border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
<div
class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl"
>
<a href="https://github.com/goplus/gop" class="flex items-center">
<img
src="https://github.com/goplus/community/assets/47499836/19900f7d-ddbb-495b-b45b-8fd2397394be"
class="mr-3 h-6 sm:h-9"
alt="Go+ Community Logo"
/>
</a>
<div class="flex items-center lg:order-2">
<button
type="button"
class="text-white hover:text-white border border-white-700 hover:bg-white-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
>
Sign in
</button>
</div>
<div
class="hidden justify-between items-center w-1/2 lg:flex lg:w-auto lg:order-1"
id="mobile-menu-2"
>
<form style="width: 500px">
<label
for="default-search"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
>Search</label
>
<div class="relative">
<div
class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
>
<svg
class="w-4 h-4 text-gray-500 dark:text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
/>
</svg>
</div>
<input
type="search"
id="default-search"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Search Mockups, Logos..."
required
/>
<button
type="submit"
class="text-white absolute end-2.5 bottom-2.5 bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Search
</button>
</div>
</form>
</div>
</div>
</nav>
</header>

<section class="text-gray-600 body-font overflow-hidden" style="margin-top:-200px">
<div class="container px-5 py-6 mx-auto w-1/2">
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400 bg-white" style="padding: auto !important;">
<li class="m-1 px-6">
<a href="#" class="inline-flex items-center justify-center p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg dark:text-blue-500 dark:border-blue-500 group">
<svg class="w-4 h-4 me-2 text-blue-600 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
<path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"/>
</svg>BLOG
</a>
</li>
<li class="m-1 px-6">
<a href="#" class="inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group active" aria-current="page">
<svg class="w-4 h-4 me-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
</svg>VIDEO
</a>
</li>
<li class="m-1 px-6">
<a href="#" class="inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group">
<svg class="w-4 h-4 me-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M5 11.424V1a1 1 0 1 0-2 0v10.424a3.228 3.228 0 0 0 0 6.152V19a1 1 0 1 0 2 0v-1.424a3.228 3.228 0 0 0 0-6.152ZM19.25 14.5A3.243 3.243 0 0 0 17 11.424V1a1 1 0 0 0-2 0v10.424a3.227 3.227 0 0 0 0 6.152V19a1 1 0 1 0 2 0v-1.424a3.243 3.243 0 0 0 2.25-3.076Zm-6-9A3.243 3.243 0 0 0 11 2.424V1a1 1 0 0 0-2 0v1.424a3.228 3.228 0 0 0 0 6.152V19a1 1 0 1 0 2 0V8.576A3.243 3.243 0 0 0 13.25 5.5Z"/>
</svg>STEM
</a>
</li>
<li class="m-1 px-6">
<a href="#" class="inline-flex items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group">
<svg class="w-4 h-4 me-2 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
<path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
</svg>COMMUNITY
</a>
</li>
</ul>
</div>
</section>

<section class="text-gray-600 body-font overflow-hidden">
<div class="container px-6 py-2 mx-auto bg-white rounded-lg">
<div class="-my-8 divide-y-2 divide-gray-100">
<div class="py-8 flex flex-wrap md:flex-nowrap">
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
<span class="font-semibold title-font text-gray-700"
>CATEGORY</span
>
<span class="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
</div>
<div class="md:flex-grow">
<h2 class="text-2xl font-medium text-gray-900 title-font mb-2">
Bitters hashtag waistcoat fashion axe chia unicorn
</h2>
<p class="leading-relaxed">
Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft beer.
</p>
<a class="text-blue-500 inline-flex items-center mt-4"
>Learn More
<svg
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
{{range .Items}}
<div class="py-8 flex flex-wrap md:flex-nowrap">
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
<span class="font-semibold title-font text-gray-700"
>CATEGORY</span
>
<span class="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
</div>
<div class="md:flex-grow">
<h2 class="text-2xl font-medium text-gray-900 title-font mb-2">
Title: {{.Title}}
</h2>
<p class="leading-relaxed">
Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft beer.
</p>
<a class="text-blue-500 inline-flex items-center mt-4"
>Learn More
<svg
class="w-4 h-4 ml-2"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
{{end}}
</div>
</div>
</section>
</body>
</html>