Merge pull request #1 from OLIMINATOR/rewrite

Rewrite

.gitignore

@@ -0,0 +1,21 @@
+# build output
+.vercel/
+dist/
+.output/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.prettierignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.github
+.changeset

.prettierrc

@@ -0,0 +1,16 @@
+{
+    "printWidth": 120,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": true,
+    "overrides": [
+        {
+            "files": [".*", "*.json", "*.md", "*.toml", "*.yml"],
+            "options": {
+                "useTabs": false
+            }
+        }
+    ]
+}

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

astro.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from 'astro/config';
+
+import tailwind from '@astrojs/tailwind';
+import sitemap from '@astrojs/sitemap';
+import image from '@astrojs/image';
+import vercel from '@astrojs/vercel/static';
+import compress from 'astro-compress';
+import robotsTxt from 'astro-robots-txt';
+
+import { SITE } from './src/config';
+
+// https://astro.build/config
+export default defineConfig({
+	site: SITE.url,
+	base: '/',
+	trailingSlash: 'never',
+	output: 'static',
+	integrations: [
+		tailwind(),
+		sitemap(),
+		image(),
+		compress({
+			css: true,
+			html: true,
+			img: false,
+			js: true,
+			svg: false,
+		}),
+		robotsTxt({
+			policy: [
+				{
+					userAgent: '*',
+				},
+			],
+			sitemap: true,
+		}),
+	],
+	adapter: vercel(),
+});

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@example/basics",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/image": "^0.12.1",
+    "@astrojs/sitemap": "^1.0.0",
+    "@astrojs/tailwind": "^2.1.3",
+    "@astrojs/vercel": "^2.4.0",
+    "astro": "^1.9.0",
+    "astro-compress": "^1.1.24",
+    "autoprefixer": "^10.4.13",
+    "cssnano": "^5.1.14",
+    "tailwindcss": "^3.2.4"
+  },
+  "devDependencies": {
+    "astro-robots-txt": "^0.3.10"
+  }
+}

postcss.config.cjs

@@ -0,0 +1,17 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+
+const mode = process.env.NODE_ENV;
+const dev = mode === "development";
+
+module.exports = {
+    plugins: [
+        tailwindcss,
+        autoprefixer,
+        !dev &&
+            cssnano({
+                preset: "default",
+            }),
+    ],
+};

src/assets/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/HeadCommon.astro

@@ -0,0 +1,11 @@
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<link rel="icon" type="image/svg+xml" href="/src/assets/images/logo.png" />
+
+<link rel="preconnect" href="https://fonts.googleapis.com" /><link
+	rel="preconnect"
+	href="https://fonts.gstatic.com"
+	crossorigin
+/><link href="https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap" rel="stylesheet" media="all" />

src/components/HeadSEO.astro

@@ -0,0 +1,28 @@
+---
+import { SITE, OPEN_GRAPH } from '../config';
+---
+
+<!-- Primary Meta Tags -->
+<title>{SITE.title}</title>
+<meta name="title" content={SITE.title} />
+<meta name="description" content={SITE.title} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={SITE.url} />
+<meta property="og:site_name" content={SITE.title} />
+<meta property="og:title" content={SITE.title} />
+<meta property="og:description" content={SITE.description} />
+<meta property="og:image" content={OPEN_GRAPH.image.src} />
+<meta property="og:image:alt" content={OPEN_GRAPH.image.alt} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
+<meta property="twitter:url" content={SITE.url} />
+<meta property="twitter:title" content={SITE.title} />
+<meta property="twitter:description" content={SITE.description} />
+<meta property="twitter:image" content={OPEN_GRAPH.image.src} />
+<meta name="twitter:image:alt" content={OPEN_GRAPH.image.alt} />
+
+<meta name="theme-color" content={SITE.themeColor} />

src/components/Item.astro

@@ -0,0 +1,14 @@
+---
+import { BUTTONS } from '../config';
+---
+
+{
+	BUTTONS.map((button) => (
+		<a
+			href={button.href}
+			class={`${button.background} w-full rounded-xl border-2 border-black py-4 text-center text-xl font-bold text-white drop-shadow-[4px_5px_0_rgba(0,0,0,1)] duration-75 hover:translate-y-1 hover:translate-x-1 hover:drop-shadow-none`}
+		>
+			{button.name}
+		</a>
+	))
+}

src/components/Picture.astro

@@ -0,0 +1,7 @@
+---
+import { Image } from '@astrojs/image/components';
+
+import logo from '../assets/images/logo.png';
+---
+
+<Image src={logo} alt="" class="rounded-full w-28" /><img />

src/components/Username.astro

@@ -0,0 +1,3 @@
+<h1 class="mt-4 text-3xl font-bold text-black">
+	<span class="mr-1 text-[#0091FF]">@</span>oliminator
+</h1>

src/config.ts

@@ -0,0 +1,52 @@
+export const SITE = {
+	title: 'Oliminator Odkazy',
+	description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, placeat!',
+	url: 'https://odkazy.oliminator.net',
+	themeColor: '#FF8A00',
+};
+
+export const OPEN_GRAPH = {
+	image: {
+		src: '../assets/images/og-image.png',
+		alt: 'Odkazy text s tlačítkami',
+	},
+	twitter: 'oliminator34',
+};
+
+export const BUTTONS = [
+	{
+		name: 'YouTube',
+		background: 'bg-youtube hover:bg-youtube/80',
+		href: '/',
+	},
+	{
+		name: 'Instagram',
+		background: 'bg-instagram hover:bg-instagram/80',
+		href: '/',
+	},
+	{
+		name: 'GitHub',
+		background: 'bg-github hover:bg-github/80',
+		href: '/',
+	},
+	{
+		name: 'Discord',
+		background: 'bg-discord hover:bg-discord/80',
+		href: '/',
+	},
+	{
+		name: 'Tiwtch',
+		background: 'bg-twitch hover:bg-twitch/80',
+		href: '/',
+	},
+	{
+		name: 'Spotify',
+		background: 'bg-spotify hover:bg-spotify/80',
+		href: '/',
+	},
+	{
+		name: 'Twitter',
+		background: 'bg-twitter hover:bg-twitter/80',
+		href: '/',
+	},
+];

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,15 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
+---
+
+<!DOCTYPE html>
+<html dir="ltr" lang="sk-SK">
+	<head>
+		<HeadCommon />
+		<HeadSEO />
+	</head>
+	<body class="bg-primaryDotted bg-primaryDottedSize font-alt3">
+		<slot />
+	</body>
+</html>

src/pages/index.astro

@@ -0,0 +1,18 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Picture from '../components/Picture.astro';
+import Username from '../components/Username.astro';
+import Item from '../components/Item.astro';
+---
+
+<Layout>
+	<main class="mx-auto w-max mb-12">
+		<header class="mt-12 flex flex-col items-center">
+			<Picture />
+			<Username />
+		</header>
+		<section class="mt-6 flex w-80 flex-col gap-y-6">
+			<Item />
+		</section>
+	</main>
+</Layout>

tailwind.config.cjs

@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: {
+			colors: {
+				adobe: '#ff0000',
+				airbnb: '#fd5c63',
+				algolia: '#050f2c',
+				amazon: '#ff9900',
+				android: '#a4c639',
+				atlassian: '#003366',
+				behance: '#1769ff',
+				codepen: '#0ebeff',
+				dailymotion: '#00aaff',
+				deviantart: '#05cc47',
+				discord: '#5865F2',
+				dribbble: '#ea4c89',
+				dropbox: '#007ee5',
+				duolingo: '#7ac70c',
+				etsy: '#d5641c',
+				evernote: '#2dbe60',
+				facebook: '#3b5998',
+				feedly: '#2bb24c',
+				github: '#333',
+				gitlab: '#fc6d26',
+				google: '#4285f4',
+				instagram: '#e1306c',
+				linkedin: '#0077b5',
+				medium: '#00ab6c',
+				messenger: '#0084ff',
+				microsoft: '#f65314',
+				netflix: '#e50914',
+				pinterest: '#e60023',
+				pocket: '#ef4056',
+				react: '#00d8ff',
+				reddit: '#ff4500',
+				shopify: '#96bf48',
+				skype: '#00aff0',
+				slack: '#611f69',
+				snapchat: '#fffc00',
+				spotify: '#1db954',
+				stackoverflow: '#f48024',
+				stripe: '#6772e5',
+				telegram: '#0088cc',
+				trello: '#0079bf',
+				tumblr: '#35465c',
+				twitch: '#6441a5',
+				twitter: '#1da1f2',
+				uber: '#09091a',
+				ubuntu: '#dd4814',
+				vimeo: '#162221',
+				vue: '#42b883',
+				whatsapp: '#075e54',
+				wikipedia: '#000000',
+				youtube: '#ff0000',
+				transparent: 'transparent',
+				current: 'currentColor',
+				black: '#000',
+				white: '#fff',
+				background: '#F9F9F1',
+				blue: '#44C3EC',
+			},
+			fontFamily: {
+				default: ['Outfit', 'sans-serif'],
+			},
+			backgroundImage: {
+				primaryDotted: 'radial-gradient(#E6E6D1 1px, #F9F9F1 1px)',
+			},
+			backgroundSize: {
+				primaryDottedSize: '15px 15px',
+			},
+		},
+	},
+	plugins: [],
+};

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}